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