当前设计 · 已实现
文件夹图标直接表达展开状态
文件树不再为每个目录增加独立折叠箭头。目录图标本身负责展开与收起;展开后的竖线从父目录图标中心向下延伸,子项通过短横线接入,形成命令行文件树的父子结构。项目工具栏继续保持既有对齐,不改变搜索、创建、刷新或文件操作。
对象 右侧 Files 文件浏览器
受众 桌面端项目用户
范围 目录展开符号、层级线、水平留白
排除 文件数据、右键菜单、搜索与编辑行为
目标状态
默认 · 288px显示对齐线
搜索展开 · 240px最窄支持宽度
对齐规格
x = 24项目图标、根级目录图标和根级父线共用同一中轴线。
x = 44项目名与根级名称的起点,也是一级子项可见图标的左边缘;图标中心为 51px。
step = 2714px 图标居中在 16px 槽内;下一级缩进 27px 后,可见图标边缘与父级名称精确对齐。
right = 16项目操作按钮和展开搜索框的右内容边界。
组件尺寸
| 区域 | 尺寸 | 处理 |
|---|---|---|
| 顶部折叠区 | 48px;按钮 32px | 保持不变,作为侧栏图标中心基准。 |
| Files 导航 | 32px;外层顶部 8px | 保持现有 ui-list-item 规格。 |
| 项目工具栏 | 40px;内部行 32px | 左右内容边距改为 16px;图标槽改为 16px,图文间距改为 12px。 |
| 操作按钮 | 24 × 24px;间距 4px | 保持现状,只移动整个操作组。 |
| 文件树行 | 26px;16 + 12px | 移除展开槽;目录图标切换开合状态,名称与图标保持 12px 间距。 |
| 层级连接 | 1px;层级步长 27px | 父目录图标中心向下画竖线,子项用 20px 短横线接到自身图标左缘。 |
| 搜索展开 | 项目行下方 36px | 搜索框左右边界与项目工具栏内容边界一致。 |
采用与排除
- 采用:项目工具栏继续复用顶部导航的水平内容结构;项目名保持较小、较粗的上下文标签样式。
- 采用:文件树使用图标与名称两列;根级图标和名称分别与项目工具栏的图标和项目名对齐。
- 采用:每一级子项图标从父级名称起点开始,形成一致的逐级嵌套关系。
- 采用:目录关闭时显示普通文件夹,展开时显示打开文件夹;整行继续作为展开点击区。
- 采用:层级线只出现在已经展开的父子关系中,最后一个子项的竖线停在该行中点;选中、活动和 hover 背景不得遮断层级线。
- 采用:项目行继续使用底部分隔线,不增加卡片背景、阴影或第二个选中面。
- 不采用:为项目名增加展开箭头。当前项目根不可折叠,箭头会表达不存在的操作。
- 不采用:把四个操作平均分布。它们是一个右对齐的操作组,平均分布会削弱项目名与操作的关系。
- 不采用:保留独立箭头、圆点或额外展开按钮;它们会重复表达目录状态。
- 不采用:让父级名称与子级图标左右错开;层级步长由图标槽和名称间距共同决定。
验收与实现状态
| 检查项 | 可见结果 |
|---|---|
| 目录状态 | 文件树中不出现折叠箭头;目录图标的开合状态与实际展开状态一致。 |
| 层级结构 | 展开目录的竖线从父图标中心延伸,所有直接子项均通过短横线连接。 |
| 行状态 | 目录或文件被选中、激活或 hover 时,经过该行的竖线与横向连接仍连续可见。 |
| 水平空间 | 根级图标中心为 24px,根级名称从 44px 开始;每一级子项可见图标左边缘与父级名称起点一致,每层增加 27px。 |
| 右侧操作 | 刷新按钮点击区右缘距离侧栏 16px;240px 下四个操作仍完整。 |
| 搜索 | 默认隐藏;展开后左右边界与项目工具栏一致。 |
| 主题 | 仅使用现有背景、文字、边框与 hover token,不写死产品色。 |
| 实现状态 | 已实现并在默认 18100 的安装版 App 中完成可视验收。 |