From 788c085684c8b7006ae0991d599da0267c600924 Mon Sep 17 00:00:00 2001
From: AIGameCreator App <dsk@genarrative.world>
Date: Wed, 8 Jul 2026 20:31:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E9=BD=90=E4=BE=A7=E6=A0=8F=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E5=A4=B1=E7=84=A6=E5=85=B3=E9=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

我的和帮助菜单点击外部或焦点离开后自动收起

保留菜单内部点击交互不被提前关闭

补充侧栏菜单关闭行为测试
---
 apps/ai-game-creator-shell/src/App.tsx        | 44 ++++++++++++++++++-
 .../tests/appSurface.test.ts                  | 15 +++++++
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/apps/ai-game-creator-shell/src/App.tsx b/apps/ai-game-creator-shell/src/App.tsx
index 8961828b7..2ab271d84 100644
--- a/apps/ai-game-creator-shell/src/App.tsx
+++ b/apps/ai-game-creator-shell/src/App.tsx
@@ -2176,6 +2176,8 @@ export function WorkspaceLauncher({
   >([]);
   const [showcaseStatus, setShowcaseStatus] = useState('正在读取灵感');
   const homeAttachmentInputRef = useRef<HTMLInputElement | null>(null);
+  const accountMenuRef = useRef<HTMLDivElement | null>(null);
+  const helpMenuRef = useRef<HTMLDivElement | null>(null);
   const launcherAgentChatAgents = deriveAgentStatusCards(seedManifest, null);
   const [agentChatProjectPath, setAgentChatProjectPath] =
     useState(defaultProjectPath);
@@ -2268,6 +2270,44 @@ export function WorkspaceLauncher({
     void loadWalletLedger();
   }, [walletPanelOpen, walletLedgerStatus]);
 
+  useEffect(() => {
+    function closeSidebarMenusIfOutside(target: EventTarget | null) {
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (
+        accountMenuRef.current?.contains(target) ||
+        helpMenuRef.current?.contains(target)
+      ) {
+        return;
+      }
+      setAccountMenuOpen(false);
+      setHelpMenuOpen(false);
+    }
+
+    function handlePointerDown(event: PointerEvent) {
+      closeSidebarMenusIfOutside(event.target);
+    }
+
+    function handleFocusIn(event: FocusEvent) {
+      closeSidebarMenusIfOutside(event.target);
+    }
+
+    function handleWindowBlur() {
+      setAccountMenuOpen(false);
+      setHelpMenuOpen(false);
+    }
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('focusin', handleFocusIn);
+    window.addEventListener('blur', handleWindowBlur);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('focusin', handleFocusIn);
+      window.removeEventListener('blur', handleWindowBlur);
+    };
+  }, []);
+
   function validateProjectPath(nextProjectPath: string) {
     const trimmedProjectPath = nextProjectPath.trim();
     if (!trimmedProjectPath || !isAbsoluteProjectPath(trimmedProjectPath)) {
@@ -2993,7 +3033,7 @@ export function WorkspaceLauncher({
           </button>
         </nav>
         <div className="launcher-sidebar-bottom">
-          <div className="launcher-account-nav">
+          <div className="launcher-account-nav" ref={accountMenuRef}>
             <button
               type="button"
               className="launcher-config-button"
@@ -3042,7 +3082,7 @@ export function WorkspaceLauncher({
               </div>
             ) : null}
           </div>
-          <div className="launcher-help-nav">
+          <div className="launcher-help-nav" ref={helpMenuRef}>
             <button
               type="button"
               aria-label="帮助"
diff --git a/apps/ai-game-creator-shell/tests/appSurface.test.ts b/apps/ai-game-creator-shell/tests/appSurface.test.ts
index 199488db1..781e4bc27 100644
--- a/apps/ai-game-creator-shell/tests/appSurface.test.ts
+++ b/apps/ai-game-creator-shell/tests/appSurface.test.ts
@@ -850,6 +850,16 @@ describe('AI 游戏创作 App 界面边界', () => {
     expect(
       screen.getByRole('menuitem', { name: '联系我们' }),
     ).not.toBeNull();
+    fireEvent.pointerDown(screen.getByLabelText('首页输入'));
+    expect(
+      screen.queryByRole('menuitem', { name: '联系我们' }),
+    ).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: '帮助' }));
+    fireEvent.focusIn(screen.getByRole('button', { name: '首页' }));
+    expect(
+      screen.queryByRole('menuitem', { name: '联系我们' }),
+    ).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: '帮助' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '联系我们' }));
     expect(screen.getByRole('dialog', { name: '联系我们' })).not.toBeNull();
     expect(
@@ -861,6 +871,11 @@ describe('AI 游戏创作 App 界面边界', () => {
     expect(
       screen.getByRole('menuitem', { name: '会员与升级' }),
     ).not.toBeNull();
+    fireEvent.pointerDown(screen.getByLabelText('首页输入'));
+    expect(
+      screen.queryByRole('menuitem', { name: '会员与升级' }),
+    ).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: '我的' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '会员与升级' }));
     expect(screen.getByRole('dialog', { name: '会员与升级' })).not.toBeNull();
     expect(