实现 Folder 组件 - 对齐清单

[cc-hearts]

实现 Folder 组件 - 对齐清单

组件概述

Folder 组件是一个文件浏览器组件，包含目录树和文件预览功能，使用 Splitter 分割左右面板。

需要对齐的核心内容

1. 技术栈转换

React 版本	Vue 3 版本
react / react-dom	Vue 3 + TSX
antd (React 版)	antdv-next
@ant-design/icons	@antdv-next/icons
react-syntax-highlighter	需要寻找 Vue 3 替代方案
@rc-component/util	使用项目内的 _utils

2. 组件结构对齐

需要创建以下文件结构：

packages/x/components/folder/
├── index.tsx              # 主组件入口
├── DirectoryTree.tsx      # 目录树子组件
├── FilePreview.tsx        # 文件预览子组件
├── style/                 # 样式目录
│   └── index.ts
├── __tests__/             # 测试目录
│   └── folder.test.tsx
└── components/            # 可选的内部组件目录（如需要）

3. 核心 Hook 依赖对齐

需要使用项目已有的 hooks：

• ✅ useXComponentConfig - 已存在于 ../_utils/hooks/use-x-component-config
• ✅ useXProviderContext - 已存在于 ../x-provider
• ✅ useLocale - 已存在于 ../locale
• ✅ useProxyImperativeHandle - 已存在于 ../_util/hooks/use-proxy-imperative-handle
• ✅ useControlledState - 需要检查项目是否已有，或从 @antdv-next/util 导入
• ✅ useStyle - 组件样式 hook

4. Props 类型定义对齐

按照项目约定使用：

• PropType<T> 用于复杂类型
• ClassValue / StyleValue 用于样式类型
• VNodeChild 用于节点类型
• SlotsType<T> 用于插槽类型（如需要）
• 事件使用 emits 而非 on* props

5. 样式系统对齐

• 使用项目的 CSS-in-JS 方案
• 类名前缀：antd-folder 或 ant-folder（参考其他组件）
• 使用 hashId 和 cssVarCls

6. 第三方依赖替代

React 依赖	Vue 替代方案
react-syntax-highlighter	prismjs + Vue 封装 或 vue-prism-component
clsx	Vue 内置的 :class 绑定 + 项目中的 class 工具

7. 类型导出对齐

需要在 index.tsx 中导出：

• 主组件 Folder（默认导出）
• 所有 Props 类型：FolderProps, FolderRef, FolderTreeData, SemanticType, FileContentService
• 子组件类型（如需要）

8. 组件入口对齐

在 packages/x/components/index.ts 中添加：

import Folder from './folder';

// components 数组中添加
Folder,

// export 中添加
export { Folder };

// 类型导出中添加
export type { FolderProps, FolderRef, FolderTreeData } from './folder';

9. 关键功能实现点

1. 目录树功能：基于 antdv-next/tree 的 DirectoryTree
2. Splitter 布局：基于 antdv-next/splitter
3. 文件预览：语法高亮展示
4. 文件内容服务：支持异步加载文件内容
5. 图标系统：支持自定义目录和文件图标
6. 受控/非受控模式：选中文件和展开路径

10. 参考组件

可以参考以下已实现的组件来对齐代码风格：

• ✅ FileCard 组件 - 相似的文件处理逻辑
• ✅ Bubble 组件 - TSX 写法参考
• ✅ Conversations 组件 - 复杂组件结构参考

下一步行动

1. 创建组件基础结构
2. 逐个实现子组件（DirectoryTree → FilePreview → 主组件）
3. 添加样式
4. 编写测试
5. 集成到组件库入口