dsh-plugin-mobile-gateway 0.8.1 → 0.10.0

package/lib/client.js

@@ -20,46 +20,55 @@ window.__ModuleLoader__.load({
     }
     const getOpen = () => open
 
+    // Shared Web UI / Desktop semantic tokens update with the host theme.
+    const restartNoticeStorageKey = 'mobile-gateway-dismissed-restart-notice'
+    let dismissedRestartInstance = null
+    try { dismissedRestartInstance = window.localStorage.getItem(restartNoticeStorageKey) } catch { /* storage unavailable */ }
+
     const colors = {
-      panel: 'var(--color-bg, #111318)',
-      card: 'var(--color-bg-elevated, rgba(127,127,127,.08))',
-      text: 'var(--color-text, #f4f4f5)',
-      muted: 'var(--color-text-muted, #9297a2)',
-      border: 'var(--color-border, rgba(127,127,127,.24))',
-      accent: 'var(--color-primary, #4f7cff)',
-      danger: '#dc4c64',
-      success: '#2fb171',
+      panel: 'var(--dsw-alias-bg-layer-2, var(--color-bg, Canvas))',
+      card: 'var(--dsw-alias-bg-module-platform, var(--color-bg-elevated, Canvas))',
+      text: 'var(--dsw-alias-label-primary, var(--color-text, CanvasText))',
+      muted: 'var(--dsw-alias-label-secondary, var(--color-text-muted, GrayText))',
+      border: 'var(--dsw-alias-border-l3, var(--color-border, rgba(127,127,127,.24)))',
+      accent: 'var(--dsw-alias-button-primary-fill, var(--color-primary, #4f7cff))',
+      accentText: 'var(--dsw-alias-label-primary-foreground, #fff)',
+      danger: 'var(--dsw-alias-state-error-primary, #dc4c64)',
+      success: 'var(--dsw-alias-state-success-primary, #2fb171)',
     }
     const styles = {
       backdrop: {
         position: 'fixed', inset: 0, zIndex: 1200, pointerEvents: 'auto',
-        background: 'rgba(0,0,0,.32)', display: 'flex', justifyContent: 'flex-end',
+        background: 'var(--dsw-alias-bg-mask-1, rgba(0,0,0,.32))', display: 'flex',
+        justifyContent: 'center', alignItems: 'center',
+        padding: 'max(16px, var(--dsh-frame-overlay-top, 16px)) 16px', boxSizing: 'border-box',
       },
       panel: {
-        width: 380, maxWidth: 'calc(100vw - 24px)', height: '100%', overflowY: 'auto',
+        width: 'clamp(640px, 84vw, 1120px)', maxWidth: '100%', maxHeight: '100%', minHeight: 0, height: 'min(780px, calc(100dvh - 48px))', overflow: 'hidden',
+        scrollbarWidth: 'none', msOverflowStyle: 'none',
         display: 'flex', flexDirection: 'column',
-        background: colors.panel, color: colors.text, borderLeft: `1px solid ${colors.border}`,
-        boxShadow: '-12px 0 40px rgba(0,0,0,.22)', padding: 20,
-        fontFamily: 'system-ui, sans-serif', fontSize: 13, boxSizing: 'border-box',
+        background: colors.panel, color: colors.text, border: `1px solid ${colors.border}`, borderRadius: 'var(--dsw-radius-panel, 16px)',
+        boxShadow: 'var(--dsw-elevation-prominent, 0 20px 60px rgba(0,0,0,.22))', padding: 24,
+        fontFamily: 'var(--dsw-font-family, system-ui, sans-serif)', fontSize: 13, boxSizing: 'border-box',
       },
       header: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18, flexShrink: 0 },
-      title: { margin: 0, fontSize: 18, fontWeight: 650 },
-      card: { background: colors.card, border: `1px solid ${colors.border}`, borderRadius: 12, padding: 14, marginBottom: 12, flexShrink: 0 },
+      title: { margin: 0, fontSize: 22, fontWeight: 650 },
+      card: { background: 'transparent', border: 0, borderBottom: `1px solid ${colors.border}`, borderRadius: 0, padding: '16px 0', marginBottom: 0, flexShrink: 0 },
       label: { display: 'block', color: colors.muted, fontSize: 12, marginBottom: 6 },
-      input: { width: '100%', boxSizing: 'border-box', border: `1px solid ${colors.border}`, borderRadius: 8, padding: '8px 10px', marginBottom: 10, background: 'transparent', color: 'inherit', outline: 'none' },
+      input: { width: '100%', boxSizing: 'border-box', border: `1px solid ${colors.border}`, borderRadius: 10, padding: '8px 12px', marginBottom: 8, background: colors.card, color: 'inherit', outline: 'none' },
       pairingText: { width: '100%', minHeight: 86, boxSizing: 'border-box', resize: 'vertical', border: `1px solid ${colors.border}`, borderRadius: 8, padding: '9px 10px', margin: '10px 0', background: 'transparent', color: 'inherit', outline: 'none', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 11, lineHeight: 1.45, overflowWrap: 'anywhere' },
       button: { cursor: 'pointer', border: `1px solid ${colors.border}`, background: 'transparent', borderRadius: 8, padding: '7px 11px', color: 'inherit', font: 'inherit' },
-      headerButton: { width: 34, height: 34, boxSizing: 'border-box', padding: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
-      primary: { background: colors.accent, color: '#fff', borderColor: colors.accent, width: '100%' },
-      muted: { color: colors.muted, fontSize: 12, lineHeight: 1.55 },
+      headerButton: { width: 34, height: 34, boxSizing: 'border-box', border: 0, padding: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
+      primary: { background: colors.accent, color: colors.accentText, borderColor: colors.accent, width: '100%' },
+      muted: { color: colors.muted, fontSize: 12, lineHeight: 1.45 },
       row: { display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto', columnGap: 12, alignItems: 'center', padding: '12px 0', borderBottom: `1px solid ${colors.border}` },
       badge: { display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11, marginLeft: 8, color: colors.muted },
       dot: { width: 7, height: 7, borderRadius: 99, display: 'inline-block' },
-      error: { color: '#ff8092', background: 'rgba(220,76,100,.12)', borderRadius: 8, padding: 10, marginBottom: 12 },
+      error: { color: colors.danger, background: 'rgba(220,76,100,.12)', borderRadius: 8, padding: 10, marginBottom: 12 },
       qr: { display: 'block', width: 220, height: 220, margin: '12px auto', background: '#fff', borderRadius: 10, padding: 8 },
-      helpButton: { width: 20, height: 20, boxSizing: 'border-box', padding: 0, borderRadius: '50%', border: `1px solid ${colors.muted}`, background: 'transparent', color: colors.muted, cursor: 'help', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 12, fontWeight: 600, lineHeight: 1 },
-      helpBubble: { position: 'absolute', top: '100%', left: 0, zIndex: 20, width: 'min(300px, calc(100vw - 88px))', maxHeight: 'min(440px, calc(100vh - 160px))', overflowY: 'auto', boxSizing: 'border-box', padding: 12, borderRadius: 10, border: '1px solid rgba(255,255,255,.18)', background: '#20242c', color: '#f4f4f5', boxShadow: '0 12px 28px rgba(0,0,0,.35)', fontSize: 12, lineHeight: 1.5 },
-      toolsMenu: { position: 'absolute', top: 'calc(100% + 6px)', right: 0, zIndex: 30, width: 250, maxWidth: 'calc(100vw - 48px)', border: `1px solid ${colors.border}`, borderRadius: 10, padding: 5, background: '#20242c', boxShadow: '0 12px 28px rgba(0,0,0,.35)' },
+      helpButton: { width: 20, height: 20, boxSizing: 'border-box', padding: 0, borderRadius: '50%', border: 0, background: 'var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.1))', color: 'var(--dsw-alias-label-tertiary, #888)', cursor: 'help', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 12, fontWeight: 600, lineHeight: 1 },
+      helpBubble: { position: 'absolute', top: '100%', left: 0, zIndex: 20, width: 'min(300px, calc(100vw - 88px))', maxHeight: 'min(440px, calc(100vh - 160px))', overflowY: 'auto', boxSizing: 'border-box', padding: 12, borderRadius: 10, border: `1px solid ${colors.border}`, background: colors.panel, color: colors.text, boxShadow: '0 12px 28px rgba(0,0,0,.35)', fontSize: 12, lineHeight: 1.5 },
+      toolsMenu: { position: 'absolute', top: 'calc(100% + 6px)', right: 0, zIndex: 30, width: 250, maxWidth: 'calc(100vw - 48px)', border: `1px solid ${colors.border}`, borderRadius: 10, padding: 5, background: colors.panel, boxShadow: '0 12px 28px rgba(0,0,0,.35)' },
       toolsItem: { display: 'block', width: '100%', padding: '9px 10px', textAlign: 'left', border: 0, borderRadius: 7, background: 'transparent', color: colors.text, font: 'inherit', cursor: 'pointer' },
       switch: { position: 'relative', display: 'inline-flex', width: 42, height: 24, flexShrink: 0 },
       switchInput: { position: 'absolute', opacity: 0, width: 1, height: 1 },
@@ -68,6 +77,154 @@ window.__ModuleLoader__.load({
       version: { flexShrink: 0, marginTop: 'auto', padding: '18px 2px 0', color: colors.muted, fontSize: 11, lineHeight: 1.4, textAlign: 'right', letterSpacing: '.02em' },
     }
 
+    const panelCss = `
+      @keyframes mgw-pairing-enter {
+        from { opacity: 0; transform: scale(.82); }
+        to { opacity: 1; transform: scale(1); }
+      }
+      .mgw-pairing-dialog {
+        transform-origin: center;
+        animation: mgw-pairing-enter 240ms cubic-bezier(.2, .8, .2, 1);
+      }
+      @keyframes mgw-pairing-exit {
+        from { opacity: 1; transform: scale(1); }
+        to { opacity: 0; transform: scale(.82); }
+      }
+      .mgw-pairing-dialog[data-closing="true"] {
+        animation: mgw-pairing-exit 180ms ease-in forwards;
+        pointer-events: none;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .mgw-pairing-dialog { animation: none; }
+      }
+      .mobile-gateway-panel, .mobile-gateway-panel *, .mgw-pairing-dialog, .mgw-pairing-dialog *, .mgw-select-menu {
+        scrollbar-width: none !important;
+        -ms-overflow-style: none;
+      }
+      .mobile-gateway-panel::-webkit-scrollbar, .mobile-gateway-panel *::-webkit-scrollbar,
+      .mgw-pairing-dialog::-webkit-scrollbar, .mgw-pairing-dialog *::-webkit-scrollbar, .mgw-select-menu::-webkit-scrollbar {
+        display: none !important;
+        width: 0;
+        height: 0;
+      }
+      .mobile-gateway-panel .mgw-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; flex: 1; min-height: 0; }
+      .mobile-gateway-panel .mgw-nav { display: flex; flex-direction: column; gap: 4px; }
+      .mobile-gateway-panel .mgw-nav button { text-align: left; border: 0; padding: 12px 14px; border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+      .mobile-gateway-panel .mgw-nav button[aria-current="page"] { background: var(--dsw-alias-bg-overlay, rgba(127,127,127,.12)); font-weight: 500; }
+      .mobile-gateway-panel .mgw-nav button:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.08)); }
+      .mobile-gateway-panel .mgw-content { min-width: 0; overflow-y: auto; scrollbar-width: none; padding-right: 4px; }
+      .mobile-gateway-panel .mgw-content::-webkit-scrollbar { display: none; }
+      .mobile-gateway-panel .mgw-content p { margin: 6px 0 10px; }
+      .mobile-gateway-panel strong { font-weight: 550; }
+      .mobile-gateway-panel .mgw-section-title { margin: 0 0 10px; font-size: 17px; line-height: 1.4; font-weight: 650; color: inherit; }
+      .mobile-gateway-panel .mgw-setting-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
+      .mobile-gateway-panel .mgw-setting-row select { width: auto !important; max-width: 100%; min-width: 150px; margin-bottom: 0 !important; flex-shrink: 1; }
+      .mobile-gateway-panel .mgw-cloudflare-block input, .mobile-gateway-panel .mgw-cloudflare-block .mgw-select-trigger { background: var(--dsw-alias-bg-layer-2, Canvas) !important; }
+      .mobile-gateway-panel .mgw-setting-label { font-size: 14px; font-weight: 550; color: inherit; }
+
+      .mobile-gateway-panel input:focus-visible, .mobile-gateway-panel select:focus-visible, .mobile-gateway-panel button:focus-visible { outline: 2px solid var(--dsw-alias-label-primary, currentColor); outline-offset: 2px; }
+      @media (max-width: 640px) {
+        .mobile-gateway-panel .mgw-body { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+        .mobile-gateway-panel .mgw-nav { flex-direction: row; }
+        .mobile-gateway-panel .mgw-nav button { flex: 1; padding: 10px 6px; text-align: center; }
+      }
+    `
+
+    function GatewaySelect({ style, children, value, onChange, disabled, ...props }) {
+      const options = React.Children.toArray(children).filter((child) => React.isValidElement(child))
+      const [menu, setMenu] = React.useState(null)
+      const [active, setActive] = React.useState(0)
+      const buttonRef = React.useRef(null)
+      const menuRef = React.useRef(null)
+      const menuId = React.useId()
+      const selected = options.find((option) => option.props.value === value)
+      const enabled = options.map((option, index) => option.props.disabled ? -1 : index).filter((index) => index >= 0)
+      const close = (restoreFocus = false) => {
+        setMenu(null)
+        if (restoreFocus) buttonRef.current?.focus()
+      }
+      const openMenu = () => {
+        if (disabled) return
+        const rect = buttonRef.current.getBoundingClientRect()
+        const computed = window.getComputedStyle(buttonRef.current)
+        const fontSize = parseFloat(computed.fontSize) || 14
+        const lineHeight = parseFloat(computed.lineHeight) || fontSize * 1.5
+        const measure = document.createElement('canvas').getContext('2d')
+        if (measure) measure.font = computed.font || `${fontSize}px sans-serif`
+        const longest = Math.max(...options.map((option) => measure
+          ? measure.measureText(String(option.props.children)).width : String(option.props.children).length * fontSize))
+        const height = Math.min(options.length * Math.max(40, lineHeight + 16) + 14, window.innerHeight - 24)
+        const width = Math.min(Math.max(rect.width, longest + 72, 200), window.innerWidth - 24)
+        setActive(Math.max(0, options.findIndex((option) => option.props.value === value && !option.props.disabled)))
+        setMenu({ left: Math.max(12, Math.min(rect.left, window.innerWidth - width - 12)),
+          top: Math.max(12, rect.bottom + height + 6 <= window.innerHeight - 12 ? rect.bottom + 6 : rect.top - height - 6), width, maxHeight: window.innerHeight - 24 })
+      }
+      const choose = (index) => {
+        const option = options[index]
+        if (!option || option.props.disabled) return
+        onChange?.({ target: { value: option.props.value } })
+        close(true)
+      }
+      React.useEffect(() => {
+        if (!menu) return
+        menuRef.current?.focus()
+        const outside = (event) => {
+          if (!buttonRef.current?.contains(event.target) && !menuRef.current?.contains(event.target)) close()
+        }
+        const scrolled = (event) => { if (!menuRef.current?.contains(event.target)) close() }
+        const resized = () => close()
+        document.addEventListener('pointerdown', outside)
+        document.addEventListener('scroll', scrolled, true)
+        window.addEventListener('resize', resized)
+        return () => {
+          document.removeEventListener('pointerdown', outside)
+          document.removeEventListener('scroll', scrolled, true)
+          window.removeEventListener('resize', resized)
+        }
+      }, [menu])
+      React.useEffect(() => {
+        if (menu) document.getElementById(`${menuId}-${active}`)?.scrollIntoView({ block: 'nearest' })
+      }, [active, menu])
+      return React.createElement('span', { style: { display: 'inline-flex', maxWidth: '100%', minWidth: 0 } },
+        React.createElement('button', { ...props, className: 'mgw-select-trigger', ref: buttonRef, type: 'button', disabled,
+          'aria-haspopup': 'listbox', 'aria-expanded': !!menu, 'aria-controls': menu ? menuId : undefined,
+          onClick: () => menu ? close() : openMenu(),
+          onKeyDown: (event) => {
+            if (['ArrowDown', 'ArrowUp'].includes(event.key)) { event.preventDefault(); openMenu() }
+          },
+          style: { ...style, width: 'auto', maxWidth: '100%', marginBottom: 0, border: 0, borderRadius: 12,
+            padding: '10px 16px', background: colors.card, color: colors.text, font: 'inherit', cursor: disabled ? 'default' : 'pointer',
+            display: 'inline-flex', alignItems: 'center', gap: 18, opacity: disabled ? .5 : 1 } },
+          React.createElement('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, selected?.props.children || value),
+          React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor',
+            strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true, style: { flexShrink: 0 } },
+            React.createElement('path', { d: 'M6 9l6 6 6-6' }))),
+        menu ? React.createElement('div', { className: 'mgw-select-menu', ref: menuRef, id: menuId, role: 'listbox', tabIndex: -1,
+          'aria-label': props['aria-label'], 'aria-activedescendant': `${menuId}-${active}`,
+          style: { ...menu, position: 'fixed', zIndex: 1250, boxSizing: 'border-box', overflowY: 'auto', padding: 6,
+            background: colors.panel, color: colors.text, border: `1px solid ${colors.border}`, borderRadius: 14,
+            boxShadow: 'var(--dsw-elevation-prominent, 0 8px 28px rgba(0,0,0,.12))', outline: 'none' },
+          onKeyDown: (event) => {
+            if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); close(true) }
+            else if (event.key === 'Tab') close()
+            else if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); choose(active) }
+            else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+              event.preventDefault()
+              const index = enabled.indexOf(active)
+              setActive(event.key === 'Home' ? enabled[0] : event.key === 'End' ? enabled[enabled.length - 1]
+                : enabled[(index + (event.key === 'ArrowDown' ? 1 : -1) + enabled.length) % enabled.length])
+            }
+          } }, options.map((option, index) => React.createElement('div', { key: option.props.value,
+            id: `${menuId}-${index}`, role: 'option', 'aria-selected': option.props.value === value, 'aria-disabled': !!option.props.disabled,
+            onPointerMove: () => { if (!option.props.disabled) setActive(index) }, onClick: () => choose(index),
+            style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, minHeight: 40, whiteSpace: 'nowrap',
+              boxSizing: 'border-box', padding: '8px 12px', borderRadius: 8, cursor: option.props.disabled ? 'default' : 'pointer',
+              opacity: option.props.disabled ? .4 : 1, background: active === index ? 'var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.08))' : 'transparent' } },
+            React.createElement('span', { style: { minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }, title: String(option.props.children) }, option.props.children), option.props.value === value ? React.createElement('svg', { width: 16, height: 16, viewBox: '0 0 24 24',
+              fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true, style: { flexShrink: 0 } },
+              React.createElement('path', { d: 'M5 12l4 4L19 6' })) : null))) : null)
+    }
+
     async function request(path, options) {
       const response = await fetch(path, { credentials: 'same-origin', ...options })
       const body = await response.json().catch(() => ({}))
@@ -99,10 +256,10 @@ window.__ModuleLoader__.load({
       const system = status.platform === 'darwin' ? 'macOS 电脑' : status.platform === 'win32' ? 'Windows 电脑' : status.platform === 'linux' ? 'Linux 服务器' : '当前设备'
       const lanReady = !!lanPairingUrl(status)
       const tunnel = status.cloudflare
-      const tunnelReady = !!(tunnel?.enabled && tunnel.state === 'online' && tunnel.publicUrl)
+      const tunnelReady = !!(tunnel?.enabled && tunnel.publicReady === true && tunnel.publicUrl)
       const serverReady = status.platform === 'linux' && !!(
         (publicSetup?.configured && publicSetup.publicUrl) || /^wss:\/\//.test(status.publicUrl || ''))
-      const detected = `当前检测：${system}；局域网入口${lanReady ? '已就绪' : '未就绪'}；${serverReady ? '公网服务器入口已配置' : tunnelReady ? `${tunnel.mode === 'quick' ? 'Quick' : '命名'} Tunnel 已连接` : tunnel?.enabled ? 'Cloudflare Tunnel 连接中' : '外网入口未连接'}。`
+      const detected = `当前检测：${system}；局域网入口${lanReady ? '已就绪' : '未就绪'}；${serverReady ? '公网服务器入口已配置' : tunnelReady ? `${tunnel.mode === 'quick' ? 'Quick' : '命名'} Tunnel 已连接` : tunnel?.enabled ? (tunnel.state === 'online' ? '隧道已连接，公网入口未验证或检测失败' : 'Cloudflare Tunnel 连接中') : '外网入口未连接'}。`
       const local = lanReady
         ? '手机与 DSH 处于可互访的同一局域网时，建议选“局域网直连”。'
         : '如果手机和 DSH 在同一局域网，先确认局域网入口已开启并监听成功。'
@@ -125,10 +282,10 @@ window.__ModuleLoader__.load({
       return React.createElement('div', { style: styles.row },
         React.createElement('div', { style: { minWidth: 0, overflow: 'hidden' } },
           React.createElement('div', { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } },
-            device.name,
+            device.displayName || device.name,
             React.createElement('span', { style: styles.badge },
               React.createElement('span', { style: { ...styles.dot, background: device.online ? colors.success : colors.muted } }),
-              device.online ? `在线${device.connections > 1 ? ` · ${device.connections} 个连接` : ''}` : '离线')),
+              device.online ? '在线' : '离线')),
           React.createElement('div', { style: { ...styles.muted, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: 3 } },
             device.lastSeenAt ? `最近连接：${new Date(device.lastSeenAt).toLocaleString()}` : '尚未连接')),
         React.createElement('button', {
@@ -143,7 +300,7 @@ window.__ModuleLoader__.load({
             minWidth: 54,
             opacity: revoking ? .6 : 1,
           },
-          title: `吊销 ${device.name}`,
+          title: `吊销 ${device.displayName || device.name}`,
           // Pointer-up is more reliable than click inside the shell overlay on
           // touch devices. The click handler remains for keyboard activation.
           onPointerUp: triggerRevoke,
@@ -154,8 +311,11 @@ window.__ModuleLoader__.load({
     }
 
     function DevicePanel() {
+      const [activeSection, setActiveSection] = React.useState('general')
       const [devices, setDevices] = React.useState(null)
+      const [showAllDevices, setShowAllDevices] = React.useState(false)
       const [status, setStatus] = React.useState(null)
+      const [dismissedNotice, setDismissedNotice] = React.useState(() => dismissedRestartInstance)
       const [publicUrl, setPublicUrl] = React.useState('')
       const [pairingRoute, setPairingRoute] = React.useState('auto')
       const [connectionHelpOpen, setConnectionHelpOpen] = React.useState(false)
@@ -170,8 +330,32 @@ window.__ModuleLoader__.load({
       const [cloudflareToken, setCloudflareToken] = React.useState('')
       const [cloudflareMode, setCloudflareMode] = React.useState('quick')
       const [cloudflareBusy, setCloudflareBusy] = React.useState(false)
-      const [deviceName, setDeviceName] = React.useState('iPhone')
       const [qr, setQr] = React.useState(null)
+      const pairingDialogRef = React.useRef(null)
+      const [pairingClosing, setPairingClosing] = React.useState(false)
+      const pairingCloseTimer = React.useRef(null)
+      const closePairingDialog = () => {
+        if (pairingCloseTimer.current !== null) return
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+          setQr(null)
+          return
+        }
+        setPairingClosing(true)
+        pairingCloseTimer.current = window.setTimeout(() => {
+          pairingCloseTimer.current = null
+          setQr(null)
+          setPairingClosing(false)
+        }, 180)
+      }
+      React.useEffect(() => {
+        setPairingClosing(false)
+        return () => {
+          if (pairingCloseTimer.current !== null) {
+            window.clearTimeout(pairingCloseTimer.current)
+            pairingCloseTimer.current = null
+          }
+        }
+      }, [qr])
       const [error, setError] = React.useState(null)
       const [busy, setBusy] = React.useState(false)
       const [refreshing, setRefreshing] = React.useState(false)
@@ -288,6 +472,13 @@ window.__ModuleLoader__.load({
         return () => { active = false; window.clearInterval(timer) }
       }, [refresh])
 
+      React.useEffect(() => {
+        if (!qr) return
+        const previousFocus = document.activeElement
+        pairingDialogRef.current?.querySelector('button')?.focus()
+        return () => previousFocus?.focus()
+      }, [qr])
+
       const choosePairingRoute = (route) => {
         pairingRouteRef.current = route
         setPairingRoute(route)
@@ -325,7 +516,7 @@ window.__ModuleLoader__.load({
         }
       }
 
-      const configureCloudflare = async (enabled) => {
+      const configureCloudflare = async (enabled, mode = cloudflareMode) => {
         if (cloudflareBusy) return
         setCloudflareBusy(true)
         setError(null)
@@ -334,8 +525,8 @@ window.__ModuleLoader__.load({
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ enabled, ...(enabled ? {
-              mode: cloudflareMode,
-              ...(cloudflareMode === 'named' ? { hostname: cloudflareHost, token: cloudflareToken } : {}),
+              mode,
+              ...(mode === 'named' ? { hostname: cloudflareHost, token: cloudflareToken } : {}),
             } : {}) }),
           })
           setCloudflareToken('')
@@ -352,10 +543,37 @@ window.__ModuleLoader__.load({
         }
       }
 
+      const checkCloudflare = async () => {
+        if (cloudflareBusy) return
+        setCloudflareBusy(true)
+        setError(null)
+        try {
+          const data = await request('/mgw/cloudflare/check', { method: 'POST' })
+          setStatus((current) => ({ ...(current || {}), cloudflare: data }))
+        } catch (cause) { setError(cause.message) }
+        finally { setCloudflareBusy(false) }
+      }
+
+      const restartCloudflare = async () => {
+        if (cloudflareBusy) return
+        setCloudflareBusy(true)
+        setError(null)
+        try {
+          const data = await request('/mgw/cloudflare/restart', { method: 'POST' })
+          if (data.mode === 'quick') setQr(null)
+          setStatus((current) => ({ ...(current || {}), cloudflare: data }))
+          await refresh()
+        } catch (cause) {
+          setError(cause.message)
+        } finally {
+          setCloudflareBusy(false)
+        }
+      }
+
       const createPairing = async (endpoint) => request('/mgw/pair', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: deviceName, publicUrl: endpoint }),
+        body: JSON.stringify({ publicUrl: endpoint }),
       })
 
       const pair = async () => {
@@ -435,7 +653,7 @@ window.__ModuleLoader__.load({
         try {
           await request(`/mgw/devices/${encodeURIComponent(device.id)}/revoke`, { method: 'POST' })
           setDevices((current) => Array.isArray(current) ? current.filter((item) => item.id !== device.id) : current)
-          setDeviceNotice(`已吊销 ${device.name}`)
+          setDeviceNotice(`已吊销 ${device.displayName || device.name}`)
           window.setTimeout(() => setDeviceNotice(null), 2200)
         } catch (cause) {
           setDeviceNoticeError(true)
@@ -452,23 +670,59 @@ window.__ModuleLoader__.load({
         }
       }
 
+      const restartNoticeInstance = status?.gatewayInstanceId || (status?.webPid ? String(status.webPid) : null)
+      const dismissRestartNotice = () => {
+        dismissedRestartInstance = restartNoticeInstance
+        setDismissedNotice(restartNoticeInstance)
+        try { window.localStorage.setItem(restartNoticeStorageKey, restartNoticeInstance) } catch { /* keep in-memory dismissal */ }
+      }
+
+      const onlineDevices = (devices || []).filter((device) => device.online)
+      const offlineDevices = (devices || []).filter((device) => !device.online)
+      const visibleDevices = showAllDevices ? [...onlineDevices, ...offlineDevices] : onlineDevices
+
       const advice = connectionAdvice(status, publicSetup)
       const helpLine = (name, description) => React.createElement('div', { style: { marginTop: 7 } },
         React.createElement('strong', null, name), '：', description)
 
       return React.createElement('div', { style: styles.backdrop, onMouseDown: () => setOpen(false) },
-        React.createElement('aside', { style: styles.panel, onMouseDown: (event) => { event.stopPropagation(); setToolsOpen(false) }, role: 'dialog', 'aria-modal': true, 'aria-label': '移动设备管理' },
+        React.createElement('style', null, panelCss),
+        qr ? React.createElement('div', { style: { ...styles.backdrop, zIndex: 1201 },
+          onMouseDown: (event) => { event.stopPropagation(); closePairingDialog() } },
+          React.createElement('div', { className: 'mgw-pairing-dialog', 'data-closing': pairingClosing, ref: pairingDialogRef, role: 'dialog', 'aria-modal': true, 'aria-label': '设备配对二维码', tabIndex: -1,
+            style: { ...styles.panel, width: 'min(520px, 100%)', height: 'auto', overflowY: 'auto', scrollbarWidth: 'none' },
+            onMouseDown: (event) => event.stopPropagation(),
+            onKeyDown: (event) => {
+              if (event.key === 'Escape') { event.stopPropagation(); closePairingDialog() }
+              if (event.key === 'Tab') {
+                const items = [...event.currentTarget.querySelectorAll('button, textarea')]
+                const first = items[0], last = items[items.length - 1]
+                if (event.shiftKey && (document.activeElement === first || document.activeElement === event.currentTarget)) { event.preventDefault(); last?.focus() }
+                else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus() }
+              }
+            } },
+            React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end' } },
+              React.createElement('button', { type: 'button', style: { ...styles.button, ...styles.headerButton }, 'aria-label': '关闭配对窗口', onClick: closePairingDialog }, '✕')),
+          React.createElement('section', { style: { textAlign: 'center' } },
+            React.createElement('strong', null, '使用移动客户端扫码'),
+            React.createElement('img', { style: styles.qr, src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(qr.svg)}`, alt: '一次性设备配对二维码' }),
+            React.createElement('label', { style: { ...styles.label, textAlign: 'left' } }, 'Base64URL 配对字符串'),
+            React.createElement('textarea', { style: styles.pairingText, value: qr.qrPayload, readOnly: true, spellCheck: false, onFocus: (event) => event.target.select() }),
+            React.createElement('button', { style: { ...styles.button, width: '100%', marginBottom: 8, borderColor: pairingTokenCopied ? colors.success : colors.border, color: pairingTokenCopied ? colors.success : colors.text }, onClick: copyPairingText }, pairingTokenCopied ? '✓ 已复制' : '复制配对 Token'),
+            pairingTokenCopied ? React.createElement('div', { style: { ...styles.muted, color: colors.success, marginBottom: 8 } }, '已复制到剪贴板') : null,
+            React.createElement('div', { style: styles.muted }, `有效期至 ${new Date(qr.pairing.expiresAt).toLocaleTimeString()}；扫码成功后此二维码立即失效。`)))) : null,
+        React.createElement('aside', { className: 'mobile-gateway-panel', inert: qr ? true : undefined, 'aria-hidden': qr ? true : undefined, style: styles.panel, onMouseDown: (event) => { event.stopPropagation(); setToolsOpen(false) }, role: 'dialog', 'aria-modal': true, 'aria-label': '移动设备管理' },
           React.createElement('div', { style: styles.header },
             React.createElement('div', null,
               React.createElement('h2', { style: styles.title }, '移动设备'),
-              React.createElement('div', { style: styles.muted }, status && status.gatewayEnabled ? '移动网关已开启 · 设备鉴权生效中' : '移动网关已关闭 · 普通 WebUI 模式')),
+              React.createElement('div', { style: styles.muted }, !status ? '正在加载网关状态…' : status.gatewayEnabled ? `移动网关已开启 · ${status.requireAuth ? '设备鉴权已开启' : '本机设备鉴权已关闭'}` : '移动网关已关闭 · 普通 WebUI 模式')),
             React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 6 } },
               React.createElement('div', { style: { position: 'relative' }, onMouseDown: (event) => event.stopPropagation() },
                 React.createElement('button', {
                   type: 'button', style: { ...styles.button, ...styles.headerButton, borderRadius: '50%' }, title: '工具', 'aria-label': '工具',
                   'aria-haspopup': 'menu', 'aria-expanded': toolsOpen,
                   onClick: () => setToolsOpen((value) => !value),
-                }, React.createElement('svg', { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true },
+                }, React.createElement('svg', { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true },
                   React.createElement('path', { d: 'M10.3 2.8h3.4l.5 2.2a7.6 7.6 0 0 1 1.7.7l1.9-1.2 2.4 2.4L19 8.8c.3.5.5 1.1.7 1.7l2.2.5v3.4l-2.2.5a7.6 7.6 0 0 1-.7 1.7l1.2 1.9-2.4 2.4-1.9-1.2a7.6 7.6 0 0 1-1.7.7l-.5 2.2h-3.4l-.5-2.2a7.6 7.6 0 0 1-1.7-.7l-1.9 1.2-2.4-2.4L5 16.6a7.6 7.6 0 0 1-.7-1.7l-2.2-.5V11l2.2-.5A7.6 7.6 0 0 1 5 8.8L3.8 6.9l2.4-2.4 1.9 1.2a7.6 7.6 0 0 1 1.7-.7l.5-2.2Z' }),
                   React.createElement('circle', { cx: 12, cy: 12.7, r: 3.1 }))),
                 toolsOpen ? React.createElement('div', { style: styles.toolsMenu, role: 'menu', 'aria-label': '网关工具' },
@@ -485,22 +739,40 @@ window.__ModuleLoader__.load({
                   }, '停止 DSH Web',
                   React.createElement('span', { style: { ...styles.muted, display: 'block', marginTop: 2 } }, '结束后台进程，所有连接将断开')))
                   : null),
-              React.createElement('button', { style: { ...styles.button, ...styles.headerButton }, onClick: () => setOpen(false), 'aria-label': '关闭' }, '✕'))),
+              React.createElement('button', { style: { ...styles.button, ...styles.headerButton }, onClick: () => setOpen(false), 'aria-label': '关闭' },
+                React.createElement('svg', { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2.2, strokeLinecap: 'round', 'aria-hidden': true },
+                  React.createElement('path', { d: 'M6 6l12 12M18 6L6 18' }))))),
+          React.createElement('div', { className: 'mgw-body' },
+            React.createElement('nav', { className: 'mgw-nav', 'aria-label': '移动网关设置分组' },
+              [['general', '通用设置'], ['pairing', '连接与配对'], ['devices', '可信设备']].map(([id, label]) =>
+                React.createElement('button', { key: id, type: 'button', 'aria-current': activeSection === id ? 'page' : undefined,
+                  onClick: () => { setActiveSection(id); setConnectionHelpOpen(false); setToolsOpen(false) } }, label))),
+            React.createElement('div', { className: 'mgw-content', key: activeSection },
+          restartNoticeInstance && dismissedNotice !== restartNoticeInstance ? React.createElement('section', { style: { ...styles.card, position: 'relative', padding: '10px 40px 10px 12px', border: '1px solid', borderRadius: 10, marginBottom: 8, background: 'var(--dsw-alias-state-warn-tertiary, #fff7df)', borderColor: 'color-mix(in srgb, #d99a16 35%, transparent)', fontSize: 12, lineHeight: 1.6 }, role: 'note' },
+            React.createElement('button', { type: 'button', 'aria-label': '关闭重启提醒', title: '关闭提醒',
+              style: { ...styles.button, position: 'absolute', right: 8, top: 8, border: 0, width: 24, height: 24, padding: 0, color: colors.muted },
+              onClick: dismissRestartNotice }, '✕'),
+            React.createElement('strong', null, '若安装或更新后连接异常，请重启应用'),
+            React.createElement('div', { style: { color: colors.muted, marginTop: 4 } },
+              '完全退出并重启 APP／Desktop；Web UI 请重启 DSH Web 服务。'),
+            React.createElement('div', { style: { color: colors.muted, marginTop: 4 } },
+              '端口仍被占用时，请关闭其他 Harness 实例。')) : null,
           toolNotice ? React.createElement('div', { style: { ...styles.muted, marginBottom: 10 } }, toolNotice) : null,
           error ? React.createElement('div', { style: styles.error }, error) : null,
+          React.createElement('div', { hidden: activeSection !== 'general' },
           React.createElement('section', { style: styles.card },
             React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', gap: 14, alignItems: 'center' } },
               React.createElement('div', null,
                 React.createElement('strong', null, '网关运行模式'),
                 React.createElement('div', { style: { ...styles.muted, marginTop: 4 } }, status && status.gatewayEnabled
                   ? status.gatewayMode === 'persistent'
-                    ? '常驻开启，重启后保持；无需设备在线'
+                    ? '重启后保持开启'
                     : status.waitExpiresAt
                       ? `等待可信设备连接，约 ${Math.max(1, Math.ceil((status.waitExpiresAt - Date.now()) / 60000))} 分钟后自动关闭`
                       : '设备已连接过，本次运行保持开启；重启后重新计时'
-                  : '关闭时不会接受移动设备连接，重启后保持关闭')),
+                  : '不接受移动设备连接')),
               React.createElement('span', { style: { position: 'relative', display: 'inline-flex', flexShrink: 0 } },
-                React.createElement('select', {
+                React.createElement(GatewaySelect, {
                   style: { ...styles.input, width: 'auto', marginBottom: 0, padding: '8px 40px 8px 12px', appearance: 'none', WebkitAppearance: 'none' },
                   'aria-label': '网关运行模式',
                   value: status ? status.gatewayMode || (status.gatewayEnabled ? 'temporary' : 'disabled') : 'disabled',
@@ -510,16 +782,9 @@ window.__ModuleLoader__.load({
                 React.createElement('option', { value: 'disabled' }, '关闭'),
                 React.createElement('option', { value: 'temporary' }, '临时开启'),
                 React.createElement('option', { value: 'persistent' }, '常驻开启')),
-                React.createElement('span', {
-                  'aria-hidden': true,
-                  style: {
-                    position: 'absolute', right: 15, top: '50%', width: 7, height: 7,
-                    borderRight: `1.5px solid ${colors.text}`, borderBottom: `1.5px solid ${colors.text}`,
-                    transform: 'translateY(-65%) rotate(45deg)', pointerEvents: 'none',
-                  },
-                }))),
+              )),
             status && status.gatewayId ? React.createElement('div', { style: { ...styles.muted, marginTop: 12, overflowWrap: 'anywhere' } },
-              `${status.gatewayName} · ${status.gatewayId}`) : null),
+              status.gatewayName) : null),
           React.createElement('section', { style: styles.card },
             React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', gap: 14, alignItems: 'center' } },
               React.createElement('div', null,
@@ -541,68 +806,12 @@ window.__ModuleLoader__.load({
             status && !status.requireAuth
               ? React.createElement('p', { style: { ...styles.error, margin: '12px 0 0' } }, 'Debug 模式：本机 DSH 入口将跳过设备凭证校验；独立局域网入口仍强制鉴权。')
               : null),
-          status && status.cloudflare && status.cloudflare.supported
-            ? React.createElement('section', { style: styles.card },
-                React.createElement('strong', null, 'Cloudflare Tunnel · PC 外网接入'),
-                React.createElement('p', { style: styles.muted }, '首次开启时自动下载并校验 cloudflared；公网入口只接受已鉴权的移动 WebSocket。'),
-                React.createElement('label', { style: styles.label }, '接入方式'),
-                React.createElement('select', { style: styles.input, value: cloudflareMode, onChange: (event) => setCloudflareMode(event.target.value), disabled: cloudflareBusy },
-                  React.createElement('option', { value: 'quick' }, 'Quick Tunnel · 无需域名'),
-                  React.createElement('option', { value: 'named' }, '命名 Tunnel · 固定域名')),
-                cloudflareMode === 'quick'
-                  ? React.createElement('p', { style: styles.muted }, 'Cloudflare 会分配随机地址；DSH 重启或隧道重连后地址可能改变，手机需重新扫码确认新地址。适合临时使用。')
-                  : React.createElement(React.Fragment, null,
-                      React.createElement('p', { style: styles.muted }, '先在 Cloudflare 创建命名 Tunnel，把公开域名的 Service URL 设为 ', React.createElement('code', null, `http://127.0.0.1:${status.cloudflare.port}`), '。'),
-                      React.createElement('label', { style: styles.label }, '公开域名'),
-                      React.createElement('input', { style: styles.input, value: cloudflareHost, onChange: (event) => setCloudflareHost(event.target.value.trim()), placeholder: 'gateway.example.com', spellCheck: false }),
-                      React.createElement('label', { style: styles.label }, 'Tunnel Token'),
-                      React.createElement('input', { style: styles.input, type: 'password', value: cloudflareToken, onChange: (event) => setCloudflareToken(event.target.value.trim()), placeholder: status.cloudflare.configured ? '已保存；留空则保持原 Token' : '粘贴 eyJ… Token', autoComplete: 'off', spellCheck: false })),
-                React.createElement('button', {
-                  style: { ...styles.button, ...styles.primary, opacity: cloudflareBusy || (cloudflareMode === 'named' && (!cloudflareHost || (!cloudflareToken && !status.cloudflare.configured))) ? .65 : 1 },
-                  disabled: cloudflareBusy || (cloudflareMode === 'named' && (!cloudflareHost || (!cloudflareToken && !status.cloudflare.configured))),
-                  onClick: () => configureCloudflare(true),
-                }, cloudflareBusy ? '正在处理…' : status.cloudflare.enabled && cloudflareMode === status.cloudflare.mode ? '更新 Tunnel 配置' : cloudflareMode === 'quick' ? '一键开启 Quick Tunnel' : '开启命名 Tunnel'),
-                status.cloudflare.enabled
-                  ? React.createElement('button', { style: { ...styles.button, width: '100%', marginTop: 8 }, disabled: cloudflareBusy, onClick: () => configureCloudflare(false) }, '关闭 Cloudflare Tunnel')
-                  : null,
-                React.createElement('div', { style: { ...styles.muted, marginTop: 9, overflowWrap: 'anywhere', color: status.cloudflare.error ? colors.danger : colors.muted } },
-                  status.cloudflare.error || ({ disabled: '未开启', starting: '正在启动本机入口…', preparing: '正在准备 cloudflared（首次需下载）…', connecting: '正在连接 Cloudflare…', online: '已连接 Cloudflare', 'waiting-for-gateway': '等待移动网关开启' }[status.cloudflare.state] || status.cloudflare.state),
-                  status.cloudflare.publicUrl ? ` · ${status.cloudflare.publicUrl}` : ''))
-              : null,
-          status && status.platform === 'linux' ? React.createElement('section', { style: styles.card },
-            React.createElement('strong', null, '公网接入'),
-            publicSetup === null
-              ? React.createElement('p', { style: styles.muted }, '正在检查系统组件…')
-              : publicSetup.installed
-                ? React.createElement(React.Fragment, null,
-                    React.createElement('div', { style: { ...styles.muted, margin: '5px 0 12px' } }, publicSetup.configured
-                      ? publicSetup.backendPort && status && status.webPort && publicSetup.backendPort !== status.webPort
-                        ? `端口需要更新：Nginx 当前为 ${publicSetup.backendPort}，DSH 当前为 ${status.webPort}`
-                        : `已配置${publicSetup.backendPort ? `，Nginx 转发至 DSH 端口 ${publicSetup.backendPort}` : ''}`
-                      : `Helper 已就绪，将自动使用当前 DSH 端口${status && status.webPort ? ` ${status.webPort}` : ''}`),
-                    React.createElement('label', { style: styles.label }, '服务器公网 IPv4'),
-                    React.createElement('input', {
-                      style: styles.input,
-                      value: publicIp,
-                      onChange: (event) => setPublicIp(event.target.value.trim()),
-                      placeholder: '203.0.113.10',
-                      inputMode: 'decimal',
-                      spellCheck: false,
-                    }),
-                    React.createElement('button', {
-                      style: { ...styles.button, ...styles.primary, opacity: publicSetupBusy || !publicIp ? .65 : 1 },
-                      disabled: publicSetupBusy || !publicIp,
-                      onClick: configurePublicAccess,
-                    }, publicSetupBusy ? '正在配置 Nginx 与证书…' : publicSetup.configured ? '更新公网配置' : '配置公网接入'),
-                    publicSetup.publicUrl
-                      ? React.createElement('div', { style: { ...styles.muted, marginTop: 9, overflowWrap: 'anywhere' } }, publicSetup.publicUrl)
-                      : null)
-                : React.createElement(React.Fragment, null,
-                    React.createElement('p', { style: { ...styles.muted, marginBottom: 8 } }, '尚未安装系统 Helper。请在服务器执行一次初始化：'),
-                    React.createElement('code', { style: { display: 'block', fontSize: 10, lineHeight: 1.5, overflowWrap: 'anywhere', userSelect: 'all' } }, 'npx --yes dsh-plugin-mobile-gateway@latest init'))) : null,
+          ),
+          React.createElement('div', { hidden: activeSection !== 'pairing' },
           React.createElement('section', { style: styles.card },
+            React.createElement('div', { className: 'mgw-setting-row' },
             React.createElement('div', { style: { position: 'relative', display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }, onMouseLeave: () => setConnectionHelpOpen(false) },
-              React.createElement('span', { style: { ...styles.label, marginBottom: 0 } }, '配对连接方式'),
+              React.createElement('h3', { className: 'mgw-section-title', style: { marginBottom: 0 } }, '配对连接方式'),
               React.createElement('button', {
                 type: 'button',
                 style: styles.helpButton,
@@ -621,51 +830,126 @@ window.__ModuleLoader__.load({
                 helpLine('Cloudflare Channel（命名 Tunnel）', 'PC 主动连接 Cloudflare，外网用固定域名的 wss://；需要 Cloudflare 账户和域名。'),
                 helpLine('Quick Channel（Quick Tunnel）', '无需账户或域名，Cloudflare 分配临时 wss:// 地址；隧道重建后地址可能变化。'),
                 helpLine('公网服务器连接', 'DSH 运行在有固定公网 IPv4 的 Linux 服务器上，配置公网入口后用 wss:// 公网 IP 连接。'),
-                React.createElement('div', { style: { borderTop: '1px solid rgba(255,255,255,.18)', marginTop: 10, paddingTop: 8 } },
+                React.createElement('div', { style: { borderTop: `1px solid ${colors.border}`, marginTop: 10, paddingTop: 8 } },
                   React.createElement('strong', null, '结合当前环境'),
-                  React.createElement('div', { style: { color: '#c6cbd4', marginTop: 4 } }, advice.detected),
+                  React.createElement('div', { style: { color: colors.muted, marginTop: 4 } }, advice.detected),
                   React.createElement('div', { style: { marginTop: 6 } }, advice.local),
                   React.createElement('div', { style: { marginTop: 6 } }, advice.remote),
-                  React.createElement('div', { style: { color: '#aeb6c3', marginTop: 6 } }, '面板无法判断手机当前网络；请按手机所在位置选择，提示不会替你修改选择。')))
+                  React.createElement('div', { style: { color: colors.muted, marginTop: 6 } }, '面板无法判断手机当前网络；请按手机所在位置选择，提示不会替你修改选择。')))
                 : null),
-            React.createElement('select', { style: styles.input, value: pairingRoute, onChange: (event) => choosePairingRoute(event.target.value), disabled: !status, 'aria-label': '配对连接方式' },
+            React.createElement('div', { style: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '8px 14px', maxWidth: '100%' } },
+            React.createElement(GatewaySelect, { style: styles.input, value: pairingRoute, onChange: (event) => choosePairingRoute(event.target.value), disabled: !status, 'aria-label': '配对连接方式' },
               React.createElement('option', { value: 'auto' }, '自动选择 · 优先外网'),
               lanPairingUrl(status) || pairingRoute === 'lan'
                 ? React.createElement('option', { value: 'lan', disabled: !lanPairingUrl(status) }, lanPairingUrl(status)
-                  ? '局域网直连 · ' + lanPairingUrl(status).replace(/^wss?:\/\//, '').split('/')[0]
+                  ? '局域网直连'
                   : '局域网直连 · 当前不可用')
                 : null,
               status?.cloudflare?.enabled ? React.createElement('option', { value: 'cloudflare' }, 'Cloudflare 外网') : null,
               React.createElement('option', { value: 'custom' }, '手动输入地址')),
+              (pairingRoute === 'auto' || pairingRoute === 'cloudflare') && status?.cloudflare?.supported
+                ? React.createElement('span', { style: { fontSize: 12, lineHeight: 1.5, fontWeight: 500,
+                    color: 'var(--dsw-alias-link, #4176e6)' } }, '外网使用 Cloudflare Tunnel 进行连接，请在下方进行设置。') : null)),
             React.createElement('label', { style: styles.label }, 'WebSocket 地址'),
             React.createElement('input', { style: styles.input, value: publicUrl, onChange: (event) => { choosePairingRoute('custom'); setPublicUrl(event.target.value) }, placeholder: 'ws://192.168.1.10:3081/ws/mobile', spellCheck: false }),
             status && status.lan && status.lan.enabled
-              ? React.createElement('div', { style: { ...styles.muted, margin: '-7px 0 10px', color: status.lan.error ? colors.danger : colors.muted } },
+              ? React.createElement('div', { style: { ...styles.muted, margin: '-7px 0 10px', fontWeight: 500, color: status.lan.error ? colors.danger : status.lan.listening ? colors.success : 'var(--dsw-alias-link, #4176e6)' } },
                   status.lan.error
                     ? `局域网监听失败：${status.lan.error}`
                     : status.lan.listening
                       ? `局域网入口已开启${status.lan.urls && status.lan.urls.length ? `：${status.lan.urls.join('、')}` : `，端口 ${status.lan.port}`}`
                       : '局域网入口启动中…')
               : null,
-            React.createElement('label', { style: styles.label }, '设备名称'),
-            React.createElement('input', { style: styles.input, value: deviceName, onChange: (event) => setDeviceName(event.target.value), maxLength: 80, placeholder: 'iPhone' }),
             React.createElement('button', {
               style: { ...styles.button, ...styles.primary, opacity: busy || !(status && status.gatewayEnabled) || !publicUrl.trim() ? .65 : 1 },
               disabled: busy || !(status && status.gatewayEnabled) || !publicUrl.trim(),
               onClick: pair,
             }, busy ? '正在生成…' : !(status && status.gatewayEnabled) ? '请先开启移动网关' : !publicUrl.trim() ? '等待连接地址' : '生成配对二维码'),
-            React.createElement('p', { style: { ...styles.muted, margin: '10px 0 0' } }, '同一局域网选择“局域网直连”，无需关闭 Cloudflare Tunnel。局域网使用私有地址的 ws://；公网地址必须使用 wss://。配对码只能使用一次，并在 5 分钟内过期。')),
-          qr ? React.createElement('section', { style: { ...styles.card, textAlign: 'center' } },
-            React.createElement('strong', null, '使用 iOS 客户端扫码'),
-            React.createElement('img', { style: styles.qr, src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(qr.svg)}`, alt: '一次性设备配对二维码' }),
-            React.createElement('label', { style: { ...styles.label, textAlign: 'left' } }, 'Base64URL 配对字符串'),
-            React.createElement('textarea', { style: styles.pairingText, value: qr.qrPayload, readOnly: true, spellCheck: false, onFocus: (event) => event.target.select() }),
-            React.createElement('button', { style: { ...styles.button, width: '100%', marginBottom: 8, borderColor: pairingTokenCopied ? colors.success : colors.border, color: pairingTokenCopied ? colors.success : colors.text }, onClick: copyPairingText }, pairingTokenCopied ? '✓ 已复制' : '复制配对 Token'),
-            pairingTokenCopied ? React.createElement('div', { style: { ...styles.muted, color: colors.success, marginBottom: 8 } }, '已复制到剪贴板') : null,
-            React.createElement('div', { style: styles.muted }, `有效期至 ${new Date(qr.pairing.expiresAt).toLocaleTimeString()}；扫码成功后此二维码立即失效。`)) : null,
+            React.createElement('p', { style: { ...styles.muted, margin: '10px 0 0' } }, '配对码仅可使用一次，5 分钟内有效。')),
+          (pairingRoute === 'auto' || pairingRoute === 'cloudflare') && status?.cloudflare?.supported
+            ? React.createElement('section', { className: 'mgw-cloudflare-block', style: { ...styles.card, background: colors.card, border: 0, borderRadius: 16, padding: 18, marginTop: 16 } },
+                React.createElement('h3', { className: 'mgw-section-title' }, 'Cloudflare Tunnel · 外网接入'),
+                React.createElement('p', { style: styles.muted }, '首次开启自动准备 Tunnel 组件。'),
+                React.createElement('div', { className: 'mgw-setting-row' },
+                React.createElement('span', { className: 'mgw-setting-label' }, '接入方式'),
+                React.createElement(GatewaySelect, { style: styles.input, value: cloudflareMode, 'aria-label': 'Cloudflare 接入方式', onChange: (event) => {
+                    const mode = event.target.value
+                    setCloudflareMode(mode)
+                    if (status.cloudflare.enabled && mode !== status.cloudflare.mode &&
+                        (mode === 'quick' || (status.cloudflare.configured && cloudflareHost === status.cloudflare.hostname && !cloudflareToken))) {
+                      void configureCloudflare(true, mode)
+                    }
+                  }, disabled: cloudflareBusy },
+                  React.createElement('option', { value: 'quick' }, 'Quick Tunnel · 无需域名'),
+                  React.createElement('option', { value: 'named' }, '命名 Tunnel · 固定域名'))),
+                cloudflareMode === 'quick'
+                  ? React.createElement('p', { style: styles.muted }, '临时地址可能变化，变化后需重新扫码。')
+                  : React.createElement(React.Fragment, null,
+                      React.createElement('p', { style: styles.muted }, '先在 Cloudflare 创建命名 Tunnel，把公开域名的 Service URL 设为 ', React.createElement('code', null, `http://127.0.0.1:${status.cloudflare.port}`), '。Tunnel Token 仅授权连接，不能自动创建公开主机名或 DNS；还需确认域名存在指向 Tunnel UUID.cfargotunnel.com 的已代理 CNAME 记录。'),
+                      React.createElement('label', { style: styles.label }, '公开域名'),
+                      React.createElement('input', { style: styles.input, value: cloudflareHost, onChange: (event) => setCloudflareHost(event.target.value.trim()), placeholder: 'gateway.example.com', spellCheck: false }),
+                      React.createElement('label', { style: styles.label }, 'Tunnel Token'),
+                      React.createElement('input', { style: styles.input, type: 'password', value: cloudflareToken, onChange: (event) => setCloudflareToken(event.target.value.trim()), placeholder: status.cloudflare.configured ? '已保存；留空则保持原 Token' : '粘贴 eyJ… Token', autoComplete: 'off', spellCheck: false })),
+                (!status.cloudflare.enabled || (cloudflareMode === 'named' &&
+                  (status.cloudflare.mode !== 'named' || cloudflareHost !== status.cloudflare.hostname || !!cloudflareToken)))
+                  ? React.createElement('button', {
+                  style: { ...styles.button, ...styles.primary, opacity: cloudflareBusy || (cloudflareMode === 'named' && (!cloudflareHost || (!cloudflareToken && !status.cloudflare.configured))) ? .65 : 1 },
+                  disabled: cloudflareBusy || (cloudflareMode === 'named' && (!cloudflareHost || (!cloudflareToken && !status.cloudflare.configured))),
+                  onClick: () => configureCloudflare(true),
+                }, cloudflareBusy ? '正在处理…' : status.cloudflare.enabled ? '保存并连接' : cloudflareMode === 'quick' ? '一键开启 Quick Tunnel' : '开启命名 Tunnel') : null,
+                status.cloudflare.enabled
+                  ? React.createElement(React.Fragment, null,
+                      React.createElement('button', { style: { ...styles.button, width: '100%', marginTop: 8 }, disabled: cloudflareBusy || status.cloudflare.state !== 'online', onClick: checkCloudflare }, '检测公网 DNS / TLS / WebSocket'),
+                      React.createElement('button', { style: { ...styles.button, width: '100%', marginTop: 8 }, disabled: cloudflareBusy || !status.gatewayEnabled, onClick: restartCloudflare }, '重启 Tunnel'),
+                      React.createElement('button', { style: { ...styles.button, width: '100%', marginTop: 8 }, disabled: cloudflareBusy, onClick: () => configureCloudflare(false) }, '关闭 Cloudflare Tunnel'),
+                      React.createElement('p', { style: styles.muted }, '重启会短暂断开连接。'))
+                  : null,
+                React.createElement('div', { style: { ...styles.muted, marginTop: 9, overflowWrap: 'anywhere', fontWeight: 500, color: status.cloudflare.error ? colors.danger : status.cloudflare.state === 'online' ? colors.success : ['starting', 'preparing', 'connecting'].includes(status.cloudflare.state) ? 'var(--dsw-alias-link, #4176e6)' : colors.muted } },
+                  status.cloudflare.error || ({ disabled: '未开启', starting: '正在启动本机入口…', preparing: '正在准备 cloudflared（首次需下载）…', connecting: '正在连接 Cloudflare…', online: '隧道传输已连接（不等于公网入口可达）', 'waiting-for-gateway': '等待移动网关开启' }[status.cloudflare.state] || status.cloudflare.state),
+                  status.cloudflare.publicUrl ? ` · ${status.cloudflare.publicUrl}` : ''),
+                 status.cloudflare.enabled && status.cloudflare.endpointHealth
+                   ? React.createElement('p', { style: { ...styles.muted, overflowWrap: 'anywhere', fontWeight: 500, color: status.cloudflare.endpointHealth.state === 'reachable' ? colors.success : status.cloudflare.endpointHealth.state === 'checking' ? 'var(--dsw-alias-link, #4176e6)' : status.cloudflare.endpointHealth.state === 'unchecked' ? colors.muted : colors.danger } },
+                       status.cloudflare.endpointHealth.message,
+                       status.cloudflare.endpointHealth.checkedAt ? `（检测时间：${status.cloudflare.endpointHealth.checkedAt}）` : '')
+                   : null)
+              : null,
+          status && status.platform === 'linux' ? React.createElement('section', { style: styles.card },
+            React.createElement('h3', { className: 'mgw-section-title' }, '公网接入'),
+            publicSetup === null
+              ? React.createElement('p', { style: styles.muted }, '正在检查系统组件…')
+              : publicSetup.installed
+                ? React.createElement(React.Fragment, null,
+                    React.createElement('div', { style: { ...styles.muted, margin: '5px 0 12px' } }, publicSetup.configured
+                      ? publicSetup.backendPort && status && status.webPort && publicSetup.backendPort !== status.webPort
+                        ? `端口需要更新：Nginx 当前为 ${publicSetup.backendPort}，DSH 当前为 ${status.webPort}`
+                        : `已配置${publicSetup.backendPort ? `，Nginx 转发至 DSH 端口 ${publicSetup.backendPort}` : ''}`
+                      : `Helper 已就绪，将自动使用当前 DSH 端口${status && status.webPort ? ` ${status.webPort}` : ''}`),
+                    React.createElement('label', { style: styles.label }, '服务器公网 IPv4'),
+                    React.createElement('input', {
+                      style: styles.input,
+                      value: publicIp,
+                      onChange: (event) => setPublicIp(event.target.value.trim()),
+                      placeholder: '203.0.113.10',
+                      inputMode: 'decimal',
+                      spellCheck: false,
+                    }),
+                    React.createElement('button', {
+                      style: { ...styles.button, ...styles.primary, opacity: publicSetupBusy || !publicIp ? .65 : 1 },
+                      disabled: publicSetupBusy || !publicIp,
+                      onClick: configurePublicAccess,
+                    }, publicSetupBusy ? '正在配置 Nginx 与证书…' : publicSetup.configured ? '更新公网配置' : '配置公网接入'),
+                    publicSetup.publicUrl
+                      ? React.createElement('div', { style: { ...styles.muted, marginTop: 9, overflowWrap: 'anywhere' } }, publicSetup.publicUrl)
+                      : null)
+                : React.createElement(React.Fragment, null,
+                    React.createElement('p', { style: { ...styles.muted, marginBottom: 8 } }, '尚未安装系统 Helper。请在服务器执行一次初始化：'),
+                    React.createElement('code', { style: { display: 'block', fontSize: 10, lineHeight: 1.5, overflowWrap: 'anywhere', userSelect: 'all' } }, 'npx --yes dsh-plugin-mobile-gateway@latest init'))) : null,
+
+          ),
+          React.createElement('div', { hidden: activeSection !== 'devices' },
           React.createElement('section', { style: styles.card },
             React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-              React.createElement('strong', null, '可信设备'),
+              React.createElement('h3', { className: 'mgw-section-title', style: { marginBottom: 0 } }, '可信设备'),
               React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
                 deviceNotice || refreshNotice ? React.createElement('span', {
                   style: { ...styles.muted, color: deviceNoticeError ? colors.danger : colors.success },
@@ -679,12 +963,22 @@ window.__ModuleLoader__.load({
               ? React.createElement('p', { style: styles.muted }, '加载中…')
               : devices.length === 0
                 ? React.createElement('p', { style: styles.muted }, '暂无已配对设备。')
-                : devices.map((device) => React.createElement(DeviceRow, {
+                : React.createElement(React.Fragment, null,
+                  visibleDevices.length === 0 ? React.createElement('p', { style: styles.muted }, '当前没有在线设备。') : null,
+                  visibleDevices.map((device) => React.createElement(DeviceRow, {
                     key: device.id,
                     device,
                     onRevoke: revoke,
                     revoking: revokingIds.has(device.id),
-                  }))),
+                  })),
+                  offlineDevices.length > 0 ? React.createElement('button', {
+                    type: 'button',
+                    style: { ...styles.button, marginTop: 10, color: colors.muted },
+                    'aria-expanded': showAllDevices,
+                    onClick: () => setShowAllDevices((value) => !value),
+                  }, showAllDevices ? '收起离线设备' : `展开其他已配对设备（${offlineDevices.length}）`) : null)),
+          )),
+          ),
           status && status.version
             ? React.createElement('div', { style: styles.version, 'aria-label': `插件版本 ${status.version}` }, `v${status.version}`)
             : null))