feat: 添加用户统计功能，更新用户状态接口，优化统计组件

2025-12-17 15:09:52 +08:00
parent e4c8deaacf
commit 2f03dcf8d8
4 changed files with 140 additions and 22 deletions
--- 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-VWI_AnCM.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-B0E0aOXs.css">
+  <script type="module" crossorigin src="./assets/index-CurkpZlu.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-BK0XSEUV.css">
 </head>

 <body>
--- a/frontend/superadmin/src/components/StatisticsStrip.vue
+++ b/frontend/superadmin/src/components/StatisticsStrip.vue
@@ -0,0 +1,29 @@
+<script setup>
+const props = defineProps({
+    items: {
+        type: Array,
+        default: () => []
+    },
+    containerClass: {
+        type: String,
+        default: 'card'
+    }
+});
+</script>
+
+<template>
+    <div :class="props.containerClass">
+        <div class="flex flex-wrap items-center justify-between gap-6">
+            <div v-for="(item, idx) in props.items" :key="item.key ?? idx" class="flex items-center gap-4 flex-1 min-w-[220px]">
+                <div class="w-12 h-12 rounded-full flex items-center justify-center bg-surface-100 dark:bg-surface-800">
+                    <i class="pi text-primary text-xl" :class="item.icon" />
+                </div>
+                <div class="flex items-center gap-3">
+                    <span class="text-muted-color">{{ item.label }}</span>
+                    <span class="text-surface-900 dark:text-surface-0 text-xl font-semibold" :class="item.valueClass">{{ item.value }}</span>
+                </div>
+                <div v-if="idx !== props.items.length - 1" class="hidden xl:block w-px self-stretch bg-surface-200 dark:bg-surface-700 ml-auto"></div>
+            </div>
+        </div>
+    </div>
+</template>
--- a/frontend/superadmin/src/service/UserService.js
+++ b/frontend/superadmin/src/service/UserService.js
@@ -23,13 +23,37 @@ export const UserService = {
        };
    },
    async getUserStatuses() {
-        const data = await requestJson('/super/v1/users/statuses');
-        return Array.isArray(data) ? data : [];
+        try {
+            const data = await requestJson('/super/v1/user/statuses');
+            return Array.isArray(data) ? data : [];
+        } catch (error) {
+            if (error?.status === 404) {
+                const data = await requestJson('/super/v1/users/statuses');
+                return Array.isArray(data) ? data : [];
+            }
+            throw error;
+        }
    },
    async updateUserStatus({ userID, status }) {
-        return requestJson(`/super/v1/users/${userID}/status`, {
-            method: 'PATCH',
-            body: { status }
-        });
+        try {
+            return await requestJson(`/super/v1/user/${userID}/status`, { method: 'PATCH', body: { status } });
+        } catch (error) {
+            if (error?.status === 404) {
+                return requestJson(`/super/v1/users/${userID}/status`, { method: 'PATCH', body: { status } });
+            }
+            throw error;
+        }
+    },
+    async getUserStatistics() {
+        try {
+            const data = await requestJson('/super/v1/users/statistics');
+            return Array.isArray(data) ? data : [];
+        } catch (error) {
+            if (error?.status === 404) {
+                const data = await requestJson('/super/v1/users/statistic');
+                return Array.isArray(data) ? data : [];
+            }
+            throw error;
+        }
    }
 };
--- a/frontend/superadmin/src/views/superadmin/Users.vue
+++ b/frontend/superadmin/src/views/superadmin/Users.vue
@@ -1,7 +1,8 @@
 <script setup>
+import StatisticsStrip from '@/components/StatisticsStrip.vue';
 import { UserService } from '@/service/UserService';
 import { useToast } from 'primevue/usetoast';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';

 const toast = useToast();

@@ -46,6 +47,57 @@ const statusOptions = ref([]);
 const statusUser = ref(null);
 const statusValue = ref(null);

+const statistics = ref([]);
+const statisticsLoading = ref(false);
+
+const statisticsItems = computed(() => {
+    const total = (statistics.value || []).reduce((sum, row) => sum + (Number(row?.count) || 0), 0);
+    const statusIcon = (status) => {
+        switch (status) {
+            case 'verified':
+                return 'pi-check-circle';
+            case 'pending_verify':
+                return 'pi-clock';
+            case 'banned':
+                return 'pi-ban';
+            default:
+                return 'pi-tag';
+        }
+    };
+    const valueClass = (status) => {
+        switch (status) {
+            case 'banned':
+                return 'text-red-500';
+            case 'pending_verify':
+                return 'text-orange-500';
+            default:
+                return '';
+        }
+    };
+
+    return [
+        { key: 'total', label: '用户总数：', value: statisticsLoading.value ? '-' : total, icon: 'pi-users' },
+        ...(statistics.value || []).map((row) => ({
+            key: row?.status ?? row?.status_description,
+            label: `${row?.status_description || row?.status || '-'}：`,
+            value: statisticsLoading.value ? '-' : (row?.count ?? 0),
+            icon: statusIcon(row?.status),
+            valueClass: valueClass(row?.status)
+        }))
+    ];
+});
+
+async function loadStatistics() {
+    statisticsLoading.value = true;
+    try {
+        statistics.value = await UserService.getUserStatistics();
+    } catch (error) {
+        toast.add({ severity: 'error', summary: '加载失败', detail: error?.message || '无法加载用户统计信息', life: 4000 });
+    } finally {
+        statisticsLoading.value = false;
+    }
+}
+
 async function ensureStatusOptionsLoaded() {
    if (statusOptions.value.length > 0) return;
    const list = await UserService.getUserStatuses();
@@ -82,6 +134,7 @@ async function confirmUpdateStatus() {
        toast.add({ severity: 'success', summary: '更新成功', detail: `用户ID: ${userID}`, life: 3000 });
        statusDialogVisible.value = false;
        await loadUsers();
+        await loadStatistics();
    } catch (error) {
        toast.add({ severity: 'error', summary: '更新失败', detail: error?.message || '无法更新用户状态', life: 4000 });
    } finally {
@@ -141,11 +194,13 @@ function onSort(event) {

 onMounted(() => {
    loadUsers();
+    loadStatistics();
 });
 </script>

 <template>
    <div>
+        <StatisticsStrip :items="statisticsItems" containerClass="card mb-4" />
        <div class="card">
            <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
                <div class="flex items-center gap-2">
@@ -163,19 +218,32 @@ onMounted(() => {
                </div>
            </div>

-            <DataTable :value="users" dataKey="id" :loading="loading" lazy :paginator="true" :rows="rows"
-                :totalRecords="totalRecords" :first="(page - 1) * rows" :rowsPerPageOptions="[10, 20, 50, 100]"
-                sortMode="single" :sortField="sortField" :sortOrder="sortOrder" @page="onPage" @sort="onSort"
+            <DataTable
+                :value="users"
+                dataKey="id"
+                :loading="loading"
+                lazy
+                :paginator="true"
+                :rows="rows"
+                :totalRecords="totalRecords"
+                :first="(page - 1) * rows"
+                :rowsPerPageOptions="[10, 20, 50, 100]"
+                sortMode="single"
+                :sortField="sortField"
+                :sortOrder="sortOrder"
+                @page="onPage"
+                @sort="onSort"
                currentPageReportTemplate="显示第 {first} - {last} 条，共 {totalRecords} 条"
                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-                scrollable scrollHeight="flex" responsiveLayout="scroll">
+                scrollable
+                scrollHeight="flex"
+                responsiveLayout="scroll"
+            >
                <Column field="id" header="ID" sortable style="min-width: 6rem" />
                <Column field="username" header="用户名" sortable style="min-width: 14rem" />
                <Column field="status" header="状态" sortable style="min-width: 10rem">
                    <template #body="{ data }">
-                        <Tag :value="data.status_description || data.status || '-'"
-                            :severity="getStatusSeverity(data.status)" class="cursor-pointer"
-                            @click="openStatusDialog(data)" />
+                        <Tag :value="data.status_description || data.status || '-'" :severity="getStatusSeverity(data.status)" class="cursor-pointer" @click="openStatusDialog(data)" />
                    </template>
                </Column>
                <Column field="roles" header="角色" style="min-width: 16rem">
@@ -214,15 +282,12 @@ onMounted(() => {
            <div class="flex flex-col gap-4">
                <div>
                    <label class="block font-medium mb-2">用户状态</label>
-                    <Select v-model="statusValue" :options="statusOptions" optionLabel="label" optionValue="value"
-                        placeholder="选择状态" :disabled="statusLoading" fluid />
+                    <Select v-model="statusValue" :options="statusOptions" optionLabel="label" optionValue="value" placeholder="选择状态" :disabled="statusLoading" fluid />
                </div>
            </div>
            <template #footer>
-                <Button label="取消" icon="pi pi-times" text @click="statusDialogVisible = false"
-                    :disabled="statusLoading" />
-                <Button label="确认" icon="pi pi-check" @click="confirmUpdateStatus" :loading="statusLoading"
-                    :disabled="!statusValue" />
+                <Button label="取消" icon="pi pi-times" text @click="statusDialogVisible = false" :disabled="statusLoading" />
+                <Button label="确认" icon="pi pi-check" @click="confirmUpdateStatus" :loading="statusLoading" :disabled="!statusValue" />
            </template>
        </Dialog>
    </div>