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>
This commit is contained in:
chengma
2026-08-07 14:15:35 +08:00
co-authored by Claude Opus 5
parent c96228fb72
commit 96267f4a18
3 changed files with 24 additions and 4 deletions
+7
View File
@@ -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;