# MiroFish 前端启动指南

## 项目已完成功能

✅ Vue 3 + Vite 脚手架搭建完成
✅ 项目目录结构规划完成
✅ API接口封装(含容错重试机制)
✅ 首页设计完成(极简黑白线条风)
✅ 第二页基础框架完成
✅ 路由配置完成
✅ 开发服务器成功启动

## 快速开始

### 1. 启动后端服务

```bash
# 进入后端目录
cd /Users/guohangjiang/Desktop/MiroFish/backend

# 激活conda环境
conda activate MiroFish

# 启动Flask服务
python run.py
```

后端服务将运行在: http://localhost:5001

### 2. 启动前端服务

前端开发服务器已经启动,访问地址:
**http://localhost:3000/**

如需重新启动:
```bash
cd /Users/guohangjiang/Desktop/MiroFish/frontend
npm run dev
```

## 首页功能说明

### 页面布局
- **Logo区域**: 居中展示MiroFish品牌Logo
- **标语**: "上传任意报告,模拟世界即刻开始"
- **表单区域**:
  - 模拟需求输入框(必填)
  - 项目名称输入框(可选)
  - 文件上传区域(支持拖拽,必填)
  - 额外说明输入框(可选)
  - 开始模拟按钮

### 交互功能
1. **文件上传**:
   - 支持点击选择文件
   - 支持拖拽上传
   - 支持多文件上传
   - 支持格式: PDF、Markdown(.md)、TXT
   - 可以删除已选择的文件

2. **表单验证**:
   - 必须填写模拟需求
   - 必须上传至少一个文件
   - 满足条件后"开始模拟"按钮才可点击

3. **提交流程**:
   - 点击"开始模拟"按钮
   - 显示加载状态
   - 调用后端API: `POST /api/graph/ontology/generate`
   - 成功后自动跳转到处理页面

4. **错误处理**:
   - API调用失败显示错误提示
   - 自动重试机制(最多3次)
   - 友好的用户提示信息

## 第二页功能说明

### 页面布局
- **左侧面板**: 实时图谱展示区
- **右侧面板**: Step 1 - 现实种子构建流程

### 流程步骤
1. 文档分析
2. 本体生成
3. 图谱构建
4. 完成

### 自动化功能
- 自动加载项目信息
- 自动开始图谱构建
- 自动轮询任务状态(每2秒)
- 实时更新构建进度
- 构建完成后加载图谱数据

## 设计风格特点

### 极简黑白线条风
- **颜色**: 纯黑(#000000) + 纯白(#FFFFFF)
- **线条**: 1-2px实线边框
- **字体**: 系统默认无衬线字体
- **布局**: 清晰的网格和间距
- **交互**: 简洁的hover效果

### 响应式设计
- 支持桌面端(>=1024px)
- 支持平板端(768px-1024px)
- 支持移动端(<768px)

## API接口集成

### 已实现接口
1. `POST /api/graph/ontology/generate` - 生成本体
2. `POST /api/graph/build` - 构建图谱
3. `GET /api/graph/task/{taskId}` - 查询任务状态
4. `GET /api/graph/data/{graphId}` - 获取图谱数据
5. `GET /api/graph/project/{projectId}` - 获取项目信息

### 容错机制
- 自动重试(最多3次)
- 指数退避(1s -> 2s -> 4s)
- 超时处理(5分钟)
- 错误提示

## 目录结构

```
frontend/
├── src/
│   ├── api/                    # API接口
│   │   ├── index.js           # axios配置、重试机制
│   │   └── graph.js           # 图谱相关接口
│   ├── assets/
│   │   └── logo/              # Logo图片
│   ├── views/
│   │   ├── Home.vue           # 首页
│   │   └── Process.vue        # 处理页面
│   ├── router/
│   │   └── index.js           # 路由配置
│   ├── App.vue                # 根组件
│   └── main.js                # 入口文件
├── .env.development           # 开发环境配置
├── vite.config.js             # Vite配置
└── package.json               # 依赖配置
```

## 开发说明

### 技术栈
- Vue 3 (Composition API)
- Vite 7
- Vue Router 4
- Axios

### 开发规范
- 使用 `<script setup>` 语法
- 组件样式使用 scoped CSS
- API调用统一封装在 `src/api/` 目录
- 使用 Vue Router 管理页面路由

### 下一步开发
1. 图谱可视化实现(可使用D3.js或ECharts)
2. 更多页面功能开发
3. 完善错误处理
4. 添加单元测试

## 测试建议

### 功能测试
1. 测试文件上传(拖拽、点击选择)
2. 测试表单验证
3. 测试API调用和错误处理
4. 测试页面跳转
5. 测试响应式布局

### 浏览器兼容性
- Chrome (推荐)
- Firefox
- Safari
- Edge

## 常见问题

### Q: 前端无法连接后端?
A: 检查后端服务是否运行在 http://localhost:5001

### Q: 文件上传失败?
A: 
1. 检查文件格式(仅支持PDF、MD、TXT)
2. 检查文件大小(后端限制50MB)
3. 检查网络连接

### Q: 页面样式异常?
A: 清除浏览器缓存并刷新页面

## 联系方式

如有问题,请查看项目文档或联系开发团队。