AI 政企应用商店 - 路由配置文档

版本：v2.0
最后更新：2024-01-19
框架：React Router v6 + TypeScript

📋 路由配置说明

路由结构

一级路由 → 二级路由 → 三级路由

配置字段说明

字段	说明	示例
`path`	路由路径	`/appCenter`
`element`	页面组件	`@/pages/.../index`
`handle.breadcrumbName`	面包屑名称	`应用中心`
`handle.hidden`	是否在菜单隐藏	`true/false`

🗺️ 完整路由表

1. 概览/控制台

路径：/overview
组件：@/pages/home/index
组件文件：src/pages/home/index.tsx
面包屑：概览
菜单显示：是
图标：待配置
说明：首页数据统计面板

2. 应用中心

路径：/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 应用

路径：/otherApps
组件：@/pages/otherApps/index
组件文件：src/pages/otherApps/index.tsx
面包屑：其他非 RAG 应用
菜单显示：否
图标：solar:gallery-add-bold-duotone
说明：显示非 RAG 类型的传统应用

4. 知识库管理

路径：/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 管理

路径：/system/apiKey
组件：@/pages/system/apiKey/index
组件文件：src/pages/system/apiKey/index.tsx
面包屑：API Key
菜单显示：是
图标：solar:key-bold-duotone
说明：API Key 管理列表

6. 应用审核

路径：/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             # 搜索组件

📝 待修改配置

请在下方填写您的需求

## 修改后的 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` | ✅ |

---

🔧 技术细节

路由加载方式

// 懒加载 + Suspense
const lazyLoad = (loader: () => Promise<any>) => {
    const Component = lazy(loader);
    return (
        <Suspense fallback={<Loading />}>
            <Component />
        </Suspense>
    );
};

路由配置位置

主配置文件：src/store/route.tsx
路由入口：src/router.tsx
布局组件：src/pages/layout/index.tsx

图标库

库名：Iconify (Solar 图标集)
使用方式：<span className='iconify' data-icon='solar:xxx'></span>
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 并执行！

路由配置文档.md 12 KB Trvalý odkaz Historie Surový

AI 政企应用商店 - 路由配置文档

📋 路由配置说明

路由结构

配置字段说明

🗺️ 完整路由表

1. 概览/控制台

2. 应用中心

3. 其他非 RAG 应用

4. 知识库管理

5. API 管理

6. 应用审核

🎯 Sidebar 菜单配置

应用矩阵（5 个菜单项）

管理控制台（4 个菜单项）

📂 完整组件文件目录

📝 待修改配置

请在下方填写您的需求

🔧 技术细节

路由加载方式

路由配置位置

图标库

📊 路由状态汇总

路由配置文档.md 12 KB

Trvalý odkaz Historie Surový