feat: 暂存，添加上传文件

2024-10-07 01:53:39 +08:00
parent 272ceaa6a6
commit fd99875461
15 changed files with 788 additions and 0 deletions
--- a/src/pages/file/edit/List.tsx
+++ b/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>
+  );
+};