# 3D文件树界面程序

一个交互式的3D文件树可视化工具，允许用户输入文件夹路径并以3D形式浏览文件结构。

## 功能特性

- **文件夹路径输入**：用户可以通过界面输入任意文件夹路径
- **3D文件树可视化**：将文件夹结构以3D树状图形式展示
- **交互式浏览**：支持旋转、缩放、平移等3D交互操作
- **文件类型识别**：不同文件类型使用不同颜色和图标区分
- **实时更新**：当文件夹内容变化时，树状图自动更新

## 技术栈

- **前端框架**：Vue.js 3 + TypeScript
- **3D图形库**：Three.js
- **后端框架**：Django + Django REST Framework (DRF)
- **数据库**：SQLite (开发) / PostgreSQL (生产)
- **样式框架**：Element Plus 或 Vuetify
- **构建工具**：Vite

## 项目结构

```
IamHere/
├── backend/                 # Django后端
│   ├── filetree_api/       # Django应用
│   │   ├── migrations/
│   │   ├── models.py       # 数据模型
│   │   ├── serializers.py  # DRF序列化器
│   │   ├── views.py        # API视图
│   │   └── urls.py         # 路由配置
│   ├── config/             # Django配置
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── manage.py
│   └── requirements.txt
├── frontend/               # Vue.js前端
│   ├── src/
│   │   ├── components/     # Vue组件
│   │   │   ├── FileTree3D/ # 3D文件树组件
│   │   │   ├── PathInput/  # 路径输入组件
│   │   │   └── Controls/   # 控制面板组件
│   │   ├── utils/
│   │   │   ├── api.js      # API调用工具
│   │   │   └── treeBuilder.js # 树状结构构建工具
│   │   ├── App.vue         # 主应用组件
│   │   └── main.js         # 入口文件
│   ├── public/
│   ├── package.json
│   └── vite.config.js
├── docs/                   # 文档
└── README.md
```

## 安装与运行

### 前提条件

- Python 3.8 或更高版本
- Node.js 16 或更高版本
- pip 和 npm

### 后端安装步骤

1. 进入后端目录
```bash
cd backend
```

2. 创建虚拟环境并激活
```bash
python -m venv venv
# Windows
venv\Scripts\activate
# Linux/Mac
source venv/bin/activate
```

3. 安装依赖
```bash
pip install -r requirements.txt
```

4. 运行数据库迁移
```bash
python manage.py migrate
```

5. 启动Django开发服务器
```bash
python manage.py runserver
```

### 前端安装步骤

1. 进入前端目录
```bash
cd frontend
```

2. 安装依赖
```bash
npm install
```

3. 启动开发服务器
```bash
npm run dev
```

4. 打开浏览器访问 `http://localhost:5173`

## 使用说明

### 基本操作

1. **输入文件夹路径**：在界面顶部的输入框中输入要浏览的文件夹完整路径
2. **加载文件树**：点击"加载"按钮或按Enter键生成3D文件树
3. **3D交互控制**：
   - 鼠标左键拖动：旋转视角
   - 鼠标滚轮：缩放视图
   - 鼠标右键拖动：平移视图
4. **节点交互**：点击文件节点查看详细信息

### 文件类型标识

- 📁 **文件夹**：蓝色立方体
- 📄 **文本文件**：绿色文档图标
- 🖼️ **图片文件**：黄色图片图标
- 📊 **数据文件**：紫色表格图标
- ⚙️ **可执行文件**：红色齿轮图标
- 🔧 **配置文件**：灰色工具图标

## 开发计划

### 第一阶段：基础功能
- [ ] 创建基本的React应用结构
- [ ] 实现文件夹路径输入界面
- [ ] 集成Three.js基础3D场景
- [ ] 实现简单的文件树数据结构

### 第二阶段：3D可视化
- [ ] 开发3D文件树渲染组件
- [ ] 实现交互控制（旋转、缩放、平移）
- [ ] 添加文件类型图标系统
- [ ] 优化3D性能和大文件树处理

### 第三阶段：增强功能
- [ ] 添加文件搜索功能
- [ ] 实现文件操作（重命名、删除等）
- [ ] 添加主题切换
- [ ] 支持多语言界面

## 贡献指南

欢迎提交Issue和Pull Request来改进这个项目！

### 开发环境设置

1. Fork 项目仓库
2. 克隆你的fork到本地
3. 创建功能分支：`git checkout -b feature/新功能`
4. 提交更改：`git commit -am '添加新功能'`
5. 推送到分支：`git push origin feature/新功能`
6. 创建Pull Request

### 代码规范

- 使用ES6+语法
- 遵循项目现有的代码风格
- 添加适当的注释
- 确保代码通过ESLint检查

## 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 联系方式

如有问题或建议，请通过以下方式联系：
- 提交GitHub Issue
- 发送邮件至：your-email@example.com

## 更新日志

### v1.0.0 (计划中)
- 初始版本发布
- 基础3D文件树功能
- 文件夹路径输入界面
- 基本的交互控制