@wenbin_wb/dsh-bridge 2.3.3 → 2.5.0

package/client/index.js

@@ -72,6 +72,9 @@ const Icons = {
   tunnel: (props) => React.createElement('svg', { viewBox: '0 0 24 24', width: 16, height: 16, fill: 'currentColor', ...props },
     React.createElement('path', { d: 'M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3z' })
   ),
+  security: (props) => React.createElement('svg', { viewBox: '0 0 24 24', width: 16, height: 16, fill: 'currentColor', ...props },
+    React.createElement('path', { d: 'M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z' })
+  ),
   bot: (props) => React.createElement('svg', { viewBox: '0 0 24 24', width: 16, height: 16, fill: 'currentColor', ...props },
     React.createElement('path', { d: 'M20 9V7c0-1.1-.9-2-2-2h-3c0-1.66-1.34-3-3-3S9 3.34 9 5H6c-1.1 0-2 .9-2 2v2c-1.66 0-3 1.34-3 3s1.34 3 3 3v4c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-4c1.66 0 3-1.34 3-3s-1.34-3-3-3zm-2 10H6V7h12v12zm-9-6c-.83 0-1.5-.67-1.5-1.5S8.17 10 9 10s1.5.67 1.5 1.5S9.83 13 9 13zm6 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z' })
   ),
@@ -154,7 +157,7 @@ function StatusTag({ running, status }) {
   }, text);
 }
 
-function QrBlock({ url, qr, onReset }) {
+function QrBlock({ url, qr, onReset, auth, onNavigateSecurity }) {
   const [copied, setCopied] = React.useState(false);
   const [showQr, setShowQr] = React.useState(true);
 
@@ -191,10 +194,31 @@ function QrBlock({ url, qr, onReset }) {
   const toggleQr = React.useCallback(() => setShowQr(v => !v), []);
 
   return React.createElement('div', { style: { marginTop: 10 } },
-    React.createElement('div', { style: s.warn },
-      '⚠️ 请勿将此链接或二维码分享给他人，任何人扫码后都可直接访问您的 DSH。'
-    ),
-    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 10 } },
+    auth?.enabled
+      ? React.createElement('div', {
+          style: {
+            display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px',
+            background: 'var(--dsw-alias-state-success-bg,#ecfdf5)',
+            border: '1px solid var(--dsw-alias-state-success-primary,#10b981)',
+            borderRadius: 8, fontSize: 12, color: 'var(--dsw-alias-state-success-primary,#059669)',
+            marginBottom: 8, fontWeight: 500,
+            cursor: onNavigateSecurity ? 'pointer' : 'default',
+          },
+          onClick: onNavigateSecurity,
+          title: onNavigateSecurity ? '点击前往「安全认证」配置' : undefined,
+        },
+          '🛡️ 访问安全认证已生效 · 扫码设备自动完成免密授权',
+          onNavigateSecurity && React.createElement('span', { style: { textDecoration: 'underline', fontSize: 11, marginLeft: 4 } }, '设置 ➔')
+        )
+      : React.createElement('div', {
+          style: { ...s.warn, cursor: onNavigateSecurity ? 'pointer' : 'default', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 6 },
+          onClick: onNavigateSecurity,
+          title: onNavigateSecurity ? '点击前往「安全认证」开启访问保护' : undefined,
+        },
+          React.createElement('span', null, '⚠️ 当前未开启访问认证，建议在「安全认证」开启密码或扫码保护。'),
+          onNavigateSecurity && React.createElement('span', { style: { fontWeight: 600, textDecoration: 'underline', fontSize: 12, color: 'var(--dsw-alias-brand-primary,#4f6ef7)' } }, '去开启 ➔')
+        ),
+    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 } },
       React.createElement('code', { style: { ...s.code, flex: 1 } }, url),
       React.createElement('button', {
         style: { ...s.btnGhost, height: 26, padding: '0 10px', fontSize: 12, flexShrink: 0 },
@@ -260,7 +284,7 @@ const CustomTunnelConfigForm = React.memo(function CustomTunnelConfigForm({ serv
   const handleTokenChange = React.useCallback((e) => { setAccessToken(e.target.value); setSaveSuccess(false); }, []);
 
   return React.createElement('div', { style: s.block },
-    React.createElement('div', { style: { ...s.muted, marginBottom: 8 } }, '服务器配置'),
+    React.createElement('div', { style: { ...s.muted, marginBottom: 8 } }, '隧道服务器配置'),
     React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
       React.createElement('input', {
         style: s.input,
@@ -273,12 +297,15 @@ const CustomTunnelConfigForm = React.memo(function CustomTunnelConfigForm({ serv
       React.createElement('input', {
         style: s.input,
         type: 'password',
-        placeholder: '访问令牌（Access Token）',
+        placeholder: '隧道服务端连接令牌（Tunnel Access Token）',
         value: accessToken,
         onChange: handleTokenChange,
         onKeyDown: (e) => { if (e.key === 'Enter' && dirty && !saving) handleSave(); },
         disabled: saving,
       }),
+      React.createElement('div', { style: { ...s.muted, fontSize: 11 } },
+        '💡 用于与您的 VPS 隧道服务端建立反向通道（与 Web 网页访客访问密码互相独立）。'
+      ),
       React.createElement('button', {
         style: {
           ...s.btnPri,
@@ -293,7 +320,7 @@ const CustomTunnelConfigForm = React.memo(function CustomTunnelConfigForm({ serv
   );
 });
 
-const TunnelCard = React.memo(function TunnelCard({ title, desc, data, onStart, onStop, onReset, children }) {
+const TunnelCard = React.memo(function TunnelCard({ title, desc, data, onStart, onStop, onReset, auth, onNavigateSecurity, children }) {
   const { running, configured, url, qr, state } = data ?? {};
   const phase = state?.phase ?? 'idle';
 
@@ -312,7 +339,7 @@ const TunnelCard = React.memo(function TunnelCard({ title, desc, data, onStart,
         color: phase === 'error' ? 'var(--dsw-alias-state-error-primary,#dc2626)' : 'var(--dsw-alias-label-secondary,#6b7280)',
       },
     }, state?.detail ?? phase),
-    url && React.createElement(QrBlock, { url, qr, onReset }),
+    url && React.createElement(QrBlock, { url, qr, onReset, auth, onNavigateSecurity }),
     (onStart || onStop) && React.createElement('div', {
       style: { ...s.block, display: 'flex', gap: 8, flexWrap: 'wrap' },
     },
@@ -327,6 +354,421 @@ const TunnelCard = React.memo(function TunnelCard({ title, desc, data, onStart,
   );
 });
 
+// ---- 访问安全认证卡片 ----
+
+const AccessAuthCard = React.memo(function AccessAuthCard({ auth, rpcCall, onUpdate }) {
+  const [enabled, setEnabled] = React.useState(auth?.enabled ?? false);
+  const [mode, setMode] = React.useState(auth?.mode ?? 'token_and_password');
+  const [scope, setScope] = React.useState(auth?.scope ?? 'all');
+  const [adminPolicy, setAdminPolicy] = React.useState(auth?.adminPolicy ?? 'password_unlock');
+
+  // 1. 访客访问密码状态
+  const [accessPassword, setAccessPassword] = React.useState('');
+  const [showAccessPassword, setShowAccessPassword] = React.useState(false);
+  const [savingAccess, setSavingAccess] = React.useState(false);
+  const [saveAccessSuccess, setSaveAccessSuccess] = React.useState(false);
+  const [msgAccess, setMsgAccess] = React.useState(null);
+
+  // 2. 后台管理密码状态
+  const [adminPassword, setAdminPassword] = React.useState('');
+  const [showAdminPassword, setShowAdminPassword] = React.useState(false);
+  const [savingAdmin, setSavingAdmin] = React.useState(false);
+  const [saveAdminSuccess, setSaveAdminSuccess] = React.useState(false);
+  const [msgAdmin, setMsgAdmin] = React.useState(null);
+
+  const [topMsg, setTopMsg] = React.useState(null);
+
+  React.useEffect(() => {
+    if (auth) {
+      setEnabled(auth.enabled ?? false);
+      setMode(auth.mode ?? 'token_and_password');
+      setScope(auth.scope ?? 'all');
+      setAdminPolicy(auth.adminPolicy ?? 'password_unlock');
+    }
+  }, [auth]);
+
+  const handleToggleEnabled = async () => {
+    const next = !enabled;
+    setEnabled(next);
+    try {
+      await rpcCall(BRIDGE_ENDPOINTS.authUpdateConfig, { enabled: next });
+      setTopMsg({ ok: true, text: next ? '✓ 访问安全认证已开启（现有登录态已刷新）' : '✓ 访问安全认证已关闭' });
+      onUpdate?.();
+    } catch (e) {
+      setTopMsg({ ok: false, text: e.message || '更新失败' });
+    }
+  };
+
+  const handleChangeMode = async (m) => {
+    setMode(m);
+    try {
+      await rpcCall(BRIDGE_ENDPOINTS.authUpdateConfig, { mode: m });
+      setTopMsg({ ok: true, text: '✓ 外部验证模式已切换，已刷新全域登录态' });
+      onUpdate?.();
+    } catch (e) {
+      setTopMsg({ ok: false, text: e.message || '更新失败' });
+    }
+  };
+
+  const handleChangeScope = async (sc) => {
+    setScope(sc);
+    try {
+      await rpcCall(BRIDGE_ENDPOINTS.authUpdateConfig, { scope: sc });
+      setTopMsg({ ok: true, text: '✓ 防护生效范围已更新' });
+      onUpdate?.();
+    } catch (e) {
+      setTopMsg({ ok: false, text: e.message || '更新失败' });
+    }
+  };
+
+  const handleChangeAdminPolicy = async (pol) => {
+    setAdminPolicy(pol);
+    try {
+      await rpcCall(BRIDGE_ENDPOINTS.authUpdateConfig, { adminPolicy: pol });
+      setTopMsg({ ok: true, text: '✓ 远程管理防篡改策略已更新' });
+      onUpdate?.();
+    } catch (e) {
+      setTopMsg({ ok: false, text: e.message || '更新失败' });
+    }
+  };
+
+  // 保存访客访问密码
+  const handleSaveAccessPassword = async () => {
+    setSavingAccess(true);
+    setMsgAccess(null);
+    try {
+      const res = await rpcCall(BRIDGE_ENDPOINTS.authUpdateConfig, { password: accessPassword });
+      if (res?.ok) {
+        setSaveAccessSuccess(true);
+        setMsgAccess({ ok: true, text: '✓ 访客访问密码已成功保存！原有的历史访客会话已全部安全刷新。' });
+        setAccessPassword('');
+        setTimeout(() => setSaveAccessSuccess(false), 3500);
+        onUpdate?.();
+      } else {
+        setMsgAccess({ ok: false, text: res?.error?.message || '保存失败' });
+      }
+    } catch (e) {
+      setMsgAccess({ ok: false, text: e.message || '保存失败' });
+    } finally {
+      setSavingAccess(false);
+    }
+  };
+
+  // 保存后台管理密码
+  const handleSaveAdminPassword = async () => {
+    setSavingAdmin(true);
+    setMsgAdmin(null);
+    try {
+      const res = await rpcCall(BRIDGE_ENDPOINTS.authUpdateConfig, { adminPassword });
+      if (res?.ok) {
+        setSaveAdminSuccess(true);
+        setMsgAdmin({ ok: true, text: '✓ 后台管理密码已成功保存！远程管理解锁状态已重置生效。' });
+        setAdminPassword('');
+        setTimeout(() => setSaveAdminSuccess(false), 3500);
+        onUpdate?.();
+      } else {
+        setMsgAdmin({ ok: false, text: res?.error?.message || '保存失败' });
+      }
+    } catch (e) {
+      setMsgAdmin({ ok: false, text: e.message || '保存失败' });
+    } finally {
+      setSavingAdmin(false);
+    }
+  };
+
+  const handleRegenerateToken = async () => {
+    if (!confirm('重置后，之前包含旧 Token 的二维码和分享链接将立即失效。是否确认重置？')) return;
+    try {
+      await rpcCall(BRIDGE_ENDPOINTS.authRegenerateToken, {});
+      setTopMsg({ ok: true, text: '✓ 安全 Token 已重置，二维码与专属链接已刷新' });
+      onUpdate?.();
+    } catch (e) {
+      setTopMsg({ ok: false, text: e.message || '重置失败' });
+    }
+  };
+
+  const scopeLabel = scope === 'all' ? '全部通道 (局域网+公网)' : scope === 'public_only' ? '仅公网隧道' : '仅局域网';
+  const modeLabel = mode === 'token_and_password' ? '扫码免密 + 密码' : mode === 'password_only' ? '仅密码登录' : '仅安全 Token';
+  const adminLabel = adminPolicy === 'password_unlock' ? '需密码解锁' : adminPolicy === 'local_only' ? '仅限电脑本机管理' : '宽松模式';
+
+  return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
+    // ---- 顶部总控与状态概览卡片 ----
+    React.createElement('div', { style: s.card },
+      React.createElement('div', {
+        style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 },
+      },
+        React.createElement('div', { style: { flex: '1 1 260px' } },
+          React.createElement('div', { style: { ...s.label, fontSize: 15, display: 'flex', alignItems: 'center', gap: 8 } },
+            '🔐 全局访问安全防护体系',
+          ),
+          React.createElement('div', { style: { ...s.muted, marginTop: 4 } },
+            '集成外部访问门禁拦截与管理后台防篡改控制，双重守护远程会话与网络配置安全',
+          ),
+        ),
+        React.createElement('button', {
+          style: { ...(enabled ? s.btnPri : s.btnGhost), whiteSpace: 'nowrap', flexShrink: 0 },
+          onClick: handleToggleEnabled,
+        }, enabled ? '✓ 已启用安全防护' : '未开启安全防护'),
+      ),
+
+      enabled && React.createElement('div', {
+        style: {
+          display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 14, paddingTop: 12,
+          borderTop: '1px solid var(--dsw-alias-border-l2,#e5e7eb)',
+        },
+      },
+        React.createElement('div', {
+          style: {
+            display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 10px',
+            borderRadius: 16, fontSize: 11, background: 'var(--dsw-alias-bg-layer-2,#f3f4f6)',
+            color: 'var(--dsw-alias-label-secondary,#4b5563)',
+          },
+        }, '🌐 保护范围: ', React.createElement('strong', { style: { color: 'var(--dsw-alias-brand-primary,#4f6ef7)' } }, scopeLabel)),
+        React.createElement('div', {
+          style: {
+            display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 10px',
+            borderRadius: 16, fontSize: 11, background: 'var(--dsw-alias-bg-layer-2,#f3f4f6)',
+            color: 'var(--dsw-alias-label-secondary,#4b5563)',
+          },
+        }, '🔑 外部验证: ', React.createElement('strong', { style: { color: 'var(--dsw-alias-brand-primary,#4f6ef7)' } }, modeLabel)),
+        React.createElement('div', {
+          style: {
+            display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 10px',
+            borderRadius: 16, fontSize: 11, background: 'var(--dsw-alias-bg-layer-2,#f3f4f6)',
+            color: 'var(--dsw-alias-label-secondary,#4b5563)',
+          },
+        }, '🔒 后台防篡改: ', React.createElement('strong', { style: { color: 'var(--dsw-alias-state-success-primary,#059669)' } }, adminLabel)),
+      ),
+
+      topMsg && React.createElement('div', {
+        style: {
+          marginTop: 12, padding: '8px 12px', borderRadius: 6, fontSize: 12,
+          background: topMsg.ok ? 'var(--dsw-alias-state-success-bg,#ecfdf5)' : 'var(--dsw-alias-state-error-bg,#fef2f2)',
+          color: topMsg.ok ? 'var(--dsw-alias-state-success-primary,#059669)' : 'var(--dsw-alias-state-error-primary,#dc2626)',
+        },
+      }, topMsg.text),
+    ),
+
+    enabled && React.createElement(React.Fragment, null,
+      // =========================================================================
+      // ---- 第一道防线：外部访问门禁（控制谁能进入 Web 界面使用 AI） ----
+      // =========================================================================
+      React.createElement('div', { style: s.card },
+        React.createElement('div', { style: { marginBottom: 14 } },
+          React.createElement('div', { style: { ...s.label, fontSize: 14, display: 'flex', alignItems: 'center', gap: 6 } },
+            '🛡️ 第一道防线：外部访问门禁（控制谁能使用 AI）',
+          ),
+          React.createElement('div', { style: { ...s.muted, marginTop: 3 } },
+            '控制外部设备通过局域网 IP 或公网隧道（Cloudflare/自建隧道）进入 DSH 聊天界面时的身份验证方式',
+          ),
+        ),
+
+        // 验证模式选择
+        React.createElement('div', { style: { marginBottom: 16 } },
+          React.createElement('label', { style: { ...s.label, display: 'block', marginBottom: 8, fontSize: 12 } }, '验证模式选择'),
+          React.createElement('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap' } },
+            [
+              { id: 'token_and_password', title: '🟢 扫码免密 + 密码认证 (推荐)', desc: '二维码自带专属 Token 扫码秒进；直接输 IP/公网域名需输密码' },
+              { id: 'password_only', title: '🔑 仅密码 / PIN 码登录', desc: '所有外部访问必须手动输入访问密码方可进入' },
+              { id: 'token_only', title: '🎫 仅安全 Token 免密', desc: '仅持有带安全 Token 的二维码或专属分享链接方可进入' },
+            ].map(opt => {
+              const isSel = mode === opt.id;
+              return React.createElement('div', {
+                key: opt.id,
+                onClick: () => handleChangeMode(opt.id),
+                style: {
+                  flex: '1 1 200px',
+                  padding: '10px 12px',
+                  borderRadius: 8,
+                  border: `1px solid ${isSel ? 'var(--dsw-alias-brand-primary,#4f6ef7)' : 'var(--dsw-alias-border-l2,#e5e7eb)'}`,
+                  background: isSel ? 'var(--dsw-alias-state-info-bg,#eff6ff)' : 'var(--dsw-alias-bg-layer-2,#f9fafb)',
+                  cursor: 'pointer',
+                  transition: 'all 0.15s ease',
+                },
+              },
+                React.createElement('div', { style: { fontSize: 13, fontWeight: isSel ? 600 : 500, color: isSel ? 'var(--dsw-alias-brand-primary,#4f6ef7)' : 'var(--dsw-alias-label-primary,currentColor)' } }, opt.title),
+                React.createElement('div', { style: { ...s.muted, fontSize: 11, marginTop: 4 } }, opt.desc),
+              );
+            })
+          ),
+        ),
+
+        // 防护生效范围
+        React.createElement('div', { style: { marginBottom: 16 } },
+          React.createElement('label', { style: { ...s.label, display: 'block', marginBottom: 8, fontSize: 12 } }, '防护生效通道'),
+          React.createElement('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap' } },
+            [
+              { id: 'all', title: '全部通道防护 (推荐)', desc: '局域网 IP 直连与公网隧道全部受安全保护' },
+              { id: 'public_only', title: '仅公网隧道开启防护', desc: '局域网内设备直接免密直连，公网隧道强制验证' },
+              { id: 'lan_only', title: '仅局域网开启防护', desc: '仅局域网直连需验证，公网隧道不开启' },
+            ].map(opt => {
+              const isSel = scope === opt.id;
+              return React.createElement('div', {
+                key: opt.id,
+                onClick: () => handleChangeScope(opt.id),
+                style: {
+                  flex: '1 1 180px',
+                  padding: '9px 12px',
+                  borderRadius: 8,
+                  border: `1px solid ${isSel ? 'var(--dsw-alias-brand-primary,#4f6ef7)' : 'var(--dsw-alias-border-l2,#e5e7eb)'}`,
+                  background: isSel ? 'var(--dsw-alias-state-info-bg,#eff6ff)' : 'var(--dsw-alias-bg-layer-2,#f9fafb)',
+                  cursor: 'pointer',
+                  transition: 'all 0.15s ease',
+                },
+              },
+                React.createElement('div', { style: { fontSize: 13, fontWeight: isSel ? 600 : 500, color: isSel ? 'var(--dsw-alias-brand-primary,#4f6ef7)' : 'var(--dsw-alias-label-primary,currentColor)' } }, opt.title),
+                React.createElement('div', { style: { ...s.muted, fontSize: 11, marginTop: 3 } }, opt.desc),
+              );
+            })
+          ),
+        ),
+
+        // 访客访问密码输入框 (当非 token_only 时展示)
+        mode !== 'token_only' && React.createElement('div', { style: { marginBottom: 16 } },
+          React.createElement('label', { style: { ...s.label, display: 'block', marginBottom: 6, fontSize: 12 } },
+            `设置外部访客访问密码 ${auth?.hasPassword ? '(✓ 已设置访客密码)' : '(⚠️ 尚未设置密码，直接输入 IP 将免密)'}`,
+          ),
+          React.createElement('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
+            React.createElement('input', {
+              type: showAccessPassword ? 'text' : 'password',
+              style: { ...s.input, flex: 1 },
+              placeholder: auth?.hasPassword ? '输入新密码以修改（留空保存可清除访客密码）' : '设置外部访客访问密码 / PIN 码',
+              value: accessPassword,
+              onChange: e => setAccessPassword(e.target.value),
+            }),
+            React.createElement('button', {
+              style: { ...s.btnGhost, height: 32, fontSize: 12, whiteSpace: 'nowrap', flexShrink: 0 },
+              onClick: () => setShowAccessPassword(v => !v),
+            }, showAccessPassword ? '隐藏' : '显示'),
+            React.createElement('button', {
+              style: {
+                ...s.btnPri, height: 32, fontSize: 12, whiteSpace: 'nowrap', flexShrink: 0,
+                background: saveAccessSuccess ? '#059669' : 'var(--dsw-alias-brand-primary, #4f6ef7)',
+                color: '#ffffff',
+                cursor: savingAccess ? 'wait' : 'pointer',
+              },
+              onClick: handleSaveAccessPassword,
+              disabled: savingAccess,
+            }, savingAccess ? '保存中…' : saveAccessSuccess ? '✓ 已成功保存！' : '保存访问密码'),
+          ),
+          React.createElement('div', { style: { ...s.muted, fontSize: 11, marginTop: 4 } },
+            '💡 当外部朋友或同事未通过二维码扫码，而是直接输入 IP 或公网域名访问时，需输入此密码登录。'
+          ),
+          msgAccess && React.createElement('div', {
+            style: {
+              marginTop: 8, padding: '6px 12px', borderRadius: 6, fontSize: 12,
+              background: msgAccess.ok ? 'var(--dsw-alias-state-success-bg,#ecfdf5)' : 'var(--dsw-alias-state-error-bg,#fef2f2)',
+              color: msgAccess.ok ? 'var(--dsw-alias-state-success-primary,#059669)' : 'var(--dsw-alias-state-error-primary,#dc2626)',
+            },
+          }, msgAccess.text),
+        ),
+
+        // 免密 Token 管理
+        mode !== 'password_only' && React.createElement('div', { style: s.block },
+          React.createElement('label', { style: { ...s.label, display: 'block', marginBottom: 6, fontSize: 12 } }, '免密扫码 Token (专属访问凭据)'),
+          React.createElement('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
+            React.createElement('code', { style: { ...s.code, flex: 1, padding: '6px 10px', background: 'var(--dsw-alias-bg-layer-1,#fff)', borderRadius: 6, border: '1px solid var(--dsw-alias-border-l2,#e5e7eb)' } },
+              auth?.secretToken ? `${auth.secretToken.slice(0, 10)}****************` : '未生成'
+            ),
+            React.createElement('button', {
+              style: { ...s.btnGhost, height: 32, fontSize: 12, whiteSpace: 'nowrap', flexShrink: 0 },
+              onClick: handleRegenerateToken,
+              title: '重新生成 Token，使之前分享的旧二维码和链接立即失效',
+            }, '🔄 重置安全 Token'),
+          ),
+          React.createElement('div', { style: { ...s.muted, fontSize: 11, marginTop: 4 } },
+            '💡 控制台生成的局域网与公网二维码已自动嵌入此 Token，手机扫码即可免密进入聊天界面（但不赋予后台管理设置权限）。'
+          ),
+        ),
+      ),
+
+      // =========================================================================
+      // ---- 第二道防线：后台管理防篡改（控制谁能修改本插件所有设置） ----
+      // =========================================================================
+      React.createElement('div', { style: s.card },
+        React.createElement('div', { style: { marginBottom: 14 } },
+          React.createElement('div', { style: { ...s.label, fontSize: 14, display: 'flex', alignItems: 'center', gap: 6 } },
+            '🔒 第二道防线：管理后台防篡改（控制谁能修改本插件所有设置）',
+          ),
+          React.createElement('div', { style: { ...s.muted, marginTop: 3 } },
+            '锁定整个插件设置后台（包含局域网、公网隧道、IM 机器人密钥与安全设置），防止他人随意篡改配置',
+          ),
+        ),
+
+        // 管理员密码设置
+        React.createElement('div', { style: { marginBottom: 16 } },
+          React.createElement('label', { style: { ...s.label, display: 'block', marginBottom: 6, fontSize: 12 } },
+            `设置独立管理员密码 ${auth?.hasAdminPassword ? '(✓ 已设置独立管理密码)' : '(未单独设置，默认使用上述访客访问密码)'}`,
+          ),
+          React.createElement('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
+            React.createElement('input', {
+              type: showAdminPassword ? 'text' : 'password',
+              style: { ...s.input, flex: 1 },
+              placeholder: auth?.hasAdminPassword ? '输入新密码以修改（留空保存可清除独立管理密码）' : '设置后台管理解锁密码（建议与访客密码不同）',
+              value: adminPassword,
+              onChange: e => setAdminPassword(e.target.value),
+            }),
+            React.createElement('button', {
+              style: { ...s.btnGhost, height: 32, fontSize: 12, whiteSpace: 'nowrap', flexShrink: 0 },
+              onClick: () => setShowAdminPassword(v => !v),
+            }, showAdminPassword ? '隐藏' : '显示'),
+            React.createElement('button', {
+              style: {
+                ...s.btnPri, height: 32, fontSize: 12, whiteSpace: 'nowrap', flexShrink: 0,
+                background: saveAdminSuccess ? '#059669' : 'var(--dsw-alias-brand-primary, #4f6ef7)',
+                color: '#ffffff',
+                cursor: savingAdmin ? 'wait' : 'pointer',
+              },
+              onClick: handleSaveAdminPassword,
+              disabled: savingAdmin,
+            }, savingAdmin ? '保存中…' : saveAdminSuccess ? '✓ 已成功保存！' : '保存管理密码'),
+          ),
+          React.createElement('div', { style: { ...s.muted, fontSize: 11, marginTop: 4, color: 'var(--dsw-alias-brand-primary,#4f6ef7)' } },
+            '🔑 核心作用：用于远程设备进入设置后台时的解锁验证。设置后，即便把访问密码告知他人，他人也无法进入设置后台改配置。'
+          ),
+          msgAdmin && React.createElement('div', {
+            style: {
+              marginTop: 8, padding: '6px 12px', borderRadius: 6, fontSize: 12,
+              background: msgAdmin.ok ? 'var(--dsw-alias-state-success-bg,#ecfdf5)' : 'var(--dsw-alias-state-error-bg,#fef2f2)',
+              color: msgAdmin.ok ? 'var(--dsw-alias-state-success-primary,#059669)' : 'var(--dsw-alias-state-error-primary,#dc2626)',
+            },
+          }, msgAdmin.text),
+        ),
+
+        // 远程管理权限控制策略
+        React.createElement('div', { style: s.block },
+          React.createElement('label', { style: { ...s.label, display: 'block', marginBottom: 8, fontSize: 12 } }, '远程设备管理权限策略'),
+          React.createElement('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap' } },
+            [
+              { id: 'password_unlock', title: '🔒 需密码解锁 (推荐)', desc: '远程手机/外网打开本插件设置时默认全局锁定，输入管理密码解锁后方可使用' },
+              { id: 'local_only', title: '🚫 仅限电脑本机管理 (最严格)', desc: '远程设备彻底锁定整个设置后台，仅允许在 127.0.0.1 电脑本机上操作' },
+              { id: 'open', title: '🔓 宽松模式', desc: '任何已通过第一道防线登录的设备均可直接修改所有配置' },
+            ].map(opt => {
+              const isSel = adminPolicy === opt.id;
+              return React.createElement('div', {
+                key: opt.id,
+                onClick: () => handleChangeAdminPolicy(opt.id),
+                style: {
+                  flex: '1 1 180px',
+                  padding: '10px 12px',
+                  borderRadius: 8,
+                  border: `1px solid ${isSel ? 'var(--dsw-alias-brand-primary,#4f6ef7)' : 'var(--dsw-alias-border-l2,#e5e7eb)'}`,
+                  background: isSel ? 'var(--dsw-alias-state-info-bg,#eff6ff)' : 'var(--dsw-alias-bg-layer-2,#f9fafb)',
+                  cursor: 'pointer',
+                  transition: 'all 0.15s ease',
+                },
+              },
+                React.createElement('div', { style: { fontSize: 13, fontWeight: isSel ? 600 : 500, color: isSel ? 'var(--dsw-alias-brand-primary,#4f6ef7)' : 'var(--dsw-alias-label-primary,currentColor)' } }, opt.title),
+                React.createElement('div', { style: { ...s.muted, fontSize: 11, marginTop: 4 } }, opt.desc),
+              );
+            })
+          ),
+        ),
+      ),
+    ),
+  );
+});
+
 // ---- 通用 IM 平台卡片 ----
 
 function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatusChange }) {
@@ -343,16 +785,18 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
       setCfgDraft({
         digestIntervalSec:  String(platform.config.digestIntervalSec  ?? 300),
         approvalTimeoutSec: String(platform.config.approvalTimeoutSec ?? 600),
-        maxMessageChars:    String(platform.config.maxMessageChars    ?? 2000),
+        maxMessageChars:    String(platform.config.maxMessageChars    ?? (platformId === 'telegram' ? 4096 : 2000)),
         sendChunkDelayMs:   String(platform.config.sendChunkDelayMs   ?? 1500),
         appId: platform.config.appId ?? '',
         // Secret 不由后端回传；空值表示沿用已保存密钥
         clientSecret: '',
         appSecret: '',
         domain: platform.config.domain ?? 'feishu',
+        botToken: '',
+        proxy: platform.config.proxy ?? '',
       });
     }
-  }, [platform?.config]);
+  }, [platform?.config, platformId]);
 
   // 向上传递连接状态（供平台列表卡片绿点使用）
   React.useEffect(() => {
@@ -424,10 +868,10 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
       ...d,
       digestIntervalSec: '300',
       approvalTimeoutSec: '600',
-      maxMessageChars: '2000',
+      maxMessageChars: platformId === 'telegram' ? '4096' : '2000',
       sendChunkDelayMs: '1500',
     }));
-  }, []);
+  }, [platformId]);
 
   // 高级设置保存
   const saveConfig = React.useCallback(async () => {
@@ -438,7 +882,7 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
       maxMessageChars:    Number(cfgDraft.maxMessageChars),
       sendChunkDelayMs:   Number(cfgDraft.sendChunkDelayMs),
     };
-    // QQ / 飞书 平台额外携带凭证
+    // QQ / 飞书 / Telegram 平台额外携带凭证
     if (platformId === 'qq') {
       payload.appId = cfgDraft.appId.trim();
       payload.clientSecret = cfgDraft.clientSecret.trim();
@@ -446,6 +890,9 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
       payload.appId = cfgDraft.appId.trim();
       payload.appSecret = cfgDraft.appSecret.trim();
       payload.domain = cfgDraft.domain || 'feishu';
+    } else if (platformId === 'telegram') {
+      payload.botToken = cfgDraft.botToken.trim();
+      payload.proxy = cfgDraft.proxy.trim();
     }
     await act(BRIDGE_ENDPOINTS.platformSetConfig, payload);
   }, [act, cfgDraft, platformId]);
@@ -461,6 +908,10 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
     (platformId === 'feishu' && (
       cfgDraft.appId !== (platform.config.appId ?? '') ||
       cfgDraft.appSecret !== (platform.config.appSecret ?? '')
+    )) ||
+    (platformId === 'telegram' && (
+      cfgDraft.botToken !== '' ||
+      cfgDraft.proxy !== (platform.config.proxy ?? '')
     ))
   );
 
@@ -523,6 +974,16 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
         target: '_blank', rel: 'noopener noreferrer',
         style: s.btnGhost,
       }, '🌐 飞书开放平台'),
+      platformId === 'telegram' && React.createElement('a', {
+        href: 'https://github.com/wenbin-wb/dsh-bridge/blob/main/docs/telegram-usage.md',
+        target: '_blank', rel: 'noopener noreferrer',
+        style: s.btnGhost,
+      }, '📖 Telegram 使用说明'),
+      platformId === 'telegram' && React.createElement('a', {
+        href: 'https://t.me/BotFather',
+        target: '_blank', rel: 'noopener noreferrer',
+        style: s.btnGhost,
+      }, '🌐 @BotFather 申请 Bot'),
       React.createElement('button', {
         style: s.btnGhost,
         onClick: () => setShowHelp(v => !v),
@@ -643,8 +1104,8 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
           title: '清除登录凭证，下次需重新配置',
         }, '解绑账号'),
       ),
-      // 飞书专属：手机扫码直达 Bot 对话
-      platformId === 'feishu' && platform.botQr && React.createElement('div', {
+      // 飞书 / Telegram 扫码直达对话引导卡片
+      (platformId === 'feishu' || platformId === 'telegram') && platform.botQr && React.createElement('div', {
         style: {
           marginTop: 12,
           padding: 12,
@@ -657,11 +1118,11 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
           flexWrap: 'wrap',
         },
       },
-        React.createElement('img', { src: platform.botQr, alt: 'Feishu Bot QR', style: { width: 110, height: 110, borderRadius: 8, border: '1px solid var(--dsw-alias-border-l2,#e5e7eb)', padding: 4, background: '#fff' } }),
+        React.createElement('img', { src: platform.botQr, alt: `${platformName} Bot QR`, style: { width: 110, height: 110, borderRadius: 8, border: '1px solid var(--dsw-alias-border-l2,#e5e7eb)', padding: 4, background: '#fff' } }),
         React.createElement('div', { style: { flex: 1, minWidth: 160 } },
-          React.createElement('div', { style: { ...s.label, fontSize: 13, fontWeight: 600 } }, '📱 手机飞书扫码直达对话'),
+          React.createElement('div', { style: { ...s.label, fontSize: 13, fontWeight: 600 } }, `📱 手机 ${platformName} 扫码直达对话`),
           React.createElement('div', { style: { ...s.muted, fontSize: 12, marginTop: 4, lineHeight: 1.5 } },
-            '用飞书手机 App 扫描左侧二维码，立即打开与 Bot 对话；发送首条消息自动完成白名单授权。'
+            `用 ${platformName} 扫描左侧二维码，立即打开与 Bot 对话；发送首条消息自动完成白名单授权。`
           ),
           platform.botLink && React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 8 } },
             React.createElement('a', {
@@ -669,13 +1130,13 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
               target: '_blank',
               rel: 'noopener noreferrer',
               style: { ...s.btnGhost, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 4, padding: '4px 10px', fontSize: 12 },
-            }, '在飞书客户端打开 ↗'),
+            }, `在 ${platformName} 客户端打开 ↗`),
           ),
         ),
       ),
     ),
 
-    // 未配置 / 登录中：表单（QQ / 飞书）或二维码（微信）
+    // 未配置 / 登录中：表单（QQ / 飞书 / Telegram）或二维码（微信）
     (!platform?.configured || showQr) && React.createElement('div', { style: s.block },
       showQr && login.qr
         ? React.createElement('div', null,
@@ -687,7 +1148,7 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
             ),
             login.error && React.createElement('div', { style: { ...s.muted, marginTop: 4, color: 'var(--dsw-alias-state-warn-primary,#92400e)' } }, login.error),
           )
-        : (platformId === 'qq' || platformId === 'feishu')
+        : (platformId === 'qq' || platformId === 'feishu' || platformId === 'telegram')
           ? React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4 } },
               platformId === 'feishu' && React.createElement('div', {
                 style: {
@@ -704,40 +1165,76 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
                 React.createElement('code', { style: { ...s.code, fontSize: 11, background: 'var(--dsw-alias-bg-layer-2,#f3f4f6)', padding: '2px 4px', borderRadius: 4 } }, 'npx feishu-bot-bootstrap'),
                 React.createElement('span', { style: s.muted }, ' 手机扫码一键自动创建应用并输出凭证；或在下方手动填入凭证。')
               ),
-              React.createElement('div', null,
-                React.createElement('div', { style: { ...s.muted, marginBottom: 4 } },
-                  platformId === 'qq' ? 'AppID — QQ 开放平台机器人应用 ID' : 'App ID — 飞书开放平台自建应用 ID (cli_xxx)'
-                ),
-                React.createElement('input', {
-                  style: { ...s.input, width: '100%' },
-                  placeholder: platformId === 'qq' ? '请输入 AppID' : '请输入 App ID (如 cli_a1b2c3d4...)',
-                  value: cfgDraft?.appId ?? '',
-                  onChange: (e) => setCfgDraft(d => ({ ...d, appId: e.target.value })),
-                }),
-              ),
-              React.createElement('div', null,
-                React.createElement('div', { style: { ...s.muted, marginBottom: 4 } },
-                  platformId === 'qq' ? 'ClientSecret — QQ 开放平台机器人密钥' : 'App Secret — 飞书开放平台应用密钥'
-                ),
-                React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center' } },
-                  React.createElement('input', {
-                    style: { ...s.input, flex: 1 },
-                    type: showSecret ? 'text' : 'password',
-                    placeholder: platformId === 'qq' ? '请输入 ClientSecret' : '请输入 App Secret',
-                    value: platformId === 'qq' ? (cfgDraft?.clientSecret ?? '') : (cfgDraft?.appSecret ?? ''),
-                    onChange: (e) => setCfgDraft(d => platformId === 'qq' ? ({ ...d, clientSecret: e.target.value }) : ({ ...d, appSecret: e.target.value })),
-                  }),
-                  React.createElement('button', {
-                    style: { ...s.btnGhost, height: 32, padding: '0 10px', fontSize: 13, flexShrink: 0 },
-                    onClick: () => setShowSecret(v => !v),
-                    type: 'button',
-                    title: showSecret ? '隐藏密钥' : '显示明文',
-                  }, showSecret ? '🙈 隐藏' : '👁️ 显示'),
-                ),
-              ),
+              platformId === 'telegram'
+                ? React.createElement(React.Fragment, null,
+                    React.createElement('div', null,
+                      React.createElement('div', { style: { ...s.muted, marginBottom: 4 } }, 'Bot Token — Telegram @BotFather 下发的机器人 Token'),
+                      React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center' } },
+                        React.createElement('input', {
+                          style: { ...s.input, flex: 1 },
+                          type: showSecret ? 'text' : 'password',
+                          placeholder: '请输入 Telegram Bot Token (如 123456789:ABCdef...)',
+                          value: cfgDraft?.botToken ?? '',
+                          onChange: (e) => setCfgDraft(d => ({ ...d, botToken: e.target.value })),
+                        }),
+                        React.createElement('button', {
+                          style: { ...s.btnGhost, height: 32, padding: '0 10px', fontSize: 13, flexShrink: 0 },
+                          onClick: () => setShowSecret(v => !v),
+                          type: 'button',
+                          title: showSecret ? '隐藏密钥' : '显示明文',
+                        }, showSecret ? '🙈 隐藏' : '👁️ 显示'),
+                      ),
+                    ),
+                    React.createElement('div', null,
+                      React.createElement('div', { style: { ...s.muted, marginBottom: 4 } }, '网络代理 (可选) — 支持国内 HTTP / HTTPS 代理'),
+                      React.createElement('input', {
+                        style: { ...s.input, width: '100%' },
+                        placeholder: '可选，例如 http://127.0.0.1:7890（为空则直连或读取环境变量）',
+                        value: cfgDraft?.proxy ?? '',
+                        onChange: (e) => setCfgDraft(d => ({ ...d, proxy: e.target.value })),
+                      }),
+                    ),
+                  )
+                : React.createElement(React.Fragment, null,
+                    React.createElement('div', null,
+                      React.createElement('div', { style: { ...s.muted, marginBottom: 4 } },
+                        platformId === 'qq' ? 'AppID — QQ 开放平台机器人应用 ID' : 'App ID — 飞书开放平台自建应用 ID (cli_xxx)'
+                      ),
+                      React.createElement('input', {
+                        style: { ...s.input, width: '100%' },
+                        placeholder: platformId === 'qq' ? '请输入 AppID' : '请输入 App ID (如 cli_a1b2c3d4...)',
+                        value: cfgDraft?.appId ?? '',
+                        onChange: (e) => setCfgDraft(d => ({ ...d, appId: e.target.value })),
+                      }),
+                    ),
+                    React.createElement('div', null,
+                      React.createElement('div', { style: { ...s.muted, marginBottom: 4 } },
+                        platformId === 'qq' ? 'ClientSecret — QQ 开放平台机器人密钥' : 'App Secret — 飞书开放平台应用密钥'
+                      ),
+                      React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center' } },
+                        React.createElement('input', {
+                          style: { ...s.input, flex: 1 },
+                          type: showSecret ? 'text' : 'password',
+                          placeholder: platformId === 'qq' ? '请输入 ClientSecret' : '请输入 App Secret',
+                          value: platformId === 'qq' ? (cfgDraft?.clientSecret ?? '') : (cfgDraft?.appSecret ?? ''),
+                          onChange: (e) => setCfgDraft(d => platformId === 'qq' ? ({ ...d, clientSecret: e.target.value }) : ({ ...d, appSecret: e.target.value })),
+                        }),
+                        React.createElement('button', {
+                          style: { ...s.btnGhost, height: 32, padding: '0 10px', fontSize: 13, flexShrink: 0 },
+                          onClick: () => setShowSecret(v => !v),
+                          type: 'button',
+                          title: showSecret ? '隐藏密钥' : '显示明文',
+                        }, showSecret ? '🙈 隐藏' : '👁️ 显示'),
+                      ),
+                    ),
+                  ),
               React.createElement('div', null,
                 React.createElement('a', {
-                  href: platformId === 'qq' ? 'https://bot.q.qq.com/wiki/develop/api-v2/' : 'https://open.feishu.cn/app',
+                  href: platformId === 'qq'
+                    ? 'https://bot.q.qq.com/wiki/develop/api-v2/'
+                    : platformId === 'feishu'
+                      ? 'https://open.feishu.cn/app'
+                      : 'https://t.me/BotFather',
                   target: '_blank', rel: 'noopener noreferrer',
                   style: s.btnLink,
                 }, platformId === 'qq' ? '📖 前往 QQ 开放平台申请机器人' : '📖 前往飞书开放平台创建企业自建应用'),
@@ -746,7 +1243,9 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
                 React.createElement('button', {
                   style: { ...s.btnPri, opacity: busy ? 0.5 : 1 },
                   onClick: saveConfig,
-                  disabled: busy || !cfgDraft?.appId?.trim() || (platformId === 'qq' ? !cfgDraft?.clientSecret?.trim() : !cfgDraft?.appSecret?.trim()),
+                  disabled: busy || (platformId === 'telegram'
+                    ? !cfgDraft?.botToken?.trim()
+                    : (!cfgDraft?.appId?.trim() || (platformId === 'qq' ? !cfgDraft?.clientSecret?.trim() : !cfgDraft?.appSecret?.trim()))),
                 }, busy ? '保存中…' : '保存并连接'),
                 login.phase === 'error' && React.createElement('div', { style: { ...s.muted, fontSize: 12 } }, login.error ?? '连接失败'),
               ),
@@ -1006,9 +1505,10 @@ function VersionBanner({ rpcCall }) {
 // ---- Tab Bar ----
 
 const TABS = [
-  { id: 'lan',    label: '局域网',   icon: Icons.lan },
-  { id: 'tunnel', label: '公网隧道', icon: Icons.tunnel },
-  { id: 'im',     label: 'IM 机器人', icon: Icons.bot },
+  { id: 'lan',      label: '局域网',    icon: Icons.lan },
+  { id: 'tunnel',   label: '公网隧道',  icon: Icons.tunnel },
+  { id: 'im',       label: 'IM 机器人', icon: Icons.bot },
+  { id: 'security', label: '安全认证',  icon: Icons.security },
 ];
 
 function TabBar({ active, onChange, dots }) {
@@ -1068,6 +1568,43 @@ function BridgePanel({ rpcCall }) {
   const [platforms, setPlatforms] = React.useState(null);
   const [selectedPlatform, setSelectedPlatform] = React.useState('wechat');
 
+  // 远程设备管理权限解锁状态
+  const isLocalhost = typeof window === 'undefined' || (
+    !window.location.hostname ||
+    window.location.hostname === '127.0.0.1' ||
+    window.location.hostname === 'localhost' ||
+    window.location.hostname === '::1' ||
+    window.location.hostname === '' ||
+    window.location.protocol === 'file:' ||
+    window.location.protocol === 'vscode-webview:' ||
+    window.location.protocol === 'app:' ||
+    window.location.hostname.endsWith('.local')
+  );
+  const [adminUnlocked, setAdminUnlocked] = React.useState(false);
+  const [unlockPassword, setUnlockPassword] = React.useState('');
+  const [unlockErr, setUnlockErr] = React.useState(null);
+  const [unlocking, setUnlocking] = React.useState(false);
+  const [showForgotGuide, setShowForgotGuide] = React.useState(false);
+
+  const handleUnlockAdmin = React.useCallback(async (e) => {
+    e?.preventDefault?.();
+    setUnlocking(true);
+    setUnlockErr(null);
+    try {
+      const res = await rpcCall(BRIDGE_ENDPOINTS.authAdminUnlock, { password: unlockPassword });
+      if (res?.ok) {
+        setAdminUnlocked(true);
+        setUnlockPassword('');
+      } else {
+        setUnlockErr(res?.error?.message || '管理员密码错误');
+      }
+    } catch (err) {
+      setUnlockErr(err.message || '解锁请求失败');
+    } finally {
+      setUnlocking(false);
+    }
+  }, [rpcCall, unlockPassword]);
+
   const load = React.useCallback(async (quiet = false) => {
     try {
       const r = await rpcCall(BRIDGE_ENDPOINTS.getStatus, {});
@@ -1123,6 +1660,8 @@ function BridgePanel({ rpcCall }) {
     act(BRIDGE_ENDPOINTS.saveCustomTunnelConfig, { serverUrl, accessToken })
   , [act]);
 
+  const navSecurity = React.useCallback(() => setActiveTab('security'), []);
+
   if (!status && !err) {
     return React.createElement('div', {
       style: { padding: 32, color: 'var(--dsw-alias-label-tertiary,#9ca3af)', fontSize: 13 },
@@ -1136,9 +1675,10 @@ function BridgePanel({ rpcCall }) {
     p.status === 'connected' || p.status === 'starting' || p.status === 'reconnecting'
   );
   const dots = {
-    lan:    !!(status?.proxy?.running),
-    tunnel: !!(status?.cloudflared?.running || ct?.running),
-    im:     !!imConnected,
+    lan:      !!(status?.proxy?.running),
+    tunnel:   !!(status?.cloudflared?.running || ct?.running),
+    im:       !!imConnected,
+    security: !!(status?.auth?.enabled),
   };
 
   // Tab 内容
@@ -1148,6 +1688,8 @@ function BridgePanel({ rpcCall }) {
       title: '局域网访问',
       desc: '同一 Wi-Fi 下的设备可直接扫码访问',
       data: { running: status?.proxy?.running, url: status?.lan?.url, qr: status?.lan?.qr },
+      auth: status?.auth,
+      onNavigateSecurity: navSecurity,
     });
   } else if (activeTab === 'tunnel') {
     tabContent = React.createElement(React.Fragment, null,
@@ -1160,6 +1702,8 @@ function BridgePanel({ rpcCall }) {
           qr: status?.cloudflared?.qr,
           state: status?.cloudflared?.state,
         },
+        auth: status?.auth,
+        onNavigateSecurity: navSecurity,
         onStart: onStartCloudflared,
         onStop:  onStopCloudflared,
         onReset: status?.cloudflared?.running ? onResetCloudflared : null,
@@ -1174,6 +1718,8 @@ function BridgePanel({ rpcCall }) {
           qr: ct?.qr,
           state: ct?.state,
         },
+        auth: status?.auth,
+        onNavigateSecurity: navSecurity,
         onStart: onStartCustom,
         onStop:  onStopCustom,
       },
@@ -1185,6 +1731,12 @@ function BridgePanel({ rpcCall }) {
         }),
       ),
     );
+  } else if (activeTab === 'security') {
+    tabContent = React.createElement(AccessAuthCard, {
+      auth: status?.auth,
+      rpcCall,
+      onUpdate: () => load(true),
+    });
   } else if (activeTab === 'im') {
     // 从 listPlatforms 动态生成平台列表
     const IM_PLATFORMS = [
@@ -1249,11 +1801,116 @@ function BridgePanel({ rpcCall }) {
     );
   }
 
+  const auth = status?.auth;
+  const policy = auth?.adminPolicy ?? 'password_unlock';
+  const isLocked = !isLocalhost && auth?.enabled && policy !== 'open' && !adminUnlocked;
+
+  // 远程设备被锁定：全局展示锁定页面，阻断所有 Tab 的查看与操作
+  if (isLocked) {
+    return React.createElement('div', { style: { maxWidth: 620 } },
+      policy === 'local_only' ? (
+        React.createElement('div', {
+          style: { ...s.card, textAlign: 'center', padding: '36px 20px', marginTop: 10 },
+        },
+          React.createElement('div', { style: { fontSize: 40, marginBottom: 12 } }, '🛡️'),
+          React.createElement('div', { style: { ...s.label, fontSize: 16, fontWeight: 600, marginBottom: 8 } }, '管理控制台已锁定（仅限电脑本机管理）'),
+          React.createElement('div', { style: { ...s.muted, maxWidth: 420, margin: '0 auto', lineHeight: 1.6, fontSize: 13 } },
+            '当前设备通过远程局域网或公网接入。已开启「仅限电脑本机管理」最高安全策略，远程设备禁止查看与修改任何网络与机器人配置。如需管理请在电脑本机（127.0.0.1）上操作。'
+          ),
+          React.createElement('div', { style: { marginTop: 20 } },
+            React.createElement('button', {
+              type: 'button',
+              style: { ...s.btnLink, fontSize: 12, color: 'var(--dsw-alias-label-secondary,#6b7280)' },
+              onClick: () => setShowForgotGuide(v => !v),
+            }, '❓ 远程如何救急解除锁定？'),
+          ),
+          showForgotGuide && React.createElement('div', {
+            style: {
+              marginTop: 14, padding: '12px 14px', borderRadius: 8, fontSize: 12, lineHeight: 1.6,
+              background: 'var(--dsw-alias-bg-layer-2,#f3f4f6)', border: '1px solid var(--dsw-alias-border-l2,#e5e7eb)',
+              color: 'var(--dsw-alias-label-secondary,#4b5563)', textAlign: 'left', maxWidth: 420, margin: '14px auto 0',
+            },
+          },
+            React.createElement('div', { style: { fontWeight: 600, color: 'var(--dsw-alias-label-primary,currentColor)', marginBottom: 4 } }, '🛟 救急解除锁定指引：'),
+            React.createElement('div', null, '1. ', React.createElement('strong', null, '电脑本机直连修改'), '：直接在运行本程序的电脑本机打开本控制台（127.0.0.1 享有物理免锁特权），可随时修改策略或清除密码。'),
+            React.createElement('div', { style: { marginTop: 4 } }, '2. ', React.createElement('strong', null, '服务器救急指令'), '：在宿主电脑/服务器终端执行 ', React.createElement('code', { style: s.code }, 'touch ~/.dsh/dsh-bridge/reset-auth'), ' 即可瞬间清空密码恢复初始状态。'),
+          ),
+        )
+      ) : (
+        React.createElement('div', {
+          style: { ...s.card, maxWidth: 440, margin: '20px auto', padding: '32px 24px' },
+        },
+          React.createElement('div', { style: { textAlign: 'center', marginBottom: 20 } },
+            React.createElement('div', { style: { fontSize: 40, marginBottom: 10 } }, '🔒'),
+            React.createElement('div', { style: { ...s.label, fontSize: 16, fontWeight: 600 } }, '管理控制台已锁定'),
+            React.createElement('div', { style: { ...s.muted, fontSize: 12, marginTop: 6, lineHeight: 1.5 } },
+              '当前设备为远程访问。为保护您的网络与平台配置安全，请输入管理员密码解锁管理权限。'
+            ),
+          ),
+          React.createElement('form', {
+            onSubmit: handleUnlockAdmin,
+            style: { display: 'flex', flexDirection: 'column', gap: 12 },
+          },
+            React.createElement('input', {
+              type: 'password',
+              style: s.input,
+              placeholder: '输入后台管理密码',
+              value: unlockPassword,
+              onChange: (e) => setUnlockPassword(e.target.value),
+              autoFocus: true,
+            }),
+            unlockErr && React.createElement('div', {
+              style: { fontSize: 12, color: 'var(--dsw-alias-state-error-primary,#dc2626)' },
+            }, unlockErr),
+            React.createElement('button', {
+              type: 'submit',
+              style: { ...s.btnPri, width: '100%', justifyContent: 'center', height: 36, background: '#4f6ef7', color: '#ffffff' },
+              disabled: unlocking,
+            }, unlocking ? '验证中…' : '解锁管理权限'),
+          ),
+          React.createElement('div', { style: { marginTop: 16, textAlign: 'center' } },
+            React.createElement('button', {
+              type: 'button',
+              style: { ...s.btnLink, fontSize: 12, color: 'var(--dsw-alias-label-secondary,#6b7280)' },
+              onClick: () => setShowForgotGuide(v => !v),
+            }, '❓ 忘记后台管理密码？'),
+          ),
+          showForgotGuide && React.createElement('div', {
+            style: {
+              marginTop: 12, padding: '12px 14px', borderRadius: 8, fontSize: 12, lineHeight: 1.6,
+              background: 'var(--dsw-alias-bg-layer-2,#f3f4f6)', border: '1px solid var(--dsw-alias-border-l2,#e5e7eb)',
+              color: 'var(--dsw-alias-label-secondary,#4b5563)', textAlign: 'left',
+            },
+          },
+            React.createElement('div', { style: { fontWeight: 600, color: 'var(--dsw-alias-label-primary,currentColor)', marginBottom: 4 } }, '🛟 找回与重置密码指引：'),
+            React.createElement('div', null, '1. ', React.createElement('strong', null, '电脑本机直连修改'), '：直接在运行本程序的电脑本机打开本控制台（127.0.0.1 享有物理免锁特权），可随时修改管理密码。'),
+            React.createElement('div', { style: { marginTop: 4 } }, '2. ', React.createElement('strong', null, '服务器救急指令'), '：在宿主电脑终端执行 ', React.createElement('code', { style: s.code }, 'touch ~/.dsh/dsh-bridge/reset-auth'), ' 即可瞬间清空密码恢复初始状态。'),
+          ),
+        )
+      )
+    );
+  }
+
   return React.createElement('div', { style: { maxWidth: 620 } },
     err && React.createElement('div', {
       style: { ...s.card, background: 'var(--dsw-alias-state-error-bg,#fef2f2)', color: 'var(--dsw-alias-state-error-primary,#dc2626)', fontSize: 13, marginBottom: 16 },
     }, err),
 
+    !isLocalhost && adminUnlocked && React.createElement('div', {
+      style: {
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        padding: '8px 14px', background: 'var(--dsw-alias-state-info-bg,#eff6ff)',
+        border: '1px solid var(--dsw-alias-brand-primary,#4f6ef7)', borderRadius: 8,
+        marginBottom: 14, fontSize: 12, color: 'var(--dsw-alias-brand-primary,#4f6ef7)',
+      },
+    },
+      React.createElement('span', null, '🔓 管理员权限已解锁（当前临时会话有效）'),
+      React.createElement('button', {
+        style: { ...s.btnGhost, height: 24, fontSize: 11, padding: '0 8px' },
+        onClick: () => setAdminUnlocked(false),
+      }, '🔒 重新锁定后台'),
+    ),
+
     React.createElement(VersionBanner, { rpcCall }),
 
     React.createElement(TabBar, { active: activeTab, onChange: setActiveTab, dots }),