功能完善

2026-07-10 13:45:33 +08:00
parent dd846c82dc
commit aefe72b864
9 changed files with 3797 additions and 186 deletions
--- a/.reasonix/desktop-topic-auto-title-meta.json
+++ b/.reasonix/desktop-topic-auto-title-meta.json
@@ -40,5 +40,11 @@
    "userTurns": 1,
    "basisHash": "6b126156c40b1534",
    "updatedAt": 1783655064287
+  },
+  "topic_20260710-034724_3c6fb29d8d0a4119": {
+    "stage": 1,
+    "userTurns": 1,
+    "basisHash": "53517398750be87f",
+    "updatedAt": 1783656298406
  }
 }
--- a/.reasonix/desktop-topic-titles.json
+++ b/.reasonix/desktop-topic-titles.json
@@ -45,5 +45,5 @@
  "topic_20260710-030936_cedad2907c3954fe": "鼠标放在tree上的时候，只有hov…",
  "topic_20260710-032907_600adc6b00791607": "目录树中显示的文件夹，markdow…",
  "topic_20260710-034033_6432ee6566f7b432": "我在点击目录树的时候新增文件夹和新建…",
-  "topic_20260710-034724_3c6fb29d8d0a4119": "新的会话"
+  "topic_20260710-034724_3c6fb29d8d0a4119": "目录树中鼠标悬浮弹框dropmenu…"
 }
--- a/package.json
+++ b/package.json
@@ -10,15 +10,23 @@
    "tauri": "tauri"
  },
  "dependencies": {
+    "@lucide/vue": "^1.23.0",
    "@tauri-apps/api": "^2",
    "@tauri-apps/plugin-dialog": "^2.7.1",
    "@tauri-apps/plugin-opener": "^2",
+    "@vueuse/core": "^14.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
    "rehype-sanitize": "^6.0.0",
    "rehype-stringify": "^10.0.1",
+    "reka-ui": "^2.10.1",
    "remark-gfm": "^4.0.1",
    "remark-parse": "^11.0.0",
    "remark-rehype": "^11.1.2",
    "remixicon": "^4.9.1",
+    "shadcn-vue": "^2.7.4",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
    "unified": "^11.0.0",
    "vue": "^3.5.13"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,2 +1,3 @@
 allowBuilds:
  esbuild: true
+  vue-demi: true
--- a/src/components/TreeEntry.vue
+++ b/src/components/TreeEntry.vue
@@ -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"
+      <!-- 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="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-more-line"></i>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent @click.stop>
+          <DropdownMenuGroup>
+            <DropdownMenuItem @click="handleCreateFolder">
              <i class="ri-folder-add-line"></i>
              <span>新建文件夹</span>
-          </button>
-          <button class="tree-dropdown-item" @click="handleCreateFile">
+            </DropdownMenuItem>
+            <DropdownMenuItem @click="handleCreateFile">
              <i class="ri-file-add-line"></i>
              <span>新建 MD 文件</span>
-          </button>
-          <button class="tree-dropdown-item" @click="handleRename">
+            </DropdownMenuItem>
+            <DropdownMenuItem @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">
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem variant="destructive" @click="handleDelete">
              <i class="ri-delete-bin-line"></i>
              <span>删除文件夹</span>
-          </button>
-        </div>
-      </Teleport>
+            </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"
+    <!-- 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="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-more-line"></i>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent @click.stop>
+        <DropdownMenuGroup>
+          <DropdownMenuItem @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">
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem variant="destructive" @click="handleDelete">
            <i class="ri-delete-bin-line"></i>
            <span>删除</span>
-        </button>
-      </div>
-    </Teleport>
+          </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>
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -1,4 +1,13 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');
+
@import "tailwindcss";
+
+@import "tw-animate-css";
+
+@import "shadcn-vue/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
@source "../src/**/*.vue";

 /* ============================================
@@ -247,3 +256,122 @@ body {
 ::-webkit-scrollbar-corner {
  background: transparent;
 }
+
+@theme inline {
+  --font-sans: 'Geist Variable', sans-serif;
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    @apply font-sans;
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,13 @@
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path alias */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import tailwindcss from "@tailwindcss/vite";
+import { fileURLToPath, URL } from "node:url";

 // @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
@@ -8,6 +9,11 @@ const host = process.env.TAURI_DEV_HOST;
 // https://vite.dev/config/
 export default defineConfig(async () => ({
  plugins: [vue(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },

  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
  //