记录

资源管理器引导线与缩进布局:对齐、等比网格与紧凑/宽松开关

侧边栏资源管理器(文件树)的引导线一直有几处视觉问题:层级一变深引导线就断、线出现在目录行本身上、缩进层级忽宽忽窄。这篇记录这几轮的排查、修复思路与最终方案,以及新加的”紧凑/宽松资源管理器布局”设置开关。

问题清单

从用户视角看,引导线的问题可以归纳为五类:

  1. 引导线被子目录中断。原本每行只画自己那一层深度的竖线,子目录一展开,父层级的竖线就在子目录行处断掉,树形连接不连续。
  2. 引导线出现在目录行上。云端(带 🔒 的工作区根行)的下拉符号正下方多了一条线:没对准 chevron 的尖端,还压在了锁图标所在的行容器上;分类、记录等目录行的 chevron 前面也各有一条多余的线。
  3. 文件行缩进不统一。记录里的文件行缩进要么太少(和父目录图标挤在一起),要么改完又太多(比同层文件夹多出一大步)。
  4. 层级缩进尺寸不一致。云端→分类这一步是”宽松”(23px),分类→子目录→文件却是”紧凑”(12px),同一个树里两套步距。
  5. 引导线间距与左边框距离不一致。线间距统一了,但最左侧边框到第一条引导线的距离和线间距对不上。

修复思路

1. 祖先层级线:一行画 N-1 条线

把引导线从”每行只画自己层级的线”改成”每行画全部祖先层级的线”:深度为 N 的行显示第 1~N-1 层的竖线,自己层级不画。这样:

  • 子目录展开后,父级竖线从分类一路贯通到文件,不再中断;
  • 目录行(包括云端根行)自身不再有任何引导线,🔒 容器干净了;
  • 每条线都从上一级目录的 chevron 方向垂直延伸下来。

实现上利用 CSS 自定义属性 + 多层 linear-gradient 背景拼出多条竖线,深度 1~5 分别声明 --tree-guide,行内 ::after 统一铺满整行绘制。

2. 等比网格:级别尺寸以引导线为准

最终定下的几何规则只有一条:整个树是一个以 step 为单位的等比网格:

  • 引导线位置:L_N = N × step(第 N 条线距行左边缘 N×step);
  • 行缩进:padding_N = N × step − 8(8px 是 chevron 盒子中心到行左边缘的固定偏移);
  • 于是每层目录的 ▾ 尖端恰好落在自己层级的引导线上,且左边框→第一条线 = 相邻线间距 = 每级缩进。

全部由 CSS 变量 --tree-step 驱动,不用硬编码像素:

.file-tree {
  --tree-step: 16px; /* 宽松默认 */
}

:root[data-tree-indent-layout="compact"] .file-tree {
  --tree-step: 12px; /* 紧凑覆盖 */
}

.file-tree summary,
.file-tree .file-item {
  padding: 0 8px 0 calc((var(--tree-depth, 0) * var(--tree-step, 16px)) - 8px);
}

引导线位置用加法拼出来(calc(var(--tree-step) + var(--tree-step) + …)),避免在 calc 里做乘法,兼容性更稳。

3. 紧凑 / 宽松布局开关

设置页新增”紧凑资源管理器布局”复选框(compactTreeIndent,沿用 data-workbench-setting 机制):

模式step行缩进(chevron 尖端)引导线
宽松(默认)16px8 / 24 / 40 / 5616 / 32 / 48 / 64
紧凑12px4 / 16 / 28 / 4012 / 24 / 36 / 48
  • 默认宽松;勾选后立即切换紧凑并写入 localStorage(ark-workbench-settings);
  • applyWorkbenchSettings() 把模式写到 <html data-tree-indent-layout="compact|loose">,CSS 按属性覆盖 --tree-step;
  • 云端/本地等工作区根行不再特殊处理,同样落在网格上,层级步距全程一致。

验证

用无头 Chrome 逐项量了实际渲染值,两种模式下均满足:

  • 引导线间距:紧凑 12/12/12、宽松 16/16/16;
  • 每级缩进:紧凑 4→16→28→40、宽松 8→24→40→56;
  • 每层 chevron 尖端与对应引导线像素级重合;
  • 设置开关勾选后即时生效并持久化。

涉及文件

  • assets/css/ark-sidebar.7d3ea819.css — 引导线、缩进网格、--tree-step 变量
  • assets/js/ark-core.929b5403.js — 设置默认值与 data-tree-indent-layout 应用
  • assets/js/ark-sync.3353f383.js — 开关读写与重置
  • layouts/_default/settings.html + i18n/zh.yml / i18n/en.yml — 设置项 UI 与文案