feat: 更新超级管理员登录逻辑，添加路由守卫和用户统计功能

2025-12-23 16:28:21 +08:00
parent 3db41f4b0c
commit d09a9374ee
9 changed files with 508 additions and 180 deletions
--- a/frontend/superadmin/SUPERADMIN_PAGES.md
+++ b/frontend/superadmin/SUPERADMIN_PAGES.md
@@ -0,0 +1,90 @@
+# QuyUn 平台超级管理员（frontend/superadmin）页面与功能规划
+
+基于 `backend/docs/swagger.json` 中平台侧接口 `/super/v1/*`，规划 `frontend/superadmin/` 的信息架构、页面路由与核心交互。
+
+> `frontend/superadmin/src/router/index.js` 的路由基座为 `/super/`；API base 由 `VITE_API_BASE_URL` 控制（见 `frontend/superadmin/src/service/apiClient.js`），本文中的 API 路径均为绝对路径（例如 `/super/v1/users`）。
+
+## 0. 全局约定（前端通用能力）
+
+- **鉴权**：登录成功后保存 `token`（建议保存到 `localStorage.super_token`），所有请求带 `Authorization: Bearer <token>`（项目已在 `frontend/superadmin/src/service/apiClient.js` 实现）。
+- **路由守卫**：
+  - 未登录访问受保护页面 → 跳转 `/auth/login`。
+  - 可选：启动时调用 `GET /super/v1/auth/token` 校验 token 是否有效（401 则清理 token 并回到登录页）。
+- **分页/排序**：列表接口使用 `page/limit`，并支持 `asc/desc`（字段名逗号分隔）。统一封装分页表格组件与 URL query 同步。
+- **枚举来源**：优先使用 `GET /super/v1/tenants/statuses`、`GET /super/v1/users/statuses` 返回的 `requests.KV[]` 作为下拉选项（swagger 中 `dto.*StatusUpdateForm` 的 enum 与 `consts.*Status` 存在不一致，见“风险点”）。
+
+## 1. 路由与菜单（建议）
+
+（与现有路由保持一致，业务页面放在 `/superadmin/*`）
+
+- `/auth/login`：登录
+- `/`：概览 Dashboard
+- `/superadmin/tenants`：租户管理
+- `/superadmin/users`：用户管理
+
+## 2. 页面规格（页面 → 功能 → API）
+
+### 2.1 登录 `/auth/login`
+
+目标：完成超级管理员登录并写入 token。
+
+- 登录表单：`username`、`password`（对应 `dto.LoginForm`）
+- API：
+  - 登录：`POST /super/v1/auth/login` → `dto.LoginResponse.token`
+  - 校验/续期：`GET /super/v1/auth/token`（返回同结构 `dto.LoginResponse`）
+- 交互：
+  - 失败提示：展示后端错误信息
+  - 成功：保存 token → 跳转到 `/superadmin/tenants` 或上次访问页面
+
+### 2.2 概览 `/`（Dashboard）
+
+目标：提供“关键指标 + 快捷入口”。
+
+- 指标：
+  - 用户状态统计：`GET /super/v1/users/statistics`（`dto.UserStatistics[]`）
+  - 可选：租户总数（利用租户列表响应中的 `total`）：`GET /super/v1/tenants?limit=10&page=1`
+- 快捷入口：租户管理、用户管理
+
+### 2.3 租户管理 `/superadmin/tenants`
+
+核心对象：`dto.TenantItem`
+
+- 租户列表（筛选/分页/排序）
+  - 过滤：`name`、`status`
+  - 排序：`asc/desc`
+  - API：`GET /super/v1/tenants`
+- 状态更新
+  - 选项：`GET /super/v1/tenants/statuses`（`requests.KV[]`）
+  - API：`PATCH /super/v1/tenants/{tenantID}/status`（`dto.TenantStatusUpdateForm`）
+  - 交互：点击状态 tag 打开弹窗选择新状态并提交
+- 续期/更新过期时间
+  - 方案：提供固定档位（7/30/90/180/365 天）或日期选择器（二选一；swagger 当前为 duration 档位）
+  - API：`PATCH /super/v1/tenants/{tenantID}`（`dto.TenantExpireUpdateForm.duration`）
+
+### 2.4 用户管理 `/superadmin/users`
+
+核心对象：`dto.UserItem`
+
+- 用户列表（筛选/分页/排序）
+  - 过滤：`username`、`tenantID`、`status`
+  - 排序：`asc/desc`
+  - API：`GET /super/v1/users`
+- 用户状态统计（页头统计条）
+  - API：`GET /super/v1/users/statistics`
+- 更新用户状态
+  - 选项：`GET /super/v1/users/statuses`（`requests.KV[]`）
+  - API：`PATCH /super/v1/users/{userID}/status`（`dto.UserStatusUpdateForm`）
+  - 交互：点击状态 tag 打开弹窗
+
+## 3. 枚举与数据结构（UI 需要）
+
+- 租户状态：`consts.TenantStatus`（`pending_verify` / `verified` / `banned`），推荐用 `GET /super/v1/tenants/statuses` 驱动展示 label
+- 用户状态：`consts.UserStatus`（`pending_verify` / `verified` / `banned`），推荐用 `GET /super/v1/users/statuses` 驱动展示 label
+- KV 结构：`requests.KV`（`key` 为机器值，`value` 为展示文案）
+
+## 4. 风险点 / 待补能力（从 swagger 反推）
+
+- **swagger 不一致**：`dto.TenantStatusUpdateForm.status` / `dto.UserStatusUpdateForm.status` 在 swagger 里额外出现 `normal/disabled` enum，但 `consts.*Status` 与列表筛选 enum 为 `pending_verify/verified/banned`；前端应以 `/statuses` 接口返回为准，并推动后端修正 swagger。
+- **分页 items 结构疑似不完整**：列表接口 swagger 中 `items` 被标成单个 object（`$ref dto.TenantItem`/`dto.UserItem`），实际应为数组；当前前端服务层已做兼容（`normalizeItems`），但建议后端修正 swagger。
+- **租户/用户详情与更多运维能力缺失**：目前没有用户详情、租户详情、角色管理、密码重置等超管常见能力；如需要可扩展接口与页面。
+
--- a/frontend/superadmin/dist/index.html
+++ b/frontend/superadmin/dist/index.html
@@ -7,7 +7,7 @@
      <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-DH-rBOaE.js"></script>
+  <script type="module" crossorigin src="./assets/index-BB3R-ZJM.js"></script>
  <link rel="stylesheet" crossorigin href="./assets/index-Ba8sjR1v.css">
 </head>

--- a/frontend/superadmin/src/layout/AppMenu.vue
+++ b/frontend/superadmin/src/layout/AppMenu.vue
@@ -14,151 +14,6 @@ const model = ref([
            { label: 'Tenants', icon: 'pi pi-fw pi-building', to: '/superadmin/tenants' },
            { label: 'Users', icon: 'pi pi-fw pi-users', to: '/superadmin/users' }
        ]
-    },
-    {
-        label: 'UI Components',
-        items: [
-            { label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/uikit/formlayout' },
-            { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/uikit/input' },
-            { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/uikit/button', class: 'rotated-icon' },
-            { label: 'Table', icon: 'pi pi-fw pi-table', to: '/uikit/table' },
-            { label: 'List', icon: 'pi pi-fw pi-list', to: '/uikit/list' },
-            { label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/uikit/tree' },
-            { label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/uikit/panel' },
-            { label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/uikit/overlay' },
-            { label: 'Media', icon: 'pi pi-fw pi-image', to: '/uikit/media' },
-            { label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/uikit/menu' },
-            { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/uikit/message' },
-            { label: 'File', icon: 'pi pi-fw pi-file', to: '/uikit/file' },
-            { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/uikit/charts' },
-            { label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/uikit/timeline' },
-            { label: 'Misc', icon: 'pi pi-fw pi-circle', to: '/uikit/misc' }
-        ]
-    },
-    {
-        label: 'Prime Blocks',
-        icon: 'pi pi-fw pi-prime',
-        items: [
-            {
-                label: 'Free Blocks',
-                icon: 'pi pi-fw pi-eye',
-                to: '/blocks'
-            },
-            {
-                label: 'All Blocks',
-                icon: 'pi pi-fw pi-globe',
-                url: 'https://blocks.primevue.org/',
-                target: '_blank'
-            }
-        ]
-    },
-    {
-        label: 'Pages',
-        icon: 'pi pi-fw pi-briefcase',
-        to: '/pages',
-        items: [
-            {
-                label: 'Landing',
-                icon: 'pi pi-fw pi-globe',
-                to: '/landing'
-            },
-            {
-                label: 'Auth',
-                icon: 'pi pi-fw pi-user',
-                items: [
-                    {
-                        label: 'Login',
-                        icon: 'pi pi-fw pi-sign-in',
-                        to: '/auth/login'
-                    },
-                    {
-                        label: 'Error',
-                        icon: 'pi pi-fw pi-times-circle',
-                        to: '/auth/error'
-                    },
-                    {
-                        label: 'Access Denied',
-                        icon: 'pi pi-fw pi-lock',
-                        to: '/auth/access'
-                    }
-                ]
-            },
-            {
-                label: 'Crud',
-                icon: 'pi pi-fw pi-pencil',
-                to: '/pages/crud'
-            },
-            {
-                label: 'Not Found',
-                icon: 'pi pi-fw pi-exclamation-circle',
-                to: '/pages/notfound'
-            },
-            {
-                label: 'Empty',
-                icon: 'pi pi-fw pi-circle-off',
-                to: '/pages/empty'
-            }
-        ]
-    },
-    {
-        label: 'Hierarchy',
-        items: [
-            {
-                label: 'Submenu 1',
-                icon: 'pi pi-fw pi-bookmark',
-                items: [
-                    {
-                        label: 'Submenu 1.1',
-                        icon: 'pi pi-fw pi-bookmark',
-                        items: [
-                            { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
-                            { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
-                            { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' }
-                        ]
-                    },
-                    {
-                        label: 'Submenu 1.2',
-                        icon: 'pi pi-fw pi-bookmark',
-                        items: [{ label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' }]
-                    }
-                ]
-            },
-            {
-                label: 'Submenu 2',
-                icon: 'pi pi-fw pi-bookmark',
-                items: [
-                    {
-                        label: 'Submenu 2.1',
-                        icon: 'pi pi-fw pi-bookmark',
-                        items: [
-                            { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
-                            { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' }
-                        ]
-                    },
-                    {
-                        label: 'Submenu 2.2',
-                        icon: 'pi pi-fw pi-bookmark',
-                        items: [{ label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' }]
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Get Started',
-        items: [
-            {
-                label: 'Documentation',
-                icon: 'pi pi-fw pi-book',
-                to: '/documentation'
-            },
-            {
-                label: 'View Source',
-                icon: 'pi pi-fw pi-github',
-                url: 'https://github.com/primefaces/sakai-vue',
-                target: '_blank'
-            }
-        ]
    }
 ]);
 </script>
--- a/frontend/superadmin/src/layout/AppTopbar.vue
+++ b/frontend/superadmin/src/layout/AppTopbar.vue
@@ -1,8 +1,16 @@
 <script setup>
 import { useLayout } from '@/layout/composables/layout';
+import { clearSuperAuthToken } from '@/service/auth';
 import AppConfigurator from './AppConfigurator.vue';
+import { useRouter } from 'vue-router';

 const { toggleMenu, toggleDarkMode, isDarkTheme } = useLayout();
+const router = useRouter();
+
+async function logout() {
+    clearSuperAuthToken();
+    await router.push({ name: 'login' });
+}
 </script>

 <template>
@@ -60,17 +68,9 @@ const { toggleMenu, toggleDarkMode, isDarkTheme } = useLayout();

            <div class="layout-topbar-menu hidden lg:block">
                <div class="layout-topbar-menu-content">
-                    <button type="button" class="layout-topbar-action">
-                        <i class="pi pi-calendar"></i>
-                        <span>Calendar</span>
-                    </button>
-                    <button type="button" class="layout-topbar-action">
-                        <i class="pi pi-inbox"></i>
-                        <span>Messages</span>
-                    </button>
-                    <button type="button" class="layout-topbar-action">
-                        <i class="pi pi-user"></i>
-                        <span>Profile</span>
+                    <button type="button" class="layout-topbar-action" @click="logout">
+                        <i class="pi pi-sign-out"></i>
+                        <span>Logout</span>
                    </button>
                </div>
            </div>
--- a/frontend/superadmin/src/router/index.js
+++ b/frontend/superadmin/src/router/index.js
@@ -1,5 +1,6 @@
 import AppLayout from '@/layout/AppLayout.vue';
 import { createRouter, createWebHistory } from 'vue-router';
+import { clearSuperAuthToken, hasSuperAuthToken, refreshSuperToken } from '@/service/auth';

 const router = createRouter({
    history: createWebHistory('/super/'),
@@ -7,6 +8,7 @@ const router = createRouter({
        {
            path: '/',
            component: AppLayout,
+            meta: { requiresAuth: true },
            children: [
                {
                    path: '/',
@@ -153,4 +155,34 @@ const router = createRouter({
    ]
 });

+let tokenValidated = false;
+let tokenValidationPromise = null;
+
+router.beforeEach(async (to) => {
+    if (to.meta?.requiresAuth !== true) return true;
+
+    const isAuthed = hasSuperAuthToken();
+    if (!isAuthed) {
+        return {
+            name: 'login',
+            query: { redirect: to.fullPath }
+        };
+    }
+
+    if (!tokenValidated) {
+        tokenValidationPromise ??= refreshSuperToken();
+        try {
+            await tokenValidationPromise;
+            tokenValidated = true;
+        } catch {
+            clearSuperAuthToken();
+            tokenValidated = false;
+            tokenValidationPromise = null;
+            return { name: 'login', query: { redirect: to.fullPath } };
+        }
+    }
+
+    return true;
+});
+
 export default router;
--- a/frontend/superadmin/src/service/auth.js
+++ b/frontend/superadmin/src/service/auth.js
@@ -0,0 +1,42 @@
+import { requestJson } from './apiClient';
+
+const SUPER_TOKEN_KEY = 'super_token';
+
+export function getSuperAuthToken() {
+    return localStorage.getItem(SUPER_TOKEN_KEY) || '';
+}
+
+export function setSuperAuthToken(token) {
+    const normalized = String(token || '').trim();
+    if (!normalized) {
+        localStorage.removeItem(SUPER_TOKEN_KEY);
+        return;
+    }
+    localStorage.setItem(SUPER_TOKEN_KEY, normalized);
+}
+
+export function clearSuperAuthToken() {
+    localStorage.removeItem(SUPER_TOKEN_KEY);
+}
+
+export function hasSuperAuthToken() {
+    return Boolean(getSuperAuthToken());
+}
+
+export async function superLogin({ username, password }) {
+    const data = await requestJson('/super/v1/auth/login', {
+        method: 'POST',
+        body: { username, password }
+    });
+    const token = data?.token ?? '';
+    setSuperAuthToken(token);
+    return token;
+}
+
+export async function refreshSuperToken() {
+    const data = await requestJson('/super/v1/auth/token');
+    const token = data?.token ?? '';
+    if (token) setSuperAuthToken(token);
+    return token;
+}
+
--- a/frontend/superadmin/src/views/Dashboard.vue
+++ b/frontend/superadmin/src/views/Dashboard.vue
@@ -1,22 +1,106 @@
 <script setup>
-import BestSellingWidget from '@/components/dashboard/BestSellingWidget.vue';
-import NotificationsWidget from '@/components/dashboard/NotificationsWidget.vue';
-import RecentSalesWidget from '@/components/dashboard/RecentSalesWidget.vue';
-import RevenueStreamWidget from '@/components/dashboard/RevenueStreamWidget.vue';
-import StatsWidget from '@/components/dashboard/StatsWidget.vue';
+import StatisticsStrip from '@/components/StatisticsStrip.vue';
+import { TenantService } from '@/service/TenantService';
+import { UserService } from '@/service/UserService';
+import { useToast } from 'primevue/usetoast';
+import { computed, onMounted, ref } from 'vue';
+
+const toast = useToast();
+
+const tenantTotal = ref(null);
+const tenantLoading = ref(false);
+
+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: 'users-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)
+        }))
+    ];
+});
+
+const tenantItems = computed(() => [
+    {
+        key: 'tenants-total',
+        label: '租户总数：',
+        value: tenantLoading.value ? '-' : (tenantTotal.value ?? '-'),
+        icon: 'pi-building'
+    }
+]);
+
+async function loadTenantTotal() {
+    tenantLoading.value = true;
+    try {
+        const result = await TenantService.listTenants({ page: 1, limit: 10 });
+        tenantTotal.value = result?.total ?? 0;
+    } catch (error) {
+        toast.add({ severity: 'error', summary: '加载失败', detail: error?.message || '无法加载租户信息', life: 4000 });
+    } finally {
+        tenantLoading.value = false;
+    }
+}
+
+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;
+    }
+}
+
+onMounted(() => {
+    loadTenantTotal();
+    loadStatistics();
+});
 </script>

 <template>
-    <div class="grid grid-cols-12 gap-8">
-        <StatsWidget />
+    <div>
+        <StatisticsStrip :items="tenantItems" containerClass="card mb-4" />
+        <StatisticsStrip :items="statisticsItems" containerClass="card mb-4" />

-        <div class="col-span-12 xl:col-span-6">
-            <RecentSalesWidget />
-            <BestSellingWidget />
-        </div>
-        <div class="col-span-12 xl:col-span-6">
-            <RevenueStreamWidget />
-            <NotificationsWidget />
+        <div class="card">
+            <div class="flex items-center justify-between mb-4">
+                <h4 class="m-0">快捷入口</h4>
+            </div>
+            <div class="flex flex-wrap gap-2">
+                <Button label="租户管理" icon="pi pi-building" as="router-link" to="/superadmin/tenants" />
+                <Button label="用户管理" icon="pi pi-users" as="router-link" to="/superadmin/users" severity="secondary" />
+            </div>
        </div>
    </div>
 </template>
--- a/frontend/superadmin/src/views/pages/auth/Login.vue
+++ b/frontend/superadmin/src/views/pages/auth/Login.vue
@@ -1,10 +1,49 @@
 <script setup>
 import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
-import { ref } from 'vue';
+import { superLogin, hasSuperAuthToken } from '@/service/auth';
+import { useToast } from 'primevue/usetoast';
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';

-const email = ref('');
+const toast = useToast();
+const router = useRouter();
+const route = useRoute();
+
+const username = ref('');
 const password = ref('');
 const checked = ref(false);
+const loading = ref(false);
+
+const redirectPath = computed(() => {
+    const raw = route.query?.redirect;
+    return typeof raw === 'string' && raw.startsWith('/') ? raw : '/';
+});
+
+async function onSubmit() {
+    if (!username.value || !password.value) {
+        toast.add({ severity: 'warn', summary: '请输入账号密码', life: 2500 });
+        return;
+    }
+
+    loading.value = true;
+    try {
+        await superLogin({ username: username.value, password: password.value });
+        await router.replace(redirectPath.value);
+    } catch (error) {
+        toast.add({
+            severity: 'error',
+            summary: '登录失败',
+            detail: error?.message || '无法登录',
+            life: 4000
+        });
+    } finally {
+        loading.value = false;
+    }
+}
+
+onMounted(() => {
+    if (hasSuperAuthToken()) router.replace(redirectPath.value);
+});
 </script>

 <template>
@@ -35,21 +74,21 @@ const checked = ref(false);
                        <span class="text-muted-color font-medium">Sign in to continue</span>
                    </div>

-                    <div>
-                        <label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
-                        <InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" v-model="email" />
+                    <div @keyup.enter="onSubmit">
+                        <label for="username" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Username</label>
+                        <InputText id="username" type="text" placeholder="Username" class="w-full md:w-[30rem] mb-8" v-model="username" :disabled="loading" />

                        <label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
-                        <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="mb-4" fluid :feedback="false"></Password>
+                        <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="mb-4" fluid :feedback="false" :disabled="loading"></Password>

                        <div class="flex items-center justify-between mt-2 mb-8 gap-8">
                            <div class="flex items-center">
-                                <Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
+                                <Checkbox v-model="checked" id="rememberme1" binary class="mr-2" :disabled="loading"></Checkbox>
                                <label for="rememberme1">Remember me</label>
                            </div>
-                            <span class="font-medium no-underline ml-2 text-right cursor-pointer text-primary">Forgot password?</span>
+                            <span class="font-medium no-underline ml-2 text-right text-muted-color">Super Admin</span>
                        </div>
-                        <Button label="Sign In" class="w-full" as="router-link" to="/"></Button>
+                        <Button label="Sign In" class="w-full" :loading="loading" :disabled="loading" @click="onSubmit"></Button>
                    </div>
                </div>
            </div>