暂存，修改navigate和添加图片

src/pages/user/edit/List.tsx

@@ -3,7 +3,7 @@ import { Fragment, useEffect, useMemo, useState } from 'react';
 import { useUserStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
 import { Form } from 'antd';
-import { useNavigate } from 'react-router';
+import { useNewNavigate } from '@/modules';
 import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons';
 import clsx from 'clsx';
 import { isObjectNull } from '@/utils/is-null';
@@ -80,7 +80,7 @@ const FormModal = () => {
   );
 };
 export const List = () => {
-  const navicate = useNavigate();
+  const navicate = useNewNavigate();
   const userStore = useUserStore(
     useShallow((state) => {
       return {

src/pages/user/edit/Profile.tsx

@@ -0,0 +1,92 @@
+import { Form, Input } from 'antd';
+import { useUserStore } from '../store';
+import { useEffect } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { isObjectNull } from '@/utils/is-null';
+import { useLayoutStore } from '@/modules/layout/store';
+import { AvatarUpload } from '../module/AvatarUpload';
+import { UploadOutlined } from '@ant-design/icons';
+import PandaPNG from '@/assets/panda.png';
+export const Profile = () => {
+  const [form] = Form.useForm();
+  const userStore = useUserStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        updateData: state.updateData,
+        setFormData: state.setFormData,
+      };
+    }),
+  );
+
+  const layoutStore = useLayoutStore(
+    useShallow((state) => {
+      return {
+        me: state.me,
+      };
+    }),
+  );
+  const avatar = layoutStore.me?.avatar;
+  useEffect(() => {
+    const fromData = layoutStore.me;
+    if (isObjectNull(fromData)) {
+      form.setFieldsValue({});
+    } else {
+      form.setFieldsValue(fromData);
+    }
+    console.log('fromData', fromData);
+  }, [layoutStore.me]);
+  return (
+    <div className='w-full h-full bg-gray-200 p-4'>
+      <div className='border shadow-lg p-4 bg-white rounded-lg'>
+        <div className='text-2xl'>Profile</div>
+        <div className='text-sm text-gray-500'>Edit your profile</div>
+        <div className='flex gap-4'>
+          <div className='w-[600px] p-4 border mt-2 '>
+            <div className='w-full my-4'>
+              {avatar && <img className='w-20 h-20 mx-auto rounded-full' src={avatar} alt='avatar' />}
+              {!avatar && <img className='w-20 h-20 mx-auto  rounded-full' src={PandaPNG} alt='avatar' />}
+            </div>
+            <Form
+              form={form}
+              labelCol={{
+                span: 4,
+              }}>
+              <Form.Item label='Name' name='username'>
+                <Input className='w-full border rounded-lg p-2' disabled />
+              </Form.Item>
+              <Form.Item label='id' name='id' hidden>
+                <Input />
+              </Form.Item>
+              <Form.Item label='avatar' name='Avatar'>
+                <Input
+                  addonAfter={
+                    <UploadOutlined
+                      onClick={() => {
+                        console.log('upload');
+                      }}
+                    />
+                  }
+                />
+              </Form.Item>
+              <Form.Item label='Description' name='description'>
+                <Input.TextArea rows={4} />
+              </Form.Item>
+              <Form.Item label=' ' colon={false}>
+                <button
+                  className='bg-blue-500 text-white px-4 py-2 rounded-lg'
+                  onClick={() => {
+                    userStore.updateData(form.getFieldsValue());
+                  }}>
+                  保存
+                </button>
+              </Form.Item>
+            </Form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/user/index.tsx

@@ -2,12 +2,14 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import { List } from './edit/List';
 import { Main } from './layouts';
 import { Login } from './login/Login';
+import { Profile } from './edit/Profile';
 export const App = () => {
   return (
     <Routes>
       <Route element={<Main />}>
         <Route path='/' element={<Navigate to='/user/edit/list' />}></Route>
         <Route path='edit/list' element={<List />} />
+        <Route path='profile' element={<Profile />} />
       </Route>
       <Route path='login' element={<Login />} />
     </Routes>

src/pages/user/module/AvatarUpload.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import { Flex, message, Upload } from 'antd';
+import type { GetProp, UploadProps } from 'antd';
+
+type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
+
+const getBase64 = (img: FileType, callback: (url: string) => void) => {
+  const reader = new FileReader();
+  reader.addEventListener('load', () => callback(reader.result as string));
+  reader.readAsDataURL(img);
+};
+
+const beforeUpload = (file: FileType) => {
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+  if (!isJpgOrPng) {
+    message.error('You can only upload JPG/PNG file!');
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    message.error('Image must smaller than 2MB!');
+  }
+  return isJpgOrPng && isLt2M;
+};
+
+export const AvatarUpload = () => {
+  const [loading, setLoading] = useState(false);
+  const [imageUrl, setImageUrl] = useState<string>();
+
+  const handleChange: UploadProps['onChange'] = (info) => {
+    if (info.file.status === 'uploading') {
+      setLoading(true);
+      return;
+    }
+    if (info.file.status === 'done') {
+      // Get this url from response in real world.
+      getBase64(info.file.originFileObj as FileType, (url) => {
+        setLoading(false);
+        setImageUrl(url);
+      });
+    }
+  };
+
+  const uploadButton = (
+    <button style={{ border: 0, background: 'none' }} type='button'>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>Upload</div>
+    </button>
+  );
+  const onAciton = async (file) => {
+    console.log('file', file);
+    return '';
+  };
+  return (
+    <Flex gap='middle' wrap>
+      <Upload
+        name='avatar'
+        listType='picture-circle'
+        className='avatar-uploader'
+        showUploadList={false}
+        action={onAciton}
+        beforeUpload={beforeUpload}
+        onChange={handleChange}>
+        {imageUrl ? <img src={imageUrl} alt='avatar' style={{ width: '100%' }} /> : uploadButton}
+      </Upload>
+    </Flex>
+  );
+};