功能完善
This commit is contained in:
@@ -4,9 +4,17 @@ export default { name: "TreeEntry" };
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch, onMounted, onUnmounted } from "vue";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import ConfirmDialog from "./ConfirmDialog.vue";
|
||||
import PromptDialog from "./PromptDialog.vue";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
|
||||
interface DirEntry {
|
||||
name: string;
|
||||
@@ -65,54 +73,6 @@ const fileIcon = computed(() => {
|
||||
}
|
||||
});
|
||||
|
||||
// ── Menu ─────────────────────────────────────────────────
|
||||
const menuOpen = ref(false);
|
||||
const menuRef = ref<HTMLElement | null>(null);
|
||||
const rowRef = ref<HTMLElement | null>(null);
|
||||
const menuButtonRef = ref<HTMLElement | null>(null);
|
||||
const menuStyle = ref<Record<string, string>>({});
|
||||
|
||||
function toggleMenu(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
if (!menuOpen.value) {
|
||||
if (menuButtonRef.value) {
|
||||
const btnRect = menuButtonRef.value.getBoundingClientRect();
|
||||
const spaceBelow = window.innerHeight - btnRect.bottom;
|
||||
const left = Math.min(btnRect.left, window.innerWidth - 150);
|
||||
menuStyle.value = spaceBelow >= 140
|
||||
? {
|
||||
position: "fixed",
|
||||
top: `${btnRect.bottom + 2}px`,
|
||||
left: `${left}px`,
|
||||
}
|
||||
: {
|
||||
position: "fixed",
|
||||
bottom: `${window.innerHeight - btnRect.top + 2}px`,
|
||||
left: `${left}px`,
|
||||
};
|
||||
}
|
||||
}
|
||||
menuOpen.value = !menuOpen.value;
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
menuOpen.value = false;
|
||||
}
|
||||
|
||||
function onDocumentClick(e: MouseEvent) {
|
||||
if (menuRef.value && !menuRef.value.contains(e.target as Node)) {
|
||||
closeMenu();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener("click", onDocumentClick);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("click", onDocumentClick);
|
||||
});
|
||||
|
||||
// ── Prompt dialog state ──────────────────────────────────────
|
||||
const promptShow = ref(false);
|
||||
const promptTitle = ref("");
|
||||
@@ -149,21 +109,18 @@ function onPromptCancel() {
|
||||
|
||||
// ── Actions ─────────────────────────────────────────────────
|
||||
function handleCreateFolder() {
|
||||
closeMenu();
|
||||
openPrompt("新建文件夹", "", "输入文件夹名称", "", (name) => {
|
||||
emit("createFolder", props.entry.path + "/" + name);
|
||||
});
|
||||
}
|
||||
|
||||
function handleCreateFile() {
|
||||
closeMenu();
|
||||
openPrompt("新建 MD 文件", "", "输入文件名称（无需 .md 后缀）", "", (name) => {
|
||||
emit("createFile", props.entry.path + "/" + name + ".md");
|
||||
});
|
||||
}
|
||||
|
||||
function handleRename() {
|
||||
closeMenu();
|
||||
openPrompt("重命名", "", "输入新名称", props.entry.name, (newName) => {
|
||||
if (newName !== props.entry.name) {
|
||||
emit("renameEntry", props.entry.path, newName);
|
||||
@@ -177,7 +134,6 @@ const confirmTitle = ref("");
|
||||
const confirmMessage = ref("");
|
||||
|
||||
function handleDelete() {
|
||||
closeMenu();
|
||||
confirmTitle.value = props.entry.is_dir ? "删除文件夹" : "删除文件";
|
||||
confirmMessage.value = props.entry.is_dir
|
||||
? `确定要永久删除文件夹「${props.entry.name}」及其所有内容吗？此操作不可撤销。`
|
||||
@@ -231,7 +187,6 @@ function onClick() {
|
||||
<template v-if="entry.is_dir">
|
||||
<!-- Folder row -->
|
||||
<div
|
||||
ref="rowRef"
|
||||
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"
|
||||
@@ -243,45 +198,39 @@ function onClick() {
|
||||
<i class="tree-entry-icon ri-folder-2-line text-base shrink-0"></i>
|
||||
<span class="truncate flex-1 min-w-0">{{ entry.name }}</span>
|
||||
|
||||
<!-- More button -->
|
||||
<button
|
||||
ref="menuButtonRef"
|
||||
class="tree-more-btn shrink-0 ml-auto opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
type="button"
|
||||
title="更多操作"
|
||||
@click.stop="toggleMenu"
|
||||
>
|
||||
<i class="ri-more-line"></i>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="menuOpen"
|
||||
ref="menuRef"
|
||||
class="tree-dropdown"
|
||||
:style="menuStyle"
|
||||
<!-- More button + DropdownMenu -->
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
class="tree-more-btn shrink-0 ml-auto opacity-0 group-hover:opacity-100 transition-opacity focus-visible:opacity-100"
|
||||
title="更多操作"
|
||||
@click.stop
|
||||
>
|
||||
<button class="tree-dropdown-item" @click="handleCreateFolder">
|
||||
<i class="ri-folder-add-line"></i>
|
||||
<span>新建文件夹</span>
|
||||
</button>
|
||||
<button class="tree-dropdown-item" @click="handleCreateFile">
|
||||
<i class="ri-file-add-line"></i>
|
||||
<span>新建 MD 文件</span>
|
||||
</button>
|
||||
<button class="tree-dropdown-item" @click="handleRename">
|
||||
<i class="ri-edit-line"></i>
|
||||
<span>重命名</span>
|
||||
</button>
|
||||
<div class="tree-dropdown-sep"></div>
|
||||
<button class="tree-dropdown-item tree-dropdown-item-danger" @click="handleDelete">
|
||||
<i class="ri-delete-bin-line"></i>
|
||||
<span>删除文件夹</span>
|
||||
</button>
|
||||
</div>
|
||||
</Teleport>
|
||||
<i class="ri-more-line"></i>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent @click.stop>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem @click="handleCreateFolder">
|
||||
<i class="ri-folder-add-line"></i>
|
||||
<span>新建文件夹</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="handleCreateFile">
|
||||
<i class="ri-file-add-line"></i>
|
||||
<span>新建 MD 文件</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="handleRename">
|
||||
<i class="ri-edit-line"></i>
|
||||
<span>重命名</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem variant="destructive" @click="handleDelete">
|
||||
<i class="ri-delete-bin-line"></i>
|
||||
<span>删除文件夹</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<!-- Children (recursive) -->
|
||||
@@ -305,7 +254,6 @@ function onClick() {
|
||||
<!-- File -->
|
||||
<div
|
||||
v-else
|
||||
ref="rowRef"
|
||||
:class="[
|
||||
'tree-file flex items-center gap-1.5 px-2 py-1 rounded-md text-sm cursor-pointer transition-colors relative group',
|
||||
isActive
|
||||
@@ -318,37 +266,31 @@ function onClick() {
|
||||
<i :class="['tree-entry-icon', fileIcon, 'text-sm shrink-0']"></i>
|
||||
<span class="truncate flex-1 min-w-0">{{ entry.name }}</span>
|
||||
|
||||
<!-- More button -->
|
||||
<button
|
||||
ref="menuButtonRef"
|
||||
class="tree-more-btn shrink-0 ml-auto opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
type="button"
|
||||
title="更多操作"
|
||||
@click.stop="toggleMenu"
|
||||
>
|
||||
<i class="ri-more-line"></i>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="menuOpen"
|
||||
ref="menuRef"
|
||||
class="tree-dropdown"
|
||||
:style="menuStyle"
|
||||
<!-- More button + DropdownMenu -->
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
class="tree-more-btn shrink-0 ml-auto opacity-0 group-hover:opacity-100 transition-opacity focus-visible:opacity-100"
|
||||
title="更多操作"
|
||||
@click.stop
|
||||
>
|
||||
<button class="tree-dropdown-item" @click="handleRename">
|
||||
<i class="ri-edit-line"></i>
|
||||
<span>重命名</span>
|
||||
</button>
|
||||
<div class="tree-dropdown-sep"></div>
|
||||
<button class="tree-dropdown-item tree-dropdown-item-danger" @click="handleDelete">
|
||||
<i class="ri-delete-bin-line"></i>
|
||||
<span>删除</span>
|
||||
</button>
|
||||
</div>
|
||||
</Teleport>
|
||||
<i class="ri-more-line"></i>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent @click.stop>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem @click="handleRename">
|
||||
<i class="ri-edit-line"></i>
|
||||
<span>重命名</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem variant="destructive" @click="handleDelete">
|
||||
<i class="ri-delete-bin-line"></i>
|
||||
<span>删除</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -407,59 +349,4 @@ function onClick() {
|
||||
color: var(--app-text);
|
||||
}
|
||||
|
||||
/* ── Dropdown ───────────────────────────────── */
|
||||
.tree-dropdown {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
background: var(--app-surface);
|
||||
border: 1px solid var(--app-border-strong);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
min-width: 140px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.tree-dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--app-text);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tree-dropdown-item:hover {
|
||||
background-color: var(--app-hover);
|
||||
}
|
||||
|
||||
.tree-dropdown-item i {
|
||||
font-size: 15px;
|
||||
color: var(--app-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tree-dropdown-item-danger {
|
||||
color: #e53e3e;
|
||||
}
|
||||
|
||||
.tree-dropdown-item-danger i {
|
||||
color: #e53e3e;
|
||||
}
|
||||
|
||||
.tree-dropdown-item-danger:hover {
|
||||
background-color: #fff5f5;
|
||||
}
|
||||
|
||||
.tree-dropdown-sep {
|
||||
height: 1px;
|
||||
margin: 4px 6px;
|
||||
background: var(--app-border);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user