docs(design-system): note the v4 palette, pane, viewer and SFTP chrome

This commit is contained in:
l0ng-ai
2026-09-24 20:43:51 +08:00
parent 39e266b3aa
commit b8e2ecf5d2
+11 -1
View File
@@ -29,7 +29,7 @@
| `Interactions.input_border` | 输入框与普通按钮轮廓 | 对应组件库的 `input` 边框角色,不能误用内容背景色导致边界消失 |
| `Interactions.primary` | 保存、连接等主操作 | 强调色实底,成对配置前景色;hover/pressed 保持标签对比度。Git 提交按钮例外:可提交时用反色中性(正文色底),见 Git 面板 |
| `Surfaces.rail.selected` | 当前标签页 | 中性 selected 阶 + medium;不用强调色,蓝色留给可按的东西 |
| `Interactions.choice` | 菜单、命令面板的键盘当前行 | 强调色浅底,区别于鼠标经过的中性 hover |
| `Interactions.choice` | 菜单的键盘当前行 | 强调色浅底,区别于鼠标经过的中性 hover。命令面板例外:与工作区切换器同用中性 selected 阶 |
| 中性 `secondary` | 面板页签、分段选项、普通按钮 | 次级导航不能与主要操作争夺注意力 |
| `Semantics.danger` | 失败、Git 冲突、破坏性动作 | 红;必须同时有文字/图标/确认语义 |
| `Semantics.warning` | 需要留意的状态 | 琥珀;Git 普通修改只用于尾部标记,不能染黄整个文件树 |
@@ -105,6 +105,16 @@ Git 的新增/修改标记种子为绿 `#2F8A52` / `#4CC27A`、琥珀 `#B7791F`
「机器 · 路径 · 时间」次级文字,右侧标签数 + 状态词。右栏为预览:28px 标题行,
44px 标签页行(18px 品牌头像、分支与增删数全部次级、「当前」字样、工作中 5px 绿点
与侧栏同步闪烁)。当前行只用中性 selected 阶,不用强调色。
- **命令面板**:切换器的同胞浮层——同样的 12px 圆角、浮层阴影、距顶 112px(矮窗口按比例上移),
最宽 600px;搜索行由组件库列表自带(45px,空时右侧 `esc` 键帽),页脚 40px 细线分隔、右侧键帽提示
↑↓ 导航 / ↵ 打开。命令行 32px、圆角 8、列表四周 8px、行内 10px;当前行为中性 selected 阶 + 标题
medium,不用强调色。分组标题 28px、11.5/16rem medium 辅助色、与行文字同列。快捷键逐键 18px 淡底键帽。
- **分屏与文档栏**:分屏分隔线静止时为一个设备像素的 divider 色细线,hover/拖动时变 1px 强调色,
与侧栏、右侧面板的拖拽边一致。文件查看器标题栏 48px:文件名正文字号 medium,未保存 5px 琥珀点,
关闭为 26px / 6px 圆角图标块,下接 divider 细线;底部状态栏 26px、12/16rem 辅助色、行列号等宽数字。
- **SFTP 浏览器**:行与本地文件树一致(26px、圆角 6、16px 图标辅助色、文件名侧栏标题色、大小等宽数字);
编辑框为无边框淡底井(圆角 7);传输进度为正文色细条压在淡底轨道上,失败才转红。
- **面板里的主按钮**(SFTP 确认、添加转发、SSH 断线条的重连):反色中性,同对话框主按钮。
- **对话框**(SSH 认证/主机密钥、新建 worktree):`ui::dialog` 统一外壳,同切换器的 12px 圆角、
浮层阴影与遮罩、距顶 112px;标题行 48px(正文字号 medium,右侧 `esc` 键帽,下接细线),
内容区左右 18px、字段间距 14px;字段名 11.5/16rem medium 辅助色,输入框为无边框 28px