mirror of
https://github.com/EasyTier/EasyTier.git
synced 2026-05-07 18:24:36 +00:00
introduce uptime monitor for easytier public nodes (#1250)
This commit is contained in:
Sijie.Sun
@@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<div class="submit-node">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<el-button type="primary" @click="$router.back()" class="back-btn">
|
||||
<el-icon>
|
||||
<ArrowLeft />
|
||||
</el-icon>
|
||||
返回
|
||||
</el-button>
|
||||
<h1>提交共享节点</h1>
|
||||
<p class="subtitle">分享您的EasyTier节点，为社区贡献力量</p>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="20" justify="center">
|
||||
<el-col :span="16">
|
||||
<!-- 提交表单 -->
|
||||
<el-card class="form-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
<span>节点信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<NodeForm ref="formRef" @submit="handleSubmit" :submitting="submitting" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 侧边栏信息 -->
|
||||
<el-col :span="8">
|
||||
<el-card class="info-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
<span>提交须知</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="info-content">
|
||||
<div class="info-item">
|
||||
<el-icon color="#409EFF">
|
||||
<CircleCheck />
|
||||
</el-icon>
|
||||
<div>
|
||||
<h4>节点要求</h4>
|
||||
<p>确保您的节点稳定运行，具有良好的网络连接</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<el-icon color="#67C23A">
|
||||
<Lock />
|
||||
</el-icon>
|
||||
<div>
|
||||
<h4>隐私保护</h4>
|
||||
<p>关键信息仅社区管理员可见</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<el-icon color="#E6A23C">
|
||||
<Warning />
|
||||
</el-icon>
|
||||
<div>
|
||||
<h4>注意事项</h4>
|
||||
<p>请确保节点信息准确，避免提交虚假信息</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<el-icon color="#F56C6C">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<div>
|
||||
<h4>移除条件</h4>
|
||||
<p>长期离线或不稳定的节点将被自动移除</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<el-icon color="#F56C6C">
|
||||
<DocumentChecked />
|
||||
</el-icon>
|
||||
<div>
|
||||
<h4>审核机制</h4>
|
||||
<p>所有节点提交均需要审核，审核通过后才会展示在节点列表中</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<el-card class="stats-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-icon>
|
||||
<DataAnalysis />
|
||||
</el-icon>
|
||||
<span>社区统计</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="stats-content">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ communityStats.totalNodes }}</div>
|
||||
<div class="stat-label">总节点数</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ communityStats.activeNodes }}</div>
|
||||
<div class="stat-label">在线节点</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { nodeApi } from '../api'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Plus,
|
||||
InfoFilled,
|
||||
CircleCheck,
|
||||
Lock,
|
||||
Warning,
|
||||
DocumentChecked,
|
||||
Delete,
|
||||
DataAnalysis
|
||||
} from '@element-plus/icons-vue'
|
||||
import NodeForm from '../components/NodeForm.vue'
|
||||
|
||||
const formRef = ref()
|
||||
const router = useRouter()
|
||||
const submitting = ref(false)
|
||||
|
||||
// 社区统计数据
|
||||
const communityStats = reactive({
|
||||
totalNodes: 0,
|
||||
activeNodes: 0,
|
||||
})
|
||||
|
||||
const handleSubmit = async (submitData) => {
|
||||
try {
|
||||
const response = await nodeApi.createNode(submitData)
|
||||
|
||||
if (response.success) {
|
||||
ElMessage.success('节点提交成功！')
|
||||
ElMessageBox.confirm(
|
||||
'节点已成功提交，等待管理员审核后将会展示在节点列表中。如果信息填写错误请重新提交或者联系管理员更改。',
|
||||
'提交成功',
|
||||
{
|
||||
confirmButtonText: '查看列表',
|
||||
cancelButtonText: '继续提交',
|
||||
type: 'success'
|
||||
}
|
||||
).then(() => {
|
||||
router.push('/')
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
} else {
|
||||
ElMessage.error(response.error || '提交失败，请重试')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('提交节点失败:', error)
|
||||
ElMessage.error('提交失败，请检查网络连接')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchCommunityStats = async () => {
|
||||
try {
|
||||
const response = await nodeApi.getNodes({ page: 1, per_page: 1 })
|
||||
if (response.success && response.data) {
|
||||
communityStats.totalNodes = response.data.total
|
||||
|
||||
// 获取活跃节点数
|
||||
const activeResponse = await nodeApi.getNodes({ page: 1, per_page: 1, is_active: true })
|
||||
if (activeResponse.success && activeResponse.data) {
|
||||
communityStats.activeNodes = activeResponse.data.total
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取社区统计失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
fetchCommunityStats()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.submit-node {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #606266;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.info-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-item h4 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.info-item p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stats-card :deep(.el-card__header) {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.stats-card :deep(.card-header) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stats-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.terms-content {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.terms-content h3 {
|
||||
color: #303133;
|
||||
margin: 20px 0 10px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.terms-content h3:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.terms-content p {
|
||||
margin: 5px 0;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.submit-node {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
position: static;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.submit-section {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user