From 34b4b54b63765d3f40c609046bb762193b135ebc Mon Sep 17 00:00:00 2001 From: chengma Date: Fri, 7 Aug 2026 17:23:49 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=BD=92=E6=A1=A3=E4=BB=BB=E5=8A=A1=20?= =?UTF-8?q?#34=EF=BC=8C=E8=AE=B0=E5=BD=95=E9=AA=8C=E6=94=B6=E9=80=9A?= =?UTF-8?q?=E8=BF=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 记录两处主动判断及依据：缩短 /tasks 的 placeholder（工单 [注意] 里 预先写明"真装不下就缩文案，不要把宽度调回去"）；把搜索框宽度规则从 §5.1 提到 §3.1 通用规则（原来写在 PDD 页那一节，另外两页看不到）。 未验证：浏览器实机目视、主题与缩放。用户已实机确认。 Co-Authored-By: Claude Opus 5 --- ...34-admin-顺运宝页与采集采购页搜索框收窄.md | 127 ++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 docs/task/34-admin-顺运宝页与采集采购页搜索框收窄.md diff --git a/docs/task/34-admin-顺运宝页与采集采购页搜索框收窄.md b/docs/task/34-admin-顺运宝页与采集采购页搜索框收窄.md new file mode 100644 index 0000000..7297545 --- /dev/null +++ b/docs/task/34-admin-顺运宝页与采集采购页搜索框收窄.md @@ -0,0 +1,127 @@ +# 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)