style(consignment): 规格字段「支持筛选」开关与匹配方式同行

规格字段第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。
This commit is contained in:
2026-11-06 18:17:45 +08:00
parent fde35624cd
commit bc35e0c4f4
3 changed files with 48 additions and 6 deletions
@@ -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
+15
View File
@@ -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 {
@@ -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'),