暂存，修改navigate和添加图片

src/admin-page/user-manage/edit/List.tsx

@@ -3,7 +3,6 @@ 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 { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons';
 import clsx from 'clsx';
 import { isObjectNull } from '@/utils/is-null';
@@ -80,7 +79,6 @@ const FormModal = () => {
   );
 };
 export const List = () => {
-  const navicate = useNavigate();
   const userStore = useUserStore(
     useShallow((state) => {
       return {

src/index.css

@@ -41,3 +41,6 @@ body {
     display: block; /* 修复交汇时出现的白块 */
   }
 }
+.kv-container.active {
+  background: #ebe9e987 !important;
+}

src/modules/index.ts

@@ -1,2 +1,4 @@
 export * from './query';
 export * from './deck-to-flow/deck';
+
+export * from './navicate';

src/modules/layout/LayoutUser.tsx

@@ -16,14 +16,14 @@ import {
   SwitcherOutlined,
   UserOutlined,
 } from '@ant-design/icons';
-import { useNavigate } from 'react-router';
 import { useMemo } from 'react';
 import { query } from '../query';
+import { useNewNavigate } from '../navicate';
 const meun = [
   {
     title: 'Your profile',
     icon: <HomeOutlined />,
-    link: '/map',
+    link: '/user/profile',
   },
   {
     title: 'Your orgs',
@@ -45,7 +45,7 @@ export const LayoutUser = () => {
       switchOrg: state.switchOrg,
     })),
   );
-  const navigate = useNavigate();
+  const navigate = useNewNavigate();
   const items = useMemo(() => {
     const orgs = store.me?.orgs || [];
     return orgs.map((item) => {
@@ -91,6 +91,7 @@ export const LayoutUser = () => {
                 onClick={() => {
                   if (item.link) {
                     navigate(item.link);
+                    setOpen(false);
                   } else {
                     message.info('Coming soon');
                   }

src/modules/layout/Menu.tsx

@@ -15,7 +15,7 @@ import {
   SmileOutlined,
   SwitcherOutlined,
 } from '@ant-design/icons';
-import { useNavigate } from 'react-router';
+import { useNewNavigate } from '../navicate';
 const meun = [
   {
     title: 'Home',
@@ -69,7 +69,7 @@ const meun = [
 ];
 export const LayoutMenu = () => {
   const { open, setOpen } = useLayoutStore(useShallow((state) => ({ open: state.open, setOpen: state.setOpen })));
-  const navigate = useNavigate();
+  const navigate = useNewNavigate();
   return (
     <div className={clsx('w-full h-full absolute z-20', !open && 'hidden')}>
       <div

src/modules/layout/index.tsx

@@ -7,6 +7,7 @@ import { useLayoutStore } from './store';
 import { useShallow } from 'zustand/react/shallow';
 import { useEffect } from 'react';
 import { LayoutUser } from './LayoutUser';
+import PandaPNG from '@/assets/panda.png';
 
 type LayoutMainProps = {
   title?: React.ReactNode;
@@ -52,7 +53,13 @@ export const LayoutMain = (props: LayoutMainProps) => {
                 </Tooltip>
               </div>
             )}
-            <div className='w-8 h-8 rounded-full bg-blue-200 avatar cursor-pointer' onClick={() => menuStore.setOpenUser(true)}></div>
+            <div className='w-8 h-8 rounded-full avatar cursor-pointer' onClick={() => menuStore.setOpenUser(true)}>
+              {menuStore.me?.avatar ? (
+                <img className='w-8 h-8 rounded-full' src={menuStore.me?.avatar} alt='avatar' />
+              ) : (
+                <img className='w-8 h-8 rounded-full' src={PandaPNG} alt='avatar' />
+              )}
+            </div>
             <div className='cursor-pointer' onClick={() => menuStore.setOpenUser(true)}>
               {menuStore.me?.username}
             </div>

src/modules/layout/store/index.ts

@@ -10,6 +10,7 @@ type Me = {
   description?: string;
   type?: 'user' | 'org';
   orgs?: string[];
+  avatar?: string;
 };
 export type LayoutStore = {
   open: boolean;

src/modules/navicate.ts

@@ -0,0 +1,12 @@
+import { NavigateFunction, To, useNavigate } from 'react-router-dom';
+/**
+ * 如果有basepath，刚好给path加上basepath
+ * @returns NavigateFunction
+ */
+export const useNewNavigate = (): NavigateFunction => {
+  const navigate = useNavigate();
+  const fn = (path: To, data?: any) => {
+    navigate(path, data);
+  };
+  return fn as NavigateFunction;
+};

src/modules/query.ts

@@ -1,5 +1,4 @@
-import { Query, QueryClient } from '@kevisual/query';
+import { QueryClient } from '@kevisual/query';
-import { QueryWs } from '@kevisual/query/ws';
 import { modal } from './redirect-to-login';
 import { create } from 'zustand';
 import { message } from 'antd';
@@ -25,10 +24,8 @@ query.afterResponse = async (res) => {
   return res;
 };
 export const request = query.post;
-export const queryWs = new QueryWs({
+
-  url: '/api/router',
+export const ws = query.qws.ws;
-});
-export const ws = queryWs.ws;
 type Store = {
   connected: boolean;
   setConnected: (connected: boolean) => void;

src/pages/ai-agent/edit/List.tsx

@@ -4,7 +4,6 @@ import { useEffect } from 'react';
 import { CardBlank } from '@/components/card/CardBlank';
 import { Button, Form, Input, message, Modal, Tooltip } from 'antd';
 import copy from 'copy-to-clipboard';
-import { useNavigate } from 'react-router';
 import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, CaretRightOutlined } from '@ant-design/icons';
 import clsx from 'clsx';
 import { isObjectNull } from '@/utils/is-null';

src/pages/ai-chat/AiModule.tsx

@@ -5,11 +5,11 @@ import { Button, Dropdown, Form, Input, message, Modal, Tooltip } from 'antd';
 import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { TextArea } from '../container/components/TextArea';
 import clsx from 'clsx';
-import { query } from '@/modules';
+import { query, useNewNavigate } from '@/modules';
 import { nanoid } from 'nanoid';
 import { ChatMessage } from './module/ChatMessage';
 import { isObjectNull } from '@/utils/is-null';
-import { useLocation, useNavigate } from 'react-router';
+import { useLocation } from 'react-router';
 const testId = '60aca66b-4be9-4266-9568-6001032c7e13';
 const NormalMessage = ({ onSend }: { onSend: any }) => {
   const [message, setMessage] = useState('');
@@ -173,7 +173,7 @@ export const useListenQuery = () => {
 
 export const AiMoudle = () => {
   const [form] = Form.useForm();
-  const navigate = useNavigate();
+  const navigate = useNewNavigate();
   const aiStore = useAiStore(
     useShallow((state) => {
       return {

src/pages/app/edit/AppVersionList.tsx

@@ -5,9 +5,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Form, Input, Modal, Tooltip } from 'antd';
 import { CloudUploadOutlined, DeleteOutlined, EditOutlined, FileOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons';
 import { isObjectNull } from '@/utils/is-null';
-import { useNavigate } from 'react-router';
 import { FileUpload } from '../modules/FileUpload';
 import clsx from 'clsx';
+import { useNewNavigate } from '@/modules';
 const FormModal = () => {
   const [form] = Form.useForm();
   const containerStore = useAppVersionStore(
@@ -98,7 +98,7 @@ export const AppVersionList = () => {
       };
     }),
   );
-  const navigate = useNavigate();
+  const navigate = useNewNavigate();
   const [isUpload, setIsUpload] = useState(false);
   useEffect(() => {
     // fetch app version list

src/pages/app/edit/List.tsx

@@ -4,8 +4,8 @@ import { useEffect } from 'react';
 import { Button, Form, Input, message, Modal, Select, Tooltip } from 'antd';
 import { CodeOutlined, DashboardOutlined, DeleteOutlined, EditOutlined, LinkOutlined, PlusOutlined, UnorderedListOutlined } from '@ant-design/icons';
 import { isObjectNull } from '@/utils/is-null';
-import { useNavigate } from 'react-router';
 import { FileUpload } from '../modules/FileUpload';
+import { useNewNavigate } from '@/modules';
 const FormModal = () => {
   const [form] = Form.useForm();
   const containerStore = useUserAppStore(
@@ -104,7 +104,7 @@ export const List = () => {
       };
     }),
   );
-  const navicate = useNavigate();
+  const navicate = useNewNavigate();
   useEffect(() => {
     userAppStore.getList();
   }, []);

src/pages/code-editor/edit/Edit.tsx

@@ -1,18 +1,19 @@
 import { createEditorInstance, editor } from '@kevisual/codemirror/dist/editor.json';
 import { useEffect, useRef, useLayoutEffect, useState, useCallback } from 'react';
-import { useLocation, useNavigate } from 'react-router';
+import { useLocation } from 'react-router';
 import { useCodeEditorStore, ParseData } from '../store';
 import { Button, message, Tooltip } from 'antd';
 import { LeftOutlined, MessageOutlined, SaveOutlined } from '@ant-design/icons';
 import { useAiStore } from '@/pages/ai-chat';
 import { useShallow } from 'zustand/react/shallow';
+import { useNewNavigate } from '@/modules';
 export const App = () => {
   const ref = useRef<HTMLDivElement>(null);
   const editorRef = useRef<typeof editor>(null);
   const location = useLocation();
   const store = useCodeEditorStore();
   const [mounted, setMounted] = useState(false);
-  const navigator = useNavigate();
+  const navigator = useNewNavigate();
   const aiStore = useAiStore(
     useShallow((state) => {
       return {

src/pages/code-editor/hooks/use-to-code-editor.ts

@@ -1,7 +1,7 @@
-import { useNavigate } from 'react-router';
+import { useNewNavigate } from '@/modules';
 import { ParseData } from '../store';
 export const useToCodeEditor = () => {
-  const navigate = useNavigate();
+  const navigate = useNewNavigate();
   const toPage = (pathKey: ParseData['updatePath'], data: ParseData['data']) => {
     navigate('/code-editor', {
       state: {

src/pages/container/edit/List.tsx

@@ -5,7 +5,7 @@ import { useContainerStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
 import { Form } from 'antd';
 import copy from 'copy-to-clipboard';
-import { useNavigate } from 'react-router';
+import { useNewNavigate } from '@/modules';
 import {
   EditOutlined,
   SettingOutlined,
@@ -98,7 +98,7 @@ const FormModal = () => {
   );
 };
 export const ContainerList = () => {
-  const navicate = useNavigate();
+  const navicate = useNewNavigate();
   const containerStore = useContainerStore(
     useShallow((state) => {
       return {

src/pages/map/index.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useNavigate } from 'react-router-dom';
+import { useNewNavigate } from '@/modules';
 const serverList = ['container', 'panel', 'publish', 'code-editor', 'map', 'ai-chat'];
 const serverPath = [
   {
@@ -44,7 +44,7 @@ const serverPath = [
   },
 ];
 const ServerPath = () => {
-  const navigate = useNavigate();
+  const navigate = useNewNavigate();
   return (
     <div className='p-2 w-full h-full bg-gray-200'>
       <h1 className='p-4 w-1/2 m-auto h1'>Site Map</h1>

src/pages/org/edit/List.tsx

@@ -3,7 +3,7 @@ import { Fragment, useEffect, useMemo, useState } from 'react';
 import { useOrgStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
 import { Form } from 'antd';
-import { useNavigate } from 'react-router';
+import { useNewNavigate } from '@/modules';
 import {
   EditOutlined,
   SettingOutlined,
@@ -91,7 +91,7 @@ const FormModal = () => {
   );
 };
 export const List = () => {
-  const navicate = useNavigate();
+  const navicate = useNewNavigate();
   const userStore = useOrgStore(
     useShallow((state) => {
       return {

src/pages/org/edit/UserList.tsx

@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 import { Button, Input, message, Modal, Select, Tooltip } from 'antd';
 import { DeleteOutlined, EditOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons';
 import { Form } from 'antd';
-import { useNavigate } from 'react-router';
+import { useNewNavigate } from '@/modules';
 import { isObjectNull } from '@/utils/is-null';
 
 const FormModal = () => {
@@ -90,7 +90,7 @@ const FormModal = () => {
 
 export const UserList = () => {
   const param = useParams();
-  const navicate = useNavigate();
+  const navicate = useNewNavigate();
   const orgStore = useOrgStore(
     useShallow((state) => {
       return {

src/pages/panel/deck/deck-store.ts

@@ -10,6 +10,8 @@ type DeckPageStore = {
   loading: boolean;
   setLoading: (loading: boolean) => void;
   pageData: any[];
+  cids: string[];
+  setCids: () => void;
   setPageData: (data: any[]) => void;
   getPageData: () => any[];
   selected: any;
@@ -57,4 +59,12 @@ export const useDeckPageStore = create<DeckPageStore>((set, get) => ({
   getCode: () => {
     return get().code;
   },
+  cids: [],
+  setCids: () => {
+    const pageData = get().pageData;
+    const cids = pageData.map((item) => item.codeId).filter((item) => item);
+    // cids 去重复
+    const newCids = Array.from(new Set(cids));
+    set({ cids: newCids });
+  },
 }));

src/pages/panel/deck/index.tsx

@@ -22,12 +22,14 @@ export const clearBlank = (newStyle: any) => {
   return change;
 };
 export const useListener = (id?: string, opts?: any) => {
-  const { refresh } = opts || {};
+  const { refresh, cids = [] } = opts || {};
   const connected = useStore((state) => state.connected);
   // 监听服务器的消息
   useEffect(() => {
     if (!id) return;
     if (!connected) return;
+    if (cids.length === 0) return;
+    console.log('cids', cids);
     ws.send(
       JSON.stringify({
         type: 'subscribe',
@@ -35,7 +37,7 @@ export const useListener = (id?: string, opts?: any) => {
           type: 'pageEdit',
           data: {
             pid: id,
-            cids: ['170c0b55-8c13-4d6e-bf35-3f935d979a0d'],
+            cids: cids,
           },
         },
       }),
@@ -46,7 +48,7 @@ export const useListener = (id?: string, opts?: any) => {
       if (!connected) return;
       ws.removeEventListener('message', listener);
     };
-  }, [id, connected]);
+  }, [id, connected, cids]);
   const listener = (event) => {
     const parseIfJson = (data: string) => {
       try {
@@ -66,17 +68,6 @@ export const useListener = (id?: string, opts?: any) => {
     }
   };
 };
-const getParent = (data: { children?: string[]; [key: string]: any }[], id: string, list: string[]) => {
-  for (let item of data) {
-    if (item.children?.includes(id)) {
-      // 找到了当前的父亲节点
-      list.unshift(item.id);
-      getParent(data, item.id, list);
-      return;
-    }
-  }
-  return;
-};
 
 export const Deck = () => {
   const params = useParams<{ id: string }>();
@@ -86,6 +77,7 @@ export const Deck = () => {
   const deckPageStore = useDeckPageStore();
   const { code, setCode } = deckPageStore;
   const { selected, setSelected } = deckPageStore;
+  const { cids } = deckPageStore;
   const aiStore = useAiStore(
     useShallow((state) => {
       return {
@@ -129,6 +121,7 @@ export const Deck = () => {
       const result = getContainerData({ page, containerList });
       console.log('result', result);
       deckPageStore.setPageData(result);
+      deckPageStore.setCids();
       init(result);
     }
   };
@@ -149,12 +142,12 @@ export const Deck = () => {
     });
     // container.reRender();
     containerList.forEach((item) => {
-      container.hotReload(item.id);
+      container.renderId(item.id);
     });
     // @ts-ignore
     window.c = container;
   };
-  useListener(id, { refresh });
+  useListener(id, { refresh, cids });
   const onContainer = (e) => {
     const { data } = e;
     const types = ['position', 'resize'];

src/pages/panel/edit/List.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { Form } from 'antd';
 import copy from 'copy-to-clipboard';
-import { useNavigate } from 'react-router';
+import { useNewNavigate } from '@/modules';
 import { useToCodeEditor } from '@/pages/code-editor';
 import { CardBlank } from '@/components/card/CardBlank';
 import {
@@ -103,7 +103,7 @@ const FormModal = () => {
   );
 };
 export const List = () => {
-  const navicate = useNavigate();
+  const navicate = useNewNavigate();
   const toCodeEditor = useToCodeEditor();
   const editStore = useEditStore(
     useShallow((state) => {

src/pages/prompt/edit/List.tsx

@@ -4,7 +4,7 @@ import { usePromptStore } from '../store/prompt';
 import { useShallow } from 'zustand/react/shallow';
 import { Form } from 'antd';
 import copy from 'copy-to-clipboard';
-import { useNavigate } from 'react-router';
+import { useNewNavigate } from '@/modules';
 import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, CaretRightOutlined, PlusOutlined } from '@ant-design/icons';
 import clsx from 'clsx';
 import { TextArea } from '@/pages/container/components/TextArea';
@@ -104,7 +104,7 @@ const FormModal = () => {
   );
 };
 export const List = () => {
-  const navicate = useNavigate();
+  const navicate = useNewNavigate();
   const aiStore = useAiStore(
     useShallow((state) => {
       return {

src/pages/publish/edit/List.tsx

@@ -4,7 +4,7 @@ import { usePublishStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
 import { Form } from 'antd';
 import copy from 'copy-to-clipboard';
-import { useNavigate } from 'react-router';
+import { useNewNavigate } from '@/modules';
 const FormModal = () => {
   const [form] = Form.useForm();
   const containerStore = usePublishStore(
@@ -70,7 +70,7 @@ const FormModal = () => {
   );
 };
 export const List = () => {
-  const navicate = useNavigate();
+  const navicate = useNewNavigate();
   const containerStore = usePublishStore(
     useShallow((state) => {
       return {

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