Files

T

chengmaandClaude Opus 5 34b4b54b63 docs: 归档任务 #34，记录验收通过

记录两处主动判断及依据：缩短 /tasks 的 placeholder（工单 [注意] 里
预先写明"真装不下就缩文案，不要把宽度调回去"）；把搜索框宽度规则从
§5.1 提到 §3.1 通用规则（原来写在 PDD 页那一节，另外两页看不到）。

未验证：浏览器实机目视、主题与缩放。用户已实机确认。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

2026-08-07 17:23:49 +08:00

5.0 KiB

Raw Blame History

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

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

背景与目标

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

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

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

最终方案

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

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

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

admin/static/css/app.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 类都保留——它负责把「删除」按钮顶到最右侧。

与建单方案的差异

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

缩短了 /tasks 的 placeholder，从「任务编号 / 订单号 / PDD 商品 ID」改成「任务编号 / 订单号 / 商品 ID」。工单的 [注意] 预先写明「真装不下就缩短 placeholder，不要为此把宽度调回去」，按这条处理。
文档规则从 §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 已如实标注这是暂未统一的状态。

5.0 KiB Raw Blame History Unescape Escape