From 5ca8bad5e17175cd58e43096dff1c35e1bd6b810 Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Mon, 7 Sep 2026 18:21:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=82=AE=E4=BB=B6=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E7=9B=91=E5=90=AC=E5=8A=A0=E5=AF=86=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ConfigSettings/ConfigField/ConfigField.vue    |  2 +-
 .../ConfigSettings/ConfigForm/ConfigForm.js       | 15 ++++++++-------
 test/frontend/config-form.test.mjs                |  7 +++++++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.vue b/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.vue
index e66627a5..a602f3dd 100644
--- a/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.vue
+++ b/frontend/src/views/components/ConfigSettings/ConfigField/ConfigField.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="config-field"
-    :class="{ 'field-wide': ['list', 'network'].includes(field.type) && field.wide !== false }"
+    :class="{ 'field-wide': field.wide === true || (['list', 'network'].includes(field.type) && field.wide !== false) }"
     :data-field="fieldKey(field)"
   >
     <label :id="`${id}-label`" :for="id" class="field-label">
diff --git a/frontend/src/views/components/ConfigSettings/ConfigForm/ConfigForm.js b/frontend/src/views/components/ConfigSettings/ConfigForm/ConfigForm.js
index 02df45d1..e29c38c5 100644
--- a/frontend/src/views/components/ConfigSettings/ConfigForm/ConfigForm.js
+++ b/frontend/src/views/components/ConfigSettings/ConfigForm/ConfigForm.js
@@ -122,11 +122,9 @@ const mailGroups = [
     port('listener.tlsPort', 'SMTP 隐式 TLS 端口', { min: 1, hint: '默认 465，客户端建立连接时直接使用 TLS。' }),
     port('imap.tlsPort', 'IMAP 隐式 TLS 端口', { min: 1, required: true, hint: '默认 993。客户端建立连接时直接使用 TLS。' }),
     port('pop3.port', 'POP3 端口（STLS）', { min: 1, required: true, hint: '默认 110，客户端使用 STLS 升级加密后认证。' }),
-    port('pop3.tlsPort', 'POP3 隐式 TLS 端口', { min: 1, required: true, hint: '默认 995，客户端建立连接时直接使用 TLS。' })
-  ]),
-  group('relay', 'SMTP 中继连接（可选）', '', [
-    field('relay.relayHost', 'SMTP 服务器', 'text', { placeholder: 'smtp.example.com' }),
-    field('relay.security', '连接加密', 'select', {
+    port('pop3.tlsPort', 'POP3 隐式 TLS 端口', { min: 1, required: true, hint: '默认 995，客户端建立连接时直接使用 TLS。' }),
+    field('relay.security', 'SMTP 中继加密方式', 'select', {
+      wide: true,
       options: options([
         ['', '尚未配置'],
         ['starttls', 'STARTTLS（推荐端口 587）'],
@@ -134,8 +132,11 @@ const mailGroups = [
         ['tls', 'TLS 兼容模式（推荐端口 465）'],
         ['plain', '不加密（仅限本机，端口 25）']
       ]),
-      hint: '切换加密方式会自动匹配推荐端口，之后仍可手动填写服务商指定的端口。'
-    }),
+      hint: '仅控制下方外部 SMTP 中继连接，不改变本机 SMTP、IMAP 或 POP3 监听方式。切换后会自动匹配推荐中继端口，仍可手动填写服务商指定的端口。'
+    })
+  ]),
+  group('relay', 'SMTP 中继连接（可选）', '', [
+    field('relay.relayHost', 'SMTP 服务器', 'text', { placeholder: 'smtp.example.com' }),
     port('relay.relayPort', 'SMTP 发信中继端口', { hint: '外部 SMTP 服务器端口，与本机监听无关；选择加密方式后自动填写。' }),
     field('relay.username', '认证用户名', 'text', { placeholder: '需要认证时填写' }),
     field('relay.password', '中继密码', 'password', { placeholder: '留空保持原值' }),
diff --git a/test/frontend/config-form.test.mjs b/test/frontend/config-form.test.mjs
index 13e8bf28..b73abbd8 100644
--- a/test/frontend/config-form.test.mjs
+++ b/test/frontend/config-form.test.mjs
@@ -53,6 +53,8 @@ test('邮件服务页面统一编辑六个监听端口，中继和策略字段
   const config = { listener: { port: 25, starttlsPort: 587, tlsPort: 465 }, relay: { relayPort: 465 }, imap: { tlsPort: 993 }, pop3: { port: 110, tlsPort: 995 }, policy: { smtpPort: 25, imapPort: 143, pop3Port: 110 } }
   const text = JSON.stringify(config)
   const groups = getFieldGroups('mail', config)
+  const listener = groups.find(group => group.id === 'listener')
+  const relay = groups.find(group => group.id === 'relay')
   const keys = groups.flatMap(group => group.fields.map(input => input.path.join('.')))
   assert.deepEqual(keys.filter(key => /^(listener|imap|pop3)\./.test(key)), [
     'listener.port', 'listener.starttlsPort', 'listener.tlsPort',
@@ -65,6 +67,11 @@ test('邮件服务页面统一编辑六个监听端口，中继和策略字段
   assert.ok(!keys.includes('policy.smtpPort'))
   assert.ok(!keys.includes('policy.imapPort'))
   assert.ok(!keys.includes('policy.pop3Port'))
+  assert.equal(listener.fields.at(-1).path.join('.'), 'relay.security')
+  assert.equal(listener.fields.at(-1).label, 'SMTP 中继加密方式')
+  assert.equal(listener.fields.at(-1).wide, true)
+  assert.ok(!relay.fields.some(field => field.path.join('.') === 'relay.security'))
+  assert.ok(relay.fields.some(field => field.path.join('.') === 'relay.relayPort'))
   const edited = readFormConfig(updateFormConfig(text, 'mail', ['listener', 'tlsPort'], 2465))
   assert.equal(edited.listener.tlsPort, 2465)
   assert.equal(edited.relay.relayPort, 465)