efc7fbc4f7
- Updated response handling to prioritize replies from Reddit over Twitter and ensure compatibility with both object and array formats. - Refactored survey result processing to convert response data into a structured array, maintaining clarity and consistency in agent responses. - Improved error handling and logging for better debugging and user feedback. |
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .gitignore | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| vite.config.js | ||
MiroFish Frontend
MiroFish项目的前端部分,采用Vue 3 + Vite构建,极简黑白线条设计风格。
技术栈
- Vue 3 - 渐进式JavaScript框架
- Vite - 下一代前端构建工具
- Vue Router 4 - 官方路由管理器
- Axios - HTTP客户端
项目结构
frontend/
├── src/
│ ├── api/ # API接口封装
│ │ ├── index.js # axios配置和重试机制
│ │ └── graph.js # 图谱相关接口
│ ├── assets/ # 静态资源
│ │ └── logo/ # Logo图片
│ ├── components/ # 通用组件
│ ├── views/ # 页面组件
│ │ ├── Home.vue # 首页
│ │ └── Process.vue # 处理页面
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── utils/ # 工具函数
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── .env.development # 开发环境配置
├── .env.production # 生产环境配置
└── vite.config.js # Vite配置
开发指南
环境要求
- Node.js >= 16.0.0
- npm >= 8.0.0
安装依赖
npm install
启动开发服务器
npm run dev
服务将在 http://localhost:3000 启动。
构建生产版本
npm run build
预览生产构建
npm run preview
功能说明
首页 (/)
- Logo展示
- 模拟需求输入
- 文档上传(支持PDF、Markdown、TXT格式)
- 拖拽上传支持
- 点击"开始模拟"调用后端接口
/api/graph/ontology/generate
处理页面 (/process/:projectId)
- 左侧:实时图谱可视化展示
- 右侧:Step 1 - 现实种子构建流程展示
- 自动轮询任务状态
- 实时更新构建进度
设计风格
采用极简黑白线条风格:
- 主色调:黑色 (#000000) 和白色 (#FFFFFF)
- 线条粗细:1px - 2px
- 字体:系统默认无衬线字体
- 交互:简洁的hover效果和过渡动画
- 布局:清晰的分栏和间距
API集成
容错机制
- 自动重试:API请求失败时最多重试3次
- 指数退避:重试间隔逐步增加(1s, 2s, 4s)
- 超时控制:默认5分钟超时时间
- 错误提示:友好的用户错误提示
接口说明
参见 src/api/graph.js 中的接口定义和注释。
开发规范
- 使用 Vue 3 Composition API
- 组件采用
<script setup>语法 - 样式使用 scoped CSS
- 遵循 Vue 官方风格指南
部署说明
- 修改
.env.production中的VITE_API_BASE_URL为实际后端地址 - 运行
npm run build构建生产版本 - 将
dist目录部署到Web服务器
注意事项
- 确保后端服务运行在 http://localhost:5001 (开发环境)
- 上传文件大小限制由后端配置决定(默认50MB)
- 支持的文件格式:PDF、Markdown(.md)、TXT
License
MIT