Files 文件管理
带文件夹树、多选、右键菜单与拖入上传的文件管理器
用法
工作区文件
单击选择、双击打开、空格预览、右键打开菜单,可从桌面拖入文件。图中为示例数据,文件不会离开浏览器。
示例加载中...
概述
Tuff 工作区的文件:在设备间同步,另有按宿主真实限额管理的「插件存储」分区。
- 选择:单击选中,⌘ / Ctrl 加选,Shift 连选,方向键按行列移动,Esc 清空;按键挂在文件区上。
- 打开:双击或回车打开;空格快速预览,← / → 切换;F2 重命名;⌫ / Delete 删除,可撤销。
- 右键、Shift + F10 或菜单键打开同一个菜单,键盘打开时锚在当前文件格;把文件格拖到树上的文件夹即可移动。
- 从桌面拖入文件即上传,托盘逐个显示进度;插件文件夹拒绝超出限额(单文件 10 MB、总量 100 MB、1,000 个)或文件名不合规的文件。
- 首次进入视口时从 MacBook 同步两张截图;减少动态效果时截图一开始就在。
- 展开后(≥ 960px)树与格子变大,≥ 1200px 出现预览栏;窄于 640px 时隐藏树,子文件夹以格子出现。
自定义
- 接真实存储时,用上传请求的进度事件替换模拟进度;TxFileUploader 只接收
File,校验放在宿主里,并与真实限额共用同一份常量。 - 文件很多时,网格换成按行分组的虚拟列表,列表视图用 TxDataTable 的受控排序配合服务端分页。
- 跨文件夹搜索的结果作为一个临时虚拟文件夹显示,每项带上所在路径。
- 缩略图来自服务端时,固定格子高度、图片设
draggable="false";object URL 在删除、重置与卸载时统一回收。
相关组件
| 区域 | 组件 | 作用 |
|---|---|---|
| 路径与工具栏 | TxBreadcrumb、TxDropdownMenu、TxIconButton、TxSearchInput、TxFlatRadio、TxButton | 路径、搜索、视图与上传 |
| 文件夹树 | TxTree | 受控展开的树,可拖入移动 |
| 配额 | TxProgressBar、TxStatusBadge | 插件用量与配额条 |
| 网格 | TxIconChip、TxCornerOverlay、TxCheckbox、TxTag | 缩略图、角标与复选框 |
| 列表 | TxDataTable | 共用选择集的可排序列表 |
| 右键菜单 | TxContextMenu / TxContextMenuItem / TxContextMenuDivider / TxContextMenuSubmenu | 文件格与空白处共用的菜单 |
| 拖入上传 | TxFileUploader、TxToastPanel、TxCardItem、TxProgressBar | 投放层与上传进度托盘 |
| 预览 | TxModal、TxMarkdownView、TxImageGallery、TxEmptyState、TxSplitter、TxNoSelection | 快速预览与宽屏预览栏 |
| 批量与反馈 | TxButton、TxToastPanel、TxSearchEmpty | 批量栏、撤销与清除搜索 |
| 移动到… | TxModal、TxTree | 可放入的目标文件夹 |