feat: add keyboard shortcuts and context menu (Phase 6)

Phase 6 - Enhancements:
- Add useKeyboardShortcuts composable for global shortcuts
- Implement keyboard shortcuts: F2 (rename), Delete, Ctrl+N (new folder)
- Add ContextMenu component with positioning logic
- Implement right-click context menu for tree nodes
- Add rename dialog for nodes
- Support delete with confirmation
- Add "new subfolder" action for folders

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
liumangmang
2026-04-03 15:55:39 +08:00
parent caed481d23
commit e23ba1c3c9
4 changed files with 311 additions and 1 deletions

View File

@@ -13,6 +13,7 @@ interface Props {
const props = defineProps<Props>()
const emit = defineEmits<{
click: [nodeId: string]
contextmenu: [nodeId: string, event: MouseEvent]
}>()
const treeStore = useSessionTreeStore()
@@ -48,6 +49,10 @@ function handleClick() {
emit('click', props.node.id)
}
function handleContextMenu(event: MouseEvent) {
emit('contextmenu', props.node.id, event)
}
function handleDragStart(event: DragEvent) {
if (dragHandlers) {
event.dataTransfer!.effectAllowed = 'move'
@@ -93,6 +98,7 @@ function handleDragEnd() {
}"
:style="{ paddingLeft: `${level * 16 + 8}px` }"
@click="handleClick"
@contextmenu="handleContextMenu"
@dragstart="handleDragStart"
@dragover="handleDragOver"
@dragleave="handleDragLeave"
@@ -145,6 +151,7 @@ function handleDragEnd() {
:node="child"
:level="level + 1"
@click="emit('click', $event)"
@contextmenu="(nodeId, event) => emit('contextmenu', nodeId, event)"
/>
</template>
</div>