From 4a6810e57b590d3df5f802eb9d52107d8af4b317 Mon Sep 17 00:00:00 2001
From: cfq <cfq@qq.com>
Date: Fri, 30 Jan 2026 16:29:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=87=E4=BB=B6=E6=A0=91=E5=92=8C?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=A1=B5):=20=E6=B7=BB=E5=8A=A0=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=E5=92=8C=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E8=B7=AF=E5=BE=84=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构文件树右键菜单为全局统一组件，支持节点和空白区域操作
- 添加 closeFile 方法，支持通过文件路径关闭标签页
- 实现配置文件中绝对路径与相对路径的自动转换
- 删除文件时自动关闭对应的标签页
---
 src/components/FileTree.vue  | 178 +++++++++++++++++++++--------------
 src/composables/useConfig.js |  58 ++++++++++--
 src/composables/useTabs.js   |   9 ++
 3 files changed, 170 insertions(+), 75 deletions(-)

diff --git a/src/components/FileTree.vue b/src/components/FileTree.vue
index 5d61ca6..914083e 100644
--- a/src/components/FileTree.vue
+++ b/src/components/FileTree.vue
@@ -23,56 +23,60 @@
       <a-empty description="请选择目录" />
     </div>
 
-    <a-dropdown v-else :trigger="['contextmenu']">
-      <div class="tree-content" ref="treeContentRef">
-        <a-directory-tree ref="treeRef" v-model:expandedKeys="state.expandedKeys" v-model:selectedKeys="selectedKeys" :tree-data="treeData" :field-names="{ title: 'name', key: 'path', children: 'children' }" :load-data="onLoadData" @select="onSelect">
-          <template #icon="{ dataRef, expanded }">
-            <component :is="getFileIcon(dataRef.name, dataRef.type, expanded)" :style="{ color: getFileIconColor(dataRef.name, dataRef.type), fontSize: '18px', marginRight: '6px' }" />
-          </template>
-          <template #title="{ dataRef }">
-            <a-dropdown :trigger="['contextmenu']">
-              <span class="tree-node-title" :title="dataRef.name">{{ dataRef.name }}</span>
-              <template #overlay>
-                <a-menu @click="(e) => handleMenuClick(e, dataRef)">
-                  <a-menu-item key="open" v-if="dataRef.type === 'file'">打开</a-menu-item>
+    <div class="tree-content" ref="treeContentRef" @contextmenu.prevent="handleBackgroundMenuClick">
+      <a-directory-tree ref="treeRef" v-model:expandedKeys="state.expandedKeys" v-model:selectedKeys="selectedKeys" :tree-data="treeData" :field-names="{ title: 'name', key: 'path', children: 'children' }" :load-data="onLoadData" @select="onSelect" @rightClick="onNodeRightClick">
+        <template #icon="{ dataRef, expanded }">
+          <component :is="getFileIcon(dataRef.name, dataRef.type, expanded)" :style="{ color: getFileIconColor(dataRef.name, dataRef.type), fontSize: '18px', marginRight: '6px' }" />
+        </template>
+        <template #title="{ dataRef }">
+          <span class="tree-node-title" :title="dataRef.name">{{ dataRef.name }}</span>
+        </template>
+      </a-directory-tree>
 
-                  <template v-if="isMdFile(dataRef.name)">
-                    <a-menu-item key="pin">
-                      {{ isPinned(dataRef.path) ? "取消置顶" : "置顶" }}
-                    </a-menu-item>
-                  </template>
+      <!-- 全局右键菜单 -->
+      <a-dropdown :open="contextMenu.visible" :trigger="['contextmenu']" @openChange="(val) => (contextMenu.visible = val)">
+        <div class="context-menu-anchor" :style="{ position: 'fixed', left: contextMenu.x + 'px', top: contextMenu.y + 'px', width: '1px', height: '1px' }"></div>
+        <template #overlay>
+          <a-menu @click="handleGlobalMenuClick">
+            <!-- 文件/文件夹菜单项 -->
+            <template v-if="contextMenu.target">
+              <a-menu-item key="open" v-if="contextMenu.target.type === 'file'">打开</a-menu-item>
 
-                  <a-menu-divider />
-
-                  <!-- 文件夹操作 -->
-                  <template v-if="dataRef.type === 'directory'">
-                    <a-menu-item key="newFile">新建文件</a-menu-item>
-                    <a-menu-item key="newFolder">新建文件夹</a-menu-item>
-                    <a-menu-divider />
-                  </template>
-
-                  <a-menu-item key="rename">重命名</a-menu-item>
-                  <a-menu-item key="delete" danger>删除</a-menu-item>
-
-                  <a-menu-divider />
-                  <a-menu-item key="copyPath">复制路径</a-menu-item>
-                  <a-menu-item key="openInExplorer">在资源管理器打开</a-menu-item>
-                </a-menu>
+              <template v-if="isMdFile(contextMenu.target.name)">
+                <a-menu-item key="pin">
+                  {{ isPinned(contextMenu.target.path) ? "取消置顶" : "置顶" }}
+                </a-menu-item>
               </template>
-            </a-dropdown>
-          </template>
-        </a-directory-tree>
-      </div>
-      <template #overlay>
-        <a-menu @click="handleBackgroundMenuClick">
-          <a-menu-item key="newFile">新建文件</a-menu-item>
-          <a-menu-item key="newFolder">新建文件夹</a-menu-item>
-          <a-menu-divider />
-          <a-menu-item key="refresh">刷新</a-menu-item>
-          <a-menu-item key="openInExplorer">在资源管理器打开</a-menu-item>
-        </a-menu>
-      </template>
-    </a-dropdown>
+
+              <a-menu-divider />
+
+              <!-- 文件夹操作 -->
+              <template v-if="contextMenu.target.type === 'directory'">
+                <a-menu-item key="newFile">新建文件</a-menu-item>
+                <a-menu-item key="newFolder">新建文件夹</a-menu-item>
+                <a-menu-divider />
+              </template>
+
+              <a-menu-item key="rename">重命名</a-menu-item>
+              <a-menu-item key="delete" danger>删除</a-menu-item>
+
+              <a-menu-divider />
+              <a-menu-item key="copyPath">复制路径</a-menu-item>
+              <a-menu-item key="openInExplorer">在资源管理器打开</a-menu-item>
+            </template>
+
+            <!-- 空白处菜单项 -->
+            <template v-else>
+              <a-menu-item key="newFile">新建文件</a-menu-item>
+              <a-menu-item key="newFolder">新建文件夹</a-menu-item>
+              <a-menu-divider />
+              <a-menu-item key="refresh">刷新</a-menu-item>
+              <a-menu-item key="openInExplorer">在资源管理器打开</a-menu-item>
+            </template>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </div>
 
     <!-- 重命名/新建弹窗 -->
     <a-modal v-model:open="modalVisible" :title="modalTitle" @ok="handleModalOk">
@@ -82,7 +86,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch, nextTick } from "vue";
+import { computed, ref, watch, nextTick, reactive } from "vue";
 import { EyeInvisibleOutlined, EyeOutlined, ReloadOutlined, SearchOutlined, FileOutlined, FileMarkdownOutlined, FileImageOutlined, FilePdfOutlined, CodeOutlined, FileTextOutlined, FolderFilled, FolderOpenFilled } from "@ant-design/icons-vue";
 import { useFileTree } from "../composables/useFileTree";
 import { useTabs } from "../composables/useTabs";
@@ -90,7 +94,7 @@ import { useConfig } from "../composables/useConfig";
 import { message, Modal } from "ant-design-vue";
 
 const { state, loadDirectory, refresh, searchFiles } = useFileTree();
-const { openFile, activeTab } = useTabs();
+const { openFile, activeTab, closeFile } = useTabs();
 const { config, addPinnedFile, removePinnedFile, setShowHiddenItems } = useConfig();
 
 const modalVisible = ref(false);
@@ -104,6 +108,14 @@ const selectedKeys = ref([]);
 const treeContentRef = ref(null);
 const modalInputRef = ref(null);
 
+// 右键菜单状态
+const contextMenu = reactive({
+  visible: false,
+  x: 0,
+  y: 0,
+  target: null,
+});
+
 watch(modalVisible, (val) => {
   if (val) {
     nextTick(() => {
@@ -317,6 +329,45 @@ const getFileIconColor = (fileName, type) => {
 
 const isPinned = (path) => config.pinnedFiles.includes(path);
 
+// 节点右键
+const onNodeRightClick = ({ event, node }) => {
+  // 阻止冒泡，避免触发背景右键
+  event.stopPropagation();
+  // 设置目标
+  contextMenu.target = node.dataRef;
+  contextMenu.x = event.clientX;
+  contextMenu.y = event.clientY;
+  contextMenu.visible = true;
+};
+
+// 背景右键
+const handleBackgroundMenuClick = (event) => {
+  contextMenu.target = null;
+  contextMenu.x = event.clientX;
+  contextMenu.y = event.clientY;
+  contextMenu.visible = true;
+};
+
+// 全局菜单点击代理
+const handleGlobalMenuClick = ({ key }) => {
+  contextMenu.visible = false;
+  let target = contextMenu.target;
+
+  if (!target) {
+    // 如果是背景操作，构建根目录虚拟节点
+    const separator = window.utools.isWindows() ? "\\" : "/";
+    const rootName = state.rootPath.split(separator).pop() || state.rootPath;
+
+    target = {
+      name: rootName,
+      path: state.rootPath,
+      type: "directory",
+    };
+  }
+
+  handleMenuClick({ key }, target);
+};
+
 const handleMenuClick = async ({ key }, node) => {
   currentNode.value = node;
 
@@ -350,6 +401,12 @@ const handleMenuClick = async ({ key }, node) => {
           if (window.services?.deleteItem) {
             await window.services.deleteItem(node.path);
             message.success("删除成功");
+
+            // 关闭对应的 Tab
+            if (node.type === 'file') {
+              closeFile(node.path);
+            }
+
             await refresh();
           }
         },
@@ -379,29 +436,12 @@ const handleMenuClick = async ({ key }, node) => {
       currentAction.value = "newFolder";
       modalVisible.value = true;
       break;
+    case "refresh":
+      handleRefresh();
+      break;
   }
 };
 
-const handleBackgroundMenuClick = ({ key }) => {
-  if (key === "refresh") {
-    handleRefresh();
-    return;
-  }
-
-  // 构建根目录的虚拟节点
-  const separator = window.utools.isWindows() ? "\\" : "/";
-  // 注意：如果是根驱动器（如 C:\），pop() 可能为空字符串，但 state.rootPath 是完整的
-  const rootName = state.rootPath.split(separator).pop() || state.rootPath;
-
-  const rootNode = {
-    name: rootName,
-    path: state.rootPath,
-    type: "directory",
-  };
-
-  handleMenuClick({ key }, rootNode);
-};
-
 const handleModalOk = async () => {
   if (!modalInputValue.value) {
     message.warning("请输入内容");
diff --git a/src/composables/useConfig.js b/src/composables/useConfig.js
index da8c4e2..4ca816a 100644
--- a/src/composables/useConfig.js
+++ b/src/composables/useConfig.js
@@ -5,18 +5,56 @@ const defaultFileTreeConfig = {
 };
 
 const config = reactive({
-  pinnedFiles: [], // Array of string (file paths)
-  recentFiles: [], // Array of objects { path, lastOpened }
+  pinnedFiles: [], // Array of string (file paths) - In Memory: Absolute Paths
+  recentFiles: [], // Array of objects { path, lastOpened } - In Memory: Absolute Paths
   fileTree: { ...defaultFileTreeConfig },
 });
 
+// Helper: Get system separator
+const getSeparator = () => {
+  if (typeof window !== 'undefined' && window.utools && window.utools.isWindows()) {
+    return '\\';
+  }
+  return '/';
+};
+
+// Helper: Convert absolute path to relative path
+const getRelativePath = (rootPath, fullPath) => {
+  if (!rootPath || !fullPath) return fullPath;
+  if (!fullPath.startsWith(rootPath)) return fullPath;
+  
+  const sep = getSeparator();
+  let rel = fullPath.substring(rootPath.length);
+  if (rel.startsWith(sep)) {
+    rel = rel.substring(1);
+  }
+  return rel;
+};
+
+// Helper: Convert relative path to absolute path
+const getAbsolutePath = (rootPath, relPath) => {
+  if (!rootPath || !relPath) return relPath;
+  // If it looks like an absolute path, return it as is
+  const sep = getSeparator();
+  if (sep === '\\' && /^[a-zA-Z]:\\/.test(relPath)) return relPath;
+  if (sep === '/' && relPath.startsWith('/')) return relPath;
+
+  return `${rootPath}${sep}${relPath}`;
+};
+
 export function useConfig() {
   const loadConfig = async (rootPath) => {
     if (!window.services?.loadConfig) return;
     const data = await window.services.loadConfig(rootPath);
     if (data) {
-      config.pinnedFiles = data.pinnedFiles || [];
-      config.recentFiles = data.recentFiles || [];
+      // Convert stored relative paths to absolute paths for use in app
+      config.pinnedFiles = (data.pinnedFiles || []).map(p => getAbsolutePath(rootPath, p));
+      
+      config.recentFiles = (data.recentFiles || []).map(item => ({
+        ...item,
+        path: getAbsolutePath(rootPath, item.path)
+      }));
+      
       config.fileTree = { ...defaultFileTreeConfig, ...(data.fileTree || {}) };
     } else {
       config.pinnedFiles = [];
@@ -27,9 +65,17 @@ export function useConfig() {
 
   const saveConfig = async (rootPath) => {
     if (!window.services?.saveConfig) return;
+
+    // Convert absolute paths to relative paths for storage
+    const pinnedFilesRelative = config.pinnedFiles.map(p => getRelativePath(rootPath, p));
+    const recentFilesRelative = config.recentFiles.map(item => ({
+      ...item,
+      path: getRelativePath(rootPath, item.path)
+    }));
+
     await window.services.saveConfig(rootPath, {
-      pinnedFiles: config.pinnedFiles,
-      recentFiles: config.recentFiles,
+      pinnedFiles: pinnedFilesRelative,
+      recentFiles: recentFilesRelative,
       fileTree: config.fileTree,
     });
   };
diff --git a/src/composables/useTabs.js b/src/composables/useTabs.js
index a9a915a..366d05a 100644
--- a/src/composables/useTabs.js
+++ b/src/composables/useTabs.js
@@ -75,6 +75,14 @@ export function useTabs() {
     state.tabs.splice(index, 1);
   };
 
+  // 根据文件路径关闭 Tab
+  const closeFile = (filePath) => {
+    const tab = state.tabs.find(t => t.filePath === filePath);
+    if (tab) {
+      closeTab(tab.id);
+    }
+  };
+
   // 关闭其他 Tab
   const closeOtherTabs = (keepTabId) => {
     state.tabs = state.tabs.filter(t => t.id === keepTabId || !t.closable);
@@ -110,6 +118,7 @@ export function useTabs() {
     activeTab,
     openFile,
     closeTab,
+    closeFile,
     closeOtherTabs,
     closeAllTabs,
     activateTab,