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:
390
docs/01-平台基础层/06-前端架构/02-导航结构设计.md
Normal file
390
docs/01-平台基础层/06-前端架构/02-导航结构设计.md
Normal 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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user