一 · 动效词汇
01–03 · 承 `01-inkstone-theme.md §7`,这里给每个词汇配上可看的样例呼吸 · 研墨
「呼吸」(2.4s ease-in-out 循环,全局同相)用在所有"在跑"的灯点:折叠头灯点、墨线运行中节点、暂停键光环。「研墨」(1.4s linear 单弧旋转)替代传统 shimmer 骨架,用在准备上下文/正在思考。
呼吸 breath2.4s ease-in-out
全局同相——同一屏里所有"在跑"的灯点必须同步呼吸,不能各自错拍
研墨 grind1.4s linear
替代 shimmer 骨架屏;用在装配上下文、思考中、压缩活动等"准备中"语境
盖印 · 灯沿
「盖印」(160ms spring:scale .88→1,−4°回正)是权限门批准的唯一签名动效,完成后工具行末尾留 17px 小印。「灯沿」(4.8s linear 渐变横移)只用在运行中的石板顶缘,是唯一允许横向移动的光效。
盖印 stamp160ms spring
点击试放 — 权限门唯一批准动效,Enter 键触发同一个动画
灯沿 sheen4.8s linear
运行中的作曲器石板顶缘专属;不用在其它任何卡片或面板上
下描 · 折叠 · t-1..t-4
「下描」(240ms ease-out)是新工具行进入墨线时的入场:线段自上向下描出,节点后到 200ms。「折叠」(240ms ease-out 高度)用于工作折叠、分区展开收起。t-1..t-4(90/150/240/380ms)是承 Deck 的悬停/弹层/抽屉/面板四档节奏,本主题不新增节奏值。
下描 draw240ms + 200ms 延迟
点击试放 — 线段先描出,节点延迟 200ms 后到,不是同时出现
折叠 fold240ms ease-out
点击展开
折叠内容在这里,高度过渡
工作折叠头、探索胶囊、装配胶囊统一用这一个节奏
t-1..t-490/150/240/380ms
悬停 90ms · 弹层 150ms · 抽屉 240ms · 面板 380ms(承 Deck,未新增新节奏)
二 · 组件样例表
04–07 · 每个原件的完整状态集,供实施阶段直接对照按钮四态
Ghost 默认;主按钮 = 朱底 + on-zhu;危险 = 绛字 ghost,确认时绛底。四态:默认/悬停/按下/禁用——禁用统一用 40% 透明度而不是变灰,保留色彩身份。
ghost
primary
danger
icon
印 · 头像 · 芯片
印章(seal):36×36 权限门规格 / 17×17 mini 规格(已批准小印);空印(ghost)用于「否」。头像统一取模型/用户名的首字母,宋体显示。芯片选中态统一朱洗,不用边框粗细区分。
seal
允否
avatar
C你
chip
默认选中
墨线节点六态
贯穿侧栏项目树与转录工具链的同一套节点语言:空心=待、松=成、灯=跑(呼吸)、朱方=等你、青=后台、绛=失败。六种颜色各自只对应一个语义,不跨场景复用。
待
空心圆,静止
成
跑
等你
唯一方形节点
后台
失败
开关 · 输入框
开关统一朱色表示"开",不用绿色(绿/松色留给"完成/新增"语义,避免和"启用"混淆)。输入框统一 6px 圆角 + sh1 内阴影,焦点态外扩 2px 朱色描边(见 §四 可访问性)。
switch
input
三 · 反馈矩阵
08–09 · 四种反馈载体各管一件事,不越界横幅 vs 吐司 vs 门 vs 状态
四种反馈载体在现产品里已经分工明确(Host 重连横幅、错误横幅、Toast 队列、权限门、标题带状态),本主题只换皮不改分工:
| 载体 | 位置 | 触发 | 动作数 | 持续时间 |
|---|---|---|---|---|
| 横幅 Banner | 作曲器/舞台上方常驻条 | 连接问题、信任提示等需要持续关注的状态 | 1–2 个 | 直到状态解除 |
| 吐司 Toast | 右下角堆叠 | 一次性结果通知(保存成功、复习完成等) | 0–1 个 | 数秒自动消失 |
| 门 Gate | 墨线上的印卡 | 需要你决定才能继续(权限、计划执行方式) | 2–4 个 | 直到你决定 |
| 状态 Status | 标题带/侧栏行内联文字 | 背景性的持续状态(运行中/等待批准) | 0 个(纯展示) | 随实际状态变化 |
笔记已保存
选用速查表
增量 6 发现 Live 条与宠物气泡都不走这四种标准载体,是各自独立的浮动/系统窗口反馈——这是刻意的例外(它们需要在应用窗口失焦时依然可见),不是需要收编进统一矩阵的疏漏。
| 如果… | 就用 |
|---|---|
| 用户必须做出选择才能继续 | 门(Gate) |
| 状态会自己变化,只是想让用户知道 | 状态(Status) |
| 一次性动作的结果,几秒后不再重要 | 吐司(Toast) |
| 问题会持续存在直到被解决 | 横幅(Banner) |
| 反馈需要在应用失焦时也可见(语音通话、后台任务) | 独立浮窗(Live 条/宠物气泡),不进四件套 |
四 · 可访问性
10–13 · Deck 已经建立的基线,Inkstone 承接、不倒退焦点环(已达标现状)
检查了
base.css 与全部区域样式文件::focus-visible 统一 2px 朱色(iris)描边 + 2px 偏移,鼠标点击不触发(:focus:not(:focus-visible) 归零),这个约定已经铺满全应用的按钮/输入/链接/树节点。这是需要保留的现状,Inkstone 只需要把描边色从 iris 换成朱色,规则本身不变。| 项目 | 现状 |
|---|---|
全局 :focus-visible 规则 | ✓ 已覆盖 base.css + 30+ 区域样式文件 |
| 鼠标点击不触发描边 | ✓ :focus:not(:focus-visible) |
| Inkstone 需要做的 | 把描边色从 --iris 换成 --zhu,规则结构不变 |
动效降级(已达标现状)
检查了全部 CSS 文件:
prefers-reduced-motion:reduce 覆盖了几乎每一处 @keyframes 动画(呼吸/研墨/灯沿/撕卡/分区展开等),策略统一是"氛围性循环动画归零,保留静态实色状态"(base.css 注释原话)。这是需要保留的现状。| 项目 | 现状 |
|---|---|
prefers-reduced-motion 覆盖率 | ✓ 30+ 样式文件各自声明覆盖 |
| 降级策略 | ✓ 循环动画归零,保留状态颜色/文字,不是全局禁用动效 |
| Inkstone 需要做的 | 新增的呼吸/研墨/灯沿/盖印/下描全部沿用同一策略,盖印可退化为淡入 |
播报角色(已达标现状)
检查了转录、终端、侧聊、笔记、用量、归档等几十处异步反馈:
role="status"/role="alert"/aria-live="polite" 的使用已经相当系统——运行中状态用 status+polite,错误用 alert,长流式内容(转录、侧聊、PTY 输出)用 role="log"+polite。这是需要保留的现状,新增的组件(作曲器七态、检视器十页签、宠物气泡等)延用同一套角色分配规则。| 场景 | 角色 |
|---|---|
| 运行中/加载中状态 | role="status" + aria-live="polite" |
| 错误/失败 | role="alert" |
| 持续追加的流式内容(转录/终端/侧聊) | role="log" + aria-live="polite" |
双语排版细则
中文优先,路径/命令/标识符保持原文;数字等宽(tabular-nums)用在 token 计数、时长、行号、计数器;宋体只用于显示级标题、空态、对话框标题——正文与控件始终无衬线,避免中西文混排时衬线体在小字号下的可读性问题。
正文用无衬线:把作曲器运行中的 Enter 改成排队
显示级标题用宋体:继续上次
五 · Token 映射
14–15 · 完整映射见 `01-inkstone-theme.md §11`,这里做总览与一处历史修正语义色板总览
六个语义色 + 石板签名色,纸/墨双面共 14 个核心变量,完整定义见增量 0 的
01-inkstone-theme.md §3;Deck→Inkstone 的对应关系见该文档 §11(Iris→朱、Ember→灯、Mint→松、Amber 拆分为朱/赭、Coral→绛、Sky→青)。这里只做视觉总览,不重复定义。朱 zhu
灯 lamp
松 pine
赭 ochre
绛 crimson
青 azure
石板 slab
本增量修正的一处历史数字
修正:`01-inkstone-theme.md §5` 写的「检视器 304(240–720 可拖)」与增量 4 核实的真实实现(默认 280px,可拖 200–1600px)不一致——这处数字在增量 0 主题规范定稿时就沿用了旧文档的说法,一直没有随增量 4 的调研更新。本增量在这里正式标注,`01-inkstone-theme.md` 后续应同步改成 280 / 200–1600。
theme.md §5 写:304(240–720)实际:默认 280(200–1600)
六 · 实施切片建议
16–18 · 给负责人一份可执行的落地顺序,收官七个增量切片顺序与包归属
按 AGENTS.md §4 的包所有权对照表,把七个增量的视觉改动映射到真实要改的文件/包,建议的实施顺序遵循"底层 token 先行、外围面板收尾":
| 顺序 | 切片 | 涉及包/文件 | 依据增量 |
|---|---|---|---|
| 1 | token 与基础件 | apps/desktop/src/styles/tokens.css + 主题变量表 | 0 |
| 2 | 外壳骨架 | 标题带/侧栏/deck 布局 CSS | 0, 3 |
| 3 | 转录行与工具链 | tool-call-card.tsx 等换皮,逻辑不动 | 1 |
| 4 | 权限门 | gate-card.tsx + permission-bar.tsx 合并展示 | 1 |
| 5 | 作曲器 | composer-card.tsx 及其子组件换皮 | 2 |
| 6 | 导航与入口 | 侧栏/命令面板/多窗格 | 3 |
| 7 | 检视器 | 10 个页签逐个换皮 | 4 |
| 8 | 设置 | 13 节逐个换皮,优先处理孤儿代码清理 | 5 |
| 9 | 子页与伴随物 | 知识卡片工作台/资料库/宠物/Live | 6 |
孤儿代码处置建议
七个增量累计发现的孤儿代码与断链有十余处(完整清单分散在各增量说明的"孤儿代码"章节)。视觉重做不应该背着这些包袱走——建议在动手换皮前,先让负责人对每一项做一次"删除 / 补入口 / 保留观察"的三选一决定,避免重设计完成后这些死代码继续占用维护成本。
| 类别 | 代表项 | 建议动作 |
|---|---|---|
| 纯孤儿组件 | RememberedPermissionsSection、HostLogPanel、4 个旧设置页面 | 确认后直接删除,减少认知负担 |
| 断链 | produce-stage.tsx 复习会话回调硬编码 undefined | 补一行接线即可修复,成本很低 |
| 已被收编 | /knowledge 等 5 个入口合并到同一目的地 | 视为既成事实,考虑精简重复的 slash 命令 |
| 未接线的设计意图 | 并排差异视图、MCP 测试连接、可视化规则编辑器 | 纳入本轮或下一轮实施范围,而非继续搁置 |
七个增量收尾总览
Inkstone 重设计的七个增量到此全部交付:外壳、转录、作曲器、导航、检视器、设置、子页——覆盖了
00-scope-inventory.md 盘点出的全部产品面。每个增量都独立可看、独立可确认;本增量把动效词汇、组件规范、反馈矩阵、可访问性基线、token 映射与实施顺序汇总成一份收尾文档,供负责人在批准视觉方向后直接转给实施团队使用。| 增量 | 主题 | 状态 |
|---|---|---|
| 0 | 外壳原型 | 已交付 |
| 1 | 转录全解剖 | 已交付 |
| 2 | 作曲器全状态 | 已交付 |
| 3 | 导航与入口 | 已交付 |
| 4 | 检视器 | 已交付 |
| 5 | 设置 | 已交付 |
| 6 | 子页与伴随物 | 已交付 |
| 7 | 动效与组件规范 | 本增量 |