AI临床研究平台 - 前端
基于 Vite + React + TypeScript + Ant Design 构建
🚀 快速开始
1. 安装依赖
npm install
2. 启动开发服务器
npm run dev
3. 构建生产版本
npm run build
📦 技术栈
- 框架: React 18 + TypeScript
- 构建工具: Vite 6
- UI组件库: Ant Design 5
- CSS框架: Tailwind CSS 3
- 路由: React Router 6
- HTTP客户端: Axios
- 状态管理: React Hooks（Day 7+可能引入Zustand）
📁 项目结构
frontend/
├── src/
│ ├── api/ # API请求
│ │ ├── request.ts # Axios配置
│ │ └── index.ts # API接口
│ ├── assets/ # 静态资源
│ ├── components/ # 公共组件
│ ├── layouts/ # 布局组件
│ │ └── MainLayout.tsx
│ ├── pages/ # 页面组件
│ │ ├── HomePage.tsx # 首页
│ │ └── AgentPage.tsx # 智能体页面
│ ├── types/ # TypeScript类型定义
│ ├── utils/ # 工具函数
│ ├── App.tsx # 根组件
│ ├── main.tsx # 入口文件
│ └── index.css # 全局样式
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── tailwind.config.js
🎨 功能特性
Day 6 已完成
- ✅ 项目初始化（Vite + React + TypeScript）
- ✅ Ant Design UI组件库集成
- ✅ Tailwind CSS配置
- ✅ React Router路由配置
- ✅ 主布局组件（侧边栏 + 头部 + 内容区）
- ✅ 首页展示（12个智能体卡片）
- ✅ 智能体页面（占位符）
- ✅ Axios请求配置
- ✅ TypeScript类型定义
Day 7-8 待开发
- ⏳ 项目管理功能
- ⏳ 知识库管理功能
- ⏳ 个人中心页面
- ⏳ 设置页面
Day 9-10 待开发
- ⏳ 智能对话组件
- ⏳ 与后端API集成
- ⏳ 模型切换功能
- ⏳ 知识库@引用功能
🔧 开发规范
代码规范
- 使用TypeScript类型检查
- 使用ESLint代码检查
- 组件使用函数式组件 + Hooks
- 样式优先使用Tailwind CSS
- 复杂样式使用Ant Design内联style
命名规范
- 组件文件：PascalCase（如：HomePage.tsx）
- 普通文件：camelCase（如：request.ts）
- 常量：UPPER_SNAKE_CASE（如：API_BASE_URL）
Git提交规范
- feat: 新功能
- fix: 修复bug
- docs: 文档更新
- style: 代码格式调整
- refactor: 代码重构
📡 API配置
后端API地址：http://localhost:3001/api/v1
代理配置已在vite.config.ts中设置：
proxy: {
'/api': {
target: 'http://localhost:3001',
changeOrigin: true,
},
}
🎯 智能体列表
- 📊 选题评价
- 🔍 PICOS构建
- 📚 文献检索
- 🎯 文献筛选
- 📋 数据提取
- ⚖️ 偏倚评价
- 📈 Meta分析
- 🌲 森林图绘制
- 💡 结果解读
- 📝 方案撰写
- ✍️ 文章撰写
- 📬 投稿辅助
📞 技术支持
详见项目根目录的完整文档：
docs/01-设计文档/API设计规范.mddocs/02-开发规范/代码规范.mddocs/04-开发计划/开发里程碑.md
Day 6 完成！前端基础架构搭建完毕！ 🎉