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:
2025-11-16 15:43:17 +08:00
parent 5579ffa78e
commit 11325f88a7
39 changed files with 8051 additions and 0 deletions

162
frontend-v2/README.md Normal file
View 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