diff --git a/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.css b/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.css index 8a42096c..f151ca48 100644 --- a/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.css +++ b/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.css @@ -36,6 +36,15 @@ width: 100%; } +/* 留白属于原生输入框,点击文字两侧时才能定位光标,而不是只聚焦外层容器。 */ +.field-text-input :deep(.el-input__wrapper) { + padding-inline: 0; +} + +.field-text-input :deep(.el-input__inner) { + padding-inline: 11px; +} + .config-field :deep(.el-input-number .el-input__inner) { text-align: left; } diff --git a/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.vue b/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.vue index 7de0beba..62d9b1e0 100644 --- a/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.vue +++ b/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.vue @@ -48,6 +48,7 @@
{ + const require = createRequire(new URL('../../frontend/package.json', import.meta.url)) + const { parse, compileStyle } = require('@vue/compiler-sfc') + const postcss = require('postcss') + const template = readFileSync(new URL('ConfigField/ConfigField.vue', root), 'utf8') + const css = readFileSync(new URL('ConfigField/ConfigField.css', root), 'utf8') + const { descriptor } = parse(template) + const ast = require('@vue/compiler-dom').parse(descriptor.template.content) + const inputs = [] + const otherControls = [] + const visit = node => { + if (node.tag === 'el-input') inputs.push(node) + if (['el-input-number', 'el-select', 'el-switch'].includes(node.tag)) otherControls.push(node) + for (const child of node.children || []) visit(child) + } + visit(ast) + const classes = node => node.props.find(prop => prop.type === 6 && prop.name === 'class')?.value?.content || '' + assert.equal(inputs.length, 3) + assert.ok(inputs.every(node => classes(node).split(/\s+/).includes('field-text-input'))) + assert.ok(otherControls.every(node => !classes(node).includes('field-text-input'))) + const compiled = compileStyle({ source: css, id: 'data-v-caret-test', scoped: true }) + assert.deepEqual(compiled.errors, []) + const rules = new Map() + postcss.parse(compiled.code).walkRules(rule => { + if (rule.selector.startsWith('.field-text-input[data-v-caret-test] ')) { + const declarations = {} + rule.walkDecls(declaration => { declarations[declaration.prop] = declaration.value }) + rules.set(rule.selector, declarations) + } + }) + assert.deepEqual(rules.get('.field-text-input[data-v-caret-test] .el-input__wrapper'), { 'padding-inline': '0' }) + assert.deepEqual(rules.get('.field-text-input[data-v-caret-test] .el-input__inner'), { 'padding-inline': '11px' }) +}) + test('分组不显示重复标题和介绍,保留无障碍名称、凭据状态及异常提示', () => { const template = readFileSync(new URL('ConfigForm/ConfigForm.vue', root), 'utf8') const css = readFileSync(new URL('ConfigForm/ConfigForm.css', root), 'utf8')