MarkLite/src/renderer/components/FileTree/FileTree.tsx

import React from 'react'
import { File, Folder, ChevronRight } from '../Icons'
import type { FileNode } from '../../types/file'

interface FileTreeProps {
  nodes: FileNode[]
  depth: number
  expandedDirs: string[]
  toggleDir: (path: string) => void
  activeFilePath: string | null
  onFileClick: (path: string) => void
}

/** AR-02: 从 Sidebar.tsx 提取的递归文件树组件 */
export const FileTree = React.memo(function FileTree({
  nodes,
  depth,
  expandedDirs,
  toggleDir,
  activeFilePath,
  onFileClick,
}: FileTreeProps) {
  return (
    <>
      {nodes.map((node: FileNode) => {
        const isExpanded = node.type === 'dir' && expandedDirs.includes(node.path)
        const isActive = node.type === 'file' && node.path === activeFilePath

        return (
          <React.Fragment key={node.path}>
            <div
              className={`tree-item ${isActive ? 'active' : ''}`}
              style={{ paddingLeft: 8 + depth * 16 + 'px' }}
              role="treeitem"
              aria-expanded={node.type === 'dir' ? isExpanded : undefined}
              aria-selected={isActive}
              aria-label={node.name}
              tabIndex={0}
              onClick={() => {
                if (node.type === 'dir') {
                  toggleDir(node.path)
                } else {
                  onFileClick(node.path)
                }
              }}
              onKeyDown={e => {
                if (e.key === 'Enter' || e.key === ' ') {
                  e.preventDefault()
                  if (node.type === 'dir') {
                    toggleDir(node.path)
                  } else {
                    onFileClick(node.path)
                  }
                }
              }}
            >
              {node.type === 'dir' ? (
                <>
                  <span className={`tree-arrow ${isExpanded ? 'expanded' : ''}`} aria-hidden="true">
                    <ChevronRight size={10} />
                  </span>
                  <span className="tree-icon" aria-hidden="true">
                    <Folder size={14} />
                  </span>
                </>
              ) : (
                <>
                  <span style={{ width: '16px', flexShrink: 0 }} />
                  <span className="tree-icon" aria-hidden="true">
                    <File size={14} />
                  </span>
                </>
              )}
              <span className="tree-name">{node.name}</span>
            </div>
            {isExpanded && node.children && (
              <div role="group">
                <FileTree
                  nodes={node.children}
                  depth={depth + 1}
                  expandedDirs={expandedDirs}
                  toggleDir={toggleDir}
                  activeFilePath={activeFilePath}
                  onFileClick={onFileClick}
                />
              </div>
            )}
          </React.Fragment>
        )
      })}
    </>
  )
})

FileTree.displayName = 'FileTree'