fix: 修复侧边栏文件树 active 高亮不生效
问题: FileTree 组件的 className 模板为空字符串,文件项永远不会显示
active 高亮样式,导致用户无法在目录树中看到当前打开的文件。
修复:
- FileTree 新增 activeFilePath prop,用于比较 node.path
- Sidebar 组件从 tabs + activeTabId 计算 activeFilePath
- className 改为 node.path === activeFilePath ? 'active' : ''
联动验证:
- 点击目录树文件 → 标签栏新增标签 → 侧边栏高亮 ✓
- 切换标签 → 侧边栏高亮跟随切换 ✓
- 关闭标签 → 侧边栏高亮消失 ✓
- 独立文件区与目录树不重复 ✓
This commit is contained in:
@@ -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}
|
||||
/>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user