docs: complete documentation system (250+ files)

- System architecture and design documentation
- Business module docs (ASL/AIA/PKB/RVW/DC/SSA/ST)
- ASL module complete design (quality assurance, tech selection)
- Platform layer and common capabilities docs
- Development standards and API specifications
- Deployment and operations guides
- Project management and milestone tracking
- Architecture implementation reports
- Documentation templates and guides
This commit is contained in:
2025-11-16 15:43:55 +08:00
parent 0fe6821a89
commit e52020409c
173 changed files with 46227 additions and 11964 deletions

View File

@@ -0,0 +1,85 @@
# 用户与权限中心 (UAM)
> **模块定位:** 平台基础层核心模块
> **优先级:** P0最高
> **状态:** ⏳ 设计中
---
## 📋 模块概述
用户与权限中心User Access Management是平台的核心基础模块负责
- 用户注册、登录、认证
- 角色与权限管理RBAC
- Feature Flag 功能开关(商业模式基础)
- 多租户管理SaaS版
---
## 🎯 核心功能
### 1. 用户认证
- JWT Token认证
- 用户注册/登录
- 密码加密bcrypt
- 会话管理
### 2. 角色权限管理RBAC
- 角色定义
- 权限定义
- 用户-角色关联
- 角色-权限关联
### 3. Feature Flag 管理 ⭐ **商业模式核心**
- 版本功能控制(专业版、高级版、旗舰版)
- 模块开关
- 功能开关
### 4. 多租户管理
- 租户隔离
- 租户配额
---
## 📂 文档结构
```
01-用户与权限中心(UAM)/
├── [AI对接] UAM快速上下文.md # ⏳ 待创建
├── 00-需求分析/
│ └── README.md
├── 01-设计文档/
│ ├── 01-架构设计.md # ⏳ 待创建
│ ├── 02-数据库设计.md # ⏳ 待创建
│ ├── 03-API设计.md # ⏳ 待创建
│ ├── 04-Feature-Flag设计.md # ⏳ 待创建
│ └── README.md
└── README.md # ✅ 当前文档
```
---
## 🔗 相关文档
- [平台基础层总览](../README.md)
- [系统架构分层设计](../../00-系统总体设计/01-系统架构分层设计.md)
---
**最后更新:** 2025-11-06
**维护人:** 技术架构师

View File

@@ -0,0 +1,65 @@
# 存储服务
> **模块定位:** 平台基础层
> **优先级:** P1
> **状态:** ⏳ 待设计
---
## 📋 模块概述
存储服务负责统一管理平台的文件存储,支持:
- 文件上传、下载、删除
- 对象存储OSS/S3
- 本地文件系统(单机版)
- 文件权限控制
---
## 🎯 核心功能
### 1. 文件上传
- 支持多种文件格式
- 文件大小限制
- 文件类型验证
### 2. 对象存储
- 云端MinIO/阿里云OSS
- 单机版:本地文件系统
### 3. 文件访问控制
- 临时访问URL签名URL
- 权限验证
---
## 📂 文档结构
```
02-存储服务/
├── 00-需求分析/
│ └── README.md
├── 01-设计文档/
│ └── README.md
└── README.md # ✅ 当前文档
```
---
**最后更新:** 2025-11-06
**维护人:** 技术架构师

View File

@@ -0,0 +1,51 @@
# 通知服务
> **模块定位:** 平台基础层
> **优先级:** P2
> **状态:** ⏳ 待设计
---
## 📋 模块概述
通知服务负责平台的消息通知,支持:
- 站内消息
- 邮件通知
- WebSocket实时推送
---
## 🎯 核心功能
### 1. 站内消息
- 消息列表
- 已读/未读状态
- 消息删除
### 2. 邮件通知
- SMTP邮件发送
- 邮件模板
### 3. WebSocket实时推送
- 实时消息推送
- 进度更新推送
---
**最后更新:** 2025-11-06
**维护人:** 技术架构师

View File

@@ -0,0 +1,51 @@
# 监控与日志
> **模块定位:** 平台基础层
> **优先级:** P1
> **状态:** ⏳ 待设计
---
## 📋 模块概述
监控与日志服务负责:
- 操作日志记录
- 错误日志监控
- 性能监控
- 审计日志(合规要求)
---
## 🎯 核心功能
### 1. 操作日志
- 用户操作记录
- 管理员操作记录
### 2. 错误日志
- 系统错误捕获
- 错误告警
### 3. 审计日志
- 敏感操作记录
- 合规审计
---
**最后更新:** 2025-11-06
**维护人:** 技术架构师

View File

@@ -0,0 +1,47 @@
# 系统配置
> **模块定位:** 平台基础层
> **优先级:** P1
> **状态:** ⏳ 待设计
---
## 📋 模块概述
系统配置服务负责:
- 系统级配置管理
- 多环境配置(开发、测试、生产)
- 动态配置更新
---
## 🎯 核心功能
### 1. 配置管理
- 配置项定义
- 配置值管理
- 配置版本控制
### 2. 动态配置
- 运行时配置更新
- 配置热更新
---
**最后更新:** 2025-11-06
**维护人:** 技术架构师

View File

@@ -0,0 +1,577 @@
# 平台前端总体架构设计
> **文档版本:** v1.0
> **创建日期:** 2025-10-29
> **维护者:** 前端开发团队
> **最后更新:** 2025-10-29
---
## 📋 文档说明
本文档是**平台级前端架构设计**涵盖整个AI科研平台的前端架构包括
- 统一的顶部导航设计
- 模块化架构设计
- 路由设计
- 权限控制系统(**版本配置完全可调整**
- 模块独立性设计(支持未来独立分拆)
> **注意:** 本文档是平台级设计,各模块的详细架构设计请参考各模块的专属文档。
> **重要提示:** 本文档中涉及的版本权限分配(基础版、高级版、旗舰版的模块分配)均为**初始方案**可以根据业务需求随时调整无需改动代码逻辑。推荐从后端API动态获取版本配置。
---
## 🎯 设计原则
### 1. 模块化设计
- 每个功能模块独立开发、独立部署
- 模块间无依赖关系,可独立运行
- 支持模块独立产品化如AI智能文献独立售卖
### 2. 权限控制设计
- 基于用户版本的权限控制
- 灵活的功能模块开关机制
- 支持未来商业模式拓展(基础版、高级版、旗舰版)
### 3. 可扩展性设计
- 预留新模块接入接口
- 插件化的模块加载机制
- 配置驱动的功能开关
### 4. 一致性设计
- 统一的UI/UX规范
- 统一的交互模式
- 统一的状态管理
---
## 🧭 顶部导航设计
### 导航结构
```
┌──────────────────────────────────────────────────────────────────────────────┐
│ Logo [AI问答] [AI智能文献] [知识库] [智能数据清洗] [智能统计分析] [统计分析工具] [用户名 ▼] │
└──────────────────────────────────────────────────────────────────────────────┘
```
### 导航项详情
| 位置 | 中文名称 | 英文标识 | 路由路径 | 开发状态 | 权限要求(初始配置) |
|------|---------|---------|---------|---------|---------------------|
| 1 | AI问答 | `ai-qa` | `/ai-qa` | ✅ 已开发 | 基础版+ ⚠️可调整 |
| 2 | AI智能文献 | `literature-platform` | `/literature` | 🚧 待开发 | 高级版+ ⚠️可调整 |
| 3 | 知识库 | `knowledge-base` | `/knowledge-base` | ✅ 已开发 | 基础版+ ⚠️可调整 |
| 4 | 智能数据清洗 | `data-cleaning` | `/data-cleaning` | 📋 占位 | 高级版+ ⚠️可调整 |
| 5 | 智能统计分析 | `statistical-analysis` | `/intelligent-analysis` | ✅ 已开发Java团队 | 旗舰版 ⚠️可调整 |
| 6 | 统计分析工具 | `statistical-tools` | `/statistical-tools` | ✅ 已开发Java团队 | 旗舰版 ⚠️可调整 |
| 最右侧 | 个人中心 | `user-center` | `/user/*` | ✅ 已开发 | 所有用户 |
> **说明:** 权限要求列中的"基础版+"、"高级版+"、"旗舰版"为**初始配置**可根据业务需求随时调整无需改动代码逻辑。推荐从后端API动态获取版本配置。
### 路由路径设计
```typescript
// 主路由结构
const routes = {
// 模块路由
'/ai-qa': 'AI问答模块',
'/literature': 'AI智能文献模块',
'/knowledge-base': '知识库模块',
'/data-cleaning': '智能数据清洗模块(占位)',
'/intelligent-analysis': '智能统计分析模块Java团队开发只做顶部导航集成',
'/statistical-tools': '统计分析工具模块Java团队开发只做顶部导航集成',
// 用户相关
'/user/profile': '个人中心 - 个人资料',
'/user/settings': '个人中心 - 设置',
'/user/history': '个人中心 - 历史记录',
'/user/subscription': '个人中心 - 订阅管理',
};
```
---
## 🏗️ 整体架构设计
### 架构层次图
```
┌─────────────────────────────────────────────────────────────┐
│ 应用层 (Application) │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ AI问答 │ │AI智能文献│ │ 知识库 │ │ 其他模块 │ │
│ │ Module │ │ Module │ │ Module │ │ Module │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 框架层 (Framework Layer) │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 导航系统 │ │ 路由系统 │ │ 权限控制 │ │
│ │ Navigation │ │ Router │ │ Permission │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 布局系统 │ │ 状态管理 │ │ 配置管理 │ │
│ │ Layout │ │ State Mgmt │ │ Config │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 基础层 (Base Layer) │
│ React + TypeScript + Ant Design + Tailwind CSS │
└─────────────────────────────────────────────────────────────┘
```
### 目录结构设计
```
frontend-v2/
├── src/
│ ├── app/ # 应用入口
│ │ ├── App.tsx # 根组件
│ │ ├── main.tsx # 入口文件
│ │ └── routes.tsx # 路由配置
│ │
│ ├── framework/ # 框架层(核心)
│ │ ├── navigation/ # 导航系统
│ │ │ ├── TopNavigation.tsx # 顶部导航
│ │ │ ├── SideNavigation.tsx # 左侧导航
│ │ │ └── navigationConfig.ts # 导航配置
│ │ │
│ │ ├── routing/ # 路由系统
│ │ │ ├── RouterConfig.tsx # 路由配置
│ │ │ ├── RouteGuard.tsx # 路由守卫(权限)
│ │ │ └── LazyLoader.tsx # 懒加载
│ │ │
│ │ ├── permission/ # 权限控制
│ │ │ ├── PermissionProvider.tsx
│ │ │ ├── usePermission.ts # 权限Hook
│ │ │ ├── permissionConfig.ts # 权限配置
│ │ │ └── versionConfig.ts # 版本配置
│ │ │
│ │ ├── layout/ # 布局系统
│ │ │ ├── MainLayout.tsx # 主布局
│ │ │ ├── ModuleLayout.tsx # 模块布局
│ │ │ └── EmptyLayout.tsx # 空布局
│ │ │
│ │ ├── config/ # 配置管理
│ │ │ ├── moduleConfig.ts # 模块配置
│ │ │ ├── appConfig.ts # 应用配置
│ │ │ └── environment.ts # 环境配置
│ │ │
│ │ └── state/ # 全局状态
│ │ ├── userStore.ts # 用户状态
│ │ ├── navigationStore.ts # 导航状态
│ │ └── permissionStore.ts # 权限状态
│ │
│ ├── modules/ # 功能模块(独立)
│ │ ├── ai-qa/ # AI问答模块
│ │ │ ├── index.tsx
│ │ │ ├── routes.tsx
│ │ │ └── ...
│ │ │
│ │ ├── literature/ # AI智能文献模块
│ │ │ ├── index.tsx
│ │ │ ├── routes.tsx
│ │ │ └── ...
│ │ │
│ │ ├── knowledge-base/ # 知识库模块
│ │ │ ├── index.tsx
│ │ │ ├── routes.tsx
│ │ │ └── ...
│ │ │
│ │ ├── data-cleaning/ # 智能数据清洗(占位)
│ │ │ └── Placeholder.tsx
│ │ │
│ │ ├── intelligent-analysis/ # 智能统计分析
│ │ │ └── ...
│ │ │
│ │ └── statistical-tools/ # 统计分析工具
│ │ └── ...
│ │
│ ├── components/ # 通用组件
│ │ ├── common/ # 基础组件
│ │ ├── business/ # 业务组件
│ │ └── hooks/ # 通用Hooks
│ │
│ ├── api/ # API层
│ │ ├── client.ts # API客户端
│ │ ├── modules/ # 模块API
│ │ └── types/ # API类型
│ │
│ ├── utils/ # 工具函数
│ └── types/ # 全局类型
```
---
## 🔐 权限控制设计
### 用户版本定义
> **重要说明:** 版本权限分配是完全**可配置、可调整**的。以下配置为**初始方案**,可以根据业务需求随时修改,无需改动代码逻辑。
```typescript
// 用户版本类型
type UserVersion = 'basic' | 'advanced' | 'premium';
// 版本配置(可配置,支持后期调整)
// 配置文件位置src/framework/permission/versionConfig.ts
// 或者通过后端API动态获取配置
const VERSION_CONFIG = {
basic: {
name: '基础版',
modules: ['ai-qa', 'knowledge-base'], // 初始配置:基础版包含模块
},
advanced: {
name: '高级版',
modules: [
'ai-qa',
'knowledge-base',
'literature-platform',
'data-cleaning',
], // 初始配置:高级版包含模块
},
premium: {
name: '旗舰版',
modules: [
'ai-qa',
'knowledge-base',
'literature-platform',
'data-cleaning',
'intelligent-analysis',
'statistical-tools',
], // 初始配置:旗舰版包含全部模块
},
};
// 说明:
// 1. 以上模块分配为初始方案,可根据实际业务需求调整
// 2. 支持通过配置文件修改,无需改动代码
// 3. 更推荐从后端API动态获取版本配置便于实时调整
```
### 权限控制实现
> **设计说明:** 权限控制采用配置驱动的方式支持通过配置文件或后端API动态获取版本配置便于后期灵活调整。
```typescript
// 权限控制Hook
export const usePermission = () => {
const userVersion = useUserStore((state) => state.version);
// 方式1从静态配置读取适合开发阶段
// const allowedModules = VERSION_CONFIG[userVersion].modules;
// 方式2从后端API动态获取推荐支持实时调整
const versionConfig = useVersionConfig(); // 从API获取最新配置
const allowedModules = versionConfig[userVersion]?.modules || [];
const hasAccess = (moduleId: string): boolean => {
return allowedModules.includes(moduleId);
};
const getFilteredNavigation = (navigation: NavigationItem[]) => {
return navigation.filter((item) => {
// 检查用户版本是否满足模块要求
if (!item.requiredVersion) return true;
const versionHierarchy = ['basic', 'advanced', 'premium'];
const userLevel = versionHierarchy.indexOf(userVersion);
const requiredLevel = versionHierarchy.indexOf(item.requiredVersion);
return userLevel >= requiredLevel;
});
};
return {
hasAccess,
getFilteredNavigation,
userVersion,
versionConfig, // 返回当前版本配置,便于调试
};
};
```
### 版本配置动态获取(推荐方案)
```typescript
// src/framework/permission/useVersionConfig.ts
import { useQuery } from '@tanstack/react-query';
export const useVersionConfig = () => {
const { data, isLoading } = useQuery({
queryKey: ['versionConfig'],
queryFn: async () => {
// 从后端API获取版本配置
const response = await fetch('/api/config/version');
return response.json();
},
staleTime: 5 * 60 * 1000, // 缓存5分钟
refetchOnWindowFocus: false,
});
// 如果API请求失败回退到本地配置
return data || VERSION_CONFIG;
};
```
**优势:**
- ✅ 版本配置可在后端实时调整,无需前端发版
- ✅ 支持A/B测试不同版本配置
- ✅ 便于运营人员灵活调整产品策略
- ✅ 前端有本地配置作为兜底方案,保证可用性
### 路由守卫
```typescript
// RouteGuard.tsx
export const RouteGuard = ({ moduleId, children }) => {
const { hasAccess } = usePermission();
if (!hasAccess(moduleId)) {
return <UpgradePrompt moduleId={moduleId} />;
}
return children;
};
```
---
## 🔌 模块独立性设计
### 模块注册机制
```typescript
// 模块接口定义
interface ModuleDefinition {
id: string; // 模块唯一标识
name: string; // 模块名称
route: string; // 路由路径
icon?: ReactNode; // 图标
component: LazyComponent; // 懒加载组件
sideNav?: SideNavConfig; // 左侧导航配置
version?: UserVersion[]; // 支持的版本
standalone?: boolean; // 是否支持独立运行
apiBaseUrl?: string; // 独立运行时的API地址
}
// 模块配置
const MODULES: ModuleDefinition[] = [
{
id: 'literature-platform',
name: 'AI智能文献',
route: '/literature',
component: lazy(() => import('@/modules/literature')),
version: ['advanced', 'premium'],
standalone: true, // 支持独立运行
apiBaseUrl: process.env.LITERATURE_API_URL, // 可配置
},
// ... 其他模块
];
```
### 独立部署支持
```typescript
// 模块加载器
export const ModuleLoader = ({ moduleId }: { moduleId: string }) => {
const module = MODULES.find((m) => m.id === moduleId);
if (!module) {
return <NotFound />;
}
// 检查是否独立运行模式
const isStandalone = module.standalone &&
window.location.hostname === module.apiBaseUrl;
if (isStandalone) {
// 独立运行:不显示顶部导航,只显示模块内容
return <StandaloneLayout module={module} />;
}
// 集成运行:显示完整导航和布局
return <ModuleLayout module={module} />;
};
```
### 配置驱动的模块加载
```typescript
// 环境变量配置
// .env
REACT_APP_ENABLED_MODULES=ai-qa,knowledge-base,literature-platform
REACT_APP_STANDALONE_MODULE=literature-platform
// 模块配置读取
const getEnabledModules = () => {
const enabled = process.env.REACT_APP_ENABLED_MODULES?.split(',') || [];
return MODULES.filter((m) => enabled.includes(m.id));
};
```
---
## 📐 布局系统设计
### 布局层次
```
MainLayout (主布局)
├── Header (顶部导航)
│ ├── Logo
│ ├── TopNavigation (导航项)
│ └── UserMenu (用户菜单)
└── MainContent (主内容区)
├── SideNavigation (左侧导航) - 可选
└── Content (内容区域)
└── ModuleLayout (模块布局)
```
### 布局组件
```typescript
// MainLayout.tsx
export const MainLayout = () => {
return (
<div className="min-h-screen flex flex-col">
<Header />
<div className="flex flex-1">
<SideNavigation /> {/* 根据模块显示/隐藏 */}
<main className="flex-1">
<Outlet /> {/* 路由出口 */}
</main>
</div>
</div>
);
};
// ModuleLayout.tsx
export const ModuleLayout = ({ module }: { module: ModuleDefinition }) => {
return (
<div className="module-layout">
{module.sideNav && <ModuleSideNav config={module.sideNav} />}
<div className="module-content">
<Outlet />
</div>
</div>
);
};
```
---
## 🎨 UI/UX设计规范
### 顶部导航样式
```css
.top-navigation {
height: 64px;
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
display: flex;
align-items: center;
padding: 0 24px;
}
.nav-item {
padding: 8px 16px;
margin: 0 4px;
color: #4b5563;
font-weight: 500;
border-bottom: 2px solid transparent;
transition: all 0.2s;
}
.nav-item:hover {
color: #0ea5e9;
}
.nav-item.active {
color: #0ea5e9;
border-bottom-color: #0ea5e9;
font-weight: 600;
}
```
### 响应式设计
- **桌面端 (>1024px)**: 完整显示所有导航项
- **平板端 (768-1024px)**: 显示前4个其余折叠到"更多"菜单
- **移动端 (<768px)**: 汉堡菜单 + 抽屉导航
---
## 📝 实施计划
### 第一阶段框架搭建Week 1
- [x] 创建新前端项目结构
- [ ] 实现顶部导航组件
- [ ] 实现路由系统
- [ ] 实现权限控制基础
- [ ] 实现基础布局系统
### 第二阶段模块集成Week 2
- [ ] 迁移AI问答模块
- [ ] 迁移知识库模块
- [ ] 实现占位模块(智能数据清洗)
- [ ] 完善权限控制
### 第三阶段AI智能文献开发Week 3+
- [ ] 开发AI智能文献模块
- [ ] 实现模块独立运行支持
- [ ] 完善文档和测试
---
## 🔄 未来扩展考虑
### 1. 模块独立产品化
- 支持通过环境变量配置独立运行
- 独立的API地址配置
- 独立的部署配置
### 2. 版本权限管理
- 后端API提供用户版本信息
- 版本配置完全可调整(无需改动代码)
- 推荐从后端API动态获取版本配置支持实时调整模块分配
- 前端根据版本动态显示/隐藏模块
- 支持版本升级提示
- 版本权限分配策略可随时根据业务需求调整
### 3. 新模块接入
- 遵循模块接口规范
- 在配置文件中注册模块
- 自动集成到导航系统
---
## 📚 相关文档
- [导航结构设计](./02-导航结构设计.md)
- [路由设计](./03-路由设计.md)
- [布局设计](./04-布局设计.md)
- [权限控制设计](./05-权限控制设计.md)
- [AI智能文献模块架构设计](../AI智能文献/00-系统设计/01-模块架构设计.md)
---
**文档版本:** v1.0
**最后更新:** 2025-10-29

View File

@@ -0,0 +1,390 @@
# 导航结构设计文档
> **文档版本:** v1.0
> **创建日期:** 2025-10-29
> **维护者:** 前端开发团队
> **最后更新:** 2025-10-29
---
## 📋 文档说明
本文档详细说明AI科研平台的导航结构设计包括顶部导航和左侧导航的设计规范。
> **重要提示:** 本文档中涉及的模块版本要求(`requiredVersion`)均为**初始配置**,可以根据业务需求随时调整。版本权限分配完全可配置,无需改动代码逻辑。
---
## 🧭 顶部导航设计
### 导航项配置
```typescript
// navigationConfig.ts
export interface NavigationItem {
id: string; // 唯一标识
label: string; // 显示名称
route: string; // 路由路径
icon?: ReactNode; // 图标(可选)
requiredVersion?: UserVersion; // 最低版本要求(可配置,支持后期调整)
standalone?: boolean; // 是否支持独立运行
}
/**
* 顶部导航配置
*
* ⚠️ 重要说明:
* - requiredVersion 字段为初始配置,可根据业务需求随时调整
* - 推荐通过后端API动态获取版本配置支持实时调整
* - 修改版本要求无需改动代码逻辑,只需更新配置即可
*/
export const TOP_NAVIGATION_ITEMS: NavigationItem[] = [
{
id: 'ai-qa',
label: 'AI问答',
route: '/ai-qa',
requiredVersion: 'basic', // 初始配置:基础版可用(可调整)
},
{
id: 'literature-platform',
label: 'AI智能文献',
route: '/literature',
requiredVersion: 'advanced', // 初始配置:高级版可用(可调整)
standalone: true,
},
{
id: 'knowledge-base',
label: '知识库',
route: '/knowledge-base',
requiredVersion: 'basic', // 初始配置:基础版可用(可调整)
},
{
id: 'data-cleaning',
label: '智能数据清洗',
route: '/data-cleaning',
requiredVersion: 'advanced', // 初始配置:高级版可用(可调整)
placeholder: true, // 占位,显示"开发中"
},
{
id: 'statistical-analysis',
label: '智能统计分析',
route: '/intelligent-analysis',
requiredVersion: 'premium', // 初始配置:旗舰版可用(可调整)
external: true, // 由Java团队开发只做顶部导航集成
},
{
id: 'statistical-tools',
label: '统计分析工具',
route: '/statistical-tools',
requiredVersion: 'premium', // 初始配置:旗舰版可用(可调整)
external: true, // 由Java团队开发只做顶部导航集成
},
];
```
### 顶部导航布局
```
┌──────────────────────────────────────────────────────────────────────────┐
│ [Logo] [AI问答] [AI智能文献] [知识库] [智能数据清洗] [智能统计分析] [统计分析工具] [用户名] [用户菜单▼] │
└──────────────────────────────────────────────────────────────────────────┘
160px 自适应宽度 200px
```
### 视觉设计规范
#### 导航项样式
- **正常状态**`color: #4b5563`, `font-weight: 500`
- **悬停状态**`color: #0ea5e9`, `background: rgba(14, 165, 233, 0.1)`
- **激活状态**`color: #0ea5e9`, `font-weight: 600`, `border-bottom: 2px solid #0ea5e9`
- **禁用状态**(无权限):`color: #9ca3af`, `cursor: not-allowed`
#### 间距规范
- 导航项之间:`16px` 水平间距
- 导航项内边距:`12px 16px`
- 整个导航栏高度:`64px`
### 个人中心设计
**位置**:顶部导航最右侧
**显示内容**
- 用户名(手机号脱敏显示,如:`186****8738`
- 用户头像/图标(点击触发下拉菜单)
**下拉菜单选项**
```
┌─────────────────────┐
│ 个人中心 │
│ 历史记录 │
│ ──────────────── │
│ 订阅管理 │
│ 退出账号 │
└─────────────────────┘
```
**路由跳转**
- 个人中心 → `/user/profile`
- 历史记录 → `/user/history`
- 订阅管理 → `/user/subscription`
- 退出账号 → 登出操作
---
## 📂 左侧导航设计
### 设计原则
1. **按需显示**:只有进入具体模块后才显示左侧导航
2. **模块独立**:每个模块有自己独立的左侧导航配置
3. **层级清晰**:支持一级和二级菜单
### AI问答模块左侧导航
**布局方式**:卡片式布局(不使用左侧导航)
```
┌─────────────────────────────────────────┐
│ AI问答主界面 │
│ ┌───────────────────────────────────┐ │
│ │ 搜索框 + 提问按钮 │ │
│ └───────────────────────────────────┘ │
│ │
│ 或选择一个智能体开始: │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │选题│ │PICO│ │研究│ │方法│ ... │
│ │评价│ │梳理│ │方案│ │学 │ │
│ └────┘ └────┘ └────┘ └────┘ │
└─────────────────────────────────────────┘
```
### AI智能文献模块左侧导航
```typescript
const LITERATURE_SIDE_NAV = [
{
id: 'research-plan',
label: '研究方案生成',
route: '/literature/research-plan',
icon: '📋',
},
{
id: 'search',
label: '智能文献检索',
route: '/literature/search',
icon: '🔍',
},
{
id: 'management',
label: '文献管理',
route: '/literature/management',
icon: '📚',
},
{
id: 'screening',
label: '标题摘要初筛',
route: '/literature/screening',
icon: '✅',
},
{
id: 'full-text',
label: '全文复筛',
route: '/literature/full-text',
icon: '📄',
},
{
id: 'extraction',
label: '全文解析与数据提取',
route: '/literature/extraction',
icon: '🔬',
},
{
id: 'analysis',
label: '数据综合分析与报告',
route: '/literature/analysis',
icon: '📊',
},
];
```
**布局样式**
- 宽度:`200px`
- 背景色:`#f9fafb`
- 激活项:`background: #e0e7ff`, `border-left: 3px solid #4f46e5`
### 知识库模块左侧导航
```typescript
const KNOWLEDGE_BASE_SIDE_NAV = [
{
id: 'list',
label: '知识库列表',
route: '/knowledge-base',
icon: '📚',
},
{
id: 'create',
label: '+ 新建知识库',
route: '/knowledge-base/create',
icon: '+',
},
];
```
### 智能统计分析模块(外部模块说明)
**说明:** 智能统计分析模块由**Java团队**开发,采用**Java后端**技术栈。
**我们的职责:** 仅在顶部导航中集成该模块的入口点击后跳转到Java团队开发的页面。
**设计规范:** 不需要我们设计左侧导航Java团队已有自己的页面布局设计。
**集成方式:**
- 顶部导航点击后,直接跳转到 `/intelligent-analysis` 路由
- 该路由可能指向独立的Java应用或iframe嵌入
- 具体集成方式需与Java团队协商确定
### 统计分析工具模块(外部模块说明)
**说明:** 统计分析工具模块由**Java团队**开发,采用**Java后端**技术栈。
**我们的职责:** 仅在顶部导航中集成该模块的入口点击后跳转到Java团队开发的页面。
**设计规范:** 该模块**不是左侧导航设计**Java团队有自己的页面布局如顶部Tab导航等
**集成方式:**
- 顶部导航点击后,直接跳转到 `/statistical-tools` 路由
- 该路由可能指向独立的Java应用或iframe嵌入
- 具体集成方式需与Java团队协商确定
---
## 🔄 导航交互逻辑
### 顶部导航切换
```typescript
// 点击顶部导航项
const handleNavClick = (item: NavigationItem) => {
// 1. 检查权限
if (!hasPermission(item.requiredVersion)) {
showUpgradePrompt(item);
return;
}
// 2. 检查是否为占位模块
if (item.placeholder) {
showComingSoon(item);
return;
}
// 3. 导航到目标路由
navigate(item.route);
// 4. 更新激活状态
setActiveNavItem(item.id);
};
```
### 左侧导航切换
```typescript
// 点击左侧导航项
const handleSideNavClick = (item: SideNavItem) => {
// 导航到目标路由(模块内部路由)
navigate(item.route);
// 更新激活状态
setActiveSideNavItem(item.id);
};
```
### 面包屑导航(可选)
对于深层级页面,建议添加面包屑导航:
```
首页 > AI智能文献 > 标题摘要初筛 > 审核工作台
```
---
## 📱 响应式设计
### 桌面端 (>1024px)
- 完整显示所有顶部导航项
- 显示完整的左侧导航
### 平板端 (768-1024px)
- 显示前4个顶部导航项
- 其余导航项折叠到"更多"菜单
- 左侧导航可折叠为抽屉式
### 移动端 (<768px)
- 顶部导航采用汉堡菜单(☰)
- 左侧导航改为底部Tab导航或抽屉式
---
## 🎨 样式规范
### CSS变量定义
```css
:root {
/* 导航颜色 */
--nav-bg-color: #ffffff;
--nav-border-color: #e5e7eb;
--nav-text-color: #4b5563;
--nav-text-hover: #0ea5e9;
--nav-text-active: #0ea5e9;
--nav-active-border: #0ea5e9;
/* 侧边栏颜色 */
--sidebar-bg: #f9fafb;
--sidebar-active-bg: #e0e7ff;
--sidebar-active-border: #4f46e5;
--sidebar-text-color: #4338ca;
/* 尺寸 */
--nav-height: 64px;
--sidebar-width: 200px;
--nav-item-padding: 12px 16px;
--nav-item-spacing: 16px;
}
```
---
## 📝 实施清单
### 组件开发
- [ ] `TopNavigation.tsx` - 顶部导航组件
- [ ] `SideNavigation.tsx` - 左侧导航组件
- [ ] `UserMenu.tsx` - 用户菜单组件
- [ ] `NavigationGuard.tsx` - 导航权限守卫
- [ ] `ComingSoon.tsx` - 开发中占位组件
### 配置文件
- [ ] `navigationConfig.ts` - 导航配置
- [ ] `moduleNavConfig.ts` - 模块导航配置
- [ ] `versionConfig.ts` - 版本配置(本地配置,作为兜底)
- [ ] `useVersionConfig.ts` - 版本配置Hook从API动态获取
### 文档
- [ ] 更新本文档
- [ ] 编写导航组件使用文档
---
**文档版本:** v1.0
**最后更新:** 2025-10-29

View File

@@ -0,0 +1,306 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI科研平台-整体架构原型 V3</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/heroicons/2.1.3/24/outline/css/heroicons.min.css" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
.top-nav-link { padding: 1rem 1.25rem; color: #4b5563; font-weight: 500; border-bottom: 2px solid transparent; transition: all 0.2s ease; white-space: nowrap;}
.top-nav-link:hover { color: #0ea5e9; }
.top-nav-link.active { color: #0ea5e9; border-bottom-color: #0ea5e9; font-weight: 600; }
.module-view { display: none; }
.module-view.active { display: block; animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.sub-sidebar { background-color: #eef2ff; width: 200px; }
.sub-sidebar-link { display: block; padding: 0.75rem 1.5rem; color: #4338ca; font-size: 0.875rem; border-left: 3px solid transparent; }
.sub-sidebar-link:hover { background-color: #e0e7ff; }
.sub-sidebar-link.active { font-weight: 600; border-left-color: #4f46e5; background-color: #e0e7ff; }
.sub-tabs button { padding: 0.75rem 1.5rem; color: #6b7280; border-bottom: 2px solid transparent; }
.sub-tabs button.active { color: #0ea5e9; border-bottom-color: #0ea5e9; font-weight: 500; }
/* V3 Styles */
.user-menu { position: relative; }
.user-menu-dropdown { display: none; position: absolute; right: 0; top: 100%; margin-top: 0.5rem; background-color: white; border-radius: 0.375rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 50; width: 10rem; }
.user-menu:hover .user-menu-dropdown { display: block; }
.dropdown-link { display: block; padding: 0.5rem 1rem; color: #374151; font-size: 0.875rem; }
.dropdown-link:hover { background-color: #f3f4f6; }
</style>
</head>
<body class="text-gray-800">
<!-- Header with Top Navigation -->
<header class="bg-white shadow-md sticky top-0 z-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo/Brand -->
<div class="flex-shrink-0 flex items-center">
<span class="font-bold text-xl text-sky-600">临床研究平台</span>
</div>
<!-- Top Navigation (V3 Updated) -->
<nav id="top-navigation" class="flex space-x-2">
<a href="#" class="top-nav-link active" onclick="showModule('research')">研究管理</a>
<a href="#" class="top-nav-link" onclick="showModule('stats-tools')">统计分析工具</a>
<a href="#" class="top-nav-link" onclick="showModule('ai-qa')">AI 问答</a> <!-- Renamed back -->
<a href="#" class="top-nav-link" onclick="showModule('knowledge-base')">个人知识库</a>
<a href="#" class="top-nav-link" onclick="showModule('literature-platform')">AI文献平台</a>
<!-- Personal Center removed from top nav -->
</nav>
<!-- User Menu (V3 Updated) -->
<div class="flex items-center space-x-4">
<span class="text-sm text-gray-500">186****8738</span>
<div class="user-menu">
<button class="text-gray-400 hover:text-gray-600 focus:outline-none">
<i class="hi-outline hi-user-circle h-7 w-7"></i>
</button>
<div class="user-menu-dropdown">
<a href="#" class="dropdown-link" onclick="showModule('personal-center'); event.preventDefault();">个人中心</a>
<a href="#" class="dropdown-link" onclick="showModule('personal-center'); event.preventDefault();">历史记录</a> <!-- Direct link example -->
<hr class="my-1">
<a href="#" class="dropdown-link">退出账号</a>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<main id="main-content" class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<!-- Module View: 研究管理 (Research Management) -->
<div id="research-view" class="module-view active">
<!-- Content from V2, unchanged -->
<div class="flex bg-white rounded-lg shadow overflow-hidden min-h-[calc(100vh-10rem)]"><aside class="sub-sidebar p-4 flex-shrink-0"><h2 class="font-semibold text-indigo-700 mb-4 px-2">研究管理</h2><nav class="space-y-1"><a href="#" class="sub-sidebar-link active">首页</a><a href="#" class="sub-sidebar-link">研究项目列表</a><a href="#" class="sub-sidebar-link">PICO</a><a href="#" class="sub-sidebar-link">上传数据</a><a href="#" class="sub-sidebar-link">统计分析</a><a href="#" class="sub-sidebar-link">分析报告</a></nav></aside><div class="flex-grow p-6"><h1 class="text-2xl font-bold mb-4">研究管理 - 首页 (占位内容)</h1><p>这里将展示最近的研究项目卡片...</p><div class="grid grid-cols-3 gap-4 mt-6"><div class="border rounded-lg p-4 bg-gray-50 text-center">新建研究项目</div><div class="border rounded-lg p-4 bg-gray-50">项目A</div><div class="border rounded-lg p-4 bg-gray-50">项目B</div></div></div></div>
</div>
<!-- Module View: 统计分析工具 (Stats Tools) -->
<div id="stats-tools-view" class="module-view">
<!-- Content from V2, unchanged -->
<div class="bg-white rounded-lg shadow overflow-hidden min-h-[calc(100vh-10rem)] p-6"><h1 class="text-2xl font-bold mb-4">统计分析工具</h1><nav class="sub-tabs border-b border-gray-200 mb-6"><button class="active">统计分析</button><button>预测模型建立与验证</button><button>随机分组</button><button>样本量</button></nav><div><h2 class="text-xl font-semibold mb-3">统计分析 (占位内容)</h2><p>这里将展示各种统计分析方法的分类和入口...</p><div class="space-y-4 mt-4 text-sm"><div class="border rounded p-3 bg-gray-50">单组</div><div class="border rounded p-3 bg-gray-50">两组</div><div class="border rounded p-3 bg-gray-50">多组</div></div></div></div>
</div>
<!-- Module View: AI 问答 (AI Q&A - V3 Reverted to Card Layout) -->
<div id="ai-qa-view" class="module-view">
<div class="bg-white rounded-lg shadow overflow-hidden min-h-[calc(100vh-10rem)] p-6">
<div class="text-center mb-8">
<h1 class="text-2xl font-bold text-blue-600 mb-2">医学研究专属大模型 (已接入DeepSeek)</h1>
<input type="text" placeholder="向AI提问或选择下方任务卡片..." class="w-1/2 p-3 border rounded-full shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
<button class="ml-2 bg-blue-600 text-white font-bold py-3 px-6 rounded-full hover:bg-blue-700">提问</button>
</div>
<!-- Content for AI Q&A - Card layout similar to screenshot -->
<h2 class="text-xl font-semibold mb-4 text-center text-gray-600">或选择一个智能体开始:</h2>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="border rounded-lg p-6 bg-gray-50 text-center hover:shadow-lg transition-shadow cursor-pointer">
<h3 class="font-bold text-lg mb-2">选题评价</h3>
<p class="text-sm text-gray-600">评估您的研究选题的创新性、价值和可行性。</p>
</div>
<div class="border rounded-lg p-6 bg-gray-50 text-center hover:shadow-lg transition-shadow cursor-pointer">
<h3 class="font-bold text-lg mb-2">科学问题梳理</h3>
<p class="text-sm text-gray-600">将您的研究想法转化为清晰、可研究的科学问题。</p>
</div>
<div class="border rounded-lg p-6 bg-gray-50 text-center hover:shadow-lg transition-shadow cursor-pointer">
<h3 class="font-bold text-lg mb-2">PICO 梳理</h3>
<p class="text-sm text-gray-600">辅助您定义严谨的PICO要素。</p>
</div>
<div class="border rounded-lg p-6 bg-gray-50 text-center hover:shadow-lg transition-shadow cursor-pointer">
<h3 class="font-bold text-lg mb-2">研究方案撰写</h3>
<p class="text-sm text-gray-600">基于PICO信息生成初步的研究方案草稿。</p>
</div>
<div class="border rounded-lg p-6 bg-gray-50 text-center hover:shadow-lg transition-shadow cursor-pointer">
<h3 class="font-bold text-lg mb-2">样本量计算</h3>
<p class="text-sm text-gray-600">根据您的研究设计和预期效果,估算所需样本量。</p>
</div>
<div class="border rounded-lg p-6 bg-gray-50 text-center hover:shadow-lg transition-shadow cursor-pointer">
<h3 class="font-bold text-lg mb-2">文章润色</h3>
<p class="text-sm text-gray-600">对您的论文草稿进行语言润色和风格优化。</p>
</div>
<div class="border rounded-lg p-6 bg-gray-50 text-center hover:shadow-lg transition-shadow cursor-pointer">
<h3 class="font-bold text-lg mb-2">文章翻译</h3>
<p class="text-sm text-gray-600">提供中英文本互译功能。</p>
</div>
<!-- Add other cards -->
</div>
</div>
</div>
<!-- Module View: 个人知识库 (Knowledge Base - V3 Updated) -->
<div id="knowledge-base-view" class="module-view">
<div class="flex bg-white rounded-lg shadow overflow-hidden min-h-[calc(100vh-10rem)]">
<!-- Sub Sidebar for KB -->
<aside class="sub-sidebar p-4 flex-shrink-0 bg-blue-50">
<h2 class="font-semibold text-blue-700 mb-4 px-2">个人知识库</h2>
<nav class="space-y-1">
<a href="#" class="sub-sidebar-link active">知识库 A (心血管)</a>
<a href="#" class="sub-sidebar-link">知识库 B (肿瘤免疫)</a>
<a href="#" class="sub-sidebar-link">知识库 C (未分类)</a>
<a href="#" class="sub-sidebar-link text-blue-500 mt-4">+ 新建知识库</a>
</nav>
</aside>
<!-- Content for KB -->
<div class="flex-grow p-6">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">知识库 A (35/50篇文献)</h1>
<button class="bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg text-sm">+ 添加文献</button>
</div>
<!-- V3: Contextual QA Input within KB -->
<div class="mb-6 bg-blue-50 p-4 rounded-lg border border-blue-200">
<label class="block text-sm font-medium text-blue-700 mb-2">在此知识库中提问:</label>
<div class="flex space-x-2">
<input type="text" placeholder="例如SGLT2对心衰的影响" class="flex-grow border rounded-md p-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
<button onclick="askInKbContext()" class="bg-blue-600 text-white font-semibold px-4 py-2 rounded-md hover:bg-blue-700 text-sm">提问</button>
</div>
</div>
<h2 class="text-xl font-semibold mb-3">文献列表:</h2>
<div class="space-y-3">
<div class="border rounded p-3 bg-white text-sm flex justify-between items-center">
<span>文献1: EMPA-REG...</span>
<button class="text-xs text-red-500 hover:text-red-700">移除</button>
</div>
<div class="border rounded p-3 bg-white text-sm flex justify-between items-center">
<span>文献2: DECLARE-TIMI...</span>
<button class="text-xs text-red-500 hover:text-red-700">移除</button>
</div>
<div class="border rounded p-3 bg-white text-sm flex justify-between items-center">
<span>文献3: CANVAS...</span>
<button class="text-xs text-red-500 hover:text-red-700">移除</button>
</div>
<p class="text-gray-500 text-sm">...</p>
</div>
</div>
</div>
</div>
<!-- Module View: AI文献平台 (AI Literature Platform - V3 Updated) -->
<div id="literature-platform-view" class="module-view">
<div class="flex bg-white rounded-lg shadow overflow-hidden min-h-[calc(100vh-10rem)]">
<!-- Sub Sidebar for Literature Platform -->
<aside class="sub-sidebar p-4 flex-shrink-0 bg-sky-50">
<h2 class="font-semibold text-sky-700 mb-4 px-2">AI文献平台</h2>
<nav class="space-y-1">
<a href="#" class="sub-sidebar-link active">1. 研究方案生成</a>
<a href="#" class="sub-sidebar-link">2. 智能文献检索</a>
<!-- V3: Added Literature Management -->
<a href="#" class="sub-sidebar-link">3. 文献管理</a>
<a href="#" class="sub-sidebar-link">4. 标题摘要初筛</a>
<a href="#" class="sub-sidebar-link">5. 全文复筛</a>
<a href="#" class="sub-sidebar-link">6. 全文解析与数据提取</a>
<a href="#" class="sub-sidebar-link">7. 数据综合分析与报告</a>
</nav>
</aside>
<!-- Content for Literature Platform -->
<div class="flex-grow p-6">
<h1 class="text-2xl font-bold mb-4">研究方案生成 (占位内容)</h1>
<p>这里将是研究方案生成的向导式界面...</p>
<div class="mt-6 border rounded p-3 bg-gray-50 flex justify-between items-center text-sm">
<span>(下方为示意:项目文献管理入口在左侧导航栏)</span>
<button class="text-xs bg-blue-100 text-blue-700 font-semibold py-1 px-2 rounded hover:bg-blue-200" onclick="alert('将此文献添加到个人知识库...')">添加到个人知识库</button>
</div>
</div>
</div>
</div>
<!-- Module View: 个人中心 (Personal Center - V3 Updated) -->
<div id="personal-center-view" class="module-view">
<div class="bg-white rounded-lg shadow p-6 min-h-[calc(100vh-10rem)]">
<h1 class="text-2xl font-bold mb-6">个人中心</h1>
<nav class="flex space-x-8 border-b mb-6">
<button class="pb-2 border-b-2 border-sky-500 text-sky-600 font-semibold">账户信息</button>
<button class="pb-2 border-b-2 border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700">偏好设置</button>
<button class="pb-2 border-b-2 border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700">历史记录</button>
</nav>
<!-- Placeholder Content -->
<div id="personal-center-content">
<h2 class="font-semibold text-lg mb-4">账户信息</h2>
<p class="text-sm text-gray-600">用户名: 186****8738</p>
<button class="text-sm text-sky-600 mt-4 hover:underline">修改密码</button>
<hr class="my-6">
<h2 class="font-semibold text-lg mb-4">完整的历史记录 (占位)</h2>
<p class="text-sm text-gray-600">这里将按模块分类展示您所有的操作历史...</p>
</div>
</div>
</div>
</main>
<script>
// --- STATE MANAGEMENT ---
let currentModule = 'research'; // Default module
// Removed currentQaSource as QA Center design changed
// --- DOM ELEMENTS ---
const topNavLinks = document.querySelectorAll('#top-navigation .top-nav-link');
const moduleViews = document.querySelectorAll('.module-view');
// Removed QA Center specific elements no longer needed
// --- FUNCTIONS ---
function showModule(moduleId) {
currentModule = moduleId;
topNavLinks.forEach(link => {
link.classList.remove('active');
// Adjust condition to handle user menu clicks potentially having different onclick structure
const onclickAttr = link.getAttribute('onclick');
if (onclickAttr && onclickAttr.includes(`'${moduleId}'`)) {
link.classList.add('active');
}
});
// Special handling for personal center activated via user menu
if (moduleId === 'personal-center' && document.querySelector('#top-navigation a.active')) {
document.querySelector('#top-navigation a.active').classList.remove('active');
}
moduleViews.forEach(view => view.classList.remove('active'));
const activeView = document.getElementById(`${moduleId}-view`);
if (activeView) {
activeView.classList.add('active');
} else {
console.error("Module view not found:", moduleId);
document.getElementById('research-view')?.classList.add('active'); // Fallback
}
window.scrollTo(0, 0);
// Close user menu dropdown if open (simple simulation)
const dropdown = document.querySelector('.user-menu-dropdown');
if (dropdown) dropdown.style.display = 'none';
// Re-enable after a short delay for hover effect
setTimeout(() => { if (dropdown) dropdown.style.display = ''; }, 200);
}
// V3: Simplified Ask in KB Context - shows alert
function askInKbContext() {
const question = document.querySelector(`#knowledge-base-view input[placeholder*='在此知识库中提问']`).value;
if (!question.trim()) {
alert("请输入您的问题。");
return;
}
alert(`模拟在当前知识库中提问: "${question}"\n(实际应用中将在后台统一处理)`);
// In a real app, this would send the question and current KB context to the backend QA service.
// The response could potentially be displayed here or link to the QA center history.
}
// --- INITIALIZATION ---
document.addEventListener('DOMContentLoaded', () => {
showModule(currentModule); // Show default module on load
});
</script>
</body>
</html>

View File

@@ -0,0 +1,55 @@
# 前端架构
## 📋 目录
本目录包含平台前端的架构设计文档。
### 文档列表
- **[01-前端总体架构设计.md](./01-前端总体架构设计.md)** - 平台级前端架构总体设计
- **[02-导航结构设计.md](./02-导航结构设计.md)** - 顶部导航和左侧导航的详细设计
- **[03-架构原型图.html](./03-架构原型图.html)** - 交互式前端架构原型图
---
## 🎯 设计原则
### 1. 模块化设计
- 每个功能模块独立开发、独立部署
- 模块间无依赖关系,可独立运行
- 支持模块独立产品化
### 2. 权限控制设计
- 基于用户版本的权限控制
- 灵活的功能模块开关机制
- 版本配置可动态调整
### 3. 可扩展性设计
- 预留新模块接入接口
- 插件化的模块加载机制
- 配置驱动的功能开关
---
## 📚 相关文档
- [系统架构分层设计](../../00-系统总体设计/01-系统架构分层设计.md)
- [模块化架构设计](../../00-系统总体设计/06-模块独立部署与单机版方案.md)
---
**维护者:** 前端开发团队
**最后更新:** 2025-11-07

View File

@@ -0,0 +1,78 @@
# 平台基础层
> **层级定义:** 所有业务模块的基础设施
> **核心原则:** 全局唯一、业务无关、稳定性高
---
## 📋 模块清单
| 模块 | 说明 | 状态 |
|------|------|------|
| **01-用户与权限中心(UAM)** | 用户认证、角色权限、Feature Flag | ⏳ 待设计 |
| **02-存储服务** | 文件上传下载、对象存储 | ⏳ 待设计 |
| **03-通知服务** | 站内消息、邮件、WebSocket | ⏳ 待设计 |
| **04-监控与日志** | 操作日志、错误监控、审计日志 | ⏳ 待设计 |
| **05-系统配置** | 系统级配置管理、动态配置 | ⏳ 待设计 |
---
## 🎯 设计原则
### 1. 全局唯一性
- 整个平台只有一套基础设施
- 所有业务模块共享
### 2. 业务无关性
- 不涉及具体业务逻辑
- 提供通用能力
### 3. 高稳定性
- 很少变动
- 向后兼容
### 4. 高可用性
- 支持负载均衡
- 支持容灾备份
---
## 📚 快速导航
### 快速上下文
- **[AI对接] 平台层快速上下文.md** - 2-3分钟了解平台层
### 核心模块
1. [用户与权限中心(UAM)](./01-用户与权限中心(UAM)/README.md) - P0优先级
2. [存储服务](./02-存储服务/README.md)
3. [通知服务](./03-通知服务/README.md)
4. [监控与日志](./04-监控与日志/README.md)
5. [系统配置](./05-系统配置/README.md)
---
## 🔗 相关文档
- [系统架构分层设计](../00-系统总体设计/01-系统架构分层设计.md)
- [通用能力层](../02-通用能力层/README.md)
- [业务模块层](../03-业务模块/README.md)
---
**最后更新:** 2025-11-06
**维护人:** 技术架构师

View File

@@ -0,0 +1,135 @@
# [AI对接] 平台层快速上下文
> **阅读时间:** 2-3分钟 | **Token消耗** ~1500 tokens
> **层级:** L1 | **前置阅读:** 00-系统总体设计/[AI对接] 快速上下文.md
---
## 📋 平台层定位
**平台基础层是所有业务模块的地基,提供通用的基础设施能力。**
**核心原则:**
- ✅ 全局唯一(整个平台只有一套)
- ✅ 业务无关(不涉及具体业务逻辑)
- ✅ 强依赖性(所有业务模块都必须依赖)
- ✅ 高稳定性(很少变动)
---
## 🎯 5个核心模块
### 1. 用户与权限中心UAM⭐ P0优先级
**职责:**
- 用户注册、登录、认证JWT
- 角色与权限管理RBAC
- Feature Flag功能开关 ⭐ 商业模式核心
- 多租户管理
**为什么重要:**
```
Feature Flag = 商业模式技术基础
专业版 → 只能用基础功能 + DeepSeek
高级版 → 更多功能 + Qwen3
旗舰版 → 全部功能 + Claude
通过Feature Flag控制
```
**数据表platform_schema**
```sql
- users #
- roles #
- permissions #
- feature_flags # Feature Flag配置
- tenants # SaaS多租户
```
---
### 2. 存储服务 - P1
**职责:**
- 文件上传、下载、删除
- 对象存储MinIO/阿里云OSS
- 本地文件系统(单机版)
---
### 3. 通知服务 - P2
**职责:**
- 站内消息
- 邮件通知
- WebSocket实时推送
---
### 4. 监控与日志 - P1
**职责:**
- 操作日志记录
- 错误日志监控
- 审计日志(合规要求)
**数据表:**
```sql
- admin_logs #
- error_logs #
- audit_logs #
```
---
### 5. 系统配置 - P1
**职责:**
- 系统级配置管理
- 多环境配置(开发、测试、生产)
- 动态配置更新
---
## 📊 依赖关系
**所有业务模块都依赖平台层:**
```
业务模块层AIA、ASL、PKB、DC、SSA、ST、RVW、ADMIN
↓ 全部依赖
平台基础层UAM、存储、通知、监控、配置
```
---
## 🔗 快速导航
**详细设计文档:**
- [用户与权限中心](./01-用户与权限中心(UAM)/README.md)
- [存储服务](./02-存储服务/README.md)
- [通知服务](./03-通知服务/README.md)
- [监控与日志](./04-监控与日志/README.md)
- [系统配置](./05-系统配置/README.md)
**相关文档:**
- [系统架构分层设计](../00-系统总体设计/01-系统架构分层设计.md)
---
**最后更新:** 2025-11-06
**维护人:** 技术架构师