当前设计 · 已实现

文件夹图标直接表达展开状态

文件树不再为每个目录增加独立折叠箭头。目录图标本身负责展开与收起;展开后的竖线从父目录图标中心向下延伸,子项通过短横线接入,形成命令行文件树的父子结构。项目工具栏继续保持既有对齐,不改变搜索、创建、刷新或文件操作。

对象 右侧 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 时,经过该行的竖线与横向连接仍连续可见。
水平空间根级图标中心为 24px,根级名称从 44px 开始;每一级子项可见图标左边缘与父级名称起点一致,每层增加 27px。
右侧操作刷新按钮点击区右缘距离侧栏 16px;240px 下四个操作仍完整。
搜索默认隐藏;展开后左右边界与项目工具栏一致。
主题仅使用现有背景、文字、边框与 hover token,不写死产品色。
实现状态已实现并在默认 18100 的安装版 App 中完成可视验收。