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 SessionTreeNode from './SessionTreeNode.vue'
|
||||||
import ContextMenu from './ContextMenu.vue'
|
import ContextMenu from './ContextMenu.vue'
|
||||||
import type { ContextMenuItem } 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 treeStore = useSessionTreeStore()
|
||||||
const workspaceStore = useWorkspaceStore()
|
const workspaceStore = useWorkspaceStore()
|
||||||
@@ -18,6 +18,7 @@ const newFolderName = ref('')
|
|||||||
const showRenameDialog = ref(false)
|
const showRenameDialog = ref(false)
|
||||||
const renameNodeId = ref<string | null>(null)
|
const renameNodeId = ref<string | null>(null)
|
||||||
const renameValue = ref('')
|
const renameValue = ref('')
|
||||||
|
const allExpanded = ref(true)
|
||||||
|
|
||||||
// Search functionality
|
// Search functionality
|
||||||
const nodesRef = computed(() => treeStore.nodes)
|
const nodesRef = computed(() => treeStore.nodes)
|
||||||
@@ -175,6 +176,16 @@ function deleteNode(nodeId: string) {
|
|||||||
treeStore.deleteNode(nodeId)
|
treeStore.deleteNode(nodeId)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleExpandAll() {
|
||||||
|
if (allExpanded.value) {
|
||||||
|
treeStore.collapseAll()
|
||||||
|
allExpanded.value = false
|
||||||
|
} else {
|
||||||
|
treeStore.expandAll()
|
||||||
|
allExpanded.value = true
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -188,6 +199,16 @@ function deleteNode(nodeId: string) {
|
|||||||
<FolderPlus class="w-4 h-4" />
|
<FolderPlus class="w-4 h-4" />
|
||||||
文件夹
|
文件夹
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Search Bar -->
|
<!-- Search Bar -->
|
||||||
|
|||||||
@@ -212,5 +212,25 @@ export const useSessionTreeStore = defineStore('sessionTree', {
|
|||||||
this.renameNode(node.id, newName)
|
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