From 96267f4a18af6df3d072e72b07745f2f2f675bd6 Mon Sep 17 00:00:00 2001 From: chengma Date: Fri, 7 Aug 2026 14:15:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20PDD=20=E5=95=86=E5=93=81=E9=A1=B5?= =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=9D=A1=E6=96=87=E6=A1=88=E4=B8=8E=E5=AE=BD?= =?UTF-8?q?=E5=BA=A6=E8=B0=83=E6=95=B4=20(#23)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 三处： - 「创建」改成「添加 PDD 商品」。同一条工具条上还有「创建采集任务」， 两个都以「创建」开头，第一次用的人分不清哪个是加商品、哪个是发起采集。 - 搜索框收到 30%。 - 「搜索」按钮紧挨输入框——这是收窄的自然结果：表单里没有会伸展的 元素之后，多余空间留在按钮之后，按钮就不会被顶到很右边。 用 .search-narrow 类而不是改 .toolbar input[type="text"]： 后者被五个页面共用（蝦皮/顺运宝/任务/客户端/PDD 各一个搜索框）， 改了会把另外四页一起改掉。 用 flex 而不是 width：工具条是 flex 布局，width 会被 flex-grow 盖掉。 min-width: 160px 仍从通用规则继承，窄屏时不会缩到没法输入。 表单上的 grow 类保留，它负责把「删除」按钮顶到最右侧。 Co-Authored-By: Claude Opus 5 --- admin/static/css/app.css | 7 +++++++ admin/templates/pdd/list.html | 9 +++++++-- docs/admin/05-ui-specification.md | 12 ++++++++++-- 3 files changed, 24 insertions(+), 4 deletions(-) diff --git a/admin/static/css/app.css b/admin/static/css/app.css index 100452c..bb4e259 100644 --- a/admin/static/css/app.css +++ b/admin/static/css/app.css @@ -63,6 +63,13 @@ body { /* 搜索表单占据剩余空间，把删除按钮挤到右边 */ .toolbar .grow { flex: 1; } .toolbar label { color: #555; white-space: nowrap; } +/* 搜索框收窄到 30%（目前只有 PDD 页用）。 + 这样搜索表单里就没有会伸展的元素了，多余空间留在按钮之后， + 「搜索」按钮自然贴着输入框，不会被顶到很右边。 + 用 flex 而不是 width：工具条是 flex 布局，width 会被 flex-grow 盖掉。 + min-width 由下面那条继承，窄屏时不会缩到没法输入。 */ +.toolbar input[type="text"].search-narrow { flex: 0 0 30%; } + .toolbar input[type="text"] { flex: 1; min-width: 160px; diff --git a/admin/templates/pdd/list.html b/admin/templates/pdd/list.html index 3ea2f8c..2a36754 100644 --- a/admin/templates/pdd/list.html +++ b/admin/templates/pdd/list.html @@ -4,7 +4,9 @@ {{/* 三段式布局的第一段：顶部工具条。 和另外四个页面保持一致，见 docs/admin/05-ui-specification.md §2。 */}}
- + {{/* 文案写全「添加 PDD 商品」：这条工具条上还有「创建采集任务」， + 两个都以「创建」开头的话，第一次用的人分不清哪个是加商品、哪个是发起采集。 */}} + {{/* 「创建采集任务」和「删除」用的是**同一个表单**，靠按钮上的 formaction 决定提交到哪个地址。这样表格里的勾选框只需要挂一份， @@ -28,7 +30,10 @@ {{end}} - + {{/* search-narrow 把这个框收到 30%，让「搜索」按钮能紧挨着它。 + 用类名而不是改 .toolbar input[type="text"]——那条规则被 5 个页面共用。 */}} + diff --git a/docs/admin/05-ui-specification.md b/docs/admin/05-ui-specification.md index 9dc0d28..9e01519 100644 --- a/docs/admin/05-ui-specification.md +++ b/docs/admin/05-ui-specification.md @@ -136,10 +136,13 @@ ### 5.1 工具条 ```text -[创建] [创建采集任务] 采集状态[全部▾] 商品ID/链接[______] [搜索] [删除] +[添加 PDD 商品] [创建采集任务] 采集状态[全部▾] 商品ID/链接[___] [搜索] [删除] ``` -- **创建** → 弹窗，只填 PDD 链接。 +- **添加 PDD 商品** → 弹窗，只填 PDD 链接。 + `[必须]` 文案要写全，**不能简写成「创建」**：同一条工具条上还有 + 「创建采集任务」，两个都以「创建」开头，第一次用的人分不清 + 哪个是加商品、哪个是发起采集。 - **创建采集任务** → 勾选多行后可用。 - **采集状态筛选** → 全部 / 未采集 / 采集中 / 已采集 / 采集失败。 `[必须]` 这个筛选是**刚需**，不是锦上添花：这个页面的主要用途是维护 @@ -150,6 +153,11 @@ 决定提交到哪个地址），表格里的勾选框只挂一份。 为每个操作各复制一套勾选框的话，两套迟早会不同步。 +`[必须]` 搜索框用 `class="search-narrow"` 收到 30%，让「搜索」按钮紧挨着它。 +**不要去改 `.toolbar input[type="text"]` 那条通用规则**——五个页面共用它， +改了会把蝦皮 / 顺运宝 / 任务 / 客户端四页的搜索框一起改掉。 +搜索表单上的 `grow` 类要保留，它负责把「删除」按钮顶到最右侧。 + ### 5.2 表格列 | 列 | 显示规则 |