# 导航结构设计文档 > **文档版本：** 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