From bc35e0c4f42cf0673d31337567e4e3c05fb630c6 Mon Sep 17 00:00:00 2001
From: zhaoxing <2558691827@qq.com>
Date: Fri, 6 Nov 2026 18:17:45 +0800
Subject: [PATCH] =?UTF-8?q?style(consignment):=20=E8=A7=84=E6=A0=BC?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5=E3=80=8C=E6=94=AF=E6=8C=81=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E3=80=8D=E5=BC=80=E5=85=B3=E4=B8=8E=E5=8C=B9=E9=85=8D=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=E5=90=8C=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

规格字段第3行（匹配方式/通配值/进物品名/支持筛选）原来用 inline gridTemplateColumns 写死3列，把「支持筛选」挤到下一行，左侧留大片空白。

改为 CSS 类 order-service-field-extra.is-four 定义四列栅格，通配值保留 1.5fr 宽度；inline 样式同时盖掉了 960px 媒体查询导致窄屏无法折行，改成类后窄屏按 2x2 折行。

测试：新增用例断言第3行必须使用四列栅格类、禁止再出现3列 inline、四格顺序固定；并把该测试文件的路径解析改为 fileURLToPath，修掉 Windows 下 new URL(...).pathname 拼成 D:\\D:\\... 的 ENOENT。
---
 .../admin/panels/ConsignmentConfigPanel.tsx   |  5 +--
 apps/frontend/src/styles/admin.css            | 15 ++++++++
 ...signment-inventory-category-filter.test.ts | 34 +++++++++++++++++--
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/pages/admin/panels/ConsignmentConfigPanel.tsx b/apps/frontend/src/pages/admin/panels/ConsignmentConfigPanel.tsx
index 489257b2..733feed0 100644
--- a/apps/frontend/src/pages/admin/panels/ConsignmentConfigPanel.tsx
+++ b/apps/frontend/src/pages/admin/panels/ConsignmentConfigPanel.tsx
@@ -1073,10 +1073,7 @@ export default function ConsignmentConfigPanel() {
                               ) : null}
                             </div>
 
-                            <div
-                              className="order-service-field-extra"
-                              style={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }}
-                            >
+                            <div className="order-service-field-extra is-four">
                               <div style={fieldCellStyle}>
                                 <Text type="secondary">匹配方式</Text>
                                 <Select
diff --git a/apps/frontend/src/styles/admin.css b/apps/frontend/src/styles/admin.css
index c6f8a0f3..5463d3ac 100644
--- a/apps/frontend/src/styles/admin.css
+++ b/apps/frontend/src/styles/admin.css
@@ -2235,6 +2235,20 @@
   margin-top: 8px;
 }
 
+/*
+ * 规格字段第 3 行（匹配方式 / 通配值 / 进物品名 / 支持筛选）共 4 格。
+ * 之前用 inline gridTemplateColumns 写死 3 列，把「支持筛选」挤到了下一行；
+ * inline 样式还会盖掉 960px 媒体查询，窄屏下这一行无法折行。
+ * 改成 CSS 类后：4 格同行，窄屏按 2×2 折行。
+ */
+.order-service-field-extra.is-four {
+  grid-template-columns:
+    minmax(110px, 0.8fr)
+    minmax(200px, 1.5fr)
+    minmax(90px, 0.7fr)
+    minmax(90px, 0.7fr);
+}
+
 .order-service-field-extra-tip {
   grid-column: 1 / -1;
   font-size: 12px;
@@ -2372,6 +2386,7 @@
   }
 
   .order-service-field-extra,
+  .order-service-field-extra.is-four,
   .order-service-switch-grid,
   .order-service-switch-grid.is-auto-publish,
   .order-service-status-step-grid {
diff --git a/apps/frontend/tests/consignment-inventory-category-filter.test.ts b/apps/frontend/tests/consignment-inventory-category-filter.test.ts
index d7520320..14364a2c 100644
--- a/apps/frontend/tests/consignment-inventory-category-filter.test.ts
+++ b/apps/frontend/tests/consignment-inventory-category-filter.test.ts
@@ -1,10 +1,13 @@
 import assert from 'node:assert/strict'
 import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
 import test from 'node:test'
 
 function readSource(relativePath: string) {
-  // Windows 检出为 CRLF，多行断言里的 \n 会匹配失败，先统一换行
-  return readFileSync(new URL(relativePath, import.meta.url).pathname, 'utf8').replace(
+  // Windows 上 new URL(...).pathname 会带前导斜杠，拼成 D:\D:\... 导致 ENOENT，
+  // 这里统一用 fileURLToPath（Linux/Windows 都正确）。
+  // 检出为 CRLF，多行断言里的 \n 会匹配失败，先统一换行
+  return readFileSync(fileURLToPath(new URL(relativePath, import.meta.url)), 'utf8').replace(
     /\r\n/g,
     '\n',
   )
@@ -55,6 +58,33 @@ test('寄卖配置：规格字段提供「支持筛选」开关并随配置保
   assert.ok(configSource.includes('filterable: false,'), '新建字段默认不参与筛选')
 })
 
+test('寄卖配置：「支持筛选」与「匹配方式」同行（第3行必须是4列栅格）', () => {
+  assert.ok(
+    configSource.includes('order-service-field-extra is-four'),
+    '规格字段第3行必须使用四列栅格类，支持筛选才会留在同一行',
+  )
+  assert.ok(
+    !configSource.includes("gridTemplateColumns: 'repeat(3, minmax(0, 1fr))'"),
+    '不能再用3列 inline 栅格，否则支持筛选会被挤到下一行',
+  )
+  // 第3行的四格顺序固定：匹配方式 → 通配值 → 进物品名 → 支持筛选
+  const rowStart = configSource.indexOf('order-service-field-extra is-four')
+  const rowEnd = configSource.indexOf('</div>', configSource.indexOf('支持筛选', rowStart))
+  const row = configSource.slice(rowStart, rowEnd)
+  const order = ['匹配方式', '通配值', '进物品名', '支持筛选'].map((label) => row.indexOf(label))
+  assert.ok(
+    order.every((index) => index >= 0) &&
+      order.every((index, i) => i === 0 || index > order[i - 1]!),
+    `第3行四格顺序必须是 匹配方式→通配值→进物品名→支持筛选，实际 ${JSON.stringify(order)}`,
+  )
+
+  const cssSource = readSource('../src/styles/admin.css')
+  assert.ok(
+    cssSource.includes('.order-service-field-extra.is-four'),
+    '必须提供 is-four 四列栅格样式',
+  )
+})
+
 test('筛选选项接口：按已开启寄卖的分类返回', () => {
   assert.ok(
     serviceSource.includes('/worker-platform/consignment/inventory-filter-options'),