120 lines
2.7 KiB
Markdown
120 lines
2.7 KiB
Markdown
# AI配置管理菜单测试说明
|
|
|
|
## 问题解决
|
|
已成功解决AI配置管理菜单不显示的问题。
|
|
|
|
## 修改内容
|
|
在 `web-admin/src/config/menu.ts` 文件中添加了AI配置管理的菜单项：
|
|
|
|
```typescript
|
|
{
|
|
path: '/aiconfig',
|
|
title: 'AI配置管理',
|
|
icon: 'Setting'
|
|
}
|
|
```
|
|
|
|
## 测试步骤
|
|
|
|
### 1. 启动开发服务器
|
|
开发服务器已启动在: http://localhost:5176/
|
|
|
|
### 2. 访问管理后台
|
|
1. 打开浏览器访问 http://localhost:5176/
|
|
2. 使用管理员账号登录
|
|
|
|
### 3. 验证菜单显示
|
|
在左侧菜单栏中应该能看到以下菜单项：
|
|
- 仪表盘 (DataLine图标)
|
|
- 管理员管理 (User图标)
|
|
- 用户管理 (UserFilled图标)
|
|
- **AI配置管理 (Setting图标)** ← 新添加的菜单
|
|
|
|
### 4. 测试功能
|
|
1. 点击"AI配置管理"菜单项
|
|
2. 应该跳转到 `/aiconfig/list` 页面
|
|
3. 页面应该显示AI配置管理界面，包括：
|
|
- 搜索表单
|
|
- 统计信息
|
|
- 配置列表表格
|
|
- 新增配置按钮
|
|
|
|
### 5. 测试仪表板集成
|
|
1. 返回仪表盘页面 (`/`)
|
|
2. 应该能看到AI配置的统计信息
|
|
3. 右侧应该有AI配置快速操作组件
|
|
|
|
## 菜单配置说明
|
|
|
|
菜单配置位于 `web-admin/src/config/menu.ts` 文件中，采用以下结构：
|
|
|
|
```typescript
|
|
export interface MenuItem {
|
|
path: string // 路由路径
|
|
title: string // 菜单标题
|
|
icon?: string // 图标名称 (Element Plus图标)
|
|
children?: MenuItem[] // 子菜单
|
|
hidden?: boolean // 是否隐藏
|
|
}
|
|
```
|
|
|
|
## 路由配置
|
|
|
|
AI配置管理的路由已在 `web-admin/src/router/index.ts` 中配置：
|
|
|
|
```typescript
|
|
{
|
|
path: '/aiconfig',
|
|
component: Layout,
|
|
redirect: '/aiconfig/list',
|
|
meta: { title: 'AI配置管理', icon: 'Setting' },
|
|
children: [
|
|
{
|
|
path: 'list',
|
|
name: 'AiConfigList',
|
|
component: () => import('@/views/aiconfig/AiConfigList.vue'),
|
|
meta: { title: 'AI配置列表' }
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
## 注意事项
|
|
|
|
1. **图标**: 使用的是Element Plus的内置图标 `Setting`
|
|
2. **路由**: 菜单路径 `/aiconfig` 对应路由配置
|
|
3. **权限**: 需要管理员登录权限才能访问
|
|
4. **响应式**: 菜单支持折叠/展开功能
|
|
|
|
## 故障排除
|
|
|
|
如果菜单仍然不显示，请检查：
|
|
|
|
1. **缓存问题**: 清除浏览器缓存或硬刷新 (Ctrl+F5)
|
|
2. **开发服务器**: 确保开发服务器正常运行
|
|
3. **路由配置**: 确认路由配置正确
|
|
4. **组件导入**: 确认组件文件存在且可正常导入
|
|
|
|
## 后续扩展
|
|
|
|
可以根据需要添加子菜单，例如：
|
|
|
|
```typescript
|
|
{
|
|
path: '/aiconfig',
|
|
title: 'AI配置管理',
|
|
icon: 'Setting',
|
|
children: [
|
|
{
|
|
path: '/aiconfig/list',
|
|
title: '配置列表',
|
|
icon: 'List'
|
|
},
|
|
{
|
|
path: '/aiconfig/template',
|
|
title: '配置模板',
|
|
icon: 'Document'
|
|
}
|
|
]
|
|
}
|
|
``` |