48 lines
2.7 KiB
Markdown
48 lines
2.7 KiB
Markdown
# 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
|