From c13cb634dc7fb82780958ec381c305b16b1e31d2 Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Sun, 6 Sep 2026 15:13:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=85=8D=E7=BD=AE=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A1=86=E9=A6=96=E5=AD=97=E5=89=8D=E5=85=89=E6=A0=87?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ConfigField/ConfigField.css               |  9 +++++
 .../ConfigField/ConfigField.vue               |  3 ++
 test/frontend/config-form.test.mjs            | 34 +++++++++++++++++++
 3 files changed, 46 insertions(+)

diff --git a/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.css b/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.css
index 8a42096..f151ca4 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 7de0beb..62d9b1e 100644
--- a/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.vue
+++ b/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.vue
@@ -48,6 +48,7 @@
     <div v-else-if="field.type === 'list'" class="field-list" role="group" :aria-labelledby="`${id}-label`">
       <div v-for="(entry, index) in entries" :key="index" class="field-list-row">
         <el-input
+          class="field-text-input"
           :id="index === 0 ? id : `${id}-${index}`"
           :model-value="entry"
           :disabled="disabled || field.locked"
@@ -77,6 +78,7 @@
           <el-option label="WSS" value="wss" />
         </el-select>
         <el-input
+          class="field-text-input"
           :model-value="entry.host"
           :disabled="disabled || field.locked"
           placeholder="api.example.com"
@@ -103,6 +105,7 @@
     </div>
     <el-input
       v-else
+      class="field-text-input"
       :id="id"
       :model-value="value ?? ''"
       :disabled="disabled || field.locked"
diff --git a/test/frontend/config-form.test.mjs b/test/frontend/config-form.test.mjs
index 9e4f829..cc21556 100644
--- a/test/frontend/config-form.test.mjs
+++ b/test/frontend/config-form.test.mjs
@@ -32,6 +32,40 @@ test('五个分区使用分组表单，控件和样式能编译且不再提供 J
   }
 })
 
+test('文本输入的左右留白属于原生输入框，不影响数字、选择和开关控件', () => {
+  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')