# 导航结构设计文档

> **文档版本�?* 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)
- 显示�?个顶部导航项
- 其余导航项折叠到"更多"菜单
- 左侧导航可折叠为抽屉�?

### 移动�?(<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