@wenbin_wb/dsh-bridge 2.4.0 → 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 }) {
@@ -1063,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 }) {
@@ -1125,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, {});
@@ -1180,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 },
@@ -1193,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 内容
@@ -1205,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,
@@ -1217,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,
@@ -1231,6 +1718,8 @@ function BridgePanel({ rpcCall }) {
           qr: ct?.qr,
           state: ct?.state,
         },
+        auth: status?.auth,
+        onNavigateSecurity: navSecurity,
         onStart: onStartCustom,
         onStop:  onStopCustom,
       },
@@ -1242,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 = [
@@ -1306,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 }),