# builder-bf

**Repository Path**: LiuChamp/builder-bf

## Basic Information

- **Project Name**: builder-bf
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-14
- **Last Updated**: 2025-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 行为树编辑器

这是一个使用 React + TypeScript + Vite 构建的行为树编辑器。

## 核心功能使用说明

该编辑器允许用户通过拖拽、连接和配置节点来构建、可视化和验证行为树。

-   **画布操作**: 支持节点的拖拽、选择、删除，以及节点之间的连接与断开。
-   **节点类型**: 提供了多种行为树节点类型（如 Sequence, Selector, Action, Condition, Decorator）以构建复杂的逻辑。
-   **属性编辑**: 选中节点后，可在右侧属性面板编辑节点的自定义参数，并支持实时验证。
-   **导入/导出**: 支持将行为树结构导出为 JSON 文件，也可从 JSON 文件导入，方便与外部系统集成和数据持久化。
-   **自动布局**: 提供一键自动布局功能，帮助用户快速整理混乱的节点排列。
-   **行为树验证**: 实时检查行为树结构的有效性（如单一根节点、无循环、子节点数量约束），并通过问题面板和节点视觉反馈提示错误和警告。

## 项目结构

- `src/components`: 可复用 UI 组件。
- `src/store`: Zustand 状态管理模块。
- `src/hooks`: 自定义 React Hooks。
- `src/types`: TypeScript 类型定义。
- `src/utils`: 工具函数。
- `src/pages`: 页面级组件。

## 开发环境启动

1. 安装依赖: `pnpm install`
2. 启动开发服务器: `pnpm run dev`
3. 运行测试: `pnpm test`

## 技术栈

本项目主要基于以下技术栈构建：

-   **前端框架**: `React.js` (使用 `Vite` 进行构建)
-   **语言**: `TypeScript`
-   **状态管理**: `Zustand`
-   **流程图库**: `@xyflow/react` (原 `React Flow`)
-   **UI 组件库**: `@mui/material` (原 `Material-UI`)
-   **表单管理与验证**: `react-hook-form` 和 `zod`
-   **自动布局**: `dagre`
-   **代码质量**: `ESLint`, `Prettier`

## 项目进度

### 已完成的主要功能 (Epic 0, 1, 2):
- **项目初始化与基础架构**: 已搭建项目骨架、配置开发环境、定义核心类型。
- **画布核心功能实现**: React Flow 画布已集成，支持节点增删改查、连线及自定义节点显示。
- **节点交互与属性编辑**:
  - 任务 2.1: 实现节点连接逻辑约束 (已完成)
  - 任务 2.2: 创建属性编辑面板 (Properties Panel) (已完成)
  - 任务 2.3: 集成 React Hook Form 和 Zod, 为每种可配置的节点创建 Zod schema 用于验证其属性，在属性面板中，根据选中节点的类型动态渲染对应的表单 (已完成)
  - 任务 2.4: 实现属性双向绑定 (已完成)

### 已完成的主要功能 (Epic 0, 1, 2, 3):
- **JSON 导入与导出**: 已完成所有任务 (3.1, 3.2, 3.3, 3.4)。已实现完整的 JSON 导入导出功能，包括数据转换工具函数 (Flow -> Hierarchy & Hierarchy -> Flow) 和单元测试，以及导入导出 UI 和错误处理。

### 已完成的主要功能 (Epic 0, 1, 2, 3, 4.2):
- **行为树验证与用户反馈**: 已完成任务 4.2，实现了验证逻辑与 Store 的集成。
### 已完成的主要功能 (Epic 0, 1, 2, 3, 4):
- **行为树验证与用户反馈**: 已完成所有任务 (4.1, 4.2, 4.3)。已实现行为树验证器、与 Store 的集成以及验证结果的 UI 反馈。

### 已完成的主要功能 (Epic 5.1):
- **UX 优化与最终完善**: 已完成任务 5.1，实现了行为树的自动布局功能。
- **UX 优化与最终完善**: 已完成任务 5.2，完善了 UI/UX 细节（统一主题、间距、字体、Tooltip 提示）。
### 待完成的主要功能 (Epic 5):
- **UX 优化与最终完善**: 进一步优化用户体验和准备生产部署。（剩余 5.3, 5.4）

更多详细任务进度，请参考 `docs/tasks.md`。

## ESLint 和 Prettier 配置

本项目使用 ESLint 和 Prettier 进行代码质量管理和格式化。
- `.eslintrc.cjs`: ESLint 配置文件。
- `.prettierrc.cjs`: Prettier 配置文件。

VSCode 已配置为在保存时自动格式化和修复 ESLint 错误。