feat: 去掉antd

src/pages/file/edit/List.tsx

@@ -4,13 +4,17 @@ 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 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';
+import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file.ts';
+import { FileDrawerApp } from '@kevisual/resources/pages/file/draw/FileDrawer.tsx';
+import { RefreshCw, Upload } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { UploadButton } from '@kevisual/resources/pages/upload/index.tsx';
 export const CardPath = ({ children }: any) => {
   const userAppStore = useFileStore(
     useShallow((state) => {
@@ -32,28 +36,62 @@ export const CardPath = ({ children }: any) => {
     userAppStore.setPath(prefix.replace('root/', '') + '/');
     userAppStore.getList();
   };
+  const { t } = useTranslation();
+
+  const [usrname, appKey, version] = paths;
+  const onUloadFinish = (res: any) => {
+    console.log(res);
+    userAppStore.getList();
+  };
   return (
     <div className='border border-gray-200 rounded'>
       <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 className='flex justify-between'>
+            <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 className='flex gap-2'>
+              <Tooltip title={t('refresh')} placement='bottom'>
+                <IconButton
+                  color='primary'
+                  onClick={() => {
+                    userAppStore.getList();
+                  }}>
+                  <RefreshCw />
+                </IconButton>
+              </Tooltip>
+              {version && (
+                <>
+                  <Tooltip title={t('uploadDirectory')} placement='bottom'>
+                    <IconButton color='primary'>
+                      <UploadButton onlyIcon uploadDirectory icon={<Upload />} appKey={appKey} version={version} username={usrname} onUpload={onUloadFinish} />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title={t('upload')} placement='bottom'>
+                    <IconButton color='primary'>
+                      <UploadButton onlyIcon appKey={appKey} version={version} username={usrname} onUpload={onUloadFinish} />
+                    </IconButton>
+                  </Tooltip>
+                </>
+              )}
             </div>
           </div>
         </div>
@@ -65,6 +103,17 @@ export const CardPath = ({ children }: any) => {
 export const List = () => {
   const [tab, setTab] = useState<'folder' | 'upload'>('folder');
   const uploadRef = useRef<HTMLDivElement>(null);
+  const { setOpenDrawer, setPrefix, setResource, getStatFile, setOnce } = useResourceFileStore(
+    useShallow((state) => {
+      return {
+        setOpenDrawer: state.setOpenDrawer,
+        setPrefix: state.setPrefix,
+        setResource: state.setResource,
+        getStatFile: state.getStatFile,
+        setOnce: state.setOnce,
+      };
+    }),
+  );
   const userAppStore = useFileStore(
     useShallow((state) => {
       return {
@@ -79,6 +128,9 @@ export const List = () => {
   );
   useEffect(() => {
     userAppStore.getList();
+    return () => {
+      setOnce(null);
+    };
   }, []);
   const onDirectoryClick = (prefix: string) => {
     userAppStore.setPath(prefix);
@@ -114,7 +166,15 @@ export const List = () => {
                   className=' border-t border-gray-200 flex gap-2 p-2'
                   key={index}
                   onClick={() => {
-                    userAppStore.getFile(item.name);
+                    setPrefix(item.name);
+                    setResource(item);
+                    getStatFile();
+                    setOpenDrawer(true);
+                    setOnce((data: any) => {
+                      // console.log(data);
+                      userAppStore.getList();
+                    });
+                    console.log(item);
                   }}>
                   <div>
                     <FileOutlined />
@@ -126,9 +186,7 @@ export const List = () => {
             })}
           </div>
         </CardPath>
-        <div>
-          <pre>{!isObjectNull(userAppStore.file) && JSON.stringify(userAppStore.file, null, 2)}</pre>
-        </div>
+        <FileDrawerApp />
       </>
     );
   }, [userAppStore.list, userAppStore.path]);