feat: 添加用户管理

src/pages/user/index.tsx

@@ -1,6 +1,7 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { List } from './edit/List';
 import { Main } from './layouts';
+import { Login } from './login/Login';
 export const App = () => {
   return (
     <Routes>
@@ -8,7 +9,7 @@ export const App = () => {
         <Route path='/' element={<Navigate to='/user/edit/list' />}></Route>
         <Route path='edit/list' element={<List />} />
       </Route>
+      <Route path='login' element={<Login />} />
     </Routes>
   );
 };
-

src/pages/user/login/Login.tsx

@@ -0,0 +1,53 @@
+import { Button, Form, Input } from 'antd';
+import { useLoginStore } from '../store/login';
+import { useShallow } from 'zustand/react/shallow';
+import { useEffect } from 'react';
+import { isObjectNull } from '@/utils/is-null';
+export const Login = () => {
+  const [form] = Form.useForm();
+  const loginStore = useLoginStore(
+    useShallow((state) => {
+      return {
+        login: state.login,
+        formData: state.formData,
+        setFormData: state.setFormData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const isNull = isObjectNull(loginStore.formData);
+    if (isNull) {
+      form.setFieldsValue({});
+    } else {
+      form.setFieldsValue(loginStore.formData);
+    }
+  }, [loginStore.formData]);
+  const onFinish = (values: any) => {
+    loginStore.setFormData(values);
+    loginStore.login();
+  };
+  return (
+    <div className='flex w-full h-full'>
+      <div className='w-[600px] mx-auto mt-[10%] '>
+        <h1 className='mb-4 tracking-widest'>Login</h1>
+        <div className='card border-t-2'>
+          <Form form={form} onFinish={onFinish}>
+            <Form.Item label='username' name='username'>
+              <Input />
+            </Form.Item>
+            <Form.Item label='password' name='password'>
+              <Input type='password' />
+            </Form.Item>
+            <Form.Item label=' ' noStyle colon={false}>
+              <div className='flex gap-2'>
+                <Button type='primary' htmlType='submit'>
+                  Login
+                </Button>
+              </div>
+            </Form.Item>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/user/store/login.ts

@@ -0,0 +1,54 @@
+import { query } from '@/modules';
+import { message } from 'antd';
+import { create } from 'zustand';
+type LoginStore = {
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  formData: any;
+  setFormData: (formData: any) => void;
+  login: () => Promise<void>;
+  register: () => Promise<void>;
+  isLogin: boolean;
+  setIsLogin: (isLogin: boolean) => void;
+};
+export const useLoginStore = create<LoginStore>((set, get) => {
+  return {
+    loading: false,
+    setLoading: (loading) => set({ loading }),
+    formData: {},
+    setFormData: (formData) => set({ formData }),
+    login: async () => {
+      const { formData } = get();
+      const { username, password } = formData;
+      if (!username || !password) {
+        message.error('Please input username and password');
+        return;
+      }
+      set({ loading: true });
+      const loaded = message.loading('loading...', 0);
+      const res = await query.post({ path: 'user', key: 'login', username, password });
+      loaded();
+      if (res.code === 200) {
+        message.success('Success');
+        set({ isLogin: true });
+        // 跳到某一个页面，更新localStorage
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
+    register: async () => {
+      set({ loading: true });
+      const loaded = message.loading('loading...', 0);
+      const res = await query.post({ path: 'user', key: 'register' });
+      loaded();
+      if (res.code === 200) {
+        message.success('Success');
+        // 跳到某一个页面
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
+    isLogin: false,
+    setIsLogin: (isLogin) => set({ isLogin }),
+  };
+});