@qzsy/dsh-bridge 3.2.0 → 3.3.0

package/client/mobile.js

@@ -0,0 +1,306 @@
+// 移动端抽屉导航：把宿主左侧栏（会话/工作区菜单）改成从左侧滑出的 sheet。
+//
+// 背景：DSH 宿主在窄屏下仍把左侧栏压成 56px 图标轨道，展开后会把内容区挤到
+// 110px（实测 390×844）。这里只做一件事：窄屏时内容占满，左侧栏变成带遮罩的
+// 抽屉，由顶部菜单按钮打开；桌面端完全不受影响。
+//
+// 宿主 DOM 是 CSS Modules 哈希类名，本模块只依赖稳定结构/ARIA：
+//   div[class*="_frame"] / _sidebarCol / _centerCol / _rightbarCol / _overlayLayer
+//   button[aria-label*="打开侧边栏"]（英文 Open sidebar）
+//   div[class*="sessionRow"]（会话行；projectRow 是工作区分组，不能误关）
+// 不写死任何宿主哈希，宿主升级换前缀时选择器仍有效。
+import { createTranslator } from './locales.mjs';
+
+export const MOBILE_MAX_WIDTH = 767;
+export const MOBILE_DRAWER_CSS_ID = 'qzsy-mobile-drawer-styles';
+export const MOBILE_UI_FLAG = 'data-qzsy-mobile-drawer';
+const OPEN_CLASS = 'qzsy-drawer-open';
+const MENU_CLASS = 'qzsy-mobile-menu-btn';
+const BACKDROP_CLASS = 'qzsy-mobile-backdrop';
+const STYLE_PLUGIN = '@qzsy/dsh-bridge';
+
+export const MOBILE_DRAWER_CSS = `
+.qzsy-mobile-menu-btn,
+.qzsy-mobile-backdrop {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  /* 1. 左侧栏脱离 grid，内容占满；顶部留出 52px 给菜单按钮 */
+  [data-slot="root"] > div[class*="_frame"] {
+    grid-template-columns: 0px minmax(0px, 1fr) minmax(0px, 0px) !important;
+    padding-top: 52px !important;
+    box-sizing: border-box !important;
+  }
+  div[class*="_centerCol"] { grid-column: 2 !important; }
+  div[class*="_rightbarCol"] { grid-column: 3 !important; }
+  div[class*="_overlayLayer"] { grid-column: 1 / -1 !important; }
+
+  /* 2. 原生侧栏改为 fixed 抽屉（默认藏在屏幕左侧） */
+  div[class*="_sidebarCol"] {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    bottom: 0 !important;
+    width: min(300px, 84vw) !important;
+    max-width: 84vw !important;
+    height: 100vh !important;
+    height: 100dvh !important;
+    z-index: 60 !important;
+    background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
+    border-right: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.08)) !important;
+    box-shadow: none !important;
+    transform: translateX(-102%) !important;
+    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
+    overflow: hidden !important;
+    overscroll-behavior: contain;
+    will-change: transform;
+  }
+  body.qzsy-drawer-open div[class*="_sidebarCol"] {
+    transform: translateX(0) !important;
+    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18) !important;
+  }
+  body.qzsy-drawer-open div[class*="_sidebarCol"] > div > div[class*="_root"] {
+    width: 100% !important;
+  }
+
+  /* 3. 半透明遮罩：点击收起 */
+  .qzsy-mobile-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 55;
+    background: rgba(0, 0, 0, 0.42);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 280ms ease;
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  body.qzsy-drawer-open .qzsy-mobile-backdrop {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* 4. 顶部菜单按钮（位于 52px 留白条内，避免遮挡会话标题） */
+  .qzsy-mobile-menu-btn {
+    display: inline-flex;
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    width: 40px;
+    height: 40px;
+    z-index: 65;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
+    border-radius: 12px;
+    background: var(--dsw-alias-bg-layer-1, #ffffff);
+    color: var(--dsw-alias-label-primary, #111827);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: opacity 180ms ease, transform 180ms ease;
+  }
+  .qzsy-mobile-menu-btn:active { transform: scale(0.94); }
+  .qzsy-mobile-menu-btn svg { display: block; }
+  body.qzsy-drawer-open .qzsy-mobile-menu-btn {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+`;
+
+function isElement(value) {
+  return Boolean(value) && value.nodeType === 1;
+}
+
+function isMobileViewport() {
+  return typeof window !== 'undefined' && Number(window.innerWidth) <= MOBILE_MAX_WIDTH;
+}
+
+function menuLabel(open) {
+  const t = createTranslator({});
+  return open ? t('menuClose') : t('menuOpen');
+}
+
+function injectStyles() {
+  let style = document.getElementById(MOBILE_DRAWER_CSS_ID);
+  if (!style) {
+    style = document.createElement('style');
+    style.id = MOBILE_DRAWER_CSS_ID;
+    style.dataset.plugin = STYLE_PLUGIN;
+    style.dataset.pluginCss = `${STYLE_PLUGIN}/mobile`;
+    document.head.appendChild(style);
+  }
+  if (style.textContent !== MOBILE_DRAWER_CSS) style.textContent = MOBILE_DRAWER_CSS;
+}
+
+/**
+ * 安装移动端抽屉导航。无 DOM 环境（单测/SSR）安全退化为 no-op。
+ * 返回 disposer；宿主若支持 ctx.effect，可注册为插件副作用。
+ */
+export function setupMobileDrawer() {
+  if (typeof document === 'undefined' || typeof window === 'undefined') return () => {};
+  const root = document.documentElement;
+  if (!root || root.getAttribute(MOBILE_UI_FLAG) === '1') return () => {};
+  root.setAttribute(MOBILE_UI_FLAG, '1');
+
+  let menuBtn = null;
+  let observer = null;
+  let disposed = false;
+
+  const ensureElements = () => {
+    if (disposed || !document.body) return;
+    injectStyles();
+
+    let btn = document.querySelector(`.${MENU_CLASS}`);
+    if (!btn) {
+      btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = MENU_CLASS;
+      btn.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><line x1="3" y1="8" x2="21" y2="8"></line><line x1="3" y1="15" x2="15" y2="15"></line></svg>';
+      document.body.appendChild(btn);
+    }
+    let mask = document.querySelector(`.${BACKDROP_CLASS}`);
+    if (!mask) {
+      mask = document.createElement('div');
+      mask.className = BACKDROP_CLASS;
+      mask.setAttribute('aria-hidden', 'true');
+      document.body.appendChild(mask);
+    }
+    menuBtn = btn;
+    syncAria();
+  };
+
+  const isOpen = () => Boolean(document.body?.classList.contains(OPEN_CLASS));
+
+  const syncAria = () => {
+    if (!menuBtn) return;
+    const label = menuLabel(isOpen());
+    if (menuBtn.getAttribute('aria-label') !== label) menuBtn.setAttribute('aria-label', label);
+    if (menuBtn.getAttribute('title') !== label) menuBtn.setAttribute('title', label);
+    menuBtn.setAttribute('aria-expanded', isOpen() ? 'true' : 'false');
+  };
+
+  /** 宿主侧栏收起时先点它自己的「打开侧边栏」，让抽屉里有会话列表。 */
+  const ensureSidebarExpanded = () => {
+    const expand = document.querySelector(
+      'button[aria-label*="打开侧边栏"], button[title*="打开侧边栏"], button[aria-label*="Open sidebar"], button[title*="Open sidebar"], div[class*="collapsed"] button[class*="toggle"]',
+    );
+    if (expand) {
+      try { expand.click(); } catch { /* 宿主没挂载完时忽略，下次打开再试 */ }
+    }
+  };
+
+  const openDrawer = () => {
+    if (disposed || !isMobileViewport() || !document.body) return;
+    ensureElements();
+    ensureSidebarExpanded();
+    document.body.classList.add(OPEN_CLASS);
+    syncAria();
+  };
+
+  const closeDrawer = ({ restoreFocus = true } = {}) => {
+    if (!document.body) return;
+    const wasOpen = isOpen();
+    document.body.classList.remove(OPEN_CLASS);
+    syncAria();
+    if (wasOpen && restoreFocus) {
+      try { menuBtn?.focus?.({ preventScroll: true }); } catch { /* 忽略焦点异常 */ }
+    }
+  };
+
+  const closeSoon = () => {
+    window.setTimeout(() => {
+      if (!disposed && isOpen()) closeDrawer({ restoreFocus: false });
+    }, 60);
+  };
+
+  const onClick = (event) => {
+    const target = event.target;
+    if (!isElement(target)) return;
+
+    if (target.closest(`.${MENU_CLASS}`)) {
+      event.preventDefault();
+      if (isOpen()) closeDrawer();
+      else openDrawer();
+      return;
+    }
+    if (!isOpen()) return;
+
+    if (target.closest(`.${BACKDROP_CLASS}`)) {
+      closeDrawer();
+      return;
+    }
+
+    const sidebar = document.querySelector('div[class*="_sidebarCol"]');
+    if (!sidebar || !sidebar.contains(target)) return;
+    if (target.closest('input, textarea, select, [contenteditable="true"]')) return;
+
+    // 会话行点击后收起抽屉；行内的操作按钮（归档/置顶等）不收起
+    const sessionRow = target.closest('div[class*="sessionRow"]');
+    if (sessionRow && !target.closest('button, [role="button"]')) {
+      closeSoon();
+      return;
+    }
+
+    const action = target.closest('button, [role="button"], a');
+    if (!action) return;
+    const label = `${action.getAttribute('aria-label') || ''} ${action.getAttribute('title') || ''} ${action.innerText || ''}`;
+    if (/新建会话|New session|收起侧边栏|Collapse sidebar/.test(label)) {
+      closeSoon();
+      return;
+    }
+    // 顶部一级菜单（插件/自动化任务/命令面板/…）打开新面板后收起抽屉；
+    // 「更多」往往是在抽屉内展开二级菜单，保持打开。
+    if (action.closest('button[class*="panelRow"]') && !/更多|More/.test(label)) {
+      closeSoon();
+    }
+  };
+
+  const onKeyDown = (event) => {
+    if (event.key === 'Escape' && isOpen()) closeDrawer();
+  };
+
+  const onResize = () => {
+    if (!isMobileViewport() && isOpen()) closeDrawer({ restoreFocus: false });
+  };
+
+  const onVisibilityChange = () => {
+    if (document.visibilityState === 'hidden' && isOpen()) closeDrawer({ restoreFocus: false });
+  };
+
+  injectStyles();
+  ensureElements();
+  document.addEventListener('click', onClick, true);
+  document.addEventListener('keydown', onKeyDown, true);
+  document.addEventListener('visibilitychange', onVisibilityChange);
+  window.addEventListener('resize', onResize);
+
+  if (typeof MutationObserver === 'function' && document.body) {
+    observer = new MutationObserver(() => {
+      if (!document.querySelector(`.${MENU_CLASS}`) || !document.querySelector(`.${BACKDROP_CLASS}`) || !document.getElementById(MOBILE_DRAWER_CSS_ID)) {
+        ensureElements();
+      }
+    });
+    observer.observe(document.body, { childList: true });
+  }
+
+  syncAria();
+
+  return () => {
+    disposed = true;
+    try { observer?.disconnect(); } catch { /* 忽略 */ }
+    document.removeEventListener('click', onClick, true);
+    document.removeEventListener('keydown', onKeyDown, true);
+    document.removeEventListener('visibilitychange', onVisibilityChange);
+    window.removeEventListener('resize', onResize);
+    document.body?.classList.remove(OPEN_CLASS);
+    document.querySelector(`.${MENU_CLASS}`)?.remove();
+    document.querySelector(`.${BACKDROP_CLASS}`)?.remove();
+    document.getElementById(MOBILE_DRAWER_CSS_ID)?.remove();
+    root.removeAttribute(MOBILE_UI_FLAG);
+  };
+}