feat: PDD 商品页工具条文案与宽度调整 (#23)

三处：
- 「创建」改成「添加 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 <noreply@anthropic.com>

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;

admin/templates/pdd/list.html

@@ -4,7 +4,9 @@
 {{/* 三段式布局的第一段：顶部工具条。
      和另外四个页面保持一致，见 docs/admin/05-ui-specification.md §2。 */}}
 <div class="toolbar">
-  <button type="button" data-modal-open="create-modal">创建</button>
+  {{/* 文案写全「添加 PDD 商品」：这条工具条上还有「创建采集任务」，
+       两个都以「创建」开头的话，第一次用的人分不清哪个是加商品、哪个是发起采集。 */}}
+  <button type="button" data-modal-open="create-modal">添加 PDD 商品</button>
 
   {{/* 「创建采集任务」和「删除」用的是**同一个表单**，靠按钮上的
        formaction 决定提交到哪个地址。这样表格里的勾选框只需要挂一份，
@@ -28,7 +30,10 @@
       {{end}}
     </select>
     <label for="q">商品 ID/链接</label>
-    <input id="q" type="text" name="q" value="{{.Keyword}}" placeholder="商品 ID 或链接的一部分">
+    {{/* search-narrow 把这个框收到 30%，让「搜索」按钮能紧挨着它。
+         用类名而不是改 .toolbar input[type="text"]——那条规则被 5 个页面共用。 */}}
+    <input id="q" type="text" name="q" value="{{.Keyword}}"
+           class="search-narrow" placeholder="商品 ID 或链接的一部分">
     <button type="submit">搜索</button>
   </form>
 

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 表格列
 
 | 列 | 显示规则 |