51 lines
2.6 KiB
Markdown
51 lines
2.6 KiB
Markdown
|
# 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)
|