# 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. 🔬 科学问题梳理智能体 - 提炼清晰的科学问题 ### 研究设计阶段 3. 📋 PICOS构建智能体 - 构建PICOS框架 4. 📊 观察指标设计智能体 - 设计观察指标 5. 📝 CRF制定智能体 - 制定病例报告表 6. 🔢 样本量计算智能体 - 计算样本量 7. 📄 临床研究方案撰写智能体 - 撰写研究方案 ### 论文阶段 8. ✨ 论文润色智能体 - 语言润色 9. 🌐 论文翻译智能体 - 中英互译 10. 🔍 方法学评审智能体 - 方法学评审 11. 📑 期刊方法学评审智能体 - 模拟期刊审稿 12. ✅ 期刊稿约评审智能体 - 检查投稿格式 ## 📞 技术支持 详见项目根目录的完整文档: - `docs/01-设计文档/API设计规范.md` - `docs/02-开发规范/代码规范.md` - `docs/04-开发计划/开发里程碑.md` --- **Day 6 完成!前端基础架构搭建完毕!** 🎉