功能：完成用户管理列表展示

src/api/User.ts

@@ -1,14 +1,39 @@
 import Request from '@/utils/request'
 import { LoginReturn, EditUser, Login, User, UserInfo } from '@/types/app/user'
 
+// 新增用户
+export const addUserDataAPI = (data: User) =>
+    Request<User>("POST", "/user", { data });
+
+// 删除用户
+export const delUserDataAPI = (id: number) =>
+    Request<User>("DELETE", `/user/${id}`);
+
+// 编辑用户
+export const editUserDataAPI = (data: UserInfo) => Request<UserInfo>("PATCH", "/user", { data })
+
+// 获取用户
+export const getUserDataAPI = (id?: number) => Request<User>("GET", `/user/${id}`)
+
+// 获取用户列表
+export const getUserListAPI = (data?: QueryData) => Request<User[]>("POST", `/user/list`, {
+    data: { ...data?.query },
+    params: {
+        sort: data?.sort,
+    }
+})
+
+// 分页获取用户列表
+export const getUserPagingAPI = (data?: QueryData) => Request<Paginate<User[]>>("POST", `/user/paging`, {
+    data: { ...data?.query },
+    params: {
+        sort: data?.sort,
+        ...data?.pagination
+    }
+})
+
 // 登录
 export const loginDataAPI = (data: Login) => Request<LoginReturn>("POST", "/user/login", { data })
 
-// 获取用户信息
-export const getUserDataAPI = (id?: number) => Request<User>("GET", `/user/${id}`)
-
-// 修改用户信息
-export const editUserDataAPI = (data: UserInfo) => Request<UserInfo>("PATCH", "/user", { data })
-
 // 修改管理员密码
 export const editAdminPassAPI = (data: EditUser) => Request<UserInfo>("PATCH", "/user/pass", { data })

src/components/RouteList/index.tsx

@@ -12,6 +12,7 @@ import Tag from '@/pages/Tag';
 import Web from '@/pages/Web';
 import Swiper from '@/pages/Swiper';
 import Footprint from '@/pages/Footprint';
+import User from '@/pages/User';
 import Setup from '@/pages/Setup';
 import Rss from '@/pages/Rss';
 import File from "@/pages/File";
@@ -45,6 +46,7 @@ export default () => {
         { path: "/web", title: "网站管理", component: <Web /> },
         { path: "/swiper", title: "轮播图管理", component: <Swiper /> },
         { path: "/footprint", title: "足迹管理", component: <Footprint /> },
+        { path: "/user", title: "用户管理", component: <User /> },
         { path: "/setup", title: "项目配置", component: <Setup /> },
         { path: "/route", title: "路由配置", component: <Page /> },
         { path: "/role", title: "角色管理", component: <Role /> },

src/components/Sidebar/index.tsx

@@ -145,16 +145,16 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
               path: "swiper",
               name: "轮播图管理"
             },
+            {
+              to: "/footprint",
+              path: "footprint",
+              name: "足迹管理"
+            },
             {
               to: "/user",
               path: "user",
               name: "用户管理"
             },
-            {
-              to: "/footprint",
-              path: "footprint",
-              name: "足迹管理"
-            }
           ]
         },
         {

src/pages/Dashboard/components/Stats/index.tsx

@@ -1,4 +1,3 @@
-import Title from "@/components/Title"
 import VisitorsStatisChat from "./components/VisitorsStatisChat"
 import NewOldVisitors from './components/NewOldVisitors'
 import CardDataStats from "@/components/CardDataStats"

src/pages/User/index.tsx

@@ -0,0 +1,187 @@
+import { useState, useEffect } from 'react';
+import { Table, Button, Tag, notification, Card, Popconfirm, Form, Input, Select, Avatar } from 'antd';
+
+import { getUserListAPI, delUserDataAPI } from '@/api/User';
+import type { User } from '@/types/app/user';
+import { Role } from '@/types/app/role';
+
+import { titleSty } from '@/styles/sty';
+import Title from '@/components/Title';
+import logo from '@/images/logo/logo.png'
+
+import { useWebStore } from '@/stores';
+
+import dayjs from 'dayjs'
+
+const UserPage = () => {
+    const web = useWebStore(state => state.web);
+
+    const [current, setCurrent] = useState<number>(1);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [userList, setUserList] = useState<User[]>([]);
+
+    const [form] = Form.useForm();
+
+    const getUserList = async () => {
+        setLoading(true);
+
+        const { data } = await getUserListAPI();
+        console.log(data, 333);
+
+        setUserList(data as User[]);
+
+        setLoading(false);
+    };
+
+    useEffect(() => {
+        getUserList();
+    }, []);
+
+    const delUserData = async (id: number) => {
+        setLoading(true);
+
+        await delUserDataAPI(id);
+        await getUserList();
+        form.resetFields();
+        setCurrent(1);
+        notification.success({ message: '🎉 删除用户成功' });
+
+        setLoading(false);
+    };
+
+    const columns = [
+        {
+            title: 'ID',
+            dataIndex: 'id',
+            key: 'id',
+            align: 'center',
+            width: 100,
+        },
+        {
+            title: '头像',
+            dataIndex: 'avatar',
+            key: 'avatar',
+            align: 'center',
+            width: 200,
+            render: (url: string) => url ? <Avatar size={64} src={url} /> : <Avatar size={64} src={logo} />,
+        },
+        {
+            title: '用户名',
+            dataIndex: 'username',
+            key: 'username',
+            align: 'center',
+            width: 200,
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            align: 'center',
+            width: 200,
+        },
+        {
+            title: '介绍',
+            dataIndex: 'info',
+            key: 'info',
+            align: 'center',
+            render: (text: string) => text ? text : '暂无介绍',
+        },
+        {
+            title: '邮箱',
+            dataIndex: 'email',
+            key: 'email',
+            align: 'center',
+            render: (text: string) => text ? text : '暂无邮箱',
+        },
+        {
+            title: '角色',
+            dataIndex: 'role',
+            key: 'role',
+            align: 'center',
+            render: (role: Role) => <Tag color="blue">{role.name}</Tag>,
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+            align: 'center',
+            width: 200,
+            render: (text: string) => dayjs(+text).format('YYYY-MM-DD HH:mm:ss'),
+            sorter: (a: User, b: User) => +a.createTime! - +b.createTime!
+        },
+        {
+            title: '操作',
+            key: 'action',
+            fixed: 'right',
+            align: 'center',
+            render: (text: string, record: User) => (
+                <div className='flex space-x-2'>
+                    <Button>修改</Button>
+
+                    <Popconfirm title="警告" description="你确定要删除吗" okText="确定" cancelText="取消" onConfirm={() => delUserData(record.id!)}>
+                        <Button type="primary" danger>删除</Button>
+                    </Popconfirm>
+                </div>
+            ),
+        },
+    ];
+
+    const onSubmit = async (values: any) => {
+        const query = {
+            key: values.name,
+            role: values.role,
+        };
+
+        const { data } = await getUserListAPI({ query });
+        setUserList(data as User[]);
+    };
+
+    return (
+        <>
+            <Title value="用户管理" />
+
+            <Card className='my-2 overflow-scroll'>
+                <Form form={form} layout="inline" onFinish={onSubmit} autoComplete="off" className='flex-nowrap'>
+                    <Form.Item label="用户名" name="name" className='min-w-[200px]'>
+                        <Input placeholder='请输入用户名' />
+                    </Form.Item>
+
+                    <Form.Item label="角色" name="role" className='min-w-[200px]'>
+                        <Select
+                            allowClear
+                            options={[
+                                { label: '管理员', value: 'admin' },
+                                { label: '用户', value: 'user' }
+                            ]}
+                            placeholder="请选择角色"
+                        />
+                    </Form.Item>
+
+                    <Form.Item className='pr-6'>
+                        <Button type="primary" htmlType="submit">查询</Button>
+                    </Form.Item>
+                </Form>
+            </Card>
+
+            <Card className={`${titleSty} min-h-[calc(100vh-250px)]`}>
+                <Table
+                    rowKey="id"
+                    dataSource={userList}
+                    columns={columns as any}
+                    loading={loading}
+                    scroll={{ x: 'max-content' }}
+                    pagination={{
+                        position: ['bottomCenter'],
+                        current,
+                        defaultPageSize: 8,
+                        onChange(current) {
+                            setCurrent(current);
+                        }
+                    }}
+                />
+            </Card>
+        </>
+    );
+};
+
+export default UserPage;

src/types/app/user.d.ts

@@ -9,11 +9,10 @@ export interface UserInfo {
     email: string,
     avatar: string,
     info: string,
-    roleId?: number
     role: Role
 }
 
-export type User = Login & UserInfo
+export type User = Login & UserInfo & { createTime?: string }
 
 export interface LoginReturn {
     token: string,