@wenbin_wb/dsh-bridge 2.10.14 → 2.11.0

package/CHANGELOG.md

@@ -4,6 +4,40 @@
 
 ---
 
+## [v2.11.0] - 2026-09-28
+
+> 本版为客户端架构升级与环境解耦：支持桌面端宿主（如 Tauri）将设置面板作为独立组件嵌入并动态管理设置页入口；同时为 Android 移动壳及第三方自适应插件引入环境自适应让位与多级特性开关，消除界面冲突与遮挡。
+
+### ✨ 新功能
+
+- **客户端宿主接入面（对齐 #51）**：在客户端入口暴露 Cordis 反射服务 `ctx.provide('dsh-bridge', { version: 1, render, setSettingsVisible, settingsVisible, configureFeatures, getFeatures })`。桌面端宿主（如 DSH Desktop / Tauri）可调用 `render()` 将 `BridgePanel` 现构造嵌入自定义侧栏或扩展容器，支持 `preferredTab` 指定默认停靠页并保持动态响应；收编后可调用 `setSettingsVisible(false)` 动态撤下全局设置页中的重复条目。老宿主环境下平稳降级。
+- **设置页左侧导航栏图标定制**：新增 `client/settings-nav-icon.js`，通过 CSS mask 将设置中心原生回退的通用小齿轮（gear）替换为「远程访问 / 手机无线连接」专属矢量图标，颜色自动跟随 `currentColor` 保持原生悬停与激活态一致。
+- **移动端多级特性开关与排障支持（对齐 #52）**：新增 `client/mobile-yield.js`，支持通过 URL 查询参数（如 `?dsh_bridge_tweaks=0` 全局禁用、`?dsh_mobile_header=0` 仅禁用顶栏）、宿主全局配置（`window.__DSH_BRIDGE_CONFIG__`）、运行时反射服务或本地存储细粒度控制移动端 UI 特性。
+
+### 🐞 修复
+
+- **Android 移动壳/已有自适应插件下的界面冲突与顶栏遮挡（#52）**：在 Android 原生 WebView 壳（如 `com.dsharnessmobile.shell`）或已加载移动自适应插件（如 `@dsh-android/dsh-client-ui-responsive`）的环境下，插件主动避让自建 body 级顶栏与全局覆盖样式，杜绝双重顶栏重叠、设置页错位与触控遮挡失效。
+
+### 🧪 测试
+
+- 新增 `test/mobile-yield.test.mjs`（11 条）、`test/client-provide.test.mjs`（6 条）与 `test/settings-nav-icon.test.mjs`（3 条），全量 337 项测试 100% 通过。
+
+> ⚠️ 生效说明：纯前端改动，刷新页面即可生效，无需重启 dsh。
+
+---
+
+## [v2.10.15] - 2026-09-25
+
+> 本版为设置页关闭按钮的可用性微调：手机上「✕」更容易点中。
+
+### 🐞 修复
+
+- **设置页「✕」触控区偏小**：宿主原生为 28px（本插件移动端曾放到 32px），低于移动端推荐的可点尺寸。现放大到 **40×40**，并把 `top/right` 调整为 4px 使按钮中心与标题/返回行的文字中心基本重合（实测相差 1px）；标题右侧 52px 留白仍完整覆盖按钮 44px 的占位，长标题与不可折行超长 token 都不会钻到按钮下面。
+
+> ⚠️ 生效说明：纯前端样式调整，刷新页面即可生效，无需重启 dsh。
+
+---
+
 ## [v2.10.14] - 2026-09-25
 
 > 本版为移动端设置页的体验修复：解决内容被静默裁切、窄屏菜单拥挤、弹窗「✕」位置错乱，以及插件市场的安装确认框被设置弹窗盖住（点「安装」没反应）/ 矮屏下超出屏幕点不到按钮等问题。纯前端样式与交互调整，刷新页面即生效。

package/client/client.js

@@ -958,10 +958,12 @@ var MOBILE_STYLES_CSS = `
          \u628A\u4E24\u8005\u62C9\u56DE\u540C\u4E00\u884C\u7684\u529E\u6CD5\u3002 */
       html[data-dshbr-drilldown="ready"] button[class*="VOzbGW_close"] {
         position: absolute !important;
-        top: 9px !important;
-        right: 9px !important;
-        width: 32px !important;
-        height: 32px !important;
+        /* 40\xD740 \u89E6\u63A7\u533A\uFF08\u5BBF\u4E3B\u539F\u4E3A 28px\uFF09\uFF1A\u914D top/right 4px \u540E\u4E2D\u5FC3\u843D\u5728 y=24\uFF0C
+           \u4E0E\u6807\u9898\u6587\u5B57\u4E2D\u5FC3\uFF08\u7EA6 23\uFF09\u57FA\u672C\u91CD\u5408\uFF1B\u53F3\u4FA7 4+40=44px \u7684\u5360\u4F4D\u4ECD\u5728\u6807\u9898 52px \u7559\u767D\u4E4B\u5185\u3002 */
+        top: 4px !important;
+        right: 4px !important;
+        width: 40px !important;
+        height: 40px !important;
         z-index: 5 !important;
       }
 
@@ -1372,6 +1374,166 @@ function shouldYieldToOfficialPicker(facts) {
   return Boolean(facts?.local) && Boolean(facts?.officialPicker);
 }
 
+// client/mobile-yield.js
+var FEATURES = {
+  MOBILE_HEADER: "mobileHeader",
+  MOBILE_STYLES: "mobileStyles",
+  COMPOSER_COLLAPSE: "composerCollapse"
+};
+var runtimeFeatureOverrides = {};
+function setRuntimeFeatureOverrides(overrides) {
+  if (overrides && typeof overrides === "object") {
+    runtimeFeatureOverrides = { ...runtimeFeatureOverrides, ...overrides };
+  }
+}
+function getRuntimeFeatureOverrides() {
+  return { ...runtimeFeatureOverrides };
+}
+function detectMobileShellOrResponsivePlugin() {
+  if (typeof window === "undefined") return false;
+  if (window.__DSH_MOBILE_SHELL__ || window.__TAURI__ || window.__DSH_DESKTOP__) {
+    return true;
+  }
+  if (window.__DSH_CLIENT_UI_RESPONSIVE__) {
+    return true;
+  }
+  if (typeof document !== "undefined") {
+    if (document.querySelector("[data-dsh-responsive-mobile]") || document.querySelector("[data-dsh-mobile-shell]")) {
+      return true;
+    }
+  }
+  return false;
+}
+function isFeatureEnabled(featureName, defaultDetector) {
+  if (typeof window === "undefined") {
+    return typeof defaultDetector === "function" ? defaultDetector() : true;
+  }
+  try {
+    if (window.location && window.location.search) {
+      const params = new URLSearchParams(window.location.search);
+      const tweaksVal = params.get("dsh_bridge_tweaks") ?? params.get("dsh_mobile_tweaks");
+      if (tweaksVal === "0" || tweaksVal === "false" || tweaksVal === "off") {
+        return false;
+      }
+      if (tweaksVal === "1" || tweaksVal === "true" || tweaksVal === "on") {
+        return true;
+      }
+      const kebabName = featureName.replace(/[A-Z]/g, (m) => `_${m.toLowerCase()}`);
+      const specificVal = params.get(`dsh_${kebabName}`) ?? params.get(`dsh_${featureName}`);
+      if (specificVal === "0" || specificVal === "false" || specificVal === "off") {
+        return false;
+      }
+      if (specificVal === "1" || specificVal === "true" || specificVal === "on") {
+        return true;
+      }
+    }
+  } catch {
+  }
+  try {
+    const hostConfig = window.__DSH_BRIDGE_CONFIG__;
+    if (hostConfig && typeof hostConfig === "object") {
+      if (hostConfig.disablePageTweaks === true || hostConfig.disableMobileTweaks === true) {
+        return false;
+      }
+      if (typeof hostConfig[featureName] === "boolean") {
+        return hostConfig[featureName];
+      }
+    }
+  } catch {
+  }
+  if (typeof runtimeFeatureOverrides[featureName] === "boolean") {
+    return runtimeFeatureOverrides[featureName];
+  }
+  try {
+    if (window.localStorage) {
+      const stored = window.localStorage.getItem(`dsh_bridge:feature:${featureName}`);
+      if (stored === "0" || stored === "false") return false;
+      if (stored === "1" || stored === "true") return true;
+    }
+  } catch {
+  }
+  if (typeof defaultDetector === "function") {
+    return defaultDetector();
+  }
+  return true;
+}
+function shouldYieldMobileHeader() {
+  return !isFeatureEnabled(FEATURES.MOBILE_HEADER, () => {
+    return !detectMobileShellOrResponsivePlugin();
+  });
+}
+function shouldYieldMobileStyles() {
+  return !isFeatureEnabled(FEATURES.MOBILE_STYLES, () => {
+    return !detectMobileShellOrResponsivePlugin();
+  });
+}
+function shouldYieldComposerCollapse() {
+  return !isFeatureEnabled(FEATURES.COMPOSER_COLLAPSE, () => {
+    return !detectMobileShellOrResponsivePlugin();
+  });
+}
+
+// client/settings-nav-icon.js
+var SETTINGS_NAV_MARKER = "data-dsh-bridge-settings-nav";
+var REMOTE_NAV_SVG = `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='10' height='16' x='3' y='4' rx='2'/><path d='M7 16h2'/><path d='M17 8a4 4 0 0 1 0 8'/><path d='M20 5a8 8 0 0 1 0 14'/></svg>`;
+function getNavIconCss(customSvg = REMOTE_NAV_SVG) {
+  const maskUrl = `data:image/svg+xml,${encodeURIComponent(customSvg)}`;
+  return `
+[${SETTINGS_NAV_MARKER}] > svg:first-child {
+  display: none !important;
+}
+[${SETTINGS_NAV_MARKER}]::before {
+  content: '';
+  flex: none;
+  width: 16px;
+  height: 16px;
+  background-color: currentColor;
+  -webkit-mask: url("${maskUrl}") center / contain no-repeat;
+  mask: url("${maskUrl}") center / contain no-repeat;
+}
+`;
+}
+function registerSettingsNavIcon(resolveLabel = () => "\u8FDC\u7A0B\u8BBF\u95EE") {
+  if (typeof document === "undefined") return () => {
+  };
+  const styleId = "dsh-bridge-settings-nav-icon-style";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.dataset.plugin = "@wenbin_wb/dsh-bridge";
+    style.dataset.pluginCss = "@wenbin_wb/dsh-bridge/settings-nav-icon";
+    style.textContent = getNavIconCss();
+    document.head.appendChild(style);
+  }
+  let disposed = false;
+  const sync = () => {
+    if (disposed) return;
+    const currentLabel = typeof resolveLabel === "function" ? resolveLabel().trim() : "\u8FDC\u7A0B\u8BBF\u95EE";
+    const buttons = document.querySelectorAll('[role="dialog"] nav button, div[class*="VOzbGW_nav"] button');
+    for (const button of buttons) {
+      const text = button.textContent?.trim() || "";
+      if (currentLabel.length > 0 && (text === currentLabel || text.includes(currentLabel))) {
+        button.setAttribute(SETTINGS_NAV_MARKER, "");
+      } else if (button.hasAttribute(SETTINGS_NAV_MARKER)) {
+        button.removeAttribute(SETTINGS_NAV_MARKER);
+      }
+    }
+  };
+  sync();
+  let observer = null;
+  if (typeof MutationObserver !== "undefined") {
+    observer = new MutationObserver(sync);
+    observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+  }
+  return () => {
+    disposed = true;
+    if (observer) observer.disconnect();
+    document.querySelectorAll(`[${SETTINGS_NAV_MARKER}]`).forEach((el) => el.removeAttribute(SETTINGS_NAV_MARKER));
+    const styleEl = document.getElementById(styleId);
+    if (styleEl) styleEl.remove();
+  };
+}
+
 // lib/bridge-rpc-constants.js
 var BRIDGE_RPC_CHANNEL = "/dsh-bridge";
 var BRIDGE_ENDPOINTS = {
@@ -4858,10 +5020,13 @@ function TabBar({ active, onChange, dots }) {
     })
   );
 }
-function BridgePanel({ rpcCall }) {
+function BridgePanel({ rpcCall, preferredTab }) {
   const [status, setStatus] = React.useState(null);
   const [err, setErr] = React.useState(null);
-  const [activeTab, setActiveTab] = React.useState("lan");
+  const [activeTab, setActiveTab] = React.useState(preferredTab || "lan");
+  React.useEffect(() => {
+    if (preferredTab) setActiveTab(preferredTab);
+  }, [preferredTab]);
   const [platforms, setPlatforms] = React.useState(null);
   const [selectedPlatform, setSelectedPlatform] = React.useState("wechat");
   const [copiedUrl, setCopiedUrl] = React.useState("");
@@ -5643,6 +5808,7 @@ function BridgePanel({ rpcCall }) {
 }
 function injectMobileStyles() {
   if (typeof document === "undefined") return;
+  if (shouldYieldMobileStyles()) return;
   if (document.getElementById("dsh-bridge-mobile-styles")) return;
   const style = document.createElement("style");
   style.id = "dsh-bridge-mobile-styles";
@@ -5701,6 +5867,7 @@ function setupSettingsDrilldown() {
 function setupMobileExperience(rpcCall, ctx) {
   if (typeof document === "undefined" || typeof window === "undefined") return;
   injectMobileStyles();
+  if (shouldYieldMobileHeader()) return;
   let header = document.querySelector(".dsh-mobile-app-header");
   let titleEl = document.querySelector(".dsh-mobile-header-title");
   if (!header) {
@@ -6657,8 +6824,9 @@ function setupIosKeyboardAdapter() {
   });
 }
 function setupComposerCollapse() {
-  if (typeof window === "undefined" || typeof document === "undefined") return;
+  if (typeof window === "undefined" || typeof document === "undefined" || typeof MutationObserver === "undefined") return;
   if (window.innerWidth > MOBILE_MAX_WIDTH) return;
+  if (shouldYieldComposerCollapse()) return;
   const LS_KEY = "dsh-composer-fold";
   let bar = null;
   let busy = false;
@@ -6791,6 +6959,11 @@ function setupComposerCollapse() {
 function apply(ctx) {
   window.__dshClientCtx = ctx;
   setupSettingsDrilldown();
+  if (typeof ctx.effect === "function") {
+    ctx.effect(() => registerSettingsNavIcon(() => "\u8FDC\u7A0B\u8BBF\u95EE"), "dsh-bridge: settings nav icon");
+  } else {
+    registerSettingsNavIcon(() => "\u8FDC\u7A0B\u8BBF\u95EE");
+  }
   const rpcCall = (endpoint, payload, signal) => ctx.connection.rpc.call(BRIDGE_RPC_CHANNEL, endpoint, payload, signal);
   window.__dshOpenRemoteWorkspaceModal = (onAdded, onPickDirect, onCancel) => showRemoteWorkspaceDialog(rpcCall, onAdded, ctx, onPickDirect, onCancel);
   setupIosKeyboardAdapter();
@@ -6822,19 +6995,74 @@ function apply(ctx) {
       );
     })
   );
-  ctx.slots.inject(
-    "settings.section",
-    () => ctx.slots.register(
-      {
-        name: "settings.section",
-        id: "dsh-bridge",
-        order: 10,
-        label: () => "\u8FDC\u7A0B\u8BBF\u95EE",
-        inject: () => ({ rpcCall })
-      },
-      BridgePanel
-    )
-  );
+  let settingsVisible = true;
+  let sectionRegistration = null;
+  const ensureSectionRegistered = () => {
+    if (!settingsVisible || sectionRegistration) return;
+    try {
+      sectionRegistration = ctx.slots.register(
+        {
+          name: "settings.section",
+          id: "dsh-bridge",
+          order: 10,
+          label: () => "\u8FDC\u7A0B\u8BBF\u95EE",
+          inject: () => ({ rpcCall })
+        },
+        BridgePanel
+      );
+    } catch {
+    }
+  };
+  const ensureSectionUnregistered = () => {
+    if (!sectionRegistration) return;
+    try {
+      if (typeof sectionRegistration === "function") {
+        sectionRegistration();
+      } else if (typeof sectionRegistration.dispose === "function") {
+        sectionRegistration.dispose();
+      }
+    } catch {
+    }
+    sectionRegistration = null;
+  };
+  const sectionGate = {
+    visible: () => settingsVisible,
+    setVisible: (visible) => {
+      const next = !!visible;
+      if (settingsVisible === next) return;
+      settingsVisible = next;
+      if (next) {
+        ensureSectionRegistered();
+      } else {
+        ensureSectionUnregistered();
+      }
+    }
+  };
+  ctx.slots.inject("settings.section", () => {
+    if (settingsVisible) {
+      ensureSectionRegistered();
+    }
+  });
+  const bridgeControl = {
+    version: 1,
+    /** 把插件自己的面板交给宿主渲染（返回 React element） */
+    render: (props = {}) => {
+      return React.createElement(BridgePanel, {
+        rpcCall,
+        preferredTab: props.preferredTab,
+        ...props
+      });
+    },
+    /** 宿主收编面板后，撤下设置页那条重复入口 */
+    setSettingsVisible: (visible) => sectionGate.setVisible(visible),
+    settingsVisible: () => sectionGate.visible(),
+    /** 运行时动态特性开关配置 (Issue #52) */
+    configureFeatures: (flags) => setRuntimeFeatureOverrides(flags),
+    getFeatures: () => getRuntimeFeatureOverrides()
+  };
+  if (typeof ctx.provide === "function") {
+    ctx.provide("dsh-bridge", bridgeControl);
+  }
 }
 
     return module.exports;

package/client/index.js

@@ -5,6 +5,14 @@ import {
   fetchLoopbackTokenOnce,
 } from './unlock-manager.js'
 import { hasOfficialDirectoryPicker, shouldYieldToOfficialPicker } from './picker-yield.js'
+import {
+  shouldYieldMobileHeader,
+  shouldYieldMobileStyles,
+  shouldYieldComposerCollapse,
+  setRuntimeFeatureOverrides,
+  getRuntimeFeatureOverrides,
+} from './mobile-yield.js'
+import { registerSettingsNavIcon } from './settings-nav-icon.js'
 // dsh-bridge 客户端插件：设置页「远程访问」面板
 
 // 兼容非 HTTPS 环境（如手机局域网 HTTP 访问）：为非安全上下文补齐 crypto.randomUUID
@@ -3081,10 +3089,13 @@ function TabBar({ active, onChange, dots }) {
 
 // ---- 主面板 ----
 
-function BridgePanel({ rpcCall }) {
+function BridgePanel({ rpcCall, preferredTab }) {
   const [status, setStatus]       = React.useState(null);
   const [err, setErr]             = React.useState(null);
-  const [activeTab, setActiveTab] = React.useState('lan');
+  const [activeTab, setActiveTab] = React.useState(preferredTab || 'lan');
+  React.useEffect(() => {
+    if (preferredTab) setActiveTab(preferredTab);
+  }, [preferredTab]);
   // 平台列表和连接状态
   const [platforms, setPlatforms] = React.useState(null);
   const [selectedPlatform, setSelectedPlatform] = React.useState('wechat');
@@ -3819,6 +3830,7 @@ function BridgePanel({ rpcCall }) {
 
 function injectMobileStyles() {
   if (typeof document === 'undefined') return;
+  if (shouldYieldMobileStyles()) return;
   if (document.getElementById('dsh-bridge-mobile-styles')) return;
 
   const style = document.createElement('style');
@@ -3915,6 +3927,7 @@ function setupSettingsDrilldown() {
 function setupMobileExperience(rpcCall, ctx) {
   if (typeof document === 'undefined' || typeof window === 'undefined') return;
   injectMobileStyles();
+  if (shouldYieldMobileHeader()) return;
 
   // 1. 创建顶部 DeepSeek App 风格导航条 (Header: 左侧双横线，中间当前会话标题，右侧(+))
   let header = document.querySelector('.dsh-mobile-app-header');
@@ -5067,8 +5080,9 @@ function setupIosKeyboardAdapter() {
 // 中间消息可视区很小。折叠后 composer 隐藏、消息 viewArea 自动伸展全高，阅读区显著增大。
 // 折叠态记忆到 localStorage（dsh-composer-fold），跨会话保持用户偏好。
 function setupComposerCollapse() {
-  if (typeof window === 'undefined' || typeof document === 'undefined') return;
+  if (typeof window === 'undefined' || typeof document === 'undefined' || typeof MutationObserver === 'undefined') return;
   if (window.innerWidth > MOBILE_MAX_WIDTH) return; // 仅移动端
+  if (shouldYieldComposerCollapse()) return;
   const LS_KEY = 'dsh-composer-fold';
 
   let bar = null;          // 折叠态底部"点击输入"细条
@@ -5197,6 +5211,12 @@ function apply(ctx) {
   // 放在最前：交互层先就绪，后续任何初始化抛异常都不会留下「CSS 生效但监听器缺失」
   // 的状态（CSS 6.2 块另有 <html> 就绪开关双重兜底）。
   setupSettingsDrilldown();
+  // 设置页左侧导航栏图标定制：将原生通用齿轮替换为远程访问专属图标
+  if (typeof ctx.effect === 'function') {
+    ctx.effect(() => registerSettingsNavIcon(() => '远程访问'), 'dsh-bridge: settings nav icon');
+  } else {
+    registerSettingsNavIcon(() => '远程访问');
+  }
   const rpcCall = (endpoint, payload, signal) =>
     ctx.connection.rpc.call(BRIDGE_RPC_CHANNEL, endpoint, payload, signal);
 
@@ -5245,18 +5265,80 @@ function apply(ctx) {
     }),
   );
 
-  ctx.slots.inject('settings.section', () =>
-    ctx.slots.register(
-      {
-        name: 'settings.section',
-        id: 'dsh-bridge',
-        order: 10,
-        label: () => '远程访问',
-        inject: () => ({ rpcCall }),
-      },
-      BridgePanel,
-    ),
-  );
+  // 设置页条目动态门控与可见性管理 (Issue #51)
+  let settingsVisible = true;
+  let sectionRegistration = null;
+
+  const ensureSectionRegistered = () => {
+    if (!settingsVisible || sectionRegistration) return;
+    try {
+      sectionRegistration = ctx.slots.register(
+        {
+          name: 'settings.section',
+          id: 'dsh-bridge',
+          order: 10,
+          label: () => '远程访问',
+          inject: () => ({ rpcCall }),
+        },
+        BridgePanel,
+      );
+    } catch {}
+  };
+
+  const ensureSectionUnregistered = () => {
+    if (!sectionRegistration) return;
+    try {
+      if (typeof sectionRegistration === 'function') {
+        sectionRegistration();
+      } else if (typeof sectionRegistration.dispose === 'function') {
+        sectionRegistration.dispose();
+      }
+    } catch {}
+    sectionRegistration = null;
+  };
+
+  const sectionGate = {
+    visible: () => settingsVisible,
+    setVisible: (visible) => {
+      const next = !!visible;
+      if (settingsVisible === next) return;
+      settingsVisible = next;
+      if (next) {
+        ensureSectionRegistered();
+      } else {
+        ensureSectionUnregistered();
+      }
+    },
+  };
+
+  ctx.slots.inject('settings.section', () => {
+    if (settingsVisible) {
+      ensureSectionRegistered();
+    }
+  });
+
+  // 暴露客户端反射控制面 (Issue #51)
+  const bridgeControl = {
+    version: 1,
+    /** 把插件自己的面板交给宿主渲染（返回 React element） */
+    render: (props = {}) => {
+      return React.createElement(BridgePanel, {
+        rpcCall,
+        preferredTab: props.preferredTab,
+        ...props,
+      });
+    },
+    /** 宿主收编面板后，撤下设置页那条重复入口 */
+    setSettingsVisible: (visible) => sectionGate.setVisible(visible),
+    settingsVisible: () => sectionGate.visible(),
+    /** 运行时动态特性开关配置 (Issue #52) */
+    configureFeatures: (flags) => setRuntimeFeatureOverrides(flags),
+    getFeatures: () => getRuntimeFeatureOverrides(),
+  };
+
+  if (typeof ctx.provide === 'function') {
+    ctx.provide('dsh-bridge', bridgeControl);
+  }
 }
 
 export { name, inject, apply };

package/client/mobile-styles.js

@@ -927,10 +927,12 @@ export const MOBILE_STYLES_CSS = `
          把两者拉回同一行的办法。 */
       html[data-dshbr-drilldown="ready"] button[class*="VOzbGW_close"] {
         position: absolute !important;
-        top: 9px !important;
-        right: 9px !important;
-        width: 32px !important;
-        height: 32px !important;
+        /* 40×40 触控区（宿主原为 28px）：配 top/right 4px 后中心落在 y=24，
+           与标题文字中心（约 23）基本重合；右侧 4+40=44px 的占位仍在标题 52px 留白之内。 */
+        top: 4px !important;
+        right: 4px !important;
+        width: 40px !important;
+        height: 40px !important;
         z-index: 5 !important;
       }