feat: enhance UI store to manage active tab state and update related components for better navigation

experdot · experdot · commit 59a60720bfb8 · 2025-10-24T19:46:58.000+08:00
diff --git a/src/renderer/src/components/layout/Layout.tsx b/src/renderer/src/components/layout/Layout.tsx
@@ -15,9 +15,8 @@ const { Sider, Content } = AntLayout
 const NARROW_SCREEN_THRESHOLD = 768
 
 export default function Layout() {
-  const { sidebarCollapsed, sidebarWidth, toggleSidebar } = useUIStore()
+  const { sidebarCollapsed, sidebarWidth, activeTab, toggleSidebar, setActiveTab } = useUIStore()
   const { clearSearch, setFilterFolderId } = useSearchStore()
-  const [activeTab, setActiveTab] = useState<ActivityBarTab>('explore')
   const [searchOpen, setSearchOpen] = useState(false)
   const [isNarrowScreen, setIsNarrowScreen] = useState(false)
 
diff --git a/src/renderer/src/components/layout/sidebar_items/chat/ChatHistoryTree.tsx b/src/renderer/src/components/layout/sidebar_items/chat/ChatHistoryTree.tsx
@@ -52,6 +52,8 @@ export default function ChatHistoryTree({ onChatClick, onFindInFolder }: ChatHis
   // 添加虚拟滚动高度状态
   const [virtualHeight, setVirtualHeight] = useState(800)
   const treeContainerRef = useRef<HTMLDivElement>(null)
+  const treeRef = useRef<any>(null)
+  const lastSelectedNodeIdRef = useRef<string | null>(null)
 
   // 动态计算虚拟滚动高度
   useEffect(() => {
@@ -67,6 +69,44 @@ export default function ChatHistoryTree({ onChatClick, onFindInFolder }: ChatHis
     return () => window.removeEventListener('resize', calculateHeight)
   }, [])
 
+  // 展开父级文件夹并滚动到选中的节点
+  useEffect(() => {
+    // 只有当选中的节点真正改变时才执行滚动
+    if (selectedNodeId && selectedNodeType === 'chat' && selectedNodeId !== lastSelectedNodeIdRef.current) {
+      lastSelectedNodeIdRef.current = selectedNodeId
+
+      // 找到该聊天所在的文件夹链
+      const chat = pages.find((p) => p.id === selectedNodeId)
+      if (chat && chat.folderId) {
+        const foldersToExpand: string[] = []
+        let currentFolderId: string | undefined = chat.folderId
+
+        // 收集所有需要展开的父级文件夹
+        while (currentFolderId) {
+          foldersToExpand.push(currentFolderId)
+          const folder = folders.find((f) => f.id === currentFolderId)
+          currentFolderId = folder?.parentId
+        }
+
+        // 展开所有父级文件夹
+        foldersToExpand.forEach((folderId) => {
+          const folder = folders.find((f) => f.id === folderId)
+          if (folder && !folder.expanded) {
+            updateFolder(folderId, { expanded: true })
+          }
+        })
+      }
+
+      // 使用虚拟化Tree的scrollTo API滚动到选中的节点
+      setTimeout(() => {
+        const nodeKey = `chat-${selectedNodeId}`
+        if (treeRef.current && treeRef.current.scrollTo) {
+          treeRef.current.scrollTo({ key: nodeKey, align: 'auto' })
+        }
+      }, 300) // 增加延迟确保文件夹展开完成
+    }
+  }, [selectedNodeId, selectedNodeType, pages, folders, updateFolder])
+
   // 解析节点键，获取节点类型和ID
   const parseNodeKey = useCallback(
     (key: React.Key): { type: 'folder' | 'chat'; id: string } | null => {
@@ -704,6 +744,7 @@ export default function ChatHistoryTree({ onChatClick, onFindInFolder }: ChatHis
   return (
     <div ref={treeContainerRef} style={{ height: '100%' }}>
       <Tree
+        ref={treeRef}
         className="chat-history-tree"
         showIcon
         blockNode
diff --git a/src/renderer/src/components/layout/sidebar_items/favorites/FavoritesPanel.tsx b/src/renderer/src/components/layout/sidebar_items/favorites/FavoritesPanel.tsx
@@ -33,9 +33,62 @@ export default function FavoritesPanel() {
   const { selectedFavoriteId, selectedFavoriteType, setSelectedFavorite } = useUIStore()
 
   const [editingNodeKey, setEditingNodeKey] = useState<string | null>(null)
+  const treeRef = React.useRef<any>(null)
+  const lastSelectedFavoriteIdRef = React.useRef<string | null>(null)
 
   const stats = getStats()
 
+  // 展开父级文件夹并滚动到选中的节点
+  useEffect(() => {
+    // 只有当选中的节点真正改变时才执行滚动
+    if (selectedFavoriteId && selectedFavoriteType === 'item' && selectedFavoriteId !== lastSelectedFavoriteIdRef.current) {
+      lastSelectedFavoriteIdRef.current = selectedFavoriteId
+
+      // 找到该收藏项所在的文件夹链
+      const item = items.find((i) => i.id === selectedFavoriteId)
+      if (item && item.folderId) {
+        const foldersToExpand: string[] = []
+        let currentFolderId: string | undefined = item.folderId
+
+        // 收集所有需要展开的父级文件夹
+        while (currentFolderId) {
+          foldersToExpand.push(currentFolderId)
+          const folder = folders.find((f) => f.id === currentFolderId)
+          currentFolderId = folder?.parentId
+        }
+
+        // 展开所有父级文件夹
+        const { updateFolder } = useFavoritesStore.getState()
+        foldersToExpand.forEach((folderId) => {
+          const folder = folders.find((f) => f.id === folderId)
+          if (folder && !folder.expanded) {
+            updateFolder(folderId, { expanded: true })
+          }
+        })
+      }
+
+      // 滚动到选中的节点
+      setTimeout(() => {
+        const nodeKey = `item-${selectedFavoriteId}`
+
+        // 优先使用Tree的scrollTo API（如果可用）
+        if (treeRef.current && treeRef.current.scrollTo) {
+          treeRef.current.scrollTo({ key: nodeKey, align: 'auto' })
+        } else {
+          // 备用方案：使用DOM查询（适用于非虚拟化Tree）
+          let selectedNode =
+            document.querySelector(`.favorites-tree [data-node-key="${nodeKey}"]`) ||
+            document.querySelector(`.favorites-tree [data-key="${nodeKey}"]`) ||
+            document.querySelector(`.favorites-tree .ant-tree-treenode-selected`)
+
+          if (selectedNode) {
+            selectedNode.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+          }
+        }
+      }, 300) // 增加延迟确保文件夹展开完成
+    }
+  }, [selectedFavoriteId, selectedFavoriteType, items, folders])
+
   // 处理搜索
   const handleSearch = (value: string) => {
     setSearchQuery(value)
@@ -578,6 +631,7 @@ export default function FavoritesPanel() {
           />
         ) : (
           <Tree
+            ref={treeRef}
             className="favorites-tree"
             showIcon={false}
             blockNode
diff --git a/src/renderer/src/components/layout/tabs/TabsArea.tsx b/src/renderer/src/components/layout/tabs/TabsArea.tsx
@@ -322,13 +322,19 @@ export default function TabsArea() {
       setSelectedFavorite(favoriteId, 'item')
       // 清空聊天历史树的选中状态
       setSelectedNode(null, null)
+      // 切换到收藏夹侧边栏
+      const { setActiveTab: setSidebarTab } = useUIStore.getState()
+      setSidebarTab('favorites')
     } else {
       // 如果是普通页面，更新聊天历史树的选中状态
       const page = pages.find((p) => p.id === activeKey)
       if (page) {
         setSelectedNode(activeKey, 'chat')
         // 清空收藏面板的选中状态
         setSelectedFavorite(null, null)
+        // 切换到资源管理器侧边栏
+        const { setActiveTab: setSidebarTab } = useUIStore.getState()
+        setSidebarTab('explore')
       }
     }
   }
diff --git a/src/renderer/src/stores/uiStore.ts b/src/renderer/src/stores/uiStore.ts
@@ -18,6 +18,7 @@ export interface UIState {
   // 侧边栏状态
   sidebarCollapsed: boolean
   sidebarWidth: number
+  activeTab: 'explore' | 'search' | 'tasks' | 'favorites'
 
   // 消息折叠状态
   collapsedMessages: { [chatId: string]: string[] }
@@ -42,6 +43,7 @@ export interface UIActions {
   setSidebarWidth: (width: number) => void
   collapseSidebar: () => void
   expandSidebar: () => void
+  setActiveTab: (tab: 'explore' | 'search' | 'tasks' | 'favorites') => void
 
   // 消息折叠
   toggleMessageCollapse: (chatId: string, messageId: string) => void
@@ -67,6 +69,7 @@ const initialState: UIState = {
   selectedFavoriteType: null,
   sidebarCollapsed: false,
   sidebarWidth: 300,
+  activeTab: 'explore',
   collapsedMessages: {},
   allMessagesCollapsed: {},
   lineageDisplayCollapsed: {}
@@ -150,6 +153,12 @@ export const useUIStore = create<UIState & UIActions>()(
         })
       },
 
+      setActiveTab: (tab) => {
+        set((state) => {
+          state.activeTab = tab
+        })
+      },
+
       // 消息折叠
       toggleMessageCollapse: (chatId, messageId) => {
         try {
@@ -252,6 +261,7 @@ export const useUIStore = create<UIState & UIActions>()(
       selectedFavoriteType: state.selectedFavoriteType,
       sidebarCollapsed: state.sidebarCollapsed,
       sidebarWidth: state.sidebarWidth,
+      activeTab: state.activeTab,
       collapsedMessages: state.collapsedMessages,
       allMessagesCollapsed: state.allMessagesCollapsed
     }))
