cmautobuy/docs/task/105-admin顺运宝标题图片交互与原图预览.md

105 Admin：区分顺运宝标题与图片交互并增加原图预览

• 类型：需求
• 父级大工单：#14
• 所属 MVP / 版本：#15 Admin 四模块可用闭环
• 状态：已完成，待用户验收
• 日期：2026-08-10
• Gitea 工单：#105

背景与目标

顺运宝列表原来把处理详情绑定在整行双击上，标题、图片和其他单元格没有明确区别。 本任务让采购员通过商品标题进入处理详情，通过缩略图查看顺运宝原图，并避免其他单元格误触详情。

最终方案

• 移除顺运宝行上的整行详情触发属性，其他模块的公共行双击行为不变。
• 商品标题改为可聚焦按钮，鼠标单击、双击以及键盘 Enter / Space 都能打开原有服务端渲染详情弹窗。
• 缩略图改为带明确标签的按钮；单击或双击打开独立原图弹窗，不再触发处理详情。
• 原图继续使用顺运宝 URL，不代理、不下载、不缓存、不写入数据库；弹窗提供加载状态、失败提示和新窗口打开入口。
• 复用公共弹窗的关闭、Esc、遮罩和焦点恢复机制。

改了哪些

• admin/templates/syb/list.html：拆分标题、图片与其他单元格交互，增加原图弹窗。
• admin/static/js/app.js：增加原图加载及错误反馈，并防止同一详情因双击重复请求。
• admin/static/css/app.css：增加可见焦点、缩略图按钮和可视区自适应原图样式。
• admin/syb_interaction_template_test.go：验证语义化入口、原图属性和整行入口移除。
• docs/admin/05-ui-specification.md：更新顺运宝列表和处理弹窗交互基线。

验收结果

验收标准	结果
标题可用鼠标及键盘打开处理详情	通过（模板与事件绑定检查）
图片打开原图弹窗且不打开处理详情	通过（模板测试与事件绑定检查）
原图按可视区缩放，并有加载失败与新窗口入口	通过
其他普通单元格不触发顺运宝详情	通过
图片具有替代文本、可见焦点且关闭后恢复焦点	通过
不代理、缓存或落库图片，不改接口	通过

测试

• 执行的命令：GOTOOLCHAIN=go1.23.0 go vet ./...、go build ./...、go test ./... -count=1、node --check static/js/app.js、git diff --check。
• 结果：全部通过。
• 没验证到的部分：未使用生产顺运宝账号在浏览器加载真实远程原图；需要用户在部署环境手工确认远程图片可访问及 1366×768 下的视觉效果。

相关提交

• fb2e4c4 feat: 区分顺运宝标题与图片交互 (#105)