koc-loop/design-qa.md

KOC LOOP 数据回收标题跳转设计 QA

验证对象

• 用户参考截图：/var/folders/0g/8yrmts9s7v5g_xc60sxx0__80000gn/T/codex-clipboard-2296f03e-e79b-494c-b745-08e939fc20c6.png
• 浏览器实现截图：/private/tmp/koc-loop-recovery-title-link-focused.png
• 参考与实现并排对照：/private/tmp/koc-loop-recovery-title-link-comparison.png
• 本地页面：http://localhost:8080/

环境与状态

• CSS 视口：1278 × 692，桌面布局
• 用户参考截图：2556 × 1384，按 2:1 密度归一为 1278 × 692
• 实现截图：1278 × 692
• 页面状态：数据回收 → 美团医美-备婚 → 数据回收队列
• 交互状态：已回填短链的第一条标题获得键盘焦点；两条未回填记录保持普通文本

完整画面对比

• 信息架构、侧栏、采集计划和数据回收表格继续沿用现有界面，没有新增路由或改变表格列宽。
• 已回填标题使用现有绿色交互色，聚焦时显示清晰但克制的描边；未回填标题仍为黑色普通文本。
• 参考图中的目标区域与实现截图在同一张并排对照图中检查，未发现遮挡、换行异常或列错位。

聚焦区域检查

• 字体与层级：标题字号、字重和省略规则保持不变，仅为可点击标题增加语义色和 hover/focus 状态。
• 间距与布局：链接仍受原有 310px 最大宽度约束，头像、账号副标题和相邻数据列未发生位移。
• 颜色与状态：绿色与现有按钮、成功状态色一致；键盘焦点轮廓可见。
• 图片质量：创作者截图缩略图未受本次改动影响，仍保持原比例显示。
• 文案内容：标题原文、账号名称、平台信息和采集数据均保持不变。

功能验证

• 当前任务中识别到 1 条可点击标题，href 为已回填的 http://xhslink.cn/o/9qOYiD3Iu8K，target=_blank。
• 点击标题后短链成功跳转并解析为小红书笔记详情页。
• 另外 2 条没有发布链接的标题不是链接，避免误导点击。
• 链接仅允许小红书正式域名和 xhslink.cn / xhslink.com 短链域名，其他协议或域名不会渲染为链接。
• 后台浏览器控制台无 warning/error。
• Docker 生产构建通过；相关静态验收测试 12 项全部通过。

迭代记录

1. 初次浏览器验收发现第一条发布链接为 xhslink.cn，而前端白名单只包含 xhslink.com，因此标题仍是普通文本。
2. 补充 xhslink.cn 及其子域名白名单，保留 HTTP/HTTPS 与小红书域名边界。
3. 重新构建后，浏览器识别到 1 条可点击标题；点击实际打开对应小红书页面，未回填行仍不可点击。

final result: passed