导入 AKSRT 主题开发源码

assets/admin/src/pages/payment/PaymentGateway.vue

@@ -0,0 +1,179 @@
+<template>
+  <PaymentSectionPage
+    section="gateway"
+    title="收款接口"
+    desc="管理支付网关、查看连接状态、配置回调口令。"
+    note="当前支持人工确认与测试联调；回调校验口令在接入真实网关时直接复用。"
+    :links="[
+      { label: '余额充值', path: '/payment/recharge' },
+      { label: '付费内容', path: '/payment/paid' },
+    ]"
+  >
+    <template #before-form>
+      <n-spin :show="loading">
+        <n-card class="aksrt-section-card" title="网关状态">
+          <n-grid :cols="3" :x-gap="12" :y-gap="12">
+            <n-grid-item v-for="gw in gateways" :key="gw.id">
+              <div class="aksrt-gateway__card">
+                <div class="aksrt-gateway__icon" :class="gw.configured ? 'aksrt-gateway__icon--active' : ''">
+                  <i :class="gw.id === 'balance' ? 'fas fa-wallet' : 'fas fa-credit-card'"></i>
+                </div>
+                <div>
+                  <strong>{{ gw.name }}</strong>
+                  <p>{{ gw.configured ? '已配置' : '未配置' }}</p>
+                </div>
+                <n-tag :type="gw.configured ? 'success' : 'default'" size="small" round>
+                  {{ gw.configured ? '可用' : '不可用' }}
+                </n-tag>
+              </div>
+            </n-grid-item>
+          </n-grid>
+          <n-empty v-if="!loading && gateways.length === 0" description="暂无已注册的支付网关" />
+        </n-card>
+
+        <n-card class="aksrt-section-card" title="运行摘要">
+          <n-grid :cols="4" :x-gap="12" :y-gap="12">
+            <n-grid-item>
+              <div class="aksrt-gateway__stat">
+                <strong>{{ modeLabel }}</strong>
+                <p>当前模式</p>
+              </div>
+            </n-grid-item>
+            <n-grid-item>
+              <div class="aksrt-gateway__stat">
+                <strong :class="overview.gateway?.test_enabled ? 'aksrt-text-warning' : ''">
+                  {{ overview.gateway?.test_enabled ? '启用' : '关闭' }}
+                </strong>
+                <p>测试网关</p>
+              </div>
+            </n-grid-item>
+            <n-grid-item>
+              <div class="aksrt-gateway__stat">
+                <strong :class="overview.gateway?.manual_review ? 'aksrt-text-info' : ''">
+                  {{ overview.gateway?.manual_review ? '启用' : '关闭' }}
+                </strong>
+                <p>人工复核</p>
+              </div>
+            </n-grid-item>
+            <n-grid-item>
+              <div class="aksrt-gateway__stat">
+                <n-tag :type="overview.gateway?.callback_secret ? 'success' : 'warning'" size="small" round>
+                  {{ overview.gateway?.callback_secret ? '已设置' : '未设置' }}
+                </n-tag>
+                <p>回调口令</p>
+              </div>
+            </n-grid-item>
+          </n-grid>
+        </n-card>
+      </n-spin>
+    </template>
+  </PaymentSectionPage>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useMessage } from 'naive-ui'
+import PaymentSectionPage from '@/pages/payment/PaymentSectionPage.vue'
+import api from '@/api'
+
+const message = useMessage()
+const gateways = ref([])
+const overview = ref({})
+const loading = ref(false)
+
+const modeLabel = computed(() => {
+  const mode = overview.value.gateway?.mode
+  if (mode === 'test_gateway') return '测试网关'
+  if (mode === 'adapter_ready') return '适配器就绪'
+  return '人工确认'
+})
+
+onMounted(async () => {
+  loading.value = true
+  try {
+    const [gwRes, ovRes] = await Promise.all([
+      api.request('/shop/gateways').catch(() => null),
+      api.request('/payment/overview').catch(() => null),
+    ])
+    if (gwRes?.data?.gateways) {
+      gateways.value = gwRes.data.gateways
+    }
+    if (ovRes?.data) {
+      overview.value = ovRes.data
+    }
+  } catch {
+    message.warning('部分支付接口暂不可用')
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.aksrt-gateway__card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 8px;
+  background: var(--surface-2, #fafafa);
+  border: 1px solid var(--color-line, #f0f0f0);
+}
+
+.aksrt-gateway__icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-3, #f0f0f0);
+  color: var(--color-ink-4, #8a909c);
+  font-size: 16px;
+}
+
+.aksrt-gateway__icon--active {
+  background: var(--color-primary-soft, #f0f5ff);
+  color: var(--color-primary, #1890ff);
+}
+
+.aksrt-gateway__card strong {
+  display: block;
+  font-size: 14px;
+  color: var(--color-ink, #1a1a2e);
+}
+
+.aksrt-gateway__card p {
+  margin: 2px 0 0;
+  font-size: 12px;
+  color: var(--color-ink-4, #8a909c);
+}
+
+.aksrt-gateway__stat {
+  text-align: center;
+  padding: 16px;
+  border-radius: 8px;
+  background: var(--surface-2, #fafafa);
+}
+
+.aksrt-gateway__stat strong {
+  display: block;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-ink, #1a1a2e);
+}
+
+.aksrt-gateway__stat p {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--color-ink-4, #8a909c);
+}
+
+.aksrt-text-warning {
+  color: var(--color-warning, #f59e0b);
+}
+
+.aksrt-text-info {
+  color: var(--color-info, #3b82f6);
+}
+</style>