feat: support multi-select mode

experdot · experdot · commit d21ca60a7bf4 · 2026-01-19T09:45:49.000+08:00
diff --git a/src/renderer/src/components/layout/sidebar/Sidebar.tsx b/src/renderer/src/components/layout/sidebar/Sidebar.tsx
@@ -38,8 +38,16 @@ export default function Sidebar({
     deleteMultiplePages
   } = usePagesStore()
   const { openTab } = useTabsStore()
-  const { selectedNodeType, selectedNodeId, checkedNodeIds, setSelectedNode, clearCheckedNodes } =
-    useUIStore()
+  const {
+    selectedNodeType,
+    selectedNodeId,
+    checkedNodeIds,
+    isMultiSelectMode,
+    setSelectedNode,
+    clearCheckedNodes,
+    enterMultiSelectMode,
+    exitMultiSelectMode
+  } = useUIStore()
   const { filterFolderId } = useSearchStore()
   const { modal } = App.useApp()
 
@@ -106,8 +114,68 @@ export default function Sidebar({
 
   // 批量删除选中的聊天
   const handleBatchDelete = useCallback(() => {
-    // TODO
-  }, [checkedNodeIds, clearCheckedNodes, deleteMultiplePages])
+    if (checkedNodeIds.length === 0) return
+
+    // 解析选中的节点，分离聊天和文件夹
+    const chatIds: string[] = []
+    const folderIds: string[] = []
+
+    checkedNodeIds.forEach((nodeKey) => {
+      if (nodeKey.startsWith('chat-')) {
+        chatIds.push(nodeKey.replace('chat-', ''))
+      } else if (nodeKey.startsWith('folder-')) {
+        folderIds.push(nodeKey.replace('folder-', ''))
+      }
+    })
+
+    const totalCount = chatIds.length + folderIds.length
+    const description =
+      folderIds.length > 0
+        ? `确定要删除选中的 ${totalCount} 项吗？包含 ${chatIds.length} 个聊天和 ${folderIds.length} 个文件夹。文件夹中的所有内容也将被删除。此操作无法撤销。`
+        : `确定要删除选中的 ${chatIds.length} 个聊天吗？此操作无法撤销。`
+
+    modal.confirm({
+      title: '批量删除',
+      content: description,
+      okText: '确定删除',
+      cancelText: '取消',
+      okType: 'danger',
+      onOk() {
+        const { deleteFolder, deletePage } = usePagesStore.getState()
+
+        // 递归删除文件夹及其内容
+        const deleteRecursive = (folderId: string) => {
+          const currentState = usePagesStore.getState()
+          // 删除该文件夹下的所有聊天
+          const chatsToDelete = currentState.pages.filter(
+            (p) => p.folderId === folderId && p.type !== 'settings'
+          )
+          chatsToDelete.forEach((chat) => deletePage(chat.id))
+
+          // 递归删除子文件夹
+          const subFolders = currentState.folders.filter((f) => f.parentId === folderId)
+          subFolders.forEach((subFolder) => {
+            deleteRecursive(subFolder.id)
+            deleteFolder(subFolder.id)
+          })
+        }
+
+        // 先删除文件夹（包含递归删除内容）
+        folderIds.forEach((folderId) => {
+          deleteRecursive(folderId)
+          deleteFolder(folderId)
+        })
+
+        // 再删除独立的聊天
+        if (chatIds.length > 0) {
+          deleteMultiplePages(chatIds)
+        }
+
+        // 清空选中状态并退出多选模式
+        exitMultiSelectMode()
+      }
+    })
+  }, [checkedNodeIds, deleteMultiplePages, exitMultiSelectMode, modal])
 
   // 检查是否有选中的项目
   const hasCheckedItems = checkedNodeIds.length > 0
@@ -127,16 +195,21 @@ export default function Sidebar({
               <SidebarActions
                 collapsed={false}
                 hasCheckedItems={hasCheckedItems}
+                isMultiSelectMode={isMultiSelectMode}
                 onCreateChat={handleCreateChat}
                 onCreateCrosstabChat={handleCreateCrosstabChat}
                 onCreateObjectChat={handleCreateObjectChat}
                 onCreateFolder={handleCreateFolder}
                 onBatchDelete={handleBatchDelete}
+                onEnterMultiSelectMode={enterMultiSelectMode}
+                onExitMultiSelectMode={exitMultiSelectMode}
               />
             </div>
             <div className="sidebar-content">
-              {hasCheckedItems && (
-                <div className="multi-select-indicator">已选中 {checkedNodeIds.length} 项</div>
+              {isMultiSelectMode && (
+                <div className="multi-select-indicator">
+                  {hasCheckedItems ? `已选中 ${checkedNodeIds.length} 项` : '请勾选要操作的项目'}
+                </div>
               )}
               <ChatHistoryTree onChatClick={handleChatClick} onFindInFolder={onFindInFolder} />
             </div>
diff --git a/src/renderer/src/components/layout/sidebar/sidebar.css b/src/renderer/src/components/layout/sidebar/sidebar.css
@@ -62,3 +62,16 @@
   flex-direction: column;
   height: 100%;
 }
+
+.multi-select-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 12px;
+  margin-bottom: 8px;
+  background: #e6f4ff;
+  border: 1px solid #91caff;
+  border-radius: 4px;
+  color: #1677ff;
+  font-size: 12px;
+}
diff --git a/src/renderer/src/components/layout/sidebar_items/SidebarActions.tsx b/src/renderer/src/components/layout/sidebar_items/SidebarActions.tsx
@@ -7,27 +7,35 @@ import {
   DeleteOutlined,
   TableOutlined,
   BlockOutlined,
-  DownOutlined
+  DownOutlined,
+  CheckSquareOutlined,
+  CloseOutlined
 } from '@ant-design/icons'
 
 interface SidebarActionsProps {
   collapsed?: boolean
   hasCheckedItems?: boolean
+  isMultiSelectMode?: boolean
   onCreateChat: () => void
   onCreateCrosstabChat: () => void
   onCreateObjectChat: () => void
   onCreateFolder: () => void
   onBatchDelete?: () => void
+  onEnterMultiSelectMode?: () => void
+  onExitMultiSelectMode?: () => void
 }
 
 export default function SidebarActions({
   collapsed = false,
   hasCheckedItems = false,
+  isMultiSelectMode = false,
   onCreateChat,
   onCreateCrosstabChat,
   onCreateObjectChat,
   onCreateFolder,
-  onBatchDelete
+  onBatchDelete,
+  onEnterMultiSelectMode,
+  onExitMultiSelectMode
 }: SidebarActionsProps) {
   const createOptions: MenuProps['items'] = [
     {
@@ -47,6 +55,15 @@ export default function SidebarActions({
       label: '新建文件夹',
       icon: <FolderAddOutlined />,
       onClick: onCreateFolder
+    },
+    {
+      type: 'divider'
+    },
+    {
+      key: 'multiselect',
+      label: isMultiSelectMode ? '退出多选模式' : '进入多选模式',
+      icon: isMultiSelectMode ? <CloseOutlined /> : <CheckSquareOutlined />,
+      onClick: isMultiSelectMode ? onExitMultiSelectMode : onEnterMultiSelectMode
     }
   ]
   if (collapsed) {
diff --git a/src/renderer/src/components/layout/sidebar_items/chat/ChatHistoryTree.tsx b/src/renderer/src/components/layout/sidebar_items/chat/ChatHistoryTree.tsx
@@ -40,6 +40,7 @@ export default function ChatHistoryTree({ onChatClick, onFindInFolder }: ChatHis
     selectedNodeId,
     selectedNodeType,
     checkedNodeIds,
+    isMultiSelectMode,
     setSelectedNode,
     setCheckedNodes,
     clearCheckedNodes
@@ -736,6 +737,19 @@ export default function ChatHistoryTree({ onChatClick, onFindInFolder }: ChatHis
     ]
   )
 
+  // 处理多选模式下的勾选事件
+  const handleCheck = useCallback(
+    (
+      checked: React.Key[] | { checked: React.Key[]; halfChecked: React.Key[] },
+      info: { checked: boolean; checkedNodes: any[]; node: any; event: 'check'; halfCheckedKeys?: React.Key[] }
+    ) => {
+      // 处理 checked 可能是数组或对象的情况
+      const checkedKeys = Array.isArray(checked) ? checked : checked.checked
+      setCheckedNodes(checkedKeys.map(String))
+    },
+    [setCheckedNodes]
+  )
+
   const expandedKeys = useMemo(
     () => folders.filter((f) => f.expanded).map((f) => `folder-${f.id}`),
     [folders]
@@ -748,15 +762,17 @@ export default function ChatHistoryTree({ onChatClick, onFindInFolder }: ChatHis
         className="chat-history-tree"
         showIcon
         blockNode
-        draggable={!editingNodeKey}
-        checkable={false}
+        draggable={!editingNodeKey && !isMultiSelectMode}
+        checkable={isMultiSelectMode}
         multiple
         virtual
         height={virtualHeight}
         expandedKeys={expandedKeys}
         selectedKeys={checkedNodeIds.length > 0 ? checkedKeys : selectedKeys}
+        checkedKeys={isMultiSelectMode ? checkedNodeIds : undefined}
         treeData={treeData}
         onSelect={handleTreeSelect}
+        onCheck={handleCheck}
         onDrop={handleDrop}
         allowDrop={({ dropNode, dragNode, dropPosition }) => {
           const dragNodeInfo = parseNodeKey(dragNode.key)
diff --git a/src/renderer/src/stores/uiStore.ts b/src/renderer/src/stores/uiStore.ts
@@ -10,6 +10,7 @@ export interface UIState {
   selectedNodeId: string | null
   selectedNodeType: 'folder' | 'chat' | null
   checkedNodeIds: string[]
+  isMultiSelectMode: boolean
 
   // 收藏面板选中状态
   selectedFavoriteId: string | null
@@ -34,6 +35,8 @@ export interface UIActions {
   setCheckedNodes: (nodeIds: string[]) => void
   clearCheckedNodes: () => void
   toggleNodeCheck: (nodeId: string) => void
+  enterMultiSelectMode: () => void
+  exitMultiSelectMode: () => void
 
   // 收藏面板选择
   setSelectedFavorite: (favoriteId: string | null, favoriteType: 'folder' | 'item' | null) => void
@@ -65,6 +68,7 @@ const initialState: UIState = {
   selectedNodeId: null,
   selectedNodeType: null,
   checkedNodeIds: [],
+  isMultiSelectMode: false,
   selectedFavoriteId: null,
   selectedFavoriteType: null,
   sidebarCollapsed: false,
@@ -116,6 +120,20 @@ export const useUIStore = create<UIState & UIActions>()(
         })
       },
 
+      enterMultiSelectMode: () => {
+        set((state) => {
+          state.isMultiSelectMode = true
+          state.checkedNodeIds = []
+        })
+      },
+
+      exitMultiSelectMode: () => {
+        set((state) => {
+          state.isMultiSelectMode = false
+          state.checkedNodeIds = []
+        })
+      },
+
       // 收藏面板选择
       setSelectedFavorite: (favoriteId, favoriteType) => {
         set((state) => {
@@ -239,6 +257,7 @@ export const useUIStore = create<UIState & UIActions>()(
           state.selectedNodeId = null
           state.selectedNodeType = null
           state.checkedNodeIds = []
+          state.isMultiSelectMode = false
           state.selectedFavoriteId = null
           state.selectedFavoriteType = null
           state.collapsedMessages = {}
