From 9431d0459f6c131446deb99eb238af5619e74e1f Mon Sep 17 00:00:00 2001
From: shiyu <im@shiyu.dev>
Date: Fri, 29 Aug 2025 13:00:24 +0800
Subject: [PATCH] refactor: Remove unused props from GridView component and
 clean up related code

---
 .../FileExplorerPage/FileExplorerPage.tsx     |  2 -
 .../FileExplorerPage/components/GridView.tsx  | 47 +++++++------------
 2 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/web/src/pages/FileExplorerPage/FileExplorerPage.tsx b/web/src/pages/FileExplorerPage/FileExplorerPage.tsx
index af8addf..f4d52e4 100644
--- a/web/src/pages/FileExplorerPage/FileExplorerPage.tsx
+++ b/web/src/pages/FileExplorerPage/FileExplorerPage.tsx
@@ -121,8 +121,6 @@ const FileExplorerPage = memo(function FileExplorerPage() {
             onSelectRange={handleSelectRange}
             onOpen={handleOpenEntry}
             onContextMenu={openContextMenu}
-            onCreateDir={() => setCreatingDir(true)}
-            onGoUp={goUp}
           />
         ) : (
           <FileListView
diff --git a/web/src/pages/FileExplorerPage/components/GridView.tsx b/web/src/pages/FileExplorerPage/components/GridView.tsx
index ecf3eb3..775db75 100644
--- a/web/src/pages/FileExplorerPage/components/GridView.tsx
+++ b/web/src/pages/FileExplorerPage/components/GridView.tsx
@@ -7,20 +7,14 @@ import { EmptyState } from './EmptyState';
 
 interface Props {
   entries: VfsEntry[];
-  thumbs: Record<string,string>;
-  // ...existing code...
-  // selected was single entry before; now use selectedEntries for multi-select
+  thumbs: Record<string, string>;
   selectedEntries: string[];
   loading: boolean;
   path: string;
-  // onSelect: clicked entry, additive indicates Ctrl/Cmd click to toggle
   onSelect: (e: VfsEntry, additive?: boolean) => void;
-  // onSelectRange: called when marquee/selecting multiple by box
   onSelectRange: (names: string[]) => void;
   onOpen: (e: VfsEntry) => void;
   onContextMenu: (e: React.MouseEvent, entry: VfsEntry) => void;
-  onCreateDir: () => void;
-  onGoUp: () => void;
 }
 
 const formatSize = (size: number) => {
@@ -30,14 +24,12 @@ const formatSize = (size: number) => {
   return (size / 1024 / 1024 / 1024).toFixed(1) + ' GB';
 };
 
-export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, loading, path, onSelect, onSelectRange, onOpen, onContextMenu, onCreateDir, onGoUp }) => {
+export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, loading, path, onSelect, onSelectRange, onOpen, onContextMenu }) => {
   const { token } = theme.useToken();
-
-  // refs for marquee selection
   const containerRef = useRef<HTMLDivElement | null>(null);
   const itemRefs = useRef<Record<string, HTMLDivElement | null>>({});
-  const startRef = useRef<{x:number,y:number} | null>(null);
-  const [rect, setRect] = useState<{left:number,top:number,width:number,height:number} | null>(null);
+  const startRef = useRef<{ x: number, y: number } | null>(null);
+  const [rect, setRect] = useState<{ left: number, top: number, width: number, height: number } | null>(null);
   const [selecting, setSelecting] = useState(false);
 
   useEffect(() => {
@@ -52,12 +44,11 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, lo
       const height = Math.abs(cy - s.y);
       setRect({ left, top, width, height });
     };
-    const onUp = () => { // 不需要 MouseEvent 参数，避免未使用警告
+    const onUp = () => {
       if (!startRef.current) return;
       setSelecting(false);
       const r = rect;
       if (r) {
-        // compute intersecting items
         const container = containerRef.current;
         if (container) {
           const sel: string[] = [];
@@ -89,17 +80,14 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, lo
   }, [selecting, rect, entries, onSelectRange]);
 
   const handleMouseDown = (e: React.MouseEvent) => {
-    // only left button and not on an item actionable element
     if (e.button !== 0) return;
-    // start marquee if click on empty space inside container
     const target = e.target as HTMLElement;
     if (target.closest('.fx-grid-item')) {
-      return; // clicks on item handled separately
+      return;
     }
     startRef.current = { x: e.clientX, y: e.clientY };
     setSelecting(true);
     setRect({ left: e.clientX, top: e.clientY, width: 0, height: 0 });
-    // prevent text selection
     e.preventDefault();
   };
 
@@ -108,29 +96,28 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, lo
       {entries.map(ent => {
         const isImg = thumbs[ent.name];
         const ext = ent.name.split('.').pop()?.toLowerCase();
-        const isPictureType = ['png','jpg','jpeg','gif','webp','svg'].includes(ext || '');
+        const isPictureType = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(ext || '');
         const isSelected = selectedEntries.includes(ent.name);
         return (
           <div
             key={ent.name}
-            ref={(el) => { itemRefs.current[ent.name] = el; }} // 确保函数不返回值，匹配 Ref 类型
-            className={['fx-grid-item', isSelected ? 'selected' : '', ent.is_dir? 'dir':'file'].join(' ')}
+            ref={(el) => { itemRefs.current[ent.name] = el; }}
+            className={['fx-grid-item', isSelected ? 'selected' : '', ent.is_dir ? 'dir' : 'file'].join(' ')}
             onClick={(ev) => {
-              // click selection: support ctrl/cmd to toggle
               const additive = ev.ctrlKey || ev.metaKey;
               onSelect(ent, additive);
             }}
             onDoubleClick={() => onOpen(ent)}
-            onContextMenu={(e)=> onContextMenu(e, ent)}
-            style={{ userSelect:'none' }}
+            onContextMenu={(e) => onContextMenu(e, ent)}
+            style={{ userSelect: 'none' }}
           >
             <div className="thumb" style={{ background: ent.is_dir ? 'linear-gradient(#fafafa,#f2f2f2)' : '#fff' }}>
-              {ent.is_dir && <FolderFilled style={{ fontSize:32, color: token.colorPrimary }} />}
-              {!ent.is_dir && (isImg ? <img src={isImg} alt={ent.name} style={{ maxWidth:'100%', maxHeight:'100%'}} /> : isPictureType ? <PictureOutlined style={{ fontSize:32, color:'#8c8c8c' }} /> : getFileIcon(ent.name,32))}
+              {ent.is_dir && <FolderFilled style={{ fontSize: 32, color: token.colorPrimary }} />}
+              {!ent.is_dir && (isImg ? <img src={isImg} alt={ent.name} style={{ maxWidth: '100%', maxHeight: '100%' }} /> : isPictureType ? <PictureOutlined style={{ fontSize: 32, color: '#8c8c8c' }} /> : getFileIcon(ent.name, 32))}
               {ent.type === 'mount' && <span className="badge">M</span>}
             </div>
-            <Tooltip title={ent.name}><div className="name ellipsis" style={{ userSelect:'none' }}>{ent.name}</div></Tooltip>
-            <div className="meta ellipsis" style={{ fontSize:11, color: token.colorTextSecondary, userSelect:'none' }}>{ent.is_dir ? '目录' : formatSize(ent.size)}</div>
+            <Tooltip title={ent.name}><div className="name ellipsis" style={{ userSelect: 'none' }}>{ent.name}</div></Tooltip>
+            <div className="meta ellipsis" style={{ fontSize: 11, color: token.colorTextSecondary, userSelect: 'none' }}>{ent.is_dir ? '目录' : formatSize(ent.size)}</div>
           </div>
         )
       })}
@@ -148,8 +135,8 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, lo
           }}
         />
       )}
-      {loading && <div style={{ width:'100%', textAlign:'center', padding:40 }}><Spin /></div>}
-      {!loading && entries.length === 0 && <EmptyState isRoot={path==='/' } onCreateDir={onCreateDir} onGoUp={onGoUp} />}
+      {loading && <div style={{ width: '100%', textAlign: 'center', padding: 40 }}><Spin /></div>}
+      {!loading && entries.length === 0 && <EmptyState isRoot={path === '/'} />}
     </div>
   );
 };