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

- 类型：需求
- 父级大工单：#14
- 所属 MVP / 版本：#15 Admin 四模块可用闭环
- 状态：已完成，用户验收通过
- 日期：2026-08-10
- Gitea 工单：http://ilaer.eicp.net:8418/chengma/cmautobuy/issues/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)