dsh-mobile-plugin 0.5.15 → 0.5.16

package/lib/client.js

@@ -2,9 +2,9 @@
  * dsh-mobile-plugin 的**客户端半边**（在 DSH 桌面 Web 页面里运行）。
  *
  * 五件事：桌面侧边栏的展开态与「读过了」报给宿主；手机端的已读回执应用回桌面绿点；
- * 提供「设置 → 移动端」那颗由本机打开的网页管理开关；在侧边栏最底下那一行挂一颗
- * 手机图标（点一下就是设置里那颗「打开配置页面」）。方向是单向的（桌面 → 宿主 → 手机），
- * 手机上的折叠只存在 App 本地，不写回。
+ * 设置里那一项「移动端」（一张薄卡，一颗「打开配置页面」）；在侧边栏最底下那一行挂一颗
+ * 手机图标（点一下等于那张卡上的按钮）。方向是单向的（桌面 → 宿主 → 手机），手机上的
+ * 折叠只存在 App 本地，不写回。
  *
  * 本文件不经任何构建（package.json 直接收录 lib 下的 .js），所以不能写 JSX，统一用
  * `React.createElement` 的别名 `h`；客户端插件按约定写成惰性工厂，定时器与页签在物化时才起。
@@ -27,8 +27,8 @@ window.__ModuleLoader__.load({
      * 照抄 @deepseek-ai/dsh-client-ui-settings-plugins 的注入方式：同一
      * data-plugin-css 只注入一次，bundle 被重复物化也不会堆出第二份 <style>。
      *
-     * 这一半只剩侧边栏那一颗图标与它打开的诊断弹窗（设置菜单里那一项已经按用户要求去掉）：
-     * 界面本体在网页版里，那边自带一套样式。
+     * 这一半有三样东西：设置里那一张薄卡、侧边栏那一颗图标（点它等于点那张卡上的按钮），
+     * 以及打不开时那张诊断弹窗。界面本体在网页版里，那边自带一套样式。
      */
     const STYLE_ID = 'dsh-mobile-plugin/footer-icon.css';
     const CSS = `
@@ -51,6 +51,13 @@ window.__ModuleLoader__.load({
 .dshm_factMono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
 .dshm_steps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:18px}
 .dshm_dialogActions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:2px}
+.dshm_root{display:flex;flex-direction:column;gap:14px;width:100%;max-width:760px;color:var(--dsw-alias-label-primary)}
+.dshm_card{border:.5px solid var(--dsw-alias-settings-card-stroke);border-radius:var(--dsw-radius-xl);background:var(--dsw-alias-settings-card-fill);display:flex;flex-direction:column;gap:10px;padding:14px 16px}
+.dshm_heading{font-size:18px;font-weight:600;margin:0}
+.dshm_cardTitle{font-size:14px;font-weight:600;line-height:20px;margin:0}
+.dshm_actions{display:flex;flex-wrap:wrap;gap:8px}
+.dshm_note{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
+.dshm_error{margin:0;border-radius:var(--dsw-radius-md);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px;padding:8px 10px}
 .dshm_btn{border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit;font-size:13px;line-height:18px;padding:5px 12px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
 .dshm_btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
 .dshm_btn:disabled{cursor:default;opacity:.45}
@@ -218,6 +225,22 @@ window.__ModuleLoader__.load({
       body: JSON.stringify(payload || {}),
     });
 
+    /**
+     * 打开那两小时网页管理窗口。
+     *
+     * 只有「浏览器不是从这台机器上打开的」才需要它：控制面不认它，面板会回 423。设置卡与
+     * 侧边栏图标都走这一份实现 —— 各写一遍迟早会在「窗口开着没有」上判得不一样，而这两种
+     * 判法对应的是「多开一次」与「跳过去吃一个 423」。
+     *
+     * 返回值是宿主回的新窗口状态，交给调用方存进自己的 state。
+     */
+    async function requestAccessWindow() {
+      const next = await postJson('/web-access', { enabled: true });
+      return next && next.webAccess && typeof next.webAccess.enabled === 'boolean'
+        ? next.webAccess
+        : { enabled: true, expiresAt: 0 };
+    }
+
     /* ── 三：侧边栏未读绿点的双向同步 ───────────────────────────────────────
      * 两端的绿点是两份互不相干的状态：
      *   - 手机端 = 宿主按设备维度维护的完成提醒（lib/mobile/completion.js），
@@ -482,6 +505,15 @@ window.__ModuleLoader__.load({
     const NS = 'settings.mobileRelay';
     const DICT = {
       zh: {
+        nav: '移动端',
+        heading: '移动端',
+        cardPanel: '配置页面',
+        openPanel: '打开配置页面',
+        openHint: '配对、网络配置与插件更新都在这个页面里。',
+        panelPending: '正在读取页面地址…',
+        panelMissing: '宿主还没给出页面地址，稍后再打开这一页试试。',
+        loadFailed: '读取宿主状态失败',
+        openFailed: '打开配置页面失败',
         footerOpen: '打开移动端插件配置网页',
         footerPending: '网页地址还没就绪',
         footerPublicConfirm: '这个地址位于公网。继续后会开放移动端插件的网页管理权限 2 小时；期间任何能访问该地址的人都可以操作面板。是否继续？',
@@ -531,6 +563,15 @@ window.__ModuleLoader__.load({
         diagFactWindow: '两小时窗口',
       },
       en: {
+        nav: 'Mobile',
+        heading: 'Mobile',
+        cardPanel: 'Configuration page',
+        openPanel: 'Open the configuration page',
+        openHint: 'Pairing, network settings and plugin updates all live on this page.',
+        panelPending: 'Reading the page address…',
+        panelMissing: 'The host has not reported a page address yet — reopen this item in a moment.',
+        loadFailed: 'Failed to read host status',
+        openFailed: 'Could not open the configuration page',
         footerOpen: 'Open the mobile plugin configuration page',
         footerPending: 'The page address is not ready yet',
         footerPublicConfirm: 'This address is public. Continuing opens mobile plugin web management for 2 hours; anyone who can reach this address can operate the panel during that time. Continue?',
@@ -724,6 +765,119 @@ window.__ModuleLoader__.load({
       return protocol === 'http:' || protocol === 'https:';
     }
 
+    /** 把一份 `/status` 返回收成拨号要用的三样；缺的当没有。 */
+    function readStatusView(view) {
+      const value = view && typeof view === 'object' ? view : {};
+      return {
+        panelUrl: typeof value.panelUrl === 'string' ? value.panelUrl : '',
+        panelScope: typeof value.panelScope === 'string' ? value.panelScope : '',
+        webAccess: value.webAccess && typeof value.webAccess.enabled === 'boolean' ? value.webAccess : null,
+      };
+    }
+
+    /**
+     * 配置页在**这个页面自己**的同源地址上。
+     *
+     * 宿主的 `panelUrl` 是按请求的 Host 头拼的，反代把 DSH 挂在子路径（`/dsh/`）下时那条会
+     * 丢掉前缀、Host 被改写时还会指到内网去；而页面自己的 `<base href="./">` 一定是带前缀、
+     * 也一定是用户浏览器真能到的那一层。所以拿不到宿主地址时按这个推，推不出来就算了。
+     */
+    function sameOriginPanelUrl() {
+      try {
+        const base = typeof document !== 'undefined' && document.baseURI
+          ? document.baseURI
+          : (typeof location !== 'undefined' ? location.href : '');
+        if (!base) return '';
+        return new URL('api/relay/panel', base).href;
+      } catch {
+        return '';
+      }
+    }
+
+    /**
+     * 一次「打开配置页面」的完整拨号：取地址、必要时开两小时窗口、把地址交出去。
+     *
+     * 为什么不能只读一次 `/status`：那条接口自己也在窗口门后面（`WEB_ACCESS_ROUTES`），
+     * 窗口关着时**不是本机**的浏览器只拿得到 423。而客户端原先规定「没地址就不去开窗口」，
+     * 两边互相锁死 —— 远程用户点了只会看到「网页地址还没就绪」，没有任何顺序能走通
+     * （2026-11-03 用户报的就是这个）。所以读不到地址时正确的动作不是放弃，而是**先开窗**：
+     * 那条开关接口本来就对同源页面豁免，开完再读一次，地址与类别就都有了。
+     *
+     * 地址优先用宿主给的 `panelUrl`，拿不到再用页面自己的同源地址（见 `sameOriginPanelUrl`）。
+     *
+     * 新窗口必须由调用方在**点击那一帧**开出来（`window.open('')`），这里只负责导航它；
+     * 等接口回来再开会被弹窗拦截器吃掉。`confirmed` = 调用方已经问过公网那句确认（问过的
+     * 不再问第二遍；地址是自救拿到的，类别此前不知道，所以在这里补问）。
+     *
+     * @returns {Promise<{ok: true, cancelled?: boolean, url: string, webAccess: object|null}
+     *   | {ok: false, missing: boolean, status: number, message: string}>}
+     */
+    async function openConfigurationPage({ view, loadStatus = 0, t, target = null, confirmed = false }) {
+      let state = readStatusView(view);
+      const failed = (error) => ({
+        ok: false,
+        missing: false,
+        status: Number(error && error.status) || 0,
+        message: String((error && error.message) || error),
+      });
+
+      if (!state.panelUrl) {
+        // 404 = 宿主那一半没装载，开窗也救不了：交给调用方按「装完没重启」报。
+        if (loadStatus === 404) return { ok: false, missing: true, status: 404, message: '' };
+        // 先补读一次：可能只是页面上那一次读取还没回来，或者刚才网络抖了一下。
+        try {
+          state = readStatusView(await call('/status'));
+        } catch (error) {
+          if ((Number(error && error.status) || 0) === 404) {
+            return { ok: false, missing: true, status: 404, message: '' };
+          }
+          // 读不到多半是被窗口门挡住（423）：先开窗再读一次。这是远程用户唯一能走通的顺序，
+          // 也正因为原先把这一步排在了「拿到地址之后」，两个条件互等，谁都过不去。
+          try {
+            const opened = await requestAccessWindow();
+            state = { ...readStatusView(await call('/status')), webAccess: opened };
+          } catch (inner) {
+            return failed(inner);
+          }
+        }
+        if (!state.panelUrl) {
+          return { ok: false, missing: false, status: 0, message: t('panelMissing') };
+        }
+      }
+
+      const url = state.panelUrl || sameOriginPanelUrl();
+      if (!url) return { ok: false, missing: false, status: 0, message: t('panelMissing') };
+
+      if (state.panelScope === 'public'
+        && !confirmed
+        && typeof window !== 'undefined'
+        && typeof window.confirm === 'function'
+        && !window.confirm(t('footerPublicConfirm'))) {
+        return { ok: true, cancelled: true, url, webAccess: state.webAccess };
+      }
+
+      if (state.panelScope !== 'loopback' && !(state.webAccess && state.webAccess.enabled)) {
+        try {
+          state.webAccess = await requestAccessWindow();
+        } catch (error) {
+          return failed(error);
+        }
+      }
+
+      if (target) {
+        target.location.href = url;
+        return { ok: true, url, webAccess: state.webAccess };
+      }
+      if (!isWebPage(window)) {
+        // 交回给页面导航：壳会把外部 http(s) 地址转给系统浏览器。
+        window.location.href = url;
+        return { ok: true, url, webAccess: state.webAccess };
+      }
+      const opened = typeof window.open === 'function' ? window.open(url, '_blank', 'noreferrer') : null;
+      if (!opened) return { ok: false, missing: false, status: 0, message: t('diagPopupBlocked') };
+      return { ok: true, url, webAccess: state.webAccess };
+    }
+
     /* ── 侧边栏底部那颗手机图标 ────────────────────────────────────────────
      * 用户要的是「点一下等于设置页那颗『打开配置页面』」，并且就在侧边栏最底下、头像
      * 那一行里。外壳那一行没有给插件留座位：那一行里从左到右是设置项自己渲染的一整颗
@@ -808,8 +962,9 @@ window.__ModuleLoader__.load({
     /**
      * 把「打开哪一页 / 现在能不能点」同步到元素上。
      *
-     * 没有地址时**不写 href**：锚点没有 href 就点不动，比挂一个死链诚实；`aria-disabled`
-     * 只负责把这一点说出来。
+     * 没有地址时**不写 href**（没有地址可写，别挂死链），但**点击处理照样挂上**：那颗图标的
+     * 点击会自己去把两小时窗口开出来、再读一次地址（见 `openConfigurationPage`）。原先这里
+     * 把 `onclick` 一起摘掉，现场就是「点了完全没反应」——2026-11-03 用户报的正是这个。
      *
      * 地址、网络类别和窗口状态都由 effect 往上同步，组件重渲染不会把它丢掉。
      */
@@ -817,12 +972,12 @@ window.__ModuleLoader__.load({
       const label = url ? openLabel : pendingLabel;
       node.setAttribute('aria-label', label);
       node.setAttribute('title', label);
-      node.setAttribute('aria-disabled', url ? 'false' : 'true');
+      node.setAttribute('aria-disabled', 'false');
       // 有地址时仍然写 `href`：普通链接照旧能中键 / 新标签打开。只有「浏览器不是从本机来的」
       // 那两种情况要拦下来先开窗口，见 `openPanel`。
       if (url) node.setAttribute('href', url);
       else node.removeAttribute('href');
-      node.onclick = url ? onClick : null;
+      node.onclick = onClick;
     }
 
     /** 把按钮放回设置那一行、紧跟头像出口。返回是否真在那一行里。 */
@@ -929,66 +1084,46 @@ window.__ModuleLoader__.load({
       /**
        * 点下去要做什么，取决于面板地址落在哪一类网络上（宿主在 `/status` 上算的 `panelScope`）。
        *
-       * 新窗口必须在**点击这一帧**就开出来（`window.open('', '_blank')`）：等接口回来再开会被
-       * 浏览器的弹窗拦截器吃掉。地址确认到之后才把那个空窗口导航过去，失败就关掉它并弹诊断。
+       * 有地址且就在本机：普通链接，交给浏览器自己开。
+       * 其余情况（从别的机器打开的页面、或者压根还没读到地址）都要先把两小时窗口开出来：
+       * 新窗口必须在**点击这一帧**开出来（`window.open('', '_blank')`），等接口回来再开会被
+       * 浏览器的弹窗拦截器吃掉；地址确认到之后才把那个空窗口导航过去，失败就关掉它并弹诊断。
        * 只有**网页**（`http(s)`）才需要这一手：桌面壳里那个函数一定被拒，见 `isWebPage`。
        */
       function openPanel(event) {
-        if (!url) {
-          // 连地址都没问到：点了必须有反应 —— 弹诊断窗，而不是一颗点不动的灰图标。
-          void openDiagnosis('load', problem);
-          return;
-        }
-        const needsWindow = panelScope !== 'loopback' && !(webAccess && webAccess.enabled);
+        const knowsUrl = typeof url === 'string' && url !== '';
+        const needsWindow = !knowsUrl || (panelScope !== 'loopback' && !(webAccess && webAccess.enabled));
         if (!needsWindow) return; // 普通链接，交给浏览器自己开
         if (event && typeof event.preventDefault === 'function') event.preventDefault();
-        if (panelScope === 'public'
+        // 公网地址先问一句；地址都还没读到时问不了，交由 `openConfigurationPage` 拿到类别后补问。
+        if (knowsUrl
+          && panelScope === 'public'
           && typeof window !== 'undefined'
           && typeof window.confirm === 'function'
           && !window.confirm(publicConfirm)) return;
         const target = isWebPage(window) && typeof window.open === 'function'
           ? window.open('', '_blank')
           : null;
-        void openWithWindow(target);
-      }
-
-      /**
-       * 先把窗口开起来、再跳过去；失败就把那个空白页关掉并弹诊断窗。
-       *
-       * 还有一种「点了没反应」：浏览器把新窗口拦了（`window.open` 返回 null）。那时接口
-       * 已经成功、地址也在手上，只是没地方给它 —— 直接告诉用户该允许弹窗，别让他以为坏了。
-       *
-       * 壳里的页面（`dsh-app://`）不适用这一套：那里本来就没有「新窗口」这回事，`null` 是
-       * 正常答复、地址已经由壳交给系统浏览器了。当成被拦只会平白盖一屏诊断。
-       */
-      async function openWithWindow(target) {
-        try {
-          const next = await postJson('/web-access', { enabled: true });
-          setWebAccess(next && next.webAccess && typeof next.webAccess.enabled === 'boolean'
-            ? next.webAccess
-            : { enabled: true, expiresAt: 0 });
-          if (target) {
-            target.location.href = url;
+        void (async () => {
+          const outcome = await openConfigurationPage({
+            view: { panelUrl: url || '', panelScope, webAccess },
+            loadStatus: problem ? problem.status : 0,
+            t,
+            target,
+            confirmed: knowsUrl,
+          });
+          if (outcome.ok) {
+            if (outcome.cancelled && target && typeof target.close === 'function') target.close();
+            if (outcome.webAccess) setWebAccess(outcome.webAccess);
             return;
           }
-          if (!isWebPage(window)) {
-            // 交回给页面导航：壳会把外部 http(s) 地址转给系统浏览器。
-            window.location.href = url;
+          if (target && typeof target.close === 'function') target.close();
+          if (outcome.missing) {
+            void openDiagnosis('load', { status: outcome.status || 404, message: (problem && problem.message) || '' });
             return;
           }
-          const retry = typeof window !== 'undefined' && typeof window.open === 'function'
-            ? window.open(url, '_blank', 'noreferrer')
-            : null;
-          if (!retry) {
-            void openDiagnosis('open', { status: 0, message: t('diagPopupBlocked') });
-          }
-        } catch (error) {
-          if (target && typeof target.close === 'function') target.close();
-          void openDiagnosis('open', {
-            status: Number(error && error.status) || 0,
-            message: String((error && error.message) || error),
-          });
-        }
+          void openDiagnosis('open', { status: outcome.status || 0, message: outcome.message });
+        })();
       }
 
       /**
@@ -1279,7 +1414,7 @@ window.__ModuleLoader__.load({
           rel: 'noreferrer',
           'aria-label': label,
           title: label,
-          'aria-disabled': url ? 'false' : 'true',
+          'aria-disabled': 'false',
           onClick: openPanel,
         }, h('svg', {
           viewBox: '0 0 24 24',
@@ -1346,8 +1481,104 @@ window.__ModuleLoader__.load({
       }, 'mobile-plugin: 客户端半边自检上报');
     }
 
+    /* ── 设置里的那一项「移动端」───────────────────────────────────────────
+     * 用户 2026-11-03 要求加回来：介绍产品时说的入口就是「设置 → 移动端」，2026-11-02 那一版
+     * 把它整块下线、只留侧边栏那颗图标，于是从网页版进来的人不知道配置在哪。现在两项都在，
+     * 它们进的是同一个页面、走同一条拨号链路（图标是快捷方式，这一张是设置里的正规入口）。
+     *
+     * 刻意只有一张薄卡：界面本体全在网页版里（A3-37），在这里再画一套等于长期维护第二套 UI，
+     * 而两套迟早会打架。卡片只做两件事——说清配置在哪、把那一页开出来；开不出来就在卡上写原因。
+     */
+    function MobileSettingsSection({ t }) {
+      /** null = 还在问宿主；'' = 问到了但宿主没给地址（老版本或还没起来）。 */
+      const [url, setUrl] = useState(null);
+      const [scope, setScope] = useState('');
+      const [access, setAccess] = useState(null);
+      /** `null` = 这一次没出错；否则 `{ kind: 'load' | 'open', message }`。 */
+      const [failure, setFailure] = useState(null);
+
+      useEffect(() => {
+        let alive = true;
+        void (async () => {
+          try {
+            const next = await call('/status');
+            if (!alive) return;
+            const view = next && typeof next === 'object' ? next : {};
+            setUrl(typeof view.panelUrl === 'string' ? view.panelUrl : '');
+            setScope(typeof view.panelScope === 'string' ? view.panelScope : '');
+            setAccess(view.webAccess && typeof view.webAccess.enabled === 'boolean' ? view.webAccess : null);
+            setFailure(null);
+          } catch (error) {
+            if (!alive) return;
+            setUrl('');
+            setFailure({ kind: 'load', status: Number(error && error.status) || 0, message: String((error && error.message) || error) });
+          }
+        })();
+        return () => { alive = false; };
+      }, []);
+
+      /**
+       * 拨到面板。判据与侧边栏那颗图标完全一致（A3-25）：本机直接跳；从别的机器打开的浏览器
+       * 控制面不认它，先把两小时窗口开出来再跳；公网地址多弹一句确认。地址还没读到时也照样
+       * 走这条路——它会自己开窗再读一次（见 `openConfigurationPage`），不是干等。
+       *
+       * 新窗口必须在**点击这一帧**开出来，等到接口回来再开会被弹窗拦截器吃掉。
+       */
+      function openPanel(event) {
+        const knowsUrl = typeof url === 'string' && url !== '';
+        const needsWindow = !knowsUrl || (scope !== 'loopback' && !(access && access.enabled));
+        if (!needsWindow) return; // 普通链接，交给浏览器自己开
+        if (event && typeof event.preventDefault === 'function') event.preventDefault();
+        if (knowsUrl
+          && scope === 'public'
+          && typeof window !== 'undefined'
+          && typeof window.confirm === 'function'
+          && !window.confirm(t('footerPublicConfirm'))) return;
+        const target = isWebPage(window) && typeof window.open === 'function'
+          ? window.open('', '_blank')
+          : null;
+        void (async () => {
+          const outcome = await openConfigurationPage({
+            view: { panelUrl: url || '', panelScope: scope, webAccess: access },
+            loadStatus: failure && failure.kind === 'load' ? failure.status || 0 : 0,
+            t,
+            target,
+            confirmed: knowsUrl,
+          });
+          if (outcome.ok) {
+            if (outcome.cancelled && target && typeof target.close === 'function') target.close();
+            if (outcome.webAccess) setAccess(outcome.webAccess);
+            if (!outcome.cancelled) setFailure(null);
+            return;
+          }
+          if (target && typeof target.close === 'function') target.close();
+          setFailure({ kind: outcome.missing ? 'load' : 'open', status: outcome.status || 0, message: outcome.message });
+        })();
+      }
+
+      const hint = url === null ? t('panelPending') : url === '' ? t('panelMissing') : t('openHint');
+      return h('div', { className: 'dshm_root' },
+        h('h2', { className: 'dshm_heading' }, t('heading')),
+        h('div', { className: 'dshm_card' },
+          h('h3', { className: 'dshm_cardTitle' }, t('cardPanel')),
+          h('p', { className: 'dshm_note' }, hint),
+          h('div', { className: 'dshm_actions' },
+            h('a', {
+              className: 'dshm_btn dshm_btnPrimary',
+              href: url || undefined,
+              target: '_blank',
+              rel: 'noreferrer',
+              'aria-disabled': 'false',
+              onClick: openPanel,
+            }, t('openPanel'))),
+          failure
+            ? h('p', { className: 'dshm_error' },
+              `${failure.kind === 'load' ? t('loadFailed') : t('openFailed')}：${failure.message}`)
+            : null));
+    }
+
     return {
-      // slots：注册侧边栏那颗图标，由 @deepseek-ai/dsh-client-runtime 提供（它 require
+      // slots：注册设置项与侧边栏那颗图标，由 @deepseek-ai/dsh-client-runtime 提供（它 require
       // dsh-client-ui-slots 的 SlotCore 再以 `super(ctx, "slots")` 暴露服务）。
       // locale：字典，由 @deepseek-ai/dsh-client-locale 提供。
       // 这两个服务名对应 package.json 里 dsh.client.inject 注入的两个包。
@@ -1360,10 +1591,19 @@ window.__ModuleLoader__.load({
         startDesktopReadSync(ctx);
         startReadReceiptSync(ctx);
         startClientHalfReport(ctx);
-        // 侧边栏底部那颗手机图标：**它是进网页的唯一入口**（2026-11-02 用户要求把设置菜单
-        // 里那一项去掉）。走外壳给插件留的动作位注册（`name` 与 `inject()` 的路径必须是同一个
-        // 槽名，改一处不报错、只是静默挂不上）；展开态再自己插进设置那一行，细节见
-        // `MobileWebEntry` 上面那段注释。
+        // 设置里那一项：外壳声明 `settings.section`（设置菜单里的顶层一项），先声明后注册 ——
+        // 外壳可能比我们晚一步声明它。跟内置插件页的页签是两回事：这一项是自己的设置页。
+        ctx.slots.inject('settings.section', () => ctx.slots.register({
+          name: 'settings.section',
+          id: 'mobile',
+          order: 20,
+          label: () => t('nav'),
+          locale: NS,
+          inject: () => ({ t }),
+        }, MobileSettingsSection));
+        // 侧边栏底部那颗手机图标：它是设置那一项的快捷方式，进的是同一个页面。走外壳给插件
+        // 留的动作位注册（`name` 与 `inject()` 的路径必须是同一个槽名，改一处不报错、只是
+        // 静默挂不上）；展开态再自己插进设置那一行，细节见 `MobileWebEntry` 上面那段注释。
         ctx.slots.inject(FOOTER_SLOT, () => ctx.slots.register({
           name: FOOTER_SLOT,
           id: 'mobile-web',

package/lib/impl.js

@@ -33,6 +33,8 @@ const { lanUrls, advertisedCandidates, phoneCandidates, ipv6Candidates, withManu
 const { pairingPayload } = require('./relay/pairing-payload.cjs')
 const { resolvePort } = require('./relay/port-allocator.cjs')
 const { createPreviewService } = require('./relay/preview.js')
+// 手机打开「电脑上的网页版」时用的那枚一次性登录令牌（见 mobile/host-web.js）。
+const hostWeb = require('./mobile/host-web.js')
 // 本机设备凭据库：/api/relay/revoke-all 必须同时吊销局域网直连的 dshc_ 凭据，
 // 否则「撤销全部授权」只清了中转侧，同网设备仍能用旧凭据直连宿主。
 // 入口按两条盘上布局分别找（嵌在插件包内 / 与插件包同级），见 shared/credentials-entry.js。
@@ -460,7 +462,11 @@ function apply(ctx) {
   // `protectedPorts` 是取值器而不是快照：局域网端口会在运行中被自适应改掉
   // （见上面的 resolveLanPort），快照会让这道边界跟着失效。DSH 自身的 web 端口
   // （`ctx.webServer.port`，默认 3080）也从这里按身份排掉——预览这条管道刻意不做
-  // 「把桌面端 GUI 搬进手机」这件事，所以不允许它连回宿主自己。
+  // 「把桌面端 GUI 搬进手机」这件事。
+  //
+  // `ownWebPort` 是同一条边界上的唯一例外：用户显式要求手机能打开网页版（2026-11-03），
+  // 所以 `mode=webapp` 那一档只放行这一个端口（且目标必须是环回）。取值器而非快照，
+  // 理由同上：端口会被配置改，快照会让放行的那一个停在旧号上。
   const preview = createPreviewService({
     authorized,
     protectedPorts: () => {
@@ -468,6 +474,7 @@ function apply(ctx) {
       ports.delete(0)
       return ports
     },
+    ownWebPort: () => ctx.webServer.port,
     onLog: (message) => ctx.logger?.info?.(`${name}: %s`, message),
   })
   ctx.effect(() => () => preview.close(), `${name}: preview pipes`)
@@ -480,6 +487,9 @@ function apply(ctx) {
     // 一样必须包在 ctx.effect 里，否则插件重载时重复注册会直接抛错。
     registerUpgradeRoute: (route) => mountRoute(route, true),
     preview,
+    // 网页版登录令牌那条：handler 在这里造好、按依赖交给路由表，理由与 preview 一样——
+    // 它要读的是本进程的 `ctx.webServer` 与 `ctx.get('connection')`。
+    hostWeb: hostWeb.handleHostWeb,
     guarded,
     state,
     hostMetadata,

package/lib/mobile/host-web.js

@@ -0,0 +1,63 @@
+'use strict';
+
+/**
+ * 移动端「打开这台电脑上的 DSH 网页版」：把网页版的一次性登录令牌交给 App。
+ *
+ * 网页版里装着全部插件的管理界面，手机上要直接用它，就得让 App 的 WebView 以已登录身份
+ * 打开宿主自己的 web 端口。而那个端口只认环回、网页版每次启动换一枚一次性令牌，所以
+ * 这件事只能由宿主来办：它已经把令牌签好了，没有理由让手机再走一遍登录。
+ *
+ * 令牌是凭据，所以这条端点走 `guarded`——只有已配对设备拿得到，令牌也绝不进日志。
+ *
+ * 两个值都现取，不缓存：端口会被配置改，连接服务会随宿主重启换一份实例。任何一环取不到
+ * 都如实回「不可用」，让 App 退回「请在电脑上打开网页版」；这里抛错只会把一次能力探测
+ * 变成一条 500，反而看不出是哪一格缺了。
+ */
+
+const { sendJson } = require('../shared/http-util');
+
+/**
+ * 宿主 web 服务真正在听的端口。
+ *
+ * 取 `ctx.webServer.port` 而不是配置里的首选值：真正在听的是它，网页版也只绑在这个号上。
+ */
+function hostPortOf(ctx) {
+  try {
+    const port = ctx?.webServer?.port;
+    return Number.isInteger(port) && port > 0 && port <= 65535 ? port : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * 网页版的一次性登录令牌，挂在连接服务的 `browserAuth` 上。
+ *
+ * 用 `ctx.get('connection')` 而不是把它写进 `inject`：注入一个这个宿主版本里没有的服务，
+ * 会让整行永远 pending（见 `host-bridge/transport.js` 里 `peerOf` 的注释）。服务不在、
+ * 字段不在、值不是非空字符串，都算这台宿主现在给不出令牌。
+ */
+function launchTokenOf(ctx) {
+  try {
+    const connection = typeof ctx?.get === 'function' ? ctx.get('connection') : null;
+    const token = connection && connection.browserAuth ? connection.browserAuth.launchToken : null;
+    return typeof token === 'string' && token.length > 0 ? token : null;
+  } catch {
+    return null;
+  }
+}
+
+/** `GET /api/mobile/v1/host-web` */
+async function handleHostWeb(ctx, _req, res) {
+  const port = hostPortOf(ctx);
+  if (port === null) return sendJson(res, 200, { ok: true, available: false, reason: 'no-port' });
+  const token = launchTokenOf(ctx);
+  if (token === null) return sendJson(res, 200, { ok: true, available: false, reason: 'no-launch-token' });
+  sendJson(res, 200, { ok: true, available: true, port, token });
+}
+
+module.exports = {
+  handleHostWeb,
+  hostPortOf,
+  launchTokenOf,
+};

package/lib/relay/preview.js

@@ -18,8 +18,14 @@
  * WS 升级、SSE、分块传输原样穿过。
  *
  * 代价：宿主无法审查内容，边界只有「端口」与「目标主机」两道。前者由 `protectedPorts()` 按
- * 身份拒绝——DSH 自身的 web 端口永远不许从预览进来；后者由 `isAllowedPreviewHost` 收到本机、
- * 私网与保留域名——放开公网，这条管道就等于一台任意目标的连接中转，移动 API 的能力面就扩了。
+ * 身份拒绝——DSH 自身的 web 端口平时不许从预览进来（唯一的例外见下）；后者由
+ * `isAllowedPreviewHost` 收到本机、私网与保留域名——放开公网，这条管道就等于一台任意目标的
+ * 连接中转，移动 API 的能力面就扩了。
+ *
+ * 网页版那一档（`?mode=webapp`）：用户显式要求手机能打开这台电脑上的 DSH 网页版，而网页版
+ * 只绑在宿主自己的环回端口上。这是推翻「不把桌面 GUI 搬进手机」那条刻意设计（2026-11-03）
+ * 的唯一入口——边界随之从「靠端口身份一律拒」收窄成「只放行宿主自己那一个端口、且目标
+ * 必须是环回」：能走这条管道的仍然只有已配对设备，别的端口与别的主机照旧按原规则拒。
  */
 
 const net = require('node:net');
@@ -76,6 +82,25 @@ function parsePreviewPort(req) {
   return port;
 }
 
+/**
+ * 从升级请求的查询串里取 `mode`。
+ *
+ * 它只用来分辨「这一次是不是要连回宿主自己的网页版」。只认恰好等于 `webapp` 的那种取值，
+ * 其余（缺参数、空串、任何别的档位）一律当普通预览：以后再加档位时，老客户端与不认识的
+ * 值不该被顺带改掉行为。
+ *
+ * @returns {'webapp'|null}
+ */
+function parsePreviewMode(req) {
+  let params;
+  try {
+    params = new URL(req && req.url ? req.url : '/', 'http://preview.invalid').searchParams;
+  } catch {
+    return null;
+  }
+  return params.get('mode') === 'webapp' ? 'webapp' : null;
+}
+
 /** 环回类主机：这些写法都指「电脑自己」，拨号要走双栈（见 `previewDialTargets`）。 */
 const LOOPBACK_HOSTS = new Set(['localhost', '127.0.0.1', '0.0.0.0', '::1', '::']);
 
@@ -196,9 +221,11 @@ function refuseUpgrade(socket, status, reason, text) {
  * @param {object} deps
  * @param {(req: object) => boolean} deps.authorized 移动端鉴权（lib/mobile/auth.js 的 authorized）
  * @param {() => Set<number>} deps.protectedPorts DSH 自身占用的端口，永远不许从预览进来
+ * @param {() => (number|null)} [deps.ownWebPort] 宿主自己 web 服务的端口，`mode=webapp` 时
+ *   唯一允许的目标；必须是取值器而不是快照（端口会被配置改），缺省表示这台宿主不认这一档
  * @param {(message: string) => void} [deps.onLog]
  */
-function createPreviewService({ authorized, protectedPorts, onLog }) {
+function createPreviewService({ authorized, protectedPorts, ownWebPort = () => null, onLog }) {
   const wss = new WebSocketServer({
     noServer: true,
     perMessageDeflate: false,
@@ -436,7 +463,23 @@ function createPreviewService({ authorized, protectedPorts, onLog }) {
     // DSH 自身的端口按**身份**拒绝，不是按数字拉黑。3080 是宿主 web 服务的实际端口
     // （`ctx.webServer.port`，可能被配置改过），从预览进来等于把桌面端 GUI/API 搬到了
     // 手机内置浏览器里——那条路刻意不做，所以在这里用同一个真值掐掉。
-    if (protectedPorts().has(port)) {
+    //
+    // 网页版那一档是这条设计的**唯一例外**（用户显式要求，2026-11-03）：手机上要打开的
+    // 网页版里装着全部插件的管理界面，它只能由电脑自己端出来。所以这一档不放宽「端口」，
+    // 而是把判据换成两条更窄的：目标端口必须就是宿主自己的 web 端口，目标主机必须是环回。
+    // 放行别的端口等于把预览变回任意本机服务的中转，放行别的主机等于把网页版端给别的机器。
+    if (parsePreviewMode(req) === 'webapp') {
+      let ownPort = null;
+      try { ownPort = ownWebPort(); } catch { ownPort = null; }
+      const ownPortValid = Number.isInteger(ownPort) && ownPort > 0 && ownPort <= 65535;
+      if (!ownPortValid || port !== ownPort) {
+        return refuseUpgrade(socket, 403, 'Forbidden', '网页版只能连电脑自己的 web 端口');
+      }
+      if (!LOOPBACK_HOSTS.has(target.host)) {
+        return refuseUpgrade(socket, 403, 'Forbidden',
+          `网页版只能连电脑自己，${target.host} 不是本机`);
+      }
+    } else if (protectedPorts().has(port)) {
       return refuseUpgrade(socket, 403, 'Forbidden', `端口 ${port} 属于 DSH 自身，不允许预览`);
     }
 

package/lib/routes/mobile-api.js

@@ -78,6 +78,8 @@ const API_VERSION = '1';
  *   注册器；与 registerRoute 是两套名字空间，同一 path 可以两者都有，但升级路由重复注册会抛错。
  * @param {object} deps.preview 预览字节管道服务。它自带鉴权与端口边界，不能包在 guarded 里——
  *   升级请求需要的是一次拒绝或一次握手，不是 JSON。
+ * @param {Function} deps.hostWeb 网页版登录令牌那条（见 mobile/host-web.js）。令牌是凭据，
+ *   所以它走 route() 即包 guarded。
  */
 function registerMobileRoutes(deps) {
   const { registerRoute, registerUpgradeRoute, guarded, state, hostMetadata, getSidecarSnapshot, safeLanCandidates, safeIpv6Candidates, lanPortInUse, preview, core, pairingApproval, rotatePairing } = deps;
@@ -499,6 +501,14 @@ function registerMobileRoutes(deps) {
   // 自动清理开关：默认关，打开后宿主每次启动顺手清一次（面板那颗按钮不受它管）。
   route('/api/mobile/v1/inbox/auto', inboxClean.handleInboxAuto)
 
+  // 电脑上的 DSH 网页版（见 mobile/host-web.js）：App 的内置浏览器要直接用它，而那个页面
+  // 只绑在宿主自己的环回端口上、且要一枚一次性登录令牌。令牌是凭据，所以这条**必须**
+  // 包 guarded（不是 PUBLIC_ROUTES）——只有已配对设备才拿得到。
+  //
+  // 它与下面的预览升级是同一件事的两半：这条给手机「去哪儿、带什么」，那条让字节真的流过去
+  // （`mode=webapp` 那一档才允许拨回宿主自己的 web 端口）。
+  route('/api/mobile/v1/host-web', deps.hostWeb)
+
   // 内置浏览器预览（App 侧「点 localhost 链接在内置浏览器里打开」的宿主端一半）。
   //
   // 这是一条 **WebSocket 升级**路由，不是普通 HTTP 路由：手机原生模块按端口在环回监听、

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-mobile-plugin",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "description": "Mobile API (/api/mobile/v1) and relay client for the DSH mobile app — desktop profile build (dsh 0.2.x, peers resolved by the host)",
   "license": "MIT",
   "icon": "./icon.png",