From e56fc4b5f1e07aea1c8e961e87736753f7256820 Mon Sep 17 00:00:00 2001
From: cfq <cfq@qq.com>
Date: Wed, 28 Jan 2026 14:43:20 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=87=E4=BB=B6=E6=A0=91):=20=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E6=96=87=E4=BB=B6=E6=A0=91=E4=B8=8E=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E9=A1=B5=E7=9A=84=E8=81=94=E5=8A=A8=E9=80=89=E6=8B=A9=E5=92=8C?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 HomeTab 中显示文件名和完整路径，提升可读性
- 监听 activeTab 变化，自动在文件树中选中对应文件并展开父目录
- 添加滚动定位功能，确保选中节点在可视区域内
- 优化文件树模板结构，提高代码可维护性
---
 src/components/FileTree.vue | 360 ++++++++++++++++++++----------------
 src/components/HomeTab.vue  |   3 +-
 2 files changed, 201 insertions(+), 162 deletions(-)

diff --git a/src/components/FileTree.vue b/src/components/FileTree.vue
index 3522d64..782dcf5 100644
--- a/src/components/FileTree.vue
+++ b/src/components/FileTree.vue
@@ -1,13 +1,7 @@
 <template>
   <div class="file-tree-container">
     <div class="tree-header">
-      <a-input
-        v-model:value="searchKeyword"
-        placeholder="搜索文件..."
-        size="small"
-        allow-clear
-        class="search-input"
-      >
+      <a-input v-model:value="searchKeyword" placeholder="搜索文件..." size="small" allow-clear class="search-input">
         <template #prefix>
           <SearchOutlined />
         </template>
@@ -16,12 +10,7 @@
         <a-button type="text" size="small" @click="handleRefresh" title="刷新">
           <template #icon><ReloadOutlined /></template>
         </a-button>
-        <a-button
-          type="text"
-          size="small"
-          @click="toggleShowHiddenItems"
-          :title="showHiddenItems ? '不显示隐藏项' : '显示隐藏项'"
-        >
+        <a-button type="text" size="small" @click="toggleShowHiddenItems" :title="showHiddenItems ? '不显示隐藏项' : '显示隐藏项'">
           <template #icon>
             <EyeOutlined v-if="showHiddenItems" />
             <EyeInvisibleOutlined v-else />
@@ -29,24 +18,15 @@
         </a-button>
       </div>
     </div>
-    
+
     <div v-if="!state.rootPath" class="empty-tip">
       <a-empty description="请选择目录" />
     </div>
-    
-    <div v-else class="tree-content">
-      <a-directory-tree
-        v-model:expandedKeys="state.expandedKeys"
-        :tree-data="treeData"
-        :field-names="{ title: 'name', key: 'path', children: 'children' }"
-        :load-data="onLoadData"
-        @select="onSelect"
-      >
+
+    <div v-else 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' }"
-          />
+          <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']">
@@ -54,25 +34,25 @@
             <template #overlay>
               <a-menu @click="(e) => handleMenuClick(e, dataRef)">
                 <a-menu-item key="open" v-if="dataRef.type === 'file'">打开</a-menu-item>
-                
+
                 <template v-if="isMdFile(dataRef.name)">
                   <a-menu-item key="pin">
-                    {{ isPinned(dataRef.path) ? '取消置顶' : '置顶' }}
+                    {{ isPinned(dataRef.path) ? "取消置顶" : "置顶" }}
                   </a-menu-item>
                 </template>
-                
+
                 <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 />
+                  <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>
@@ -82,57 +62,117 @@
         </template>
       </a-directory-tree>
     </div>
-    
+
     <!-- 重命名/新建弹窗 -->
-    <a-modal
-      v-model:open="modalVisible"
-      :title="modalTitle"
-      @ok="handleModalOk"
-    >
+    <a-modal v-model:open="modalVisible" :title="modalTitle" @ok="handleModalOk">
       <a-input v-model:value="modalInputValue" :placeholder="modalPlaceholder" />
     </a-modal>
   </div>
 </template>
 
 <script setup>
-import { computed, ref, watch } 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';
-import { useConfig } from '../composables/useConfig';
-import { message, Modal } from 'ant-design-vue';
+import { computed, ref, watch, nextTick } 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";
+import { useConfig } from "../composables/useConfig";
+import { message, Modal } from "ant-design-vue";
 
 const { state, loadDirectory, refresh, searchFiles } = useFileTree();
-const { openFile } = useTabs();
+const { openFile, activeTab } = useTabs();
 const { config, addPinnedFile, removePinnedFile, setShowHiddenItems } = useConfig();
 
 const modalVisible = ref(false);
-const modalTitle = ref('');
-const modalInputValue = ref('');
-const modalPlaceholder = ref('');
+const modalTitle = ref("");
+const modalInputValue = ref("");
+const modalPlaceholder = ref("");
 const currentAction = ref(null);
 const currentNode = ref(null);
-const searchKeyword = ref('');
+const searchKeyword = ref("");
+const selectedKeys = ref([]);
+const treeContentRef = ref(null);
+
+// 监听 activeTab 变化，实现联动
+watch(
+  activeTab,
+  async (tab) => {
+    if (tab?.filePath) {
+      await revealFile(tab.filePath);
+    }
+  },
+  { immediate: true },
+);
+
+const revealFile = async (filePath) => {
+  if (!state.rootPath || !filePath.startsWith(state.rootPath)) return;
+
+  // 1. 设置选中
+  selectedKeys.value = [filePath];
+
+  const separator = window.utools.isWindows() ? "\\" : "/";
+
+  // 2. 计算需要展开的父路径
+  let currentPath = filePath;
+  const parentsToLoad = [];
+
+  while (true) {
+    const lastSepIndex = currentPath.lastIndexOf(separator);
+    if (lastSepIndex === -1) break;
+
+    currentPath = currentPath.substring(0, lastSepIndex);
+
+    // 如果已经到了根目录的上一级或者更短，停止
+    // 注意：state.rootPath 是根目录路径，我们需要展开的是根目录下的子目录
+    if (currentPath.length < state.rootPath.length) break;
+    if (currentPath === state.rootPath) break;
+
+    parentsToLoad.unshift(currentPath);
+  }
+
+  // 3. 逐级加载并展开
+  for (const path of parentsToLoad) {
+    // 即使已经展开，为了保险起见（可能之前加载失败或未完全加载），也可以检查一下
+    // 这里主要处理未展开的情况
+    if (!state.expandedKeys.includes(path)) {
+      // 确保数据已加载
+      await loadDirectory(path);
+      state.expandedKeys.push(path);
+    }
+  }
+
+  // 4. 滚动到可视区域
+  // 由于 Ant Design Vue 的 Tree 组件未开启虚拟滚动（virtual），scrollTo 方法可能无效。
+  // 我们回归到 DOM 操作，使用 scrollIntoView。
+  // 考虑到节点展开可能涉及 DOM 更新延迟或动画，我们增加一个简单的重试机制。
+  const tryScroll = (retryCount = 0) => {
+    if (!treeContentRef.value) return;
+
+    // 在当前组件范围内查找选中节点
+    // 尝试匹配 ant-tree-treenode-selected (行) 或 ant-tree-node-selected (内容)
+    const selectedNode = treeContentRef.value.querySelector(".ant-tree-treenode-selected") || treeContentRef.value.querySelector(".ant-tree-node-selected");
+
+    if (selectedNode) {
+      selectedNode.scrollIntoView({ block: "center", behavior: "smooth" });
+    } else {
+      // 如果没找到，且重试次数未耗尽，则延迟后重试
+      // 100ms * 10 = 1s，足够覆盖大部分展开动画和 DOM 渲染时间
+      if (retryCount < 20) {
+        setTimeout(() => tryScroll(retryCount + 1), 100);
+      }
+    }
+  };
+
+  nextTick(() => {
+    tryScroll();
+  });
+};
 
 // 将 nodes 转换为 treeData，主要处理 isLeaf
 const transformNodes = (nodes) => {
-  return nodes.map(node => ({
+  return nodes.map((node) => ({
     ...node,
-    isLeaf: node.type === 'file',
-    children: node.children === undefined ? undefined : transformNodes(node.children)
+    isLeaf: node.type === "file",
+    children: node.children === undefined ? undefined : transformNodes(node.children),
   }));
 };
 
@@ -140,24 +180,24 @@ const showHiddenItems = computed(() => !!config.fileTree?.showHiddenItems);
 
 const isHiddenItemName = (name) => {
   if (!name) return false;
-  if (name.startsWith('.')) return true;
-  if (name === 'node_modules') return true;
+  if (name.startsWith(".")) return true;
+  if (name === "node_modules") return true;
   return false;
 };
 
 const filterNodes = (nodes) => {
   if (!Array.isArray(nodes) || nodes.length === 0) return [];
-  
+
   // 1. 处理隐藏文件
   let filtered = nodes;
   if (!showHiddenItems.value) {
-    filtered = nodes.filter(node => !isHiddenItemName(node?.name));
+    filtered = nodes.filter((node) => !isHiddenItemName(node?.name));
   }
-  
+
   // 递归处理子节点
-  return filtered.map(node => ({
+  return filtered.map((node) => ({
     ...node,
-    children: node.children === undefined ? undefined : filterNodes(node.children)
+    children: node.children === undefined ? undefined : filterNodes(node.children),
   }));
 };
 
@@ -166,7 +206,7 @@ const treeData = computed(() => {
   // 搜索模式下，state.nodes 已经是过滤后的结果（虽然可能包含隐藏文件，如果 searchFileName 没过滤的话）
   // 这里我们还是统一过滤一下隐藏文件
   let nodes = filterNodes(state.nodes);
-  
+
   return transformNodes(nodes);
 });
 
@@ -195,52 +235,52 @@ const onLoadData = (treeNode) => {
       resolve();
       return;
     }
-    await loadDirectory(treeNode.key || treeNode.eventKey); 
+    await loadDirectory(treeNode.key || treeNode.eventKey);
     resolve();
   });
 };
 
 const onSelect = (keys, { node }) => {
-  if (node.dataRef.type === 'file') {
+  if (node.dataRef.type === "file") {
     openFile(node.dataRef, state.rootPath);
   }
 };
 
-const isMdFile = (name) => name && name.toLowerCase().endsWith('.md');
+const isMdFile = (name) => name && name.toLowerCase().endsWith(".md");
 
 const FILE_TYPE_CONFIG = {
-  md: { icon: FileMarkdownOutlined, color: '#1890ff' },
-  markdown: { icon: FileMarkdownOutlined, color: '#1890ff' },
-  png: { icon: FileImageOutlined, color: '#722ed1' },
-  jpg: { icon: FileImageOutlined, color: '#722ed1' },
-  jpeg: { icon: FileImageOutlined, color: '#722ed1' },
-  gif: { icon: FileImageOutlined, color: '#722ed1' },
-  webp: { icon: FileImageOutlined, color: '#722ed1' },
-  svg: { icon: FileImageOutlined, color: '#722ed1' },
-  ico: { icon: FileImageOutlined, color: '#722ed1' },
-  pdf: { icon: FilePdfOutlined, color: '#f5222d' },
-  js: { icon: CodeOutlined, color: '#52c41a' },
-  json: { icon: CodeOutlined, color: '#52c41a' },
-  ts: { icon: CodeOutlined, color: '#52c41a' },
-  css: { icon: CodeOutlined, color: '#52c41a' },
-  html: { icon: CodeOutlined, color: '#52c41a' },
-  vue: { icon: CodeOutlined, color: '#52c41a' },
-  xml: { icon: CodeOutlined, color: '#52c41a' },
-  yaml: { icon: CodeOutlined, color: '#52c41a' },
-  yml: { icon: CodeOutlined, color: '#52c41a' },
-  txt: { icon: FileTextOutlined, color: 'inherit' },
-  log: { icon: FileTextOutlined, color: 'inherit' },
+  md: { icon: FileMarkdownOutlined, color: "#1890ff" },
+  markdown: { icon: FileMarkdownOutlined, color: "#1890ff" },
+  png: { icon: FileImageOutlined, color: "#722ed1" },
+  jpg: { icon: FileImageOutlined, color: "#722ed1" },
+  jpeg: { icon: FileImageOutlined, color: "#722ed1" },
+  gif: { icon: FileImageOutlined, color: "#722ed1" },
+  webp: { icon: FileImageOutlined, color: "#722ed1" },
+  svg: { icon: FileImageOutlined, color: "#722ed1" },
+  ico: { icon: FileImageOutlined, color: "#722ed1" },
+  pdf: { icon: FilePdfOutlined, color: "#f5222d" },
+  js: { icon: CodeOutlined, color: "#52c41a" },
+  json: { icon: CodeOutlined, color: "#52c41a" },
+  ts: { icon: CodeOutlined, color: "#52c41a" },
+  css: { icon: CodeOutlined, color: "#52c41a" },
+  html: { icon: CodeOutlined, color: "#52c41a" },
+  vue: { icon: CodeOutlined, color: "#52c41a" },
+  xml: { icon: CodeOutlined, color: "#52c41a" },
+  yaml: { icon: CodeOutlined, color: "#52c41a" },
+  yml: { icon: CodeOutlined, color: "#52c41a" },
+  txt: { icon: FileTextOutlined, color: "inherit" },
+  log: { icon: FileTextOutlined, color: "inherit" },
 };
 
 const getFileExtension = (fileName) => {
-  if (!fileName) return '';
-  const lastDotIndex = fileName.lastIndexOf('.');
-  if (lastDotIndex === -1 || lastDotIndex === 0) return '';
+  if (!fileName) return "";
+  const lastDotIndex = fileName.lastIndexOf(".");
+  if (lastDotIndex === -1 || lastDotIndex === 0) return "";
   return fileName.substring(lastDotIndex + 1).toLowerCase();
 };
 
 const getFileIcon = (fileName, type, expanded) => {
-  if (type === 'directory') {
+  if (type === "directory") {
     return expanded ? FolderOpenFilled : FolderFilled;
   }
   const ext = getFileExtension(fileName);
@@ -248,75 +288,75 @@ const getFileIcon = (fileName, type, expanded) => {
 };
 
 const getFileIconColor = (fileName, type) => {
-  if (type === 'directory') {
-    return '#ffc60a'; // 文件夹黄色
+  if (type === "directory") {
+    return "#ffc60a"; // 文件夹黄色
   }
   const ext = getFileExtension(fileName);
-  return FILE_TYPE_CONFIG[ext]?.color || 'inherit';
+  return FILE_TYPE_CONFIG[ext]?.color || "inherit";
 };
 
 const isPinned = (path) => config.pinnedFiles.includes(path);
 
 const handleMenuClick = async ({ key }, node) => {
   currentNode.value = node;
-  
+
   switch (key) {
-    case 'open':
+    case "open":
       openFile(node, state.rootPath);
       break;
-    case 'pin':
+    case "pin":
       if (isPinned(node.path)) {
         await removePinnedFile(state.rootPath, node.path);
-        message.success('已取消置顶');
+        message.success("已取消置顶");
       } else {
         await addPinnedFile(state.rootPath, node.path);
-        message.success('已置顶');
+        message.success("已置顶");
       }
       break;
-    case 'rename':
-      modalTitle.value = '重命名';
+    case "rename":
+      modalTitle.value = "重命名";
       modalInputValue.value = node.name;
-      currentAction.value = 'rename';
+      currentAction.value = "rename";
       modalVisible.value = true;
       break;
-    case 'delete':
+    case "delete":
       Modal.confirm({
-        title: '确认删除',
+        title: "确认删除",
         content: `确定要删除 ${node.name} 吗？此操作不可恢复。`,
-        okText: '删除',
-        okType: 'danger',
-        cancelText: '取消',
+        okText: "删除",
+        okType: "danger",
+        cancelText: "取消",
         onOk: async () => {
           if (window.services?.deleteItem) {
             await window.services.deleteItem(node.path);
-            message.success('删除成功');
-            await refresh(); 
+            message.success("删除成功");
+            await refresh();
           }
-        }
+        },
       });
       break;
-    case 'copyPath':
+    case "copyPath":
       // 使用 uTools 复制
       window.utools.copyText(node.path);
-      message.success('路径已复制');
+      message.success("路径已复制");
       break;
-    case 'openInExplorer':
+    case "openInExplorer":
       if (window.services?.openItemLocation) {
         window.services.openItemLocation(node.path);
       }
       break;
-    case 'newFile':
-      modalTitle.value = '新建文件';
-      modalInputValue.value = '';
-      modalPlaceholder.value = '请输入文件名 (包含后缀)';
-      currentAction.value = 'newFile';
+    case "newFile":
+      modalTitle.value = "新建文件";
+      modalInputValue.value = "";
+      modalPlaceholder.value = "请输入文件名 (包含后缀)";
+      currentAction.value = "newFile";
       modalVisible.value = true;
       break;
-    case 'newFolder':
-      modalTitle.value = '新建文件夹';
-      modalInputValue.value = '';
-      modalPlaceholder.value = '请输入文件夹名';
-      currentAction.value = 'newFolder';
+    case "newFolder":
+      modalTitle.value = "新建文件夹";
+      modalInputValue.value = "";
+      modalPlaceholder.value = "请输入文件夹名";
+      currentAction.value = "newFolder";
       modalVisible.value = true;
       break;
   }
@@ -324,50 +364,50 @@ const handleMenuClick = async ({ key }, node) => {
 
 const handleModalOk = async () => {
   if (!modalInputValue.value) {
-    message.warning('请输入内容');
+    message.warning("请输入内容");
     return;
   }
-  
+
   const node = currentNode.value;
   // 如果是新建，父目录是 node.path；如果是重命名，父目录是 node 的父级
   // 这里逻辑有点小问题，如果右键的是文件，新建应该是在同级目录？
   // Ant Design Tree 右键的 node 是当前节点。
   // 如果是 directory，新建在其中。
   // 如果是 file，新建在同级。
-  
-  let parentPath = '';
-  if (currentAction.value === 'newFile' || currentAction.value === 'newFolder') {
-     if (node.type === 'directory') {
-       parentPath = node.path;
-     } else {
-       parentPath = node.path.substring(0, node.path.lastIndexOf(window.utools.isWindows() ? '\\' : '/'));
-     }
+
+  let parentPath = "";
+  if (currentAction.value === "newFile" || currentAction.value === "newFolder") {
+    if (node.type === "directory") {
+      parentPath = node.path;
+    } else {
+      parentPath = node.path.substring(0, node.path.lastIndexOf(window.utools.isWindows() ? "\\" : "/"));
+    }
   } else {
     // rename
-    parentPath = node.path.substring(0, node.path.lastIndexOf(window.utools.isWindows() ? '\\' : '/'));
+    parentPath = node.path.substring(0, node.path.lastIndexOf(window.utools.isWindows() ? "\\" : "/"));
   }
-  
+
   try {
-    if (currentAction.value === 'rename') {
+    if (currentAction.value === "rename") {
       const newPath = node.path.replace(node.name, modalInputValue.value);
       await window.services.renameItem(node.path, newPath);
-      message.success('重命名成功');
-    } else if (currentAction.value === 'newFile') {
-      const separator = window.utools.isWindows() ? '\\' : '/';
+      message.success("重命名成功");
+    } else if (currentAction.value === "newFile") {
+      const separator = window.utools.isWindows() ? "\\" : "/";
       const newPath = `${parentPath}${separator}${modalInputValue.value}`;
-      await window.services.writeFile(newPath, ''); // 创建空文件
-      message.success('创建文件成功');
-    } else if (currentAction.value === 'newFolder') {
-      const separator = window.utools.isWindows() ? '\\' : '/';
+      await window.services.writeFile(newPath, ""); // 创建空文件
+      message.success("创建文件成功");
+    } else if (currentAction.value === "newFolder") {
+      const separator = window.utools.isWindows() ? "\\" : "/";
       const newPath = `${parentPath}${separator}${modalInputValue.value}`;
       await window.services.createDirectory(newPath);
-      message.success('创建文件夹成功');
+      message.success("创建文件夹成功");
     }
-    
+
     modalVisible.value = false;
     await refresh();
   } catch (error) {
-    message.error('操作失败: ' + error.message);
+    message.error("操作失败: " + error.message);
   }
 };
 </script>
@@ -417,7 +457,6 @@ const handleModalOk = async () => {
   padding-bottom: 4px;
 }
 
-
 .empty-tip {
   padding: 20px;
   text-align: center;
@@ -468,5 +507,4 @@ const handleModalOk = async () => {
   background-color: var(--primary-color-bg, #e6f7ff) !important;
   color: var(--primary-color, #1890ff);
 }
-
 </style>
diff --git a/src/components/HomeTab.vue b/src/components/HomeTab.vue
index c7f85b4..808db0e 100644
--- a/src/components/HomeTab.vue
+++ b/src/components/HomeTab.vue
@@ -15,7 +15,8 @@
             <a-list-item class="file-item" @click="handleOpenFile(item)">
               <div class="file-info">
                 <FileMarkdownOutlined />
-                <span class="file-path">{{ item }}</span>
+                <span class="file-path">{{ getFileName(item) }}</span>
+                <span class="file-path-sub">{{ item }}</span>
               </div>
             </a-list-item>
           </template>