feat: add users page

2025-04-10 21:04:35 +08:00
parent ed27cb3534
commit 5a63eee1ce
22 changed files with 797 additions and 60 deletions
--- a/frontend/admin/bun.lock
+++ b/frontend/admin/bun.lock
@@ -8,6 +8,9 @@
        "@tailwindcss/vite": "^4.0.17",
        "axios": "^1.8.4",
        "daisyui": "^5.0.9",
+        "date-fns": "^4.1.0",
+        "dayjs": "^1.11.13",
+        "install": "^0.13.0",
        "primeicons": "^7.0.0",
        "primevue": "^4.3.3",
        "tailwindcss": "^4.0.17",
@@ -198,6 +201,10 @@

    "daisyui": ["daisyui@5.0.9", "https://registry.npmmirror.com/daisyui/-/daisyui-5.0.9.tgz", {}, "sha512-RsaehHh45f+0shWgZZaOY09/8eOae2voRsqJCD71j9yrnYgcke0Nj5ys0ZxrW4SPcc4+q96kWyJu0Z8P1zZdoA=="],

+    "date-fns": ["date-fns@4.1.0", "https://registry.npmmirror.com/date-fns/-/date-fns-4.1.0.tgz", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
+
+    "dayjs": ["dayjs@1.11.13", "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz", {}, "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="],
+
    "delayed-stream": ["delayed-stream@1.0.0", "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz", {}, "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="],

    "detect-libc": ["detect-libc@2.0.3", "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.0.3.tgz", {}, "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw=="],
@@ -242,6 +249,8 @@

    "hasown": ["hasown@2.0.2", "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],

+    "install": ["install@0.13.0", "https://registry.npmmirror.com/install/-/install-0.13.0.tgz", {}, "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA=="],
+
    "jiti": ["jiti@2.4.2", "https://registry.npmmirror.com/jiti/-/jiti-2.4.2.tgz", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A=="],

    "lightningcss": ["lightningcss@1.29.2", "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.29.2.tgz", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-darwin-arm64": "1.29.2", "lightningcss-darwin-x64": "1.29.2", "lightningcss-freebsd-x64": "1.29.2", "lightningcss-linux-arm-gnueabihf": "1.29.2", "lightningcss-linux-arm64-gnu": "1.29.2", "lightningcss-linux-arm64-musl": "1.29.2", "lightningcss-linux-x64-gnu": "1.29.2", "lightningcss-linux-x64-musl": "1.29.2", "lightningcss-win32-arm64-msvc": "1.29.2", "lightningcss-win32-x64-msvc": "1.29.2" } }, "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA=="],
--- a/frontend/admin/package.json
+++ b/frontend/admin/package.json
@@ -13,6 +13,9 @@
    "@tailwindcss/vite": "^4.0.17",
    "axios": "^1.8.4",
    "daisyui": "^5.0.9",
+    "date-fns": "^4.1.0",
+    "dayjs": "^1.11.13",
+    "install": "^0.13.0",
    "primeicons": "^7.0.0",
    "primevue": "^4.3.3",
    "tailwindcss": "^4.0.17",
--- a/frontend/admin/src/App.vue
+++ b/frontend/admin/src/App.vue
@@ -22,6 +22,11 @@ const navItems = ref([
        icon: 'pi pi-file',
        command: () => router.push('/posts')
    },
+    {
+        label: 'Usesrs',
+        icon: 'pi pi-users',
+        command: () => router.push('/users')
+    },
    {
        label: 'Settings',
        icon: 'pi pi-cog',
--- a/frontend/admin/src/api/userService.js
+++ b/frontend/admin/src/api/userService.js
@@ -0,0 +1,19 @@
+import httpClient from './httpClient';
+
+export const userService = {
+    getUsers({ page = 1, limit = 10, keyword = '' } = {}) {
+        return httpClient.get('/admin/users', {
+            params: {
+                page,
+                limit,
+                keyword: keyword.trim()
+            }
+        });
+    },
+    getUser(id) {
+        return httpClient.get(`/admin/users/${id}`);
+    },
+    deleteUser(id) {
+        return httpClient.delete(`/admin/users/${id}`);
+    },
+}
--- a/frontend/admin/src/api/users_list.json
+++ b/frontend/admin/src/api/users_list.json
@@ -0,0 +1,107 @@
+{
+    "page": 1,
+    "limit": 10,
+    "total": 100,
+    "items": [
+        {
+            "id": 100,
+            "created_at": "2025-04-10T20:38:25.224535Z",
+            "updated_at": "2025-04-10T20:38:25.224535Z",
+            "deleted_at": null,
+            "status": 0,
+            "open_id": "ovxaRhVa-t",
+            "username": "Username_ovxaRhVa-t",
+            "avatar": "Avatar_ovxaRhVa-t"
+        },
+        {
+            "id": 99,
+            "created_at": "2025-04-10T20:38:25.220304Z",
+            "updated_at": "2025-04-10T20:38:25.220304Z",
+            "deleted_at": null,
+            "status": 0,
+            "open_id": "pnQlEwOawi",
+            "username": "Username_pnQlEwOawi",
+            "avatar": "Avatar_pnQlEwOawi"
+        },
+        {
+            "id": 98,
+            "created_at": "2025-04-10T20:38:25.215726Z",
+            "updated_at": "2025-04-10T20:38:25.215726Z",
+            "deleted_at": null,
+            "status": 0,
+            "open_id": "NnjpNALmUE",
+            "username": "Username_NnjpNALmUE",
+            "avatar": "Avatar_NnjpNALmUE"
+        },
+        {
+            "id": 97,
+            "created_at": "2025-04-10T20:38:25.211126Z",
+            "updated_at": "2025-04-10T20:38:25.211126Z",
+            "deleted_at": null,
+            "status": 0,
+            "open_id": "m3xb_ShqB8",
+            "username": "Username_m3xb_ShqB8",
+            "avatar": "Avatar_m3xb_ShqB8"
+        },
+        {
+            "id": 96,
+            "created_at": "2025-04-10T20:38:25.204553Z",
+            "updated_at": "2025-04-10T20:38:25.204553Z",
+            "deleted_at": null,
+            "status": 0,
+            "open_id": "TDdXtAZQsQ",
+            "username": "Username_TDdXtAZQsQ",
+            "avatar": "Avatar_TDdXtAZQsQ"
+        },
+        {
+            "id": 95,
+            "created_at": "2025-04-10T20:38:25.199782Z",
+            "updated_at": "2025-04-10T20:38:25.199783Z",
+            "deleted_at": null,
+            "status": 0,
+            "open_id": "BW9oaHl7at",
+            "username": "Username_BW9oaHl7at",
+            "avatar": "Avatar_BW9oaHl7at"
+        },
+        {
+            "id": 94,
+            "created_at": "2025-04-10T20:38:25.194655Z",
+            "updated_at": "2025-04-10T20:38:25.194655Z",
+            "deleted_at": null,
+            "status": 0,
+            "open_id": "qL9iCPjSVh",
+            "username": "Username_qL9iCPjSVh",
+            "avatar": "Avatar_qL9iCPjSVh"
+        },
+        {
+            "id": 93,
+            "created_at": "2025-04-10T20:38:25.190243Z",
+            "updated_at": "2025-04-10T20:38:25.190243Z",
+            "deleted_at": null,
+            "status": 0,
+            "open_id": "ctQtyed6Gt",
+            "username": "Username_ctQtyed6Gt",
+            "avatar": "Avatar_ctQtyed6Gt"
+        },
+        {
+            "id": 92,
+            "created_at": "2025-04-10T20:38:25.186196Z",
+            "updated_at": "2025-04-10T20:38:25.186196Z",
+            "deleted_at": null,
+            "status": 0,
+            "open_id": "3Z4V0x6l_B",
+            "username": "Username_3Z4V0x6l_B",
+            "avatar": "Avatar_3Z4V0x6l_B"
+        },
+        {
+            "id": 91,
+            "created_at": "2025-04-10T20:38:25.181205Z",
+            "updated_at": "2025-04-10T20:38:25.181205Z",
+            "deleted_at": null,
+            "status": 0,
+            "open_id": "kQwboErzWc",
+            "username": "Username_kQwboErzWc",
+            "avatar": "Avatar_kQwboErzWc"
+        }
+    ]
+}
--- a/frontend/admin/src/pages/PostEditPage.vue
+++ b/frontend/admin/src/pages/PostEditPage.vue
@@ -66,48 +66,7 @@ const mediaTotalPages = computed(() => {
 });

 // Sample media data - in a real app, this would come from an API
-const mediaItems = ref([
-    {
-        id: 1,
-        fileName: 'sunset-beach.jpg',
-        fileType: 'Image',
-        thumbnailUrl: 'https://via.placeholder.com/300x225',
-        fileSize: '2.4 MB',
-        uploadTime: 'Today, 10:30 AM'
-    },
-    {
-        id: 2,
-        fileName: 'presentation.pdf',
-        fileType: 'PDF',
-        thumbnailUrl: null,
-        fileSize: '4.8 MB',
-        uploadTime: 'Yesterday, 3:45 PM'
-    },
-    {
-        id: 3,
-        fileName: 'promo_video.mp4',
-        fileType: 'Video',
-        thumbnailUrl: null,
-        fileSize: '24.8 MB',
-        uploadTime: 'Aug 28, 2023'
-    },
-    {
-        id: 4,
-        fileName: 'report_q3.docx',
-        fileType: 'Document',
-        thumbnailUrl: null,
-        fileSize: '1.2 MB',
-        uploadTime: 'Aug 25, 2023'
-    },
-    {
-        id: 5,
-        fileName: 'podcast_interview.mp3',
-        fileType: 'Audio',
-        thumbnailUrl: null,
-        fileSize: '18.5 MB',
-        uploadTime: 'Aug 20, 2023'
-    }
-]);
+const mediaItems = ref([]);

 // Fetch post data by ID
 const fetchPost = async (id) => {
--- a/frontend/admin/src/pages/UserPage.vue
+++ b/frontend/admin/src/pages/UserPage.vue
@@ -0,0 +1,191 @@
+<script setup>
+import { userService } from '@/api/userService';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import Badge from 'primevue/badge';
+import Button from 'primevue/button';
+import Column from 'primevue/column';
+import ConfirmDialog from 'primevue/confirmdialog';
+import DataTable from 'primevue/datatable';
+import InputText from 'primevue/inputtext';
+import ProgressSpinner from 'primevue/progressspinner';
+import Toast from 'primevue/toast';
+import { useConfirm } from 'primevue/useconfirm';
+import { useToast } from 'primevue/usetoast';
+import { onMounted, ref } from 'vue';
+
+const toast = useToast();
+const confirm = useConfirm();
+
+const globalFilterValue = ref('');
+const loading = ref(false);
+const searchTimeout = ref(null);
+const filters = ref({
+    global: { value: null, matchMode: 'contains' },
+    status: { value: null, matchMode: 'equals' }
+});
+
+// Table state
+const users = ref({
+    items: [],
+    total: 0,
+    page: 1,
+    limit: 10
+});
+
+// DataTable pagination state
+const first = ref(0);
+const rows = ref(10);
+
+// 配置 dayjs
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const fetchUsers = async () => {
+    loading.value = true;
+    try {
+        // Calculate current page from first and rows
+        const currentPage = (first.value / rows.value) + 1;
+        const response = await userService.getUsers({
+            page: currentPage,
+            limit: rows.value,
+            keyword: globalFilterValue.value
+        });
+        users.value = response.data;
+    } catch (error) {
+        console.error('Failed to fetch users:', error);
+        toast.add({ severity: 'error', summary: '错误', detail: '加载用户数据失败', life: 3000 });
+    } finally {
+        loading.value = false;
+    }
+};
+
+const onPage = (event) => {
+    first.value = event.first;
+    rows.value = event.rows;
+    fetchUsers();
+};
+
+const onSearch = (event) => {
+    if (searchTimeout.value) {
+        clearTimeout(searchTimeout.value);
+    }
+
+    searchTimeout.value = setTimeout(() => {
+        first.value = 0; // Reset to first page when searching
+        fetchUsers();
+    }, 300);
+};
+
+const formatDate = (date) => {
+    return dayjs.tz(date, 'Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss');
+};
+
+const handleDelete = (user) => {
+    confirm.require({
+        message: `确定要删除用户 "${user.username}" 吗?`,
+        header: '确认删除',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                await userService.deleteUser(user.id);
+                toast.add({ severity: 'success', summary: '成功', detail: '用户已删除', life: 3000 });
+                fetchUsers();
+            } catch (error) {
+                console.error('Failed to delete user:', error);
+                toast.add({ severity: 'error', summary: '错误', detail: '删除用户失败', life: 3000 });
+            }
+        }
+    });
+};
+
+onMounted(() => {
+    fetchUsers();
+});
+</script>
+
+<template>
+    <Toast />
+    <ConfirmDialog />
+
+    <div class="w-full">
+        <div class="flex justify-between items-center mb-6">
+            <h1 class="text-2xl font-semibold text-gray-800">用户列表</h1>
+        </div>
+
+        <div class="card">
+            <div class="pb-10 flex">
+                <InputText v-model="globalFilterValue" placeholder="搜索用户..." class="flex-1" @input="onSearch" />
+            </div>
+
+            <DataTable v-model:filters="filters" :value="users.items" :paginator="true" :rows="rows"
+                :totalRecords="users.total" :loading="loading" :lazy="true" :first="first" @page="onPage"
+                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                :rowsPerPageOptions="[10, 25, 50]"
+                currentPageReportTemplate="显示第 {first} 到 {last} 条，共 {totalRecords} 条结果" dataKey="id"
+                :globalFilterFields="['username', 'open_id']" stripedRows removableSort class="p-datatable-sm"
+                responsiveLayout="scroll">
+
+                <template #empty>
+                    <div class="text-center p-4">未找到用户。</div>
+                </template>
+
+                <template #loading>
+                    <div class="flex flex-col items-center justify-center p-4">
+                        <ProgressSpinner style="width:50px;height:50px" />
+                        <span class="mt-2">加载用户数据...</span>
+                    </div>
+                </template>
+
+                <Column field="id" header="ID" sortable></Column>
+
+                <Column field="username" header="用户名" sortable>
+                    <template #body="{ data }">
+                        <div class="flex items-center space-x-3">
+                            <div class="avatar">
+                                <div class="mask mask-squircle w-12 h-12">
+                                    <img :src="data.avatar" :alt="data.username" />
+                                </div>
+                            </div>
+                            <div>
+                                <div class="font-bold">{{ data.username }}</div>
+                            </div>
+                        </div>
+                    </template>
+                </Column>
+
+                <Column field="open_id" header="OpenID" sortable></Column>
+
+                <Column field="status" header="状态" sortable>
+                    <template #body="{ data }">
+                        <Badge :value="data.status === 0 ? '活跃' : '禁用'"
+                            :severity="data.status === 0 ? 'success' : 'danger'" />
+                    </template>
+                </Column>
+
+                <Column field="created_at" header="创建时间" sortable>
+                    <template #body="{ data }">
+                        {{ formatDate(data.created_at) }}
+                    </template>
+                </Column>
+
+                <Column field="updated_at" header="更新时间" sortable>
+                    <template #body="{ data }">
+                        {{ formatDate(data.updated_at) }}
+                    </template>
+                </Column>
+
+                <Column header="操作" :exportable="false" style="min-width:8rem">
+                    <template #body="{ data }">
+                        <div class="flex justify-center space-x-2">
+                            <Button icon="pi pi-trash" rounded text severity="danger" @click="handleDelete(data)"
+                                aria-label="删除" />
+                        </div>
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </div>
+</template>
--- a/frontend/admin/src/router.js
+++ b/frontend/admin/src/router.js
@@ -35,6 +35,11 @@ const routes = [
        component: () => import('./pages/PostEditPage.vue'),
        props: true
    },
+    {
+        path: '/users',
+        name: 'Users',
+        component: () => import('./pages/UserPage.vue'),
+    }
 ];

 // Create the router instance