fix: 修复侧边栏文件树 active 高亮不生效

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

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

联动验证:
- 点击目录树文件 → 标签栏新增标签 → 侧边栏高亮 ✓
- 切换标签 → 侧边栏高亮跟随切换 ✓
- 关闭标签 → 侧边栏高亮消失 ✓
- 独立文件区与目录树不重复 ✓
This commit is contained in:
thzxx
2026-05-27 21:02:45 +08:00
parent 2c681a4142
commit 8db6396fc7
+8 -2
View File
@@ -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}
/>
)}