Add mail client connection guide below protocol settings

panel/src/app/globals.css

@@ -305,8 +305,17 @@ button:not(.primary):not(.danger):not(.link):hover,.btn-link:hover { background:
 .mailbox-reset { display:flex; align-items:flex-end; gap:8px; margin-top:10px; }
 .mailbox-reset .field { min-width:140px; }
 .mailbox-list-actions { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
-.global-mail-protocols,.global-mail-content { margin:11px 0 15px; padding:11px 13px; border:1px solid #e3e9e4; border-radius:6px; }
-.global-mail-protocols legend,.global-mail-content legend { padding:0 5px; color:#526158; font-size:12px; font-weight:650; }
+.global-mail-protocols,.global-mail-content,.mail-client-config { min-width:0; margin:11px 0 15px; padding:11px 13px; border:1px solid #e3e9e4; border-radius:6px; }
+.global-mail-protocols legend,.global-mail-content legend,.mail-client-config legend { padding:0 5px; color:#526158; font-size:12px; font-weight:650; }
+.mail-client-config .hint-text { margin:0 0 10px; font-size:12px; }
+.mail-client-host { margin:10px 0; font-size:13px; }
+.mail-client-host code { color:var(--ink); overflow-wrap:anywhere; font-weight:600; }
+.mail-client-config table { min-width:280px; margin:0; }
+.mail-client-config .grid th,.mail-client-config .grid td { padding:9px 6px; text-align:left; font-size:12px; }
+.mail-client-config .grid tbody th { border-bottom:1px solid #edf0ed; background:transparent; color:var(--ink); font-weight:500; }
+.mail-client-config .grid tbody tr:last-child th { border-bottom:0; }
+.mail-client-steps { margin:12px 0; padding-left:20px; color:var(--muted); font-size:12px; line-height:1.8; }
+.mail-client-steps strong { color:var(--ink); font-weight:600; }
 .global-mail-protocols .form-row { align-items:center; }
 .global-mail-content>.hint-text,.global-mail-protocols>.hint-text { margin:0 0 8px 25px; font-size:11px; }
 .global-attachment-limit { max-width:320px; margin-top:12px; }

panel/src/app/mail-settings/page.tsx

@@ -1,6 +1,6 @@
 import { redirect } from 'next/navigation'
 import { getCurrentAdmin } from '@/lib/auth'
-import { getGlobalMailSettings } from '@/lib/settings'
+import { getGlobalMailSettings, getMailHostname } from '@/lib/settings'
 import GlobalMailSettings from '@/app/settings/mail-settings'
 
 export const dynamic = 'force-dynamic'
@@ -12,6 +12,6 @@ export default async function GlobalMailSettingsPage() {
 
   return <main className="wrap">
     <div className="topbar"><div><p className="eyebrow">MAIL / POLICY</p><h1>全局邮箱设置</h1><p className="hint">协议、隐私与附件策略统一应用于所有邮箱；保存后同步到邮件服务。</p></div></div>
-    <GlobalMailSettings initial={settings} />
+    <GlobalMailSettings initial={settings} mailHost={getMailHostname()} />
   </main>
 }

panel/src/app/settings/mail-settings.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import type { GlobalMailSettings } from '@/lib/settings'
 
-export default function GlobalMailSettings({ initial }: { initial: GlobalMailSettings }) {
+export default function GlobalMailSettings({ initial, mailHost }: { initial: GlobalMailSettings; mailHost: string }) {
   const router = useRouter()
   const [settings, setSettings] = useState(initial)
   const [unlimited, setUnlimited] = useState(initial.maxAttachmentMb === 0)
@@ -61,6 +61,28 @@ export default function GlobalMailSettings({ initial }: { initial: GlobalMailSet
         </div>
         <p className="hint-text">SMTP 开关只控制账号认证发信；邮件服务器之间的收信投递不受影响。POP3 和 ManageSieve 还需在 DMS 环境中启用对应服务。</p>
       </fieldset>
+      <fieldset className="mail-client-config">
+        <legend>邮件客户端配置</legend>
+        <p className="hint-text">在 Foxmail、Thunderbird、Apple Mail 等客户端添加邮箱时，选择“手动配置”。推荐使用 IMAP，多台设备可同步邮件；也可选择 POP3 下载邮件。</p>
+        {mailHost ? <p className="mail-client-host">收件服务器和发件服务器均填写：<code>{mailHost}</code></p> : <p className="mail-client-host">尚未配置邮件主机名，请先在“环境配置 → DNS 与 TLS”中设置。</p>}
+        <div className="table-scroll" tabIndex={0} role="region" aria-label="邮件客户端服务器端口和加密方式">
+          <table className="grid">
+            <thead><tr><th scope="col">用途</th><th scope="col">协议</th><th scope="col">端口</th><th scope="col">加密方式</th></tr></thead>
+            <tbody>
+              <tr><th scope="row">收件（推荐）</th><td>IMAP</td><td>993</td><td>SSL/TLS</td></tr>
+              <tr><th scope="row">收件</th><td>POP3</td><td>995</td><td>SSL/TLS</td></tr>
+              <tr><th scope="row">发件</th><td>SMTP</td><td>465</td><td>SSL/TLS</td></tr>
+              <tr><th scope="row">发件（备用）</th><td>SMTP</td><td>587</td><td>STARTTLS</td></tr>
+            </tbody>
+          </table>
+        </div>
+        <ul className="mail-client-steps">
+          <li><strong>用户名：</strong>收件、发件均填写完整邮箱地址，例如 user@example.com。</li>
+          <li><strong>密码：</strong>填写创建邮箱时设置的邮箱密码，不是面板管理员密码。</li>
+          <li><strong>发件认证：</strong>开启“SMTP 服务器需要身份验证”，使用与收件相同的用户名和密码。</li>
+        </ul>
+        <p className="hint-text">收件选择 IMAP 或 POP3 其中一种，发件始终使用 SMTP。请先启用并保存对应协议，确保邮件证书已安装、对应端口已放行。</p>
+      </fieldset>
       <fieldset className="global-mail-content">
         <legend>内容与附件</legend>
         <label className="check"><input type="checkbox" checked={settings.allowExternalImages} onChange={(event) => toggle('allowExternalImages', event.target.checked)} />默认显示邮件中的远程图片</label>