上手· 02

文件树与选择

一行拆成三个互不干扰的点击区;搜索、类型筛选与「只看已选」覆盖三种找文件的心理模型。

适用于 v0.2.0/约 3 分钟/上手

一行拆成三个点击区

「点错了」是文件树最常被抱怨的事:想展开却勾上了整个目录,想勾选却把树折起来了。 SealPack 的做法是把一行的点击面拆开,各管各的:

区域 点击行为
展开箭头 只展开 / 折叠,不改任何勾选
勾选框 只勾选 / 取消(目录含子级),不折叠
名称 只把焦点移过去,不改勾选;双击才等于「激活」

三个热区互不重叠,也互不代理 —— 点箭头永远不会改变已选清单,点名称永远不会让目录合上。

三条找文件的路径

不同的心理模型对应不同的入口,三条都保留:

  1. 我知道大概在哪 → 直接展开目录看。树默认不过滤,结构完整。
  2. 我知道类型 → 点类型 chip 收敛,例如只看 .dll。
  3. 我知道名字 → 搜索框。命中高亮、祖先自动展开,而且搜索前后会记住并恢复你手工折叠的状态。

勾完再用「只看已选」复核一遍,或点「勾选当前结果」把筛选后可见的文件批量勾上。

文件树:类型筛选、搜索高亮与已选清单
文件树 —— 三个点击区、类型 chip 与搜索
文件树一行的三个热区:展开箭头、勾选框与名称
一行三个热区 —— 点箭头不改勾选,点名称不折叠
折叠目录后底栏的「当前显示」计数
折叠只改变「看得见几个」,底栏要跟着刷新,勾选不动

右侧清单

  • 可筛选、可逐项 × 移除,也可以「全部移除」。
  • 主程序本身不会出现在树里 —— 它不需要被合并进自己。
  • 清单里每一项都带相对路径,粘贴进别的工具时不用再拼一次。

视图变了 ≠ 勾选变了

这是两件事,而且经常被写混:

  • 勾选变了(onChange)要写回工程、触发防抖保存;
  • 视图变了(onView)—— 折叠目录、改筛选条件 —— 只改变「看得见几个」,不该触发落盘。

但底栏「当前显示 N 项」必须跟着视图刷新。这个 bug 真的发生过:折叠目录后底栏数字不动, 用户以为自己折叠失败。所以树导出两个回调,各管一头。

搜索Esc

↑ ↓ 选择 · Enter 打开 · 中英文都能搜