feat(frontend): Day 6 - frontend basic architecture completed
This commit is contained in:
146
frontend/README.md
Normal file
146
frontend/README.md
Normal file
@@ -0,0 +1,146 @@
|
||||
# AI临床研究平台 - 前端
|
||||
|
||||
基于 Vite + React + TypeScript + Ant Design 构建
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 1. 安装依赖
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 2. 启动开发服务器
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
访问:http://localhost:3000
|
||||
|
||||
### 3. 构建生产版本
|
||||
```bash
|
||||
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`中设置:
|
||||
```typescript
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3001',
|
||||
changeOrigin: true,
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## 🎯 智能体列表
|
||||
|
||||
1. 📊 选题评价
|
||||
2. 🔍 PICOS构建
|
||||
3. 📚 文献检索
|
||||
4. 🎯 文献筛选
|
||||
5. 📋 数据提取
|
||||
6. ⚖️ 偏倚评价
|
||||
7. 📈 Meta分析
|
||||
8. 🌲 森林图绘制
|
||||
9. 💡 结果解读
|
||||
10. 📝 方案撰写
|
||||
11. ✍️ 文章撰写
|
||||
12. 📬 投稿辅助
|
||||
|
||||
## 📞 技术支持
|
||||
|
||||
详见项目根目录的完整文档:
|
||||
- `docs/01-设计文档/API设计规范.md`
|
||||
- `docs/02-开发规范/代码规范.md`
|
||||
- `docs/04-开发计划/开发里程碑.md`
|
||||
|
||||
---
|
||||
|
||||
**Day 6 完成!前端基础架构搭建完毕!** 🎉
|
||||
|
||||
Reference in New Issue
Block a user