fix: repair auth and table flows

Jerry-CodeHub · Jerry-CodeHub · commit dec3a96bf307 · 2026-05-02T08:40:29.000+08:00
diff --git a/config/routes.ts b/config/routes.ts
@@ -12,6 +12,26 @@ export const routes = [
     icon: 'HomeFilled',
     component: './Home',
   },
+  {
+    name: 'login',
+    path: '/login',
+    component: './Login',
+    hideInMenu: true,
+  },
+  {
+    name: 'access',
+    path: '/access',
+    icon: 'LockOutlined',
+    component: './Access',
+    access: 'canSeeAdmin',
+  },
+  {
+    name: 'table',
+    path: '/table',
+    icon: 'TableOutlined',
+    component: './Table',
+    access: 'canSeeAdmin',
+  },
   {
     name: 'feature',
     path: '/feature',
diff --git a/mock/userAPI.ts b/mock/userAPI.ts
@@ -1,19 +1,69 @@
-const users = [
-  { id: 0, name: 'Umi', nickName: 'U', gender: 'MALE' },
-  { id: 1, name: 'Fish', nickName: 'B', gender: 'FEMALE' },
+let users = [
+  { id: '0', name: 'Umi', nickName: 'U', gender: 'MALE', email: 'umi@example.com' },
+  { id: '1', name: 'Fish', nickName: 'B', gender: 'FEMALE', email: 'fish@example.com' },
 ];
 
 export default {
   'GET /api/v1/queryUserList': (req: any, res: any) => {
+    const { current = 1, pageSize = 20, keyword } = req.query || {};
+    const list = keyword
+      ? users.filter((user) => user.name.includes(keyword) || user.nickName.includes(keyword))
+      : users;
+    const start = (Number(current) - 1) * Number(pageSize);
+    const end = start + Number(pageSize);
+
+    res.json({
+      success: true,
+      data: {
+        current: Number(current),
+        pageSize: Number(pageSize),
+        total: list.length,
+        list: list.slice(start, end),
+      },
+      errorCode: 0,
+    });
+  },
+  'POST /api/v1/user': (req: any, res: any) => {
+    const user = {
+      id: `${Date.now()}`,
+      gender: 'MALE',
+      ...req.body,
+    };
+    users = [user, ...users];
+    res.json({
+      success: true,
+      data: user,
+      errorCode: 0,
+    });
+  },
+  'PUT /api/v1/user/:userId': (req: any, res: any) => {
+    const { userId } = req.params;
+    const index = users.findIndex((user) => user.id === userId);
+    if (index < 0) {
+      res.status(404).json({
+        success: false,
+        errorCode: 404,
+        message: '用户不存在',
+      });
+      return;
+    }
+
+    users[index] = {
+      ...users[index],
+      ...req.body,
+    };
     res.json({
       success: true,
-      data: { list: users },
+      data: users[index],
       errorCode: 0,
     });
   },
-  'PUT /api/v1/user/': (req: any, res: any) => {
+  'DELETE /api/v1/user/:userId': (req: any, res: any) => {
+    const { userId } = req.params;
+    users = users.filter((user) => user.id !== userId);
     res.json({
       success: true,
+      data: userId,
       errorCode: 0,
     });
   },
diff --git a/src/access.ts b/src/access.ts
@@ -1,7 +1,7 @@
 // 参考文档 https://umijs.org/docs/max/access
 export default (initialState: API.UserInfo) => {
   // 'dontHaveAccess' 是约定的禁止访问标识符，由后端登录接口返回以拒绝特定用户进入管理后台
-  const canSeeAdmin = !!(initialState && initialState.name !== 'dontHaveAccess');
+  const canSeeAdmin = !!initialState?.name && initialState.name !== 'dontHaveAccess';
   return {
     canSeeAdmin,
   };
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1 +1,2 @@
 export const DEFAULT_NAME = 'Umi Max';
+export const AUTH_TOKEN_KEY = 'umi-react-admin-token';
diff --git a/src/layouts/RightContent.tsx b/src/layouts/RightContent.tsx
@@ -1,10 +1,16 @@
+import { AUTH_TOKEN_KEY } from '@/constants';
 import { GithubOutlined, GlobalOutlined, SkinOutlined, UserOutlined } from '@ant-design/icons';
-import { setLocale, useIntl } from '@umijs/max';
+import { history, setLocale, useIntl } from '@umijs/max';
 import { Avatar, Button, Popover, message } from 'antd';
 import { useEffect, useState } from 'react';
 
 const safeLocalStorage = {
   getItem: (key: string) => (typeof window !== 'undefined' ? localStorage.getItem(key) : null),
+  removeItem: (key: string) => {
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem(key);
+    }
+  },
 };
 
 const RightContent = () => {
@@ -54,7 +60,9 @@ const RightContent = () => {
           <div
             className="w-24 px-2 py-1 text-center rounded-md cursor-pointer hover:bg-zinc-200"
             onClick={() => {
-              // TODO: 实现登出功能
+              safeLocalStorage.removeItem(AUTH_TOKEN_KEY);
+              messageApi.success(intl.formatMessage({ id: 'Logout' }));
+              history.push('/login');
             }}
           >
             {intl.formatMessage({ id: 'Logout' })}
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
@@ -1,5 +1,8 @@
 export default {
   'menu.home': 'home',
+  'menu.login': 'login',
+  'menu.access': 'access',
+  'menu.table': 'table',
   'menu.NotFound': 'NotFound',
   'menu.NotAccessible': 'NotAccessible',
   // NOTE 功能
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
@@ -1,5 +1,8 @@
 export default {
   'menu.home': '首页',
+  'menu.login': '登录',
+  'menu.access': '权限',
+  'menu.table': '表格',
   'menu.NotFound': '找不到页面',
   'menu.NotAccessible': '无权限访问',
   // NOTE 功能
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
@@ -1,5 +1,33 @@
+import { AUTH_TOKEN_KEY } from '@/constants';
+import { history } from '@umijs/max';
+import { Button, Card, Form, Input, message } from 'antd';
+
 const Login: React.FC = () => {
-  return <div>login</div>;
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const handleFinish = (values: { name: string }) => {
+    localStorage.setItem(AUTH_TOKEN_KEY, `${values.name || 'admin'}-demo-token`);
+    messageApi.success('登录成功');
+    history.push('/home');
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-slate-50 px-4">
+      {contextHolder}
+      <Card title="React Admin" className="w-full max-w-sm">
+        <Form initialValues={{ name: 'admin' }} layout="vertical" onFinish={handleFinish}>
+          <Form.Item label="用户名" name="name" rules={[{ required: true, message: '请输入用户名' }]}>
+            <Input autoComplete="username" />
+          </Form.Item>
+          <Form.Item>
+            <Button block type="primary" htmlType="submit">
+              登录
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
+  );
 };
 
 export default Login;
diff --git a/src/pages/Table/components/UpdateForm.tsx b/src/pages/Table/components/UpdateForm.tsx
@@ -48,11 +48,13 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => (
   >
     <StepsForm.StepForm
       initialValues={{
+        id: props.values.id,
         name: props.values.name,
         nickName: props.values.nickName,
       }}
       title="基本信息"
     >
+      <ProFormText hidden name="id" />
       <ProFormText width="md" name="name" label="规则名称" rules={[{ required: true, message: '请输入规则名称！' }]} />
       <ProFormTextArea
         name="desc"
diff --git a/src/pages/Table/index.tsx b/src/pages/Table/index.tsx
@@ -1,5 +1,13 @@
 import services from '@/services/demo';
-import { ActionType, FooterToolbar, PageContainer, ProDescriptions, ProTable } from '@ant-design/pro-components';
+import {
+  ActionType,
+  FooterToolbar,
+  PageContainer,
+  ProColumns,
+  ProDescriptions,
+  ProDescriptionsItemProps,
+  ProTable,
+} from '@ant-design/pro-components';
 import { Button, Divider, Drawer, message } from 'antd';
 import React, { useRef, useState } from 'react';
 import CreateForm from './components/CreateForm';
@@ -59,11 +67,20 @@ const handleUpdate = async (fields: FormValueType) => {
  */
 const handleRemove = async (selectedRows: API.UserInfo[]) => {
   const hide = message.loading('正在删除');
-  if (!selectedRows) return true;
+  if (!selectedRows.length) {
+    hide();
+    return true;
+  }
+
+  const userIds = selectedRows.map((row) => row.id).filter(Boolean);
+  if (!userIds.length) {
+    hide();
+    message.warning('未找到可删除的数据');
+    return false;
+  }
+
   try {
-    await deleteUser({
-      userId: selectedRows.find((row) => row.id)?.id || '',
-    });
+    await Promise.all(userIds.map((userId) => deleteUser({ userId })));
     hide();
     message.success('删除成功，即将刷新');
     return true;
@@ -81,8 +98,7 @@ const TableList: React.FC<unknown> = () => {
   const actionRef = useRef<ActionType>();
   const [row, setRow] = useState<API.UserInfo>();
   const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const columns: any[] = [
+  const baseColumns: ProColumns<API.UserInfo>[] = [
     {
       title: '名称',
       dataIndex: 'name',
@@ -110,11 +126,14 @@ const TableList: React.FC<unknown> = () => {
         1: { text: '女', status: 'FEMALE' },
       },
     },
+  ];
+  const columns: ProColumns<API.UserInfo>[] = [
+    ...baseColumns,
     {
       title: '操作',
       dataIndex: 'option',
       valueType: 'option',
-      render: (_: any, record: API.UserInfo) => (
+      render: (_, record) => (
         <>
           <a
             onClick={() => {
@@ -125,11 +144,25 @@ const TableList: React.FC<unknown> = () => {
             配置
           </a>
           <Divider type="vertical" />
-          <a href="">订阅警报</a>
+          <Button type="link" className="p-0">
+            订阅警报
+          </Button>
         </>
       ),
     },
   ];
+  const descriptionColumns: ProDescriptionsItemProps<API.UserInfo>[] = [
+    { title: '名称', dataIndex: 'name' },
+    { title: '昵称', dataIndex: 'nickName', valueType: 'text' },
+    {
+      title: '性别',
+      dataIndex: 'gender',
+      valueEnum: {
+        0: { text: '男', status: 'MALE' },
+        1: { text: '女', status: 'FEMALE' },
+      },
+    },
+  ];
 
   return (
     <PageContainer
@@ -236,7 +269,7 @@ const TableList: React.FC<unknown> = () => {
             params={{
               id: row?.name,
             }}
-            columns={columns}
+            columns={descriptionColumns}
           />
         )}
       </Drawer>
diff --git a/src/utils/Auth/initalState.ts b/src/utils/Auth/initalState.ts
@@ -2,8 +2,9 @@ import { UserInfo } from './userInfo';
 
 export async function getInitialState(): Promise<UserInfo> {
   const user: UserInfo = new UserInfo({
-    userName: 'admin',
-    userEmail: '',
+    name: 'admin',
+    email: '',
+    nickName: 'Admin',
   });
 
   return user;
diff --git a/src/utils/Auth/userInfo.ts b/src/utils/Auth/userInfo.ts
@@ -1,15 +1,18 @@
 // use to init UserInfo
 export type UserClaim = {
-  userName: string;
-  userEmail: string;
+  name: string;
+  email: string;
+  nickName?: string;
 };
 
 export class UserInfo {
-  public userName: string;
-  public userEmail: string;
+  public name: string;
+  public email: string;
+  public nickName: string;
 
   constructor(userClaim: UserClaim) {
-    this.userName = userClaim.userName || '';
-    this.userEmail = userClaim.userEmail || '';
+    this.name = userClaim.name || '';
+    this.email = userClaim.email || '';
+    this.nickName = userClaim.nickName || userClaim.name || '';
   }
 }
diff --git a/src/utils/requestConfig.ts b/src/utils/requestConfig.ts

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export const DEFAULT_NAME = 'Umi Max';`
	`2`	`+export const AUTH_TOKEN_KEY = 'umi-react-admin-token';`
Original file line number	Diff line number	Diff line change
`@@ -48,11 +48,13 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => (`
`48`	`48`	`>`
`49`	`49`	`<StepsForm.StepForm`
`50`	`50`	`initialValues={{`
	`51`	`+ id: props.values.id,`
`51`	`52`	`name: props.values.name,`
`52`	`53`	`nickName: props.values.nickName,`
`53`	`54`	`}}`
`54`	`55`	`title="基本信息"`
`55`	`56`	`>`
	`57`	`+ <ProFormText hidden name="id" />`
`56`	`58`	`<ProFormText width="md" name="name" label="规则名称" rules={[{ required: true, message: '请输入规则名称！' }]} />`
`57`	`59`	`<ProFormTextArea`
`58`	`60`	`name="desc"`