檔案管理網格
檔案/資料夾網格，框選多選、右鍵選單與檢視切換。
模擬桌面檔案管理器的網格面板：檔案卡依副檔名上色，支援單擊選取、cmd/ctrl 多選、在空白處拖曳框選矩形、右鍵開啟自訂操作選單，並可在網格與列表檢視間切換（項目以 layout 動畫平滑重排）。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<FileManagerGrid />
安裝
npx shadcn@latest add https://webberui.com/r/file-manager-grid.json或在 components.json 設定 registries 後，改用 @webberui/file-manager-grid 安裝。
安裝依賴後，從 registry JSON（/r/file-manager-grid.json 的 files[0].content）複製 file-manager-grid.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { FileManagerGrid, type FileItem } from "@/components/ui/file-manager-grid";
const files: FileItem[] = [
{ id: "1", name: "設計稿", kind: "folder" },
{ id: "2", name: "提案簡報.pdf", kind: "pdf", size: "4.2 MB", modified: "今天 11:03" },
];
<FileManagerGrid
files={files}
onOpen={(file) => console.log("開啟", file.name)}
onSelectionChange={(ids) => console.log("已選取", ids)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
files | FileItem[] | — | 要顯示的檔案與資料夾清單 |
defaultView | "grid" | "list" | "grid" | 初始檢視模式 |
onSelectionChange | (ids: string[]) => void | — | 選取集合變更時回呼 |
onOpen | (file: FileItem) => void | — | 雙擊項目或右鍵「開啟」時回呼 |
onDelete | (file: FileItem) => void | — | 右鍵「移至垃圾桶」時回呼 |
className | string | — | 透傳到最外層容器 |
FileItem 欄位：
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
id | string | — | 唯一識別碼，作為選取狀態的 key |
name | string | — | 檔案或資料夾名稱 |
kind | "folder" | "doc" | "pdf" | "img" | "sheet" | "video" | "zip" | — | 檔案種類，決定圖示色系與副檔名籤 |
size | string | — | 檔案大小的顯示字串（例如 "2.4 MB"） |
modified | string | — | 最後修改時間，列表檢視右側顯示 |
可及性
- 檔案區使用
role="listbox"並標記aria-multiselectable，每個項目為role="option"且即時回報aria-selected - 項目可鍵盤聚焦（
tabIndex={0}+ focus ring），Enter/Space切換選取，Escape清除選取並關閉右鍵選單 - 工具列的項目與選取數量以
aria-live="polite"播報，檢視切換按鈕帶aria-pressed與中文aria-label - 使用者系統開啟「減少動態效果」時，檢視切換重排、選取徽章與選單動畫皆改為即時完成