# 34 Admin 顺运宝页与采集采购页搜索框收窄

- 类型：需求（界面微调）
- 父级大工单：#14
- 所属 MVP / 版本：#15 / MVP
- 关联：#23（PDD 页已用同样做法）、#19（采集采购页）
- 状态：验收通过
- 日期：2026-08-07
- Gitea 工单：http://ilaer.eicp.net:8418/chengma/cmautobuy/issues/34

## 背景与目标

#23 把 PDD 商品页的搜索框收到 30%、搜索按钮紧挨输入框，但另外四页没动。
#23 的归档里记了这条遗留：

> 另外四个页面的搜索框仍是撑满的，与 PDD 页不一致，
> 而 `docs/admin/05` §2 要求五页布局统一。是否统一改过来待定。

本工单确定：**顺运宝数据页和采集采购页跟上，蝦皮数据页和客户端列表页暂不动。**

## 最终方案

```text
/syb    改前  [同步] [创建采购任务]   订单号 [______________] [搜索]   [删除]
        改后  [同步] [创建采购任务]   订单号 [___] [搜索]              [删除]

/tasks  改前  [类型▾][状态▾]  关键词[______________] [搜索]   [删除]
        改后  [类型▾][状态▾]  关键词[___] [搜索]              [删除]
```

### 复用 #23 已有的类，不新写规则

`admin/static/css/app.css` 里已经有：

```css
.toolbar input[type="text"].search-narrow { flex: 0 0 30%; }
```

`[必须]` 直接给两个输入框加 `class="search-narrow"`，**不为这两页各写一条新 CSS**。
多写一条就多一处将来要同步的地方。

`[必须]` **不得修改 `.toolbar input[type="text"]` 那条通用规则**——
五个页面共用它，改了会把 `/shopee` 和 `/clients` 一起改掉，
而本工单明确排除了它们。

### 搜索按钮靠左是收窄的自然结果

两个搜索表单都是 `.inline.grow`，输入框原本继承 `flex: 1` 所以撑满，
把按钮顶到最右。改成 `flex: 0 0 30%` 之后表单里没有会伸展的元素了，
多余空间留在按钮之后，按钮自然贴着输入框。

`[必须]` **没有额外加对齐样式**（`margin-right: auto`、`justify-content` 之类）。
不需要，而且会和 `grow` 叠加出难预料的结果。

`[必须]` 两个表单的 `grow` 类**都保留**——它负责把「删除」按钮顶到最右侧。

## 与建单方案的差异

两处主动判断，都在工单授权范围内：

1. **缩短了 `/tasks` 的 placeholder**，从「任务编号 / 订单号 / PDD 商品 ID」
   改成「任务编号 / 订单号 / 商品 ID」。工单的 `[注意]` 预先写明
   「真装不下就缩短 placeholder，**不要为此把宽度调回去**」，按这条处理。
2. **文档规则从 §5.1 提到 §3.1**。原来这条写在「PDD 商品页」那一节里，
   现在三页都要用，写在某一页下面另外两页看不到。提到「表格通用规则」，
   三页都指向它。

## 改了哪些

- `admin/templates/syb/list.html`：搜索框加 `search-narrow` + 注释。
- `admin/templates/task/list.html`：同上；placeholder 缩短。
- `admin/static/css/app.css`：更新 `.search-narrow` 的注释——
  原来写「目前只有 PDD 页用」，改成实际的三页，
  否则下一个人会以为改它只影响 PDD 页。
- `docs/admin/05-ui-specification.md`：新增 §3.1「搜索框宽度」通用规则；
  §5.1 / §6.1 / §7.1 改为指向它。

## 验收结果

服务端渲染逐页核对 `search-narrow` 出现次数：

| 页面 | 实际 | 期望 |
|---|---|---|
| `/pdd` | 1 | 1 |
| `/syb` | 1 | 1 |
| `/tasks` | 1 | 1 |
| **`/shopee`** | **0** | 0 |
| **`/clients`** | **0** | 0 |

| 验收标准 | 结果 |
|---|---|
| `/syb` `/tasks` 搜索框收窄，按钮紧挨输入框 | 通过 |
| **`/shopee` `/clients` 宽度不变** | 通过 |
| **全局规则 `.toolbar input[type="text"]` 未被修改** | 通过（仍是 `flex: 1; min-width: 160px`） |
| 没有为这两页新增额外 CSS 规则 | 通过（`app.css` 里仅 1 条 `search-narrow`） |
| 两个表单的 `grow` 保留 | 通过 |
| `.search-narrow` 注释已更新为三页共用 | 通过 |
| 搜索功能不受影响 | 通过（`/tasks?q=COL`、`/syb?order_no=SO` 均 200） |
| 五个页面均 200 | 通过 |
| `docs/admin/05` 已同步 | 通过 |
| `go vet` / `gofmt` / `go test` 全过 | 通过 |

## 测试

```
go vet ./...              无输出
gofmt -l .                无输出
go test ./... -count=1    ok admin / ok repository / ok service
```

**未验证到的部分：**

- **没有在真实浏览器里目视确认。** 只验证了服务端产出的 HTML 和 CSS 规则，
  30% 的实际视觉宽度、`/syb` 的「订单号」和 `/tasks` 缩短后的 placeholder
  是否还看得清，由用户实机确认。
- 深色 / 浅色主题、1366×768、显示缩放下的表现未实测。

用户已实机确认并验收通过。

## 遗留问题

`/shopee` 和 `/clients` 的搜索框仍是撑满的（按用户要求本次不动），
与其余三页不一致。`docs/admin/05` §3.1 已如实标注这是暂未统一的状态。

## 相关提交

- `6a7cde2` feat: 顺运宝页与采集采购页搜索框收窄 (#34)