EasyTier/easytier-contrib/easytier-uptime/frontend/src/components/NodeForm.vue

<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="left"
      @submit.prevent="handleSubmit">
      <el-form-item label="节点名称" prop="name" required>
        <el-input v-model="form.name" placeholder="请输入节点名称，如：北京-联通-01" maxlength="100" show-word-limit clearable>
          <template #prefix>
            <el-icon>
              <Monitor />
            </el-icon>
          </template>
        </el-input>
        <div class="form-tip">建议使用地区-运营商-编号的格式命名</div>
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="主机地址" prop="host" required>
            <el-input v-model="form.host" placeholder="请输入IP地址或域名" clearable>
              <template #prefix>
                <el-icon>
                  <Location />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="端口" prop="port" required>
            <el-input-number v-model="form.port" :min="1" :max="65535" placeholder="端口号" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="协议类型" prop="protocol" required>
        <el-radio-group v-model="form.protocol">
          <el-radio value="tcp">TCP</el-radio>
          <el-radio value="udp">UDP</el-radio>
          <el-radio value="ws">WebSocket</el-radio>
          <el-radio value="wss">WebSocket Secure</el-radio>
        </el-radio-group>
        <div class="form-tip">选择节点支持的连接协议</div>
      </el-form-item>

      <el-form-item label="允许中转" prop="allow_relay" required>
        <el-radio-group v-model="form.allow_relay">
          <el-radio :value="true">允许中转数据</el-radio>
          <el-radio :value="false">仅用于打洞</el-radio>
        </el-radio-group>
        <div class="form-tip">选择节点是否允许中转其他用户的数据流量</div>
      </el-form-item>

      <el-form-item label="网络名称" prop="network_name" required>
        <el-input v-model="form.network_name" placeholder="请输入EasyTier网络名称" maxlength="100" clearable>
          <template #prefix>
            <el-icon>
              <Connection />
            </el-icon>
          </template>
        </el-input>
        <div class="form-tip">与 EasyTier 的 network name 一致，用于后端探活</div>
      </el-form-item>

      <el-form-item label="网络密码" prop="network_secret" required>
        <el-input v-model="form.network_secret" type="password" placeholder="请输入网络密码" maxlength="100" clearable
          show-password>
          <template #prefix>
            <el-icon>
              <Lock />
            </el-icon>
          </template>
        </el-input>
        <div class="form-tip">与 EasyTier 的 network secret 一致</div>
      </el-form-item>

      <el-form-item label="最大网络数" prop="max_connections" required>
        <el-input-number v-model="form.max_connections" :min="1" :max="10000" placeholder="最大网络数量"
          style="width: 200px" />
        <div class="form-tip">节点能够承载的最大网络数量</div>
      </el-form-item>

      <el-form-item label="节点描述" prop="description">
        <el-input v-model="form.description" type="textarea" :rows="4" placeholder="请描述您的节点特点，如：地理位置、网络质量、使用限制等"
          maxlength="500" show-word-limit />
        <div class="form-tip">详细描述有助于用户选择合适的节点</div>
      </el-form-item>

      <!-- 联系方式 -->
      <el-form-item label="联系方式" prop="contact_info">
        <div class="contact-section">
          <el-form-item label="微信" prop="wechat">
            <el-input v-model="form.wechat" placeholder="请输入微信号" maxlength="50" clearable>
              <template #prefix>
                <el-icon>
                  <ChatDotRound />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="QQ" prop="qq_number">
            <el-input v-model="form.qq_number" placeholder="请输入QQ号" maxlength="20" clearable>
              <template #prefix>
                <el-icon>
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="邮箱" prop="mail">
            <el-input v-model="form.mail" placeholder="请输入邮箱地址" maxlength="100" clearable>
              <template #prefix>
                <el-icon>
                  <Message />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <div class="form-tip">请至少填写一种联系方式，便于节点问题时联系您（仅管理员可见）</div>
        </div>
      </el-form-item>

      <!-- 连接测试 -->
      <el-form-item label="连接测试">
        <div class="test-section">
          <el-button type="warning" @click="testConnection" :loading="testing" :disabled="!canTest">
            <el-icon>
              <Connection />
            </el-icon>
            测试连接
          </el-button>
          <div v-if="testResult" class="test-result">
            <el-tag :type="testResult.success ? 'success' : 'danger'" size="large">
              {{ testResult.success ? '连接成功' : '连接失败' }}
            </el-tag>
            <span v-if="testResult.message" class="test-message">
              {{ testResult.message }}
            </span>
          </div>
        </div>
        <div class="form-tip">建议在提交前测试连接以确保节点可用</div>
      </el-form-item>

      <!-- 使用条款 -->
      <el-form-item prop="agreed" v-if="props.showAgreement">
        <el-checkbox v-model="form.agreed">
          我已阅读并同意
          <el-button type="primary" link @click="showTerms = true">
            《节点共享协议》
          </el-button>
        </el-checkbox>
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <div class="submit-section">
          <el-button type="primary" size="large" @click="handleSubmit" :loading="submitting"
            :disabled="!form.agreed && props.showAgreement">
            <el-icon>
              <Upload />
            </el-icon>
            提交节点
          </el-button>
          <el-button size="large" @click="resetFields">
            <el-icon>
              <RefreshLeft />
            </el-icon>
            重置表单
          </el-button>
        </div>
      </el-form-item>
    </el-form> <!-- 使用条款对话框 -->

    <el-dialog v-model="showTerms" title="节点共享协议" width="600px">
      <div class="terms-content">
        <h3>1. 节点共享原则</h3>
        <p>• 节点提供者应确保节点的稳定性和可用性</p>
        <p>• 不得利用共享节点进行违法违规活动</p>
        <p>• 尊重其他用户的使用权益</p>

        <h3>2. 服务质量要求</h3>
        <p>• 节点应保持7x24小时稳定运行</p>
        <p>• 网络延迟应控制在合理范围内</p>
        <p>• 及时处理连接问题和故障</p>

        <h3>3. 数据安全</h3>
        <p>• 不得记录或泄露用户传输数据</p>
        <p>• 保护用户隐私和数据安全</p>
        <p>• 遵守相关法律法规</p>

        <h3>4. 免责声明</h3>
        <p>• 平台不对节点服务质量承担责任</p>
        <p>• 用户使用节点服务的风险自担</p>
        <p>• 平台有权移除不符合要求的节点</p>
      </div>

      <template #footer>
        <el-button @click="showTerms = false">关闭</el-button>
        <el-button type="primary" @click="acceptTerms">同意并关闭</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import {
  Monitor,
  Location,
  PriceTag,
  Connection,
  Upload,
  Edit,
  RefreshLeft,
  ChatDotRound,
  User,
  Message
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { nodeApi } from '../api'

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      name: '',
      host: '',
      port: 11010,
      protocol: 'tcp',
      allow_relay: true,
      network_name: '',
      network_secret: '',
      max_connections: 100,
      description: '',
      wechat: '',
      qq_number: '',
      mail: '',
      agreed: false
    })
  },
  submitting: {
    type: Boolean,
    default: false
  },
  submitText: {
    type: String,
    default: '提交节点'
  },
  submitIcon: {
    type: String,
    default: 'Upload'
  },
  showConnectionTest: {
    type: Boolean,
    default: true
  },
  showAgreement: {
    type: Boolean,
    default: true
  },
  showCancel: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'submit', 'reset', 'cancel', 'show-terms'])

const formRef = ref()
const testing = ref(false)
const testResult = ref(null)
const showTerms = ref(false)

// 表单数据
const form = reactive({ ...props.modelValue })

// 监听props变化，更新表单数据
watch(() => props.modelValue, (newValue) => {
  Object.assign(form, newValue)
}, { deep: true })

// 监听表单变化，向上传递
watch(form, (newValue) => {
  emit('update:modelValue', { ...newValue })
}, { deep: true })

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入节点名称', trigger: 'blur' },
    { min: 1, max: 100, message: '节点名称长度应在1-100个字符之间', trigger: 'blur' }
  ],
  host: [
    { required: true, message: '请输入主机地址', trigger: 'blur' },
    { min: 1, max: 255, message: '主机地址长度应在1-255个字符之间', trigger: 'blur' },
    {
      pattern: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$|^[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?)*$/,
      message: '请输入有效的IP地址或域名',
      trigger: 'blur'
    }
  ],
  port: [
    { required: true, message: '请输入端口号', trigger: 'blur' },
    { type: 'number', min: 1, max: 65535, message: '端口号应在1-65535之间', trigger: 'blur' }
  ],
  protocol: [
    { required: true, message: '请选择协议类型', trigger: 'change' }
  ],
  max_connections: [
    { required: true, message: '请输入最大连接数', trigger: 'blur' },
    { type: 'number', min: 1, max: 10000, message: '最大连接数应在1-10000之间', trigger: 'blur' }
  ],
  version: [
    { max: 50, message: '版本信息长度不能超过50个字符', trigger: 'blur' }
  ],
  description: [
    { max: 500, message: '描述长度不能超过500个字符', trigger: 'blur' }
  ],
  wechat: [
    { max: 50, message: '微信号长度不能超过50个字符', trigger: 'blur' }
  ],
  qq_number: [
    { max: 20, message: 'QQ号长度不能超过20个字符', trigger: 'blur' },
    { pattern: /^[1-9][0-9]{4,19}$/, message: '请输入有效的QQ号', trigger: 'blur' }
  ],
  mail: [
    { max: 100, message: '邮箱地址长度不能超过100个字符', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ],
  contact_info: [
    {
      validator: (rule, value, callback) => {
        if (!form.wechat && !form.qq_number && !form.mail) {
          callback(new Error('请至少填写一种联系方式'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  agreed: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请阅读并同意节点共享协议'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ]
}

// 是否可以测试连接
const canTest = computed(() => {
  return form.host && form.port && form.protocol && form.network_name && form.network_secret
})

const buildDataFromForm = () => {
  return {
    name: form.name || 'Test Node',
    host: form.host,
    port: form.port,
    protocol: form.protocol,
    description: form.description || null,
    max_connections: form.max_connections || 100,
    allow_relay: form.allow_relay,
    network_name: form.network_name || null,
    network_secret: form.network_secret || null,
    wechat: form.wechat || null,
    qq_number: form.qq_number || null,
    mail: form.mail || null
  }
}

// 测试连接
const testConnection = async () => {
  if (!canTest.value) {
    ElMessage.warning('请先填写主机地址、端口、协议、网络名称和网络密码')
    return
  }

  testing.value = true
  testResult.value = null

  try {
    // 构建测试数据
    const testData = buildDataFromForm()

    // 调用实际的连接测试API
    const response = await nodeApi.testConnection(testData)

    if (response.success) {
      testResult.value = {
        success: true,
        message: '连接测试成功，节点可正常访问'
      }
      ElMessage.success('连接测试成功')
    } else {
      testResult.value = {
        success: false,
        message: response.error || '连接测试失败'
      }
      ElMessage.error('连接测试失败')
    }
  } catch (error) {
    console.error('连接测试失败:', error)
    testResult.value = {
      success: false,
      message: error.response?.data?.error || '测试过程中发生错误，请检查网络连接'
    }
    ElMessage.error('连接测试失败')
  } finally {
    testing.value = false
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    const valid = await formRef.value.validate()
    if (!valid) return

    const submitData = buildDataFromForm()

    emit('submit', submitData)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 重置表单
const resetFields = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  testResult.value = null
  emit('reset')
}

const acceptTerms = () => {
  form.agreed = true
  showTerms.value = false
  ElMessage.success('已同意节点共享协议')
}

// 暴露方法给父组件
defineExpose({
  validate: () => formRef.value?.validate(),
  resetFields: () => formRef.value?.resetFields()
})
</script>

<style scoped>
.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.test-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.test-result {
  display: flex;
  align-items: center;
  gap: 8px;
}

.test-message {
  font-size: 12px;
  color: #606266;
}

.submit-section {
  display: flex;
  gap: 12px;
}

.contact-section {
  width: 100%;
}

.contact-section .el-form-item {
  margin-bottom: 16px;
}

.contact-section .el-form-item:last-of-type {
  margin-bottom: 8px;
}

.contact-section .el-form-item__label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}
</style>