# 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<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 并执行！
