Yusaki/MiroFish
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
MiroFish/frontend/启动指南.md
666ghj b67e14cced Add project status report and frontend documentation 
- 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.
2025-12-10 14:49:11 +08:00

4.6 KiB
Raw Blame History

MiroFish 前端启动指南

项目已完成功能

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

快速开始

1. 启动后端服务

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

# 激活conda环境
conda activate MiroFish

# 启动Flask服务
python run.py

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

2. 启动前端服务

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

如需重新启动:

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: 清除浏览器缓存并刷新页面

联系方式

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