dsh-remote-plugin 0.6.12 → 0.6.14

package/public/admin.html

@@ -79,6 +79,30 @@
     .token-row code { flex: none; width: 100%; background: var(--dsr-bg); border: 1px solid var(--dsr-line); border-radius: 8px; padding: 8px 10px; font-size: 12px; white-space: nowrap; overflow-x: auto; }
     .token-actions { display: flex; gap: 8px; flex-wrap: wrap; }
     .token-actions .mini-btn { flex: 1 1 auto; text-align: center; padding: 6px 8px; font-size: 12.5px; }
+    .device-key-card { margin: 0 0 14px; }
+    .device-key-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; border:1px solid var(--dsr-line); border-radius:16px; background:var(--dsr-panel); }
+    .device-key-toggle-copy { min-width:0; }
+    .device-key-toggle-title { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:750; }
+    .device-key-toggle-desc { margin-top:3px; color:var(--dsr-muted); font-size:11px; line-height:1.45; }
+    .device-key-toggle-actions { display:flex; align-items:center; gap:8px; flex:none; }
+    .device-key-switch { position:relative; width:42px; height:24px; flex:none; }
+    .device-key-switch input { position:absolute; opacity:0; pointer-events:none; }
+    .device-key-switch span { position:absolute; inset:0; border:1px solid var(--dsr-line); border-radius:999px; background:var(--dsr-bg-2); cursor:pointer; transition:.18s ease; }
+    .device-key-switch span::after { content:''; position:absolute; width:18px; height:18px; left:2px; top:2px; border-radius:50%; background:var(--dsr-muted); transition:.18s ease; }
+    .device-key-switch input:checked + span { border-color:var(--dsr-accent-line); background:var(--dsr-accent-soft); }
+    .device-key-switch input:checked + span::after { transform:translateX(18px); background:var(--dsr-accent-strong); }
+    .device-key-switch input:focus-visible + span { outline:2px solid var(--dsr-accent-strong); outline-offset:2px; }
+    .device-key-panel { margin-top:10px; border:1px solid var(--dsr-line); border-radius:16px; overflow:hidden; background:var(--dsr-panel); }
+    .device-key-grid { display:grid; grid-template-columns:minmax(120px,.8fr) minmax(110px,.65fr) minmax(190px,1.4fr) auto; gap:10px; align-items:center; padding:10px 12px; }
+    .device-key-grid + .device-key-grid { border-top:1px solid var(--dsr-line); }
+    .device-key-grid.head { color:var(--dsr-muted); background:var(--dsr-bg-2); font-size:11px; font-weight:750; }
+    .device-key-grid code { display:block; min-width:0; overflow-x:auto; white-space:nowrap; padding:7px 9px; border:1px solid var(--dsr-line); border-radius:8px; background:var(--dsr-bg); font-size:11px; }
+    .device-key-note { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    .device-key-note button { margin-left:5px; padding:1px 6px; }
+    .device-key-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
+    .device-key-actions .mini-btn { padding:5px 7px; font-size:11px; }
+    .device-key-ip { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; white-space:nowrap; }
+    .device-key-empty { padding:16px; color:var(--dsr-muted); font-size:12px; text-align:center; }
     .gateway-port-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 12px; background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius); }
     .gateway-port-row label { font-size: 12px; color: var(--dsr-muted); flex: none; }
     .gateway-port-row input { width: 92px; background: var(--dsr-bg); color: var(--dsr-text); border: 1px solid var(--dsr-line); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; outline: none; }
@@ -228,6 +252,31 @@
     .admin-hero-action { min-height:36px; padding:7px 13px; border-color:var(--dsr-accent-strong); background:var(--dsr-accent-strong); color:var(--dsr-on-accent); font-weight:700; }
     .admin-hero.plugin .admin-hero-action { border-color:var(--dsr-accent-strong); background:var(--dsr-accent-strong); }
     .admin-hero.offline .admin-hero-action { border-color:var(--dsr-accent-line); background:var(--dsr-accent-soft); color:var(--dsr-accent-strong); }
+    .doctor-card { margin:0 0 16px; border:1px solid var(--dsr-line); border-radius:20px; background:linear-gradient(145deg,var(--dsr-panel),var(--dsr-bg-2)); box-shadow:0 12px 30px var(--dsr-shadow); overflow:hidden; }
+    .doctor-head { width:100%; display:flex; align-items:center; gap:12px; padding:14px 16px; border:0; background:transparent; color:var(--dsr-text); text-align:left; cursor:pointer; font:inherit; }
+    .doctor-head:focus-visible { outline:2px solid var(--dsr-accent-strong); outline-offset:-3px; }
+    .doctor-title { min-width:0; flex:1; }
+    .doctor-title strong { display:block; font-size:14px; }
+    .doctor-title span { display:block; margin-top:3px; color:var(--dsr-muted); font-size:11px; line-height:1.45; }
+    .doctor-progress { flex:none; padding:4px 9px; border:1px solid var(--dsr-accent-line); border-radius:999px; color:var(--dsr-accent-strong); background:var(--dsr-accent-soft); font-size:11px; font-weight:750; }
+    .doctor-chevron { flex:none; color:var(--dsr-muted); transition:transform .18s ease; }
+    .doctor-card.expanded .doctor-chevron { transform:rotate(180deg); }
+    .doctor-body { display:none; padding:0 16px 16px; }
+    .doctor-card.expanded .doctor-body { display:block; }
+    .doctor-summary { margin:0 0 10px; padding:9px 11px; border-radius:11px; color:var(--dsr-muted); background:var(--dsr-bg); font-size:12px; line-height:1.5; }
+    .doctor-summary.ok { color:var(--dsr-success); background:var(--dsr-success-soft); }
+    .doctor-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
+    .doctor-step { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:9px; align-items:start; padding:11px; border:1px solid var(--dsr-line); border-radius:13px; background:var(--dsr-panel-2); }
+    .doctor-mark { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:var(--dsr-muted); background:var(--dsr-bg); font-size:12px; font-weight:800; }
+    .doctor-step.pass .doctor-mark { color:var(--dsr-success); background:var(--dsr-success-soft); }
+    .doctor-step.fail .doctor-mark { color:var(--dsr-error); background:var(--dsr-error-soft); }
+    .doctor-step.warn .doctor-mark { color:var(--dsr-warning); background:var(--dsr-warning-soft); }
+    .doctor-copy { min-width:0; }
+    .doctor-copy strong { display:block; font-size:12px; }
+    .doctor-copy span { display:block; margin-top:3px; color:var(--dsr-muted); font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
+    .doctor-action { align-self:center; padding:5px 8px; font-size:11px; }
+    .doctor-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; color:var(--dsr-muted); font-size:11px; }
+    .doctor-foot-actions { display:flex; gap:7px; flex-wrap:wrap; }
     #stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
     #stats .stat-card:nth-child(n+5) { background:transparent; box-shadow:none; }
     #stats .stat-card:nth-child(n+5) .v { font-size:20px; }
@@ -236,6 +285,7 @@
       .admin-hero h2 { font-size:23px; }
       .admin-hero-side { align-items:stretch; flex-direction:row; justify-content:space-between; }
       .admin-hero-action { flex:0 0 auto; }
+      .doctor-steps { grid-template-columns:1fr; }
       #stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
       #stats .stat-card:nth-child(n+5) { background:linear-gradient(145deg, var(--dsr-panel), var(--dsr-bg-2)); box-shadow:inset 0 1px var(--dsr-divider), 0 10px 26px var(--dsr-shadow); }
     }
@@ -243,6 +293,13 @@
       .token-row { display: flex; flex-direction: column; align-items: stretch; }
       .token-actions { justify-content: stretch; }
       .token-actions .mini-btn { flex: 1 1 auto; }
+      .device-key-toggle { align-items:flex-start; }
+      .device-key-toggle-actions { align-items:flex-end; flex-direction:column-reverse; }
+      .device-key-grid.head { display:none; }
+      .device-key-grid { grid-template-columns:1fr; gap:7px; padding:12px; }
+      .device-key-grid > *::before { content:attr(data-label); display:block; margin-bottom:3px; color:var(--dsr-muted); font:700 10px/1.3 system-ui,sans-serif; }
+      .device-key-actions { justify-content:stretch; }
+      .device-key-actions .mini-btn { flex:1 1 calc(50% - 6px); }
     }
     @media (max-width: 900px) {
       .admin-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
@@ -315,14 +372,58 @@
         </div>
       </section>
 
-      <div class="token-row">
-        <code id="token-full">—</code>
-        <div class="token-actions">
-          <button id="btn-gateway" class="mini-btn hidden" data-i18n="startGateway">启动网关</button>
-          <button id="btn-qr" class="mini-btn hidden" data-i18n="qrCode">二维码</button>
-          <button id="btn-rotate" class="mini-btn hidden" data-i18n="rotateToken">轮换令牌</button>
-          <button id="btn-copy" class="mini-btn" data-i18n="copyToken">复制令牌</button>
-          <button id="btn-logout" class="mini-btn" data-i18n="signOut">退出</button>
+      <section id="doctor-card" class="doctor-card" aria-live="polite">
+        <button id="doctor-toggle" class="doctor-head" type="button" aria-expanded="false" aria-controls="doctor-body">
+          <span class="doctor-title"><strong data-i18n="doctor.title">首次连接向导 · Doctor</strong><span id="doctor-subtitle">正在检查连接链路</span></span>
+          <span id="doctor-progress" class="doctor-progress">0/6</span>
+          <span class="doctor-chevron" aria-hidden="true">⌄</span>
+        </button>
+        <div id="doctor-body" class="doctor-body">
+          <div id="doctor-summary" class="doctor-summary">正在读取诊断结果…</div>
+          <div id="doctor-steps" class="doctor-steps"></div>
+          <div class="doctor-foot">
+            <span data-i18n="doctor.security">安全提示：只在可信局域网或 Tailscale 中开放网关端口，不要把令牌公开。</span>
+            <span class="doctor-foot-actions">
+              <button id="doctor-copy-report" class="mini-btn" type="button" data-i18n="doctor.copyReport">复制诊断</button>
+              <button id="doctor-refresh" class="mini-btn" type="button" data-i18n="doctor.refresh">重新检查</button>
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <div class="device-key-card">
+        <div id="device-key-toggle" class="device-key-toggle hidden">
+          <div class="device-key-toggle-copy">
+            <div class="device-key-toggle-title" data-i18n="deviceKeys.title">独立设备密钥</div>
+            <div class="device-key-toggle-desc" data-i18n="deviceKeys.desc">开启后每台设备使用独立令牌，可单独轮换或退出；原共享令牌仅用于网关管理。</div>
+          </div>
+          <div class="device-key-toggle-actions">
+            <button id="btn-gateway" class="mini-btn hidden" data-i18n="startGateway">启动网关</button>
+            <button id="btn-device-key-add" class="mini-btn hidden" type="button" data-i18n="deviceKeys.add">添加设备</button>
+            <label class="device-key-switch" title="独立设备密钥">
+              <input id="device-key-enabled" type="checkbox" role="switch" aria-label="独立设备密钥">
+              <span aria-hidden="true"></span>
+            </label>
+            <button id="btn-logout" class="mini-btn" data-i18n="signOut">退出</button>
+          </div>
+        </div>
+        <div id="shared-token-row" class="token-row">
+          <code id="token-full">—</code>
+          <div class="token-actions">
+            <button id="btn-qr" class="mini-btn hidden" data-i18n="qrCode">二维码</button>
+            <button id="btn-rotate" class="mini-btn hidden" data-i18n="rotateToken">轮换令牌</button>
+            <button id="btn-copy" class="mini-btn" data-i18n="copyToken">复制令牌</button>
+          </div>
+        </div>
+        <div id="device-key-panel" class="device-key-panel hidden">
+          <div class="device-key-grid head">
+            <span data-i18n="deviceKeys.note">备注内容</span>
+            <span data-i18n="deviceKeys.ip">IP</span>
+            <span>Token</span>
+            <span></span>
+          </div>
+          <div id="device-key-rows"></div>
+          <div id="device-key-empty" class="device-key-empty hidden" data-i18n="deviceKeys.empty">暂无设备密钥</div>
         </div>
       </div>
 
@@ -400,6 +501,17 @@
         'admin': '管理',
         'hero.eyebrow': 'GATEWAY CONTROL', 'hero.running': '网关运行正常', 'hero.attention': '网关需要关注', 'hero.plugin': 'DSH 插件已连接', 'hero.offline': '网关未运行', 'hero.checking': '正在检查网关',
         'hero.runningDesc': '{online} 台设备在线 · {requests} 次请求', 'hero.attentionDesc': 'DSH 上游暂时不可达，请打开诊断', 'hero.pluginDesc': '插件已连接 DSH，网关可按需启动', 'hero.offlineDesc': '启动网关后即可接受 App 和桌面端连接', 'hero.openDevices': '查看设备', 'hero.startGateway': '启动网关', 'hero.copyToken': '复制令牌',
+        'doctor.title': '首次连接向导 · Doctor', 'doctor.checking': '正在检查连接链路', 'doctor.ready': '连接条件已就绪', 'doctor.needsWork': '还有 {n} 项需要处理',
+        'doctor.allGood': '所有关键检查均已通过，手机端可以稳定连接。', 'doctor.partial': '按顺序处理未通过项；页面每 5 秒自动复查。',
+        'doctor.security': '安全提示：只在可信局域网或 Tailscale 中开放网关端口，不要把令牌公开。', 'doctor.copyReport': '复制诊断', 'doctor.refresh': '重新检查',
+        'doctor.dsh': 'DSH 服务', 'doctor.dshPass': 'DSH 上游可访问', 'doctor.dshFail': 'DSH 上游不可达，请先启动或重启 DSH Web',
+        'doctor.gateway': '远程网关', 'doctor.gatewayPass': '网关正在 {host}:{port} 监听', 'doctor.gatewayFail': '网关尚未运行',
+        'doctor.network': '局域网地址', 'doctor.networkPass': '手机可填写 {base}', 'doctor.networkFail': '未发现可供手机访问的 IPv4 地址',
+        'doctor.firewall': '主机防火墙', 'doctor.firewallPass': '已有非管理设备成功接入，入站链路已验证', 'doctor.firewallWarn': '无法无权限确认规则；只对可信网络放行 TCP {port}',
+        'doctor.device': '终端配对', 'doctor.devicePass': '{n} 台 App / WebUI 在线', 'doctor.deviceWait': '扫码配对后，本项会自动变为通过',
+        'doctor.realtime': '实时消息通道', 'doctor.realtimePass': 'mux 与 host 通道均已连接', 'doctor.realtimeFail': '实时通道未全部建立；可先使用轮询，检查 DSH 后会自动恢复',
+        'doctor.start': '启动', 'doctor.showQr': '显示二维码', 'doctor.copyAddress': '复制地址', 'doctor.copyCommand': '复制命令',
+        'doctor.reportCopied': '诊断报告已复制', 'doctor.commandCopied': '防火墙命令已复制，请确认网络范围后手动执行', 'doctor.addressCopied': '服务器地址已复制',
         'theme.default': '默认深空', 'theme.dark': '落日', 'theme.light': '易北爱乐厅', 'theme.neutral': '草原孤塔',
         'theme.panelTitle': '选择配色', 'theme.close': '关闭',
         'repo': '仓库',
@@ -425,6 +537,19 @@
         'rotateToken': '轮换令牌',
         'copyToken': '复制令牌',
         'signOut': '退出',
+        'deviceKeys.title': '独立设备密钥', 'deviceKeys.desc': '开启后每台设备使用独立令牌，可单独轮换或退出；原共享令牌仅用于网关管理。',
+        'deviceKeys.add': '添加设备', 'deviceKeys.note': '备注内容', 'deviceKeys.ip': 'IP', 'deviceKeys.empty': '暂无设备密钥',
+        'deviceKeys.neverUsed': '尚未连接', 'deviceKeys.edit': '修改', 'deviceKeys.revoke': '退出',
+        'deviceKeys.enableConfirm': '开启后，当前手机和浏览器使用的共享令牌会失效，需要使用设备二维码重新配对。继续？',
+        'deviceKeys.disableConfirm': '关闭后，所有独立设备令牌会停止工作，需要重新使用共享令牌。继续？',
+        'deviceKeys.revokeConfirm': '让这个设备退出？该设备令牌会立即失效。',
+        'deviceKeys.rotateConfirm': '轮换这个设备的令牌？该设备会立即断开，需要重新扫码。',
+        'deviceKeys.notePrompt': '设备备注内容',
+        'deviceKeys.enabled': '独立设备密钥已开启，请使用设备二维码重新配对',
+        'deviceKeys.disabled': '独立设备密钥已关闭，客户端改用共享令牌',
+        'deviceKeys.created': '已创建设备密钥', 'deviceKeys.saved': '设备备注已保存',
+        'deviceKeys.rotated': '设备令牌已轮换', 'deviceKeys.revoked': '设备已退出',
+        'deviceKeys.failed': '设备密钥操作失败：{msg}',
         'pairTitle': '手机 App 扫码配对',
         'devices': '已连接设备',
         'noDevices': '暂无设备记录',
@@ -485,6 +610,17 @@
         'admin': 'Admin',
         'hero.eyebrow': 'GATEWAY CONTROL', 'hero.running': 'Gateway is healthy', 'hero.attention': 'Gateway needs attention', 'hero.plugin': 'DSH plugin connected', 'hero.offline': 'Gateway is not running', 'hero.checking': 'Checking gateway',
         'hero.runningDesc': '{online} devices online · {requests} requests', 'hero.attentionDesc': 'DSH upstream is unreachable; open diagnostics', 'hero.pluginDesc': 'The plugin is connected to DSH; start the gateway when needed', 'hero.offlineDesc': 'Start the gateway to accept App and desktop connections', 'hero.openDevices': 'View devices', 'hero.startGateway': 'Start gateway', 'hero.copyToken': 'Copy token',
+        'doctor.title': 'First connection · Doctor', 'doctor.checking': 'Checking the connection path', 'doctor.ready': 'Ready to connect', 'doctor.needsWork': '{n} checks need attention',
+        'doctor.allGood': 'All critical checks passed. Mobile clients can connect.', 'doctor.partial': 'Resolve the checks in order. This page rechecks every 5 seconds.',
+        'doctor.security': 'Security: expose the gateway only to a trusted LAN or Tailscale, and never publish the token.', 'doctor.copyReport': 'Copy report', 'doctor.refresh': 'Recheck',
+        'doctor.dsh': 'DSH service', 'doctor.dshPass': 'DSH upstream is reachable', 'doctor.dshFail': 'DSH upstream is unreachable. Start or restart DSH Web first.',
+        'doctor.gateway': 'Remote gateway', 'doctor.gatewayPass': 'Listening on {host}:{port}', 'doctor.gatewayFail': 'Gateway is not running',
+        'doctor.network': 'LAN address', 'doctor.networkPass': 'Use {base} on the phone', 'doctor.networkFail': 'No IPv4 address available to the phone',
+        'doctor.firewall': 'Host firewall', 'doctor.firewallPass': 'A non-admin client connected, confirming inbound access', 'doctor.firewallWarn': 'Rules cannot be confirmed without privilege. Allow TCP {port} only on trusted networks.',
+        'doctor.device': 'Client pairing', 'doctor.devicePass': '{n} App / WebUI clients online', 'doctor.deviceWait': 'Scan the QR code; this check updates automatically',
+        'doctor.realtime': 'Realtime channels', 'doctor.realtimePass': 'Both mux and host channels are connected', 'doctor.realtimeFail': 'Realtime channels are incomplete. Polling remains available and recovery is automatic.',
+        'doctor.start': 'Start', 'doctor.showQr': 'Show QR', 'doctor.copyAddress': 'Copy address', 'doctor.copyCommand': 'Copy command',
+        'doctor.reportCopied': 'Diagnostic report copied', 'doctor.commandCopied': 'Firewall command copied. Review the network scope before running it.', 'doctor.addressCopied': 'Server address copied',
         'theme.default': 'Default', 'theme.dark': 'Sunset', 'theme.light': 'Elbphilharmonie', 'theme.neutral': 'Prairie Tower',
         'theme.panelTitle': 'Choose theme', 'theme.close': 'Close',
         'repo': 'Repo',
@@ -510,6 +646,19 @@
         'rotateToken': 'Rotate token',
         'copyToken': 'Copy token',
         'signOut': 'Sign out',
+        'deviceKeys.title': 'Per-device keys', 'deviceKeys.desc': 'Give every device its own token so it can be rotated or signed out separately. The shared token remains admin-only.',
+        'deviceKeys.add': 'Add device', 'deviceKeys.note': 'Note', 'deviceKeys.ip': 'IP', 'deviceKeys.empty': 'No device keys',
+        'deviceKeys.neverUsed': 'Not connected yet', 'deviceKeys.edit': 'Edit', 'deviceKeys.revoke': 'Sign out',
+        'deviceKeys.enableConfirm': 'Existing phones and browsers using the shared token will disconnect and must pair again with a device QR code. Continue?',
+        'deviceKeys.disableConfirm': 'All per-device tokens will stop working and clients must use the shared token again. Continue?',
+        'deviceKeys.revokeConfirm': 'Sign out this device? Its token becomes invalid immediately.',
+        'deviceKeys.rotateConfirm': 'Rotate this device token? It will disconnect and must scan again.',
+        'deviceKeys.notePrompt': 'Device note',
+        'deviceKeys.enabled': 'Per-device keys enabled. Pair clients with a device QR code.',
+        'deviceKeys.disabled': 'Per-device keys disabled. Clients now use the shared token.',
+        'deviceKeys.created': 'Device key created', 'deviceKeys.saved': 'Device note saved',
+        'deviceKeys.rotated': 'Device token rotated', 'deviceKeys.revoked': 'Device signed out',
+        'deviceKeys.failed': 'Device key operation failed: {msg}',
         'pairTitle': 'Pair with the mobile app',
         'devices': 'Connected devices',
         'noDevices': 'No devices yet',

package/public/admin.js

@@ -24,8 +24,77 @@ let gatewayBusy = false
 let shownToken = token
 let lastState = null
 let qrShown = false
+let qrToken = ''
+let qrLabel = ''
+let deviceKeyBusy = false
 let gatewayPort = 8787
 let gatewayPortLoaded = false
+let doctorExpanded = store.get('dshAdminDoctorCollapsed') !== '1'
+let doctorChecks = []
+
+function onlineClientDevices(st) {
+  return (st.devices || []).filter(device => device.online && (device.kind === 'app' || device.kind === 'web'))
+}
+
+function firewallCommand(st) {
+  const port = Number(st.port || gatewayPort) || 8787
+  const ip = (st.lanIPs || []).find(value => /^10\.|^192\.168\.|^172\.(1[6-9]|2\d|3[01])\.|^100\.(6[4-9]|[7-9]\d|1[01]\d|12[0-7])\./.test(value || ''))
+  let cidr = 'LocalSubnet'
+  if (/^10\./.test(ip || '')) cidr = '10.0.0.0/8'
+  else if (/^192\.168\./.test(ip || '')) cidr = '192.168.0.0/16'
+  else if (/^172\./.test(ip || '')) cidr = '172.16.0.0/12'
+  else if (/^100\./.test(ip || '')) cidr = '100.64.0.0/10'
+  if (st.platform === 'win32') return `New-NetFirewallRule -DisplayName "DSH Remote ${port}" -Direction Inbound -Protocol TCP -LocalPort ${port} -RemoteAddress ${cidr} -Action Allow -Profile Private`
+  if (st.platform === 'darwin') return `系统设置 → 网络 → 防火墙；仅允许 Node.js / DSH Remote 接受可信网络入站连接（TCP ${port}）`
+  return `sudo ufw allow from ${cidr} to any port ${port} proto tcp\n# firewalld: sudo firewall-cmd --zone=home --add-source=${cidr} --permanent && sudo firewall-cmd --zone=home --add-port=${port}/tcp --permanent && sudo firewall-cmd --reload`
+}
+
+function buildDoctorChecks(st) {
+  const isGateway = st.mode === 'gateway'
+  const port = Number(st.port || gatewayPort) || 8787
+  const ip = (st.lanIPs || []).find(value => value && value !== '127.0.0.1' && value !== '0.0.0.0')
+  const base = ip ? `http://${ip}:${port}` : ''
+  const clients = onlineClientDevices(st)
+  const events = st.events || {}
+  const realtime = !!(events.mux?.connected && events.host?.connected)
+  return [
+    { id: 'dsh', status: st.upstream?.reachable ? 'pass' : 'fail', title: t('doctor.dsh'), detail: t(st.upstream?.reachable ? 'doctor.dshPass' : 'doctor.dshFail') },
+    { id: 'gateway', status: isGateway ? 'pass' : 'fail', title: t('doctor.gateway'), detail: isGateway ? t('doctor.gatewayPass', { host: st.host, port }) : t('doctor.gatewayFail'), action: !isGateway && pluginMode ? 'start' : '' },
+    { id: 'network', status: isGateway && ip && st.host !== '127.0.0.1' ? 'pass' : 'fail', title: t('doctor.network'), detail: base ? t('doctor.networkPass', { base }) : t('doctor.networkFail'), action: base ? 'address' : '' },
+    { id: 'firewall', status: clients.length ? 'pass' : 'warn', title: t('doctor.firewall'), detail: t(clients.length ? 'doctor.firewallPass' : 'doctor.firewallWarn', { port }), action: clients.length ? '' : 'firewall' },
+    { id: 'device', status: clients.length ? 'pass' : 'warn', title: t('doctor.device'), detail: t(clients.length ? 'doctor.devicePass' : 'doctor.deviceWait', { n: clients.length }), action: isGateway && !clients.length ? 'qr' : '' },
+    { id: 'realtime', status: realtime ? 'pass' : 'warn', title: t('doctor.realtime'), detail: t(realtime ? 'doctor.realtimePass' : 'doctor.realtimeFail') },
+  ]
+}
+
+function renderDoctor(st) {
+  doctorChecks = buildDoctorChecks(st)
+  const passed = doctorChecks.filter(check => check.status === 'pass').length
+  const remaining = doctorChecks.length - passed
+  const allGood = remaining === 0
+  const card = $('doctor-card')
+  card.classList.toggle('expanded', doctorExpanded)
+  $('doctor-toggle').setAttribute('aria-expanded', String(doctorExpanded))
+  $('doctor-progress').textContent = `${passed}/${doctorChecks.length}`
+  $('doctor-subtitle').textContent = t(allGood ? 'doctor.ready' : 'doctor.needsWork', { n: remaining })
+  $('doctor-summary').textContent = t(allGood ? 'doctor.allGood' : 'doctor.partial')
+  $('doctor-summary').classList.toggle('ok', allGood)
+  const actionText = { start: 'doctor.start', qr: 'doctor.showQr', address: 'doctor.copyAddress', firewall: 'doctor.copyCommand' }
+  $('doctor-steps').innerHTML = doctorChecks.map(check => `<div class="doctor-step ${check.status}">
+    <span class="doctor-mark" aria-hidden="true">${check.status === 'pass' ? '✓' : check.status === 'fail' ? '!' : '·'}</span>
+    <span class="doctor-copy"><strong>${esc(check.title)}</strong><span>${esc(check.detail)}</span></span>
+    ${check.action ? `<button class="mini-btn doctor-action" type="button" data-doctor-action="${check.action}">${esc(t(actionText[check.action]))}</button>` : ''}
+  </div>`).join('')
+}
+
+async function doctorCopy(value, messageKey) {
+  try {
+    await navigator.clipboard.writeText(value)
+    toast(t(messageKey), 'ok')
+  } catch {
+    toast(t('toast.copyFailed'), 'err')
+  }
+}
 
 const STATS_API = pluginMode ? API + '/stats' : '/stats'
 let statsTimer = null
@@ -170,6 +239,53 @@ function fmtTime(ts) {
   return `${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`
 }
 
+function esc(value) {
+  return String(value ?? '').replace(/[<>&"]/g, c => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' }[c]))
+}
+
+function renderDeviceKeys(st, isGateway) {
+  const config = st.deviceKeys || { supported: false, enabled: false, entries: [] }
+  const supported = isGateway && config.supported !== false
+  const enabled = supported && config.enabled === true
+  const toggleWrap = $('device-key-toggle')
+  toggleWrap.classList.toggle('hidden', !isGateway && !pluginMode)
+  const toggle = $('device-key-enabled')
+  toggle.checked = enabled
+  toggle.disabled = !supported || deviceKeyBusy
+  $('btn-device-key-add').classList.toggle('hidden', !enabled)
+  $('btn-device-key-add').disabled = deviceKeyBusy
+  $('shared-token-row').classList.toggle('hidden', enabled)
+  $('device-key-panel').classList.toggle('hidden', !enabled)
+  if (!enabled) {
+    $('device-key-rows').innerHTML = ''
+    $('device-key-empty').classList.add('hidden')
+    return
+  }
+  const entries = Array.isArray(config.entries) ? config.entries : []
+  $('device-key-empty').classList.toggle('hidden', entries.length > 0)
+  $('device-key-rows').innerHTML = entries.map(entry => {
+    const note = entry.note || t('deviceKeys.neverUsed')
+    const ip = entry.lastIp || t('deviceKeys.neverUsed')
+    return `<div class="device-key-grid" data-device-key-id="${esc(entry.id)}">
+      <div class="device-key-note" data-label="${esc(t('deviceKeys.note'))}"><span>${esc(note)}</span><button class="mini-btn" type="button" data-device-key-note="${esc(entry.id)}">${esc(t('deviceKeys.edit'))}</button></div>
+      <div class="device-key-ip" data-label="${esc(t('deviceKeys.ip'))}">${esc(ip)}</div>
+      <code data-label="Token">${esc(entry.token)}</code>
+      <div class="device-key-actions">
+        <button class="mini-btn" type="button" data-device-key-qr="${esc(entry.id)}">${esc(t('qrCode'))}</button>
+        <button class="mini-btn" type="button" data-device-key-rotate="${esc(entry.id)}">${esc(t('rotateToken'))}</button>
+        <button class="mini-btn" type="button" data-device-key-copy="${esc(entry.id)}">${esc(t('copyToken'))}</button>
+        <button class="mini-btn danger" type="button" data-device-key-revoke="${esc(entry.id)}">${esc(t('deviceKeys.revoke'))}</button>
+      </div>
+    </div>`
+  }).join('')
+  const byId = id => entries.find(entry => entry.id === id)
+  document.querySelectorAll('[data-device-key-note]').forEach(button => button.addEventListener('click', () => editDeviceKeyNote(byId(button.dataset.deviceKeyNote))))
+  document.querySelectorAll('[data-device-key-qr]').forEach(button => button.addEventListener('click', () => showDeviceKeyQr(byId(button.dataset.deviceKeyQr))))
+  document.querySelectorAll('[data-device-key-rotate]').forEach(button => button.addEventListener('click', () => rotateDeviceKey(byId(button.dataset.deviceKeyRotate))))
+  document.querySelectorAll('[data-device-key-copy]').forEach(button => button.addEventListener('click', () => copyDeviceKey(byId(button.dataset.deviceKeyCopy))))
+  document.querySelectorAll('[data-device-key-revoke]').forEach(button => button.addEventListener('click', () => revokeDeviceKey(byId(button.dataset.deviceKeyRevoke))))
+}
+
 async function loadState() {
   if (!token && !pluginMode) return
   try {
@@ -205,7 +321,9 @@ function render(st) {
   // 二维码与轮换只在网关模式下可用(二维码里有完整令牌, 不能在没有网关时生成)
   $('btn-qr').classList.toggle('hidden', isGateway !== true || !shownToken)
   $('btn-rotate').classList.toggle('hidden', isGateway !== true || !shownToken || !!st.tokenFromEnv)
+  renderDeviceKeys(st, isGateway)
   renderQr(st)
+  renderDoctor(st)
   // 网关开关: 仅插件内嵌页提供, 网关运行/停止两种状态
   gatewayRunning = isGateway
   $('btn-gateway').classList.toggle('hidden', !pluginMode)
@@ -305,30 +423,31 @@ function render(st) {
     btn.addEventListener('click', () => setNote(btn.dataset.noteIp, btn.dataset.note)))
 }
 
-function pairTarget(st) {
+function pairTarget(st, accessToken) {
   const ip = (st.lanIPs || []).find(x => x && x !== '127.0.0.1' && x !== '0.0.0.0') || (st.lanIPs || [])[0]
   const host = ip || (st.host && st.host !== '0.0.0.0' ? st.host : location.hostname)
   const port = st.port || 8787
   const base = `http://${host}:${port}`
   return {
-    url: `dshremote://pair?token=${encodeURIComponent(shownToken)}&server=${encodeURIComponent(base)}`,
+    url: `dshremote://pair?token=${encodeURIComponent(accessToken)}&server=${encodeURIComponent(base)}`,
     base
   }
 }
 
 function renderQr(st) {
   const box = $('pair-box')
-  if (!qrShown || !shownToken || st.mode !== 'gateway') {
+  const accessToken = qrToken || shownToken
+  if (!qrShown || !accessToken || st.mode !== 'gateway') {
     box.classList.add('hidden')
     return
   }
   try {
-    const pt = pairTarget(st)
+    const pt = pairTarget(st, accessToken)
     const qr = window.qrcode(0, 'M')
     qr.addData(pt.url)
     qr.make()
     $('pair-qr').innerHTML = qr.createSvgTag({ cellSize: 4, margin: 2, scalable: true })
-    $('pair-hint').textContent = t('pair.hint', { base: pt.base })
+    $('pair-hint').textContent = `${qrLabel ? qrLabel + ' · ' : ''}${t('pair.hint', { base: pt.base })}`
     box.classList.remove('hidden')
   } catch (e) {
     $('pair-qr').textContent = t('pair.failed')
@@ -367,6 +486,110 @@ async function kick(ip) {
   }
 }
 
+async function deviceKeyMutation(action, payload = {}) {
+  deviceKeyBusy = true
+  const toggle = $('device-key-enabled')
+  if (toggle) toggle.disabled = true
+  try {
+    const res = await fetch(`${API}/device-keys/${action}`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json', authorization: 'Bearer ' + token, 'x-dsh-remote-client': 'admin' },
+      body: JSON.stringify(payload),
+    })
+    const out = await res.json().catch(() => ({}))
+    if (!res.ok || !out.ok) throw new Error(out.detail || out.error || `HTTP ${res.status}`)
+    return out
+  } catch (error) {
+    toast(t('deviceKeys.failed', { msg: error?.message || error }), 'err')
+    return null
+  } finally {
+    deviceKeyBusy = false
+    if (toggle) toggle.disabled = false
+  }
+}
+
+async function setDeviceKeyMode(enabled) {
+  const toggle = $('device-key-enabled')
+  const confirmKey = enabled ? 'deviceKeys.enableConfirm' : 'deviceKeys.disableConfirm'
+  if (!confirm(t(confirmKey))) {
+    toggle.checked = !enabled
+    return
+  }
+  const out = await deviceKeyMutation('mode', { enabled })
+  if (!out) {
+    toggle.checked = !enabled
+    return
+  }
+  qrShown = false
+  qrToken = ''
+  qrLabel = ''
+  toast(t(enabled ? 'deviceKeys.enabled' : 'deviceKeys.disabled'), 'ok')
+  await loadState()
+}
+
+async function createDeviceKey() {
+  const note = prompt(t('deviceKeys.notePrompt'), '')
+  if (note === null) return
+  const out = await deviceKeyMutation('create', { note })
+  if (!out) return
+  toast(t('deviceKeys.created'), 'ok')
+  await loadState()
+  if (out.entry) showDeviceKeyQr(out.entry)
+}
+
+async function editDeviceKeyNote(entry) {
+  if (!entry) return
+  const note = prompt(t('deviceKeys.notePrompt'), entry.note || '')
+  if (note === null) return
+  const out = await deviceKeyMutation('note', { id: entry.id, note })
+  if (!out) return
+  toast(t('deviceKeys.saved'), 'ok')
+  await loadState()
+}
+
+function showDeviceKeyQr(entry) {
+  if (!entry?.token) return
+  qrToken = entry.token
+  qrLabel = entry.note || ''
+  qrShown = true
+  renderQr(lastState || { mode: '', token: '' })
+  $('pair-box').scrollIntoView?.({ behavior: 'smooth', block: 'nearest' })
+}
+
+async function copyDeviceKey(entry) {
+  if (!entry?.token) return
+  try {
+    await navigator.clipboard.writeText(entry.token)
+    toast(t('toast.tokenCopied'), 'ok')
+  } catch {
+    toast(t('toast.copyFailed'), 'err')
+  }
+}
+
+async function rotateDeviceKey(entry) {
+  if (!entry || !confirm(t('deviceKeys.rotateConfirm'))) return
+  const out = await deviceKeyMutation('rotate', { id: entry.id })
+  if (!out) return
+  qrShown = false
+  qrToken = ''
+  qrLabel = ''
+  toast(t('deviceKeys.rotated'), 'ok')
+  await loadState()
+}
+
+async function revokeDeviceKey(entry) {
+  if (!entry || !confirm(t('deviceKeys.revokeConfirm'))) return
+  const out = await deviceKeyMutation('revoke', { id: entry.id })
+  if (!out) return
+  if (qrToken === entry.token) {
+    qrShown = false
+    qrToken = ''
+    qrLabel = ''
+  }
+  toast(t('deviceKeys.revoked'), 'ok')
+  await loadState()
+}
+
 function enter() {
   const val = $('token-input').value.trim()
   if (!val) return
@@ -402,6 +625,8 @@ function logout() {
 $('btn-login').addEventListener('click', enter)
 $('token-input').addEventListener('keydown', (e) => { if (e.key === 'Enter') enter() })
 $('btn-logout').addEventListener('click', logout)
+$('device-key-enabled').addEventListener('change', (event) => setDeviceKeyMode(event.target.checked))
+$('btn-device-key-add').addEventListener('click', createDeviceKey)
 // 插件内嵌: 收起面板按钮 → postMessage 给父窗口(同源)关闭右侧抽屉
 $('btn-close-drawer').addEventListener('click', () => {
   window.parent.postMessage({ source: 'dsh-remote-admin', type: 'close' }, location.origin)
@@ -412,6 +637,38 @@ $('admin-hero-action').addEventListener('click', () => {
   if (action === 'copy') return $('btn-copy').click()
   $('device-rows').closest('.table-wrap')?.scrollIntoView({ behavior: 'smooth', block: 'start' })
 })
+$('doctor-toggle').addEventListener('click', () => {
+  doctorExpanded = !doctorExpanded
+  store.set('dshAdminDoctorCollapsed', doctorExpanded ? '0' : '1')
+  if (lastState) renderDoctor(lastState)
+})
+$('doctor-refresh').addEventListener('click', () => {
+  $('doctor-subtitle').textContent = t('doctor.checking')
+  loadState()
+})
+$('doctor-copy-report').addEventListener('click', () => {
+  const report = doctorChecks.map(check => `[${check.status.toUpperCase()}] ${check.title}: ${check.detail}`).join('\n')
+  doctorCopy(`DSH Remote Doctor\n${report}`, 'doctor.reportCopied')
+})
+$('doctor-steps').addEventListener('click', (event) => {
+  const button = event.target.closest('[data-doctor-action]')
+  if (!button || !lastState) return
+  const action = button.dataset.doctorAction
+  if (action === 'start') return $('btn-gateway').click()
+  if (action === 'address') return doctorCopy(pairTarget(lastState, shownToken || token).base, 'doctor.addressCopied')
+  if (action === 'firewall') return doctorCopy(firewallCommand(lastState), 'doctor.commandCopied')
+  if (action === 'qr') {
+    const firstKey = lastState.deviceKeys?.enabled && lastState.deviceKeys.entries?.[0]
+    if (firstKey) showDeviceKeyQr(firstKey)
+    else {
+      qrToken = shownToken
+      qrLabel = ''
+      qrShown = true
+      renderQr(lastState)
+      $('pair-box').scrollIntoView?.({ behavior: 'smooth', block: 'nearest' })
+    }
+  }
+})
 $('btn-copy').addEventListener('click', async () => {
   try {
     await navigator.clipboard.writeText(shownToken || token)
@@ -422,6 +679,8 @@ $('btn-copy').addEventListener('click', async () => {
 })
 
 $('btn-qr').addEventListener('click', () => {
+  qrToken = shownToken
+  qrLabel = ''
   qrShown = !qrShown
   renderQr(lastState || { mode: '', token: shownToken })
 })