From 8db6396fc7a2ddc4d5730feaebd177f0aa48315b Mon Sep 17 00:00:00 2001
From: thzxx <thzxx@gitee.com>
Date: Wed, 27 May 2026 21:02:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E6=96=87=E4=BB=B6=E6=A0=91=20active=20=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE=E4=B8=8D=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题: FileTree 组件的 className 模板为空字符串，文件项永远不会显示
      active 高亮样式，导致用户无法在目录树中看到当前打开的文件。

修复:
- FileTree 新增 activeFilePath prop，用于比较 node.path
- Sidebar 组件从 tabs + activeTabId 计算 activeFilePath
- className 改为 node.path === activeFilePath ? 'active' : ''

联动验证:
- 点击目录树文件 → 标签栏新增标签 → 侧边栏高亮 ✓
- 切换标签 → 侧边栏高亮跟随切换 ✓
- 关闭标签 → 侧边栏高亮消失 ✓
- 独立文件区与目录树不重复 ✓
---
 src/renderer/components/Sidebar/Sidebar.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/Sidebar/Sidebar.tsx b/src/renderer/components/Sidebar/Sidebar.tsx
index a701146..f376fc6 100644
--- a/src/renderer/components/Sidebar/Sidebar.tsx
+++ b/src/renderer/components/Sidebar/Sidebar.tsx
@@ -18,6 +18,9 @@ export function Sidebar() {
   const setTree = useSidebarStore(s => s.setTree)
   const isVisible = useSidebarStore(s => s.isVisible)
 
+  // 计算当前活动标签的文件路径（用于文件树高亮）
+  const activeFilePath = tabs.find(t => t.id === activeTabId)?.filePath ?? null
+
   const [isResizing, setIsResizing] = useState(false)
   const sidebarRef = useRef<HTMLDivElement>(null)
 
@@ -139,6 +142,7 @@ export function Sidebar() {
               expandedDirs={expandedDirs}
               toggleDir={toggleDir}
               activeTabId={activeTabId}
+              activeFilePath={activeFilePath}
               onFileClick={handleFileClick}
             />
           </>
@@ -155,12 +159,13 @@ export function Sidebar() {
 }
 
 // 文件树递归组件
-function FileTree({ nodes, depth, expandedDirs, toggleDir, activeTabId, onFileClick }: {
+function FileTree({ nodes, depth, expandedDirs, toggleDir, activeTabId, activeFilePath, onFileClick }: {
   nodes: FileNode[]
   depth: number
   expandedDirs: Set<string>
   toggleDir: (path: string) => void
   activeTabId: string | null
+  activeFilePath: string | null
   onFileClick: (path: string) => void
 }) {
   return (
@@ -168,7 +173,7 @@ function FileTree({ nodes, depth, expandedDirs, toggleDir, activeTabId, onFileCl
       {nodes.map(node => (
         <React.Fragment key={node.path}>
           <div
-            className={`tree-item ${node.type === 'file' && activeTabId ? '' : ''}`}
+            className={`tree-item ${node.type === 'file' && node.path === activeFilePath ? 'active' : ''}`}
             style={{ paddingLeft: (8 + depth * 16) + 'px' }}
             onClick={() => {
               if (node.type === 'dir') {
@@ -211,6 +216,7 @@ function FileTree({ nodes, depth, expandedDirs, toggleDir, activeTabId, onFileCl
               expandedDirs={expandedDirs}
               toggleDir={toggleDir}
               activeTabId={activeTabId}
+              activeFilePath={activeFilePath}
               onFileClick={onFileClick}
             />
           )}