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

Closed
opened 2026-08-10 16:28:09 +08:00 by ila · 3 comments
Owner

基本信息

  • 类型:需求
  • 父级大工单:#14
  • 所属 MVP / 版本:#15 Admin 四模块可用闭环
  • 阶段:顺运宝货运单与采购任务

要解决什么

顺运宝列表目前把双击绑定在整行上,双击商品标题、图片或其他普通单元格都会打开同一个处理详情,采购员无法通过图片快速核对原图,交互含义也不明确。

做什么 / 不做什么

  • 做:把处理详情入口限定到商品标题和已有“下一步”按钮;商品标题支持双击和键盘进入处理详情;缩略图支持单击、双击及键盘打开原图弹窗;补充可发现性、替代文本、加载失败提示和新窗口打开入口。
  • 不做:不新增独立详情路由;不代理、下载或缓存顺运宝图片;不改数据库结构、顺运宝同步协议和 Client 接口。

怎么做

  • 修改 admin/templates/syb/list.html:为标题和图片增加语义化按钮/数据属性,增加复用公共弹窗机制的原图弹窗。
  • 修改 admin/static/js/app.js:取消 SYB 整行双击,按明确触发元���打开处理详情或图片预览;图片弹窗支持焦点恢复、Esc/遮罩关闭、错误提示。
  • 修改 admin/static/css/app.css:增加标题入口、缩略图按钮和自适应原图样式,保持 1366×768 可用。
  • 修改 docs/admin/05-ui-specification.md:同步顺运宝列表交互基线。
  • 不涉及数据库迁移和接口契约变化。

验收标准

  • 双击商品标题打开当前货运单明细的服务端渲染处理详情,Enter/Space 也可触发。
  • 单击或双击缩略图打开原图弹窗,不再打开处理详情;原图按比例限制在可视区域。
  • 原图弹窗显示商品标题、明确关闭入口和“新窗口打开原图”,加载失败时给出可读提示。
  • 双击规格、订单号等其他普通单元格不触发详情。
  • 缩略图具有有意义的替代文本和可见焦点,弹窗关闭后焦点回到触发控件。
  • 不新增图片落库、代理或缓存逻辑,不改变顺运宝同步及 Client 接口。

怎么验证

从 admin/ 执行:

$env:GOTOOLCHAIN="go1.23.0"; gofmt -w .; go vet ./...; go build ./...; go test ./... -count=1
Remove-Item Env:GOTOOLCHAIN

浏览器在 1366×768 下手工验证标题、图片、键盘、关闭和图片失败场景。

风险和回退

风险:单击与双击图片可能重复触发;远程顺运宝图片可能失效。实现必须保证重复事件只保持一个弹窗,并把远程加载失败显示为可恢复提示。回退时恢复原模板、JS、CSS 和界面文档即可,不涉及数据回滚。

## 基本信息 - 类型:需求 - 父级大工单:#14 - 所属 MVP / 版本:#15 Admin 四模块可用闭环 - 阶段:顺运宝货运单与采购任务 ## 要解决什么 顺运宝列表目前把双击绑定在整行上,双击商品标题、图片或其他普通单元格都会打开同一个处理详情,采购员无法通过图片快速核对原图,交互含义也不明确。 ## 做什么 / 不做什么 - 做:把处理详情入口限定到商品标题和已有“下一步”按钮;商品标题支持双击和键盘进入处理详情;缩略图支持单击、双击及键盘打开原图弹窗;补充可发现性、替代文本、加载失败提示和新窗口打开入口。 - 不做:不新增独立详情路由;不代理、下载或缓存顺运宝图片;不改数据库结构、顺运宝同步协议和 Client 接口。 ## 怎么做 - 修改 `admin/templates/syb/list.html`:为标题和图片增加语义化按钮/数据属性,增加复用公共弹窗机制的原图弹窗。 - 修改 `admin/static/js/app.js`:取消 SYB 整行双击,按明确触发元���打开处理详情或图片预览;图片弹窗支持焦点恢复、Esc/遮罩关闭、错误提示。 - 修改 `admin/static/css/app.css`:增加标题入口、缩略图按钮和自适应原图样式,保持 1366×768 可用。 - 修改 `docs/admin/05-ui-specification.md`:同步顺运宝列表交互基线。 - 不涉及数据库迁移和接口契约变化。 ## 验收标准 - [x] 双击商品标题打开当前货运单明细的服务端渲染处理详情,Enter/Space 也可触发。 - [x] 单击或双击缩略图打开原图弹窗,不再打开处理详情;原图按比例限制在可视区域。 - [x] 原图弹窗显示商品标题、明确关闭入口和“新窗口打开原图”,加载失败时给出可读提示。 - [x] 双击规格、订单号等其他普通单元格不触发详情。 - [x] 缩略图具有有意义的替代文本和可见焦点,弹窗关闭后焦点回到触发控件。 - [x] 不新增图片落库、代理或缓存逻辑,不改变顺运宝同步及 Client 接口。 ## 怎么验证 从 `admin/` 执行: ```powershell $env:GOTOOLCHAIN="go1.23.0"; gofmt -w .; go vet ./...; go build ./...; go test ./... -count=1 Remove-Item Env:GOTOOLCHAIN ``` 浏览器在 1366×768 下手工验证标题、图片、键盘、关闭和图片失败场景。 ## 风险和回退 风险:单击与双击图片可能重复触发;远程顺运宝图片可能失效。实现必须保证重复事件只保持一个弹窗,并把远程加载失败显示为可恢复提示。回退时恢复原模板、JS、CSS 和界面文档即可,不涉及数据回滚。
Author
Owner

状态:进行中。已完成代码现状核对,开始按已确认方案实施。

状态:进行中。已完成代码现状核对,开始按已确认方案实施。
Author
Owner

状态:待验收。

已实现:

  • 商品标题改为明确、键盘可达的处理详情入口,顺运宝页取消整行双击。
  • 缩略图打开原图弹窗,包含加载/失败反馈、可视区缩放和新窗口入口。
  • 图片继续使用顺运宝 URL,不代理、不缓存、不落库。

验证:Go 1.23.0 下 go vet ./...、go build ./...、go test ./... -count=1 全部通过;node --check static/js/app.js 与 git diff --check 通过。未使用生产顺运宝账号加载真实原图,需浏览器验收。

实现提交:fb2e4c4
归档提交:3e0f324
归档:docs/task/105-admin顺运宝标题图片交互与原图预览.md

状态:待验收。 已实现: - 商品标题改为明确、键盘可达的处理详情入口,顺运宝页取消整行双击。 - 缩略图打开原图弹窗,包含加载/失败反馈、可视区缩放和新窗口入口。 - 图片继续使用顺运宝 URL,不代理、不缓存、不落库。 验证:Go 1.23.0 下 `go vet ./...`、`go build ./...`、`go test ./... -count=1` 全部通过;`node --check static/js/app.js` 与 `git diff --check` 通过。未使用生产顺运宝账号加载真实原图,需浏览器验收。 实现提交:`fb2e4c4` 归档提交:`3e0f324` 归档:`docs/task/105-admin顺运宝标题图片交互与原图预览.md`
Author
Owner

用户已明确验收通过。验收清单已回填,本工单关闭。

用户已明确验收通过。验收清单已回填,本工单关闭。
ila closed this issue 2026-08-10 23:24:47 +08:00
Sign in to join this conversation.
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: chengma/cmautobuy#105