@feiyang666/dsh-mobile-remote 1.0.1 → 1.1.0

package/lib/client.js

@@ -1,503 +1,292 @@
-// dsh-mobile-remote — 手机端远程控制 DeepSeek Harness（Client 半）
-// 职责：
-//  1. 移动端 UI 适配：窄屏强制单列布局、侧栏抽屉化（滑入滑出 + 遮罩）、
-//     触控目标优化（仅作用于 ≤768px 的移动端，桌面端完全不受影响）。
-//  2. shell.overlay「浮动控制条」：会话列表开关 + 远程连接状态指示（每 15s
-//     向 /api/dsh-mobile-remote 轮询状态）。
-//  3. settings.section「远程控制」设置页：展示开关状态、局域网访问地址、
-//     二维码、连接测试与使用说明。
-// 格式遵循 dsh client 插件规范（window.__ModuleLoader__.load + exports.apply）。
+// dsh-mobile-remote — DSH 移动端远程控制插件（client 侧）。
+//
+// 在 Web UI 的「设置」中注册一个「远程控制」section，提供：
+//   1. 开启 / 关闭开关（写入 / 移除 profile patch，经 HMR 热重载生效）；
+//   2. 连接二维码（通过 host 的 /__dsh_remote/qr 接口返回 SVG）；
+//   3. 当前连接的设备数量（host 侧心跳统计）。
+//
+// 打包格式：浏览器 module loader（window.__ModuleLoader__.load）标准 bundle，
+// 与官方 client 插件一致。纯 React.createElement，无 JSX 构建依赖。
 
 window.__ModuleLoader__.load({
-  id: '@feiyang666/dsh-mobile-remote',
+  id: 'dsh-mobile-remote',
   factory: (require) => {
-    var module = { exports: {} }
-    var exports = module.exports
-    Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
-    var React = require('react')
-    var el = React.createElement
+    var module = { exports: {} };
+    var exports = module.exports;
+    Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-    // ---------------------------------------------------------------
-    // 移动端适配样式：只作用于 ≤768px 的窄屏（手机），桌面端不受影响。
-    // 用属性选择器定位 AppFrame（frame 是 [data-shell-overlay] 的父元素），
-    // 不依赖任何 CSS-module 哈希类名。
-    // ---------------------------------------------------------------
-    var MOBILE_CSS = [
-      '@media (max-width: 768px) {',
-      '/* 1) 三列 → 单列：隐藏侧栏 rail 与 details 列 */',
-      'div:has(> [data-shell-overlay]) {',
-      '  grid-template-columns: 0px minmax(0, 1fr) 0px !important;',
-      '}',
-      '/* 2) 侧栏改为抽屉：默认滑出屏幕，打开时滑入（JS 维护 data-mr-open） */',
-      'div:has(> [data-shell-overlay]) > div:first-child {',
-      '  position: fixed !important;',
-      '  top: 0 !important;',
-      '  left: 0 !important;',
-      '  bottom: 0 !important;',
-      '  height: 100% !important;',
-      '  height: 100dvh !important;',
-      '  width: min(84vw, 280px) !important;',
-      '  margin: 0 !important;',
-      '  z-index: 120 !important;',
-      '  background: var(--dsw-alias-bg-base, #ffffff) !important;',
-      '  border-right: 1px solid rgba(128,128,128,.2) !important;',
-      '  box-shadow: 0 0 36px rgba(0,0,0,.35) !important;',
-      '  transform: translateX(-106%);',
-      '  transition: transform .22s ease !important;',
-      '  -webkit-overflow-scrolling: touch;',
-      '}',
-      'div:has(> [data-shell-overlay]) > div:first-child[data-mr-open="true"] {',
-      '  transform: translateX(0) !important;',
-      '}',
-      '/* 3) 抽屉遮罩（JS 创建） */',
-      'body > [data-mr-mask] {',
-      '  position: fixed !important;',
-      '  inset: 0 !important;',
-      '  z-index: 110 !important;',
-      '  background: rgba(0,0,0,.35) !important;',
-      '}',
-      '/* 4) 触控优化 */',
-      'button, [role="button"], input, select, textarea {',
-      '  touch-action: manipulation;',
-      '  -webkit-tap-highlight-color: transparent;',
-      '}',
-      'body { -webkit-text-size-adjust: 100%; }',
-      '}'
-    ].join('\n')
+    var React = require('react');
+    var el = React.createElement;
+    var useState = React.useState;
+    var useEffect = React.useEffect;
+    var useCallback = React.useCallback;
 
-    ;(function injectCss() {
-      if (typeof document === 'undefined') return
-      var existing = document.querySelector('style[data-plugin-css="dsh-mobile-remote/mobile"]')
-      if (existing) return
-      var tag = document.createElement('style')
-      tag.setAttribute('data-plugin', 'dsh-mobile-remote')
-      tag.setAttribute('data-plugin-css', 'dsh-mobile-remote/mobile')
-      tag.textContent = MOBILE_CSS
-      document.head.appendChild(tag)
-    })()
+    /* ------------------------------------------------------------------ */
+    /* 内联样式（跟随宿主主题 token，深色/浅色自动适配）                      */
+    /* ------------------------------------------------------------------ */
 
-    // ---------------------------------------------------------------
-    // 工具函数
-    // ---------------------------------------------------------------
-    var API_PATH = '/api/dsh-mobile-remote'
-    var NS = 'dsh-mobile-remote'
+    var st = {
+      root: {
+        display: 'flex', flexDirection: 'column', gap: 16,
+        width: '100%', maxWidth: 560, minWidth: 0, boxSizing: 'border-box',
+        padding: '8px 0',
+      },
+      card: {
+        display: 'flex', flexDirection: 'column', gap: 12,
+        padding: '16px 18px', borderRadius: 12,
+        background: 'var(--dsw-alias-bg-overlay, #f6f6f7)',
+        border: '1px solid var(--dsw-alias-border-l2, rgba(127,127,127,.18))',
+        boxSizing: 'border-box',
+      },
+      row: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 },
+      title: { fontSize: 15, fontWeight: 600, margin: 0, lineHeight: 1.4 },
+      sub: { fontSize: 13, color: 'var(--dsw-alias-label-tertiary, #767676)', lineHeight: 1.6, margin: 0 },
+      hint: { fontSize: 13, color: 'var(--dsw-alias-label-tertiary, #767676)', lineHeight: 1.6, margin: 0 },
+      badge: {
+        display: 'inline-flex', alignItems: 'center', gap: 6,
+        fontSize: 13, fontWeight: 600, padding: '2px 10px', borderRadius: 999,
+        whiteSpace: 'nowrap',
+      },
+      badgeOn: { color: '#0d7a3f', background: 'rgba(18,150,78,.14)' },
+      badgeOff: { color: '#8a8a8a', background: 'rgba(127,127,127,.12)' },
+      switch: {
+        position: 'relative', width: 46, height: 26, flex: 'none',
+        borderRadius: 999, border: 'none', cursor: 'pointer',
+        transition: 'background .18s ease', padding: 0,
+        background: 'var(--dsw-alias-state-disabled-bg, #d1d1d1)',
+      },
+      switchOn: { background: 'var(--dsw-alias-state-business-primary, #2a7de1)' },
+      knob: {
+        position: 'absolute', top: 3, left: 3, width: 20, height: 20,
+        borderRadius: 999, background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,.25)',
+        transition: 'transform .18s ease',
+      },
+      knobOn: { transform: 'translateX(20px)' },
+      qrBox: {
+        display: 'flex', justifyContent: 'center', alignItems: 'center',
+        padding: 12, borderRadius: 10,
+        background: '#fff',
+        border: '1px solid var(--dsw-alias-border-l2, rgba(127,127,127,.18))',
+      },
+      qrImg: { width: 180, height: 180, display: 'block' },
+      qrFallback: {
+        fontSize: 12, color: 'var(--dsw-alias-label-tertiary, #767676)',
+        textAlign: 'center', lineHeight: 1.6, wordBreak: 'break-all', padding: 8,
+      },
+      grid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 },
+      stat: {
+        display: 'flex', flexDirection: 'column', gap: 4,
+        padding: '12px 14px', borderRadius: 10,
+        background: 'var(--dsw-alias-bg-overlay, #f6f6f7)',
+        border: '1px solid var(--dsw-alias-border-l2, rgba(127,127,127,.18))',
+        boxSizing: 'border-box',
+      },
+      statValue: { fontSize: 20, fontWeight: 700, lineHeight: 1.2 },
+      statLabel: { fontSize: 12, color: 'var(--dsw-alias-label-tertiary, #767676)' },
+      link: {
+        fontSize: 13, color: 'var(--dsw-alias-state-business-primary, #2a7de1)',
+        wordBreak: 'break-all', textDecoration: 'none', lineHeight: 1.6,
+      },
+      code: {
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+        fontSize: 12, padding: '8px 10px', borderRadius: 8,
+        background: 'var(--dsw-alias-bg-base, #f0f0f1)',
+        border: '1px solid var(--dsw-alias-border-l2, rgba(127,127,127,.18))',
+        overflowX: 'auto', whiteSpace: 'pre-wrap', wordBreak: 'break-all', lineHeight: 1.5,
+        color: 'var(--dsw-alias-label-primary, #1f1f1f)',
+      },
+      button: {
+        alignSelf: 'flex-start', padding: '8px 16px', borderRadius: 8,
+        border: '1px solid var(--dsw-alias-border-l2, rgba(127,127,127,.18))',
+        background: 'transparent', color: 'var(--dsw-alias-label-primary, #1f1f1f)',
+        fontSize: 13, fontWeight: 500, cursor: 'pointer',
+      },
+      divider: { height: 1, background: 'var(--dsw-alias-border-l2, rgba(127,127,127,.18))', border: 'none' },
+      disabled: { opacity: 0.55 },
+    };
 
-    function callRemote(args) {
-      return fetch(API_PATH, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(args || {}),
-      }).then(function (r) { return r.json() })
-    }
+    /* ------------------------------------------------------------------ */
+    /* 远程控制面板                                                        */
+    /* ------------------------------------------------------------------ */
 
-    function isMobileViewport() {
-      if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false
-      var w = window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || 0
-      var coarse = window.matchMedia('(pointer: coarse)').matches
-      return w <= 768 || (coarse && w <= 1024)
-    }
+    var STATUS_URL = '/__dsh_remote/status';
+    var TOGGLE_URL = '/__dsh_remote/toggle';
 
-    /** 当前页面是否通过局域网（手机/其他设备）访问，而非本机。 */
-    function isRemoteAccess() {
-      if (typeof location === 'undefined') return false
-      var h = String(location.hostname || '').toLowerCase()
-      return !(h === '' || h === 'localhost' || h === '127.0.0.1' || h === '::1' || h === '[::1]')
+    function fmtUrl(url) {
+      return url || '未检测到局域网地址';
     }
 
-    // ---- 复制到剪贴板（含降级） ----
-    function copyText(text, cb) {
-      function fallback() {
-        try {
-          var ta = document.createElement('textarea')
-          ta.value = text
-          ta.style.position = 'fixed'
-          ta.style.opacity = '0'
-          document.body.appendChild(ta)
-          ta.select()
-          var ok = document.execCommand('copy')
-          document.body.removeChild(ta)
-          cb(ok)
-        } catch (e) { cb(false) }
-      }
-      if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
-        navigator.clipboard.writeText(text).then(function () { cb(true) }).catch(fallback)
-      } else {
-        fallback()
-      }
-    }
+    function RemoteControlPanel() {
+      var _s = useState(null);
+      var status = _s[0];
+      var setStatus = _s[1];
+      var _t = useState(false);
+      var busy = _t[0];
+      var setBusy = _t[1];
+      var _e = useState(null);
+      var error = _e[0];
+      var setError = _e[1];
 
-    // ---------------------------------------------------------------
-    // 抽屉化：监听 frame 的 grid-template-columns，同步抽屉开合与遮罩。
-    // 侧栏开关由 AppFrame 的 narrow 模式控制（ctx.layout.toggleSidebar()），
-    // 切换后 frame 内联 grid 首列会在 0 ↔ 280px 之间变化，这里据此反映。
-    // ---------------------------------------------------------------
-    function startDrawer(layout) {
-      if (typeof MutationObserver === 'undefined' || typeof document === 'undefined') return
-      var frame = null
-      var sidebar = null
-      var mask = null
-      var styleObserver = null
-      var enabled = false // 仅在移动视口下启用抽屉逻辑（桌面端绝不干预）
+      var refresh = useCallback(function () {
+        fetch(STATUS_URL)
+          .then(function (r) { return r.json(); })
+          .then(function (data) { setStatus(data); setError(null); })
+          .catch(function (e) { setError(String(e && e.message || e)); });
+      }, []);
 
-      function ensureMask() {
-        if (mask) return
-        mask = document.createElement('div')
-        mask.setAttribute('data-mr-mask', 'true')
-        mask.addEventListener('click', function () {
-          if (layout) layout.toggleSidebar()
-        })
-        document.body.appendChild(mask)
-      }
-      function removeMask() {
-        if (mask) { mask.remove(); mask = null }
-      }
-      function applyOpen(open) {
-        if (!sidebar) return
-        if (open) {
-          sidebar.setAttribute('data-mr-open', 'true')
-          ensureMask()
-        } else {
-          sidebar.removeAttribute('data-mr-open')
-          removeMask()
-        }
-      }
-      function syncFromFrame() {
-        if (!frame || !enabled) { applyOpen(false); return }
-        var cols = String(frame.style.gridTemplateColumns || '').trim()
-        var m = /^(-?\d+(?:\.\d+)?)/.exec(cols)
-        var first = m ? parseFloat(m[1]) : 0
-        applyOpen(first > 0)
-      }
-      function setup() {
-        var overlay = document.querySelector('[data-shell-overlay]')
-        if (!overlay) return
-        var f = overlay.parentElement
-        if (!f || f === frame) return
-        frame = f
-        sidebar = f.firstElementChild
-        if (styleObserver) styleObserver.disconnect()
-        styleObserver = new MutationObserver(syncFromFrame)
-        styleObserver.observe(frame, { attributes: true, attributeFilter: ['style'] })
-        syncFromFrame()
-      }
-      // 视口变化时切换启用/停用抽屉逻辑
-      function syncEnabled() {
-        var on = isMobileViewport()
-        if (on === enabled) return
-        enabled = on
-        if (!on) applyOpen(false)
-        else syncFromFrame()
-      }
-      function watchViewport() {
-        if (typeof window === 'undefined') return
-        var mq = window.matchMedia('(max-width: 768px)')
-        var mq2 = window.matchMedia('(pointer: coarse)')
-        function update() { syncEnabled() }
-        if (mq.addEventListener) mq.addEventListener('change', update)
-        if (mq2.addEventListener) mq2.addEventListener('change', update)
-        window.addEventListener('resize', update)
-      }
-      var wait = new MutationObserver(function () { setup() })
-      if (document.body) wait.observe(document.body, { childList: true, subtree: true })
-      syncEnabled()
-      watchViewport()
-      setup()
-    }
-
-    // ---------------------------------------------------------------
-    // 浮动控制条（shell.overlay）：只在移动端渲染。
-    //  - ☰ 打开会话列表（侧栏抽屉）
-    //  - ● 远程控制状态指示（绿=局域网已连，黄=已开启本机访问，灰=未开启）
-    //  - 点击状态点弹出信息卡：当前访问方式 / 手机地址 / 复制
-    // ---------------------------------------------------------------
-    var DOCK_STYLE = {
-      position: 'fixed',
-      top: 'calc(10px + env(safe-area-inset-top, 0px))',
-      right: 'calc(10px + env(safe-area-inset-right, 0px))',
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 8,
-      alignItems: 'center',
-      zIndex: 200,
-      pointerEvents: 'none',
-    }
-    var DOCK_BTN = {
-      width: 44,
-      height: 44,
-      borderRadius: 22,
-      border: '1px solid rgba(128,128,128,.3)',
-      background: 'var(--dsw-alias-bg-base, #ffffff)',
-      color: 'var(--dsw-alias-label-primary, #111111)',
-      fontSize: 20,
-      lineHeight: 1,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      cursor: 'pointer',
-      boxShadow: '0 2px 10px rgba(0,0,0,.18)',
-      pointerEvents: 'auto',
-      padding: 0,
-      boxSizing: 'border-box',
-    }
-    var INFO_CARD = {
-      position: 'absolute',
-      top: 104,
-      right: 0,
-      width: 240,
-      background: 'var(--dsw-alias-bg-base, #ffffff)',
-      border: '1px solid rgba(128,128,128,.25)',
-      borderRadius: 12,
-      boxShadow: '0 6px 24px rgba(0,0,0,.2)',
-      padding: '10px 12px',
-      fontSize: 12,
-      color: 'var(--dsw-alias-label-primary, #111111)',
-      pointerEvents: 'auto',
-      boxSizing: 'border-box',
-    }
+      useEffect(function () {
+        refresh();
+        var t = setInterval(refresh, 5000);
+        return function () { clearInterval(t); };
+      }, [refresh]);
 
-    var Dock = function (props) {
-      var layout = props && props.layout ? props.layout : null
-      var [isMobile, setIsMobile] = React.useState(isMobileViewport())
-      var [status, setStatus] = React.useState(null)
-      var [infoOpen, setInfoOpen] = React.useState(false)
-      var [copied, setCopied] = React.useState(false)
+      var toggle = useCallback(function () {
+        if (busy || !status) return;
+        setBusy(true);
+        setError(null);
+        fetch(TOGGLE_URL, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ enabled: !status.remoteEnabled }),
+        })
+          .then(function (r) { return r.json(); })
+          .then(function (data) {
+            if (!data.ok) throw new Error(data.error || 'toggle failed');
+            setBusy(false);
+            setTimeout(refresh, 1500); // 等待 HMR 重载后再刷新
+          })
+          .catch(function (e) {
+            setBusy(false);
+            setError(String(e && e.message || e));
+          });
+      }, [busy, status, refresh]);
 
-      React.useEffect(function () {
-        function update() { setIsMobile(isMobileViewport()) }
-        var mq = window.matchMedia('(max-width: 768px)')
-        var mq2 = window.matchMedia('(pointer: coarse)')
-        if (mq.addEventListener) mq.addEventListener('change', update)
-        if (mq2.addEventListener) mq2.addEventListener('change', update)
-        return function () {
-          if (mq.removeEventListener) mq.removeEventListener('change', update)
-          if (mq2.removeEventListener) mq2.removeEventListener('change', update)
-        }
-      }, [])
+      // 状态徽标
+      var on = !!(status && status.remoteEnabled);
+      var badge = el('span', { style: Object.assign({}, st.badge, on ? st.badgeOn : st.badgeOff) },
+        on ? '已开启' : '未开启');
 
-      React.useEffect(function () {
-        if (!isMobile) return
-        var timer = setInterval(function () {
-          callRemote({ action: 'status' }).then(function (r) { setStatus(r) }).catch(function () { /* ignore */ })
-        }, 15000)
-        callRemote({ action: 'status' }).then(function (r) { setStatus(r) }).catch(function () { /* ignore */ })
-        return function () { clearInterval(timer) }
-      }, [isMobile])
+      // 开关
+      var sw = el('button', {
+        type: 'button',
+        role: 'switch',
+        'aria-checked': String(on),
+        'aria-label': on ? '关闭远程控制' : '开启远程控制',
+        onClick: toggle,
+        disabled: busy || !status,
+        style: Object.assign({}, st.switch, on ? st.switchOn : null),
+      }, el('span', { style: Object.assign({}, st.knob, on ? st.knobOn : null) }));
 
-      if (!isMobile) return null
+      // 二维码
+      var qrEl;
+      if (on && status && status.url) {
+        var qrSrc = '/__dsh_remote/qr?url=' + encodeURIComponent(status.url);
+        qrEl = el('div', { style: st.qrBox },
+          el('img', { src: qrSrc, alt: '连接二维码', style: st.qrImg }));
+      } else if (status) {
+        qrEl = el('div', { style: st.qrFallback },
+          on
+            ? '开启中…请稍候刷新'
+            : '开启远程控制后，这里会显示手机扫码连接二维码');
+      } else {
+        qrEl = el('div', { style: st.qrFallback }, '加载中…');
+      }
 
-      var remote = isRemoteAccess()
-      var enabled = !!(status && status.enabled)
-      var urls = (status && status.urls) || []
-      var dotColor = (enabled && remote) ? '#22c55e' : (enabled ? '#eab308' : '#9ca3af')
-      var statusTitle = (enabled && remote)
-        ? '已通过局域网连接电脑'
-        : (enabled ? '远程控制已开启（当前为本机访问）' : '远程控制未开启（见设置页「远程控制」）')
+      // 设备数
+      var count = status ? status.deviceCount : 0;
 
-      return el('div', { style: DOCK_STYLE },
-        el('button', {
-          style: DOCK_BTN,
-          onClick: function () { if (layout) layout.toggleSidebar() },
-          'aria-label': '打开会话列表',
-          title: '会话列表',
-        }, '\u2630'),
-        el('button', {
-          style: DOCK_BTN,
-          onClick: function () { setInfoOpen(!infoOpen); setCopied(false) },
-          'aria-label': '远程控制状态',
-          title: statusTitle,
-        }, el('span', { style: { width: 14, height: 14, borderRadius: 7, background: dotColor, display: 'block' } })),
-        infoOpen
-          ? el('div', { style: INFO_CARD },
-              el('div', { style: { fontWeight: 600, marginBottom: 6, fontSize: 13 } }, '远程控制'),
-              el('div', { style: { display: 'flex', justifyContent: 'space-between', gap: 8, padding: '2px 0' } },
-                el('span', { style: { opacity: .65 } }, '连接状态'),
-                el('span', {}, (enabled && remote) ? '局域网已连接' : (enabled ? '已开启（本机访问）' : '未开启'))),
-              el('div', { style: { display: 'flex', justifyContent: 'space-between', gap: 8, padding: '2px 0' } },
-                el('span', { style: { opacity: .65 } }, '当前访问'),
-                el('span', {}, remote ? '局域网' : '本机')),
-              urls.length
-                ? el('div', { style: { padding: '6px 0 2px', wordBreak: 'break-all', opacity: .85 } }, urls[0])
-                : el('div', { style: { padding: '6px 0 2px', opacity: .65 } }, '未检测到局域网地址'),
-              el('div', { style: { display: 'flex', gap: 8, marginTop: 8, flexWrap: 'wrap' } },
-                urls.length
-                  ? el('button', {
-                      style: { border: '1px solid rgba(128,128,128,.4)', background: 'transparent', borderRadius: 6, padding: '4px 10px', fontSize: 12, cursor: 'pointer', color: 'inherit' },
-                      onClick: function () { copyText(urls[0], function (ok) { setCopied(ok) }) },
-                    }, copied ? '已复制' : '复制地址')
-                  : null,
-              ),
-            )
-          : null,
-      )
-    }
-
-    // ---------------------------------------------------------------
-    // 设置页（settings.section）：远程控制状态 / 访问地址 / 二维码 / 使用说明
-    // ---------------------------------------------------------------
-    var BASE_FS = 13
-    function fs(n) { return (Math.round(n / BASE_FS * 100) / 100).toFixed(2) + 'em' }
+      // 命令提示（未开启时展示 CLI 启动方式）
+      var cliHint = null;
+      if (status && !status.remoteEnabled) {
+        cliHint = el('div', { style: st.card },
+          el('p', { style: st.title }, '命令行启动方式'),
+          el('p', { style: st.sub },
+            '开启开关后，本插件会把 webserver.host 写入当前 profile 的 cordis.patch.yml，' +
+            '由 dsh 的 HMR 热重载生效。如果你希望手动启动（无需桌面端），可预先创建 overlay：'),
+          el('pre', { style: st.code },
+            '# remote-control.patch.yml\n' +
+            '- id: webserver\n' +
+            '  config:\n' +
+            "    host: '0.0.0.0'\n"),
+          el('p', { style: st.hint },
+            '然后以 dsh --profile web --patch remote-control.patch.yml 启动。'),
+        );
+      }
 
-    var RemoteSection = function () {
-      var [status, setStatus] = React.useState(null)
-      var [copied, setCopied] = React.useState('')
-      var [pinging, setPinging] = React.useState(false)
-      var [pingResult, setPingResult] = React.useState('')
+      return el('div', { style: st.root },
+        // 状态行
+        el('div', { style: st.row },
+          el('div', { style: { display: 'flex', flexDirection: 'column', gap: 4 } },
+            el('p', { style: st.title }, '远程控制'),
+            el('p', { style: st.sub }, '允许手机通过局域网访问并操控本电脑上的 DeepSeek Harness')),
+          el('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
+            badge, sw)),
 
-      function refresh() {
-        callRemote({ action: 'status' }).then(setStatus).catch(function (e) { setStatus({ error: String(e) }) })
-      }
-      React.useEffect(function () { refresh() }, [])
+        // 二维码卡片
+        el('div', { style: st.card },
+          el('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
+            el('p', { style: st.title }, '手机连接'),
+            el('p', { style: st.sub }, '手机与电脑连接同一 Wi-Fi，用相机或浏览器扫码访问')),
+          qrEl,
+          status && status.url
+            ? el('a', { href: status.url, style: st.link, target: '_blank', rel: 'noreferrer' }, status.url)
+            : el('p', { style: st.hint }, fmtUrl(status && status.url))),
 
-      function doPing() {
-        setPinging(true)
-        setPingResult('')
-        callRemote({ action: 'ping' }).then(function (r) {
-          if (r && r.ok) {
-            var t = r.serverTimeIso ? new Date(r.serverTimeIso).toLocaleTimeString() : String(r.serverTime)
-            setPingResult('✓ 连接正常（服务器时间 ' + t + '）')
-          } else {
-            setPingResult('✗ ' + ((r && r.error) || '无响应'))
-          }
-        }).catch(function (e) { setPingResult('✗ ' + String(e)) }).finally(function () { setPinging(false) })
-      }
+        // 统计
+        el('div', { style: st.grid },
+          el('div', { style: st.stat },
+            el('span', { style: st.statValue }, String(count)),
+            el('span', { style: st.statLabel }, '当前连接设备')),
+          el('div', { style: st.stat },
+            el('span', { style: st.statValue }, on ? String(status ? status.lanAddresses.length : 0) : '—'),
+            el('span', { style: st.statLabel }, '局域网地址'))),
 
-      var err = status && status.error
-      var enabled = !!(status && status.enabled)
-      var host = status && status.host
-      var port = status && status.port
-      var lanAddresses = (status && status.lanAddresses) || []
-      var urls = (status && status.urls) || []
-      var sessionCount = status && typeof status.sessionCount === 'number' ? status.sessionCount : null
-      var qrUrl = urls.length
-        ? ('https://api.qrserver.com/v1/create-qr-code/?size=220x220&margin=8&data=' + encodeURIComponent(urls[0]))
-        : ''
+        status && status.lanAddresses.length
+          ? el('div', { style: st.card },
+              el('p', { style: st.title }, '手机访问地址'),
+              el('pre', { style: st.code },
+                status.lanAddresses.map(function (ip) { return 'http://' + ip + ':' + status.port; }).join('\n')))
+          : null,
 
-      var st = {
-        root: { display: 'flex', flexDirection: 'column', gap: 10, padding: '4px 0', width: '100%', minWidth: 0, boxSizing: 'border-box' },
-        title: { fontWeight: 600, fontSize: fs(15) },
-        sub: { fontSize: fs(11), opacity: .55 },
-        card: { border: '1px solid rgba(128,128,128,.25)', borderRadius: 10, padding: '12px 14px', minWidth: 0 },
-        row: { display: 'flex', justifyContent: 'space-between', gap: 10, padding: '2px 0', fontSize: fs(12), flexWrap: 'wrap' },
-        rowKey: { opacity: .65 },
-        statusLine: { padding: '9px 11px', borderRadius: 8, fontSize: fs(12), fontWeight: 600 },
-        urlRow: { display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', flexWrap: 'wrap' },
-        urlText: { fontSize: fs(12), wordBreak: 'break-all', flex: '1 1 180px', minWidth: 0 },
-        btn: { border: '1px solid rgba(128,128,128,.4)', background: 'transparent', borderRadius: 6, padding: '5px 12px', fontSize: fs(12), cursor: 'pointer', color: 'inherit', whiteSpace: 'nowrap' },
-        btnPrimary: { border: '1px solid rgba(90,140,255,.6)', background: 'rgba(90,140,255,.22)', borderRadius: 6, padding: '5px 12px', fontSize: fs(12), cursor: 'pointer', color: 'inherit', fontWeight: 600 },
-        section: { fontWeight: 600, fontSize: fs(13), marginTop: 4 },
-        qr: { display: 'flex', justifyContent: 'center', margin: '8px 0' },
-        qrImg: { width: 220, height: 220, borderRadius: 8, border: '1px solid rgba(128,128,128,.2)' },
-        qrFallback: { fontSize: fs(11), opacity: .6, textAlign: 'center', padding: '12px 0' },
-        msg: { fontSize: fs(11), opacity: .8, wordBreak: 'break-all' },
-        note: { fontSize: fs(11), opacity: .55, lineHeight: 1.6 },
-      }
+        status && status.patchFile
+          ? el('div', { style: st.card },
+              el('p', { style: st.title }, '配置位置'),
+              el('pre', { style: st.code }, status.patchFile))
+          : null,
 
-      return el('div', { style: st.root },
-        el('div', { style: st.title }, '手机端远程控制'),
-        el('div', { style: st.sub }, '手机与电脑连接同一 Wi-Fi 时，用手机浏览器打开下方地址，即可实时同步对话记录、会话列表与设置，并直接发送消息远程操控电脑端 DeepSeek Harness。'),
+        cliHint,
 
-        err
-          ? el('div', { style: st.msg }, '状态获取失败：' + err)
-          : el(React.Fragment, null,
-              // 状态卡片
-              el('div', { style: st.card },
-                el('div', { style: st.statusLine, background: enabled ? 'rgba(34,197,94,.16)' : 'rgba(156,163,175,.14)', color: enabled ? '#16a34a' : 'inherit', borderRadius: 8 },
-                  enabled ? '✓ 远程控制已开启：服务正在监听局域网' : '○ 远程控制未开启：当前仅本机可访问'),
-                el('div', { style: { height: 8 } }),
-                el('div', { style: st.row }, el('span', { style: st.rowKey }, '监听地址'), el('span', {}, host + ':' + port)),
-                el('div', { style: st.row }, el('span', { style: st.rowKey }, '会话数'), el('span', {}, sessionCount === null ? '…' : String(sessionCount))),
-                el('div', { style: st.row }, el('span', { style: st.rowKey }, '本机访问'), el('span', {}, 'http://127.0.0.1:' + port)),
-              ),
-              // 手机访问地址
-              el('div', { style: st.section }, '手机访问地址'),
-              el('div', { style: st.card },
-                lanAddresses.length === 0
-                  ? el('div', { style: st.msg }, '未检测到局域网 IPv4 地址。请检查电脑是否连接 Wi-Fi / 有线网络，或在 dsh-desktop 中重新开启「移动端远程控制」。')
-                  : urls.map(function (u) {
-                      return el('div', { key: u, style: st.urlRow },
-                        el('span', { style: st.urlText }, u),
-                        el('button', { style: st.btn, onClick: function () { copyText(u, function (ok) { setCopied(ok ? u : '') }) } }, copied === u ? '✓ 已复制' : '复制'),
-                      )
-                    }),
-                el('div', { style: { height: 4 } }),
-                el('div', { style: st.note }, '打开 dsh-desktop 设置页的「移动端远程控制」开关后，重启服务即生效（服务监听 0.0.0.0，手机可访问）。'),
-              ),
-              // 二维码
-              urls.length
-                ? el(React.Fragment, null,
-                    el('div', { style: st.section }, '扫码访问'),
-                    el('div', { style: st.card },
-                      el('div', { style: st.qr },
-                        el('img', {
-                          src: qrUrl,
-                          alt: '手机访问二维码',
-                          style: st.qrImg,
-                          onError: function (e) {
-                            // 外部二维码服务不可用时降级为文本
-                            e.currentTarget.style.display = 'none'
-                          },
-                        }),
-                      ),
-                      el('div', { style: st.qrFallback }, '用手机相机 / 浏览器扫码打开。'),
-                    ),
-                  )
-                : null,
-              // 连接测试
-              el('div', { style: st.section }, '连接测试'),
-              el('div', { style: st.card },
-                el('div', { style: { display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' } },
-                  el('button', { style: st.btnPrimary, disabled: pinging, onClick: doPing }, pinging ? '测试中…' : '发送测试请求'),
-                  el('span', { style: st.msg }, '用于确认本页面与电脑端 Harness 服务的通信链路'),
-                ),
-                pingResult ? el('div', { style: { fontSize: fs(11), opacity: 1, wordBreak: 'break-all', marginTop: 8 } }, pingResult) : null,
-              ),
-              // 使用说明
-              el('div', { style: st.section }, '使用说明'),
-              el('div', { style: st.card },
-                el('div', { style: st.note }, [
-                  '1. 电脑与手机连接到同一个 Wi-Fi；',
-                  '2. 在 dsh-desktop 设置中开启「移动端远程控制」，重启服务；',
-                  '3. 用手机浏览器打开上方任一地址（或扫码）；',
-                  '4. 手机端与电脑端共用同一份会话数据，对话、列表、设置实时双向同步，任何一端的操作都会即时反映到另一端；',
-                  '5. 手机端已针对触控优化：侧栏自动变为抽屉，右上角浮动按钮可随时打开会话列表并查看连接状态。',
-                ].join('\n')),
-              ),
-            ),
-      )
+        error
+          ? el('div', { style: Object.assign({}, st.card, { borderColor: 'rgba(200,40,40,.35)' }) },
+              el('p', { style: Object.assign({}, st.hint, { color: '#c0272b' }) }, '操作失败：' + error))
+          : null);
     }
 
-    // ---------------------------------------------------------------
-    // 插件入口
-    // ---------------------------------------------------------------
-    var inject = ['slots', 'layout']
+    /* ------------------------------------------------------------------ */
+    /* 注册到设置页                                                        */
+    /* ------------------------------------------------------------------ */
 
-    function apply(ctx) {
-      var slots = ctx.get('slots')
-      if (slots === undefined) return
-      var layout = ctx.get('layout')
-
-      // 移动端适配：抽屉化（内部仅在移动视口下生效，桌面端绝不干预）
-      startDrawer(layout)
+    var inject = ['slots'];
 
-      // 浮动控制条（shell.overlay）
-      slots.inject('shell.overlay', function () {
-        return slots.register(
-          { name: 'shell.overlay', id: 'mobile-remote-dock', order: 80 },
-          function () { return el(Dock, { layout: layout }) },
-        )
-      })
+    function apply(ctx) {
+      var slots = ctx.get('slots');
+      if (slots === undefined) return;
 
-      // 远程控制设置页（settings.section）
       slots.inject('settings.section', function () {
         return slots.register(
-          { name: 'settings.section', id: 'mobile-remote', order: 90, label: function () { return '远程控制' } },
-          function () { return el(RemoteSection, null) },
-        )
-      })
+          {
+            name: 'settings.section',
+            id: 'remote-control',
+            order: 40,
+            label: '远程控制',
+          },
+          function () { return el(RemoteControlPanel, null); }
+        );
+      });
     }
 
-    exports.apply = apply
-    exports.inject = inject
-    return module.exports
+    exports.inject = inject;
+    exports.apply = apply;
+    return module.exports;
   },
-})
+});