import type { DropdownProps } from "antd"; import type React from "react"; /** 文件树节点数据 */ export interface FolderTreeData { title: React.ReactNode; path: string; content?: string; type?: "folder" | "file"; extra?: T; children?: FolderTreeData[]; } /** 文件内容加载服务 */ export interface FileContentService { loadFileContent(filePath: string): Promise; } /** 编辑节点信息 */ export interface EditNodeInfo { /** 完整路径 key */ key: string; /** 原始标题 */ originalTitle: string; /** 文件类型 */ type: "folder" | "file"; /** 当前输入值 */ currentValue: string; /** 编辑模式:重命名或新建 */ mode: "rename" | "create"; } /** 新建上下文 */ export interface CreateNodeContext { /** 父节点 key */ parentKey: string; /** 节点类型 */ type: "file" | "folder"; /** 附加数据 */ extra?: any; } /** FolderTree 命令式 API */ export interface FolderTreeRef { /** * 在指定父路径下新建文件或文件夹 * @param parentPath - 父节点完整路径(空字符串或 "/" 表示根路径) * @param options.type - 节点类型 * @param options.defaultName - 默认名称 * @param options.extra - 自定义附加数据 */ createNode: (parentPath: string, options: { type: "file" | "folder"; defaultName?: string; extra?: any; }) => void; } /** FolderTree 组件属性 */ export interface FolderTreeProps { /** 自定义类名 */ className?: string; /** 自定义样式 */ style?: React.CSSProperties; /** 树形数据 */ treeData: FolderTreeData[]; /** 自定义文件/文件夹图标,false 禁用图标 */ directoryIcons?: false | Record<"directory" | string, React.ReactNode | (() => React.ReactNode)>; /** 是否可选中文件 */ selectable?: boolean; /** 受控:当前选中的文件路径 */ selectedFile?: string[]; /** 默认选中的文件路径 */ defaultSelectedFile?: string[]; /** 选中文件变化回调 */ onSelectedFileChange?: (file: { path: string[]; title?: React.ReactNode; content?: string; extra?: any; }) => void; /** 受控:展开的路径 */ expandedPaths?: string[]; /** 默认展开的路径 */ defaultExpandedPaths?: string[]; /** 默认是否展开所有节点 */ defaultExpandAll?: boolean; /** 展开路径变化回调 */ onExpandedPathsChange?: (paths: string[]) => void; /** 目录树面板宽度 */ directoryTreeWidth?: number | string; /** 文件内容加载服务 */ fileContentService?: FileContentService; /** 空状态渲染 */ emptyRender?: false | React.ReactNode | (() => React.ReactNode); /** 自定义文件预览渲染 */ previewRender?: React.ReactNode | ((file: { content?: string; path: string[]; title?: React.ReactNode; language: string; }, info: { originNode: React.ReactNode; }) => React.ReactNode); /** 自定义目录标题 */ directoryTitle?: false | React.ReactNode | (() => React.ReactNode); /** 自定义预览标题 */ previewTitle?: false | React.ReactNode | ((info: { title: React.ReactNode; path: string[]; content: string; }) => React.ReactNode); /** 文件点击回调 */ onFileClick?: (filePath: string, content?: string, extra?: any) => void; /** 文件夹点击回调 */ onFolderClick?: (folderPath: string, extra?: any) => void; /** 更多操作菜单,传入节点和操作方法,返回 Dropdown menu 配置 */ moreActions?: (node: FolderTreeData, actions?: { startRename: () => void; createNode: (options: { type: "file" | "folder"; defaultName?: string; extra?: any; }) => void; }) => DropdownProps["menu"]; /** 是否显示连接线 */ showLine?: boolean | { showLeafIcon?: boolean | React.ReactNode; }; /** 自定义展开/收起图标 */ switcherIcon?: React.ReactNode | ((props: any) => React.ReactNode); /** 是否显示文件预览面板,默认 true */ showPreview?: boolean; /** * 拖拽模式 * - true | 'file': 只有文件(叶子节点)可拖拽 * - 'folder': 只有文件夹可拖拽 * - 'all': 文件和文件夹都可拖拽 * - false | undefined: 禁用拖拽 */ draggable?: boolean | "file" | "folder" | "all"; /** 重命名确认回调,失焦或回车时触发 */ onRename?: (info: { /** 节点完整路径 key */ key: string; /** 原始标题 */ oldTitle: React.ReactNode; /** 新标题 */ newTitle: string; /** 原始节点数据 */ node: FolderTreeData; }) => void; /** 新建确认回调,失焦或回车时触发 */ onCreate?: (info: { /** 父节点 key */ parentKey: string; /** 用户输入的名称 */ name: string; /** 节点类型 */ type: "file" | "folder"; /** 附加数据 */ extra?: any; }) => void; /** 拖拽完成回调 */ onDrop?: (info: { /** 被拖拽节点的文件名 */ fileName: React.ReactNode; /** 被拖拽节点的 extra 数据 */ extra: any; /** 拖拽前的完整路径 */ oldPath: string; /** 拖拽完成后的新路径 */ newPath: string; /** 被拖拽的节点 */ dragNode: FolderTreeData; /** 目标节点 */ dropNode: FolderTreeData; }) => void; }