b67e14cced
- Introduced `PROJECT_STATUS.md` to provide a comprehensive overview of the MiroFish project, detailing the current status, completed features, and future development plans. - Added multiple documentation files in the frontend directory, including detailed descriptions of the homepage functionality, startup guide, and project completion summary. - Implemented a structured approach to document the project's architecture, API integration, and user interaction processes, enhancing clarity for developers and users alike. - Included a `.gitignore` file to manage ignored files and directories in the frontend project, improving project organization and cleanliness.
198 lines
4.6 KiB
Markdown
198 lines
4.6 KiB
Markdown
# 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: 清除浏览器缓存并刷新页面
|
|
|
|
## 联系方式
|
|
|
|
如有问题,请查看项目文档或联系开发团队。
|