Skip to content

UX-2 走查后续:引导动效 / App 图标 + 控制台首页降噪 - #121

Merged
Windsander merged 21 commits into
mainfrom
feat/ux2-simplify
Oct 15, 2026
Merged

Windsander merged 21 commits into
mainfrom
feat/ux2-simplify

Conversation

@Windsander

Copy link
Copy Markdown
Owner

承接 #120(14:20 已合入 main)之后的分支增量——用户当晚真机走查连续迭代:

引导页精修

  • 去「欢迎回来」变体:重启向导永远回引导首页;按钮统一「开始部署」(28bc3f3)
  • 修「点开始部署冻屏直跳完成」真 bug + 向导模块级缓存回潮加固 (55ec742)
  • 开场动画(品牌 FLIP 滑到顶部 + 卡片展开)+ 部署卡片去运维化 (727353b)
  • 收尾「同框变身」:卡片动画收束为「已就绪」本身,单卡单完成词 (75994f7)

App 图标

  • 网页版 favicon 的 ✦ 同源:dock.setIcon + 窗口 icon + electron-builder icon (6500a45 / 721d97b)

控制台首页降噪

  • 图例默认收起(去首访自动展开);中央空态遮罩下线——只有本机时星图保持干净 (2d3451e)

验证

  • 真机走查逐项验收(三态 / 动画 / 图标 / 降噪)
  • e2e 16/16 · jest 1158/1158 · smoke 16 · lint ✓ · E1 ✓

用户走查:「一点接入怎么就在 item 下新出现一行了?这感觉怪怪的」——
过渡消息(正在接入…)和重载提醒都以新行出现,布局跳变。

按设计稿本意改为行内原地反馈:
- 点击接入/验证:按钮原地「写入中…/验证中…」(状态列同词),无新行
- 成功:状态列原地翻「已接入 ✓」;重载提醒收成行内小字(.ast-hint),
  确认按钮「我已重载,验证」原位 —— 整行不增高、不出新行
- 仅失败/待生效指引才给原因行(异常值得空间):接入失败 + 原因 / 验证未过 + 步骤

断言(新增行内反馈契约 + 强度不降):行模板无独立 data-asst-hint 行、
处理器无「正在接入…」过渡行、失败仍写 rowFailed。
desktop 测试 ✓ 187/187(含新增 2 例)。
用户真机走查:「整个引导界面在闪烁」「不够整洁、按钮元素混乱」,并给出
清标记重走的复现路径(已按其指引清 ~/.mebular 完成标记辅助定位)。

闪烁治理(去并发动效 + 去合成闪烁源):
- hero 品牌标去呼吸动画(静态辉光)——一个界面只留一个呼吸点
- 唯一呼吸点 = 当前节点 pip:放慢 1.6s → 2.8s、阴影减弱
- 面板去 backdrop-filter(Electron/macOS 在动画 canvas 上的已知合成闪烁源;
  底色提至 0.88 不透明,观感不降)
- 星野明灭幅度收窄(0.35±0.30 → 0.5±0.15)+ 周期放慢(0.9s → 2.2s)

完成段收纳(设计稿语义):
- ①/② 一旦 done 即收成回顾行(「✓ 已就绪 · 常驻已装 · 开机自启」+ 展开 ›),
  不再拖着正文与「高级」折叠占屏;点击可再展开

口径修正:
- ②「检测到 N 个已装助手」改用**已装数**(原用全部客户端数:真机 8 个登记
  只显示 4 行 → 「8 个已装」误导);且与状态投影同一规则(state 优先,
  manual 条目也算已装)——文案与列表逐行一致

断言(新增闪烁治理契约 + 口径矩阵,190/190):品牌标无动画 / pip 2.8s /
无 backdrop-filter: blur / 星野幅度;已装数文案(含旧载荷回退与空态);
done 即收纳。jest 1142/1142 · smoke 16 · lint 0 错。
用户走查:「『其他助手』行太干扰」「开始那段怎么还有展开和高级?这些不应该是
自动保证的吗?」——对,恢复入口不该是用户的日常负担。

- 内置兜底「其他 AI 助手(复制片段)」(state=manual)不进向导②(归设置处理);
  已装数同步排除 manual(文案与可见行逐行一致:真机 3 行 ↔「检测到 3 个已装」)
- 完成即终态单行:去掉「(再看一遍 ›)」「展开 ›」chevron 与全部展开交互——
  ①/② done 后就是一行状态;守护/配置异常时视图自动回到操作态并给恢复入口
  (「高级 · 出问题了?」只在该态可见,不再是常驻控件)
- 日志折条不常驻:① 就绪即隐藏「诊断与日志」(异常待办时才出现并自动展开一次)

断言 194/194(新增:无展开入口/userExpanded 退场、manual 过滤、日志折条规则);
jest 1146/1146 · smoke 16 · lint ✓ · E1 ✓。
用户走查:「左侧那个蓝条是干嘛用的?感觉很奇怪」+ 提议加载 UI 设计技能系统过一遍
(frontend-design 已加载评审)。

按「把胆量花在一处、其余克制 / 少一件配饰」:
- 删「当前步」蓝左边框(.step.is-current 原用 --accent #56b4e9,与整页 CRT 绿系
  不同调):当前步信号交给**呼吸绿点 + 面板提亮**(已有两个,第三个是多余配饰)
- 里程碑轨道线降为耳语级(顶部对齐节点、底部 26% 渐隐、alpha 0.38→0.14)——
  两个节点灯轻轻相连,不抢戏
- 流水「进行中」蓝点统一回绿系(--crt),调色板归一
- 注脚去防御性说明:「(可在 设置 → AI 助手 验证)」拿掉(失败路径本来就行内自现)

断言更新(设计驱动):W-1③ 静态契约改为「无 border-left + 呼吸 pip + 面板提亮」,
强度不降;jest 1146/1146 · smoke 16 · lint ✓ · E1 ✓。
真机截图复核:② 面板左侧只剩柔和绿边、当前步=呼吸点。
用户走查三条:
1) 「圆圈和线条有些错位,线条应该从中心穿过去」——pip 是 content-box
   (13px + 1px 边框 ×2 = 15px),圆心在 10.5px,线心在 9.5px,偏 1px。
   修:全局 *,*::before,*::after { box-sizing: border-box } + 线起点对齐圆心
2) 「已完成、先不接 这些按钮有必要吗?(这里看上去很乱)」——全接齐后
   「已完成」是多余仪式。修:**全部已装接入 → 自动完成(autoAck)**,
   不需要任何按钮;未接齐时唯一出口 =「先不接 ›」(安静 ghost);
   没接齐不自动翻段(防误判)
3) 「开始前的对勾是不是没必要?已就绪已经有对勾了」——h2 前置对勾退场
   (✓ 由回顾行「✓ 已就绪」承载;.step-check 元素与样式删除)

连带:② 文案「都接好了点「已完成」」→「都接上后自动完成」;底部 hint 退场。
断言:⑥ 重写为自动完成语义(全接齐 autoAck / 未接齐不翻段 / start 未完成拦住),
静态契约(无 btn-seg2-done / 无 step-check)不减弱;e2e 流程跟进
(未接齐 → 先不接 › → 完成态);顺修 harness 两处(残留旧按钮点击、
守护清理按端口杀防泄漏)。jest 1146/1146 · smoke 16 · lint ✓ · E1 ✓ · 沙箱真跑 13/13。
用户:「应该是一键启动:点一键部署后 12 都自动化运行,展示启动过程」。

- 流水 4 步:启动守护 → 写入设置 → 重启恢复 → **接入 AI 助手(自动)**;
  导航文案改「一键完成:启动 Mebular、接上你已装的 AI 助手。」
- connect 子步:autoConnectAll 逐个接入已装未接的助手(行内实时翻状态;
  失败非阻断——失败行保留「重试」,其余全自动);接入成功挂重载提醒(提示层)
- ② 面板在流水/自动接入期间是**过程展示**(无按钮);重开向导自动续跑接入
  (一次/会话,防循环)——完整路径只剩两次点击:一键开始 / 进入控制台 ✦
- 全接齐 → autoAck 自动完成(上轮已落);文案同步简化
  (② 只报「检测到 N 个已装助手(已接入 M 个)。」)

断言 +3(四步子步/autoConnectAll/被动行/续跑守卫),既有不减弱;
e2e 升级:hermes 影子桩(自动接入会真跑 CLI——桩只写沙箱、直连 url 形态过判据,
真实 ~/.hermes 未被触碰)+ 全自动链路断言 14/14。
jest 1149/1149 · smoke 16 · lint ✓ · E1 ✓。
用户走查:「引导框没有居中」「过程过于快速」「星星似乎也不闪烁了」

- 居中:节点灯占 34px 左侧挂点 → 卡片整体右偏 17px;.rail 左移半幅补偿
- 过程可见性:每个子步最小停留 ≥900ms + 汇总行停留 1.5s 再进完成态——
  一键启动要看得到过程,不是闪现
- 星野呼吸还原:0.5±0.15/2.2s(收得过狠,几乎察觉不到)→ 0.4±0.28/1.6s
  的可见呼吸;「整页闪烁」的根因(backdrop-filter 合成)已单独治理,两回事

断言:居中补偿/最小停留/呼吸参数三条更新,jest 1151/1151 · e2e 14/14 · smoke 16 · lint ✓
用户走查「重头跑」暴露的真 bug + 三条体验修:

- **rollbackClient 真 bug**:旧实现取「最新备份」为回滚目标——连续连接/多次回滚的
  安全备份本身已含 mebular → 回滚实为无操作(真机回滚两次都没断开)。
  修:候选按新→旧扫描,取**最新一个不含 mebular 条目**的备份 = 真正的接入前快照;
  全含则走摘除路径(removed:true)。新增回归 2 例(备份链含陷阱 + 摘除路径)
- 居中:节点灯 34px 左侧挂点使卡片右偏 17px → .rail 左移半幅补偿
- 节奏:流水每子步最小停留 ≥900ms + 汇总行停留 1.5s 再进完成态(过程要看得到)
- 星野:呼吸还原 0.4±0.28/1.6s(上轮收得过狠几乎不可见;整页闪烁根因早已
  由去 backdrop-filter 单独治理)

jest 264/264(mcp+desktop+console)· e2e 14/14 · smoke 16 · lint ✓
上一提交的 backupHasMebularEntry 自建 yamlHasKey 判据在真机 hermes 配置上
漏报(条目存在但判为干净)→ 回滚仍选到含项快照。改为直接复用 landingState
(present ∪ staleStdio ∪ legacyShape,与 /admin/api/clients 探针同一函数)——
json/yaml/dsh/legacy 键位全覆盖,两处判据永远同源。真机复验:hermes 回滚后
状态 not-connected ✓。mcp 回归 10/10。
用户走查:「第二步怎么还有 接入/先不接 按钮?自动化情况下不应该提供按钮」。

- ② 改为**纯过程展示,任何状态零按钮**:未接的由「一键开始」自动接入;
  失败只给一行原因(+「可在 设置 → AI 助手 重试」);「先不接」出口整删
- 确认收尾:用户点过「一键开始」= 对 ② 的显式确认——流水尾部统一 ack
  (含个别失败项:原因照实展示,修复归设置);删重开自动续跑(模型回归「点一次」)
- 可达性:① 折叠改为「完成才折叠」——① done 但 ② 未 ack 时保持展开,
  「一键开始」始终是唯一且可达的动作入口
- 居中补偿修正:margin -17px 使 rail auto 宽度反撑 +17 → 卡片仍右偏 9px;
  改为 margin: 0 17px 0 -17px(左移+右收同幅),卡片与舞台同轴
- 星野:实测 canvas 两帧像素不同(在动)——参数维持可见呼吸 0.4±0.28/1.6s

断言:零按钮(无 data-asst-act/无 seg2 按钮/文案指引/失败原因行/流水尾 ack/
完成才折叠)全部落地,jest 199/199+全量 1155 · e2e 14/14 · smoke 16 · lint ✓ · E1 ✓。
用户确认:调整对象是**引导页**的星星(apps/desktop/src/renderer/wizard.js 的 #sky),
星图(console starfield/stars/nebula)零改动(diff 为空,红线未碰)。

- 闪烁感根因:此前全星同频(仅相位差)→ 整体像同步呼吸,肉眼像「不动」;
  改为每颗星独立频率因子(0.55~1.45 倍速,基准 1.6s)→ 错落、明显的星空闪烁
- 修 a194cc4 带入的 lint 残留(测试未用变量)
- jest 199/199(desktop+console)· 全量 1153 · smoke 16 · lint ✓ · E1 ✓
用户三轮走查的最终定稿(三态):
1. **初始**:全屏水平垂直居中——只有「✦ MEBULAR + 点一下,接入设备 + 自动部署」,
   无滚动条、无隐藏日志、无徽章/高级/常驻等一切附加元素
2. **部署**:标题上浮至顶,出现**阶段框**(四步流水 + 旁白;接入过程一次只报当前一个,
   同一信息通道,不再堆子行清单)
3. **完成**:阶段框收为**简述**(四步全 ✓ 的部署回顾)+「已就绪 ✦ / 进入控制台 ✦」按钮卡;
   运维入口与开机自启行退回设置/控制台

过程修复(真 bug 两个):
- **flow 未定义**:前期编辑误删模块级 flow 对象 → runFlow/轮询全线 ReferenceError
  (页面看似静止)——已恢复并全 e2e 复验
- **file:// 缓存回潮**:启动路径 wizardFileUrl() 未带缓存破坏参数(托盘路径有),
  Electron 复用旧 HTML → 「旧版向导复活」(用户走查实锤)——启动改走 wizardViewUrl()

配套:日志折条只在「部署中真失败/引导态」出现;阶段框完成态收起动作行/状态行/高级折叠;
手动测试探针(file:// CORS 虚警排查)确认初始态 657=657 无滚动条。

门禁:jest 1153/1153 · 沙箱 e2e 14/14(三态全链路)· smoke 16 · lint ✓ · E1 ✓。
用户走查实锤:完成过的机器上点托盘「重启向导」→ 直接进「欢迎回来」——
把引导首页(含开始部署按钮)整个吃掉了,他以为按钮丢了。

修正(用户原话:重启向导应该显示引导首页):
- **删除 is-existing/欢迎回来 变体**:外开向导一律回到引导首页(重启=从头走,部署幂等)
- 三态裁决重排:`deployView = flow.running || (!complete && (everRan || grace))` /
  `doneView = !deployView && complete && everRan` / 其余 idle——
  **完成简述只在「本次会话刚完成且没在跑」时呈现**;已完工机器重复点「开始部署」
  也会完整走一遍四步动画,而不是被简述抢跑
- 简述闸门从裸 `complete` 改为 `doneView`(状态行/动作行/运维入口/自启行/旁白清空)
- 按钮名统一为「开始部署」(HTML/视图 copy/测试),清掉 #btn-enter-console-2 死代码

门禁:e2e 14/14 · jest 1153/1153 · smoke 16 · lint ✓ · E1 ✓。
用户走查实锤:点「开始部署」后屏幕毫无反应——流水(真实接入了 3 个助手!)
在看不见的面板里跑完,直到收尾 refresh 才蹦出完成态。

根因(真 bug):
- setInterval 轮询带旧两卡时代的 `if (!flow.running)` 守卫 → 跑流水期间整个跳过;
  而「阶段框出现」由 renderState(refresh 内)驱动,runFlow 只直接改子步骤圆点,
  面板显隐无人翻 → 点击后画面冻结在初始页,屏幕一路无事直到 finally
- 修复:runFlow 开场立即 refresh(本帧上屏)+ 3s 轮询取消守卫;
  deploy 中 tagline 改「正在部署…」;日志折条改失败/引导态才出现(健康部署中不再挂)

同类事故加固:
- loadWizardView():打开向导前 clearCache——file:// 下 ESM 模块(wizard.js/
  wizard-view.mjs)也进磁盘缓存,页级 ?t= 防不住旧模块回落

验证:e2e 15/15(新增 C2b:点击后 1.2s 内阶段框可见+按钮退场+未跳完成;
D 重启加连续偏离判定,诊断证明无导航事件);jest 1154/1154 · smoke 16 · lint ✓ · E1 ✓。
1. 开场动画(用户定稿手势):「开始部署」点击后,品牌区从居中 FLIP 滑移到顶部,
   部署卡片随后淡入展开(420ms;prefers-reduced-motion 直达不动画)
2. 部署卡片去运维化(用户原话:用户不可能会去点的):
   - 「高级 · 出问题了?」(重启守护/仅启动守护)整块下线——入口归托盘菜单
   - 「让 Mebular 常驻」持久化行整行下线——入口归托盘/设置
   - 视图模型同步移除 install/restart/startOnly 动作(无消费方);临时运行徽章保留
3. e2e 对齐:B 检查改「部署卡片精简」(无持久化按钮/无运维折叠);D 检查改直调
   等价 IPC(按钮已下线);C 循环加现场诊断(防抖动误报取证)

验证:e2e 15/15 ×2 · jest 1154/1154 · smoke 16 · lint ✓ · E1 ✓。
用户反馈:「已完成」与「已就绪」两个完成词打架。修正:删除「✓ 已完成」精简条,
将「已就绪 ✦ + 提醒 + 进入控制台」内嵌为部署卡片的变身内容——全程一张卡、
一个终态词(部署内容 #deploy-flow 与变身内容 #complete-cta 同框互斥)。

动效:完成 → 部署内容 150ms 退场 → 卡片高度 300ms 收束 → 已就绪内容 160ms 后
淡入上移入场;reduced-motion 直达;每次完成播放一次(runFlow 重置可重播)。

验证:e2e 16/16(E2b 同框变身断言)· jest 1156/1156 · smoke 16 · lint ✓ · E1 ✓。
问题:桌面 App 从未配置图标——打包配置无 icon 字段(打包后是 Electron 默认图标),
开发态 Dock 也是 Electron 图标。

修正:
- 新增 apps/desktop/resources/icon.png(1024 主图)+ icon.svg(矢量源,可再生成):
  深底圆角 + 薄荷绿 ✦ 辉光,与网页版 favicon / 控制台品牌星同源
- electron-builder.yml:icon: resources/icon.png(自动派生 icns/ico)
- main:macOS app.dock.setIcon(开发态裸跑也显示品牌图标);
  BrowserWindow icon(Windows/Linux 窗口图标;macOS 走 Dock/bundle)

验证:jest 1157/1157(图标契约:dock.setIcon / 窗口 icon / yml 字段 / PNG 魔数 / SVG 源)·
smoke 16 · lint ✓ · E1 ✓ · e2e 16/16。
1. 图例:默认收起(去掉首访自动展开 7s 后收纳的计时器——App 里显得多余);
   用户手动展开后仍尊重其选择(localStorage);index.html 静态默认 is-collapsed
   避免首帧闪开
2. 中央空态遮罩:删除(只有本机时不再往星图中心盖一段说明文字——本机信标即
   视图本体);引导入口归顶栏「+ 连接已有地址 / + 邀请新设备」
   (element/renderEmptyState/CSS 全链路移除;interaction-draft 空态节同步)

验证:jest 1158/1158 · smoke 16 · lint ✓ · E1 ✓;真机 CDP 复核
(legendCollapsed=true / emptyStateExists=false)。
1. Dock 图标「比其它 App 大一圈」修复:内容从满幅 1024 改为 macOS 官方图标网格
   824×824 居中(四周各 100px 透明边距),与其他 App 视觉等大;icon.svg 同步
2. 菜单栏小图标(用户定稿:白色背景星星镂空):彩色状态点 → 品牌 ✦ 星章——
   黑色+透明源 + macOS 模板图(深色菜单栏自动渲染为白底镂空星、浅色菜单栏为黑底
   镂空星,两种外观都保持品牌与可读性);18pt + @2x 载荷(addRepresentation);
   运行状态语义移入 tooltip 与托盘菜单(图标不再分色)

验证:jest 1158/1158 · smoke 16 · lint ✓ · E1 ✓。
1. 交通灯与顶栏内容不在一条线:查 Electron 源码(WindowButtonsProxy),hiddenInset
   默认 margin (12,11) 是 Electron ≤12 的旧布局(比官方 App 偏高,灯心 ≈19);
   顶栏 56px → 内容中线 28。改用 trafficLightPosition { x:12, y:20 }(y = 按钮
   frame 顶距窗口顶,frame 高 14~16 → 灯心 ≈27~28)与内容严格同线
2. 三个操作按钮「大小感觉不一致」:实测几何全同(35px/同字号/同内距),不一致感来自
   行内布局的字形度量(⚙ 小而 + 大、基线漂移)。改为 flex 居中 + 固定高 34px +
   统一 15px 图标槽 span(.btn-ico)+ 组内 8px/6px 间距——三键成一族

验证:jest 1158/1158 · smoke 16 · lint ✓ · E1 ✓;真机 CDP 复核三键 y/h/w 一致。
@Windsander
Windsander merged commit 4346fc2 into main Oct 15, 2026
14 of 15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant