Yusaki/MiroFish
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance Step5Interaction component with improved tool description and memory feature

Browse source 
- Updated the subtitle of the Report Agent Tools Card to highlight the agent's capability of utilizing MiroFish's complete memory.
- This enhancement aims to provide users with clearer information about the tool's functionality and its advantages in report generation.
This commit is contained in:
666ghj 2025-12-16 20:17:31 +08:00
parent cc094e48ce
commit 9db7781ee3
6 changed files with 1 additions and 5174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

303
PROJECT_STATUS.md
View file

@ -1,303 +0,0 @@
# MiroFish 项目状态报告
## 项目概览
MiroFish是一个社交媒体舆论模拟系统,采用前后端分离架构。
## 完成情况
### ✅ 后端 (Flask)
- [x] RESTful API架构
- [x] 知识图谱构建(Zep)
- [x] LLM集成(OpenAI兼容接口)
- [x] 本体生成服务
- [x] 图谱构建服务
- [x] 模拟管理服务
- [x] 容错重试机制
- [x] 详细的API文档
**后端地址**: http://localhost:5001
### ✅ 前端 (Vue 3)
- [x] Vue 3 + Vite脚手架搭建
- [x] 项目目录结构规划
- [x] 首页设计完成(极简黑白线条风)
- [x] 文件上传功能(支持拖拽)
- [x] API接口封装(含重试机制)
- [x] 路由管理(Vue Router 4)
- [x] 第二页基础框架
- [x] 自动轮询任务状态
- [x] 响应式设计
**前端地址**: http://localhost:3000
## 目录结构
```
MiroFish/
├── backend/ # 后端服务
│ ├── app/
│ │ ├── api/ # API路由
│ │ ├── services/ # 业务逻辑
│ │ ├── models/ # 数据模型
│ │ └── utils/ # 工具类
│ ├── scripts/ # 模拟脚本
│ ├── uploads/ # 数据存储
│ ├── run.py # 启动入口
│ └── requirements.txt # Python依赖
│
├── frontend/ # 前端项目
│ ├── src/
│ │ ├── api/ # API接口封装
│ │ ├── assets/ # 静态资源
│ │ ├── views/ # 页面组件
│ │ ├── router/ # 路由配置
│ │ ├── App.vue # 根组件
│ │ └── main.js # 入口文件
│ ├── .env.development # 开发环境配置
│ ├── vite.config.js # Vite配置
│ └── package.json # 依赖配置
│
├── static/ # 共享静态资源
│ └── image/
│ └── MiroFish_logo_compressed.jpeg
│
├── mydoc/ # 项目文档
│ ├── MiroFish文档.md
│ └── 前端设计思路.md
│
└── .env # 环境配置(后端)
```
## 首页功能展示
### 页面元素
1. **Logo**: MiroFish品牌标识(居中展示)
2. **标语**: "上传任意报告,模拟世界即刻开始"
3. **模拟需求输入框**: 用户描述模拟需求
4. **项目名称**: 可选的项目命名
5. **文件上传区域**:
- 支持拖拽上传
- 支持点击选择
- 支持多文件
- 格式: PDF、Markdown、TXT
6. **额外说明**: 可选的补充信息
7. **开始模拟按钮**: 提交表单,调用API
### 设计风格
- **极简黑白线条风**
- 纯黑(#000000) + 纯白(#FFFFFF)
- 1-2px实线边框
- 清晰的排版和间距
- 简洁的交互动画
### 交互流程
1. 用户填写模拟需求
2. 上传相关文档
3. 点击"开始模拟"
4. 系统调用 `/api/graph/ontology/generate` 接口
5. 显示加载状态
6. 成功后跳转到处理页面 `/process/:projectId`
## 第二页功能
### 布局
- **左侧**: 实时图谱可视化
- **右侧**: Step 1 - 现实种子构建流程
### 自动化流程
1. 自动加载项目信息
2. 自动开始图谱构建
3. 轮询任务状态(每2秒)
4. 实时更新进度
5. 完成后加载图谱数据
### 流程步骤
- [x] 文档分析
- [x] 本体生成
- [x] 图谱构建
- [x] 完成
## API接口实现
### 已实现的接口调用
1. **生成本体**: `POST /api/graph/ontology/generate`
- multipart/form-data格式
- 包含文件和表单数据
- 自动重试机制
2. **构建图谱**: `POST /api/graph/build`
- 自动触发
- 返回任务ID
3. **查询任务**: `GET /api/graph/task/{taskId}`
- 轮询机制
- 每2秒查询一次
4. **获取图谱**: `GET /api/graph/data/{graphId}`
- 构建完成后加载
5. **获取项目**: `GET /api/graph/project/{projectId}`
- 页面加载时获取
## 容错机制
### 前端
- API请求自动重试(最多3次)
- 指数退避策略(1s -> 2s -> 4s)
- 超时处理(5分钟)
- 友好的错误提示
- 网络错误处理
### 后端
- Zep API调用重试
- LLM API调用重试
- 详细的日志记录
- 异常捕获和处理
## 启动步骤
### 1. 启动后端
```bash
cd /Users/guohangjiang/Desktop/MiroFish/backend
conda activate MiroFish
python run.py
```
### 2. 启动前端
```bash
cd /Users/guohangjiang/Desktop/MiroFish/frontend
npm run dev
```
### 3. 访问系统
- 前端: http://localhost:3000
- 后端: http://localhost:5001
## 技术栈
### 后端
- Flask 3.0+
- Zep Cloud SDK 2.0+
- OpenAI SDK 1.0+
- PyMuPDF (文本提取)
- Python 3.8+
### 前端
- Vue 3 (Composition API)
- Vite 7
- Vue Router 4
- Axios
## 开发环境
- **操作系统**: macOS (M系列芯片)
- **Python环境**: conda环境 MiroFish
- **Node.js**: >= 16.0.0
- **浏览器**: Chrome (推荐)
## 配置文件
### 后端 (.env)
```bash
FLASK_PORT=5001
LLM_API_KEY=your-key
LLM_BASE_URL=https://api.openai.com/v1
LLM_MODEL_NAME=gpt-4o-mini
ZEP_API_KEY=your-key
```
### 前端 (.env.development)
```bash
VITE_API_BASE_URL=http://localhost:5001
```
## 已实现的规则
✅ **API容错重试机制**: 所有远程API调用都有重试机制
✅ **RESTful风格**: 后端API采用RESTful设计
✅ **统一配置**: LLM和Zep密钥统一存储在.env文件
✅ **OpenAI格式**: LLM调用统一使用OpenAI库格式
✅ **Conda环境**: 程序运行在MiroFish环境中
✅ **前后端分离**: Vue前端 + Flask后端
## 测试建议
### 功能测试
1. [ ] 文件上传(拖拽、点击)
2. [ ] 表单验证
3. [ ] API调用
4. [ ] 页面跳转
5. [ ] 错误处理
6. [ ] 响应式布局
### 端到端测试
1. [ ] 上传PDF文档
2. [ ] 填写模拟需求
3. [ ] 提交表单
4. [ ] 观察处理流程
5. [ ] 等待图谱构建完成
## 后续开发
### 优先级高
- [ ] 图谱可视化实现(D3.js或ECharts)
- [ ] 模拟运行页面
- [ ] 结果展示页面
- [ ] Agent对话功能
### 优先级中
- [ ] 历史记录管理
- [ ] 项目列表页面
- [ ] 用户设置
- [ ] 导出功能
### 优先级低
- [ ] 数据统计分析
- [ ] 多语言支持
- [ ] 深色模式
- [ ] 移动端优化
## 项目亮点
1. **极简黑白线条风格**: 独特的视觉设计
2. **全自动化流程**: 用户只需上传文档和需求
3. **容错机制完善**: 多重重试和错误处理
4. **前后端分离**: 清晰的架构设计
5. **实时反馈**: 轮询机制实时更新状态
6. **响应式设计**: 支持多种设备
## 当前状态
🟢 **开发服务器运行中**
- 后端: 需要手动启动
- 前端: 已启动在 http://localhost:3000
✅ **首页功能完整**
- 文件上传 ✓
- 表单验证 ✓
- API调用 ✓
- 错误处理 ✓
⚠️ **待完善功能**
- 图谱可视化(第二页)
- 更多页面开发
- 完整的端到端测试
## 总结
MiroFish项目的前端脚手架已搭建完成,首页设计符合极简黑白线条风格要求,核心功能已实现:
1. ✅ 文件上传(支持拖拽)
2. ✅ 表单验证和提交
3. ✅ API接口调用
4. ✅ 路由管理
5. ✅ 错误处理
6. ✅ 响应式设计
用户可以通过首页上传文档和填写模拟需求,点击"开始模拟"后系统会调用后端的 `/api/graph/ontology/generate` 接口,成功后跳转到处理页面查看图谱构建进度。
---
**更新时间**: 2025-12-10
**版本**: v1.0.0
**状态**: 开发中 🚧

2
frontend/src/components/Step5Interaction.vue
View file

@ -154,7 +154,7 @@
<div class="tools-card-avatar">R</div>
<div class="tools-card-info">
<div class="tools-card-name">Report Agent - Chat</div>
<div class="tools-card-subtitle">报告生成智能体的快速对话版本，可调用 4 种专业工具</div>
<div class="tools-card-subtitle">报告生成智能体的快速对话版本，可调用 4 种专业工具，拥有MiroFish的完整记忆</div>
</div>
<button class="tools-card-toggle" @click="showToolsDetail = !showToolsDetail">
<svg :class="{ 'is-expanded': showToolsDetail }" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">

506
frontend/功能演示.md
View file

@ -1,506 +0,0 @@
# MiroFish 前端功能演示
## 首页功能详解
### 1. 页面整体布局
```
┌─────────────────────────────────────────────────┐
│ │
│ [MiroFish Logo] │
│ │
│ 上传任意报告，模拟世界即刻开始 │
│ │
├─────────────────────────────────────────────────┤
│ │
│ 模拟需求 │
│ ┌───────────────────────────────────────────┐ │
│ │ 请描述您的模拟需求... │ │
│ │ │ │
│ │ │ │
│ └───────────────────────────────────────────┘ │
│ │
│ 项目名称 (可选) │
│ ┌───────────────────────────────────────────┐ │
│ │ 为您的项目命名 │ │
│ └───────────────────────────────────────────┘ │
│ │
│ 上传文档 │
│ ┌───────────────────────────────────────────┐ │
│ │ 📤 │ │
│ │ 点击或拖拽文件到此处 │ │
│ │ 支持 PDF、Markdown、TXT 格式 │ │
│ └───────────────────────────────────────────┘ │
│ │
│ 额外说明 (可选) │
│ ┌───────────────────────────────────────────┐ │
│ │ 如有其他需要补充的信息... │ │
│ └───────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────┐ │
│ │ 开 始 模 拟 │ │
│ └───────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘
```
### 2. 交互功能说明
#### 2.1 文件上传
**支持方式**:
1. **点击上传**: 点击上传区域,弹出文件选择对话框
2. **拖拽上传**: 直接拖拽文件到上传区域
**支持格式**:
- PDF文档 (.pdf)
- Markdown文档 (.md)
- 纯文本文档 (.txt)
**上传特性**:
- ✅ 支持多文件上传
- ✅ 显示文件名和大小
- ✅ 可以删除已选择的文件
- ✅ 自动过滤不支持的格式
- ✅ 拖拽时高亮显示上传区域
**示例**:
```
上传后显示:
┌─────────────────────────────────────────┐
│ 📄 report.pdf 2.5 MB [×] │
│ 📄 analysis.md 1.2 MB [×] │
└─────────────────────────────────────────┘
```
#### 2.2 表单验证
**必填项检查**:
- ❌ 未填写模拟需求 → 按钮禁用
- ❌ 未上传文件 → 按钮禁用
- ✅ 两者都完成 → 按钮可点击
**可选项**:
- 项目名称(留空则自动生成)
- 额外说明(留空则不传递)
**状态提示**:
- 按钮禁用时:灰色不可点击
- 按钮可用时:黑色背景,hover变白色背景
#### 2.3 提交流程
**步骤1: 用户点击"开始模拟"**
```
按钮状态变为:
┌─────────────────────────────┐
│ ⌛ 处理中... │
└─────────────────────────────┘
```
**步骤2: 构建FormData**
```javascript
FormData包含:
- files: [file1, file2, ...]
- simulation_requirement: "用户输入的需求"
- project_name: "项目名称" (可选)
- additional_context: "额外说明" (可选)
```
**步骤3: 调用API**
```
POST /api/graph/ontology/generate
Content-Type: multipart/form-data
自动重试机制:
第1次失败 → 等待1秒 → 重试
第2次失败 → 等待2秒 → 重试
第3次失败 → 等待4秒 → 重试
第4次失败 → 显示错误
```
**步骤4: 成功响应**
```json
{
"success": true,
"data": {
"project_id": "proj_abc123",
"project_name": "项目名称",
"ontology": { ... },
...
}
}
```
**步骤5: 页面跳转**
```
跳转到: /process/proj_abc123
```
#### 2.4 错误处理
**网络错误**:
```
┌───────────────────────────────────────┐
│ ⚠ 提交失败,请检查网络连接或稍后重试 │
└───────────────────────────────────────┘
```
**API错误**:
```
┌───────────────────────────────────────┐
│ ⚠ 生成本体失败,请重试 │
└───────────────────────────────────────┘
```
**文件格式错误**:
```
┌───────────────────────────────────────┐
│ ⚠ 部分文件格式不支持,已自动过滤 │
└───────────────────────────────────────┘
```
### 3. 设计细节
#### 3.1 颜色方案
```css
/* 主色调 */
黑色: #000000 (文字、边框、按钮)
白色: #FFFFFF (背景、按钮hover)
灰色: #666666 (次要文字)
浅灰: #f5f5f5 (禁用背景)
/* 错误色 */
红色: #ff0000 (错误提示边框和文字)
浅红: #fff5f5 (错误提示背景)
```
#### 3.2 边框样式
```css
/* 输入框 */
border: 1px solid #000000
/* 输入框聚焦 */
border: 2px solid #000000
/* 上传区域 */
border: 2px dashed #000000
/* 上传区域hover */
border: 2px dashed #333333
background: #fafafa
/* 上传区域拖拽中 */
border: 2px solid #000000
background: #f0f0f0
```
#### 3.3 字体样式
```css
/* Logo标语 */
font-size: 1.5rem (24px)
font-weight: 300
letter-spacing: 0.05em
/* 标签 */
font-size: 0.95rem (15.2px)
font-weight: 500
letter-spacing: 0.02em
/* 输入框 */
font-size: 0.95rem (15.2px)
/* 按钮 */
font-size: 1.1rem (17.6px)
font-weight: 500
letter-spacing: 0.1em
```
#### 3.4 间距设计
```css
/* 区块间距 */
margin-bottom: 1.5rem (24px)
/* 内边距 */
表单区域: padding: 2.5rem (40px)
输入框: padding: 0.75rem (12px)
按钮: padding: 1rem (16px)
```
### 4. 响应式适配
#### 桌面端 (>= 768px)
```
容器最大宽度: 800px
表单内边距: 2.5rem
Logo最大宽度: 400px
```
#### 移动端 (< 768px)
```
容器宽度: 100%
表单内边距: 1.5rem
Logo最大宽度: 300px
标语字号: 1.2rem
```
### 5. 动画效果
#### 加载动画
```css
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-spinner {
width: 16px;
height: 16px;
border: 2px solid #ffffff;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
```
#### 按钮hover
```css
transition: all 0.3s;
/* Normal */
background: #000000;
color: #ffffff;
/* Hover */
background: #ffffff;
color: #000000;
```
#### 输入框焦点
```css
transition: all 0.2s;
/* Normal */
border: 1px solid #000000;
/* Focus */
border: 2px solid #000000;
```
## 第二页功能详解
### 1. 页面布局
```
┌───────────────────┬─────────────────────────┐
│ │ │
│ 实时图谱 │ Step 1 - 现实种子构建 │
│ │ │
│ ┌─────────────┐ │ ① 文档分析 ✓ │
│ │ │ │ 正在分析上传的文档... │
│ │ 图谱 │ │ │
│ │ 可视化 │ │ ② 本体生成 ⌛ │
│ │ │ │ 使用LLM生成本体... │
│ │ │ │ │
│ └─────────────┘ │ ③ 图谱构建 │
│ │ 待处理... │
│ 节点数: 50 │ │
│ 关系数: 120 │ ④ 完成 │
│ │ 待处理... │
│ │ │
│ │ ─────────────────── │
│ │ 项目信息 │
│ │ 项目名称: ... │
│ │ 项目ID: proj_xxx │
│ │ 状态: graph_building │
│ │ │
└───────────────────┴─────────────────────────┘
```
### 2. 自动化流程
**页面加载**:
1. 从URL获取projectId
2. 调用 `GET /api/graph/project/{projectId}`
3. 根据项目状态更新UI
**状态机**:
```
created → ontology_generated → graph_building → graph_completed
↓ ↓ ↓ ↓
步骤1 步骤2 步骤3 步骤4
```
**自动触发图谱构建**:
```javascript
if (status === 'ontology_generated' && !graph_id) {
// 自动调用 POST /api/graph/build
await buildGraph({ project_id })
}
```
**轮询任务状态**:
```javascript
setInterval(() => {
// 每2秒调用 GET /api/graph/task/{taskId}
const task = await getTaskStatus(taskId)
// 更新进度显示
}, 2000)
```
**加载图谱数据**:
```javascript
if (status === 'graph_completed' && graph_id) {
// 调用 GET /api/graph/data/{graphId}
const graphData = await getGraphData(graph_id)
}
```
### 3. 步骤指示器
**未开始状态**:
```
○ 步骤标题
描述文字
opacity: 0.4
```
**进行中状态**:
```
● 步骤标题
描述文字
进度信息 (45%)
opacity: 1.0
background: #000000 (number)
color: #ffffff (number)
```
**已完成状态**:
```
● 步骤标题
描述文字
已完成 ✓
opacity: 1.0
background: #000000 (number)
```
## 使用示例
### 完整流程演示
**场景**: 模拟武汉大学撤销处分事件的舆情走向
**步骤1**: 打开首页
```
访问: http://localhost:3000
```
**步骤2**: 填写表单
```
模拟需求: "模拟武汉大学撤销处分通告发布后的舆情走向"
项目名称: "武汉大学舆情分析"
上传文档: report.pdf (关于事件的背景报告)
```
**步骤3**: 提交
```
点击"开始模拟"按钮
等待API响应(约5-30秒)
```
**步骤4**: 查看处理
```
自动跳转到: /process/proj_abc123
观察四个步骤的执行进度
等待图谱构建完成(约1-5分钟)
```
**步骤5**: 完成
```
所有步骤显示"已完成"
左侧展示图谱节点和关系统计
```
## 技术细节
### API重试机制
```javascript
export const requestWithRetry = async (
requestFn,
maxRetries = 3,
delay = 1000
) => {
for (let i = 0; i < maxRetries; i++) {
try {
return await requestFn()
} catch (error) {
if (i === maxRetries - 1) throw error
const waitTime = delay * Math.pow(2, i)
await new Promise(resolve => setTimeout(resolve, waitTime))
}
}
}
```
### 文件上传处理
```javascript
// 构建FormData
const formDataObj = new FormData()
// 添加文件
files.value.forEach(file => {
formDataObj.append('files', file)
})
// 添加文本字段
formDataObj.append('simulation_requirement', requirement)
```
### 轮询实现
```javascript
let pollTimer = setInterval(async () => {
const response = await getTaskStatus(taskId)
if (response.data.status === 'completed') {
clearInterval(pollTimer)
// 处理完成逻辑
}
}, 2000)
// 组件卸载时清理
onUnmounted(() => {
if (pollTimer) clearInterval(pollTimer)
})
```
## 常见问题
### Q: 上传文件后看不到文件列表?
A: 检查文件格式是否支持(PDF、MD、TXT),不支持的格式会被自动过滤
### Q: 点击"开始模拟"没有反应?
A: 检查是否填写了模拟需求和上传了文件,两者都是必填项
### Q: 页面一直显示"处理中"?
A:
1. 检查后端服务是否正常运行
2. 查看浏览器控制台是否有错误信息
3. 检查网络连接
### Q: 图谱构建一直不完成?
A:
1. 图谱构建可能需要1-5分钟,请耐心等待
2. 查看右侧进度信息
3. 如果超过10分钟,可能是后端处理失败,查看后端日志
## 性能优化建议
1. **大文件上传**: 建议单个文件不超过10MB
2. **网络优化**: 使用稳定的网络连接
3. **浏览器**: 推荐使用Chrome浏览器
4. **并发限制**: 避免同时打开多个模拟任务
---
**文档更新**: 2025-12-10
**版本**: v1.0.0

198
frontend/启动指南.md
View file

@ -1,198 +0,0 @@
# 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: 清除浏览器缓存并刷新页面
## 联系方式
如有问题,请查看项目文档或联系开发团队。

334
frontend/项目完成总结.md
View file

@ -1,334 +0,0 @@
# MiroFish 前端项目完成总结
## 🎉 项目已完成
MiroFish前端项目的Vue脚手架搭建和首页设计已经全部完成!
## ✅ 完成清单
### 1. 基础架构
- [x] Vue 3 + Vite 脚手架搭建
- [x] 项目目录结构规划
- [x] 依赖包安装配置
- [x] 环境配置文件(.env)
- [x] Vite配置(开发服务器、代理)
- [x] 路由管理(Vue Router 4)
### 2. API集成
- [x] Axios实例配置
- [x] 请求/响应拦截器
- [x] 容错重试机制(最多3次,指数退避)
- [x] 超时处理(5分钟)
- [x] 图谱相关接口封装
- [x] 生成本体接口
- [x] 构建图谱接口
- [x] 查询任务接口
- [x] 获取图谱数据接口
- [x] 获取项目信息接口
### 3. 首页设计
- [x] Logo展示(MiroFish品牌标识)
- [x] 标语设计("上传任意报告,模拟世界即刻开始")
- [x] 模拟需求输入框(必填)
- [x] 项目名称输入框(可选)
- [x] 文件上传功能
- [x] 点击选择文件
- [x] 拖拽上传
- [x] 多文件支持
- [x] 文件格式验证(PDF、MD、TXT)
- [x] 文件列表展示
- [x] 文件删除功能
- [x] 拖拽高亮效果
- [x] 额外说明输入框(可选)
- [x] 开始模拟按钮
- [x] 表单验证
- [x] 加载状态显示
- [x] 提交功能
- [x] 错误提示
### 4. 第二页框架
- [x] 左右分栏布局
- [x] 左侧图谱展示区域
- [x] 右侧流程展示区域
- [x] 四步流程指示器
- [x] 项目信息展示
- [x] 自动加载项目数据
- [x] 自动开始图谱构建
- [x] 轮询任务状态(每2秒)
- [x] 实时更新进度
- [x] 构建完成后加载图谱
### 5. 设计风格
- [x] 极简黑白线条风格
- [x] 纯黑(#000000) + 纯白(#FFFFFF)配色
- [x] 1-2px实线边框
- [x] 清晰的排版和间距
- [x] 简洁的交互动画
- [x] 响应式布局
- [x] 桌面端适配
- [x] 平板端适配
- [x] 移动端适配
### 6. 容错机制
- [x] API请求自动重试
- [x] 指数退避策略
- [x] 网络错误处理
- [x] 超时错误处理
- [x] 友好的错误提示
### 7. 文档完善
- [x] README.md - 项目说明
- [x] 启动指南.md - 快速启动
- [x] 功能演示.md - 详细功能说明
- [x] 项目完成总结.md - 总结报告
## 📁 项目结构
```
frontend/
├── src/
│ ├── api/ # API接口封装
│ │ ├── index.js # axios配置、重试机制
│ │ └── graph.js # 图谱相关接口
│ ├── assets/
│ │ └── logo/ # Logo图片
│ │ └── MiroFish_logo_compressed.jpeg
│ ├── views/
│ │ ├── Home.vue # 首页 ✅
│ │ └── Process.vue # 处理页面 ✅
│ ├── router/
│ │ └── index.js # 路由配置 ✅
│ ├── App.vue # 根组件 ✅
│ └── main.js # 入口文件 ✅
├── .env.development # 开发环境配置 ✅
├── .env.production # 生产环境配置 ✅
├── index.html # HTML模板 ✅
├── vite.config.js # Vite配置 ✅
├── package.json # 依赖配置 ✅
├── README.md # 项目说明 ✅
├── 启动指南.md # 快速启动 ✅
├── 功能演示.md # 功能详解 ✅
└── 项目完成总结.md # 本文档 ✅
```
## 🚀 如何使用
### 1. 确保后端运行
```bash
cd /Users/guohangjiang/Desktop/MiroFish/backend
conda activate MiroFish
python run.py
```
后端运行在: http://localhost:5001
### 2. 前端已启动
前端开发服务器已经启动并运行在:
**http://localhost:3000**
### 3. 访问首页
打开浏览器,访问 http://localhost:3000
### 4. 使用流程
1. 在首页填写模拟需求
2. 上传相关文档(拖拽或点击)
3. 点击"开始模拟"
4. 等待API处理
5. 自动跳转到处理页面
6. 观察图谱构建进度
## 🎨 设计亮点
### 1. 极简黑白线条风
- 纯粹的黑白配色
- 简洁的线条边框
- 清晰的视觉层次
- 优雅的交互体验
### 2. 文件上传体验
- 支持拖拽上传
- 实时文件预览
- 清晰的状态反馈
- 友好的错误提示
### 3. 响应式设计
- 桌面端完美展示
- 平板端自适应
- 移动端友好布局
### 4. 流程可视化
- 四步流程清晰展示
- 实时进度更新
- 自动化流程控制
## 🔧 技术特点
### 1. 现代技术栈
- Vue 3 Composition API
- Vite 7 极速构建
- Vue Router 4 路由管理
- Axios HTTP客户端
### 2. 容错机制
- 自动重试(最多3次)
- 指数退避(1s → 2s → 4s)
- 超时控制(5分钟)
- 错误友好提示
### 3. 自动化
- 自动加载项目数据
- 自动开始图谱构建
- 自动轮询任务状态
- 自动跳转页面
### 4. 用户体验
- 表单实时验证
- 加载状态显示
- 错误清晰提示
- 操作流畅自然
## 📊 功能统计
### API接口
- 已封装接口数: 5个
- 重试机制: 最多3次
- 超时时间: 5分钟
- 成功率保障: 指数退避
### UI组件
- 页面数: 2个
- 输入组件: 4个
- 上传组件: 1个
- 按钮组件: 1个
### 代码规模
- Vue组件: 3个
- JavaScript文件: 4个
- 配置文件: 4个
- 文档文件: 4个
## 🎯 核心功能验证
### 首页功能
✅ Logo正常显示
✅ 标语清晰展示
✅ 表单输入正常
✅ 文件上传成功
✅ 拖拽上传可用
✅ 表单验证生效
✅ 提交按钮可用
✅ API调用成功
✅ 页面跳转正常
### 第二页功能
✅ 页面布局正确
✅ 项目数据加载
✅ 流程步骤显示
✅ 自动开始构建
✅ 轮询状态更新
✅ 进度实时显示
✅ 完成状态处理
## 📝 后续建议
### 优先开发
1. **图谱可视化**: 使用D3.js或ECharts实现节点关系图
2. **模拟运行页面**: 展示模拟过程和实时数据
3. **结果展示页面**: 展示模拟结果和分析报告
### 功能增强
1. **历史记录**: 展示用户的历史项目
2. **项目管理**: 项目列表、删除、导出
3. **高级配置**: 更多模拟参数配置
4. **数据分析**: 图表展示和数据统计
### 体验优化
1. **加载动画**: 更丰富的加载效果
2. **过渡动画**: 页面切换动画
3. **提示优化**: 更详细的操作提示
4. **快捷操作**: 键盘快捷键支持
## 🌐 浏览器兼容性
已测试浏览器:
- ✅ Chrome 90+ (推荐)
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
## 📞 技术支持
### 问题排查
1. 查看浏览器控制台错误信息
2. 检查网络连接状态
3. 确认后端服务运行
4. 查看API响应数据
### 文档参考
- README.md - 项目基础说明
- 启动指南.md - 快速开始
- 功能演示.md - 详细功能说明
## 🎓 开发经验总结
### 成功经验
1. **模块化设计**: API接口统一封装,便于维护
2. **容错机制**: 多重重试保证稳定性
3. **用户体验**: 实时反馈和友好提示
4. **代码规范**: Vue 3最佳实践
5. **文档完善**: 详细的使用说明
### 技术亮点
1. **Composition API**: 代码逻辑清晰
2. **响应式设计**: 多端适配完美
3. **自动化流程**: 减少用户操作
4. **错误处理**: 全面的异常处理
5. **性能优化**: 合理的轮询机制
## 🏆 项目成果
### 交付物
✅ 完整的Vue前端项目
✅ 极简黑白线条风格设计
✅ 首页完整功能实现
✅ 第二页基础框架
✅ API接口完整封装
✅ 容错重试机制
✅ 详细的使用文档
✅ 开发服务器运行中
### 质量保证
✅ 代码规范符合Vue 3标准
✅ 响应式布局完美适配
✅ API调用稳定可靠
✅ 用户体验流畅自然
✅ 错误处理完善
✅ 文档详尽清晰
## 🎊 总结
MiroFish前端项目已成功完成初期搭建,核心功能全部实现:
1. **Vue 3脚手架** - 使用Vite构建,开发体验极佳
2. **首页设计** - 极简黑白线条风格,美观大方
3. **文件上传** - 支持拖拽,操作便捷
4. **API集成** - 完整的后端接口调用
5. **容错机制** - 多重保障,稳定可靠
6. **自动化流程** - 减少用户操作,体验流畅
7. **文档完善** - 详细的使用和开发指南
项目已经可以正常运行和使用,用户可以:
- ✅ 访问首页上传文档
- ✅ 填写模拟需求
- ✅ 点击开始模拟
- ✅ 查看处理进度
- ✅ 等待图谱构建完成
**前端服务器运行中**: http://localhost:3000
---
**完成时间**: 2025-12-10
**版本**: v1.0.0
**状态**: ✅ 已完成
🎉 感谢使用MiroFish!

3832
模拟详情接口返回示例.json
View file

File diff suppressed because it is too large Load diff