# AI 政企应用商店 - 路由配置文档 > 版本：v2.0 > 最后更新：2024-01-19 > 框架：React Router v6 + TypeScript --- ## 📋 路由配置说明 ### 路由结构 ``` 一级路由 → 二级路由 → 三级路由 ``` ### 配置字段说明 | 字段 | 说明 | 示例 | |------|------|------| | `path` | 路由路径 | `/appCenter` | | `element` | 页面组件 | `@/pages/.../index` | | `handle.breadcrumbName` | 面包屑名称 | `应用中心` | | `handle.hidden` | 是否在菜单隐藏 | `true/false` | --- ## 🗺️ 完整路由表 ### 1. 概览/控制台 ```yaml 路径：/overview 组件：@/pages/home/index 组件文件：src/pages/home/index.tsx 面包屑：概览 菜单显示：是 图标：待配置 说明：首页数据统计面板 ``` --- ### 2. 应用中心 ```yaml 路径：/appCenter 组件：(父路由，包含子路由) 组件文件：src/pages/layout/index.tsx (Layout 容器) 面包屑：应用中心 菜单显示：是 图标：solar:widget-add-bold-duotone 子路由: 1. 全部 RAG 应用（默认首页） 路径：/ (index) 完整路径：/appCenter 组件：@/pages/deepseek/questionAnswer/appPlazaList/index 组件文件：src/pages/deepseek/questionAnswer/appPlazaList/index.tsx 面包屑：全部 RAG 应用 菜单显示：否（默认首页） 说明：显示所有 RAG 应用卡片列表 2. 分类应用 路径：/category/* 完整路径：/appCenter/category?category=xxx 组件：@/pages/categoryApps/index 组件文件：src/pages/categoryApps/index.tsx 面包屑：分类应用 菜单显示：否 说明：通过 query 参数区分不同分类 参数： - professional: 专业知识 - functional: 职能管理 - project: 项目级应用 3. 我创建的应用 路径：/questionAnswer 完整路径：/appCenter/questionAnswer 组件：@/pages/deepseek/questionAnswer/list/index 组件文件：src/pages/deepseek/questionAnswer/list/index.tsx 面包屑：我创建的应用 菜单显示：是 说明：显示当前用户创建的应用列表 4. 我创建的应用列表 路径：/questionAnswer/list 完整路径：/appCenter/questionAnswer/list 组件：@/pages/deepseek/questionAnswer/list/index 组件文件：src/pages/deepseek/questionAnswer/list/index.tsx 面包屑：我创建的应用列表 菜单显示：否 5. 创建应用 路径：/questionAnswer/create 完整路径：/appCenter/questionAnswer/create 组件：@/pages/deepseek/questionAnswer/info/index 组件文件：src/pages/deepseek/questionAnswer/info/index.tsx 面包屑：创建应用 菜单显示：否 说明：表单页面，创建新的 RAG 应用 6. 修改应用 路径：/questionAnswer/modify 完整路径：/appCenter/questionAnswer/modify 组件：@/pages/deepseek/questionAnswer/info/index 组件文件：src/pages/deepseek/questionAnswer/info/index.tsx 面包屑：修改应用 菜单显示：否 说明：表单页面，编辑现有应用 ``` --- ### 3. 其他非 RAG 应用 ```yaml 路径：/otherApps 组件：@/pages/otherApps/index 组件文件：src/pages/otherApps/index.tsx 面包屑：其他非 RAG 应用 菜单显示：否 图标：solar:gallery-add-bold-duotone 说明：显示非 RAG 类型的传统应用 ``` --- ### 4. 知识库管理 ```yaml 路径：/knowledge 组件：(父路由，包含子路由) 组件文件：src/pages/layout/index.tsx (Layout 容器) 面包屑：知识库管理 菜单显示：是 图标：solar:database-bold-duotone 子路由: 1. 知识库列表 路径：/knowledgeLib 完整路径：/knowledge/knowledgeLib 组件：@/pages/deepseek/knowledgeLib/list/index 组件文件：src/pages/deepseek/knowledgeLib/list/index.tsx 面包屑：知识库 菜单显示：是 说明：知识库列表页面 2. 知识库详情 路径：/:knowledgeId/:createBy 完整路径：/knowledge/knowledgeLib/:id/:by 组件：@/pages/deepseek/knowledgeLib/detail/index 组件文件：src/pages/deepseek/knowledgeLib/detail/index.tsx 面包屑：知识库详情 菜单显示：否 说明：动态参数路由，显示单个知识库详情 参数： - knowledgeId: 知识库 ID - createBy: 创建人 ID ``` --- ### 5. API 管理 ```yaml 路径：/system/apiKey 组件：@/pages/system/apiKey/index 组件文件：src/pages/system/apiKey/index.tsx 面包屑：API Key 菜单显示：是 图标：solar:key-bold-duotone 说明：API Key 管理列表 ``` --- ### 6. 应用审核 ```yaml 路径：/deepseek/audit 组件：@/pages/deepseek/audit/index 组件文件：src/pages/deepseek/audit/index.tsx 面包屑：应用审核 菜单显示：是 图标：solar:clipboard-check-bold-duotone 说明：应用审核管理页面 ``` --- ## 🎯 Sidebar 菜单配置 ### 应用矩阵（5 个菜单项） | 序号 | 菜单名称 | 路由 | Query 参数 | 图标 | 组件文件 | 状态 | |------|---------|------|-----------|------|---------|------| | 1 | 全部 RAG 应用 | `/appCenter` | 无 | `solar:widget-add-bold-duotone` | `src/pages/deepseek/questionAnswer/appPlazaList/index.tsx` | ✅ | | 2 | 专业知识 | `/appCenter/category` | `?category=professional` | `solar:book-2-bold-duotone` | `src/pages/categoryApps/index.tsx` | ✅ | | 3 | 职能管理 | `/appCenter/category` | `?category=functional` | `solar:star-bold-duotone` | `src/pages/categoryApps/index.tsx` | ✅ | | 4 | 项目级应用 | `/appCenter/category` | `?category=project` | `solar:notebook-bookmark-bold-duotone` | `src/pages/categoryApps/index.tsx` | ✅ | | 5 | 其他非 RAG 应用 | `/otherApps` | 无 | `solar:gallery-add-bold-duotone` | `src/pages/otherApps/index.tsx` | ✅ | --- ### 管理控制台（4 个菜单项） | 序号 | 菜单名称 | 路由 | 图标 | 组件文件 | 状态 | |------|---------|------|------|---------|------| | 1 | 我创建的应用 | `/appCenter/questionAnswer/create` | `solar:add-circle-bold-duotone` | `src/pages/deepseek/questionAnswer/info/index.tsx` | ✅ | | 2 | 知识库管理 | `/knowledge/knowledgeLib` | `solar:database-bold-duotone` | `src/pages/deepseek/knowledgeLib/list/index.tsx` | ✅ | | 3 | API 管理 | `/system/apiKey` | `solar:key-bold-duotone` | `src/pages/system/apiKey/index.tsx` | ✅ | | 4 | 应用审核 | `/deepseek/audit` | `solar:clipboard-check-bold-duotone` | `src/pages/deepseek/audit/index.tsx` | ✅ | --- ## 📂 完整组件文件目录 ``` src/pages/ │ ├── home/ │ ├── index.tsx # 概览/控制台首页 │ ├── style.less │ └── components/ │ ├── RagApplicationsTable.tsx # RAG 应用表格 │ ├── RagApplicationsModel.tsx # RAG 应用弹窗 │ └── RagKnowledgModel.tsx # 知识库弹窗 │ ├── deepseek/ │ ├── questionAnswer/ │ │ ├── appPlazaList/ │ │ │ ├── index.tsx # 全部 RAG 应用列表（首页） │ │ │ ├── style.less │ │ │ └── components/ │ │ │ ├── AppCard.tsx # 应用卡片组件 │ │ │ ├── AppCard.less │ │ │ ├── HeroBanner.tsx # Banner 广告 │ │ │ ├── HeroBanner.less │ │ │ ├── StatsGrid.tsx # 统计卡片 │ │ │ └── StatsGrid.less │ │ │ │ │ ├── list/ │ │ │ └── index.tsx # 我创建的应用列表 │ │ │ │ │ └── info/ │ │ └── index.tsx # 创建/修改应用表单 │ │ │ ├── knowledgeLib/ │ │ ├── list/ │ │ │ └── index.tsx # 知识库列表 │ │ │ │ │ └── detail/ │ │ └── index.tsx # 知识库详情 │ │ │ └── audit/ │ └── index.tsx # 应用审核 │ ├── categoryApps/ │ ├── index.tsx # 分类应用列表（专业/职能/项目） │ └── style.less │ ├── otherApps/ │ ├── index.tsx # 其他非 RAG 应用 │ └── style.less │ └── system/ └── apiKey/ ├── index.tsx # API Key 管理 └── components/ ├── InfoModal.tsx # 信息弹窗 └── Search.tsx # 搜索组件 ``` --- ## 📝 待修改配置 ### 请在下方填写您的需求 ```yaml ## 修改后的 Sidebar 菜单调整 ### 应用矩阵（5 个菜单项） | 序号 | 菜单名称 | 路由 | Query 参数 | 图标 | 组件文件 | 状态 | |------|---------|------|-----------|------|---------|------| | 1 | 全部 RAG 应用 （重定向Home）| `/appCenter` | 无 | `solar:widget-add-bold-duotone` | `复制 旧的组件 到 src/pages/appCenter/appPlazaList/index.tsx` 抽象中间的 HeroBanner、统计数据组件、以及通用的 【应用卡片】组件（这个组件的样式将被反复复用 | ✅ | | 2 | 专业知识 | `/appCenter/category` | `?category=professional` | `solar:book-2-bold-duotone` | `src/pages/appCenter/categoryApps/index.tsx` (复用 第一条中抽象出来的 【应用卡片】的样式，用传参的差异来筛选 | ✅ | | 3 | 职能管理 | `/appCenter/category` | `?category=functional`(同上） | `solar:star-bold-duotone` | `src/pages/categoryApps/index.tsx` | ✅ | | 4 | 项目级应用 | `/appCenter/category` | `?category=project`（同上） | `solar:notebook-bookmark-bold-duotone` | `src/pages/categoryApps/index.tsx` | ✅ | | 5 | 其他非 RAG 应用 | `/otherApps` | 无 | `solar:gallery-add-bold-duotone` | `src/pages/otherApps/otherAppList/index.tsx`（创建空的组件占位） | ✅ | --- ### 管理控制台（4 个菜单项） | 序号 | 菜单名称 | 路由 | 图标 | 组件文件 | 状态 | |------|---------|------|------|---------|------| | 1 | 我创建的应用 | `/appCenter/questionAnswer/create` 修改为 List组件， create组件需要后续添加按钮 | `solar:add-circle-bold-duotone` | `src/pages/questionAnswer/info/index.tsx` 移动组件，取消deepseek目录| ✅ | | 2 | 知识库管理 | `/knowledge/knowledgeLib` | `solar:database-bold-duotone` | `src/pages/deepseek/knowledgeLib/list/index.tsx` | ✅ | | 3 | API 管理 | `/system/apiKey` | `solar:key-bold-duotone` | `src/pages/system/apiKey/index.tsx` | ✅ | | 4 | 应用审核 | `/system/audit` | `solar:clipboard-check-bold-duotone` | `src/pages/system/audit/index.tsx` | ✅ | --- ``` --- ## 🔧 技术细节 ### 路由加载方式 ```tsx // 懒加载 + Suspense const lazyLoad = (loader: () => Promise) => { const Component = lazy(loader); return ( }> ); }; ``` ### 路由配置位置 - 主配置文件：`src/store/route.tsx` - 路由入口：`src/router.tsx` - 布局组件：`src/pages/layout/index.tsx` ### 图标库 - 库名：Iconify (Solar 图标集) - 使用方式：`` - CDN：`https://code.iconify.design/3/3.1.1/iconify.min.js` --- ## 📊 路由状态汇总 | 一级路由 | 二级路由数量 | 三级路由数量 | 组件总数 | |---------|------------|------------|---------| | /overview | - | - | 1 | | /appCenter | 6 | - | 6 | | /otherApps | - | - | 1 | | /knowledge | 1 | 1 | 2 | | /system | 1 | - | 1 | | /deepseek | 1 | - | 1 | | **总计** | **10** | **2** | **12** | --- **文档结束** 请在"待修改配置"部分填写您的需求，我将根据您的修改创建 TODO list 并执行！