From 9f743e19ad6cd6f86ae031877423e16ddac379a4 Mon Sep 17 00:00:00 2001
From: opsx <opsx@local>
Date: Wed, 21 Oct 2026 11:32:41 +0800
Subject: [PATCH] feat(client): replace placeholder connection data with live
 status

---
 client/README.md                              |  2 +-
 client/src/App.tsx                            | 88 +++++++++++++------
 client/src/style.css                          |  2 +-
 client/src/system.css                         |  6 ++
 .../specs/SDD-002-desktop-wireguard-client.md | 26 +++---
 5 files changed, 86 insertions(+), 38 deletions(-)

diff --git a/client/README.md b/client/README.md
index 5810245..2607648 100644
--- a/client/README.md
+++ b/client/README.md
@@ -2,7 +2,7 @@
 
 仓库根目录的 `client/` 是独立的 Rust + Tauri v2 + React/TypeScript 桌面项目。形态参考同级 `opsxshell`、`opsxapi`：界面运行在 Tauri WebView，服务请求经 Rust 命令完成。与仓库的 `frontend/` 管理后台独立构建。
 
-目前仅实现对现有 `GET /api/health` 的真实检测。在“设置”中输入并保存服务端 HTTP 或 HTTPS 根地址：HTTP 可用于健康检测，但明文传输今后不应承载登录口令或设备令牌，推荐使用可信 HTTPS 域名。地址仅保存在本机前端存储中，不含账号。界面采用蓝白灰布局，线路弹窗中的节点和绿黄延时均为**演示数据**，选择仅改变页面展示。健康检查显示的耗时是控制面请求往返时间，不能当作 VPN 节点延时。没有普通用户设备 API 和系统隧道适配前，不提供登录或一键拨号。
+目前仅实现对现有 `GET /api/health` 的真实检测。在“设置”中输入服务端 HTTP 或 HTTPS 根地址，检测成功自动保存并显示已保存地址，也可直接保存：HTTP 可用于健康检测，但明文传输今后不应承载登录口令或设备令牌，推荐使用可信 HTTPS 域名。地址仅保存在本机前端存储中，不含账号。概览在打开时和每隔 30 秒检查一次已保存的管理服务地址；耗时是控制面请求往返时间，不能当作 VPN 节点延时。线路页不展示虚构节点或延时，等待独立的终端用户线路接口。圆形按钮会说明当前连接前提，不伪装成已连接。没有普通用户设备 API 和系统隧道适配前，不提供登录或一键拨号。
 
 桌面版托盘显示“尚未连接”，提供打开窗口与退出。设置页通过 Rust 只读检查 `wg`、`wg-quick` 是否出现在本机 PATH；工具存在不代表驱动、权限、路由及实际隧道可用。浏览器界面预览不会调用本机检查。
 
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 3a296d6..8d9893b 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -4,15 +4,7 @@ import './system.css'
 
 type Page = 'overview' | 'routes' | 'settings'
 type CheckState = 'idle' | 'checking' | 'reachable' | 'error'
-const nodes = [
-  { name: '自动选择', region: '推荐线路', ms: 74 },
-  { name: '香港 · 中心节点', region: '亚太地区', ms: 75 },
-  { name: '新加坡 · 备用节点', region: '亚太地区', ms: 91 },
-  { name: '法兰克福 · 节点', region: '欧洲地区', ms: 313 },
-  { name: '洛杉矶 · 节点', region: '美洲地区', ms: 314 },
-]
-
-function Icon({ name, size = 22 }: { name: 'home' | 'globe' | 'settings' | 'power' | 'shield' | 'server' | 'check' | 'close' | 'chevron'; size?: number }) {
+function Icon({ name, size = 22 }: { name: 'home' | 'globe' | 'settings' | 'power' | 'shield' | 'server' | 'check' | 'close'; size?: number }) {
   const paths = {
     home: <path d="m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z" />,
     globe: <><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c-5 5-5 13 0 18M12 3c5 5 5 13 0 18" /></>,
@@ -22,22 +14,45 @@ function Icon({ name, size = 22 }: { name: 'home' | 'globe' | 'settings' | 'powe
     server: <><rect x="3" y="3" width="18" height="7" rx="2" /><rect x="3" y="14" width="18" height="7" rx="2" /><path d="M7 6.5h.01M7 17.5h.01" /></>,
     check: <path d="m5 12 5 5 9-10" />,
     close: <path d="M5 5 19 19M19 5 5 19" />,
-    chevron: <path d="m7 10 5 5 5-5" />,
   }
   return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{paths[name]}</svg>
 }
 
 export default function App() {
   const [page, setPage] = useState<Page>('overview')
-  const [dialog, setDialog] = useState(false)
-  const [selected, setSelected] = useState(0)
   const [address, setAddress] = useState(() => localStorage.getItem('opsx_server_address') || '')
+  const [savedAddress, setSavedAddress] = useState(() => localStorage.getItem('opsx_server_address') || '')
   const [state, setState] = useState<CheckState>('idle')
   const [error, setError] = useState('')
   const [checkedAddress, setCheckedAddress] = useState('')
   const [responseMs, setResponseMs] = useState<number | null>(null)
   const [readiness, setReadiness] = useState<SystemReadiness | null>(null)
   const [readinessError, setReadinessError] = useState('')
+  const [connectionGuide, setConnectionGuide] = useState('')
+
+  useEffect(() => {
+    if (page !== 'overview' || !savedAddress) return
+    let active = true
+    async function refresh() {
+      const start = performance.now()
+      setState('checking')
+      try {
+        const health = await checkServer(savedAddress)
+        if (!active) return
+        setCheckedAddress(health.address)
+        setResponseMs(Math.round(performance.now() - start))
+        setState(health.reachable ? 'reachable' : 'error')
+      } catch (cause) {
+        if (!active) return
+        setState('error')
+        setError(cause instanceof Error ? cause.message : String(cause))
+        setResponseMs(null)
+      }
+    }
+    void refresh()
+    const timer = window.setInterval(refresh, 30_000)
+    return () => { active = false; window.clearInterval(timer) }
+  }, [page, savedAddress])
 
   useEffect(() => {
     if (page !== 'settings') return
@@ -60,10 +75,14 @@ export default function App() {
       const health = await checkServer(address)
       setCheckedAddress(health.address)
       setResponseMs(Math.round(performance.now() - start))
-      setState(health.reachable ? 'reachable' : 'error')
+      if (!health.reachable) throw new Error('服务端未就绪')
+      localStorage.setItem('opsx_server_address', health.address)
+      setAddress(health.address)
+      setSavedAddress(health.address)
+      setState('reachable')
     } catch (cause) {
       setState('error')
-      setError(String(cause))
+      setError(cause instanceof Error ? cause.message : String(cause))
     }
   }
 
@@ -76,13 +95,31 @@ export default function App() {
       const root = url.href.replace(/\/$/, '')
       localStorage.setItem('opsx_server_address', root)
       setAddress(root)
+      setSavedAddress(root)
       setError('')
+      setState('idle')
     } catch (cause) {
       setError(cause instanceof TypeError ? '请输入完整的 HTTP 或 HTTPS 服务端地址。' : String(cause))
       setState('error')
     }
   }
 
+  async function handleConnect() {
+    if (!savedAddress) {
+      setConnectionGuide('请先到“设置”检测并保存服务端地址。')
+      return
+    }
+    try {
+      const result = await getSystemReadiness()
+      setReadiness(result)
+      setConnectionGuide(result.wg_found && result.wg_quick_found
+        ? '本机已发现 WireGuard 工具。普通用户设备授权和自动下发尚未接入服务端，因此当前不能安全地直接拨号。'
+        : '本机尚未发现完整的 WireGuard 工具；普通用户设备授权和自动下发也尚未接入。当前不能直接拨号。')
+    } catch {
+      setConnectionGuide('当前是浏览器预览，不能修改本机网络。自动连接需要桌面客户端的原生隧道和设备授权接口。')
+    }
+  }
+
   return <div className="app-shell">
     <aside className="sidebar" aria-label="主导航">
       <div className="brand-symbol" aria-label="OpsX VPN"><span /><i /></div>
@@ -93,28 +130,29 @@ export default function App() {
       <div className="sidebar-bottom">OX <small>/ VPN</small></div>
     </aside>
     <div className="workspace">
-      <header className="topbar"><div className="topbar-brand"><span className="brand-dot" />OpsX <strong>VPN</strong><span className="divider" />桌面客户端</div><span className="preview-pill">● &nbsp;界面预览 · 0.1</span></header>
+      <header className="topbar"><div className="topbar-brand"><span className="brand-dot" />OpsX <strong>VPN</strong><span className="divider" />桌面客户端</div><span className="preview-pill">● &nbsp;客户端 0.1</span></header>
       {page === 'overview' && <main className="page">
-        <div className="section-intro"><div><span className="overline">WORKSPACE / OVERVIEW</span><h1>连接概览</h1><p>从这里查看接入状态，准备好后即可连接企业网络。</p></div><span className="status-tag">● &nbsp;尚未连接</span></div>
+        <div className="section-intro"><div><span className="overline">WORKSPACE / OVERVIEW</span><h1>连接概览</h1><p>查看本客户端的服务检测与接入状态。</p></div><span className="status-tag">● &nbsp;本客户端未连接</span></div>
         <div className="overview-grid">
           <section className="connection-card" aria-label="VPN 连接状态">
             <div className="card-top"><div><span className="kicker">安全连接</span><h2>企业网络</h2></div><span className="protocol"><Icon name="shield" size={15} /> WIREGUARD</span></div>
-            <div className="connect-visual"><div className="orbit outer" /><div className="orbit inner" /><div className="power-display" aria-label="VPN 拨号待接入"><Icon name="power" size={42} /></div></div>
-            <div className="connection-message"><strong>尚未连接</strong><span>登录与设备授权接口接入后，即可启用 VPN 拨号</span></div>
-            <button className="node-selector" onClick={() => setDialog(true)}><span className="node-icon"><Icon name="globe" size={19} /></span><span className="node-selector-copy"><small>当前预览线路</small><strong>{nodes[selected].name}</strong></span><span className="demo-chip">演示数据</span><Icon name="chevron" size={18} /></button>
+            <div className="connect-visual"><div className="orbit outer" /><div className="orbit inner" /><button type="button" className="power-display" aria-label="查看 VPN 连接准备步骤" onClick={handleConnect}><Icon name="power" size={42} /></button></div>
+            <div className="connection-message"><strong>本客户端未连接</strong><span>尚未配置自动设备授权和本机隧道</span></div>{connectionGuide && <div className="connection-guide" role="status">{connectionGuide}<button type="button" onClick={() => setPage('settings')}>查看设置 →</button></div>}
+            <div className="node-selector"><span className="node-icon"><Icon name="globe" size={19} /></span><span className="node-selector-copy"><small>已授权 VPN 线路</small><strong>尚未获取</strong></span></div>
           </section>
           <div className="right-column">
-            <section className="info-card"><div className="info-heading"><span className="icon-tile"><Icon name="server" size={20} /></span><div><h2>服务端状态</h2><p>管理服务可达性</p></div></div><p className="server-address">{checkedAddress || address || '尚未设置服务端地址'}</p><span className={`service-state ${state}`}>{state === 'reachable' ? `服务可达 · 控制面往返约 ${responseMs} ms` : state === 'error' ? '检测失败' : state === 'checking' ? '检测中…' : '尚未检测'}</span><p className="hint">控制面检测不代表 VPN 已连接。</p><button className="secondary-action" onClick={() => setPage('settings')}>在设置中配置 →</button></section>
+            <section className="info-card"><div className="info-heading"><span className="icon-tile"><Icon name="server" size={20} /></span><div><h2>服务端状态</h2><p>管理服务可达性</p></div></div><p className="server-address">{savedAddress || '尚未设置服务端地址'}</p><span className={`service-state ${state}`}>{state === 'reachable' ? `服务可达 · 控制面往返约 ${responseMs} ms` : state === 'error' ? '检测失败' : state === 'checking' ? '检测中…' : '尚未检测'}</span><p className="hint">控制面检测不代表 VPN 已连接；概览每 30 秒更新一次。</p><button className="secondary-action" onClick={() => setPage('settings')}>在设置中配置 →</button></section>
             <section className="info-card progress-card"><div className="info-heading"><span className="icon-tile green"><Icon name="shield" size={20} /></span><div><h2>接入进度</h2><p>桌面端能力逐步开放</p></div></div>
-              {([['✓', '服务可达性检测', '已接入现有健康接口', '已就绪'], ['2', '用户登录与设备授权', '等待客户端专用接口', '待接入'], ['3', '原生 WireGuard 连接', '等待多平台隧道适配', '待接入']] as const).map(([num, title, detail, status], index) => <div className="milestone" key={num}><span className={`milestone-mark ${index === 0 ? 'done' : ''}`}>{num}</span><span><strong>{title}</strong><small>{detail}</small></span><em>{status}</em></div>)}
+              <div className="milestone"><span className={`milestone-mark ${state === 'reachable' ? 'done' : ''}`}>{state === 'reachable' ? '✓' : '1'}</span><span><strong>服务可达性</strong><small>{state === 'reachable' ? checkedAddress : '尚未完成健康检查'}</small></span><em>{state === 'reachable' ? '可达' : '未确认'}</em></div>
+              <div className="milestone"><span className="milestone-mark">2</span><span><strong>用户与设备授权</strong><small>服务器尚无客户端专用接口</small></span><em>未接入</em></div>
+              <div className="milestone"><span className="milestone-mark">3</span><span><strong>WireGuard 隧道</strong><small>未创建本机隧道或验证握手</small></span><em>未连接</em></div>
             </section>
           </div>
         </div>
-        <p className="footnote">预览线路与延时仅展示交互样式，不代表实际节点；当前没有建立 VPN 隧道。</p>
+        <p className="footnote">管理服务健康检查仅反映控制面状态；本客户端尚未建立 VPN 隧道。</p>
       </main>}
-      {page === 'routes' && <main className="page subpage"><span className="overline">WORKSPACE / ROUTES</span><h1>线路</h1><p className="subpage-intro">了解线路选择界面。真实节点列表和延时需要服务端开放客户端接口。</p><section className="info-card route-preview"><span className="icon-tile large"><Icon name="globe" size={29} /></span><div><span className="demo-chip">演示数据</span><h2>{nodes[selected].name}</h2><p>当前选择只用于界面预览，不会建立 VPN 连接。</p></div><button className="secondary-action" onClick={() => setDialog(true)}>查看预览线路 →</button></section></main>}
-      {page === 'settings' && <main className="page subpage"><span className="overline">WORKSPACE / SETTINGS</span><h1>设置</h1><p className="subpage-intro">管理服务端入口并查看本机环境。这里不会保存账号或修改本机网络。</p><section className="info-card"><div className="info-heading"><span className="icon-tile"><Icon name="server" size={20} /></span><div><h2>服务端地址</h2><p>保存后下次打开客户端仍可使用</p></div></div><form onSubmit={handleCheck}><label htmlFor="server-url">HTTP / HTTPS 根地址</label><div className="input-row"><input id="server-url" type="url" required placeholder="https://test-link.appx365.com 或 http://121.4.111.208:18080" value={address} onChange={event => { setAddress(event.target.value); setState('idle'); setError(''); setResponseMs(null) }} /><button type="submit" disabled={state === 'checking'}>{state === 'checking' ? '检测中…' : '检测服务'}</button><button className="save-button" type="button" onClick={saveAddress}>保存地址</button></div></form>{address.trim().toLowerCase().startsWith('http://') && <p className="http-warning">HTTP 是明文传输；健康检查可用，但今后登录和设备授权建议改用 HTTPS。</p>}<p className="hint">只填写服务端根地址；健康检查会请求 /api/health。</p>{state === 'reachable' && <div className="result success" role="status"><Icon name="check" size={17} /><span>服务可达 · 控制面往返约 {responseMs} ms<br /><small>{checkedAddress}。这不是 VPN 节点延时或已连接状态。</small></span></div>}{state === 'error' && <div className="result failure" role="alert"><Icon name="close" size={17} /><span>{error || '服务端没有返回有效的健康响应。'}</span></div>}</section><section className="info-card route-preview system-card"><span className="icon-tile large"><Icon name="shield" size={27} /></span><div><h2>安全接入</h2><p>用户认证、设备授权与系统隧道设置将在服务端接口具备后开放。</p></div><span className="status-tag">待接入</span></section><section className="info-card system-card"><div className="info-heading"><span className="icon-tile"><Icon name="server" size={20} /></span><div><h2>本机环境</h2><p>只读检查，不代表已经具备 VPN 拨号能力</p></div></div>{readiness ? <div className="system-grid"><span>操作系统</span><strong>{readiness.platform}</strong><span>wg 命令</span><strong>{readiness.wg_found ? 'PATH 中已发现' : 'PATH 中未发现'}</strong><span>wg-quick 命令</span><strong>{readiness.wg_quick_found ? 'PATH 中已发现' : 'PATH 中未发现'}</strong></div> : <p className="hint" role="status">{readinessError || '正在检测本机环境…'}</p>}<p className="hint">仅检查文件是否存在；没有检查执行权限、驱动、系统授权或 WireGuard 隧道状态。</p></section></main>}
+      {page === 'routes' && <main className="page subpage"><span className="overline">WORKSPACE / ROUTES</span><h1>线路</h1><p className="subpage-intro">这里只显示经当前账户授权、由服务端提供的真实线路。</p><section className="info-card route-preview"><span className="icon-tile large"><Icon name="globe" size={29} /></span><div><h2>暂时无法获取线路</h2><p>服务端尚未提供终端用户身份和设备授权接口，因此无法查询线路或测量真实节点延时。</p></div><button className="secondary-action" onClick={() => setPage('settings')}>检查服务端 →</button></section></main>}
+      {page === 'settings' && <main className="page subpage"><span className="overline">WORKSPACE / SETTINGS</span><h1>设置</h1><p className="subpage-intro">管理服务端入口并查看本机环境。这里不会保存账号或修改本机网络。</p><section className="info-card"><div className="info-heading"><span className="icon-tile"><Icon name="server" size={20} /></span><div><h2>服务端地址</h2><p>检测成功后自动保存，下次打开仍可使用</p></div></div><form onSubmit={handleCheck}><label htmlFor="server-url">HTTP / HTTPS 根地址</label><div className="input-row"><input id="server-url" type="url" required placeholder="https://test-link.appx365.com 或 http://121.4.111.208:18080" value={address} onChange={event => { setAddress(event.target.value); setState('idle'); setError(''); setResponseMs(null) }} /><button type="submit" disabled={state === 'checking'}>{state === 'checking' ? '检测中…' : '检测服务'}</button><button className="save-button" type="button" onClick={saveAddress}>保存地址</button></div></form>{savedAddress && <p className="saved-address" role="status">✓ 已保存：{savedAddress}</p>}{address.trim().toLowerCase().startsWith('http://') && <p className="http-warning">HTTP 是明文传输；健康检查可用，但今后登录和设备授权建议改用 HTTPS。</p>}<p className="hint">只填写服务端根地址；检测成功会自动保存，也可直接点击“保存地址”。</p>{state === 'reachable' && <div className="result success" role="status"><Icon name="check" size={17} /><span>服务可达 · 控制面往返约 {responseMs} ms<br /><small>{checkedAddress}。这不是 VPN 节点延时或已连接状态。</small></span></div>}{state === 'error' && <div className="result failure" role="alert"><Icon name="close" size={17} /><span>{error || '服务端没有返回有效的健康响应。'}</span></div>}</section><section className="info-card route-preview system-card"><span className="icon-tile large"><Icon name="shield" size={27} /></span><div><h2>安全接入</h2><p>用户认证、设备授权与系统隧道设置将在服务端接口具备后开放。</p></div><span className="status-tag">待接入</span></section><section className="info-card system-card"><div className="info-heading"><span className="icon-tile"><Icon name="server" size={20} /></span><div><h2>本机环境</h2><p>只读检查，不代表已经具备 VPN 拨号能力</p></div></div>{readiness ? <div className="system-grid"><span>操作系统</span><strong>{readiness.platform}</strong><span>wg 命令</span><strong>{readiness.wg_found ? 'PATH 中已发现' : 'PATH 中未发现'}</strong><span>wg-quick 命令</span><strong>{readiness.wg_quick_found ? 'PATH 中已发现' : 'PATH 中未发现'}</strong></div> : <p className="hint" role="status">{readinessError || '正在检测本机环境…'}</p>}<p className="hint">仅检查文件是否存在；没有检查执行权限、驱动、系统授权或 WireGuard 隧道状态。</p></section></main>}
     </div>
-    {dialog && <div className="modal-backdrop" onMouseDown={event => { if (event.target === event.currentTarget) setDialog(false) }}><section className="node-dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title" onKeyDown={event => { if (event.key === 'Escape') setDialog(false) }}><div className="dialog-header"><div><span className="overline">ROUTE PREVIEW</span><h2 id="dialog-title">选择服务器节点</h2><p>线路名称与延时均为演示数据，尚未接入真实节点。</p></div><button className="icon-button" onClick={() => setDialog(false)} aria-label="关闭节点选择"><Icon name="close" size={20} /></button></div><div className="dialog-labels"><span>预览线路</span><span>示例延时</span></div><div className="node-list">{nodes.map((node, index) => <button className={`node-row ${selected === index ? 'selected' : ''}`} key={node.name} onClick={() => setSelected(index)}><span className="radio-mark">{selected === index ? '✓' : ''}</span><span className="node-icon"><Icon name={index === 0 ? 'globe' : 'server'} size={18} /></span><span className="node-name"><strong>{node.name}</strong><small>{node.region}</small></span><span className={`latency ${node.ms < 150 ? 'fast' : 'slow'}`}><span className="signal-bars"><i /><i /><i /></span>{node.ms} ms</span></button>)}</div><div className="dialog-footer"><span>仅预览界面，不会发起连接</span><button className="primary-action" onClick={() => setDialog(false)}>完成选择</button></div></section></div>}
   </div>
 }
diff --git a/client/src/style.css b/client/src/style.css
index e27012c..1939019 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1 +1 @@
-:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#192b45;background:#f5f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:680px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #a6c6ff;outline-offset:2px}.app-shell{display:flex;min-height:100vh}.sidebar{width:92px;flex:none;display:flex;flex-direction:column;align-items:center;background:linear-gradient(172deg,#3476f7,#245cdd 76%,#2859d0);color:#fff}.brand-symbol{width:46px;height:46px;margin:27px 0 50px;position:relative}.brand-symbol span{position:absolute;inset:5px;border:4px solid #fff;border-radius:12px;transform:rotate(-32deg)}.brand-symbol i{position:absolute;inset:15px;border-radius:50%;background:#fff}.navigation{width:100%;display:grid;gap:8px}.nav-button{width:100%;height:78px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;border:0;background:transparent;color:#d6e5ff;font-size:12px}.nav-button:hover,.nav-button.active{background:#174bbd;color:#fff}.nav-button.active{box-shadow:inset 3px 0 0 #fff}.sidebar-bottom{margin:auto 0 28px;font-weight:800;font-size:15px;letter-spacing:-.06em}.sidebar-bottom small{font-size:9px;font-weight:500;opacity:.7}.workspace{flex:1;min-width:0}.topbar{height:70px;background:#fff;border-bottom:1px solid #ecf0f6;display:flex;align-items:center;justify-content:space-between;padding:0 43px}.topbar-brand{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:700;color:#516077;white-space:nowrap}.topbar-brand strong{color:#326ef3}.brand-dot{width:10px;height:10px;background:#3575f5;border-radius:3px;transform:rotate(-30deg);margin-right:7px}.divider{height:16px;width:1px;background:#d9e0ec;margin:0 10px}.preview-pill{border:1px solid #dae7ff;border-radius:100px;background:#f3f7ff;color:#4268ad;font-size:11px;padding:7px 11px}.page{max-width:1160px;margin:0 auto;padding:38px 44px 50px}.section-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:29px}.overline{color:#6483bc;letter-spacing:.18em;font-size:10px;font-weight:800}h1{font-size:29px;letter-spacing:-.04em;margin:9px 0 8px}h2{margin:0;font-size:17px;letter-spacing:-.02em}.section-intro p,.subpage-intro{color:#8b98aa;font-size:13px;margin:0}.status-tag{padding:9px 14px;border:1px solid #e4e9f1;background:white;border-radius:100px;color:#6c7c94;font-size:12px;white-space:nowrap}.overview-grid{display:grid;grid-template-columns:minmax(350px,1.06fr) minmax(340px,.94fr);gap:20px}.connection-card,.info-card{background:white;border:1px solid #e8edf5;border-radius:18px;box-shadow:0 8px 32px rgba(29,72,137,.035)}.connection-card{padding:26px 27px 22px;min-height:494px;display:flex;flex-direction:column;overflow:hidden}.card-top{display:flex;justify-content:space-between;align-items:start;gap:12px}.kicker{font-size:11px;color:#7e90ac}.card-top h2{font-size:20px;margin-top:6px}.protocol{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:750;color:#4a7de8;background:#f2f6ff;padding:8px;border-radius:7px;letter-spacing:.04em}.connect-visual{position:relative;width:218px;height:218px;margin:23px auto 0;display:grid;place-items:center}.orbit{position:absolute;border-radius:50%;border:1px solid #e8f0ff}.orbit.outer{inset:0;background:repeating-conic-gradient(from -2deg,#d5e4ff 0 1deg,transparent 1deg 5deg);mask:radial-gradient(transparent 66%,black 67%,black 69%,transparent 70%);-webkit-mask:radial-gradient(transparent 66%,black 67%,black 69%,transparent 70%)}.orbit.inner{inset:19px;border:1px solid #e2ecff}.power-display{display:grid;place-items:center;width:136px;height:136px;border-radius:50%;background:linear-gradient(145deg,#5090ff,#2864ea);color:white;box-shadow:0 16px 30px #397af149,inset 0 1px 2px #ffffff66}.connection-message{text-align:center;display:grid;gap:7px;margin:0 0 25px}.connection-message strong{font-size:16px}.connection-message span{color:#8898ae;font-size:12px}.node-selector{display:flex;align-items:center;width:100%;gap:11px;text-align:left;border:1px solid #e6edf8;background:#fafcff;padding:11px 12px;border-radius:11px;color:#536785;margin-top:auto}.node-selector:hover{border-color:#92b5fc;background:#f5f9ff}.node-icon{width:35px;height:35px;border-radius:10px;background:#ecf3ff;color:#3577f4;display:grid;place-items:center;flex:none}.node-selector-copy{display:grid;gap:3px;flex:1}.node-selector-copy small{color:#93a1b4;font-size:10px}.node-selector-copy strong{font-size:12px;color:#304461}.demo-chip{font-size:10px;color:#6383b7;background:#eaf2ff;padding:5px 7px;border-radius:5px;white-space:nowrap}.right-column{display:grid;gap:18px;grid-template-rows:auto 1fr}.info-card{padding:24px}.info-heading{display:flex;align-items:center;gap:12px;margin-bottom:25px}.info-heading p,.route-preview p{font-size:11px;color:#98a5b7;margin:5px 0 0}.icon-tile{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;flex:none;background:#ecf3ff;color:#3976ef}.icon-tile.green{background:#eef8f4;color:#29a77a}.info-card label{display:block;font-size:11px;font-weight:700;color:#5d6e85;margin-bottom:8px}.input-row{display:flex;gap:8px}.input-row input{min-width:0;flex:1;height:39px;border:1px solid #dfe7f0;border-radius:8px;padding:0 11px;color:#29415f;background:#fbfcff;font-size:12px}.input-row input::placeholder{color:#a4b0bf}.input-row button,.primary-action{border:0;background:#3476f5;color:#fff;border-radius:8px;font-size:11px;font-weight:700;padding:0 15px;white-space:nowrap}.input-row button:hover,.primary-action:hover{background:#205ed9}.input-row button:disabled{opacity:.6;cursor:wait}.hint{font-size:10px;color:#9ba7b6;line-height:1.6;margin:10px 0 0}.result{display:flex;gap:8px;padding:10px;border-radius:8px;margin-top:13px;font-size:11px;line-height:1.5;overflow-wrap:anywhere}.result svg{flex:none}.result small{font-size:10px;color:#63738a}.result.success{color:#168861;background:#ebf8f2}.result.failure{color:#b34444;background:#fff1f0}.progress-card .info-heading{margin-bottom:11px}.milestone{display:flex;align-items:center;gap:11px;border-top:1px solid #f0f3f8;padding:12px 0}.milestone-mark{width:23px;height:23px;flex:none;display:grid;place-items:center;border-radius:50%;background:#edf1f7;color:#8fa0b8;font-size:11px}.milestone-mark.done{background:#e6f7ef;color:#24a171}.milestone>span:nth-child(2){display:grid;gap:3px;flex:1}.milestone strong{font-size:11px;font-weight:600}.milestone small{font-size:10px;color:#9ba8ba}.milestone em{font-size:10px;font-style:normal;color:#9aa8ba;white-space:nowrap}.milestone-mark.done~em{color:#23a875}.footnote{font-size:11px;color:#9da9bb;margin:20px 2px}.subpage{padding-top:50px}.subpage-intro{margin:0 0 30px;line-height:1.7}.route-preview{display:flex;align-items:center;gap:20px;min-height:148px}.icon-tile.large{width:62px;height:62px;border-radius:16px}.route-preview h2{margin-top:9px}.route-preview>div{flex:1}.secondary-action{border:1px solid #d9e6ff;border-radius:9px;background:#f6f9ff;color:#3977e8;font-size:12px;font-weight:650;padding:12px;white-space:nowrap}.secondary-action:hover{background:#e9f1ff}.modal-backdrop{position:fixed;inset:0;background:#1b2c47a8;display:grid;place-items:center;padding:20px;z-index:10}.node-dialog{width:min(600px,100%);background:white;border-radius:18px;box-shadow:0 25px 80px #142d5550;padding:28px}.dialog-header{display:flex;justify-content:space-between;gap:20px}.dialog-header h2{font-size:22px;margin:6px 0}.dialog-header p{color:#92a0b2;font-size:12px;margin:0}.icon-button{width:30px;height:30px;border:0;border-radius:8px;background:#f2f5fa;color:#77869b;display:grid;place-items:center}.icon-button:hover{background:#e6edfa}.dialog-labels{display:flex;justify-content:space-between;padding:25px 12px 9px;font-size:11px;color:#a5b0bf}.node-list{display:grid;gap:5px}.node-row{height:65px;width:100%;border:1px solid transparent;border-radius:10px;background:white;display:flex;align-items:center;gap:12px;text-align:left;padding:0 12px}.node-row:hover{background:#f7faff}.node-row.selected{border-color:#cbdcff;background:#f8fbff}.radio-mark{display:grid;place-items:center;width:18px;height:18px;border:1.5px solid #d8e0eb;border-radius:50%;color:white;font-size:12px;flex:none}.selected .radio-mark{background:#3979f5;border-color:#3979f5}.node-name{display:grid;gap:4px;flex:1}.node-name strong{font-size:13px;font-weight:650;color:#2c405c}.node-name small{font-size:10px;color:#a0adbf}.latency{display:flex;align-items:end;gap:8px;font-size:12px;font-weight:700;white-space:nowrap}.latency.fast{color:#24b57e}.latency.slow{color:#e5a124}.signal-bars{height:15px;display:flex;align-items:end;gap:2px}.signal-bars i{display:block;width:3px;background:currentColor;border-radius:2px 2px 0 0}.signal-bars i:nth-child(1){height:5px}.signal-bars i:nth-child(2){height:10px}.signal-bars i:nth-child(3){height:15px}.dialog-footer{border-top:1px solid #eff2f7;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:19px;padding-top:19px;color:#a1adbb;font-size:10px}.primary-action{height:37px;padding:0 20px}@media(max-width:930px){.page{padding:28px 25px}.overview-grid{grid-template-columns:1fr}.connection-card{min-height:460px}.right-column{grid-template-columns:1fr 1fr;grid-template-rows:auto}.topbar{padding:0 25px}.info-card{padding:18px}.route-preview{flex-wrap:wrap}}@media(max-width:720px){.sidebar{width:68px}.nav-button{height:70px}.brand-symbol{margin-bottom:32px}.topbar{padding:0 18px}.page{padding:23px 17px}.right-column{grid-template-columns:1fr}.section-intro{align-items:start}.section-intro p{max-width:320px}.connection-card{padding:20px}.route-preview{align-items:start}}
+:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#192b45;background:#f5f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:680px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #a6c6ff;outline-offset:2px}.app-shell{display:flex;min-height:100vh}.sidebar{width:92px;flex:none;display:flex;flex-direction:column;align-items:center;background:linear-gradient(172deg,#3476f7,#245cdd 76%,#2859d0);color:#fff}.brand-symbol{width:46px;height:46px;margin:27px 0 50px;position:relative}.brand-symbol span{position:absolute;inset:5px;border:4px solid #fff;border-radius:12px;transform:rotate(-32deg)}.brand-symbol i{position:absolute;inset:15px;border-radius:50%;background:#fff}.navigation{width:100%;display:grid;gap:8px}.nav-button{width:100%;height:78px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;border:0;background:transparent;color:#d6e5ff;font-size:12px}.nav-button:hover,.nav-button.active{background:#174bbd;color:#fff}.nav-button.active{box-shadow:inset 3px 0 0 #fff}.sidebar-bottom{margin:auto 0 28px;font-weight:800;font-size:15px;letter-spacing:-.06em}.sidebar-bottom small{font-size:9px;font-weight:500;opacity:.7}.workspace{flex:1;min-width:0}.topbar{height:70px;background:#fff;border-bottom:1px solid #ecf0f6;display:flex;align-items:center;justify-content:space-between;padding:0 43px}.topbar-brand{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:700;color:#516077;white-space:nowrap}.topbar-brand strong{color:#326ef3}.brand-dot{width:10px;height:10px;background:#3575f5;border-radius:3px;transform:rotate(-30deg);margin-right:7px}.divider{height:16px;width:1px;background:#d9e0ec;margin:0 10px}.preview-pill{border:1px solid #dae7ff;border-radius:100px;background:#f3f7ff;color:#4268ad;font-size:11px;padding:7px 11px}.page{max-width:1160px;margin:0 auto;padding:38px 44px 50px}.section-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:29px}.overline{color:#6483bc;letter-spacing:.18em;font-size:10px;font-weight:800}h1{font-size:29px;letter-spacing:-.04em;margin:9px 0 8px}h2{margin:0;font-size:17px;letter-spacing:-.02em}.section-intro p,.subpage-intro{color:#8b98aa;font-size:13px;margin:0}.status-tag{padding:9px 14px;border:1px solid #e4e9f1;background:white;border-radius:100px;color:#6c7c94;font-size:12px;white-space:nowrap}.overview-grid{display:grid;grid-template-columns:minmax(350px,1.06fr) minmax(340px,.94fr);gap:20px}.connection-card,.info-card{background:white;border:1px solid #e8edf5;border-radius:18px;box-shadow:0 8px 32px rgba(29,72,137,.035)}.connection-card{padding:26px 27px 22px;min-height:494px;display:flex;flex-direction:column;overflow:hidden}.card-top{display:flex;justify-content:space-between;align-items:start;gap:12px}.kicker{font-size:11px;color:#7e90ac}.card-top h2{font-size:20px;margin-top:6px}.protocol{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:750;color:#4a7de8;background:#f2f6ff;padding:8px;border-radius:7px;letter-spacing:.04em}.connect-visual{position:relative;width:218px;height:218px;margin:23px auto 0;display:grid;place-items:center}.orbit{position:absolute;border-radius:50%;border:1px solid #e8f0ff}.orbit.outer{inset:0;background:repeating-conic-gradient(from -2deg,#d5e4ff 0 1deg,transparent 1deg 5deg);mask:radial-gradient(transparent 66%,black 67%,black 69%,transparent 70%);-webkit-mask:radial-gradient(transparent 66%,black 67%,black 69%,transparent 70%)}.orbit.inner{inset:19px;border:1px solid #e2ecff}.power-display{display:grid;place-items:center;width:136px;height:136px;border-radius:50%;background:linear-gradient(145deg,#5090ff,#2864ea);color:white;box-shadow:0 16px 30px #397af149,inset 0 1px 2px #ffffff66}.connection-message{text-align:center;display:grid;gap:7px;margin:0 0 25px}.connection-message strong{font-size:16px}.connection-message span{color:#8898ae;font-size:12px}.node-selector{display:flex;align-items:center;width:100%;gap:11px;text-align:left;border:1px solid #e6edf8;background:#fafcff;padding:11px 12px;border-radius:11px;color:#536785;margin-top:auto}.node-icon{width:35px;height:35px;border-radius:10px;background:#ecf3ff;color:#3577f4;display:grid;place-items:center;flex:none}.node-selector-copy{display:grid;gap:3px;flex:1}.node-selector-copy small{color:#93a1b4;font-size:10px}.node-selector-copy strong{font-size:12px;color:#304461}.right-column{display:grid;gap:18px;grid-template-rows:auto 1fr}.info-card{padding:24px}.info-heading{display:flex;align-items:center;gap:12px;margin-bottom:25px}.info-heading p,.route-preview p{font-size:11px;color:#98a5b7;margin:5px 0 0}.icon-tile{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;flex:none;background:#ecf3ff;color:#3976ef}.icon-tile.green{background:#eef8f4;color:#29a77a}.info-card label{display:block;font-size:11px;font-weight:700;color:#5d6e85;margin-bottom:8px}.input-row{display:flex;gap:8px}.input-row input{min-width:0;flex:1;height:39px;border:1px solid #dfe7f0;border-radius:8px;padding:0 11px;color:#29415f;background:#fbfcff;font-size:12px}.input-row input::placeholder{color:#a4b0bf}.input-row button{border:0;background:#3476f5;color:#fff;border-radius:8px;font-size:11px;font-weight:700;padding:0 15px;white-space:nowrap}.input-row button:hover{background:#205ed9}.input-row button:disabled{opacity:.6;cursor:wait}.hint{font-size:10px;color:#9ba7b6;line-height:1.6;margin:10px 0 0}.result{display:flex;gap:8px;padding:10px;border-radius:8px;margin-top:13px;font-size:11px;line-height:1.5;overflow-wrap:anywhere}.result svg{flex:none}.result small{font-size:10px;color:#63738a}.result.success{color:#168861;background:#ebf8f2}.result.failure{color:#b34444;background:#fff1f0}.progress-card .info-heading{margin-bottom:11px}.milestone{display:flex;align-items:center;gap:11px;border-top:1px solid #f0f3f8;padding:12px 0}.milestone-mark{width:23px;height:23px;flex:none;display:grid;place-items:center;border-radius:50%;background:#edf1f7;color:#8fa0b8;font-size:11px}.milestone-mark.done{background:#e6f7ef;color:#24a171}.milestone>span:nth-child(2){display:grid;gap:3px;flex:1}.milestone strong{font-size:11px;font-weight:600}.milestone small{font-size:10px;color:#9ba8ba}.milestone em{font-size:10px;font-style:normal;color:#9aa8ba;white-space:nowrap}.milestone-mark.done~em{color:#23a875}.footnote{font-size:11px;color:#9da9bb;margin:20px 2px}.subpage{padding-top:50px}.subpage-intro{margin:0 0 30px;line-height:1.7}.route-preview{display:flex;align-items:center;gap:20px;min-height:148px}.icon-tile.large{width:62px;height:62px;border-radius:16px}.route-preview h2{margin-top:9px}.route-preview>div{flex:1}.secondary-action{border:1px solid #d9e6ff;border-radius:9px;background:#f6f9ff;color:#3977e8;font-size:12px;font-weight:650;padding:12px;white-space:nowrap}.secondary-action:hover{background:#e9f1ff}@media(max-width:930px){.page{padding:28px 25px}.overview-grid{grid-template-columns:1fr}.connection-card{min-height:460px}.right-column{grid-template-columns:1fr 1fr;grid-template-rows:auto}.topbar{padding:0 25px}.info-card{padding:18px}.route-preview{flex-wrap:wrap}}@media(max-width:720px){.sidebar{width:68px}.nav-button{height:70px}.brand-symbol{margin-bottom:32px}.topbar{padding:0 18px}.page{padding:23px 17px}.right-column{grid-template-columns:1fr}.section-intro{align-items:start}.section-intro p{max-width:320px}.connection-card{padding:20px}.route-preview{align-items:start}}
diff --git a/client/src/system.css b/client/src/system.css
index 6449fe5..32c3f6d 100644
--- a/client/src/system.css
+++ b/client/src/system.css
@@ -11,3 +11,9 @@
 .system-card .input-row .save-button:hover { background: #dbe9ff; }
 .input-row .save-button { background: #edf4ff; color: #3476f5; }
 .http-warning { background: #fff7e6; color: #a0691b; border: 1px solid #fae5be; border-radius: 8px; padding: 10px; font-size: 12px; line-height: 1.6; }
+.saved-address { color: #168861; font-size: 12px; margin: 9px 0 0; overflow-wrap: anywhere; }
+.power-display { border: 0; cursor: pointer; position: relative; z-index: 1; }
+.power-display:hover { filter: brightness(1.08); transform: translateY(-2px); }
+.power-display:focus-visible { outline: 3px solid #144db6; outline-offset: 4px; }
+.connection-guide { margin: -11px 0 20px; padding: 11px 13px; border: 1px solid #dae7ff; border-radius: 9px; background: #f3f7ff; color: #43618f; font-size: 12px; line-height: 1.6; }
+.connection-guide button { display: block; padding: 3px 0 0; background: none; border: 0; color: #306eee; font-weight: 600; }
diff --git a/docs/specs/SDD-002-desktop-wireguard-client.md b/docs/specs/SDD-002-desktop-wireguard-client.md
index 409b04a..df3c003 100644
--- a/docs/specs/SDD-002-desktop-wireguard-client.md
+++ b/docs/specs/SDD-002-desktop-wireguard-client.md
@@ -4,7 +4,7 @@
 |---|---|
 | 版本 / 变更级别 | 0.1 / S3（未来涉及设备凭据、系统路由和隧道权限） |
 | 设计状态 | Draft |
-| 实现状态 | 客户端骨架、只读本机工具检测及托盘入口；拨号功能未实现 |
+| 实现状态 | 客户端骨架、健康检查后自动保存地址、概览实时检测、无模拟线路、连接按钮诊断提示、只读本机工具检测及托盘入口；自动下发与拨号功能未实现 |
 | 负责人 / 日期 | 待指定 / 2026-10-21 |
 | 关联需求 | 仓库根目录新增 `client/`，Rust + Tauri v2 桌面客户端，优先对接 WireGuard |
 | 批准状态 | 用户要求评估并新增客户端；后续接口契约尚待确认 |
@@ -18,13 +18,14 @@
 
 ## 2. 需求与约束
 
-- FR-01：桌面端可输入控制面 HTTPS 地址，使用 Rust 命令调用现有 `/api/health` 并显示真实结果；仅允许明确的本机 HTTP 开发地址。
-- FR-02：界面将“服务已可达”与“用户已登录/隧道已连接”分开显示；尚无客户端 API 时连接控制不可触发拨号，预览节点及延时必须在界面显著标记为演示数据。
-- FR-02a：桌面端采用蓝白灰连接概览、窄侧栏和独立线路弹窗；预览延时以绿、黄区分，但不伪装为实时测量。只有真实健康检查可展示控制面往返耗时，且明确不等于 VPN 节点延时。
+- FR-01：桌面端可输入控制面 HTTP 或 HTTPS 根地址，使用 Rust 命令调用现有 `/api/health` 并显示真实结果；HTTP 允许用户保存和检测，但显著提示明文传输风险。
+- FR-02：界面将“服务已可达”与“用户已登录/隧道已连接”分开显示；尚无客户端 API 时连接控制不可触发拨号，线路页必须显示不可获取状态，不得展示虚构节点或延时。
+- FR-02a：桌面端采用蓝白灰连接概览与窄侧栏；只有真实健康检查可展示控制面往返耗时，且明确不等于 VPN 节点延时。
 - FR-02b：托盘明确显示未连接，并提供打开窗口与退出；设置页只读检查本机 PATH 中是否存在 `wg`、`wg-quick`，不得把工具存在等同于可拨号或已连接。
 - FR-03（后续）：专门的终端用户认证、MFA/OIDC 与短期设备令牌；区分管理员和拨号用户，过期、退出及设备撤销有可验证行为。
 - FR-04（后续）：由桌面端生成并保管 WireGuard 私钥，只上传公钥；服务端按用户/设备身份分配地址、Peer、路由及 DNS，签发有限时配置并处理回收。
 - FR-05（后续）：针对 Windows/macOS/Linux 的系统隧道、权限、路由/DNS 回滚和断线恢复逐平台交付；首版仅标准 WireGuard UDP。
+- FR-06（后续）：终端用户在客户端登录后，客户端自动注册设备并取得该设备专属 WireGuard 参数，无需管理员或用户手动下载、导入 `.conf`；连接按钮只有在系统确认接口、路由、DNS 和握手时才能显示已连接。
 - NFR-01：应用不能请求广泛的 shell/filesystem 权限；客户端机密不进入前端源码、日志或仓库。桌面应用与管理 API 使用不同鉴权边界。
 - NFR-02：健康检查超时且 TLS 默认验证证书；失败时展示可读原因，不把网络失败当 VPN 连接失败。
 
@@ -38,7 +39,7 @@ Rust 系统隧道适配层（后续） ← 仅在本机保存的 WireGuard 私
 ```
 
 - 客户端采用 `client/src` + `client/src-tauri`，参考同族项目的轻量 Tauri v2 壳，不复制其 SSH/HTTP 工作台或许可证逻辑。UI 使用 React + TypeScript；网络请求由 Rust 执行，避免将控制面令牌交给 WebView。
-- UI 参考用户提供的蓝白灰截图与 Clash Verge Rev 的桌面交互分层思路；Clash Verge Rev 是 GPL-3.0-only，未复制其源码和视觉资源。线路列表目前是固定的演示内容，选择仅更新当前页面状态，不写入持久配置、不进行网络探测或拨号。
+- UI 参考用户提供的蓝白灰截图与 Clash Verge Rev 的桌面交互分层思路；Clash Verge Rev 是 GPL-3.0-only，未复制其源码和视觉资源。概览只使用已保存地址的真实健康检查；线路页在缺少终端用户线路接口时显示不可获取状态，不伪造节点、延时或连接。
 - `corplink-rs`、`Client_UI_for_Corplink` 与 PinkD 的 `wireguard-go` 面向飞连私有控制协议；现有 opsx-vpn 使用 Linux `wg`/`wg-quick` 和标准 WireGuard。不要引入 `protocol_version` 等私有扩展或假设它们兼容。SOCKS5/netstack、WireGuard over TCP 另行评估。
 - 可选的近期验证路线：由管理员在现有管理端下载独立测试 Peer 配置，再用目标 OS 的标准 WireGuard 客户端验证网关；桌面端的自动拨号必须等设备 API 和权限模型明确后再做。
 
@@ -48,7 +49,7 @@ Rust 系统隧道适配层（后续） ← 仅在本机保存的 WireGuard 私
 
 | 顺序 | 借鉴方向 | opsx-vpn 需要自行实现或验证的前置条件 |
 |---|---|---|
-| 1 | Rust IPC 边界、连接状态模型、节点选择、托盘显示 | 先有独立的终端用户身份/设备授权 API；托盘只能根据真实握手与系统隧道状态宣称“已连接”，演示数据不能进入托盘 |
+| 1 | Rust IPC 边界、连接状态模型、线路选择、托盘显示 | 先有独立的终端用户身份/设备授权 API；线路和托盘只能根据实际授权、握手与系统隧道状态宣称“已连接” |
 | 2 | 服务可用性检查、失败恢复、跨平台权限管理 | 使用目标系统支持的**标准 WireGuard** 隧道方案，分别验证安装/卸载、DNS/路由保存与恢复、崩溃及重启行为；不以 Mihomo TUN 或系统代理开关替代 WireGuard |
 | 3 | 配置存储与更新流程 | 私钥在客户端安全存储，令牌按平台凭据库管理；普通偏好与机密分离。具备签名、可信发布地址和回滚策略后才添加自动更新 |
 
@@ -58,8 +59,10 @@ Rust 系统隧道适配层（后续） ← 仅在本机保存的 WireGuard 私
 
 - 第一阶段复用 `GET /api/health`，不新增服务端 API、不改变数据库或现有 Peer 数据。
 - 桌面原生命令 `get_system_readiness` 返回操作系统和 PATH 中 `wg`、`wg-quick` 文件存在性；不执行这些工具、不申请特权，也不访问 VPN 凭据。托盘当前仅提供未连接静态状态、打开与退出，未来需绑定真实隧道状态机后才能展示连接状态。
-- 桌面 `check_server(base_url)` 只返回地址、是否可达及错误，不持久化用户口令或令牌。默认不配置公网地址；用户自行填真实 HTTPS 域名，开发时允许 `http://127.0.0.1` / `http://localhost`。
+- 桌面 `check_server(base_url)` 只返回地址、是否可达及错误，不持久化用户口令或令牌。默认不配置公网地址；用户可填写 HTTP 或 HTTPS 根地址，成功检测后在本机保存并在概览每 30 秒复测；后续认证流程仍推荐可信 HTTPS。
 - 后续拟新增独立的客户端 `/api/client/*` 契约：登录/续期、可用线路、设备注册（公钥、设备标识）、设备吊销、连接配置领取及状态。响应不下发服务端私钥，客户端私钥不上传。接口形状、LDAP/飞书绑定与授权范围在实现前另行确定。
+- 自动连接的服务端先决条件：建立普通用户身份和 WireGuard 专线之间的明确授权关系，不复用管理后台 `/api/login` 的管理员权限；设备由客户端生成私钥并上传公钥，服务端须原子分配独立 Peer/IP、限制设备数量与授权期限，支持撤销；运行中的 Peer 应增量更新，避免重启其他用户的隧道。随后才向已授权设备提供端点、路由、DNS 与服务端公钥，密钥不得进入 WebView 或日志。
+- 首发 macOS 隧道执行层需有权限受限的原生组件，以受控方式创建/关闭隧道并恢复路由和 DNS；`wg`、`wg-quick` 出现在 PATH 不等于具备权限。Windows 和 Linux 各有单独验收，不以 shell 执行任意用户输入配置或要求客户端以管理员账户登录管理 API。
 - 配置下载目前包含由服务端保存的客户端私钥，不得将管理员下载接口直接暴露给桌面端；现有管理员 `/api/login` 不等价于终端用户准入。
 
 ## 5. 风险与验收
@@ -73,18 +76,19 @@ Rust 系统隧道适配层（后续） ← 仅在本机保存的 WireGuard 私
 
 | AC | 对应需求 | 前置与操作 | 预期结果 | 验证方式 | 状态 |
 |---|---|---|---|---|---|
-| AC-01 | FR-01, NFR-02 | 输入有效/无效/非本机 HTTP 地址并点检测 | 真实健康结果、错误与拒绝行为明确 | Rust 单测、桌面手动试连 | 地址校验及本机健康接口测试通过；真实服务与桌面手动试连待做 |
-| AC-02 | FR-02, FR-02a, NFR-01 | 打开桌面端并切换线路 | 蓝白灰界面、绿黄演示延时、显著的演示标记；可见未接入，不会调用管理 API 或修改系统 | UI 构建、代码检查、桌面演示启动 | UI 构建通过；桌面 demo 进程已启动，手动视觉验收待做 |
+| AC-01 | FR-01, NFR-02 | 输入有效/无效及远端 HTTP 地址并点检测 | 真实健康结果、成功后保存、错误与拒绝行为明确 | Rust 单测、UI 构建、桌面试连 | Rust 测试与 UI 构建通过；浏览器手动截图显示远端健康检查可达，保存及重开验收待做 |
+| AC-02 | FR-02, FR-02a, NFR-01 | 打开概览和线路 | 蓝白灰界面、真实健康检查；无授权接口时显示不可获取线路，不调用管理 API 或修改系统 | UI 构建、代码检查、桌面启动 | UI 构建通过；桌面手动视觉验收待做 |
 | AC-02b | FR-02b, NFR-01 | 在桌面端打开托盘并访问设置页 | 托盘显示未连接，能打开/退出；本机工具存在性仅标注为 PATH 检查结果 | 原生构建、桌面手动检查 | UI 构建及 Rust 测试通过，Tauri 开发进程已重启；托盘点击与设置页人工验收待做 |
 | AC-03 | FR-03 | 普通用户/MFA/过期令牌/撤销设备 | 仅已授权设备可领取配置 | 后续 API 集成测试 | Not Run |
 | AC-04 | FR-04 | 同一用户多个设备注册/注销 | 各设备独立密钥、Peer、地址与审计 | 后续真实网关联调 | Not Run |
 | AC-05 | FR-05 | 各 OS 正常连接与异常退出 | 路由/DNS 可恢复，不影响已有连接 | 后续目标 OS 实机验收 | Not Run |
+| AC-06 | FR-06 | 新用户首次点击连接并完成登录；退出、撤销与重装再连 | 自动注册并获得专属配置，无需下载文件；只在真实握手后显示连接，撤销后不能重连 | 客户端/服务端集成测试、macOS 实机与网关握手 | Not Run |
 
 ## 6. 发布与恢复
 
 - 第一阶段仅新增 `client/`，不修改服务器进程、不申请系统特权；构建检查与桌面手动健康检查后才能称为可运行。
-- 2026-10-21 已经管理 API 在现有服务器上创建停止状态测试专线 `opsx-client-pilot`（ID 4），配置与只读核验见 [WireGuard API 创建记录](../wireguard-api-create.md)。该资源尚未启动，不代表桌面客户端可以认证或连接；启用前确认云安全组与目标路由。
-- 后续按“独立客户端身份 API → 设备注册/增量 Peer 更新 → Linux/Windows/macOS 原生隧道”逐步交付；先在独立测试 WireGuard 隧道验证。
+- 2026-10-21 已经管理 API 在现有服务器上创建测试专线 `opsx-client-pilot`（ID 4），配置与早期核验见 [WireGuard API 创建记录](../wireguard-api-create.md)。后续只读复核确认 wg4 已在 UDP 51820 监听，公网测试包可达，但 Peer 握手仍为零；不代表桌面客户端可以认证或连接。
+- 后续按“独立客户端身份与专线授权 API → 设备注册/增量 Peer 更新 → macOS 原生隧道实机握手 → Linux/Windows 适配”逐步交付；客户端自动领取配置，下载 `.conf` 仅作为管理员排障功能。2026-10-21 只读核对：试验专线 wg4 已运行，UDP 51820 可从公网抵达服务器，但尚无 Peer 握手，不能据此声称桌面客户端已连接。
 - 若后续客户端版本故障，先禁用其设备访问凭据并停用客户端，保留现有管理后台与隧道；数据迁移需独立备份和回滚方案。
 
 ## 7. 待决问题