feat(frontend): add frontend-v2 modular architecture (Task 17)
- 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
This commit is contained in:
162
frontend-v2/README.md
Normal file
162
frontend-v2/README.md
Normal file
@@ -0,0 +1,162 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user