From 38d071b13767cdd8907abe905889cab3145b0fb4 Mon Sep 17 00:00:00 2001
From: Yvan <8574526@qq,com>
Date: Wed, 23 Sep 2026 17:46:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=94=AF=E4=BB=98=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/view/systemTools/payment/config.vue | 544 +++++++++++++++++++-
 1 file changed, 516 insertions(+), 28 deletions(-)

diff --git a/web/src/view/systemTools/payment/config.vue b/web/src/view/systemTools/payment/config.vue
index 0ef2fcc..2a2f00b 100644
--- a/web/src/view/systemTools/payment/config.vue
+++ b/web/src/view/systemTools/payment/config.vue
@@ -1,28 +1,516 @@
------BEGIN PRIVATE KEY-----
-MIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQDH6e6GdHqs6LOr
-6dNCHsL/QkdSU5u3e3o4nRD9qx6IEL72OH+/FZtgAbXZbpQOUSTkT96Yh/BhqCBD
-l+xGoXOTj/aUe8+Xd5YGFz8OBv/eFjV2sLm2kmb7pgOpIVuBh94HdrPBS8iR5HUz
-ad5DWh2BUJFIa9WroY/EGG7wyzZzWWb0jcZgDTut5+nP0cet3U7m0EHrJmsLiN/3
-/u9CXCdhpwQcutxCCGAUuO4/QGficVFv4X5U1AN66S+xWjQAOvPyIQSz2k/yDlXS
-AXbfipTKX3odjDwPvI2WFAoi7hAbCWntE+dRNV3mrfGmCy9SvUcbdL1cu9SF5F8R
-6/mLscVnAgMBAAECggEBALj0ZDq/HxREAp7FqS9eOHhjAItZURLTSYOBRUv7ejbW
-j2ZLZV0Lh4Guc2kj1hTc2+3jOwURl8MyAg+nSfEaxEw8gBxl4+y1tfYSocK/lRAK
-qhISdO9FycN+l5ptgzR22GM9XhcynvDjVc9oXjsf73ZJbPB82+V7hwAcvt9Gkyzp
-Ydc5zkTIhw10Gf3oVQrFpPhWafM2BcBTyApck5twuQXMMJk3vygi+8xRsDxORda+
-fzkvcROeRYaLkkZQb2rAKxav3xymyAvWPNvLhk1u5Pc3pIjqh3N27OGk211wtQUA
-OZt7CRlXuOUj34KFFbGHBqfInr65xwTGzefTjbhXCpECgYEA64me+ljbrpN+6h7y
-FGPrKaTg2+sdD2AG5cf3poWh7mUOGuNuwdyXV285N7yd7ood0VdqhNRffez7Rc/y
-F0Xxj2v6USLQJFAXC5ypQpXQ973qABy459Wn8IlqMnL0LcBYzLL2GFwReV5qp0QY
-1frizUe2JGVq/4cYpUgvneuOVF8CgYEA2UgIws3zbF+Tif2hcxdNhqqOyEndXjF8
-cdve2EKBBxvLLqNVnkIEb9NQt+Y+vQehrFHF5c0UvO2nJbicCo8hQO2MAxrc6i7U
-6iWAY9eJciBHeS6IsFL20QV6ft+wpTKyaQR50qvkLyAHLoGpJ0MRsBUMBDCNiNjS
-oVfvWJ/Ca/kCgYEAoXzQr+oebFoaCODArvQ2tm2h8YYIfZMkB4ULqXMzq+RDQHIw
-bOAWL09Flo5OZc7yVKYvlPSaqBbDzICfBg/hZ6jrjZdlx4/VzRNTBSD8je76sar/
-p4vYQdWlJwOjoH6hI2+LxPXS0TjHvPi2YndJ6t7A5cFXE+0HG8MbSpXHFtcCgYEA
-h5LGxKY0yN4p9OPopSNZIDmztY1BLtC50WFbfpygXYseEA+iEIkos42qw9RKOTBV
-1GuBi42W7vtqW8MAuiXsndKaliVgyk5GU4LqxWFrRWaWsioy57IchvdgI2H3mlwz
-rgs46BaQ3kahtIb6wKC8nJ3FTaft6AFCC6IOmcG1UiECgYA1zxm5ttIcKR39cQG2
-t4WbHcAlFnMER4SXB34Bfj0WKclgLWG+RoNcke0smmGqdV3r3CmNiK0sIsfL+w2z
-1rXls+laro+cg+jZaG0J7O7b36+vJQOwElQ16yb3qZ9SJ0w8iguUBbcklcPhsaXK
-Snuim3XDr9wHW63afVWjE+RN3w==
------END PRIVATE KEY-----
\ No newline at end of file
+<template>
+  <div class="kra-table-box payment-config-page">
+    <header class="page-heading">
+      <div>
+        <h2>支付渠道配置</h2>
+        <p>管理渠道凭证、回调地址和测试交易参数。</p>
+      </div>
+      <el-button :icon="Refresh" :loading="loading" :disabled="busy" @click="refreshConfigs">刷新</el-button>
+    </header>
+
+    <div v-loading="loading" class="config-layout">
+      <aside class="provider-panel" aria-label="支付渠道列表">
+        <div class="panel-heading"><span>渠道</span><span>{{ configs.length }}</span></div>
+        <button
+          v-for="item in configs"
+          :key="item.provider"
+          type="button"
+          class="provider-item"
+          :class="{ active: item.provider === selectedProvider }"
+          @click="selectProvider(item.provider)"
+        >
+          <span class="provider-copy">
+            <strong>{{ item.name || providerText(item.provider) }}</strong>
+            <small>{{ item.provider }}</small>
+          </span>
+          <span class="provider-state" :class="{ enabled: item.enabled }">
+            {{ item.enabled ? '已启用' : '已停用' }}
+          </span>
+        </button>
+      </aside>
+
+      <section v-if="selected" class="editor-panel">
+        <header class="editor-heading">
+          <div class="editor-title-group">
+            <div class="editor-title-row">
+              <h3>{{ selected.name || providerText(selected.provider) }}</h3>
+              <el-tag v-if="isDirty(selected)" type="warning" effect="plain">未保存</el-tag>
+              <el-tag v-else-if="selected.enabled" type="success" effect="plain">运行中</el-tag>
+            </div>
+            <p>{{ selected.description || selected.provider }}</p>
+          </div>
+          <div class="enable-control">
+            <span>{{ selected.enabled ? '已启用' : '已停用' }}</span>
+            <el-switch
+              :model-value="selected.enabled"
+              :loading="operation === 'toggle'"
+              :disabled="busy"
+              aria-label="启用支付渠道"
+              @change="toggleProvider"
+            />
+          </div>
+        </header>
+
+        <el-alert
+          v-if="hasMaskedSecret(selected)"
+          type="info"
+          :closable="false"
+          show-icon
+          class="editor-alert"
+          title="凭证已脱敏；保留 ****** 将继续使用当前凭证。"
+        />
+        <el-alert
+          v-else-if="!selected.configured"
+          type="warning"
+          :closable="false"
+          show-icon
+          class="editor-alert"
+          title="该渠道尚未保存。填写配置并保存后才能启用或测试。"
+        />
+
+        <el-form :model="selected.config" label-position="top" class="config-form" @submit.prevent>
+          <div class="field-grid">
+            <el-form-item
+              v-for="field in selected.fields || []"
+              :key="field.key"
+              :required="field.required"
+              :error="fieldError(field.key)"
+            >
+              <template #label>
+                <span class="field-label"><span>{{ field.label }}</span><small>{{ field.key }}</small></span>
+              </template>
+
+              <el-select
+                v-if="field.type === 'select'"
+                v-model="selected.config[field.key]"
+                class="field-control"
+                filterable
+                :placeholder="field.placeholder || '请选择'"
+                @update:model-value="clearFieldError(field.key)"
+              >
+                <el-option v-for="option in field.options || []" :key="String(option.value)" :label="option.label" :value="option.value" />
+              </el-select>
+              <el-switch
+                v-else-if="field.type === 'switch'"
+                v-model="selected.config[field.key]"
+                @update:model-value="clearFieldError(field.key)"
+              />
+              <el-input-number
+                v-else-if="field.type === 'number'"
+                v-model="selected.config[field.key]"
+                class="field-control"
+                :min="field.key === 'test_amount' ? 1 : 0"
+                :step="1"
+                controls-position="right"
+                @update:model-value="clearFieldError(field.key)"
+              />
+              <div v-else-if="field.type === 'textarea' && field.secret" class="secret-textarea-control">
+                <el-input
+                  v-if="isSecretVisible(selected, field.key)"
+                  v-model="selected.config[field.key]"
+                  class="field-control"
+                  type="textarea"
+                  :rows="5"
+                  :placeholder="field.placeholder || '请输入凭证内容'"
+                  autocomplete="new-password"
+                  spellcheck="false"
+                  @update:model-value="clearFieldError(field.key)"
+                />
+                <el-input
+                  v-else
+                  :model-value="maskedTextareaValue(selected.config[field.key])"
+                  class="field-control secret-textarea-display"
+                  type="textarea"
+                  :rows="5"
+                  readonly
+                  resize="none"
+                  :placeholder="field.placeholder || '凭证已隐藏，点击“编辑凭证”后输入'"
+                  :aria-label="`${field.label}（已隐藏）`"
+                />
+                <el-button
+                  class="secret-textarea-action"
+                  text
+                  type="primary"
+                  :icon="isSecretVisible(selected, field.key) ? Hide : View"
+                  :aria-label="isSecretVisible(selected, field.key) ? `隐藏${field.label}` : `编辑${field.label}`"
+                  @click="toggleSecretVisibility(selected, field.key)"
+                >
+                  {{ isSecretVisible(selected, field.key) ? '隐藏凭证' : '编辑凭证' }}
+                </el-button>
+              </div>
+              <el-input
+                v-else-if="field.type === 'textarea'"
+                v-model="selected.config[field.key]"
+                class="field-control"
+                type="textarea"
+                :rows="4"
+                :placeholder="field.placeholder"
+                spellcheck="false"
+                @update:model-value="clearFieldError(field.key)"
+              />
+              <el-input
+                v-else
+                v-model="selected.config[field.key]"
+                class="field-control"
+                :type="field.secret ? 'password' : 'text'"
+                :show-password="field.secret"
+                :placeholder="field.placeholder"
+                spellcheck="false"
+                @update:model-value="clearFieldError(field.key)"
+              />
+              <p v-if="fieldHint(field, selected)" class="field-hint">{{ fieldHint(field, selected) }}</p>
+            </el-form-item>
+          </div>
+        </el-form>
+
+        <footer class="editor-actions">
+          <span class="save-state">{{ saveStateText }}</span>
+          <el-button
+            :icon="Connection"
+            :loading="operation === 'test'"
+            :disabled="busy || !selected.enabled || !selected.configured || isDirty(selected)"
+            @click="testProvider"
+          >
+            测试渠道
+          </el-button>
+          <el-button
+            v-if="selected.configured"
+            type="danger"
+            plain
+            :icon="Delete"
+            :loading="operation === 'delete'"
+            :disabled="busy"
+            @click="remove"
+          >
+            删除配置
+          </el-button>
+          <el-button
+            type="primary"
+            :icon="Check"
+            :loading="operation === 'save'"
+            :disabled="busy || !isDirty(selected)"
+            @click="saveSelected"
+          >
+            保存配置
+          </el-button>
+        </footer>
+      </section>
+
+      <el-empty v-else description="暂无支付渠道" />
+    </div>
+
+    <el-dialog v-model="testVisible" title="渠道测试结果" width="min(620px, calc(100vw - 32px))" destroy-on-close>
+      <div v-if="testResult" class="test-result">
+        <el-result
+          :icon="testResult.passed ? 'success' : 'error'"
+          :title="testResultTitle"
+          :sub-title="testResult.tradeNo ? `测试订单：${testResult.tradeNo}` : undefined"
+        />
+        <div class="test-stages">
+          <div v-for="stage in testResult.stages || []" :key="`${stage.name}-${stage.tradeNo || ''}`" class="test-stage">
+            <el-icon :class="`stage-${stage.status}`"><component :is="stageIcon(stage.status)" /></el-icon>
+            <div><strong>{{ stageName(stage.name) }}</strong><p>{{ stage.message || stageStatusText(stage.status) }}</p></div>
+            <span v-if="stage.durationMs != null">{{ stage.durationMs }} ms</span>
+          </div>
+        </div>
+      </div>
+      <template #footer><el-button @click="testVisible = false">关闭</el-button></template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Check, CircleCheck, CircleClose, Connection, Delete, Hide, MoreFilled, Refresh, View } from '@element-plus/icons-vue'
+import { deleteIntegrationConfig, getIntegrationConfigs, saveIntegrationConfig } from '@/api/integration'
+import { testPaymentProvider } from '@/api/payment'
+
+defineOptions({ name: 'PaymentConfig' })
+
+const PROVIDER_NAMES = {
+  alipay: '支付宝', 'alipay-v3': '支付宝 V3', 'wechat-v2': '微信支付 V2',
+  'wechat-v3': '微信支付 V3', 'apple-iap': 'Apple IAP', douyin: '抖音支付',
+  qq: 'QQ 钱包', allinpay: '通联支付', lakala: '拉卡拉', paypal: 'PayPal',
+  saobei: '扫呗', chinaums: '银联商务', sft: '商福通', 'supper-pay': 'Supper Pay',
+  'wechat-game-pay': '微信小游戏支付', 'douyin-game-pay': '抖音小游戏支付'
+}
+const STAGE_NAMES = { config: '配置校验', test_settings: '测试参数', adapter: '渠道适配器', local_order: '本地测试订单', create: '渠道下单', query: '渠道查单', refund: '渠道退款' }
+
+const configs = ref([])
+const selectedProvider = ref('')
+const loading = ref(false)
+const operation = ref('')
+const errors = reactive({})
+const secretVisibility = reactive({})
+const testVisible = ref(false)
+const testResult = ref(null)
+let loadRequestID = 0
+
+const selected = computed(() => configs.value.find((item) => item.provider === selectedProvider.value) || configs.value[0])
+const busy = computed(() => Boolean(operation.value))
+const saveStateText = computed(() => {
+  if (!selected.value) return ''
+  if (!selected.value.configured) return '尚未创建配置'
+  if (isDirty(selected.value)) return '存在未保存的修改'
+  return selected.value.enabled ? '配置已保存，渠道已启用' : '配置已保存，渠道已停用'
+})
+const testResultTitle = computed(() => {
+  if (!testResult.value?.passed) return '渠道测试未通过'
+  const refundStage = testResult.value.stages?.find((stage) => stage.name === 'refund')
+  if (refundStage?.status === 'passed' && /受理|接受|等待|pending|processing/i.test(refundStage.message || '')) return '支付链路已受理，等待退款确认'
+  return testResult.value.fullFlow ? '完整支付链路测试通过' : '渠道连通性测试通过'
+})
+
+const cloneConfig = (value) => JSON.parse(JSON.stringify(value || {}))
+const defaultNotifyURL = (provider) => {
+  if (!provider || typeof window === 'undefined') return ''
+  try {
+    const base = new URL(import.meta.env.VITE_BASE_API || '/', window.location.origin)
+    const backendPort = String(import.meta.env.VITE_SERVER_PORT || '').trim()
+    if (backendPort) {
+      base.hostname = window.location.hostname
+      base.port = backendPort
+      base.pathname = '/'
+    }
+    base.pathname = `${base.pathname.replace(/\/+$/, '')}/payment/callback/${encodeURIComponent(provider)}`
+    base.search = ''
+    base.hash = ''
+    return base.href
+  } catch { return '' }
+}
+const normalizeConfig = (item) => {
+  const normalized = { ...item, enabled: Boolean(item.enabled), configured: Boolean(item.configured), config: cloneConfig(item.config), fields: Array.isArray(item.fields) ? item.fields : [] }
+  normalized._savedEnabled = normalized.enabled
+  normalized._savedConfig = cloneConfig(normalized.config)
+  if (normalized.fields.some((field) => field.key === 'notify_url') && isEmpty(normalized.config.notify_url)) {
+    normalized.config.notify_url = defaultNotifyURL(normalized.provider)
+  }
+  return normalized
+}
+const providerText = (provider) => PROVIDER_NAMES[provider] || provider
+const fieldError = (key) => errors[key] || ''
+const clearFieldError = (key) => { delete errors[key] }
+const isEmpty = (value) => value === null || typeof value === 'undefined' || (typeof value === 'string' && value.trim() === '')
+const isDirty = (item) => JSON.stringify({ enabled: item.enabled, config: item.config }) !== JSON.stringify({ enabled: item._savedEnabled, config: item._savedConfig })
+const hasMaskedSecret = (item) => (item.fields || []).some((field) => field.secret && item.config[field.key] === '******')
+const CALLBACK_URL_KEYS = new Set(['notify_url', 'return_url', 'cancel_url', 'callback_url', 'webhook_url', 'redirect_url', 'success_url', 'failure_url'])
+const callbackURLPattern = /(?:notify|callback|webhook|return|cancel|redirect|success|failure)_?url$/i
+const isCallbackURLField = (field) => {
+  const key = String(field?.key || '').trim().toLowerCase()
+  return CALLBACK_URL_KEYS.has(key) || callbackURLPattern.test(key)
+}
+const environmentText = (item) => String(item?.config?.environment || '').trim().toLowerCase()
+const isSandboxEnvironment = (item) => ['sandbox', 'test', 'testing', 'dev', 'development'].includes(environmentText(item))
+const isProductionEnvironment = (item) => !isSandboxEnvironment(item)
+const secretFieldKey = (item, fieldKey) => `${item?.provider || ''}:${fieldKey}`
+const isSecretVisible = (item, fieldKey) => Boolean(secretVisibility[secretFieldKey(item, fieldKey)])
+const toggleSecretVisibility = (item, fieldKey) => {
+  const key = secretFieldKey(item, fieldKey)
+  secretVisibility[key] = !secretVisibility[key]
+}
+const maskedTextareaValue = (value) => {
+  if (value === '******') return value
+  return isEmpty(value) ? '' : '********'
+}
+const hideSecrets = () => { Object.keys(secretVisibility).forEach((key) => delete secretVisibility[key]) }
+const fieldHint = (field, item = selected.value) => {
+  if (field.key === 'test_mode') return '仅在需要执行真实渠道测试时开启。'
+  if (field.key === 'test_amount') return '使用最小货币单位，例如 CNY 1 表示 0.01 元。'
+  if (field.key === 'test_extra') return '必须是 JSON 对象；可传 openid、auth_code 等测试参数。'
+  if (isCallbackURLField(field)) {
+    const hint = isProductionEnvironment(item) ? '生产环境回调地址必须使用 HTTPS；沙箱环境可使用 HTTP。' : '沙箱环境可使用 HTTP；切换生产环境前请改为 HTTPS。'
+    return field.key === 'notify_url' ? `已按当前访问地址预填；请确认支付平台可从公网访问。${hint}` : hint
+  }
+  return field.description || ''
+}
+const stageName = (name) => STAGE_NAMES[name] || name
+const stageStatusText = (status) => status === 'passed' ? '通过' : status === 'skipped' ? '跳过' : '失败'
+const stageIcon = (status) => status === 'passed' ? CircleCheck : status === 'failed' ? CircleClose : MoreFilled
+
+function validate(item, enabled = item.enabled) {
+  Object.keys(errors).forEach((key) => delete errors[key])
+  let valid = true
+  for (const field of item.fields || []) {
+    const value = item.config[field.key]
+    let message = ''
+    if (enabled && field.required && isEmpty(value)) message = `请填写${field.label}`
+    else if (field.type === 'number' && !isEmpty(value) && (!Number.isFinite(Number(value)) || Number(value) < 0)) message = `${field.label}必须是非负数`
+    else if (field.key === 'test_amount' && !isEmpty(value) && Number(value) <= 0) message = '测试金额必须大于 0'
+    else if (field.key === 'test_extra' && String(value || '').trim()) {
+      try {
+        const parsed = JSON.parse(String(value))
+        if (!parsed || Array.isArray(parsed) || typeof parsed !== 'object') message = '测试扩展参数必须是 JSON 对象'
+      } catch { message = '测试扩展参数必须是合法 JSON' }
+    } else if ((field.type === 'url' || field.key.endsWith('_url') || isCallbackURLField(field)) && value) {
+      try {
+        const url = new URL(String(value))
+        if (!['http:', 'https:'].includes(url.protocol)) message = `${field.label}必须使用 HTTP 或 HTTPS`
+        else if (isCallbackURLField(field) && isProductionEnvironment(item) && url.protocol !== 'https:') message = `${field.label}在生产环境必须使用 HTTPS`
+      } catch { message = `${field.label}格式无效` }
+    }
+    if (!item.configured && field.secret && value === '******') message = '请重新填写' + field.label
+    if (message) { errors[field.key] = message; valid = false }
+  }
+  if (!valid) ElMessage.warning('请先修正配置项')
+  return valid
+}
+
+async function load() {
+  if (loading.value) return
+  const requestID = ++loadRequestID
+  loading.value = true
+  try {
+    const res = await getIntegrationConfigs('payment')
+    if (requestID !== loadRequestID || res.code !== 0) return
+    hideSecrets()
+    configs.value = (res.data || []).map(normalizeConfig)
+    if (!configs.value.some((item) => item.provider === selectedProvider.value)) selectedProvider.value = configs.value[0]?.provider || ''
+  } catch {
+    // The request layer already presents transport errors.
+  } finally { loading.value = false }
+}
+
+async function refreshConfigs() {
+  if (busy.value) return
+  if (selected.value && isDirty(selected.value)) {
+    try {
+      await ElMessageBox.confirm('当前渠道有未保存修改，刷新会丢失这些修改。确认刷新吗？', '刷新支付配置', { type: 'warning', confirmButtonText: '确认刷新' })
+    } catch { return }
+  }
+  await load()
+}
+
+async function selectProvider(provider) {
+  if (provider === selectedProvider.value || busy.value) return
+  if (selected.value && isDirty(selected.value)) {
+    try {
+      await ElMessageBox.confirm('当前渠道有未保存修改，切换后会丢失这些修改。确认切换吗？', '切换支付渠道', { type: 'warning', confirmButtonText: '确认切换' })
+    } catch { return }
+  }
+  Object.keys(errors).forEach((key) => delete errors[key])
+  hideSecrets()
+  selectedProvider.value = provider
+}
+
+async function persist(item, type) {
+  if (busy.value || !validate(item, item.enabled)) return false
+  operation.value = type
+  try {
+    const res = await saveIntegrationConfig('payment', item.provider, { enabled: item.enabled, config: item.config })
+    if (res.code !== 0) return false
+    const provider = item.provider
+    await load()
+    selectedProvider.value = provider
+    return true
+  } catch { return false }
+  finally { operation.value = '' }
+}
+
+async function saveSelected() {
+  if (!selected.value) return
+  if (await persist(selected.value, 'save')) ElMessage.success('支付渠道配置已保存')
+}
+
+async function toggleProvider(enabled) {
+  const item = selected.value
+  if (!item || busy.value) return
+  const previous = item.enabled
+  item.enabled = Boolean(enabled)
+  if (item.enabled && !validate(item, true)) { item.enabled = previous; return }
+  if (await persist(item, 'toggle')) {
+    ElMessage.success(`${item.name || providerText(item.provider)} 已${item.enabled ? '启用' : '停用'}`)
+    return
+  }
+  item.enabled = previous
+  ElMessage.warning('渠道状态未改变')
+}
+
+async function testProvider() {
+  const item = selected.value
+  if (!item || busy.value) return
+  if (!item.enabled) { ElMessage.warning('当前支付渠道已停用，请先启用并保存渠道后再执行测试。'); return }
+  if (isDirty(item)) { ElMessage.warning('请先保存当前配置'); return }
+  if (!item.config?.test_mode) { ElMessage.warning('请先开启“允许执行渠道测试”并保存'); return }
+  const environment = environmentText(item)
+  if (environment === 'production' || environment === 'prod') {
+    operation.value = 'test-confirm'
+    try {
+      await ElMessageBox.confirm('当前渠道使用生产环境，测试会真实创建最小金额订单。确认使用专用测试商户执行吗？', '生产环境测试确认', { type: 'warning', confirmButtonText: '确认测试' })
+    } catch { operation.value = ''; return }
+  }
+  operation.value = 'test'
+  try {
+    const res = await testPaymentProvider(item.provider)
+    testResult.value = res.data || { passed: false, stages: [{ name: 'test', status: 'failed', message: res.msg || '未知错误' }] }
+    testVisible.value = true
+  } catch {
+    // The request layer already presents transport errors.
+  } finally { operation.value = '' }
+}
+
+async function remove() {
+  const item = selected.value
+  if (!item || busy.value) return
+  try {
+    await ElMessageBox.confirm(`删除 ${item.name || providerText(item.provider)} 配置后，该渠道将立即不可用。确认继续吗？`, '删除支付配置', { type: 'warning', confirmButtonText: '确认删除' })
+  } catch { return }
+  operation.value = 'delete'
+  try {
+    const res = await deleteIntegrationConfig('payment', item.provider)
+    if (res.code !== 0) return
+    ElMessage.success('支付渠道配置已删除')
+    await load()
+  } catch {
+    // The request layer already presents transport errors.
+  } finally { operation.value = '' }
+}
+
+onMounted(load)
+</script>
+
+<style scoped>
+.payment-config-page { min-height: 640px; }
+.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
+.page-heading h2 { margin: 0; color: var(--el-text-color-primary); font-size: 20px; font-weight: 600; letter-spacing: 0; }
+.page-heading p { margin: 5px 0 0; color: var(--el-text-color-secondary); font-size: 13px; }
+.config-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 560px; overflow: hidden; border: 1px solid var(--el-border-color-lighter); background: var(--el-bg-color); }
+.provider-panel { padding: 12px 9px; border-right: 1px solid var(--el-border-color-lighter); background: var(--el-fill-color-blank); }
+.panel-heading { display: flex; justify-content: space-between; padding: 4px 10px 11px; color: var(--el-text-color-secondary); font-size: 12px; }
+.provider-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 8px 10px; border: 0; border-left: 3px solid transparent; border-radius: 4px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
+.provider-item:hover { background: var(--el-fill-color-light); }
+.provider-item.active { border-left-color: var(--el-color-primary); background: var(--el-color-primary-light-9); }
+.provider-copy { display: grid; min-width: 0; gap: 3px; }
+.provider-copy strong { overflow: hidden; color: var(--el-text-color-primary); font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
+.provider-copy small { color: var(--el-text-color-secondary); font-size: 11px; }
+.provider-state { color: var(--el-text-color-placeholder); font-size: 11px; white-space: nowrap; }
+.provider-state.enabled { color: var(--el-color-success); }
+.editor-panel { display: flex; min-width: 0; flex-direction: column; padding: 22px 28px 20px; }
+.editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--el-border-color-lighter); }
+.editor-title-group { min-width: 0; }
+.editor-title-row { display: flex; align-items: center; gap: 9px; }
+.editor-title-row h3 { margin: 0; color: var(--el-text-color-primary); font-size: 18px; font-weight: 600; letter-spacing: 0; }
+.editor-title-group p { margin: 6px 0 0; color: var(--el-text-color-secondary); font-size: 13px; }
+.enable-control { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--el-text-color-regular); font-size: 13px; white-space: nowrap; }
+.editor-alert { margin-top: 18px; }
+.config-form { flex: 1; padding-top: 20px; }
+.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
+.field-label { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; }
+.field-label small { overflow: hidden; color: var(--el-text-color-placeholder); font-size: 11px; font-weight: 400; text-overflow: ellipsis; }
+.field-control { width: 100%; }
+.secret-textarea-control { width: 100%; }
+.secret-textarea-display :deep(.el-textarea__inner) { color: var(--el-text-color-placeholder); font-family: monospace; letter-spacing: 0; }
+.secret-textarea-action { margin: 4px 0 0; padding: 4px 0; }
+.field-hint { width: 100%; margin: 5px 0 0; color: var(--el-text-color-secondary); font-size: 12px; line-height: 1.5; }
+.editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--el-border-color-lighter); }
+.save-state { margin-right: auto; color: var(--el-text-color-secondary); font-size: 12px; }
+.test-result :deep(.el-result) { padding: 8px 24px 20px; }
+.test-stages { border-top: 1px solid var(--el-border-color-lighter); }
+.test-stage { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 13px 4px; border-bottom: 1px solid var(--el-border-color-lighter); }
+.test-stage strong { color: var(--el-text-color-primary); font-size: 13px; font-weight: 600; }
+.test-stage p { margin: 3px 0 0; color: var(--el-text-color-secondary); font-size: 12px; line-height: 1.5; }
+.test-stage > span { color: var(--el-text-color-placeholder); font-size: 11px; white-space: nowrap; }
+.stage-passed { color: var(--el-color-success); } .stage-failed { color: var(--el-color-danger); } .stage-skipped { color: var(--el-text-color-placeholder); }
+@media (max-width: 900px) { .config-layout { grid-template-columns: 1fr; } .provider-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 270px; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--el-border-color-lighter); } .panel-heading { display: none; } .provider-state { display: none; } .editor-panel { padding: 20px; } .field-grid { grid-template-columns: 1fr; } }
+@media (max-width: 560px) { .payment-config-page { min-height: 0; } .page-heading { align-items: flex-start; } .provider-panel { grid-template-columns: 1fr; } .provider-state { display: inline; } .editor-panel { padding: 18px 14px; } .editor-heading { align-items: stretch; flex-direction: column; gap: 14px; } .enable-control { justify-content: space-between; } .editor-actions { align-items: stretch; flex-direction: column; } .save-state { margin-right: 0; } .editor-actions :deep(.el-button) { margin-left: 0; } }
+</style>