feat: 暂存，添加上传文件

package.json

@@ -49,6 +49,7 @@
     "@types/d3": "^7.4.3",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.7.4",
+    "@types/path-browserify": "^1.0.3",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
@@ -57,7 +58,9 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
+    "path-browserify": "^1.0.1",
     "postcss-import": "^16.1.0",
+    "pretty-bytes": "^6.1.1",
     "react-is": "^18.3.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.13",

pnpm-lock.yaml

@@ -114,6 +114,12 @@ importers:
       '@types/node':
         specifier: ^22.7.4
         version: 22.7.4
+      '@types/path-browserify':
+        specifier: ^1.0.3
+        version: 1.0.3
+      '@types/pretty-bytes':
+        specifier: ^5.2.0
+        version: 5.2.0
       '@types/react':
         specifier: ^18.3.10
         version: 18.3.10
@@ -138,9 +144,15 @@ importers:
       globals:
         specifier: ^15.9.0
         version: 15.9.0
+      path-browserify:
+        specifier: ^1.0.1
+        version: 1.0.1
       postcss-import:
         specifier: ^16.1.0
         version: 16.1.0(postcss@8.4.47)
+      pretty-bytes:
+        specifier: ^6.1.1
+        version: 6.1.1
       react-is:
         specifier: ^18.3.1
         version: 18.3.1
@@ -907,6 +919,13 @@ packages:
   '@types/parse-json@4.0.2':
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
 
+  '@types/path-browserify@1.0.3':
+    resolution: {integrity: sha512-ZmHivEbNCBtAfcrFeBCiTjdIc2dey0l7oCGNGpSuRTy8jP6UVND7oUowlvDujBy8r2Hoa8bfFUOCiPWfmtkfxw==}
+
+  '@types/pretty-bytes@5.2.0':
+    resolution: {integrity: sha512-dJhMFphDp6CE+OAZVyqzha9KsmgeqRMbZN4dIbMSrfObiuzfjucwKdn6zu+ttrjMwmz+Vz71/xXgHx5pO0axhA==}
+    deprecated: This is a stub types definition. pretty-bytes provides its own type definitions, so you do not need this installed.
+
   '@types/prismjs@1.26.4':
     resolution: {integrity: sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==}
 
@@ -1867,6 +1886,9 @@ packages:
   parse5@7.1.2:
     resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
 
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -1956,6 +1978,10 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  pretty-bytes@6.1.1:
+    resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+
   property-information@6.5.0:
     resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
 
@@ -3395,6 +3421,12 @@ snapshots:
 
   '@types/parse-json@4.0.2': {}
 
+  '@types/path-browserify@1.0.3': {}
+
+  '@types/pretty-bytes@5.2.0':
+    dependencies:
+      pretty-bytes: 6.1.1
+
   '@types/prismjs@1.26.4': {}
 
   '@types/prop-types@15.7.13': {}
@@ -4490,6 +4522,8 @@ snapshots:
     dependencies:
       entities: 4.5.0
 
+  path-browserify@1.0.1: {}
+
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
@@ -4562,6 +4596,8 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  pretty-bytes@6.1.1: {}
+
   property-information@6.5.0: {}
 
   punycode@2.3.1: {}

src/App.tsx

@@ -10,6 +10,8 @@ import { App as AiAgentApp } from './pages/ai-agent';
 import { App as UserApp } from './pages/user';
 import { App as ChatApp } from './pages/chat-manager';
 import { App as GitHubApp } from './pages/github';
+import { App as UserAppApp } from './pages/app';
+import { App as FileApp } from './pages/file';
 
 import '@abearxiong/container/dist/container.css';
 
@@ -33,6 +35,9 @@ export const App = () => {
             <Route path='/user/*' element={<UserApp />} />
             <Route path='/chat/*' element={<ChatApp />} />
             <Route path='/github/*' element={<GitHubApp />} />
+            <Route path='/app/*' element={<UserAppApp />} />
+            <Route path='/file/*' element={<FileApp />} />
+
             <Route path='/404' element={<div>404</div>} />
             <Route path='*' element={<div>404</div>} />
           </Routes>

src/pages/app/edit/AppVersionList.tsx

@@ -0,0 +1,153 @@
+import { useParams } from 'react-router';
+import { useAppVersionStore } from '../store';
+import { useShallow } from 'zustand/react/shallow';
+import { useEffect } from 'react';
+import { Button, Form, Input, Modal } from 'antd';
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import { isObjectNull } from '@/utils/is-null';
+import { useNavigate } from 'react-router';
+import { FileUpload } from '../modules/FileUpload';
+const FormModal = () => {
+  const [form] = Form.useForm();
+  const containerStore = useAppVersionStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        updateData: state.updateData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = containerStore.showEdit;
+    if (open) {
+      if (open) {
+        const isNull = isObjectNull(containerStore.formData);
+        if (isNull) {
+          form.setFieldsValue({});
+        } else form.setFieldsValue(containerStore.formData);
+      }
+    }
+  }, [containerStore.showEdit]);
+  const onFinish = async (values: any) => {
+    containerStore.updateData(values);
+  };
+  const onClose = () => {
+    containerStore.setShowEdit(false);
+    form.resetFields();
+  };
+  const isEdit = containerStore.formData.id;
+  return (
+    <Modal
+      title={isEdit ? 'Edit' : 'Add'}
+      open={containerStore.showEdit}
+      onClose={() => containerStore.setShowEdit(false)}
+      destroyOnClose
+      footer={false}
+      width={800}
+      onCancel={onClose}>
+      <Form
+        form={form}
+        onFinish={onFinish}
+        labelCol={{
+          span: 4,
+        }}
+        wrapperCol={{
+          span: 20,
+        }}>
+        <Form.Item name='id' hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item name='key' label='key'>
+          <Input disabled />
+        </Form.Item>
+        <Form.Item name='version' label='version'>
+          <Input />
+        </Form.Item>
+        <Form.Item label=' ' colon={false}>
+          <Button type='primary' htmlType='submit'>
+            Submit
+          </Button>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
+            Cancel
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export const AppVersionList = () => {
+  const params = useParams();
+  const appKey = params.appKey;
+  const versionStore = useAppVersionStore(
+    useShallow((state) => {
+      return {
+        list: state.list,
+        getList: state.getList,
+        setKey: state.setKey,
+        setShowEdit: state.setShowEdit,
+        setFormData: state.setFormData,
+        deleteData: state.deleteData,
+      };
+    }),
+  );
+  useEffect(() => {
+    // fetch app version list
+    if (appKey) {
+      versionStore.setKey(appKey);
+      versionStore.getList();
+    }
+  }, []);
+  return (
+    <div className='w-full h-full flex bg-slate-100'>
+      <div className='p-2 bg-white'>
+        <Button
+          onClick={() => {
+            versionStore.setFormData({ key: appKey });
+            versionStore.setShowEdit(true);
+          }}
+          icon={<PlusOutlined />}
+        />
+      </div>
+      <div>
+        <FileUpload />
+      </div>
+      <div className='flex-grow h-full'>
+        <div className='w-full h-full p-4'>
+          <div className='w-full h-full rounded-lg bg-white'>
+            <div className='flex gap-2 flex-wrap p-4'>
+              {versionStore.list.map((item, index) => {
+                return (
+                  <div className='card border-t' key={index}>
+                    <div>{item.version}</div>
+
+                    <div>
+                      <Button.Group>
+                        <Button
+                          onClick={() => {
+                            versionStore.setFormData(item);
+                            versionStore.setShowEdit(true);
+                          }}
+                          icon={<EditOutlined />}
+                        />
+                        <Button
+                          onClick={() => {
+                            versionStore.deleteData(item.id);
+                          }}
+                          icon={<DeleteOutlined />}
+                        />
+                      </Button.Group>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+      <FormModal />
+    </div>
+  );
+};

src/pages/app/edit/List.tsx

@@ -0,0 +1,129 @@
+import { useShallow } from 'zustand/react/shallow';
+import { useUserAppStore } from '../store';
+import { useEffect } from 'react';
+import { Button, Form, Input, Modal } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { isObjectNull } from '@/utils/is-null';
+import { useNavigate } from 'react-router';
+import { FileUpload } from '../modules/FileUpload';
+const FormModal = () => {
+  const [form] = Form.useForm();
+  const containerStore = useUserAppStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        updateData: state.updateData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = containerStore.showEdit;
+    if (open) {
+      if (open) {
+        const isNull = isObjectNull(containerStore.formData);
+        if (isNull) {
+          form.setFieldsValue({});
+        } else form.setFieldsValue(containerStore.formData);
+      }
+    }
+  }, [containerStore.showEdit]);
+  const onFinish = async (values: any) => {
+    containerStore.updateData(values);
+  };
+  const onClose = () => {
+    containerStore.setShowEdit(false);
+    form.resetFields();
+  };
+  const isEdit = containerStore.formData.id;
+  return (
+    <Modal
+      title={isEdit ? 'Edit' : 'Add'}
+      open={containerStore.showEdit}
+      onClose={() => containerStore.setShowEdit(false)}
+      destroyOnClose
+      footer={false}
+      width={800}
+      onCancel={onClose}>
+      <Form
+        form={form}
+        onFinish={onFinish}
+        labelCol={{
+          span: 4,
+        }}
+        wrapperCol={{
+          span: 20,
+        }}>
+        <Form.Item name='id' hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item name='title' label='title'>
+          <Input />
+        </Form.Item>
+        <Form.Item name='key' label='key'>
+          <Input />
+        </Form.Item>
+        <Form.Item name='description' label='description'>
+          <Input.TextArea rows={4} />
+        </Form.Item>
+        <Form.Item label=' ' colon={false}>
+          <Button type='primary' htmlType='submit'>
+            Submit
+          </Button>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
+            Cancel
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export const List = () => {
+  const userAppStore = useUserAppStore(
+    useShallow((state) => {
+      return {
+        list: state.list,
+        getList: state.getList,
+        setShowEdit: state.setShowEdit,
+      };
+    }),
+  );
+  const navicate = useNavigate();
+  useEffect(() => {
+    userAppStore.getList();
+  }, []);
+  return (
+    <div className='w-full h-full flex bg-slate-100'>
+      <div className='p-2 h-full bg-white'>
+        <Button
+          onClick={() => {
+            userAppStore.setShowEdit(true);
+          }}
+          icon={<PlusOutlined />}></Button>
+      </div>
+      <div className='flex-grow'>
+        <div className='w-full h-full p-4'>
+          <div className='w-full h-full bg-white rounded-lg p-2'>
+            <div className='flex flex-wrap gap-2'>
+              {userAppStore.list.map((item) => {
+                return (
+                  <div
+                    className='card border-t w-[300px] '
+                    key={item.id}
+                    onClick={() => {
+                      navicate(`/app/${item.key}/verison/list`);
+                    }}>
+                    <div className='card-title'>{item.title}</div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+      <FormModal />
+    </div>
+  );
+};

src/pages/app/index.tsx

@@ -0,0 +1,15 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { Main } from './layouts';
+import { List } from './edit/List';
+import { AppVersionList } from './edit/AppVersionList';
+export const App = () => {
+  return (
+    <Routes>
+      <Route element={<Main />}>
+        <Route path='/' element={<Navigate to='/app/edit/list' />}></Route>
+        <Route path='edit/list' element={<List />} />
+        <Route path='/:appKey/verison/list' element={<AppVersionList />} />
+      </Route>
+    </Routes>
+  );
+};

src/pages/app/layouts/index.tsx

@@ -0,0 +1,5 @@
+import { LayoutMain } from '@/modules/layout';
+
+export const Main = () => {
+  return <LayoutMain title='User Apps' />;
+};

src/pages/app/modules/FileUpload.tsx

@@ -0,0 +1,56 @@
+export type FileType = {
+  name: string;
+  size: number;
+  lastModified: number;
+  webkitRelativePath: string; // 包含name
+};
+
+export const FileUpload = () => {
+  const onChange = async (e) => {
+    console.log(e.target.files);
+    // webkitRelativePath
+    let files = Array.from(e.target.files) as any[];
+    console.log(files);
+    // 过滤 文件 .DS_Store
+    files = files.filter((file) => {
+      if (file.webkitRelativePath.startsWith('__MACOSX')) {
+        return false;
+      }
+      return !file.name.startsWith('.');
+    });
+    if (files.length === 0) {
+      console.log('no files');
+      return;
+    }
+    const root = files[0].webkitRelativePath.split('/')[0];
+    const formData = new FormData();
+    files.forEach((file) => {
+      // relativePath 去除第一级
+      const webkitRelativePath = file.webkitRelativePath.replace(root + '/', '');
+      formData.append('file', file, webkitRelativePath); // 保留文件夹路径
+    });
+    formData.append('appKey','codeflow');
+    formData.append('version', '0.0.2');
+    const res = await fetch('/api/app/upload', {
+      method: 'POST',
+      body: formData,//
+      headers: {
+        Authorization: 'Bearer ' + localStorage.getItem('token'),
+      },
+    });
+    console.log(res);
+  };
+
+  return (
+    <div>
+      文件上传:
+      <input
+        type='file'
+        // @ts-ignore
+        webkitdirectory='true'
+        multiple
+        onChange={onChange}
+      />
+    </div>
+  );
+};

src/pages/app/store/app-version.ts

@@ -0,0 +1,78 @@
+import { create } from 'zustand';
+import { query } from '@/modules';
+import { message } from 'antd';
+
+type AppVersionStore = {
+  showEdit: boolean;
+  setShowEdit: (showEdit: boolean) => void;
+  formData: any;
+  setFormData: (formData: any) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  key: string;
+  setKey: (key: string) => void;
+  list: any[];
+  getList: () => Promise<void>;
+  updateData: (data: any) => Promise<void>;
+  deleteData: (id: string) => Promise<void>;
+};
+export const useAppVersionStore = create<AppVersionStore>((set, get) => {
+  return {
+    showEdit: false,
+    setShowEdit: (showEdit) => set({ showEdit }),
+    formData: {},
+    setFormData: (formData) => set({ formData }),
+    loading: false,
+    setLoading: (loading) => set({ loading }),
+    key: '',
+    setKey: (key) => set({ key }),
+    list: [],
+    getList: async () => {
+      set({ loading: true });
+      const key = get().key;
+
+      const res = await query.post({
+        path: 'app',
+        key: 'list',
+        data: {
+          key,
+        },
+      });
+      set({ loading: false });
+      if (res.code === 200) {
+        set({ list: res.data });
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+    updateData: async (data) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'app',
+        key: 'update',
+        data,
+      });
+      if (res.code === 200) {
+        message.success('Success');
+        set({ showEdit: false, formData: res.data });
+        getList();
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+    deleteData: async (id) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'app',
+        key: 'delete',
+        id,
+      });
+      if (res.code === 200) {
+        getList();
+        message.success('Success');
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+  };
+});

src/pages/app/store/index.ts

@@ -0,0 +1,2 @@
+export * from './user-app';
+export * from './app-version';

src/pages/app/store/user-app.ts

@@ -0,0 +1,69 @@
+import { create } from 'zustand';
+import { query } from '@/modules';
+import { message } from 'antd';
+type UserAppStore = {
+  showEdit: boolean;
+  setShowEdit: (showEdit: boolean) => void;
+  formData: any;
+  setFormData: (formData: any) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  list: any[];
+  getList: () => Promise<void>;
+  updateData: (data: any) => Promise<void>;
+  deleteData: (id: string) => Promise<void>;
+};
+export const useUserAppStore = create<UserAppStore>((set, get) => {
+  return {
+    showEdit: false,
+    setShowEdit: (showEdit) => set({ showEdit }),
+    formData: {},
+    setFormData: (formData) => set({ formData }),
+    loading: false,
+    setLoading: (loading) => set({ loading }),
+    list: [],
+    getList: async () => {
+      set({ loading: true });
+
+      const res = await query.post({
+        path: 'user-app',
+        key: 'list',
+      });
+      set({ loading: false });
+      if (res.code === 200) {
+        set({ list: res.data });
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+    updateData: async (data) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'user-app',
+        key: 'update',
+        data,
+      });
+      if (res.code === 200) {
+        message.success('Success');
+        set({ showEdit: false, formData: res.data });
+        getList();
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+    deleteData: async (id) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'user-app',
+        key: 'delete',
+        id,
+      });
+      if (res.code === 200) {
+        getList();
+        message.success('Success');
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+  };
+});

src/pages/file/edit/List.tsx

@@ -0,0 +1,122 @@
+import { useShallow } from 'zustand/react/shallow';
+import { useFileStore } from '../store';
+import { useEffect } from 'react';
+import path from 'path-browserify';
+import prettyBytes from 'pretty-bytes';
+import clsx from 'clsx';
+import { isObjectNull } from '@/utils/is-null';
+export const CardPath = ({ children }: any) => {
+  const userAppStore = useFileStore(
+    useShallow((state) => {
+      return {
+        list: state.list,
+        getList: state.getList,
+        setPath: state.setPath,
+        path: state.path,
+      };
+    }),
+  );
+  const paths = ['root', ...userAppStore.path.split('/').filter((item) => item)];
+  const onDirectoryClick = (prefix: string) => {
+    if (prefix === 'root') {
+      userAppStore.setPath('');
+      userAppStore.getList();
+      return;
+    }
+    userAppStore.setPath(prefix.replace('root/', '') + '/');
+    userAppStore.getList();
+  };
+  return (
+    <div className='border'>
+      <div className='p-2'>
+        <div className='flex flex-col'>
+          <div className='  flex gap-2 py-2'>
+            <div>Path: </div>
+            <div className='flex'>
+              {paths.map((item, index) => {
+                const isLast = index === paths.length - 1;
+                return (
+                  <div
+                    key={index}
+                    className={clsx('select-none', !isLast && 'hover:text-gray-400 cursor-pointer')}
+                    onClick={(e) => {
+                      if (!isLast) {
+                        onDirectoryClick(paths.slice(0, index + 1).join('/'));
+                      }
+                    }}>
+                    {item}/
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className=''>{children}</div>
+    </div>
+  );
+};
+export const List = () => {
+  const userAppStore = useFileStore(
+    useShallow((state) => {
+      return {
+        list: state.list,
+        getList: state.getList,
+        setPath: state.setPath,
+        path: state.path,
+        getFile: state.getFile,
+        file: state.file,
+      };
+    }),
+  );
+  useEffect(() => {
+    userAppStore.getList();
+  }, []);
+  const onDirectoryClick = (prefix: string) => {
+    userAppStore.setPath(prefix);
+    userAppStore.getList();
+  };
+  return (
+    <div>
+      <div className='p-4'>
+        <CardPath>
+          <div className='flex flex-col'>
+            {userAppStore.list.map((item, index) => {
+              if (item.prefix) {
+                let showPrefix = item.prefix.replace(userAppStore.path, '');
+                showPrefix = showPrefix.replace('/', '');
+                return (
+                  <div
+                    className=' border-t flex gap-2 p-2'
+                    key={index}
+                    onClick={() => {
+                      onDirectoryClick(item.prefix);
+                    }}>
+                    <div>Directory: </div>
+                    <div>{showPrefix}</div>
+                  </div>
+                );
+              }
+              const name = path.basename(item.name);
+              const size = prettyBytes(item.size);
+              return (
+                <div
+                  className=' border-t flex gap-2 p-2'
+                  key={index}
+                  onClick={() => {
+                    userAppStore.getFile(item.name);
+                  }}>
+                  <div>{name}</div>
+                  <div>size: {size}</div>
+                </div>
+              );
+            })}
+          </div>
+        </CardPath>
+        <div>
+          <pre>{!isObjectNull(userAppStore.file) && JSON.stringify(userAppStore.file, null, 2)}</pre>
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/file/index.tsx

@@ -0,0 +1,13 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { Main } from './layouts';
+import { List } from './edit/List';
+export const App = () => {
+  return (
+    <Routes>
+      <Route element={<Main />}>
+        <Route path='/' element={<Navigate to='/file/edit/list' />}></Route>
+        <Route path='edit/list' element={<List />} />
+      </Route>
+    </Routes>
+  );
+};

src/pages/file/layouts/index.tsx

@@ -0,0 +1,5 @@
+import { LayoutMain } from '@/modules/layout';
+
+export const Main = () => {
+  return <LayoutMain title='User Files' />;
+};

src/pages/file/store/index.ts

@@ -0,0 +1,97 @@
+import { create } from 'zustand';
+import { query } from '@/modules';
+import { message } from 'antd';
+import { sortBy } from 'lodash-es';
+type FileStore = {
+  showEdit: boolean;
+  setShowEdit: (showEdit: boolean) => void;
+  formData: any;
+  setFormData: (formData: any) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  path: string;
+  setPath: (path: string) => void;
+  list: any[];
+  getList: () => Promise<void>;
+  updateData: (data: any) => Promise<void>;
+  deleteData: (id: string) => Promise<void>;
+  getFile: (path: string) => Promise<any>;
+  file: any;
+  setFile: (file: any) => void;
+};
+export const useFileStore = create<FileStore>((set, get) => {
+  return {
+    showEdit: false,
+    setShowEdit: (showEdit) => set({ showEdit }),
+    formData: {},
+    setFormData: (formData) => set({ formData }),
+    loading: false,
+    setLoading: (loading) => set({ loading }),
+    path: '',
+    setPath: (path) => set({ path }),
+    list: [],
+    getList: async () => {
+      const { path } = get();
+      set({ loading: true });
+
+      const res = await query.post({
+        path: 'file',
+        key: 'list',
+        data: {
+          prefix: path,
+        },
+      });
+      set({ loading: false });
+      if (res.code === 200) {
+        const list = res.data;
+        const sortedList = sortBy(list, [(item) => !item.prefix]);
+        set({ list: sortedList });
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+    updateData: async (data) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'file',
+        key: 'update',
+        data,
+      });
+      if (res.code === 200) {
+        message.success('Success');
+        set({ showEdit: false, formData: res.data });
+        getList();
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+    deleteData: async (id) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'file',
+        key: 'delete',
+        id,
+      });
+      if (res.code === 200) {
+        getList();
+        message.success('Success');
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+    getFile: async (path) => {
+      const res = await query.post({
+        path: 'file',
+        key: 'stat',
+        data: { prefix: path },
+      });
+      if (res.code === 200) {
+        set({ file: res.data });
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+    file: {},
+    setFile: (file) => set({ file }),
+  };
+});