chengmaandClaude Opus 5
bf81bad741
#18 归档状态改为验收通过，补上实现与归档的提交哈希，并链到 #23。 #23 新增归档：为什么用 .search-narrow 类而不是改被五个页面共用的 .toolbar input[type="text"]；搜索按钮靠左是收窄的自然结果，没有额外样式。 两份都保留了"未验证到的部分"——浏览器实机交互、主题与缩放， 用户已实机确认后验收。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
108 lines
4.3 KiB
Markdown
108 lines
4.3 KiB
Markdown
# 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)
|