Files

T

chengmaandClaude Opus 5 bf81bad741 docs: 记录 #18 #23 验收通过

#18 归档状态改为验收通过，补上实现与归档的提交哈希，并链到 #23。
#23 新增归档：为什么用 .search-narrow 类而不是改被五个页面共用的
.toolbar input[type="text"]；搜索按钮靠左是收窄的自然结果，没有额外样式。

两份都保留了"未验证到的部分"——浏览器实机交互、主题与缩放，
用户已实机确认后验收。

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

2026-08-07 14:19:44 +08:00

4.3 KiB

Raw Blame History

23 Admin PDD 商品页工具条文案与宽度调整

类型：需求（界面微调）
父级大工单：#14
所属 MVP / 版本：#15 / MVP
关联：#18（本工单调整 #18 交付的页面）
状态：验收通过
日期：2026-08-07
Gitea 工单：#23

背景与目标

PDD 商品页工具条的三处使用体验问题：

「创建」这个按钮名说不清创建什么——同一条工具条上还有「创建采集任务」，两个都以「创建」开头，第一次用的人分不清哪个是加商品、哪个是发起采集。
「商品 ID/链接」搜索框占满整条剩余空间，太宽。
「搜索」按钮被那个宽输入框顶到很右边，离输入框很远，视觉上不像一组。

最终方案

改前  [创建] [创建采集任务]  采集状态[全部▾] 商品ID/链接[______________] [搜索]   [删除]
改后  [添加 PDD 商品] [创建采集任务]  采集状态[全部▾] 商品ID/链接[___] [搜索]     [删除]

用新类名，不动全局规则

admin/static/css/app.css 里的 .toolbar input[type="text"] { flex: 1 } 被五个页面共用（蝦皮 / 顺运宝 / 任务 / 客户端 / PDD 各有一个搜索框）。直接改会把另外四页一起改掉，而本工单只要改 PDD 页。

.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 要求五个页面布局统一。是否统一改过来待定，属于后续工单。

4.3 KiB Raw Blame History Unescape Escape