完善功能
This commit is contained in:
@@ -4,7 +4,7 @@ export default { name: "TreeEntry" };
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { computed, onBeforeUnmount, ref, watch } from "vue";
|
||||
import ConfirmDialog from "./ConfirmDialog.vue";
|
||||
import PromptDialog from "./PromptDialog.vue";
|
||||
import {
|
||||
@@ -23,6 +23,8 @@ interface DirEntry {
|
||||
children?: DirEntry[];
|
||||
}
|
||||
|
||||
const TREE_CONTEXT_MENU_CLOSE_EVENT = "yurou-tree-context-menu-close";
|
||||
|
||||
const props = defineProps<{
|
||||
entry: DirEntry;
|
||||
depth: number;
|
||||
@@ -39,6 +41,44 @@ const emit = defineEmits<{
|
||||
}>();
|
||||
|
||||
const expanded = ref(true);
|
||||
const contextMenuOpen = ref(false);
|
||||
const contextMenuPoint = ref<{ x: number; y: number } | null>(null);
|
||||
const contextMenuStyle = computed(() => {
|
||||
if (!contextMenuPoint.value) return {};
|
||||
return {
|
||||
left: `${contextMenuPoint.value.x}px`,
|
||||
top: `${contextMenuPoint.value.y}px`,
|
||||
};
|
||||
});
|
||||
|
||||
watch(contextMenuOpen, (open) => {
|
||||
if (!open) {
|
||||
contextMenuPoint.value = null;
|
||||
document.removeEventListener("click", closeContextMenu);
|
||||
document.removeEventListener("keydown", onContextMenuKeydown);
|
||||
document.removeEventListener(TREE_CONTEXT_MENU_CLOSE_EVENT, closeContextMenu);
|
||||
} else {
|
||||
setTimeout(() => document.addEventListener("click", closeContextMenu), 0);
|
||||
document.addEventListener("keydown", onContextMenuKeydown);
|
||||
document.addEventListener(TREE_CONTEXT_MENU_CLOSE_EVENT, closeContextMenu);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener("click", closeContextMenu);
|
||||
document.removeEventListener("keydown", onContextMenuKeydown);
|
||||
document.removeEventListener(TREE_CONTEXT_MENU_CLOSE_EVENT, closeContextMenu);
|
||||
});
|
||||
|
||||
function closeContextMenu() {
|
||||
contextMenuOpen.value = false;
|
||||
}
|
||||
|
||||
function onContextMenuKeydown(event: KeyboardEvent) {
|
||||
if (event.key === "Escape") {
|
||||
closeContextMenu();
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-expand when children are loaded for the first time
|
||||
watch(
|
||||
@@ -109,18 +149,21 @@ function onPromptCancel() {
|
||||
|
||||
// ── Actions ─────────────────────────────────────────────────
|
||||
function handleCreateFolder() {
|
||||
closeContextMenu();
|
||||
openPrompt("新建文件夹", "", "输入文件夹名称", "", (name) => {
|
||||
emit("createFolder", props.entry.path + "/" + name);
|
||||
});
|
||||
}
|
||||
|
||||
function handleCreateFile() {
|
||||
closeContextMenu();
|
||||
openPrompt("新建 MD 文件", "", "输入文件名称（无需 .md 后缀）", "", (name) => {
|
||||
emit("createFile", props.entry.path + "/" + name + ".md");
|
||||
});
|
||||
}
|
||||
|
||||
function handleRename() {
|
||||
closeContextMenu();
|
||||
openPrompt("重命名", "", "输入新名称", props.entry.name, (newName) => {
|
||||
if (newName !== props.entry.name) {
|
||||
emit("renameEntry", props.entry.path, newName);
|
||||
@@ -134,6 +177,7 @@ const confirmTitle = ref("");
|
||||
const confirmMessage = ref("");
|
||||
|
||||
function handleDelete() {
|
||||
closeContextMenu();
|
||||
confirmTitle.value = props.entry.is_dir ? "删除文件夹" : "删除文件";
|
||||
confirmMessage.value = props.entry.is_dir
|
||||
? `确定要永久删除文件夹「${props.entry.name}」及其所有内容吗？此操作不可撤销。`
|
||||
@@ -158,6 +202,14 @@ function onClick() {
|
||||
emit("openFile", props.entry.path);
|
||||
}
|
||||
}
|
||||
|
||||
function onContextMenu(event: MouseEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
document.dispatchEvent(new Event(TREE_CONTEXT_MENU_CLOSE_EVENT));
|
||||
contextMenuPoint.value = { x: event.clientX, y: event.clientY };
|
||||
contextMenuOpen.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -184,12 +236,68 @@ function onClick() {
|
||||
@cancel="onPromptCancel"
|
||||
/>
|
||||
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="contextMenuOpen"
|
||||
class="tree-context-menu"
|
||||
:style="contextMenuStyle"
|
||||
role="menu"
|
||||
@click.stop
|
||||
@contextmenu.prevent.stop
|
||||
>
|
||||
<template v-if="entry.is_dir">
|
||||
<button
|
||||
class="tree-context-menu-item"
|
||||
type="button"
|
||||
role="menuitem"
|
||||
@click="handleCreateFolder"
|
||||
>
|
||||
<i class="ri-folder-add-line"></i>
|
||||
<span>新建文件夹</span>
|
||||
</button>
|
||||
<button
|
||||
class="tree-context-menu-item"
|
||||
type="button"
|
||||
role="menuitem"
|
||||
@click="handleCreateFile"
|
||||
>
|
||||
<i class="ri-file-add-line"></i>
|
||||
<span>新建 MD 文件</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<button
|
||||
class="tree-context-menu-item"
|
||||
type="button"
|
||||
role="menuitem"
|
||||
@click="handleRename"
|
||||
>
|
||||
<i class="ri-edit-line"></i>
|
||||
<span>重命名</span>
|
||||
</button>
|
||||
|
||||
<div class="tree-context-menu-separator"></div>
|
||||
|
||||
<button
|
||||
class="tree-context-menu-item tree-context-menu-item-danger"
|
||||
type="button"
|
||||
role="menuitem"
|
||||
@click="handleDelete"
|
||||
>
|
||||
<i class="ri-delete-bin-line"></i>
|
||||
<span>{{ entry.is_dir ? "删除文件夹" : "删除" }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<template v-if="entry.is_dir">
|
||||
<!-- Folder row -->
|
||||
<div
|
||||
data-tree-entry
|
||||
class="tree-folder flex items-center gap-1 px-2 py-1 rounded-md text-sm cursor-pointer select-none relative group"
|
||||
:style="{ paddingLeft: `${depth * 16 + 8}px` }"
|
||||
@click="onClick"
|
||||
@contextmenu="onContextMenu"
|
||||
>
|
||||
<i
|
||||
class="tree-arrow ri-arrow-right-s-line text-sm transition-transform shrink-0"
|
||||
@@ -253,6 +361,7 @@ function onClick() {
|
||||
|
||||
<!-- File -->
|
||||
<div
|
||||
data-tree-entry
|
||||
v-else
|
||||
:class="[
|
||||
'tree-file flex items-center gap-1.5 px-2 py-1 rounded-md text-sm cursor-pointer transition-colors relative group',
|
||||
@@ -262,6 +371,7 @@ function onClick() {
|
||||
]"
|
||||
:style="{ paddingLeft: `${depth * 16 + 8}px` }"
|
||||
@click="onClick"
|
||||
@contextmenu="onContextMenu"
|
||||
>
|
||||
<i :class="['tree-entry-icon', fileIcon, 'text-sm shrink-0']"></i>
|
||||
<span class="truncate flex-1 min-w-0">{{ entry.name }}</span>
|
||||
@@ -349,4 +459,64 @@ function onClick() {
|
||||
color: var(--app-text);
|
||||
}
|
||||
|
||||
.tree-context-menu {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
min-width: 128px;
|
||||
overflow: hidden;
|
||||
padding: 4px;
|
||||
border: 1px solid color-mix(in srgb, var(--app-border-strong) 76%, transparent);
|
||||
border-radius: 8px;
|
||||
background: var(--app-surface);
|
||||
color: var(--app-text-soft);
|
||||
box-shadow:
|
||||
0 14px 34px color-mix(in srgb, var(--app-shadow) 70%, transparent),
|
||||
0 1px 4px color-mix(in srgb, var(--app-shadow) 70%, transparent);
|
||||
}
|
||||
|
||||
.tree-context-menu-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 8px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tree-context-menu-item:hover {
|
||||
background: var(--app-hover);
|
||||
color: var(--app-text);
|
||||
}
|
||||
|
||||
.tree-context-menu-item i {
|
||||
color: var(--app-muted);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.tree-context-menu-item-danger {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.tree-context-menu-item-danger i {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.tree-context-menu-item-danger:hover {
|
||||
background: color-mix(in srgb, #dc2626 10%, transparent);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.tree-context-menu-separator {
|
||||
height: 1px;
|
||||
margin: 4px -4px;
|
||||
background: var(--app-border);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user