chore: create Multica handoff checkpoint

app/frontend/shared/shell.js

@@ -2,25 +2,42 @@
   "use strict";
 
   const SIDEBAR_STORAGE_KEY = "xiaobai-sidebar-collapsed";
+  const MOBILE_BREAKPOINT = 767;
+
+  function isMobileViewport() {
+    return global.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`).matches;
+  }
 
   function create(options) {
     const state = options.state;
     const registry = options.pages;
     let initialized = false;
 
+    function syncViewportMode() {
+      document.body.classList.toggle("mobile-shell", isMobileViewport());
+    }
+
     function toggleHeaderCommandMenu(force) {
       const menu = document.querySelector("#headerCommandGroup");
       const button = document.querySelector("#headerMenuButton");
+      const backdrop = document.querySelector("#mobileCommandBackdrop");
       if (!menu || !button) return;
       const open = typeof force === "boolean" ? force : !menu.classList.contains("is-open");
       menu.classList.toggle("is-open", open);
       button.setAttribute("aria-expanded", String(open));
+      document.body.classList.toggle("mobile-command-open", open && isMobileViewport());
+      if (backdrop) backdrop.hidden = !(open && isMobileViewport());
+      if (open && isMobileViewport()) {
+        global.requestAnimationFrame(() => menu.querySelector("button:not([hidden])")?.focus({ preventScroll: true }));
+      } else if (force === false && document.activeElement && menu.contains(document.activeElement)) {
+        button.focus({ preventScroll: true });
+      }
     }
 
     function updateSidebarControl() {
       const button = document.querySelector("#sidebarCollapseButton");
       if (!button) return;
-      const automaticallyCollapsed = global.innerWidth <= 1023 && global.innerWidth > 720;
+      const automaticallyCollapsed = global.innerWidth <= 1023 && !isMobileViewport();
       const collapsed = document.body.classList.contains("sidebar-collapsed") || automaticallyCollapsed;
       button.setAttribute("aria-expanded", String(!collapsed));
       button.setAttribute("aria-label", collapsed ? "展开侧栏" : "收起侧栏");
@@ -44,11 +61,19 @@
       const navigationId = page?.navigation_alias || viewId;
       const marketView = page?.group === "market";
       document.body.dataset.activeView = viewId;
+      const mobileGroup = document.querySelector("#mobilePageGroup");
+      const mobileTitle = document.querySelector("#mobilePageTitle");
+      if (mobileGroup) {
+        mobileGroup.textContent = page?.group === "market"
+          ? "行情"
+          : page?.group === "personal" ? "复盘" : "工具";
+      }
+      if (mobileTitle) mobileTitle.textContent = page?.title || "小白复盘";
       document.querySelectorAll(".module-tab").forEach((button) => {
         button.classList.toggle("active", button.dataset.view === navigationId);
         button.classList.toggle(
           "mobile-active",
-          global.innerWidth <= 720
+          isMobileViewport()
             && marketView
             && button.dataset.view === "limitPool"
             && viewId !== "limitPool",
@@ -127,6 +152,7 @@
         collapsed = false;
       }
       document.body.classList.toggle("sidebar-collapsed", collapsed);
+      syncViewportMode();
       updateSidebarControl();
       syncNavigation(state.activeView);
       document.querySelectorAll(".module-tab").forEach((button) => {
@@ -143,6 +169,16 @@
         event.stopPropagation();
         toggleHeaderCommandMenu();
       });
+      document.querySelector("#mobileCommandBackdrop")?.addEventListener("click", () => {
+        toggleHeaderCommandMenu(false);
+      });
+      document.querySelectorAll("[data-mobile-command-target]").forEach((button) => {
+        button.addEventListener("click", () => {
+          const target = document.getElementById(button.dataset.mobileCommandTarget || "");
+          toggleHeaderCommandMenu(false);
+          target?.click();
+        });
+      });
       document.querySelector("#headerCommandGroup")?.addEventListener("click", (event) => {
         if (event.target.closest("button") && !event.target.closest(".account-menu-shell")) {
           toggleHeaderCommandMenu(false);
@@ -170,7 +206,8 @@
         if (event.key === "Escape") toggleHeaderCommandMenu(false);
       });
       global.addEventListener("resize", () => {
-        if (global.innerWidth > 720) toggleHeaderCommandMenu(false);
+        toggleHeaderCommandMenu(false);
+        syncViewportMode();
         updateSidebarControl();
         syncNavigation(state.activeView);
       });
@@ -184,6 +221,7 @@
       setPageStatus,
       setStatus,
       syncNavigation,
+      syncViewportMode,
       toggleHeaderCommandMenu,
       toggleSidebar,
       updateSidebarControl,