feat: 添加订单详情和退款功能，更新用户角色管理，增强超级管理员鉴权

2025-12-24 09:48:31 +08:00
parent fcbc6bd394
commit 1e1132718c
17 changed files with 586 additions and 6 deletions
--- a/frontend/superadmin/SUPERADMIN_PAGES.md
+++ b/frontend/superadmin/SUPERADMIN_PAGES.md
@@ -21,6 +21,25 @@
 - `/`：概览 Dashboard
 - `/superadmin/tenants`：租户管理
 - `/superadmin/users`：用户管理
+- `/superadmin/orders`：订单管理
+
+## 1.1 迭代路线（按优先级依次实现）
+
+1) **安全与鉴权**
+   - `/super/v1/*`（除 `/auth/login`）强制 JWT 校验与 `super_admin` 角色校验
+   - `/super/v1/auth/token` 改为基于当前 token 的续期/校验（不再返回固定用户 token）
+2) **订单管理**
+   - 订单列表（跨租户筛选/分页/排序）
+   - 订单详情（含 items / snapshot 展示）
+   - 平台侧退款（支持强制退款，记录操作人）
+3) **租户管理增强**
+   - 租户详情页（基本信息、过期续期、状态变更、管理员/成员管理）
+4) **用户管理增强**
+   - 用户详情页（角色、状态、余额/冻结、加入/拥有的租户、操作记录）
+   - 角色授予/回收（`super_admin`）
+5) **审计与运维**
+   - 操作审计日志、关键行为告警
+   - 任务队列/退款处理监控、健康检查面板

 ## 2. 页面规格（页面 → 功能 → API）

--- a/frontend/superadmin/dist/index.html
+++ b/frontend/superadmin/dist/index.html
@@ -7,8 +7,8 @@
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Sakai Vue</title>
      <link href="https://fonts.cdnfonts.com/css/lato" rel="stylesheet">
-  <script type="module" crossorigin src="./assets/index-CYuRitZG.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-DMmaUuq9.css">
+  <script type="module" crossorigin src="./assets/index-D_TMcKRC.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-gxWMay_c.css">
 </head>

 <body>
--- a/frontend/superadmin/src/service/OrderService.js
+++ b/frontend/superadmin/src/service/OrderService.js
@@ -71,5 +71,20 @@ export const OrderService = {
    },
    async getOrderStatistics() {
        return requestJson('/super/v1/orders/statistics');
+    },
+    async getOrderDetail(orderID) {
+        if (!orderID) throw new Error('orderID is required');
+        return requestJson(`/super/v1/orders/${orderID}`);
+    },
+    async refundOrder(orderID, { force, reason, idempotency_key } = {}) {
+        if (!orderID) throw new Error('orderID is required');
+        return requestJson(`/super/v1/orders/${orderID}/refund`, {
+            method: 'POST',
+            body: {
+                force: Boolean(force),
+                reason,
+                idempotency_key
+            }
+        });
    }
 };
--- a/frontend/superadmin/src/service/UserService.js
+++ b/frontend/superadmin/src/service/UserService.js
@@ -77,6 +77,11 @@ export const UserService = {
            throw error;
        }
    },
+    async updateUserRoles({ userID, roles }) {
+        if (!userID) throw new Error('userID is required');
+        if (!Array.isArray(roles) || roles.length === 0) throw new Error('roles is required');
+        return requestJson(`/super/v1/users/${userID}/roles`, { method: 'PATCH', body: { roles } });
+    },
    async getUserStatistics() {
        try {
            const data = await requestJson('/super/v1/users/statistics');
--- a/frontend/superadmin/src/views/superadmin/Orders.vue
+++ b/frontend/superadmin/src/views/superadmin/Orders.vue
@@ -10,6 +10,16 @@ const toast = useToast();
 const orders = ref([]);
 const loading = ref(false);

+const detailDialogVisible = ref(false);
+const detailLoading = ref(false);
+const detail = ref(null);
+
+const refundDialogVisible = ref(false);
+const refundLoading = ref(false);
+const refundOrder = ref(null);
+const refundForce = ref(false);
+const refundReason = ref('');
+
 const totalRecords = ref(0);
 const page = ref(1);
 const rows = ref(10);
@@ -77,6 +87,14 @@ function getOrderStatusSeverity(value) {
    }
 }

+function safeJson(value) {
+    try {
+        return JSON.stringify(value ?? null, null, 2);
+    } catch {
+        return String(value ?? '');
+    }
+}
+
 async function loadOrders() {
    loading.value = true;
    try {
@@ -111,6 +129,51 @@ async function loadOrders() {
    }
 }

+async function openDetailDialog(order) {
+    const id = order?.id;
+    if (!id) return;
+
+    detailDialogVisible.value = true;
+    detailLoading.value = true;
+    detail.value = null;
+
+    try {
+        detail.value = await OrderService.getOrderDetail(id);
+    } catch (error) {
+        toast.add({ severity: 'error', summary: '加载失败', detail: error?.message || '无法加载订单详情', life: 4000 });
+        detailDialogVisible.value = false;
+    } finally {
+        detailLoading.value = false;
+    }
+}
+
+function openRefundDialog(order) {
+    refundOrder.value = order;
+    refundDialogVisible.value = true;
+    refundForce.value = false;
+    refundReason.value = '';
+}
+
+async function confirmRefund() {
+    const id = refundOrder.value?.id;
+    if (!id) return;
+
+    refundLoading.value = true;
+    try {
+        await OrderService.refundOrder(id, { force: refundForce.value, reason: refundReason.value });
+        toast.add({ severity: 'success', summary: '已提交退款', detail: `订单ID: ${id}`, life: 3000 });
+        refundDialogVisible.value = false;
+        await loadOrders();
+        if (detailDialogVisible.value && detail.value?.order?.id === id) {
+            detail.value = await OrderService.getOrderDetail(id);
+        }
+    } catch (error) {
+        toast.add({ severity: 'error', summary: '退款失败', detail: error?.message || '无法发起退款', life: 4000 });
+    } finally {
+        refundLoading.value = false;
+    }
+}
+
 function onSearch() {
    page.value = 1;
    loadOrders();
@@ -238,7 +301,12 @@ loadOrders();
            scrollHeight="flex"
            responsiveLayout="scroll"
        >
-            <Column field="id" header="ID" sortable style="min-width: 7rem" />
+            <Column field="id" header="ID" sortable style="min-width: 8rem">
+                <template #body="{ data }">
+                    <Button label="详情" icon="pi pi-search" text size="small" class="p-0 mr-2" @click="openDetailDialog(data)" />
+                    <span>{{ data.id }}</span>
+                </template>
+            </Column>
            <Column header="租户" style="min-width: 16rem">
                <template #body="{ data }">
                    <div class="flex flex-col">
@@ -291,7 +359,132 @@ loadOrders();
                    {{ formatDate(data.refunded_at) }}
                </template>
            </Column>
+            <Column header="操作" style="min-width: 10rem">
+                <template #body="{ data }">
+                    <Button
+                        label="退款"
+                        icon="pi pi-replay"
+                        text
+                        size="small"
+                        class="p-0"
+                        :disabled="data?.status !== 'paid'"
+                        @click="openRefundDialog(data)"
+                    />
+                </template>
+            </Column>
        </DataTable>
    </div>
-</template>

+    <Dialog v-model:visible="detailDialogVisible" :modal="true" :style="{ width: '1180px' }">
+        <template #header>
+            <div class="flex items-center gap-2">
+                <span class="font-medium">订单详情</span>
+                <span class="text-muted-color truncate max-w-[520px]">
+                    {{ detail?.order?.id ? `#${detail.order.id}` : '' }}
+                </span>
+            </div>
+        </template>
+        <div v-if="detailLoading" class="flex items-center justify-center py-10">
+            <ProgressSpinner style="width: 36px; height: 36px" strokeWidth="6" />
+        </div>
+        <div v-else class="flex flex-col gap-4">
+            <div class="grid grid-cols-12 gap-3">
+                <div class="col-span-12 md:col-span-6">
+                    <div class="text-sm text-muted-color">租户</div>
+                    <div class="font-medium">{{ detail?.tenant?.name ?? '-' }}</div>
+                    <div class="text-sm text-muted-color">{{ detail?.tenant?.code ?? '-' }} / {{ detail?.tenant?.id ?? '-' }}</div>
+                </div>
+                <div class="col-span-12 md:col-span-6">
+                    <div class="text-sm text-muted-color">买家</div>
+                    <div class="font-medium">{{ detail?.buyer?.username ?? '-' }}</div>
+                    <div class="text-sm text-muted-color">ID: {{ detail?.buyer?.id ?? '-' }}</div>
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                    <div class="text-sm text-muted-color">状态</div>
+                    <Tag :value="detail?.order?.status_description || detail?.order?.status || '-'" :severity="getOrderStatusSeverity(detail?.order?.status)" />
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                    <div class="text-sm text-muted-color">实付</div>
+                    <div class="font-medium">{{ formatCny(detail?.order?.amount_paid) }}</div>
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                    <div class="text-sm text-muted-color">创建时间</div>
+                    <div class="font-medium">{{ formatDate(detail?.order?.created_at) }}</div>
+                </div>
+                <div class="col-span-12 md:col-span-3">
+                    <div class="text-sm text-muted-color">支付时间</div>
+                    <div class="font-medium">{{ formatDate(detail?.order?.paid_at) }}</div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-12 gap-3">
+                <div class="col-span-12 md:col-span-6">
+                    <div class="text-sm text-muted-color mb-2">订单快照（snapshot）</div>
+                    <pre class="text-xs whitespace-pre-wrap bg-surface-50 border border-surface-200 rounded-md p-3 max-h-[360px] overflow-auto">{{ safeJson(detail?.order?.snapshot) }}</pre>
+                </div>
+                <div class="col-span-12 md:col-span-6">
+                    <div class="text-sm text-muted-color mb-2">订单明细（items）</div>
+                    <DataTable :value="detail?.order?.items || []" dataKey="id" responsiveLayout="scroll" scrollable scrollHeight="360px">
+                        <Column field="id" header="ItemID" style="min-width: 7rem" />
+                        <Column field="content_id" header="ContentID" style="min-width: 8rem" />
+                        <Column field="amount_paid" header="金额" style="min-width: 10rem">
+                            <template #body="{ data }">
+                                {{ formatCny(data.amount_paid) }}
+                            </template>
+                        </Column>
+                        <Column field="snapshot" header="内容快照" style="min-width: 24rem">
+                            <template #body="{ data }">
+                                <pre class="text-xs whitespace-pre-wrap bg-surface-50 border border-surface-200 rounded-md p-2 max-h-[180px] overflow-auto">{{ safeJson(data.snapshot) }}</pre>
+                            </template>
+                        </Column>
+                    </DataTable>
+                </div>
+            </div>
+        </div>
+        <template #footer>
+            <Button label="关闭" icon="pi pi-times" text @click="detailDialogVisible = false" />
+            <Button
+                label="退款"
+                icon="pi pi-replay"
+                severity="danger"
+                @click="openRefundDialog(detail?.order)"
+                :disabled="detail?.order?.status !== 'paid'"
+            />
+        </template>
+    </Dialog>
+
+    <Dialog v-model:visible="refundDialogVisible" :modal="true" :style="{ width: '520px' }">
+        <template #header>
+            <div class="flex items-center gap-2">
+                <span class="font-medium">发起退款</span>
+                <span class="text-muted-color truncate max-w-[280px]">
+                    {{ refundOrder?.id ? `#${refundOrder.id}` : '' }}
+                </span>
+            </div>
+        </template>
+        <div class="flex flex-col gap-4">
+            <div class="text-sm text-muted-color">
+                该操作会将订单从 <span class="font-medium">paid</span> 推进到 <span class="font-medium">refunding</span> 并提交异步退款任务。
+            </div>
+            <div class="flex items-center gap-2">
+                <Checkbox v-model="refundForce" inputId="refundForce" binary />
+                <label for="refundForce" class="cursor-pointer">强制退款（绕过默认时间窗）</label>
+            </div>
+            <div>
+                <label class="block font-medium mb-2">退款原因</label>
+                <InputText v-model="refundReason" placeholder="可选，用于审计" class="w-full" />
+            </div>
+        </div>
+        <template #footer>
+            <Button label="取消" icon="pi pi-times" text @click="refundDialogVisible = false" :disabled="refundLoading" />
+            <Button
+                label="确认退款"
+                icon="pi pi-check"
+                severity="danger"
+                @click="confirmRefund"
+                :loading="refundLoading"
+                :disabled="refundOrder?.status !== 'paid'"
+            />
+        </template>
+    </Dialog>
+</template>
--- a/frontend/superadmin/src/views/superadmin/Users.vue
+++ b/frontend/superadmin/src/views/superadmin/Users.vue
@@ -67,6 +67,11 @@ const statusValue = ref(null);

 const statusFilterOptions = computed(() => [{ label: '全部', value: '' }, ...(statusOptions.value || [])]);

+const rolesDialogVisible = ref(false);
+const rolesLoading = ref(false);
+const rolesUser = ref(null);
+const rolesSuperAdmin = ref(false);
+
 const ownedTenantsDialogVisible = ref(false);
 const ownedTenantsLoading = ref(false);
 const ownedTenantsUser = ref(null);
@@ -187,6 +192,37 @@ async function confirmUpdateStatus() {
    }
 }

+function hasRole(user, role) {
+    const roles = user?.roles || [];
+    return Array.isArray(roles) && roles.includes(role);
+}
+
+function openRolesDialog(user) {
+    rolesUser.value = user;
+    rolesSuperAdmin.value = hasRole(user, 'super_admin');
+    rolesDialogVisible.value = true;
+}
+
+async function confirmUpdateRoles() {
+    const userID = rolesUser.value?.id;
+    if (!userID) return;
+
+    const roles = ['user'];
+    if (rolesSuperAdmin.value) roles.push('super_admin');
+
+    rolesLoading.value = true;
+    try {
+        await UserService.updateUserRoles({ userID, roles });
+        toast.add({ severity: 'success', summary: '更新成功', detail: `用户ID: ${userID}`, life: 3000 });
+        rolesDialogVisible.value = false;
+        await loadUsers();
+    } catch (error) {
+        toast.add({ severity: 'error', summary: '更新失败', detail: error?.message || '无法更新用户角色', life: 4000 });
+    } finally {
+        rolesLoading.value = false;
+    }
+}
+
 async function loadUsers() {
    loading.value = true;
    try {
@@ -451,6 +487,18 @@ onMounted(() => {
                        </div>
                    </template>
                </Column>
+                <Column header="超管" style="min-width: 9rem">
+                    <template #body="{ data }">
+                        <Button
+                            :label="hasRole(data, 'super_admin') ? '是' : '否'"
+                            icon="pi pi-user-edit"
+                            text
+                            size="small"
+                            class="p-0"
+                            @click="openRolesDialog(data)"
+                        />
+                    </template>
+                </Column>
                <Column field="balance" header="余额" sortable style="min-width: 10rem">
                    <template #body="{ data }">
                        {{ formatCny(data.balance) }}
@@ -524,6 +572,26 @@ onMounted(() => {
            </template>
        </Dialog>

+        <Dialog v-model:visible="rolesDialogVisible" :modal="true" :style="{ width: '420px' }">
+            <template #header>
+                <div class="flex items-center gap-2">
+                    <span class="font-medium">更新用户角色</span>
+                    <span class="text-muted-color truncate max-w-[240px]">{{ rolesUser?.username ?? '-' }}</span>
+                </div>
+            </template>
+            <div class="flex flex-col gap-4">
+                <div class="flex items-center gap-2">
+                    <Checkbox inputId="rolesSuperAdmin" v-model="rolesSuperAdmin" binary :disabled="rolesLoading" />
+                    <label for="rolesSuperAdmin" class="cursor-pointer">super_admin</label>
+                </div>
+                <div class="text-sm text-muted-color">默认包含 user 角色。</div>
+            </div>
+            <template #footer>
+                <Button label="取消" icon="pi pi-times" text @click="rolesDialogVisible = false" :disabled="rolesLoading" />
+                <Button label="确认" icon="pi pi-check" @click="confirmUpdateRoles" :loading="rolesLoading" />
+            </template>
+        </Dialog>
+
        <Dialog v-model:visible="ownedTenantsDialogVisible" :modal="true" :style="{ width: '980px' }">
            <template #header>
                <div class="flex items-center gap-2">