优化结构

web/src/api/payment.js

@@ -0,0 +1,21 @@
+import service from '@/utils/request'
+
+export const getPaymentConfigs = () => service({ url: '/payment/configs', method: 'get' })
+
+export const savePaymentConfig = (data) => service({
+  url: '/payment/config',
+  method: 'post',
+  data
+})
+
+export const getPaymentOrders = (params) => service({
+  url: '/payment/orders',
+  method: 'get',
+  params
+})
+
+export const getPaymentOrder = (data) => service({
+  url: '/payment/order',
+  method: 'post',
+  data
+})

web/src/view/systemTools/payment/config.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="kra-table-box">
+    <el-alert title="支付密钥只用于保存和调用渠道，列表接口会自动脱敏。提交 ****** 会保留原密钥。" type="warning" :closable="false" class="mb-4" />
+    <el-table :data="configs" row-key="provider" stripe>
+      <el-table-column prop="provider" label="渠道" width="160" />
+      <el-table-column label="状态" width="110"><template #default="scope"><el-switch v-model="scope.row.enabled" @change="save(scope.row)" /></template></el-table-column>
+      <el-table-column label="配置 JSON" min-width="520"><template #default="scope"><el-input v-model="scope.row.editor" type="textarea" :rows="4" spellcheck="false" /></template></el-table-column>
+      <el-table-column label="操作" width="110"><template #default="scope"><el-button type="primary" link icon="check" @click="save(scope.row)">保存</el-button></template></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getPaymentConfigs, savePaymentConfig } from '@/api/payment'
+
+const configs = ref([])
+const load = async () => {
+  const res = await getPaymentConfigs()
+  if (res.code === 0) configs.value = (res.data || []).map((item) => ({ ...item, editor: JSON.stringify(item.config || {}, null, 2) }))
+}
+const save = async (row) => {
+  let config
+  try { config = JSON.parse(row.editor || '{}') } catch { ElMessage.error('配置必须是合法 JSON'); return }
+  const res = await savePaymentConfig({ provider: row.provider, enabled: row.enabled, config })
+  if (res.code === 0) { ElMessage.success('保存成功'); await load() }
+}
+load()
+</script>

web/src/view/systemTools/payment/orders.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <div class="kra-search-box">
+      <el-form :inline="true" :model="searchInfo">
+        <el-form-item label="渠道"><el-input v-model="searchInfo.provider" placeholder="alipay / wechat-v3" clearable /></el-form-item>
+        <el-form-item label="商户订单号"><el-input v-model="searchInfo.tradeNo" clearable /></el-form-item>
+        <el-form-item label="业务类型"><el-input v-model="searchInfo.businessType" clearable /></el-form-item>
+        <el-form-item label="支付状态">
+          <el-select v-model="searchInfo.paymentStatus" clearable placeholder="全部">
+            <el-option label="待支付" value="pending" /><el-option label="已支付" value="paid" />
+            <el-option label="失败" value="failed" /><el-option label="已退款" value="refunded" />
+          </el-select>
+        </el-form-item>
+        <el-form-item><el-button type="primary" icon="search" @click="reload">查询</el-button><el-button icon="refresh" @click="reset">重置</el-button></el-form-item>
+      </el-form>
+    </div>
+    <div class="kra-table-box">
+      <el-table :data="rows" row-key="ID" stripe>
+        <el-table-column prop="tradeNo" label="商户订单号" min-width="190" show-overflow-tooltip />
+        <el-table-column prop="provider" label="渠道" width="120" />
+        <el-table-column prop="subject" label="商品/标题" min-width="180" show-overflow-tooltip />
+        <el-table-column label="金额" width="130"><template #default="scope">{{ scope.row.amount }} {{ scope.row.currency }}</template></el-table-column>
+        <el-table-column label="支付状态" width="110"><template #default="scope"><el-tag :type="statusType(scope.row.paymentStatus)">{{ statusText(scope.row.paymentStatus) }}</el-tag></template></el-table-column>
+        <el-table-column label="发货" width="110"><template #default="scope"><el-tag :type="scope.row.fulfillmentStatus === 'succeeded' ? 'success' : 'info'">{{ scope.row.fulfillmentStatus }}</el-tag></template></el-table-column>
+        <el-table-column label="退款" width="110"><template #default="scope">{{ scope.row.refundStatus }}</template></el-table-column>
+        <el-table-column prop="businessId" label="业务 ID" min-width="150" show-overflow-tooltip />
+        <el-table-column label="创建时间" width="180"><template #default="scope">{{ formatDate(scope.row.createdAt) }}</template></el-table-column>
+      </el-table>
+      <div class="kra-pagination"><el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper" @current-change="changePage" @size-change="changeSize" /></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { getPaymentOrders } from '@/api/payment'
+import { formatDate } from '@/utils/format'
+
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const rows = ref([])
+const searchInfo = ref({})
+const statusText = (status) => ({ initialized: '初始化', pending: '待支付', paid: '已支付', failed: '失败', closed: '已关闭', partially_refunded: '部分退款', refunded: '已退款' }[status] || status || '-')
+const statusType = (status) => ({ paid: 'success', refunded: 'success', failed: 'danger', closed: 'info' }[status] || 'warning')
+const load = async () => {
+  const res = await getPaymentOrders({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
+  if (res.code === 0) { rows.value = res.data.list || []; total.value = res.data.total || 0; page.value = res.data.page || page.value; pageSize.value = res.data.pageSize || pageSize.value }
+}
+const reload = () => { page.value = 1; load() }
+const reset = () => { searchInfo.value = {}; reload() }
+const changePage = (value) => { page.value = value; load() }
+const changeSize = (value) => { pageSize.value = value; page.value = 1; load() }
+load()
+</script>