aux-panel代码优化

src/components/layout/aux-panel.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useState } from "react"
 import { FileDiff, Folder, FolderPen, GitCommit } from "lucide-react"
 import { useTranslations } from "next-intl"
 import {
@@ -13,42 +13,23 @@ import { GitChangesTab } from "./aux-panel-git-changes-tab"
 import { GitLogTab } from "./aux-panel-git-log-tab"
 import { SessionFilesTab } from "./aux-panel-session-files-tab"
 
+const LAZY_TABS: AuxPanelTab[] = ["file_tree", "changes", "git_log"]
+
 export function AuxPanel() {
   const t = useTranslations("Folder.auxPanel.tabs")
   const { isOpen, activeTab, setActiveTab } = useAuxPanelContext()
-  const [hasMountedFileTree, setHasMountedFileTree] = useState(
+  const [mountedTabs, setMountedTabs] = useState<Set<AuxPanelTab>>(
-    activeTab === "file_tree"
+    () => new Set(LAZY_TABS.filter((tab) => tab === activeTab))
-  )
-  const [hasMountedChanges, setHasMountedChanges] = useState(
-    activeTab === "changes"
-  )
-  const [hasMountedGitLog, setHasMountedGitLog] = useState(
-    activeTab === "git_log"
   )
 
-  // Sync mount flags when activeTab changes programmatically (e.g. revealInFileTree).
+  // Ensure the active tab is mounted (covers both user clicks and programmatic changes)
-  /* eslint-disable react-hooks/set-state-in-effect */
+  if (isOpen && LAZY_TABS.includes(activeTab) && !mountedTabs.has(activeTab)) {
-  useEffect(() => {
+    setMountedTabs((prev) => new Set(prev).add(activeTab))
-    if (!isOpen) return
+  }
-    if (activeTab === "file_tree") setHasMountedFileTree(true)
-    else if (activeTab === "changes") setHasMountedChanges(true)
-    else if (activeTab === "git_log") setHasMountedGitLog(true)
-  }, [isOpen, activeTab])
-  /* eslint-enable react-hooks/set-state-in-effect */
 
   const handleTabValueChange = useCallback(
     (value: string) => {
-      const nextTab = value as AuxPanelTab
+      setActiveTab(value as AuxPanelTab)
-      setActiveTab(nextTab)
-      if (nextTab === "file_tree") {
-        setHasMountedFileTree(true)
-      }
-      if (nextTab === "changes") {
-        setHasMountedChanges(true)
-      }
-      if (nextTab === "git_log") {
-        setHasMountedGitLog(true)
-      }
     },
     [setActiveTab]
   )
@@ -107,21 +88,21 @@ export function AuxPanel() {
           forceMount
           className="mt-0 flex-1 min-h-0 overflow-hidden"
         >
-          {hasMountedFileTree ? <FileTreeTab /> : null}
+          {mountedTabs.has("file_tree") ? <FileTreeTab /> : null}
         </TabsContent>
         <TabsContent
           value="changes"
           forceMount
           className="mt-0 flex-1 min-h-0 overflow-hidden"
         >
-          {hasMountedChanges ? <GitChangesTab /> : null}
+          {mountedTabs.has("changes") ? <GitChangesTab /> : null}
         </TabsContent>
         <TabsContent
           value="git_log"
           forceMount
           className="mt-0 flex-1 min-h-0 overflow-hidden"
         >
-          {hasMountedGitLog ? <GitLogTab /> : null}
+          {mountedTabs.has("git_log") ? <GitLogTab /> : null}
         </TabsContent>
       </Tabs>
     </aside>