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:
liumangmang
2026-04-03 16:14:14 +08:00
parent cf7b564b3a
commit 4af11fb043
2 changed files with 42 additions and 1 deletions

View File

@@ -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 -->

View File

@@ -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()
},
},
})