temp

src/pages/container/store/index.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import { query } from '@/modules';
-import { message } from 'antd';
+import { message } from '@/modules/message';
 type ContainerStore = {
   showEdit: boolean;
   setShowEdit: (showEdit: boolean) => void;

src/pages/file/edit/List.tsx

@@ -1,11 +1,16 @@
 import { useShallow } from 'zustand/react/shallow';
 import { useFileStore } from '../store';
-import { useEffect } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import path from 'path-browserify';
 import prettyBytes from 'pretty-bytes';
 import clsx from 'clsx';
 import { isObjectNull } from '@/utils/is-null';
-import { FileOutlined, FolderOutlined } from '@ant-design/icons';
+import FileOutlined from '@ant-design/icons/FileOutlined';
+import FolderOutlined from '@ant-design/icons/FolderOutlined';
+import { IconButton } from '@kevisual/center-components/button/index.tsx';
+import { render, unmount } from '@kevisual/resources/pages/Bootstrap.tsx';
+import UploadOutlined from '@ant-design/icons/lib/icons/UploadOutlined';
+import { Tooltip } from '@mui/material';
 export const CardPath = ({ children }: any) => {
   const userAppStore = useFileStore(
     useShallow((state) => {
@@ -58,6 +63,8 @@ export const CardPath = ({ children }: any) => {
   );
 };
 export const List = () => {
+  const [tab, setTab] = useState<'folder' | 'upload'>('folder');
+  const uploadRef = useRef<HTMLDivElement>(null);
   const userAppStore = useFileStore(
     useShallow((state) => {
       return {
@@ -77,9 +84,9 @@ export const List = () => {
     userAppStore.setPath(prefix);
     userAppStore.getList();
   };
-  return (
-    <div>
-      <div className='p-4'>
+  const allFolderApp = useMemo(() => {
+    return (
+      <>
         <CardPath>
           <div className='flex flex-col'>
             {userAppStore.list.map((item, index) => {
@@ -122,6 +129,37 @@ export const List = () => {
         <div>
           <pre>{!isObjectNull(userAppStore.file) && JSON.stringify(userAppStore.file, null, 2)}</pre>
         </div>
+      </>
+    );
+  }, [userAppStore.list, userAppStore.path]);
+
+  useEffect(() => {
+    if (tab === 'upload') {
+      render(uploadRef.current!);
+    } else {
+      uploadRef.current && unmount(uploadRef.current!);
+    }
+    console.log('unmount', tab, uploadRef.current);
+  }, [tab]);
+  return (
+    <div className='flex w-full h-full'>
+      <div className='flex gap-2 border border-gray-200 shadow-md p-2'>
+        <div className='flex flex-col gap-2'>
+          <Tooltip title='所有的资源文件' placement='right'>
+            <IconButton sx={{ py: 1 }} color={tab !== 'folder' ? 'primary' : 'secondary'} onClick={() => setTab('folder')}>
+              <FolderOutlined />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title='上传资源文件管理' placement='right'>
+            <IconButton sx={{ py: 1 }} color={tab !== 'upload' ? 'primary' : 'secondary'} onClick={() => setTab('upload')}>
+              <UploadOutlined />
+            </IconButton>
+          </Tooltip>
+        </div>
+      </div>
+      <div className='grow' style={{ height: 'calc(100% - 0px)', overflow: 'hidden' }}>
+        {tab === 'folder' && <div className='p-4 w-full h-full'>{allFolderApp}</div>}
+        {tab === 'upload' && <div className='w-full h-full' ref={uploadRef}></div>}
       </div>
     </div>
   );