AIclinicalresearch/frontend

AI临床研究平台 - 前端

基于 Vite + React + TypeScript + Ant Design 构建

🏠 导航

• ← 返回项目主页
• 📚 查看完整文档
• ⚙️ 后端项目
• 🚀 快速启动指南

---

🚀 快速开始

1. 安装依赖

npm install

2. 启动开发服务器

npm run dev

访问：http://localhost:3000

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,
  },
}

🎯 智能体列表

本平台提供12个AI智能体，覆盖临床研究全流程：

🌱 选题阶段

1. 🎯 选题评价智能体

• 路由ID: topic-evaluation
• 功能: 从创新性、临床价值、科学性和可行性等维度评估研究选题
• 输入: 用户提供的临床问题描述
• 输出: 结构化评价报告，包含SWOT分析及综合建议

2. 🔬 科学问题梳理智能体

• 路由ID: scientific-question
• 功能: 将模糊的研究想法提炼成清晰、具体、可验证的科学问题
• 输入: 初步研究想法（如"研究肠道菌群与抑郁症的关系"）
• 输出: 多个精炼后的科学问题选项

---

🔬 研究设计阶段

3. 📋 PICOS构建智能体

• 路由ID: picos-construction
• 功能: 按照PICOS原则结构化定义临床研究的核心要素
• 输入: 引导式表单或自由文本描述的研究问题
• 输出: 标准化的PICOS表格（P-患者/人群、I-干预、C-对照、O-结局、S-研究设计）

4. 📊 观察指标设计智能体

• 路由ID: observation-design
• 功能: 基于研究设计推荐合适的观察指标集
• 输入: 已确定的PICOS框架或研究问题
• 输出: 包含主要、次要及安全性指标的详细清单

5. 📝 CRF制定智能体

• 路由ID: crf-development
• 功能: 自动生成结构化、符合规范的病例报告表（CRF）框架
• 输入: 研究方案、观察指标清单
• 输出: 可下载的CRF框架草稿（Word/Excel格式）

6. 🔢 样本量计算智能体

• 路由ID: sample-size
• 功能: 根据研究类型、检验水准、把握度、效应量等参数估算样本量
• 输入: 引导式表单（研究设计、α、β、效应量等）
• 输出: 详细的样本量计算结果，包含公式、参数说明和建议样本量

7. 📄 临床研究方案撰写智能体

• 路由ID: protocol-writing
• 功能: 基于科学问题、PICOS等信息，自动生成完整的临床研究设计方案
• 输入: 科学问题、PICOS、样本量等
• 输出: 包含研究背景、目的、设计、流程等章节的Word文档初稿

---

📝 论文阶段

8. ✨ 论文润色智能体

• 路由ID: paper-polishing
• 功能: 提供专业级的语言润色，修正语法、拼写和表达方式
• 输入: 上传的论文稿件（Word/Text），目标期刊名称（可选）
• 输出: 带修订标记的润色后文稿及修改摘要说明

9. 🌐 论文翻译智能体

• 路由ID: paper-translation
• 功能: 提供专业、精准的中英互译服务，优化医学科研术语
• 输入: 上传的论文稿件，选择源语言和目标语言
• 输出: 翻译完成的稿件，保留原格式

10. 🔍 方法学评审智能体

• 路由ID: methodology-review
• 功能: 从研究问题、方案设计、实施可行性和临床意义等维度进行方法学评审
• 输入: 上传的研究方案或论文稿件
• 输出: 评审报告，分点列出优点、潜在缺陷及改进建议

11. 📑 期刊方法学评审智能体

• 路由ID: journal-methodology-review
• 功能: 模拟期刊审稿人视角，针对统计学、方法学问题进行挑战
• 输入: 上传的论文稿件，目标期刊
• 输出: 模拟的"审稿意见"，列出可能被挑战的问题点

12. ✅ 期刊稿约评审智能体

• 路由ID: journal-guidelines-review
• 功能: 依据目标期刊的投稿要求，自动检查格式、字数、参考文献规范
• 输入: 上传的论文稿件，目标期刊的投稿指南
• 输出: 格式审查报告，清晰列出所有不符合项和修改建议

---

🔗 路由规则

所有智能体页面遵循统一路由规则：

/agent/{路由ID}

示例：

• /agent/topic-evaluation - 选题评价智能体
• /agent/picos-construction - PICOS构建智能体
• /agent/paper-polishing - 论文润色智能体

📞 技术支持

详见项目根目录的完整文档：

• docs/01-设计文档/API设计规范.md
• docs/02-开发规范/代码规范.md
• docs/04-开发计划/开发里程碑.md

---

Day 6 完成！前端基础架构搭建完毕！ 🎉