Initial commit: One Pipe System

完整的管理系统，包含账户管理、卡片管理、套餐管理、财务管理等功能模块。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/views/settings/commission-template/index.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="page-content">
+    <ElRow>
+      <ElCol :xs="24" :sm="12" :lg="6">
+        <ElInput v-model="searchQuery" placeholder="模板名称" clearable></ElInput>
+      </ElCol>
+      <div style="width: 12px"></div>
+      <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
+        <ElButton v-ripple @click="handleSearch">搜索</ElButton>
+        <ElButton v-ripple @click="showDialog('add')">新增模板</ElButton>
+      </ElCol>
+    </ElRow>
+
+    <ArtTable :data="filteredData" index>
+      <template #default>
+        <ElTableColumn label="模板名称" prop="templateName" />
+        <ElTableColumn label="分佣模式" prop="commissionMode">
+          <template #default="scope">
+            <ElTag :type="scope.row.commissionMode === 'fixed' ? '' : 'success'">
+              {{ scope.row.commissionMode === 'fixed' ? '固定佣金' : '比例佣金' }}
+            </ElTag>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="佣金规则" prop="rule">
+          <template #default="scope">
+            {{
+              scope.row.commissionMode === 'fixed'
+                ? `¥${scope.row.fixedAmount.toFixed(2)}/笔`
+                : `${scope.row.percent}%`
+            }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="适用范围" prop="scope" show-overflow-tooltip />
+        <ElTableColumn label="应用次数" prop="usageCount" />
+        <ElTableColumn label="状态" prop="status">
+          <template #default="scope">
+            <ElTag :type="scope.row.status === 'active' ? 'success' : 'info'">
+              {{ scope.row.status === 'active' ? '启用' : '禁用' }}
+            </ElTag>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="创建时间" prop="createTime" width="180" />
+        <ElTableColumn fixed="right" label="操作" width="220">
+          <template #default="scope">
+            <el-button link @click="viewUsage(scope.row)">应用记录</el-button>
+            <el-button link @click="showDialog('edit', scope.row)">编辑</el-button>
+            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </ElTableColumn>
+      </template>
+    </ArtTable>
+
+    <!-- 新增/编辑对话框 -->
+    <ElDialog
+      v-model="dialogVisible"
+      :title="dialogType === 'add' ? '新增分佣模板' : '编辑分佣模板'"
+      width="600px"
+      align-center
+    >
+      <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
+        <ElFormItem label="模板名称" prop="templateName">
+          <ElInput v-model="form.templateName" placeholder="请输入模板名称" />
+        </ElFormItem>
+
+        <ElFormItem label="分佣模式" prop="commissionMode">
+          <ElRadioGroup v-model="form.commissionMode">
+            <ElRadio value="fixed">固定佣金</ElRadio>
+            <ElRadio value="percent">比例佣金</ElRadio>
+          </ElRadioGroup>
+        </ElFormItem>
+
+        <ElFormItem v-if="form.commissionMode === 'fixed'" label="固定金额" prop="fixedAmount">
+          <ElInputNumber v-model="form.fixedAmount" :min="0" :precision="2" style="width: 100%" />
+          <span style="margin-left: 8px">元/笔</span>
+        </ElFormItem>
+
+        <ElFormItem v-if="form.commissionMode === 'percent'" label="佣金比例" prop="percent">
+          <ElInputNumber v-model="form.percent" :min="0" :max="100" :precision="2" style="width: 100%" />
+          <span style="margin-left: 8px">%</span>
+        </ElFormItem>
+
+        <ElFormItem label="适用范围" prop="scope">
+          <ElInput v-model="form.scope" placeholder="例如：全部套餐、特定代理商等" />
+        </ElFormItem>
+
+        <ElFormItem label="分佣说明" prop="description">
+          <ElInput v-model="form.description" type="textarea" :rows="3" placeholder="请输入分佣规则说明" />
+        </ElFormItem>
+
+        <ElFormItem label="状态">
+          <ElSwitch v-model="form.status" active-value="active" inactive-value="inactive" />
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <div class="dialog-footer">
+          <ElButton @click="dialogVisible = false">取消</ElButton>
+          <ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
+        </div>
+      </template>
+    </ElDialog>
+
+    <!-- 应用记录对话框 -->
+    <ElDialog v-model="usageDialogVisible" title="模板应用记录" width="900px" align-center>
+      <ArtTable :data="usageRecords" index>
+        <template #default>
+          <ElTableColumn label="应用对象" prop="targetName" />
+          <ElTableColumn label="对象类型" prop="targetType">
+            <template #default="scope">
+              <ElTag :type="scope.row.targetType === 'agent' ? '' : 'success'">
+                {{ scope.row.targetType === 'agent' ? '代理商' : '套餐' }}
+              </ElTag>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="应用时间" prop="applyTime" width="180" />
+          <ElTableColumn label="操作人" prop="operator" />
+          <ElTableColumn label="状态" prop="status">
+            <template #default="scope">
+              <ElTag :type="scope.row.status === 'active' ? 'success' : 'info'">
+                {{ scope.row.status === 'active' ? '生效中' : '已失效' }}
+              </ElTag>
+            </template>
+          </ElTableColumn>
+        </template>
+      </ArtTable>
+    </ElDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+
+  defineOptions({ name: 'CommissionTemplate' })
+
+  interface Template {
+    id?: string
+    templateName: string
+    commissionMode: 'fixed' | 'percent'
+    fixedAmount: number
+    percent: number
+    scope: string
+    description?: string
+    usageCount?: number
+    status: 'active' | 'inactive'
+    createTime?: string
+  }
+
+  const mockData = ref<Template[]>([
+    {
+      id: '1',
+      templateName: '标准代理商佣金',
+      commissionMode: 'percent',
+      fixedAmount: 0,
+      percent: 10,
+      scope: '全部套餐',
+      description: '适用于一级代理商的标准佣金模板',
+      usageCount: 25,
+      status: 'active',
+      createTime: '2026-01-01 10:00:00'
+    },
+    {
+      id: '2',
+      templateName: '特殊套餐固定佣金',
+      commissionMode: 'fixed',
+      fixedAmount: 50,
+      percent: 0,
+      scope: '高端套餐系列',
+      description: '适用于高端套餐的固定佣金',
+      usageCount: 8,
+      status: 'active',
+      createTime: '2026-01-05 11:00:00'
+    }
+  ])
+
+  const usageRecords = ref([
+    {
+      id: '1',
+      targetName: '华东区总代理',
+      targetType: 'agent',
+      applyTime: '2026-01-02 10:00:00',
+      operator: 'admin',
+      status: 'active'
+    }
+  ])
+
+  const searchQuery = ref('')
+  const dialogVisible = ref(false)
+  const usageDialogVisible = ref(false)
+  const dialogType = ref<'add' | 'edit'>('add')
+  const formRef = ref<FormInstance>()
+
+  const form = reactive<Template>({
+    templateName: '',
+    commissionMode: 'percent',
+    fixedAmount: 0,
+    percent: 0,
+    scope: '',
+    description: '',
+    status: 'active'
+  })
+
+  const rules = reactive<FormRules>({
+    templateName: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
+    commissionMode: [{ required: true, message: '请选择分佣模式', trigger: 'change' }],
+    fixedAmount: [
+      {
+        validator: (rule, value, callback) => {
+          if (form.commissionMode === 'fixed' && value <= 0) {
+            callback(new Error('固定金额必须大于0'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur'
+      }
+    ],
+    percent: [
+      {
+        validator: (rule, value, callback) => {
+          if (form.commissionMode === 'percent' && (value <= 0 || value > 100)) {
+            callback(new Error('比例必须在0-100之间'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur'
+      }
+    ],
+    scope: [{ required: true, message: '请输入适用范围', trigger: 'blur' }]
+  })
+
+  const filteredData = computed(() => {
+    if (!searchQuery.value) return mockData.value
+    return mockData.value.filter((item) => item.templateName.includes(searchQuery.value))
+  })
+
+  const handleSearch = () => {}
+
+  const showDialog = (type: 'add' | 'edit', row?: Template) => {
+    dialogType.value = type
+    dialogVisible.value = true
+    if (type === 'edit' && row) {
+      Object.assign(form, row)
+    } else {
+      Object.assign(form, {
+        templateName: '',
+        commissionMode: 'percent',
+        fixedAmount: 0,
+        percent: 0,
+        scope: '',
+        description: '',
+        status: 'active'
+      })
+    }
+  }
+
+  const handleSubmit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate((valid) => {
+      if (valid) {
+        if (dialogType.value === 'add') {
+          mockData.value.push({
+            ...form,
+            id: Date.now().toString(),
+            usageCount: 0,
+            createTime: new Date().toLocaleString('zh-CN')
+          })
+          ElMessage.success('新增成功')
+        } else {
+          const index = mockData.value.findIndex((item) => item.id === form.id)
+          if (index !== -1) mockData.value[index] = { ...form }
+          ElMessage.success('修改成功')
+        }
+        dialogVisible.value = false
+        formEl.resetFields()
+      }
+    })
+  }
+
+  const handleDelete = (row: Template) => {
+    ElMessageBox.confirm('确定删除该模板吗？', '删除确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'error'
+    }).then(() => {
+      const index = mockData.value.findIndex((item) => item.id === row.id)
+      if (index !== -1) mockData.value.splice(index, 1)
+      ElMessage.success('删除成功')
+    })
+  }
+
+  const viewUsage = (row: Template) => {
+    usageDialogVisible.value = true
+  }
+</script>

src/views/settings/developer-api/index.vue

@@ -0,0 +1,301 @@
+<template>
+  <div class="page-content">
+    <!-- API密钥管理 -->
+    <ElCard shadow="never">
+      <template #header>
+        <div style="display: flex; justify-content: space-between; align-items: center">
+          <span style="font-weight: 500">API密钥管理</span>
+          <ElButton type="primary" size="small" @click="showCreateDialog">生成新密钥</ElButton>
+        </div>
+      </template>
+
+      <ArtTable :data="apiKeyList" index>
+        <template #default>
+          <ElTableColumn label="密钥名称" prop="keyName" />
+          <ElTableColumn label="AppKey" prop="appKey" min-width="200">
+            <template #default="scope">
+              <div style="display: flex; align-items: center; gap: 8px">
+                <code style="color: var(--el-color-primary)">{{ scope.row.appKey }}</code>
+                <ElButton link :icon="CopyDocument" @click="copyToClipboard(scope.row.appKey)" />
+              </div>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="AppSecret" prop="appSecret" min-width="200">
+            <template #default="scope">
+              <div style="display: flex; align-items: center; gap: 8px">
+                <code>{{ scope.row.showSecret ? scope.row.appSecret : '••••••••••••••••' }}</code>
+                <ElButton link :icon="View" @click="scope.row.showSecret = !scope.row.showSecret" />
+                <ElButton link :icon="CopyDocument" @click="copyToClipboard(scope.row.appSecret)" />
+              </div>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="权限" prop="permissions">
+            <template #default="scope">
+              <ElTag v-for="(perm, index) in scope.row.permissions" :key="index" size="small" style="margin-right: 4px">
+                {{ perm }}
+              </ElTag>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="状态" prop="status">
+            <template #default="scope">
+              <ElTag :type="scope.row.status === 'active' ? 'success' : 'info'">
+                {{ scope.row.status === 'active' ? '启用' : '禁用' }}
+              </ElTag>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="创建时间" prop="createTime" width="180" />
+          <ElTableColumn fixed="right" label="操作" width="180">
+            <template #default="scope">
+              <el-button link @click="handleResetKey(scope.row)">重置密钥</el-button>
+              <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+          </ElTableColumn>
+        </template>
+      </ArtTable>
+    </ElCard>
+
+    <!-- Webhook配置 -->
+    <ElCard shadow="never" style="margin-top: 20px">
+      <template #header>
+        <span style="font-weight: 500">Webhook配置</span>
+      </template>
+
+      <ElForm :model="webhookForm" label-width="120px" style="max-width: 800px">
+        <ElFormItem label="回调地址">
+          <ElInput v-model="webhookForm.url" placeholder="https://your-domain.com/webhook">
+            <template #prepend>POST</template>
+          </ElInput>
+        </ElFormItem>
+
+        <ElFormItem label="签名密钥">
+          <ElInput
+            v-model="webhookForm.secret"
+            :type="showWebhookSecret ? 'text' : 'password'"
+            placeholder="用于验证webhook请求签名"
+          >
+            <template #append>
+              <ElButton :icon="View" @click="showWebhookSecret = !showWebhookSecret" />
+            </template>
+          </ElInput>
+        </ElFormItem>
+
+        <ElFormItem label="事件订阅">
+          <ElCheckboxGroup v-model="webhookForm.events">
+            <ElCheckbox value="order.created">订单创建</ElCheckbox>
+            <ElCheckbox value="order.paid">订单支付</ElCheckbox>
+            <ElCheckbox value="card.activated">卡片激活</ElCheckbox>
+            <ElCheckbox value="card.expired">卡片过期</ElCheckbox>
+            <ElCheckbox value="recharge.success">充值成功</ElCheckbox>
+          </ElCheckboxGroup>
+        </ElFormItem>
+
+        <ElFormItem>
+          <ElButton type="primary" @click="saveWebhook">保存配置</ElButton>
+          <ElButton @click="testWebhook">测试推送</ElButton>
+        </ElFormItem>
+      </ElForm>
+    </ElCard>
+
+    <!-- API调用统计 -->
+    <ElCard shadow="never" style="margin-top: 20px">
+      <template #header>
+        <span style="font-weight: 500">API调用统计（最近7天）</span>
+      </template>
+
+      <ElRow :gutter="20">
+        <ElCol :xs="24" :sm="12" :lg="6">
+          <div class="stat-box">
+            <div class="stat-label">总调用次数</div>
+            <div class="stat-value">12,580</div>
+          </div>
+        </ElCol>
+        <ElCol :xs="24" :sm="12" :lg="6">
+          <div class="stat-box">
+            <div class="stat-label">成功次数</div>
+            <div class="stat-value" style="color: var(--el-color-success)">12,453</div>
+          </div>
+        </ElCol>
+        <ElCol :xs="24" :sm="12" :lg="6">
+          <div class="stat-box">
+            <div class="stat-label">失败次数</div>
+            <div class="stat-value" style="color: var(--el-color-danger)">127</div>
+          </div>
+        </ElCol>
+        <ElCol :xs="24" :sm="12" :lg="6">
+          <div class="stat-box">
+            <div class="stat-label">成功率</div>
+            <div class="stat-value">99.0%</div>
+          </div>
+        </ElCol>
+      </ElRow>
+    </ElCard>
+
+    <!-- 生成密钥对话框 -->
+    <ElDialog v-model="createDialogVisible" title="生成新密钥" width="500px" align-center>
+      <ElForm ref="createFormRef" :model="createForm" :rules="createRules" label-width="100px">
+        <ElFormItem label="密钥名称" prop="keyName">
+          <ElInput v-model="createForm.keyName" placeholder="请输入密钥名称" />
+        </ElFormItem>
+        <ElFormItem label="权限设置">
+          <ElCheckboxGroup v-model="createForm.permissions">
+            <ElCheckbox value="读取">读取</ElCheckbox>
+            <ElCheckbox value="写入">写入</ElCheckbox>
+            <ElCheckbox value="删除">删除</ElCheckbox>
+          </ElCheckboxGroup>
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <div class="dialog-footer">
+          <ElButton @click="createDialogVisible = false">取消</ElButton>
+          <ElButton type="primary" @click="handleCreateKey">生成</ElButton>
+        </div>
+      </template>
+    </ElDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import { CopyDocument, View } from '@element-plus/icons-vue'
+  import type { FormInstance, FormRules } from 'element-plus'
+
+  defineOptions({ name: 'DeveloperApi' })
+
+  interface ApiKey {
+    id: string
+    keyName: string
+    appKey: string
+    appSecret: string
+    permissions: string[]
+    status: 'active' | 'inactive'
+    createTime: string
+    showSecret?: boolean
+  }
+
+  const apiKeyList = ref<ApiKey[]>([
+    {
+      id: '1',
+      keyName: '生产环境密钥',
+      appKey: 'ak_prod_1234567890abcdef',
+      appSecret: 'sk_prod_abcdefghijklmnopqrstuvwxyz123456',
+      permissions: ['读取', '写入'],
+      status: 'active',
+      createTime: '2026-01-01 10:00:00',
+      showSecret: false
+    }
+  ])
+
+  const webhookForm = reactive({
+    url: 'https://your-domain.com/webhook',
+    secret: 'webhook_secret_key_123456',
+    events: ['order.created', 'order.paid']
+  })
+
+  const showWebhookSecret = ref(false)
+  const createDialogVisible = ref(false)
+  const createFormRef = ref<FormInstance>()
+
+  const createForm = reactive({
+    keyName: '',
+    permissions: ['读取']
+  })
+
+  const createRules = reactive<FormRules>({
+    keyName: [{ required: true, message: '请输入密钥名称', trigger: 'blur' }]
+  })
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      ElMessage.success('已复制到剪贴板')
+    })
+  }
+
+  const showCreateDialog = () => {
+    createForm.keyName = ''
+    createForm.permissions = ['读取']
+    createDialogVisible.value = true
+  }
+
+  const handleCreateKey = async () => {
+    if (!createFormRef.value) return
+    await createFormRef.value.validate((valid) => {
+      if (valid) {
+        const newKey: ApiKey = {
+          id: Date.now().toString(),
+          keyName: createForm.keyName,
+          appKey: `ak_${Date.now()}`,
+          appSecret: `sk_${Math.random().toString(36).substring(2)}`,
+          permissions: createForm.permissions,
+          status: 'active',
+          createTime: new Date().toLocaleString('zh-CN'),
+          showSecret: false
+        }
+        apiKeyList.value.push(newKey)
+        createDialogVisible.value = false
+        ElMessage.success('密钥生成成功，请妥善保管')
+      }
+    })
+  }
+
+  const handleResetKey = (row: ApiKey) => {
+    ElMessageBox.confirm('重置后原密钥将失效，确定要重置吗？', '重置密钥', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(() => {
+      row.appSecret = `sk_${Math.random().toString(36).substring(2)}`
+      ElMessage.success('密钥重置成功')
+    })
+  }
+
+  const handleDelete = (row: ApiKey) => {
+    ElMessageBox.confirm('删除后无法恢复，确定要删除吗？', '删除密钥', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'error'
+    }).then(() => {
+      const index = apiKeyList.value.findIndex((item) => item.id === row.id)
+      if (index !== -1) apiKeyList.value.splice(index, 1)
+      ElMessage.success('删除成功')
+    })
+  }
+
+  const saveWebhook = () => {
+    ElMessage.success('Webhook配置保存成功')
+  }
+
+  const testWebhook = () => {
+    ElMessage.info('正在发送测试推送...')
+    setTimeout(() => {
+      ElMessage.success('测试推送成功')
+    }, 1500)
+  }
+</script>
+
+<style lang="scss" scoped>
+  .page-content {
+    .stat-box {
+      padding: 20px;
+      background: var(--el-bg-color);
+      border-radius: 8px;
+      text-align: center;
+
+      .stat-label {
+        font-size: 14px;
+        color: var(--el-text-color-secondary);
+        margin-bottom: 8px;
+      }
+
+      .stat-value {
+        font-size: 28px;
+        font-weight: 600;
+        color: var(--el-text-color-primary);
+      }
+    }
+
+    :deep(.el-checkbox) {
+      margin-right: 20px;
+      margin-bottom: 10px;
+    }
+  }
+</style>

src/views/settings/payment-merchant/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="page-content">
+    <ElCard shadow="never">
+      <template #header>
+        <span style="font-weight: 500">支付商户配置</span>
+      </template>
+
+      <ElForm ref="formRef" :model="form" :rules="rules" label-width="150px" style="max-width: 900px">
+        <ElDivider content-position="left">基础信息</ElDivider>
+
+        <ElFormItem label="商户名称" prop="merchantName">
+          <ElInput v-model="form.merchantName" placeholder="请输入商户名称" />
+        </ElFormItem>
+
+        <ElFormItem label="商户编号" prop="merchantId">
+          <ElInput v-model="form.merchantId" placeholder="请输入商户编号" />
+        </ElFormItem>
+
+        <ElDivider content-position="left">API配置</ElDivider>
+
+        <ElFormItem label="AppID" prop="appId">
+          <ElInput v-model="form.appId" placeholder="请输入AppID">
+            <template #append>
+              <ElButton :icon="View" @click="toggleShow('appId')">
+                {{ showFields.appId ? '隐藏' : '显示' }}
+              </ElButton>
+            </template>
+          </ElInput>
+        </ElFormItem>
+
+        <ElFormItem label="AppSecret" prop="appSecret">
+          <ElInput
+            v-model="form.appSecret"
+            :type="showFields.appSecret ? 'text' : 'password'"
+            placeholder="请输入AppSecret"
+          >
+            <template #append>
+              <ElButton :icon="View" @click="toggleShow('appSecret')">
+                {{ showFields.appSecret ? '隐藏' : '显示' }}
+              </ElButton>
+            </template>
+          </ElInput>
+        </ElFormItem>
+
+        <ElFormItem label="API密钥" prop="apiKey">
+          <ElInput
+            v-model="form.apiKey"
+            :type="showFields.apiKey ? 'text' : 'password'"
+            placeholder="请输入API密钥"
+          >
+            <template #append>
+              <ElButton :icon="View" @click="toggleShow('apiKey')">
+                {{ showFields.apiKey ? '隐藏' : '显示' }}
+              </ElButton>
+            </template>
+          </ElInput>
+        </ElFormItem>
+
+        <ElDivider content-position="left">回调配置</ElDivider>
+
+        <ElFormItem label="支付回调地址" prop="notifyUrl">
+          <ElInput v-model="form.notifyUrl" placeholder="https://your-domain.com/api/notify">
+            <template #prepend>POST</template>
+          </ElInput>
+        </ElFormItem>
+
+        <ElFormItem label="退款回调地址" prop="refundNotifyUrl">
+          <ElInput v-model="form.refundNotifyUrl" placeholder="https://your-domain.com/api/refund-notify">
+            <template #prepend>POST</template>
+          </ElInput>
+        </ElFormItem>
+
+        <ElDivider content-position="left">支付方式</ElDivider>
+
+        <ElFormItem label="启用的支付方式">
+          <ElCheckboxGroup v-model="form.paymentMethods">
+            <ElCheckbox value="wechat">
+              <div style="display: flex; align-items: center; gap: 8px">
+                <span style="color: #09bb07; font-size: 20px">💬</span>
+                <span>微信支付</span>
+              </div>
+            </ElCheckbox>
+            <ElCheckbox value="alipay">
+              <div style="display: flex; align-items: center; gap: 8px">
+                <span style="color: #1677ff; font-size: 20px">💳</span>
+                <span>支付宝</span>
+              </div>
+            </ElCheckbox>
+            <ElCheckbox value="bank">
+              <div style="display: flex; align-items: center; gap: 8px">
+                <span style="font-size: 20px">🏦</span>
+                <span>银行卡</span>
+              </div>
+            </ElCheckbox>
+          </ElCheckboxGroup>
+        </ElFormItem>
+
+        <ElFormItem label="测试模式">
+          <ElSwitch v-model="form.testMode" />
+          <span style="margin-left: 8px; color: var(--el-text-color-secondary)">
+            {{ form.testMode ? '开启（使用沙箱环境）' : '关闭（生产环境）' }}
+          </span>
+        </ElFormItem>
+
+        <ElFormItem>
+          <ElButton type="primary" @click="handleSave">保存配置</ElButton>
+          <ElButton @click="handleTest">测试连接</ElButton>
+          <ElButton @click="resetForm">重置</ElButton>
+        </ElFormItem>
+      </ElForm>
+    </ElCard>
+
+    <ElCard shadow="never" style="margin-top: 20px">
+      <template #header>
+        <span style="font-weight: 500">配置说明</span>
+      </template>
+      <ElAlert type="info" :closable="false">
+        <template #title>
+          <div style="line-height: 1.8">
+            <p><strong>AppID/AppSecret</strong>: 从支付服务商后台获取</p>
+            <p><strong>API密钥</strong>: 用于签名验证，请妥善保管</p>
+            <p><strong>回调地址</strong>: 支付完成后，支付平台会向该地址发送支付结果通知</p>
+            <p><strong>测试模式</strong>: 开启后使用沙箱环境，不会产生真实交易</p>
+          </div>
+        </template>
+      </ElAlert>
+    </ElCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ElMessage } from 'element-plus'
+  import { View } from '@element-plus/icons-vue'
+  import type { FormInstance, FormRules } from 'element-plus'
+
+  defineOptions({ name: 'PaymentMerchant' })
+
+  const formRef = ref<FormInstance>()
+
+  const form = reactive({
+    merchantName: '某某科技有限公司',
+    merchantId: 'MCH123456789',
+    appId: 'wx1234567890abcdef',
+    appSecret: '********************************',
+    apiKey: '********************************',
+    notifyUrl: 'https://your-domain.com/api/payment/notify',
+    refundNotifyUrl: 'https://your-domain.com/api/payment/refund-notify',
+    paymentMethods: ['wechat', 'alipay'],
+    testMode: true
+  })
+
+  const showFields = reactive({
+    appId: false,
+    appSecret: false,
+    apiKey: false
+  })
+
+  const rules = reactive<FormRules>({
+    merchantName: [{ required: true, message: '请输入商户名称', trigger: 'blur' }],
+    merchantId: [{ required: true, message: '请输入商户编号', trigger: 'blur' }],
+    appId: [{ required: true, message: '请输入AppID', trigger: 'blur' }],
+    appSecret: [{ required: true, message: '请输入AppSecret', trigger: 'blur' }],
+    apiKey: [{ required: true, message: '请输入API密钥', trigger: 'blur' }],
+    notifyUrl: [
+      { required: true, message: '请输入支付回调地址', trigger: 'blur' },
+      { type: 'url', message: '请输入正确的URL地址', trigger: 'blur' }
+    ]
+  })
+
+  const toggleShow = (field: 'appId' | 'appSecret' | 'apiKey') => {
+    showFields[field] = !showFields[field]
+  }
+
+  const handleSave = async () => {
+    if (!formRef.value) return
+    await formRef.value.validate((valid) => {
+      if (valid) {
+        ElMessage.success('配置保存成功')
+      }
+    })
+  }
+
+  const handleTest = () => {
+    ElMessage.info('正在测试连接...')
+    setTimeout(() => {
+      ElMessage.success('连接测试成功')
+    }, 1500)
+  }
+
+  const resetForm = () => {
+    formRef.value?.resetFields()
+  }
+</script>
+
+<style lang="scss" scoped>
+  .page-content {
+    :deep(.el-checkbox) {
+      margin-right: 30px;
+      margin-bottom: 12px;
+    }
+
+    :deep(.el-divider__text) {
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+    }
+  }
+</style>