refactor: Improve drag-and-drop functionality in ChatHistoryTree for better folder and chat ordering

experdot · experdot · commit d76cdc9bff5d · 2025-08-28T19:09:12.000+08:00
diff --git a/src/renderer/src/components/layout/sidebar_items/chat/ChatHistoryTree.tsx b/src/renderer/src/components/layout/sidebar_items/chat/ChatHistoryTree.tsx
@@ -140,7 +140,7 @@ export default function ChatHistoryTree({ onChatClick }: ChatHistoryTreeProps) {
       if (!dragNodeInfo || !dropNodeInfo) return
 
       const { dropPosition, dropToGap } = info
-
+      
       // 如果拖拽到文件夹内部（非gap位置）
       if (!dropToGap && dropNodeInfo.type === 'folder') {
         // 检查是否会形成循环引用（文件夹不能拖入自己的子文件夹中）
@@ -158,24 +158,39 @@ export default function ChatHistoryTree({ onChatClick }: ChatHistoryTreeProps) {
             console.warn('Cannot move folder: would create a cycle')
             return
           }
+        }
 
-          // 获取目标文件夹下的最大order值（包括文件夹和聊天）
-          const folderChildren = folders.filter((f) => f.parentId === dropNodeInfo.id)
-          const folderChats = pages.filter((chat) => chat.folderId === dropNodeInfo.id)
-          const allOrders = [
-            ...folderChildren.map((f) => f.order || 0),
-            ...folderChats.map((c) => c.order || 0)
-          ]
-          const maxOrder = allOrders.length > 0 ? Math.max(...allOrders) : 0
+        // 获取目标文件夹
+        const targetFolder = folders.find(f => f.id === dropNodeInfo.id)
+        
+        // 如果文件夹是展开的，且有子节点，根据dropPosition确定插入位置
+        // dropPosition为0表示放在文件夹内部作为第一个子节点
+        // 否则作为最后一个子节点
+        const folderChildren = folders.filter((f) => f.parentId === dropNodeInfo.id)
+          .map(f => ({ type: 'folder' as const, id: f.id, order: f.order || 0 }))
+        const folderChats = pages.filter((chat) => chat.folderId === dropNodeInfo.id && chat.type !== 'settings')
+          .map(c => ({ type: 'chat' as const, id: c.id, order: c.order || 0 }))
+        const allChildren = [...folderChildren, ...folderChats].sort((a, b) => a.order - b.order)
+        
+        let newOrder: number
+        
+        // 如果文件夹是展开的，且dropPosition为0，放在最前面
+        // 注意：Ant Design Tree的dropPosition在拖入文件夹时通常为0
+        if (targetFolder?.expanded && allChildren.length > 0) {
+          // 总是放在最前面，因为拖入文件夹通常意味着作为第一个子节点
+          newOrder = allChildren[0].order - 1000
+        } else if (allChildren.length > 0) {
+          // 如果文件夹未展开或dropPosition不为0，放在最后
+          newOrder = allChildren[allChildren.length - 1].order + 1000
+        } else {
+          // 文件夹为空，使用默认值
+          newOrder = 1000
+        }
 
-          moveFolder(dragNodeInfo.id, maxOrder + 1000, dropNodeInfo.id)
+        if (dragNodeInfo.type === 'folder') {
+          moveFolder(dragNodeInfo.id, newOrder, dropNodeInfo.id)
         } else if (dragNodeInfo.type === 'chat') {
-          // 将聊天移动到文件夹内，获取该文件夹下聊天的最大order值
-          const folderChats = pages.filter((chat) => chat.folderId === dropNodeInfo.id)
-          const maxOrder =
-            folderChats.length > 0 ? Math.max(...folderChats.map((chat) => chat.order || 0)) : 0
-
-          movePage(dragNodeInfo.id, dropNodeInfo.id, maxOrder + 1000)
+          movePage(dragNodeInfo.id, dropNodeInfo.id, newOrder)
         }
         return
       }
@@ -221,55 +236,68 @@ export default function ChatHistoryTree({ onChatClick }: ChatHistoryTreeProps) {
           }
         }
 
+        // 获取目标位置的所有同级节点（包括文件夹和聊天）
+        const allSiblings = [
+          ...folders
+            .filter((folder) => folder.parentId === targetParentId)
+            .map((folder) => ({ type: 'folder' as const, id: folder.id, order: folder.order || 0 })),
+          ...pages
+            .filter((chat) => chat.folderId === targetParentId && chat.type !== 'settings')
+            .map((chat) => ({ type: 'chat' as const, id: chat.id, order: chat.order || 0 }))
+        ]
+          .filter((item) => !(item.type === dragNodeInfo.type && item.id === dragNodeInfo.id)) // 排除拖拽节点自身
+          .sort((a, b) => a.order - b.order)
+
+        // 找到目标节点在同级节点中的位置
+        const dropIndex = allSiblings.findIndex(
+          (item) => item.type === dropNodeInfo.type && item.id === dropNodeInfo.id
+        )
+
         // 计算新的order值
         let newOrder: number = Date.now()
 
-        // 根据节点类型计算order
-        if (dragNodeInfo.type === 'chat') {
-          const siblings = pages
-            .filter((chat) => chat.folderId === targetParentId && chat.id !== dragNodeInfo.id)
-            .sort((a, b) => (a.order || 0) - (b.order || 0))
-
-          const dropIndex = siblings.findIndex((item) => item.id === dropNodeInfo.id)
-          if (dropIndex >= 0) {
-            if (dropPosition <= dropIndex) {
-              // 拖拽到前面
-              newOrder =
-                dropIndex === 0
-                  ? (siblings[0]?.order || 0) - 1000
-                  : ((siblings[dropIndex - 1]?.order || 0) + (siblings[dropIndex]?.order || 0)) / 2
+        if (dropIndex >= 0) {
+          // Ant Design Tree的dropPosition含义：
+          // - 相对于目标节点的位置索引
+          // - dropPosition === -1: 拖到目标节点上方
+          // - dropPosition === 1: 拖到目标节点下方
+          // - dropPosition > 1: 拖到更后面的位置
+          
+          // 判断是插入到目标节点的前面还是后面
+          const insertBefore = dropPosition === -1 || (dropPosition > 0 && dropPosition <= dropIndex)
+          
+          if (insertBefore) {
+            // 插入到目标节点前面
+            if (dropIndex === 0) {
+              // 插入到第一个位置
+              newOrder = allSiblings[0].order - 1000
             } else {
-              // 拖拽到后面
-              newOrder =
-                dropIndex === siblings.length - 1
-                  ? (siblings[dropIndex]?.order || 0) + 1000
-                  : ((siblings[dropIndex]?.order || 0) + (siblings[dropIndex + 1]?.order || 0)) / 2
+              // 插入到中间，取前一个节点和目标节点order的平均值
+              const prevOrder = allSiblings[dropIndex - 1].order
+              const currentOrder = allSiblings[dropIndex].order
+              newOrder = (prevOrder + currentOrder) / 2
             }
-          }
-
-          movePage(dragNodeInfo.id, targetParentId, newOrder)
-        } else if (dragNodeInfo.type === 'folder') {
-          const siblings = folders
-            .filter((folder) => folder.parentId === targetParentId && folder.id !== dragNodeInfo.id)
-            .sort((a, b) => (a.order || 0) - (b.order || 0))
-
-          const dropIndex = siblings.findIndex((item) => item.id === dropNodeInfo.id)
-          if (dropIndex >= 0) {
-            if (dropPosition <= dropIndex) {
-              // 拖拽到前面
-              newOrder =
-                dropIndex === 0
-                  ? (siblings[0]?.order || 0) - 1000
-                  : ((siblings[dropIndex - 1]?.order || 0) + (siblings[dropIndex]?.order || 0)) / 2
+          } else {
+            // 插入到目标节点后面
+            if (dropIndex === allSiblings.length - 1) {
+              // 插入到最后一个位置
+              newOrder = allSiblings[dropIndex].order + 1000
             } else {
-              // 拖拽到后面
-              newOrder =
-                dropIndex === siblings.length - 1
-                  ? (siblings[dropIndex]?.order || 0) + 1000
-                  : ((siblings[dropIndex]?.order || 0) + (siblings[dropIndex + 1]?.order || 0)) / 2
+              // 插入到中间，取目标节点和下一个节点order的平均值
+              const currentOrder = allSiblings[dropIndex].order
+              const nextOrder = allSiblings[dropIndex + 1].order
+              newOrder = (currentOrder + nextOrder) / 2
             }
           }
+        } else {
+          // 如果找不到目标节点，添加到末尾
+          newOrder = allSiblings.length > 0 ? allSiblings[allSiblings.length - 1].order + 1000 : 1000
+        }
 
+        // 根据拖拽节点类型移动节点
+        if (dragNodeInfo.type === 'chat') {
+          movePage(dragNodeInfo.id, targetParentId, newOrder)
+        } else if (dragNodeInfo.type === 'folder') {
           moveFolder(dragNodeInfo.id, newOrder, targetParentId)
         }
       }
@@ -280,55 +308,65 @@ export default function ChatHistoryTree({ onChatClick }: ChatHistoryTreeProps) {
   // 递归构建文件夹树
   const buildFolderTree = useCallback(
     (parentId?: string): DataNode[] => {
-      const result: DataNode[] = []
-
       // 获取指定父级下的文件夹
       const childFolders = folders
         .filter((folder) => folder.parentId === parentId)
-        .sort((a, b) => (a.order || 0) - (b.order || 0))
+        .map(folder => ({
+          type: 'folder' as const,
+          data: folder,
+          order: folder.order || 0
+        }))
 
       // 获取指定父级下的聊天（过滤掉设置页面）
       const chats = pages
         .filter((chat) => chat.folderId === parentId && chat.type !== 'settings')
-        .sort((a, b) => (a.order || 0) - (b.order || 0))
-
-      // 添加文件夹
-      childFolders.forEach((folder) => {
-        const folderChildren = buildFolderTree(folder.id)
-
-        result.push({
-          key: `folder-${folder.id}`,
-          title: (
-            <ChatHistoryTreeNode
-              type="folder"
-              data={folder}
-              onEdit={() => handleNodeEdit(folder.id, 'folder')}
-              onDelete={() => handleDeleteFolder(folder.id)}
-              onCreate={(type) => handleNodeCreate(folder.id, type)}
-              onSaveEdit={handleSaveEdit}
-            />
-          ),
-          checkable: false,
-          children: folderChildren
-        })
-      })
-
-      // 添加聊天
-      chats.forEach((chat) => {
-        result.push({
-          key: `chat-${chat.id}`,
-          title: (
-            <ChatHistoryTreeNode
-              type="chat"
-              data={chat}
-              onEdit={() => handleNodeEdit(chat.id, 'chat')}
-              onDelete={() => handleDeleteChat(chat.id)}
-              onChatClick={onChatClick}
-              onSaveEdit={handleSaveEdit}
-            />
-          ),
-          isLeaf: true
-        })
+        .map(chat => ({
+          type: 'chat' as const,
+          data: chat,
+          order: chat.order || 0
+        }))
+
+      // 合并文件夹和聊天，按order排序
+      const allItems = [...childFolders, ...chats].sort((a, b) => a.order - b.order)
+
+      // 构建树节点
+      const result: DataNode[] = allItems.map(item => {
+        if (item.type === 'folder') {
+          const folder = item.data as typeof folders[0]
+          const folderChildren = buildFolderTree(folder.id)
+
+          return {
+            key: `folder-${folder.id}`,
+            title: (
+              <ChatHistoryTreeNode
+                type="folder"
+                data={folder}
+                onEdit={() => handleNodeEdit(folder.id, 'folder')}
+                onDelete={() => handleDeleteFolder(folder.id)}
+                onCreate={(type) => handleNodeCreate(folder.id, type)}
+                onSaveEdit={handleSaveEdit}
+              />
+            ),
+            checkable: false,
+            children: folderChildren
+          }
+        } else {
+          const chat = item.data as typeof pages[0]
+          return {
+            key: `chat-${chat.id}`,
+            title: (
+              <ChatHistoryTreeNode
+                type="chat"
+                data={chat}
+                onEdit={() => handleNodeEdit(chat.id, 'chat')}
+                onDelete={() => handleDeleteChat(chat.id)}
+                onChatClick={onChatClick}
+                onSaveEdit={handleSaveEdit}
+              />
+            ),
+            isLeaf: true
+          }
+        }
       })
 
       return result
diff --git a/src/renderer/src/stores/pagesStore.ts b/src/renderer/src/stores/pagesStore.ts
@@ -247,7 +247,17 @@ export const usePagesStore = create<PagesState & PagesActions>()(
       // 文件夹管理
       createFolder: (name, parentId) => {
         try {
-          const newFolder = createNewFolder(name, parentId)
+          // 获取同级文件夹的最大order值
+          const siblingFolders = get().folders.filter(f => f.parentId === parentId)
+          const maxOrder = siblingFolders.length > 0 
+            ? Math.max(...siblingFolders.map(f => f.order || 0))
+            : 0
+          
+          const newFolder = {
+            ...createNewFolder(name, parentId),
+            order: maxOrder + 1000 // 新文件夹添加到最后
+          }
+          
           set((state) => {
             state.folders.push(newFolder)
           })
@@ -349,12 +359,21 @@ export const usePagesStore = create<PagesState & PagesActions>()(
       // 页面创建和打开
       createAndOpenChat: (title, folderId, lineage) => {
         try {
+          const timestamp = Date.now()
+          
+          // 获取同文件夹下的最大order值
+          const siblingPages = get().pages.filter(p => p.folderId === folderId)
+          const maxOrder = siblingPages.length > 0 
+            ? Math.max(...siblingPages.map(p => p.order || 0))
+            : 0
+          
           const newPage: Page = {
             id: uuidv4(),
             title,
             type: 'regular',
-            createdAt: Date.now(),
-            updatedAt: Date.now(),
+            createdAt: timestamp,
+            updatedAt: timestamp,
+            order: maxOrder + 1000, // 新节点添加到最后
             folderId,
             messages: [],
             messageMap: {},
@@ -383,10 +402,17 @@ export const usePagesStore = create<PagesState & PagesActions>()(
 
       createAndOpenCrosstabChat: (title, folderId, lineage) => {
         try {
+          // 获取同文件夹下的最大order值
+          const siblingPages = get().pages.filter(p => p.folderId === folderId)
+          const maxOrder = siblingPages.length > 0 
+            ? Math.max(...siblingPages.map(p => p.order || 0))
+            : 0
+          
           const newPage: Page = {
             title,
             folderId,
             ...createNewCrosstabChat(title, folderId, lineage),
+            order: maxOrder + 1000, // 新节点添加到最后
             ...(lineage && { lineage })
           }
 
@@ -409,12 +435,21 @@ export const usePagesStore = create<PagesState & PagesActions>()(
 
       createAndOpenObjectChat: (title, folderId, lineage) => {
         try {
+          const timestamp = Date.now()
+          
+          // 获取同文件夹下的最大order值
+          const siblingPages = get().pages.filter(p => p.folderId === folderId)
+          const maxOrder = siblingPages.length > 0 
+            ? Math.max(...siblingPages.map(p => p.order || 0))
+            : 0
+          
           const newPage: Page = {
             id: uuidv4(),
             title,
             type: 'object',
-            createdAt: Date.now(),
-            updatedAt: Date.now(),
+            createdAt: timestamp,
+            updatedAt: timestamp,
+            order: maxOrder + 1000, // 新节点添加到最后
             folderId,
             objectData: {
               rootNodeId: '',
