7.4 KiB
小鹅参考界面与拓客桌面实现
参考：小鹅 全天候为你服务。用户要求复刻视觉及动态，业务继续采用本项目的拓客流程。
实际观察范围
参考内容位于 Penguin 页面的 iframe 内。已从加载后的内页读取布局、控件、计算样式、品牌 SVG 和方阵动画关键帧，并查看实际截图。桌面以主助手界面为基础，页面下方的校园演示场景用于观察任务过程的表现方式。
布局与视觉
| 项目 | 参考测得的值 | 桌面实现 |
|---|---|---|
| 主面板 | 浅蓝灰 rgb245,248,252，22px 圆角，细描边与柔和阴影 | 单段持续对话，默认收起历史和执行页面 |
| 文字 | 主色 rgb32,57,85；基础13px/19.5px；正文14px | 同色系，保留拓客名称与真实结果 |
| 页眉 | 高100px；padding24px28px20px | 小鹅形标识、助手名称、对话记录和任务设置入口 |
| 分隔区 | 高约51px，细线与很小的状态提示 | “一直在这里”及会话接续说明 |
| 输入区 | padding8px28px15px，透明渐变承接内容 | 底部三个快捷入口、白色圆角输入框、蓝色向上发送按钮 |
| 辅助面板 | 历史和任务/设置按需打开 | 可关闭抽屉、键盘焦点循环、Escape关闭；执行网页独立按需展开 |
实际输入和结果仍来自本地后端。公开检索开关、连接状态、导出、评价和授权等使用真实功能；校园场景、模拟结果、未接入的语音和附件功能未作为拓客能力呈现。
粒子与翻转动画
小鹅点云按参考页实际 SVG 的 126 94 348 252 轮廓采样，包括翼、尾、喙、白色腹部与颈线，以及白脸中的深色眼睛。Canvas随真实任务的idle/running/paused/completed/error状态变化，不用动画产生完成结论或虚构进度。
银蓝方阵采用观察到的10列布局、4.8秒周期和70ms对角错相，保留340px透视、细边框、正反面颜色和翻转中的窄反光。真实分析阶段显示方阵，真实结果返回后呈现结果内容，未增加人为等待时间。
粒子轨迹使用本地Canvas实现；参考页原始粒子脚本的完整运动参数未取得，因此本版不能宣称粒子逐帧轨迹完全一致。形状、配色、布局及方阵关键帧已经按可观察依据对齐，后续可通过同尺寸连续画面对照继续调整。
动画支持减少动态选项并尊重系统偏好。Canvas最高30fps、DPR不高于2；隐藏/离开可见区域暂停，卸载清理观察器与rAF。减少动态时保留静态造型。
原生浏览器与验证
抽屉和设置覆盖主界面时卸载浏览器占位，沿用窗内2px停放机制；恢复后重新测量真实位置。界面未通过transform移动原生浏览器区域，也未更改其登录态和执行能力。
npm run check、npm run build、差异检查通过。隔离Electron界面42项检查通过，覆盖业务交互、抽屉焦点、原生视图停放/恢复消息、窄窗、状态切换和实际方阵动画。另验证五种粒子状态非空、两帧变化、减少动态后静止、卸载无rAF遗留。
验证材料位于 data/ui-verification/blue-ui-fixture.json、particle-companion-fixture.json 及对应截图。所有业务数据为本地夹具，本轮没有真实模型调用、平台采集或对外触达。
下方场景与拓客卡片适配建议
2026年10月29日继续查看下方场景。人事材料整理演示先用对话确认“本月新入职材料”和缺项如何处理，执行时在任务卡更新工具返回，交付时在同卡显示2/3已备齐、1项待补充、材料清单、后续待办和依据。图书馆场景在原卡显示实时返回及“正在组装结果”；访客和报修示例通过对话补齐离校时间、联系人等当前缺项。这些都是参考页的模拟场景，不能作为本项目真实能力或业务结果。
本次确认了对话、执行和交付内容，尚未逐一验证14个场景里每种补充表单的输入、校验、修订和提交状态。
当前拓客界面的计划卡仅展示missing文字，并让用户回主输入框补充；还没有通用的字段级补充卡。跟进授权、评价和单条纠正已有小表单，执行进展和导出已有数据，但还没有统一为完整的场景卡片机制。此前42项检查只覆盖已实现界面行为。
| 场景卡片 | 拓客中的适配 | 展示条件 |
|---|---|---|
| 必要信息补充卡 | 只补会影响当下动作的业务背景、匹配口径或话术等 | 已有信息自动带入；信息足够直接推进，不恢复固定前置表单 |
| 来源核验卡 | 本人原话、来源、主页身份，以及地区等已确认/待核事项 | 不把未知字段填成确定值，也不把父评论信息传给回复者 |
| 阶段执行卡 | 搜索、展开回复、核对主页、分析的真实进展及卡点 | 新增证据和后台事件驱动更新，不以计时动画模拟执行 |
| 跟进确认卡 | 当前账号、目标范围、关注动作或确定的私信内容 | 承接明确授权，只补缺失或变化项，不逐人重复索取相同信息 |
| 名单交付卡 | 表格、筛选、来源证据、待核项及可重新打开的导出文件 | 沿当前任务原地交付并保留历史，不另起空任务 |
| 受限恢复卡 | 原因、已完成/未知/未执行状态、适用的独立替代路线 | 选择路线必须连接真实动作；私信受限不转其他入口继续发送 |
这些是待适配建议，本轮未修改运行逻辑。建议先定义受控卡片合同：稳定字段ID、问题ID、必要性、预填值、允许选项、校验、目标版本和有效状态；前端使用固定组件渲染，模型只填允许的数据。旧卡随目标修订失效，用户可用小卡或自然语言回答同一个问题，完成后沿原任务继续。
已识别具体缺口：后端替代路线返回id/title/reason/deliverable/status，前端仅在有message/prompt时显示选择按钮，当前路线大多仍是文字建议。后续需把路线ID与实际核验/导出动作接通，并展示预期产物。
第二轮场景适配
2026年10月29日用户批准方案后，新增独立流动对话粒子，空闲保留品牌企鹅，执行时粒子缩为角标，分析使用任务卡内方阵。等待补充、暂停和受限停止工作动画；历史打开不重播结果组装。对话粒子是当前本地实现，尚未取得参考页原始运动轨迹，不称逐帧复刻。
补充卡使用固定字段与版本校验，卡片或文字回答均沿原任务继续，已回答和被更新的卡保留只读记录。阶段卡读取实际事件、来源及覆盖，不使用虚构百分比；没有实际记录时不显示空统计。名单采用可筛选表格、单人来源核验和纠正，文件卡保留历史版本、生成时间及可用状态。复核和导出路线已接真实API，受限不会自动转入口继续发送。
本地 CUA 已实际操作补充、字段校验、失败草稿、筛选、来源、纠正、导出重开、评价和路线；检查历史静态、停止后无工作粒子、600px窄窗无横向溢出。执行角标两帧截图区域变化1602像素，减少动态后的同一区域变化0像素。纯调度器另有8项可复现检查，命令 node scripts/check-particle-loop.mjs。本轮无真实平台或模型调用，截图中的夹具数据均有明确标识。