# AI临床研究平台 - Frontend V2

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

---

## 📋 项目说明

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

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

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问：http://localhost:3000

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
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/` 的别名：

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

### 模块开发

每个新模块需要：

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

---

## 📚 相关文档

- [前后端模块化架构设计-V2](../../docs/00-系统总体设计/前后端模块化架构设计-V2.md)
- [下一阶段行动计划](../../docs/08-项目管理/下一阶段行动计划-V2.2-完整版.md)

---

## 🔗 API代理

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

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

---

## 📝 TODO

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

---

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