暂存，修改navigate和添加图片

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>
+  );
+};