AIclinicalresearch/frontend-v2

AI临床研究平台 - Frontend V2

版本： V2.0
创建日期： 2025-11-12
技术栈： React 18 + TypeScript + Vite + Ant Design + Tailwind CSS

---

📋 项目说明

这是AI临床研究平台的全新前端架构，采用模块化设计，支持：

• ✅ 顶部导航布局
• ✅ 模块化架构（5个业务模块）
• ✅ 动态模块加载
• ✅ 懒加载和代码分割
• ✅ 统一的开发规范

🚀 快速开始

安装依赖

npm install

启动开发服务器

npm run dev

访问：http://localhost:3000

构建生产版本

npm run build

预览生产构建

npm run preview

---

📁 项目结构

src/
├── framework/          # 框架层（平台级基础设施）
│   ├── layout/         # 布局系统
│   ├── modules/        # 模块注册系统
│   ├── router/         # 路由系统
│   ├── permission/     # 权限控制
│   └── config/         # 全局配置
│
├── modules/            # 业务模块（完全独立）
│   ├── asl/            # AI智能文献
│   ├── aia/            # AI智能问答
│   ├── pkb/            # 个人知识库
│   ├── rvw/            # 审稿系统
│   └── dc/             # 数据清洗
│
├── shared/             # 共享资源
│   ├── components/     # 通用组件
│   ├── hooks/          # 通用Hooks
│   ├── utils/          # 工具函数
│   └── api/            # API客户端
│
├── pages/              # 页面组件
│   └── HomePage.tsx    # 首页
│
├── App.tsx             # 应用根组件
└── main.tsx            # 应用入口

---

🎯 模块说明

已实现

• ✅ 框架层：顶部导航、主布局、模块注册
• ✅ 占位页面：5个模块的占位展示
• ✅ 首页：模块入口和统计信息

开发中

• 🚧 ASL模块：Week 3 开发（AI智能文献）

待开发

• 📋 AIA模块：AI智能问答（后续重写）
• 📋 PKB模块：个人知识库（后续重写）
• 📋 RVW模块：审稿系统（后续重写）
• 📋 DC模块：数据清洗（占位）

---

🔧 开发规范

命名规范

• 组件文件：PascalCase（TopNavigation.tsx）
• Hooks文件：camelCase + use前缀（useAuth.ts）
• 工具函数：camelCase（formatDate.ts）
• 类型定义：PascalCase（types.ts）

路径别名

使用 @/ 作为 src/ 的别名：

import TopNavigation from '@/framework/layout/TopNavigation'
import Placeholder from '@/shared/components/Placeholder'

模块开发

每个新模块需要：

1. 在 src/modules/[模块名]/ 创建目录
2. 创建 index.tsx 作为模块入口
3. 在 moduleRegistry.ts 中注册模块
4. 实现模块的 ModuleDefinition 接口

---

📚 相关文档

• 前后端模块化架构设计-V2
• 下一阶段行动计划

---

🔗 API代理

开发环境下，所有 /api/* 请求会被代理到后端服务器：

Frontend: http://localhost:3000
Backend:  http://localhost:3001

---

📝 TODO

• 实现权限控制系统
• 添加用户认证流程
• 实现面包屑导航
• 添加全局状态管理
• 完善错误处理
• 添加单元测试

---

维护者： 开发团队
最后更新： 2025-11-12