HaHafeng
11325f88a7
- React 19 + TypeScript + Vite - Module registration mechanism with dynamic loading - Permission management system (basic/advanced/premium) - Route guards for access control - Error boundaries for module isolation - 6 business module placeholders (AIA/ASL/PKB/DC/SSA/ST) - Top navigation layout - Tailwind CSS 3 + Ant Design 5
163 lines
3.5 KiB
Markdown
163 lines
3.5 KiB
Markdown
# 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
|