diff --git a/docs/task/18-admin-pdd-商品页面.md b/docs/task/18-admin-pdd-商品页面.md index cc068a8..106fb95 100644 --- a/docs/task/18-admin-pdd-商品页面.md +++ b/docs/task/18-admin-pdd-商品页面.md @@ -3,7 +3,7 @@ - 类型:需求(界面) - 父级大工单:#14 - 所属 MVP / 版本:#15 / MVP -- 状态:待验收 +- 状态:验收通过 - 日期:2026-08-07 - Gitea 工单:http://ilaer.eicp.net:8418/chengma/cmautobuy/issues/18 @@ -176,4 +176,7 @@ go test ./... -count=1 ok cmautobuy/admin/service 0.945s ## 相关提交 -- 见 `docs/task/` 同批提交 +- `eb8d357` feat: PDD 商品页面 (#18) +- `4975c68` docs: 归档任务 #18 + +后续调整见 [#23](23-admin-pdd-页工具条文案与宽度调整.md)(工具条文案与宽度)。 diff --git a/docs/task/23-admin-pdd-页工具条文案与宽度调整.md b/docs/task/23-admin-pdd-页工具条文案与宽度调整.md new file mode 100644 index 0000000..d1d9e16 --- /dev/null +++ b/docs/task/23-admin-pdd-页工具条文案与宽度调整.md @@ -0,0 +1,107 @@ +# 23 Admin PDD 商品页工具条文案与宽度调整 + +- 类型:需求(界面微调) +- 父级大工单:#14 +- 所属 MVP / 版本:#15 / MVP +- 关联:#18(本工单调整 #18 交付的页面) +- 状态:验收通过 +- 日期:2026-08-07 +- Gitea 工单:http://ilaer.eicp.net:8418/chengma/cmautobuy/issues/23 + +## 背景与目标 + +PDD 商品页工具条的三处使用体验问题: + +1. 「创建」这个按钮名说不清创建什么——同一条工具条上还有「创建采集任务」, + 两个都以「创建」开头,第一次用的人分不清哪个是加商品、哪个是发起采集。 +2. 「商品 ID/链接」搜索框占满整条剩余空间,太宽。 +3. 「搜索」按钮被那个宽输入框顶到很右边,离输入框很远,视觉上不像一组。 + +## 最终方案 + +```text +改前 [创建] [创建采集任务] 采集状态[全部▾] 商品ID/链接[______________] [搜索] [删除] +改后 [添加 PDD 商品] [创建采集任务] 采集状态[全部▾] 商品ID/链接[___] [搜索] [删除] +``` + +### 用新类名,不动全局规则 + +`admin/static/css/app.css` 里的 `.toolbar input[type="text"] { flex: 1 }` +被**五个页面共用**(蝦皮 / 顺运宝 / 任务 / 客户端 / PDD 各有一个搜索框)。 +直接改会把另外四页一起改掉,而本工单只要改 PDD 页。 + +```css +.toolbar input[type="text"].search-narrow { flex: 0 0 30%; } +``` + +多一个类,特异性高于通用规则,`flex` 覆盖生效; +而 `min-width: 160px` 仍从通用规则继承,1366×768 那种窄屏下不会缩到没法输入。 + +用 `flex` 而不是 `width`:工具条是 flex 布局,`width` 会被 `flex-grow` 盖掉, +看不出效果。 + +### 搜索按钮靠左是收窄的自然结果 + +没有额外加对齐样式。搜索表单是 `.inline.grow`(`flex: 1`), +输入框从 `flex: 1` 改成 `flex: 0 0 30%` 之后,表单里就没有会伸展的元素了, +多余空间留在按钮之后,按钮自然贴着输入框。 + +表单上的 `grow` 类**保留**——它负责把「删除」按钮顶到工具条最右侧, +去掉的话删除按钮会跑到搜索按钮旁边。 + +## 与建单方案的差异 + +无。按工单实施。 + +## 改了哪些 + +- `admin/templates/pdd/list.html`:按钮文案改为「添加 PDD 商品」; + 搜索框加 `search-narrow` 类。两处都加了注释说明为什么。 +- `admin/static/css/app.css`:新增一条 `.search-narrow` 规则, + 放在通用规则之前,注释写明不要去改通用规则。 +- `docs/admin/05-ui-specification.md`:§5.1 工具条示意图与文案同步; + 新增两条 `[必须]`——文案不能简写成「创建」、不要改通用规则。 + +## 验收结果 + +| 验收标准 | 结果 | +|---|---| +| 按钮显示「添加 PDD 商品」,点击仍打开创建弹窗 | 通过 | +| 旧文案 `>创建<` 无残留 | 通过(0 处) | +| 搜索框带 `search-narrow` 类 | 通过 | +| 「搜索」按钮紧挨输入框 | 通过 | +| 「删除」按钮仍在最右侧(`grow` 保留) | 通过 | +| **另外四个页面搜索框宽度不变** | 通过(四页均不含 `search-narrow`) | +| **全局规则 `.toolbar input[type="text"]` 未被修改** | 通过(仍是 `flex: 1; min-width: 160px`) | +| 搜索功能不受影响 | 通过(带关键词能筛出结果) | +| 五个页面均返回 200 | 通过 | +| `docs/admin/05` §5.1 已同步 | 通过 | +| `go vet` / `gofmt` / `go test` 全过 | 通过 | + +## 测试 + +``` +go vet ./... 无输出 +gofmt -l . 无输出 +go test ./... -count=1 ok repository 0.567s / service 1.180s +``` + +服务端渲染逐项核对,四个未受影响的页面逐个查 `search-narrow` 出现次数均为 0。 + +**未验证到的部分:** + +- **没有在真实浏览器里目视确认。** 只验证了服务端产出的 HTML 和 CSS 规则, + 30% 的实际视觉宽度、按钮间距是否舒服由用户实机确认。 +- 深色 / 浅色主题、1366×768、显示缩放下的表现未实测。 + +用户已实机确认并验收通过。 + +## 遗留问题 + +另外四个页面(蝦皮 / 顺运宝 / 任务 / 客户端)的搜索框仍是撑满的, +与 PDD 页不一致,而 `docs/admin/05` §2 要求五个页面布局统一。 +是否统一改过来待定,属于后续工单。 + +## 相关提交 + +- `96267f4` feat: PDD 商品页工具条文案与宽度调整 (#23)