feat: implement responsive layout with Drawer for narrow screens and enhance ActivityBar with tooltip management

experdot · experdot · commit 4aaf1fd0b667 · 2025-10-19T23:21:50.000+08:00
diff --git a/src/renderer/src/components/layout/Layout.tsx b/src/renderer/src/components/layout/Layout.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Layout as AntLayout, Button, Tooltip } from 'antd'
+import { Layout as AntLayout, Button, Tooltip, Drawer } from 'antd'
 import { useUIStore } from '../../stores/uiStore'
 import { useSearchStore } from '../../stores/searchStore'
 import Sidebar from './sidebar/Sidebar'
@@ -11,11 +11,30 @@ import TitleBar from './titlebar/TitleBar'
 
 const { Sider, Content } = AntLayout
 
+// 定义窄屏幕的阈值
+const NARROW_SCREEN_THRESHOLD = 768
+
 export default function Layout() {
   const { sidebarCollapsed, sidebarWidth, toggleSidebar } = useUIStore()
   const { clearSearch, setFilterFolderId } = useSearchStore()
   const [activeTab, setActiveTab] = useState<ActivityBarTab>('explore')
   const [searchOpen, setSearchOpen] = useState(false)
+  const [isNarrowScreen, setIsNarrowScreen] = useState(false)
+
+  // 监听窗口大小变化
+  useEffect(() => {
+    const handleResize = () => {
+      setIsNarrowScreen(window.innerWidth < NARROW_SCREEN_THRESHOLD)
+    }
+
+    // 初始化
+    handleResize()
+
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
 
   // 处理键盘快捷键
   useEffect(() => {
@@ -46,10 +65,23 @@ export default function Layout() {
   }
 
   const handleActivityTabChange = (tab: ActivityBarTab) => {
-    setActiveTab(tab)
-    // 如果侧边栏折叠，自动展开
-    if (sidebarCollapsed) {
-      toggleSidebar()
+    // 如果点击的是当前已激活的标签
+    if (tab === activeTab) {
+      // 如果侧边栏是展开状态，则切换为收起
+      if (!sidebarCollapsed) {
+        toggleSidebar()
+      }
+      // 如果已经是收起状态，则展开（复用下面的逻辑）
+      else {
+        toggleSidebar()
+      }
+    } else {
+      // 点击的是不同的标签
+      setActiveTab(tab)
+      // 如果侧边栏折叠，自动展开
+      if (sidebarCollapsed) {
+        toggleSidebar()
+      }
     }
   }
 
@@ -70,36 +102,54 @@ export default function Layout() {
   return (
     <div className="app-layout">
       {/* 自定义标题栏 */}
-      <TitleBar
-        title="Pointer - AI聊天助手"
-        sidebarCollapsed={sidebarCollapsed}
-        onToggleSidebar={toggleSidebar}
-      />
+      <TitleBar title="Pointer - AI聊天助手" />
 
       <AntLayout className="app-main-layout">
         {/* ActivityBar */}
         <Sider width={64} collapsedWidth={64} theme="light" className="app-activity-bar">
           <ActivityBar activeTab={activeTab} onTabChange={handleActivityTabChange} />
         </Sider>
 
-        {/* Sidebar */}
-        <Sider
-          width={sidebarWidth}
-          collapsedWidth={0}
-          collapsed={sidebarCollapsed}
-          theme="light"
-          className="app-sider"
-          style={{ position: 'relative' }}
-        >
-          <Sidebar
+        {/* 窄屏模式：使用 Drawer */}
+        {isNarrowScreen ? (
+          <Drawer
+            placement="left"
+            open={!sidebarCollapsed}
+            onClose={toggleSidebar}
+            width={sidebarWidth}
+            styles={{ body: { padding: 0 } }}
+            mask={true}
+            maskClosable={true}
+            closable={false}
+          >
+            <Sidebar
+              collapsed={false}
+              activeTab={activeTab}
+              onSearchOpen={handleSearchOpen}
+              onSettingsOpen={handleSearchOpen}
+              onFindInFolder={handleFindInFolder}
+            />
+          </Drawer>
+        ) : (
+          /* 宽屏模式：使用 Sider */
+          <Sider
+            width={sidebarWidth}
+            collapsedWidth={0}
             collapsed={sidebarCollapsed}
-            activeTab={activeTab}
-            onSearchOpen={handleSearchOpen}
-            onSettingsOpen={handleSearchOpen}
-            onFindInFolder={handleFindInFolder}
-          />
-          <ResizeHandle />
-        </Sider>
+            theme="light"
+            className="app-sider"
+            style={{ position: 'relative' }}
+          >
+            <Sidebar
+              collapsed={sidebarCollapsed}
+              activeTab={activeTab}
+              onSearchOpen={handleSearchOpen}
+              onSettingsOpen={handleSearchOpen}
+              onFindInFolder={handleFindInFolder}
+            />
+            <ResizeHandle />
+          </Sider>
+        )}
 
         <Content className="app-content">
           <TabsArea />
diff --git a/src/renderer/src/components/layout/activitybar/ActivityBar.tsx b/src/renderer/src/components/layout/activitybar/ActivityBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Button, Badge, Tooltip } from 'antd'
 import {
   FolderOutlined,
@@ -25,6 +25,8 @@ export default function ActivityBar({ activeTab, onTabChange }: ActivityBarProps
   const { createAndOpenSettingsPage } = usePagesStore()
   const { openTab } = useTabsStore()
   const { getStats } = useFavoritesStore()
+  const [tooltipVisible, setTooltipVisible] = useState<Record<string, boolean>>({})
+  const [clickLocked, setClickLocked] = useState(false)
 
   // 计算活跃任务数量
   const activeTaskCount = getRunningTasksCount()
@@ -34,8 +36,12 @@ export default function ActivityBar({ activeTab, onTabChange }: ActivityBarProps
 
   // 处理设置按钮点击
   const handleSettingsClick = () => {
+    setClickLocked(true)
+    setTooltipVisible({ ...tooltipVisible, settings: false })
     const settingsPageId = createAndOpenSettingsPage('llm') // 默认打开LLM配置，因为这是用户最常需要的设置
     openTab(settingsPageId)
+    // 300ms 后解锁
+    setTimeout(() => setClickLocked(false), 300)
   }
 
   const items = [
@@ -66,24 +72,62 @@ export default function ActivityBar({ activeTab, onTabChange }: ActivityBarProps
     }
   ]
 
+  // 处理标签页点击
+  const handleTabClick = (tab: ActivityBarTab) => {
+    setClickLocked(true)
+    // 关闭所有 tooltip
+    const allClosed: Record<string, boolean> = {}
+    items.forEach(item => {
+      allClosed[item.key] = false
+    })
+    setTooltipVisible(allClosed)
+    onTabChange(tab)
+    // 300ms 后解锁
+    setTimeout(() => setClickLocked(false), 300)
+  }
+
+  // 处理 tooltip 显示变化
+  const handleTooltipOpenChange = (key: string, visible: boolean) => {
+    // 如果在点击锁定期间，不允许显示 tooltip
+    if (clickLocked && visible) {
+      return
+    }
+    setTooltipVisible({ ...tooltipVisible, [key]: visible })
+  }
+
   return (
     <div className="activity-bar">
       {items.map((item) => (
-        <Tooltip key={item.key} title={item.tooltip} placement="right">
+        <Tooltip
+          key={item.key}
+          title={item.tooltip}
+          placement="right"
+          mouseLeaveDelay={0}
+          destroyTooltipOnHide
+          open={tooltipVisible[item.key]}
+          onOpenChange={(visible) => handleTooltipOpenChange(item.key, visible)}
+        >
           <Badge count={item.badge} size="small" offset={[4, -4]}>
             <Button
               type={activeTab === item.key ? 'primary' : 'text'}
               size="large"
               icon={item.icon}
               className="activity-bar-button"
-              onClick={() => onTabChange(item.key)}
+              onClick={() => handleTabClick(item.key)}
             />
           </Badge>
         </Tooltip>
       ))}
 
       {/* 设置按钮独立处理 */}
-      <Tooltip title="设置 - 应用程序设置" placement="right">
+      <Tooltip
+        title="设置 - 应用程序设置"
+        placement="right"
+        mouseLeaveDelay={0}
+        destroyTooltipOnHide
+        open={tooltipVisible.settings}
+        onOpenChange={(visible) => handleTooltipOpenChange('settings', visible)}
+      >
         <Button
           type="text"
           size="large"
diff --git a/src/renderer/src/components/layout/activitybar/activitybar.css b/src/renderer/src/components/layout/activitybar/activitybar.css
@@ -6,4 +6,5 @@
   background: #fafafa;
   border-right: 1px solid #f0f0f0;
   gap: 4px;
+  height: 100%;
 }
diff --git a/src/renderer/src/components/layout/titlebar/TitleBar.tsx b/src/renderer/src/components/layout/titlebar/TitleBar.tsx
@@ -1,22 +1,19 @@
 import React, { useState, useEffect } from 'react'
 import { Button, Tooltip } from 'antd'
-import { 
-  MenuUnfoldOutlined, 
-  MenuFoldOutlined, 
-  MinusOutlined, 
-  BorderOutlined, 
+import {
+  MinusOutlined,
+  BorderOutlined,
   CloseOutlined,
-  CopyOutlined 
+  CopyOutlined,
+  SendOutlined
 } from '@ant-design/icons'
 import './titlebar.css'
 
 interface TitleBarProps {
   title: string
-  sidebarCollapsed: boolean
-  onToggleSidebar: () => void
 }
 
-export default function TitleBar({ title, sidebarCollapsed, onToggleSidebar }: TitleBarProps) {
+export default function TitleBar({ title }: TitleBarProps) {
   const [isMaximized, setIsMaximized] = useState(false)
   const [isMac, setIsMac] = useState(false)
 
@@ -65,14 +62,7 @@ export default function TitleBar({ title, sidebarCollapsed, onToggleSidebar }: T
     <div className={`custom-title-bar ${isMac ? 'mac' : ''}`}>
       <div className="title-bar-drag-region">
         <div className="title-bar-left">
-          <Tooltip title={sidebarCollapsed ? '展开侧边栏' : '收起侧边栏'}>
-            <Button
-              type="text"
-              icon={sidebarCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-              onClick={onToggleSidebar}
-              className="title-bar-button"
-            />
-          </Tooltip>
+          <SendOutlined className="title-bar-logo" />
           <h2 className="title-bar-title">{title}</h2>
         </div>
         {!isMac && (
diff --git a/src/renderer/src/components/layout/titlebar/titlebar.css b/src/renderer/src/components/layout/titlebar/titlebar.css
@@ -75,6 +75,11 @@
   color: #fff;
 }
 
+.title-bar-logo {
+  font-size: 16px;
+  padding: 0 16px;
+}
+
 .title-bar-title {
   margin: 0;
   font-size: 12px;
diff --git a/src/renderer/src/components/pages/chat/ChatHeader.tsx b/src/renderer/src/components/pages/chat/ChatHeader.tsx
@@ -152,11 +152,6 @@ export default function ChatHeader({
   ]
 
   const collapseOptions: MenuProps['items'] = [
-    {
-      key: 'collapse-all',
-      label: '折叠全部消息',
-      onClick: onCollapseAll
-    },
     {
       key: 'expand-all',
       label: '展开全部消息',
@@ -392,25 +387,17 @@ export default function ChatHeader({
         </div>
         <div className="chat-header-right">
           <Space>
-            {/* 消息树切换按钮 */}
-            {onToggleMessageTree && (
-              <Button
-                type="text"
-                size="small"
-                icon={<BranchesOutlined />}
-                onClick={onToggleMessageTree}
-                title={messageTreeCollapsed ? '展开消息树' : '收起消息树'}
-              >
-                消息树
-              </Button>
-            )}
             {/* 消息折叠/展开下拉按钮 */}
             {messages.length > 0 && (
-              <Dropdown menu={{ items: collapseOptions }} trigger={['click']}>
-                <Button type="text" size="small" icon={<DownOutlined />}>
-                  折叠展开
-                </Button>
-              </Dropdown>
+              <Dropdown.Button
+                type="text"
+                menu={{ items: collapseOptions }}
+                trigger={['click']}
+                onClick={onCollapseAll}
+                icon={<DownOutlined />}
+              >
+                折叠全部
+              </Dropdown.Button>
             )}
             <Dropdown menu={{ items: exportOptions }} trigger={['click']}>
               <Button icon={<ExportOutlined />} type="text">
@@ -419,8 +406,7 @@ export default function ChatHeader({
             </Dropdown>
             {/* 更多选项按钮 */}
             <Dropdown menu={{ items: moreOptions }} trigger={['click']}>
-              <Button type="text" size="small" icon={<MoreOutlined />}>
-                更多
+              <Button type="text" icon={<MoreOutlined />}>
               </Button>
             </Dropdown>
           </Space>
diff --git a/src/renderer/src/components/pages/chat/message-tree-sidebar.css b/src/renderer/src/components/pages/chat/message-tree-sidebar.css
@@ -72,7 +72,7 @@
 
 /* 侧边栏头部 */
 .tree-sidebar-header {
-  padding: 12px 16px;
+  padding: 12px 8px;
   border-bottom: 1px solid #e8e8e8;
   background: #fff;
   display: flex;

Original file line number	Diff line number	Diff line change
`@@ -6,4 +6,5 @@`
`6`	`6`	`background: #fafafa;`
`7`	`7`	`border-right: 1px solid #f0f0f0;`
`8`	`8`	`gap: 4px;`
	`9`	`+ height: 100%;`
`9`	`10`	`}`