From d56b7d52bf8edb43e73499a284e2e09cd958444f Mon Sep 17 00:00:00 2001
From: cirry <812852553@qq.com>
Date: Fri, 10 Jul 2026 11:27:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=B0=E5=AF=8C=E7=9B=AE=E5=BD=95=E6=A0=91?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .reasonix/desktop-topic-auto-title-meta.json |  12 +
 .reasonix/desktop-topic-created-at.json      |   4 +-
 .reasonix/desktop-topic-title-sources.json   |   4 +-
 .reasonix/desktop-topic-titles.json          |   4 +-
 src-tauri/src/lib.rs                         |  42 ++-
 src/App.vue                                  |  49 ++++
 src/components/ConfirmDialog.vue             | 174 ++++++++++++
 src/components/DirectorySidebar.vue          |  10 +-
 src/components/TreeEntry.vue                 | 280 ++++++++++++++++++-
 9 files changed, 567 insertions(+), 12 deletions(-)
 create mode 100644 src/components/ConfirmDialog.vue

diff --git a/.reasonix/desktop-topic-auto-title-meta.json b/.reasonix/desktop-topic-auto-title-meta.json
index e9896b9..d29b632 100644
--- a/.reasonix/desktop-topic-auto-title-meta.json
+++ b/.reasonix/desktop-topic-auto-title-meta.json
@@ -16,5 +16,17 @@
     "userTurns": 1,
     "basisHash": "a29f890c9742dd7d",
     "updatedAt": 1783651532738
+  },
+  "topic_20260710-024855_5c4b1833149d66bb": {
+    "stage": 3,
+    "userTurns": 3,
+    "basisHash": "531788785cf8bacd",
+    "updatedAt": 1783652640849
+  },
+  "topic_20260710-030936_cedad2907c3954fe": {
+    "stage": 1,
+    "userTurns": 1,
+    "basisHash": "2066e5673ac2f507",
+    "updatedAt": 1783653328367
   }
 }
\ No newline at end of file
diff --git a/.reasonix/desktop-topic-created-at.json b/.reasonix/desktop-topic-created-at.json
index 911c88d..69c7d30 100644
--- a/.reasonix/desktop-topic-created-at.json
+++ b/.reasonix/desktop-topic-created-at.json
@@ -2,5 +2,7 @@
   "topic_20260630-144952_fd0584fe8f266d6a": 1782830992641,
   "topic_20260703-022850_50330b4eb93f116d": 1783045730616,
   "topic_20260706-145507_076a32df5f4276b5": 1783349707873,
-  "topic_20260706-153317_238f65a7a470703c": 1783351997029
+  "topic_20260706-153317_238f65a7a470703c": 1783351997029,
+  "topic_20260710-024855_5c4b1833149d66bb": 1783651735446,
+  "topic_20260710-030936_cedad2907c3954fe": 1783652976310
 }
\ No newline at end of file
diff --git a/.reasonix/desktop-topic-title-sources.json b/.reasonix/desktop-topic-title-sources.json
index b3d25e0..869dc70 100644
--- a/.reasonix/desktop-topic-title-sources.json
+++ b/.reasonix/desktop-topic-title-sources.json
@@ -40,5 +40,7 @@
   "topic_20260707-095503_bf879b65e4666516": "auto",
   "topic_20260708-020616_9ab54d98daf65053": "auto",
   "topic_20260708-093419_71d1fea2e4b5a40f": "auto",
-  "topic_20260708-095428_990617acd4168b40": "auto"
+  "topic_20260708-095428_990617acd4168b40": "auto",
+  "topic_20260710-024855_5c4b1833149d66bb": "auto",
+  "topic_20260710-030936_cedad2907c3954fe": "auto"
 }
\ No newline at end of file
diff --git a/.reasonix/desktop-topic-titles.json b/.reasonix/desktop-topic-titles.json
index 970780a..834f765 100644
--- a/.reasonix/desktop-topic-titles.json
+++ b/.reasonix/desktop-topic-titles.json
@@ -40,5 +40,7 @@
   "topic_20260707-095503_bf879b65e4666516": "帮我移除markdownEditor…",
   "topic_20260708-020616_9ab54d98daf65053": "帮我分析一下现在的markdownE…",
   "topic_20260708-093419_71d1fea2e4b5a40f": "src/components/Dir…",
-  "topic_20260708-095428_990617acd4168b40": "帮我检查一下这个应用在进行放大缩小的…"
+  "topic_20260708-095428_990617acd4168b40": "帮我检查一下这个应用在进行放大缩小的…",
+  "topic_20260710-024855_5c4b1833149d66bb": "帮我给右侧的目录树添加一个功能，当用…",
+  "topic_20260710-030936_cedad2907c3954fe": "鼠标放在tree上的时候，只有hov…"
 }
\ No newline at end of file
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 5a32317..1d1597e 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -190,6 +190,42 @@ fn pick_save_file(app: tauri::AppHandle) -> Option<String> {
         .map(|p| p.to_string())
 }
 
+#[tauri::command]
+fn create_folder(path: String) -> Result<(), String> {
+    fs::create_dir_all(&path).map_err(|e| format!("无法创建文件夹: {}", e))
+}
+
+#[tauri::command]
+fn create_file(path: String) -> Result<(), String> {
+    if let Some(parent) = PathBuf::from(&path).parent() {
+        fs::create_dir_all(parent).map_err(|e| format!("无法创建父目录: {}", e))?;
+    }
+    fs::write(&path, "").map_err(|e| format!("无法创建文件: {}", e))
+}
+
+#[tauri::command]
+fn delete_entry(path: String) -> Result<(), String> {
+    let p = PathBuf::from(&path);
+    if p.is_dir() {
+        fs::remove_dir_all(&p).map_err(|e| format!("无法删除文件夹: {}", e))
+    } else if p.is_file() {
+        fs::remove_file(&p).map_err(|e| format!("无法删除文件: {}", e))
+    } else {
+        Err("路径不存在".to_string())
+    }
+}
+
+#[tauri::command]
+fn rename_entry(path: String, new_name: String) -> Result<String, String> {
+    let p = PathBuf::from(&path);
+    let parent = p
+        .parent()
+        .ok_or_else(|| "无法获取父目录".to_string())?;
+    let new_path = parent.join(&new_name);
+    fs::rename(&p, &new_path).map_err(|e| format!("无法重命名: {}", e))?;
+    Ok(new_path.to_string_lossy().to_string())
+}
+
 #[tauri::command]
 fn greet(name: &str) -> String {
     format!("Hello, {}! You've been greeted from Rust!", name)
@@ -209,7 +245,11 @@ pub fn run() {
             write_file,
             watch_workspace,
             unwatch_workspace,
-            pick_save_file
+            pick_save_file,
+            create_folder,
+            create_file,
+            delete_entry,
+            rename_entry
         ])
         .setup(|app| {
             // ---- File menu ----
diff --git a/src/App.vue b/src/App.vue
index 8946b37..6b7722b 100644
--- 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"
       />
diff --git a/src/components/ConfirmDialog.vue b/src/components/ConfirmDialog.vue
new file mode 100644
index 0000000..f93aa5e
--- /dev/null
+++ 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>
diff --git a/src/components/DirectorySidebar.vue b/src/components/DirectorySidebar.vue
index 2e6c8f8..5cf27e0 100644
--- 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 -->
diff --git a/src/components/TreeEntry.vue b/src/components/TreeEntry.vue
index a7877cb..81a9dd4 100644
--- 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>