Ygent UI 能否像素级对齐 WorkBuddy —— 可行性结论

日期：2026-10-14 问题：是否可以和 WorkBuddy 的 UI / 交互做像素级对齐？

本文是可行性结论，不是实施方案，也不改变任何既有对标承诺。证据来自项目已有的对标记录（ygent-workbuddy-render-audit-2026-10-08.md、ygent-font-parity.md、ygent-chat-interaction-parity.md、ygent-chat-stage-summary-2026-10-08.md）与 AGENTS.md 的原生渲染调试约束。

0. 结论

对话区（chat）：可以，而且大部分已经做到。 现有实测已把关键几何收敛到「同视口 / 同字号 / 同展开状态下 ≤1px 取整误差」，含 108 组字号/行高、18 组几何、多个回合成品尺寸完全一致。
外围壳层（侧栏 / 顶栏 / 左下 / 新建页）：只能部分对齐。 一部分是宿主结构差异，一部分是数据模型差异，还有一部分是平台商业入口——后者按项目约定不应复制。
「全局 100% 像素一致」不可能，也不需要。 三类硬性不可消除：渲染引擎版本差、跨机器字库、数据驱动内容。
有一个前置取舍：项目已按用户要求做了若干品牌化偏离（Ygent 名称/图标、品牌渐变背景、品牌蓝发送按钮、移除邀请卡/账号区），这些与"像素级对齐"直接冲突，需要明确取哪一边。

1. 技术上可行的前提（已全部具备）

前提	状态	证据
同内核族渲染	WorkBuddy = Electron/Chromium；Ygent = Tauri/WebView2（Edge Chromium）。CSS 盒模型与亚像素布局算法同源	`AGENTS.md` 原生渲染调试约束
双端真实 CDP 对标通道	本机回环：WB 9223 / Ygent 9335	`docs/workbuddy-cdp.md`、`ygent-debug.md`
读真实计算值与字库	`getComputedStyle`、`getBoundingClientRect`、`CSS.getPlatformFontsForNode`	`ygent-workbuddy-render-audit-2026-10-08.md` §采集条件和坐标
同条件可比	固定窗口/视口、DPR、字号档位、同会话位置、展开状态；用 `dy`（相对头像行）排除历史高度差	同上
误差口径已定义	关键几何允许 ≤1px 取整误差；缺失结构/入口不按像素误差豁免	同上 §修复顺序与完成标准
字库已匹配	`--yg-font-sans` 显式加入 Noto Sans SC；终端 Courier New；名称 Arial Bold；六档 108 组字号/行高一致	`ygent-font-parity.md`

2. 已经达到像素级的实测样例（不是空谈）

元素	两端共同值
正文列	x359、w752、右边 1111
命令结果面板	w752、内容 720、圆角 16、padding 12×16、高 198.75
用户气泡外壳	355.15625×44.59375（未硬编码，由内层文字推出）
输入外框	(348,592,784,134)、1px #e6e6e6、圆角 24、同双层阴影
发送按钮外框	(1087,681,32,32)
头像行	x359、头像 24×24、名称 x393、gap 10
六档字号/行高	108 组全部一致；18 组几何一致
删除确认浮层	240×166，圆角/边框/双层阴影/按钮尺寸匹配
路径标签	68.25×20、15px/22.5、padding 1px 4px、图标 15×15

3. 不可对齐 / 只能部分对齐清单（按原因分类）

A. 渲染引擎层（少量，需逐项适配）

WebView2 的 Edge Chromium 版本与 Electron 内置 Chromium 版本不同 → 默认 UA 样式、原生滚动条伪元素、字体回退顺序可能不同。
实证差异：滚动条 D39（WB 宽 6 / thumb 黑 20% vs Ygent 宽 10 / 蓝灰 14%）、D40（滚动条上下端小三角 pseudo display 不同）。
结论：绝大多数元素可在 1px 内对齐，少数宿主原生控件需专项处理，不能机械复制 display 值。

B. 字库层

本机已匹配，但 ygent-font-parity.md 明确：字库是本机已安装系统字体，未复制进项目，其他机器缺少会回退 → 跨机器像素一致不成立。
要对齐跨机器：可打包 Noto Sans SC（OFL 许可允许再分发）；但 Courier New 属微软系统字体，不可再分发，只能依赖系统存在。

C. 宿主结构层（不可消除）

X01 顶栏：WB 菜单+全局图标（主顶栏 y30 h56）vs Ygent 品牌标题栏（y46 h40）——宿主 chrome 不同。但内部对话标题/五按钮坐标已一致，不应为复制菜单破坏这些坐标。
X03 侧栏项目层级：WB「项目→子项」vs Ygent 独立任务，同时含层级、导入归属和不同列表数据 → 不能硬移整个侧栏。

D. 数据与功能缺失层（必须先有数据，不是调 CSS）

以下不是像素偏移，而是结构/数据缺失：

D25「深度思考」收起行 —— 需要 reasoning 事件数据。
D29「查看所有产物(5)」入口 —— 需要真实回合产物关联与计数。
D30 助手操作栏整行（复制/赞/踩/朗读/重试/分享 + 消耗/模型/时间）—— 需要真实消耗与模型元数据。

项目明确"不伪造消耗/模型数据或放无效按钮"。补齐数据来源后才谈对齐；在此之前任何"像素级"都是假的。

E. 平台商业与品牌资产层（按约定不应复制）

X04 左下：WB 邀请卡/账号区 vs Ygent 设置/收起侧栏 → 平台商业体系，不默认复制。
品牌偏离（有意为之）：Ygent 名称与图标、对话页品牌渐变背景、品牌蓝发送按钮 —— 均为用户要求的偏离，ygent-chat-stage-summary-2026-10-08.md 明确"不计作 WorkBuddy 白底的逐像素一致性验收"。
图标资产：现有 SVG 路径是逆向取值的 WB 图标（D08 分享箭头、D09 概览、D37 纸飞机仍有图形差），照搬其品牌资产涉及资产许可，建议自绘。

4. 真正的难点不是像素，而是动态交互

项目已定：静态画面通过 ≠ 流式通过（ygent-chat-interaction-parity.md）。像素级达标不解决以下问题，未完成项：

编号	未完成项	通过条件
S01/S02/S06	正文分块、工具 start/update/end、取消与迟到事件	真实 OMP 隔离会话双端动态链路
S04	自动折叠触发时机与活动回合资格	按事件采集双端时间序列，不能比终态截图
S05	滚动跟随与阅读锚点	贴底跟随、上翻不拉回、回底恢复，记录 scrollTop/scrollHeight
S07	公开思考/等待/错误阶段	不伪造内部推理、模型或消耗元数据

另："同输入"无法要求 token 级墙钟一致，只能比较对应事件后的显示位置、块顺序、更新方式、折叠、滚动和操作反馈。

5. 建议的分级目标

级别	目标	可行性
L1 几何对齐	同视口/同字号/同展开状态下关键锚点与尺寸 ≤1px 取整误差；字库匹配	✅ 对话区已基本达成，可继续收敛外围
L2 静态像素对齐	L1 + 全部可见元素（图标路径、颜色、阴影、滚动条）一致	⚠️ 可达 90%+；宿主原生控件与品牌偏离项除外
L3 动态交互一致	事件序列、折叠时机、滚动、取消/恢复与 WB 同步	⏳ 未完成，这才是真正目标
L4 全局 100% 像素一致	含宿主 chrome、平台入口、跨机器字形	❌ 不可能，也不建议

6. 需要明确的一个取舍

项目当前定位是「对标布局与交互，但保留 Ygent 品牌」：名称/头像/背景/按钮色已按用户要求偏离 WB。若坚持"像素级"，需二选一：

选项 A（推荐，即现状方向）：对齐到 L1 + L2 的结构与几何，保留 Ygent 品牌视觉；后续追加收敛图标路径、滚动条、剩余间距与缺失结构。
选项 B：连品牌视觉也照搬 WB（白底、WB 图标、WB 名称）→ 与既有产品决策冲突，且涉及资产许可，需单独确认。

7. 不做的事

不为对齐硬补高度（如 D26 的 45.77px）。
不伪造消耗/模型/产物计数以凑齐视觉。
不复制平台商业入口与无效操作卡片。
不把任一端的绝对 y 差直接当作需要修复的 margin。
不把静态像素通过宣称为动态交互通过。

8.1 KiB Raw Blame History Unescape Escape