组件/Files 文件管理

Files 文件管理

带文件夹树、多选、右键菜单与拖入上传的文件管理器

自 0.6.0BETA

当前组件文档正在开发中

该页面正在持续迁移,示例与 API 可能会继续调整。

用法

工作区文件

单击选择、双击打开、空格预览、右键打开菜单,可从桌面拖入文件。图中为示例数据,文件不会离开浏览器。

示例加载中...

概述

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可放入的目标文件夹