丰富目录树功能

2026-07-10 11:27:11 +08:00
parent 997cb7fdf1
commit d56b7d52bf
9 changed files with 567 additions and 12 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -805,6 +805,51 @@ async function onToggleFolder(path: string) {
  }
 }

+async function onCreateFolder(path: string) {
+  try {
+    await invoke("create_folder", { path });
+  } catch (e) {
+    console.error("Failed to create folder:", e);
+  }
+  scheduleWorkspaceRefresh();
+}
+
+async function onCreateFile(path: string) {
+  try {
+    await invoke("create_file", { path });
+  } catch (e) {
+    console.error("Failed to create file:", e);
+  }
+  scheduleWorkspaceRefresh();
+}
+
+async function onDeleteEntry(path: string) {
+  try {
+    await invoke("delete_entry", { path });
+  } catch (e) {
+    console.error("Failed to delete entry:", e);
+  }
+  // Close the file if it's the one being deleted
+  if (currentFilePath.value != null && getWorkspaceIdentity(currentFilePath.value) === getWorkspaceIdentity(path)) {
+    resetMarkdownEditorState();
+    currentFilePath.value = null;
+  }
+  scheduleWorkspaceRefresh();
+}
+
+async function onRenameEntry(path: string, newName: string) {
+  try {
+    const newPath = await invoke<string>("rename_entry", { path, newName });
+    // Update current file path if it was renamed
+    if (currentFilePath.value != null && getWorkspaceIdentity(currentFilePath.value) === getWorkspaceIdentity(path)) {
+      currentFilePath.value = newPath;
+    }
+  } catch (e) {
+    console.error("Failed to rename entry:", e);
+  }
+  scheduleWorkspaceRefresh();
+}
+
 async function onOpenFile(path: string) {
  const fileType = getWorkspaceFileType(path);
  if (fileType === "image" || fileType === "video") {
@@ -960,6 +1005,10 @@ registerTauriListener("menu-event", (event) => {
          @remove-workspace="removeRecentWorkspace"
          @toggle-folder="onToggleFolder"
          @open-file="onOpenFile"
+          @create-folder="onCreateFolder"
+          @create-file="onCreateFile"
+          @delete-entry="onDeleteEntry"
+          @rename-entry="onRenameEntry"
          @update-default-document-mode="updateDefaultDocumentMode"
          @update-app-theme="updateAppTheme"
      />
--- a/src/components/ConfirmDialog.vue
+++ b/src/components/ConfirmDialog.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+
+withDefaults(
+  defineProps<{
+    show: boolean;
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    danger?: boolean;
+  }>(),
+  {
+    confirmText: "确认",
+    cancelText: "取消",
+    danger: false,
+  },
+);
+
+const emit = defineEmits<{
+  confirm: [];
+  cancel: [];
+}>();
+
+function onOverlayKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape") {
+    emit("cancel");
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="show"
+      class="confirm-overlay"
+      role="presentation"
+      @click.self="emit('cancel')"
+      @keydown="onOverlayKeydown"
+    >
+      <section
+        class="confirm-shell"
+        role="alertdialog"
+        aria-modal="true"
+        :aria-label="title"
+      >
+        <header class="confirm-header">
+          <h2>{{ title }}</h2>
+        </header>
+
+        <p class="confirm-message">{{ message }}</p>
+
+        <footer class="confirm-footer">
+          <button
+            class="confirm-btn confirm-btn-cancel"
+            type="button"
+            @click="emit('cancel')"
+          >
+            {{ cancelText }}
+          </button>
+          <button
+            class="confirm-btn"
+            :class="danger ? 'confirm-btn-danger' : 'confirm-btn-primary'"
+            type="button"
+            @click="emit('confirm')"
+          >
+            {{ confirmText }}
+          </button>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.confirm-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28px;
+  background: var(--app-overlay);
+  backdrop-filter: blur(8px);
+}
+
+.confirm-shell {
+  width: min(400px, calc(100vw - 48px));
+  overflow: hidden;
+  border: 1px solid var(--app-border-strong);
+  border-radius: 12px;
+  background: var(--app-surface);
+  box-shadow:
+    0 24px 70px var(--app-shadow),
+    0 2px 10px color-mix(in srgb, var(--app-shadow) 46%, transparent);
+}
+
+.confirm-header {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  padding: 0 20px;
+  border-bottom: 1px solid var(--app-border);
+}
+
+.confirm-header h2 {
+  margin: 0;
+  color: var(--app-text);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.confirm-message {
+  margin: 0;
+  padding: 20px;
+  color: var(--app-text-soft);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.confirm-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid var(--app-border);
+  background: var(--app-panel-bg);
+}
+
+.confirm-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 72px;
+  height: 32px;
+  padding: 0 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.confirm-btn-cancel {
+  background: var(--app-hover);
+  color: var(--app-text-soft);
+}
+
+.confirm-btn-cancel:hover {
+  background: var(--app-border);
+  color: var(--app-text);
+}
+
+.confirm-btn-primary {
+  background: var(--app-accent);
+  color: #fff;
+}
+
+.confirm-btn-primary:hover {
+  opacity: 0.88;
+}
+
+.confirm-btn-danger {
+  background: #e53e3e;
+  color: #fff;
+}
+
+.confirm-btn-danger:hover {
+  background: #c53030;
+}
+</style>
--- a/src/components/DirectorySidebar.vue
+++ b/src/components/DirectorySidebar.vue
@@ -46,8 +46,10 @@ const emit = defineEmits<{
  removeWorkspace: [path: string];
  toggleFolder: [path: string];
  openFile: [path: string];
-  createFile: [];
-  createFolder: [];
+  createFile: [path: string];
+  createFolder: [path: string];
+  deleteEntry: [path: string];
+  renameEntry: [path: string, newName: string];
  updateDefaultDocumentMode: [mode: DocumentMode];
  updateAppTheme: [theme: AppTheme];
 }>();
@@ -371,6 +373,10 @@ function openSettings(page: SettingsPage) {
              :currentFilePath="currentFilePath"
              @toggle-folder="(path: string) => emit('toggleFolder', path)"
              @open-file="(path: string) => emit('openFile', path)"
+              @create-folder="(path: string) => emit('createFolder', path)"
+              @create-file="(path: string) => emit('createFile', path)"
+              @delete-entry="(path: string) => emit('deleteEntry', path)"
+              @rename-entry="(path: string, name: string) => emit('renameEntry', path, name)"
          />

          <!-- Empty state -->
--- a/src/components/TreeEntry.vue
+++ b/src/components/TreeEntry.vue
@@ -4,7 +4,8 @@ export default { name: "TreeEntry" };
 </script>

 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch, onMounted, onUnmounted } from "vue";
+import ConfirmDialog from "./ConfirmDialog.vue";

 interface DirEntry {
  name: string;
@@ -22,6 +23,10 @@ const props = defineProps<{
 const emit = defineEmits<{
  toggleFolder: [path: string];
  openFile: [path: string];
+  createFolder: [path: string];
+  createFile: [path: string];
+  deleteEntry: [path: string];
+  renameEntry: [path: string, newName: string];
 }>();

 const expanded = ref(true);
@@ -40,6 +45,99 @@ const isActive = computed(() => {
  return props.currentFilePath != null && props.currentFilePath === props.entry.path;
 });

+// ── 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);
+});
+
+// ── Actions ─────────────────────────────────────────────────
+function handleCreateFolder() {
+  closeMenu();
+  const name = window.prompt("请输入文件夹名称：");
+  if (name && name.trim()) {
+    emit("createFolder", props.entry.path + "/" + name.trim());
+  }
+}
+
+function handleCreateFile() {
+  closeMenu();
+  const name = window.prompt("请输入文件名称（无需 .md 后缀）：");
+  if (name && name.trim()) {
+    emit("createFile", props.entry.path + "/" + name.trim() + ".md");
+  }
+}
+
+function handleRename() {
+  closeMenu();
+  const newName = window.prompt("请输入新名称：", props.entry.name);
+  if (newName && newName.trim() && newName.trim() !== props.entry.name) {
+    emit("renameEntry", props.entry.path, newName.trim());
+  }
+}
+
+// ── Delete confirmation ─────────────────────────────────────
+const confirmShow = ref(false);
+const confirmTitle = ref("");
+const confirmMessage = ref("");
+
+function handleDelete() {
+  closeMenu();
+  confirmTitle.value = props.entry.is_dir ? "删除文件夹" : "删除文件";
+  confirmMessage.value = props.entry.is_dir
+    ? `确定要永久删除文件夹「${props.entry.name}」及其所有内容吗？此操作不可撤销。`
+    : `确定要永久删除文件「${props.entry.name}」吗？此操作不可撤销。`;
+  confirmShow.value = true;
+}
+
+function onConfirmDelete() {
+  confirmShow.value = false;
+  emit("deleteEntry", props.entry.path);
+}
+
+// ── Tree click ──────────────────────────────────────────────
 function onClick() {
  if (props.entry.is_dir) {
    if (props.entry.children === undefined) {
@@ -54,10 +152,23 @@ function onClick() {
 </script>

 <template>
+  <!-- ── Confirm dialog ── -->
+  <ConfirmDialog
+    :show="confirmShow"
+    :title="confirmTitle"
+    :message="confirmMessage"
+    confirm-text="删除"
+    cancel-text="取消"
+    :danger="true"
+    @confirm="onConfirmDelete"
+    @cancel="confirmShow = false"
+  />
+
  <template v-if="entry.is_dir">
-    <!-- Folder label -->
+    <!-- Folder row -->
    <div
-      class="tree-folder flex items-center gap-1 px-2 py-1 rounded-md text-sm cursor-pointer select-none"
+      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"
    >
@@ -66,7 +177,47 @@ function onClick() {
        :class="expanded && entry.children ? 'rotate-90' : ''"
      ></i>
      <i class="tree-entry-icon ri-folder-line text-base shrink-0"></i>
-      <span class="truncate">{{ entry.name }}</span>
+      <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"
+          @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>
    </div>

    <!-- Children (recursive) -->
@@ -79,6 +230,10 @@ function onClick() {
        :currentFilePath="currentFilePath"
        @toggle-folder="(path: string) => emit('toggleFolder', path)"
        @open-file="(path: string) => emit('openFile', path)"
+        @create-folder="(path: string) => emit('createFolder', path)"
+        @create-file="(path: string) => emit('createFile', path)"
+        @delete-entry="(path: string) => emit('deleteEntry', path)"
+        @rename-entry="(path: string, name: string) => emit('renameEntry', path, name)"
      />
    </template>
  </template>
@@ -86,8 +241,9 @@ 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',
+      'tree-file flex items-center gap-1.5 px-2 py-1 rounded-md text-sm cursor-pointer transition-colors relative group',
      isActive
        ? 'tree-file-active font-medium'
        : 'tree-file-idle',
@@ -96,7 +252,39 @@ function onClick() {
    @click="onClick"
  >
    <i class="tree-entry-icon ri-file-line text-sm shrink-0"></i>
-    <span class="truncate">{{ entry.name }}</span>
+    <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"
+        @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>
  </div>
 </template>

@@ -130,4 +318,84 @@ function onClick() {
  background: var(--app-hover);
  color: var(--app-accent);
 }
+
+/* ── More button ────────────────────────────── */
+.tree-more-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--app-muted);
+  font-size: 14px;
+  cursor: pointer;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease;
+  flex-shrink: 0;
+}
+
+.tree-more-btn:hover {
+  background: var(--app-border);
+  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>