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 setTree = useSidebarStore(s => s.setTree)
|
||||||
const isVisible = useSidebarStore(s => s.isVisible)
|
const isVisible = useSidebarStore(s => s.isVisible)
|
||||||
|
|
||||||
|
// 计算当前活动标签的文件路径(用于文件树高亮)
|
||||||
|
const activeFilePath = tabs.find(t => t.id === activeTabId)?.filePath ?? null
|
||||||
|
|
||||||
const [isResizing, setIsResizing] = useState(false)
|
const [isResizing, setIsResizing] = useState(false)
|
||||||
const sidebarRef = useRef<HTMLDivElement>(null)
|
const sidebarRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
@@ -139,6 +142,7 @@ export function Sidebar() {
|
|||||||
expandedDirs={expandedDirs}
|
expandedDirs={expandedDirs}
|
||||||
toggleDir={toggleDir}
|
toggleDir={toggleDir}
|
||||||
activeTabId={activeTabId}
|
activeTabId={activeTabId}
|
||||||
|
activeFilePath={activeFilePath}
|
||||||
onFileClick={handleFileClick}
|
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[]
|
nodes: FileNode[]
|
||||||
depth: number
|
depth: number
|
||||||
expandedDirs: Set<string>
|
expandedDirs: Set<string>
|
||||||
toggleDir: (path: string) => void
|
toggleDir: (path: string) => void
|
||||||
activeTabId: string | null
|
activeTabId: string | null
|
||||||
|
activeFilePath: string | null
|
||||||
onFileClick: (path: string) => void
|
onFileClick: (path: string) => void
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
@@ -168,7 +173,7 @@ function FileTree({ nodes, depth, expandedDirs, toggleDir, activeTabId, onFileCl
|
|||||||
{nodes.map(node => (
|
{nodes.map(node => (
|
||||||
<React.Fragment key={node.path}>
|
<React.Fragment key={node.path}>
|
||||||
<div
|
<div
|
||||||
className={`tree-item ${node.type === 'file' && activeTabId ? '' : ''}`}
|
className={`tree-item ${node.type === 'file' && node.path === activeFilePath ? 'active' : ''}`}
|
||||||
style={{ paddingLeft: (8 + depth * 16) + 'px' }}
|
style={{ paddingLeft: (8 + depth * 16) + 'px' }}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (node.type === 'dir') {
|
if (node.type === 'dir') {
|
||||||
@@ -211,6 +216,7 @@ function FileTree({ nodes, depth, expandedDirs, toggleDir, activeTabId, onFileCl
|
|||||||
expandedDirs={expandedDirs}
|
expandedDirs={expandedDirs}
|
||||||
toggleDir={toggleDir}
|
toggleDir={toggleDir}
|
||||||
activeTabId={activeTabId}
|
activeTabId={activeTabId}
|
||||||
|
activeFilePath={activeFilePath}
|
||||||
onFileClick={onFileClick}
|
onFileClick={onFileClick}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user