# 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)