# create-tree

**Repository Path**: XuIsCoding/create-tree

## Basic Information

- **Project Name**: create-tree
- **Description**: 行动树
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-02
- **Last Updated**: 2026-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Action Tree - 智能目标规划助手

一个结合AI的可视化目标规划工具，帮助用户将大目标拆解为可执行的行动树。

## ✨ 核心特性

### 1. AI驱动的目标拆解
- 输入你的目标，AI自动生成结构化的行动树
- 每个节点包含任务描述、时间规划和状态追踪

### 2. 可视化行动树
- 基于React Flow的流程图展示
- 支持拖拽调整节点位置
- 实时状态更新和完成动画

### 3. 智能对话助手
- 每个节点可独立进行AI对话
- 具有记忆功能，支持节点间上下文传递
- 对话索引侧边栏，快速定位历史问答

### 4. 简洁现代的UI
- 基于shadcn/ui组件库
- 流畅的动画效果（Framer Motion）
- 完成任务时的成就感反馈

## 🛠 技术栈

### 前端
- **框架**: React 18 + TypeScript
- **构建工具**: Vite
- **UI组件**: shadcn/ui + Tailwind CSS
- **可视化**: React Flow
- **动画**: Framer Motion
- **状态管理**: Zustand
- **路由**: React Router
- **HTTP客户端**: Axios

### 后端
- **运行时**: Node.js
- **框架**: Express
- **AI集成**: 支持 OpenAI API 格式（OpenAI、硅基流动、DeepSeek 等）
- **语言**: TypeScript

## 📦 安装

### 前置要求
- Node.js >= 18
- npm 或 yarn

### 安装步骤

1. 克隆项目
```bash
cd create-tree
```

2. 安装前端依赖
```bash
cd frontend
npm install
```

3. 安装后端依赖
```bash
cd ../backend
npm install
```

4. 配置环境变量
```bash
# 在 backend 目录下
cp .env.example .env
# 编辑 .env 文件，配置你的 AI 服务
```

`.env` 配置示例：
```env
PORT=5000

# AI 服务配置
AI_API_KEY=your_api_key_here
AI_BASE_URL=https://api.siliconflow.cn/v1
AI_MODEL=deepseek-ai/DeepSeek-V3
```

## 🚀 运行

### 开发模式

1. 启动后端服务
```bash
cd backend
npm run dev
```
后端服务将运行在 `http://localhost:5000`

2. 启动前端服务（新开终端）
```bash
cd frontend
npm run dev
```
前端应用将运行在 `http://localhost:3000`

### 生产构建

```bash
# 构建前端
cd frontend
npm run build

# 构建后端
cd ../backend
npm run build
npm start
```

## 📖 使用指南

### 1. 创建行动树
- 在首页输入你的目标（越具体越好）
- 点击"开始规划"按钮
- AI将生成一个包含多个节点的行动树

### 2. 管理节点
- 点击节点查看详情
- 拖拽节点调整位置
- 点击"标记完成"更新状态
- 完成时会有动画反馈

### 3. AI对话
- 在中间的聊天面板输入问题
- 选中节点后，对话会关联到该节点
- AI会基于节点上下文和历史记忆回答
- 右侧索引栏可快速定位历史问题

## 🎨 设计理念

- **简洁优先**: 去除冗余元素，专注核心功能
- **视觉反馈**: 通过动画增强交互的愉悦感
- **上下文感知**: AI对话理解当前节点和历史对话
- **游戏化**: 完成任务有成就感，但不过度

## 🔧 配置

### AI 服务配置
项目支持任何兼容 OpenAI API 格式的 AI 服务。在 `backend/.env` 中配置：

```env
AI_API_KEY=your_api_key_here      # API Key
AI_BASE_URL=https://api.xxx.com/v1 # API 基础地址
AI_MODEL=model-name                # 模型名称
```

**常用服务配置示例：**

硅基流动：
```env
AI_BASE_URL=https://api.siliconflow.cn/v1
AI_MODEL=deepseek-ai/DeepSeek-V3
```

OpenAI：
```env
AI_BASE_URL=https://api.openai.com/v1
AI_MODEL=gpt-4-turbo-preview
```

### 调整UI主题
在 `frontend/src/index.css` 中修改CSS变量

## 📝 待办事项

- [ ] 添加数据持久化（数据库）
- [ ] 用户认证系统
- [ ] 导出行动树为PDF/图片
- [ ] 移动端适配
- [ ] 多人协作功能
- [ ] 更多动画效果

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可

MIT License