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:
@@ -1073,10 +1073,7 @@ export default function ConsignmentConfigPanel() {
|
|||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div className="order-service-field-extra is-four">
|
||||||
className="order-service-field-extra"
|
|
||||||
style={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }}
|
|
||||||
>
|
|
||||||
<div style={fieldCellStyle}>
|
<div style={fieldCellStyle}>
|
||||||
<Text type="secondary">匹配方式</Text>
|
<Text type="secondary">匹配方式</Text>
|
||||||
<Select
|
<Select
|
||||||
|
|||||||
@@ -2235,6 +2235,20 @@
|
|||||||
margin-top: 8px;
|
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 {
|
.order-service-field-extra-tip {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@@ -2372,6 +2386,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.order-service-field-extra,
|
.order-service-field-extra,
|
||||||
|
.order-service-field-extra.is-four,
|
||||||
.order-service-switch-grid,
|
.order-service-switch-grid,
|
||||||
.order-service-switch-grid.is-auto-publish,
|
.order-service-switch-grid.is-auto-publish,
|
||||||
.order-service-status-step-grid {
|
.order-service-status-step-grid {
|
||||||
|
|||||||
@@ -1,10 +1,13 @@
|
|||||||
import assert from 'node:assert/strict'
|
import assert from 'node:assert/strict'
|
||||||
import { readFileSync } from 'node:fs'
|
import { readFileSync } from 'node:fs'
|
||||||
|
import { fileURLToPath } from 'node:url'
|
||||||
import test from 'node:test'
|
import test from 'node:test'
|
||||||
|
|
||||||
function readSource(relativePath: string) {
|
function readSource(relativePath: string) {
|
||||||
// Windows 检出为 CRLF,多行断言里的 \n 会匹配失败,先统一换行
|
// Windows 上 new URL(...).pathname 会带前导斜杠,拼成 D:\D:\... 导致 ENOENT,
|
||||||
return readFileSync(new URL(relativePath, import.meta.url).pathname, 'utf8').replace(
|
// 这里统一用 fileURLToPath(Linux/Windows 都正确)。
|
||||||
|
// 检出为 CRLF,多行断言里的 \n 会匹配失败,先统一换行
|
||||||
|
return readFileSync(fileURLToPath(new URL(relativePath, import.meta.url)), 'utf8').replace(
|
||||||
/\r\n/g,
|
/\r\n/g,
|
||||||
'\n',
|
'\n',
|
||||||
)
|
)
|
||||||
@@ -55,6 +58,33 @@ test('寄卖配置:规格字段提供「支持筛选」开关并随配置保
|
|||||||
assert.ok(configSource.includes('filterable: false,'), '新建字段默认不参与筛选')
|
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('筛选选项接口:按已开启寄卖的分类返回', () => {
|
test('筛选选项接口:按已开启寄卖的分类返回', () => {
|
||||||
assert.ok(
|
assert.ok(
|
||||||
serviceSource.includes('/worker-platform/consignment/inventory-filter-options'),
|
serviceSource.includes('/worker-platform/consignment/inventory-filter-options'),
|
||||||
|
|||||||
Reference in New Issue
Block a user