126 lines
8.1 KiB
Markdown
126 lines
8.1 KiB
Markdown
# 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. 结论
|
||
|
||
1. **对话区（chat）：可以，而且大部分已经做到。** 现有实测已把关键几何收敛到「同视口 / 同字号 / 同展开状态下 ≤1px 取整误差」，含 108 组字号/行高、18 组几何、多个回合成品尺寸完全一致。
|
||
2. **外围壳层（侧栏 / 顶栏 / 左下 / 新建页）：只能部分对齐。** 一部分是宿主结构差异，一部分是数据模型差异，还有一部分是平台商业入口——后者按项目约定不应复制。
|
||
3. **「全局 100% 像素一致」不可能，也不需要。** 三类硬性不可消除：渲染引擎版本差、跨机器字库、数据驱动内容。
|
||
4. **有一个前置取舍**：项目已按用户要求做了若干**品牌化偏离**（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。
|
||
- 不把静态像素通过宣称为动态交互通过。
|