feat: Add inline editing functionality to ChatHistoryTree and ChatHistoryTreeNode components

Author: experdot

src/renderer/src/components/layout/sidebar_items/chat/ChatHistoryTree.tsx

@@ -41,6 +41,9 @@ export default function ChatHistoryTree({ onChatClick }: ChatHistoryTreeProps) {
     clearCheckedNodes
   } = useUIStore()
   const { modal } = App.useApp()
+  
+  // 添加编辑状态管理
+  const [editingNodeKey, setEditingNodeKey] = useState<string | null>(null)
 
   // 解析节点键，获取节点类型和ID
   const parseNodeKey = useCallback(
@@ -345,6 +348,9 @@ export default function ChatHistoryTree({ onChatClick }: ChatHistoryTreeProps) {
                 onDelete={() => handleDeleteFolder(folder.id)}
                 onCreate={(type) => handleNodeCreate(folder.id, type)}
                 onSaveEdit={handleSaveEdit}
+                isEditing={editingNodeKey === `folder-${folder.id}`}
+                onStartEdit={() => setEditingNodeKey(`folder-${folder.id}`)}
+                onEndEdit={() => setEditingNodeKey(null)}
               />
             ),
             checkable: false,
@@ -362,6 +368,9 @@ export default function ChatHistoryTree({ onChatClick }: ChatHistoryTreeProps) {
                 onDelete={() => handleDeleteChat(chat.id)}
                 onChatClick={onChatClick}
                 onSaveEdit={handleSaveEdit}
+                isEditing={editingNodeKey === `chat-${chat.id}`}
+                onStartEdit={() => setEditingNodeKey(`chat-${chat.id}`)}
+                onEndEdit={() => setEditingNodeKey(null)}
               />
             ),
             isLeaf: true
@@ -475,7 +484,7 @@ export default function ChatHistoryTree({ onChatClick }: ChatHistoryTreeProps) {
       className="chat-history-tree"
       showIcon
       blockNode
-      draggable
+      draggable={!editingNodeKey}
       checkable={false}
       multiple
       expandedKeys={expandedKeys}

src/renderer/src/components/layout/sidebar_items/chat/ChatHistoryTreeNode.tsx

@@ -24,6 +24,8 @@ interface ChatHistoryTreeNodeProps {
   onCreate?: (type: 'folder' | 'chat') => void
   onChatClick?: (chatId: string) => void
   onSaveEdit?: (nodeId: string, nodeType: 'folder' | 'chat', newValue: string) => void
+  onStartEdit?: () => void
+  onEndEdit?: () => void
 }
 
 export default function ChatHistoryTreeNode({
@@ -34,7 +36,9 @@ export default function ChatHistoryTreeNode({
   onDelete,
   onCreate,
   onChatClick,
-  onSaveEdit
+  onSaveEdit,
+  onStartEdit,
+  onEndEdit
 }: ChatHistoryTreeNodeProps) {
   const [isHovered, setIsHovered] = useState(false)
   const [isInlineEditing, setIsInlineEditing] = useState(false)
@@ -56,18 +60,21 @@ export default function ChatHistoryTreeNode({
     const currentName = getName()
     setEditValue(currentName)
     setIsInlineEditing(true)
+    onStartEdit?.()
   }
 
   const handleSaveEdit = () => {
     if (editValue.trim() && onSaveEdit) {
       onSaveEdit(data.id, type, editValue.trim())
     }
     setIsInlineEditing(false)
+    onEndEdit?.()
   }
 
   const handleCancelEdit = () => {
     setIsInlineEditing(false)
     setEditValue('')
+    onEndEdit?.()
   }
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -187,6 +194,13 @@ export default function ChatHistoryTreeNode({
       onMouseLeave={() => setIsHovered(false)}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
+      draggable={false}
+      onMouseDown={(e) => {
+        // 阻止编辑状态下的拖动
+        if (isInlineEditing) {
+          e.stopPropagation()
+        }
+      }}
     >
       <div className="tree-node-content">
         <div className="tree-node-icon">{getIcon()}</div>
@@ -201,8 +215,12 @@ export default function ChatHistoryTreeNode({
               size="small"
               value={editValue}
               onChange={(e) => setEditValue(e.target.value)}
-              onBlur={handleSaveEdit}
+              onBlur={(e) => {
+                handleSaveEdit()
+              }}
               onKeyDown={handleKeyDown}
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={(e) => e.stopPropagation()}
               autoFocus
               style={{ width: '100%' }}
             />