feat: add expand/collapse all functionality
- Add expandAll() and collapseAll() methods to sessionTree store - Add toggle button in toolbar to expand/collapse all folders - Track expansion state with allExpanded ref - Improve toolbar layout with flex spacing Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -8,7 +8,7 @@ import { useTreeSearch } from '../composables/useTreeSearch'
|
||||
import SessionTreeNode from './SessionTreeNode.vue'
|
||||
import ContextMenu from './ContextMenu.vue'
|
||||
import type { ContextMenuItem } from './ContextMenu.vue'
|
||||
import { FolderPlus, Edit2, Trash2, Search, X } from 'lucide-vue-next'
|
||||
import { FolderPlus, Edit2, Trash2, Search, X, ChevronDown, ChevronRight } from 'lucide-vue-next'
|
||||
|
||||
const treeStore = useSessionTreeStore()
|
||||
const workspaceStore = useWorkspaceStore()
|
||||
@@ -18,6 +18,7 @@ const newFolderName = ref('')
|
||||
const showRenameDialog = ref(false)
|
||||
const renameNodeId = ref<string | null>(null)
|
||||
const renameValue = ref('')
|
||||
const allExpanded = ref(true)
|
||||
|
||||
// Search functionality
|
||||
const nodesRef = computed(() => treeStore.nodes)
|
||||
@@ -175,6 +176,16 @@ function deleteNode(nodeId: string) {
|
||||
treeStore.deleteNode(nodeId)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleExpandAll() {
|
||||
if (allExpanded.value) {
|
||||
treeStore.collapseAll()
|
||||
allExpanded.value = false
|
||||
} else {
|
||||
treeStore.expandAll()
|
||||
allExpanded.value = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -188,6 +199,16 @@ function deleteNode(nodeId: string) {
|
||||
<FolderPlus class="w-4 h-4" />
|
||||
文件夹
|
||||
</button>
|
||||
|
||||
<div class="flex-1" />
|
||||
|
||||
<button
|
||||
@click="toggleExpandAll"
|
||||
class="flex items-center gap-1 px-2 py-1.5 rounded text-xs text-slate-400 hover:text-slate-200 hover:bg-slate-800 transition-colors"
|
||||
:title="allExpanded ? '折叠全部' : '展开全部'"
|
||||
>
|
||||
<component :is="allExpanded ? ChevronDown : ChevronRight" class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search Bar -->
|
||||
|
||||
@@ -212,5 +212,25 @@ export const useSessionTreeStore = defineStore('sessionTree', {
|
||||
this.renameNode(node.id, newName)
|
||||
}
|
||||
},
|
||||
|
||||
// Expand all folders
|
||||
expandAll() {
|
||||
this.nodes.forEach(node => {
|
||||
if (node.type === 'folder') {
|
||||
node.expanded = true
|
||||
}
|
||||
})
|
||||
this.persist()
|
||||
},
|
||||
|
||||
// Collapse all folders
|
||||
collapseAll() {
|
||||
this.nodes.forEach(node => {
|
||||
if (node.type === 'folder') {
|
||||
node.expanded = false
|
||||
}
|
||||
})
|
||||
this.persist()
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user