chengmaandClaude Opus 5
34b4b54b63
记录两处主动判断及依据：缩短 /tasks 的 placeholder（工单 [注意] 里 预先写明"真装不下就缩文案，不要把宽度调回去"）；把搜索框宽度规则从 §5.1 提到 §3.1 通用规则（原来写在 PDD 页那一节，另外两页看不到）。 未验证：浏览器实机目视、主题与缩放。用户已实机确认。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
128 lines
5.0 KiB
Markdown
128 lines
5.0 KiB
Markdown
# 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)
|