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')