Merge branch 'dev' of http://110.42.96.64:19890/GoCo/OL-LearnPlatform-Frontend into dev
This commit is contained in:
yuk255
commit
8d2b4037d4
35
src/api/modules/menu.ts
Normal file
35
src/api/modules/menu.ts
Normal file
@ -0,0 +1,35 @@
|
||||
// 菜单相关API
|
||||
import { ApiRequest } from '../request'
|
||||
import type { ApiResponse } from '../types'
|
||||
|
||||
// 菜单项接口定义
|
||||
export interface MenuItem {
|
||||
id: string
|
||||
name: string
|
||||
path: string
|
||||
type: string
|
||||
icon: string | null
|
||||
parentId: string | null
|
||||
sortOrder: number
|
||||
izVisible: number
|
||||
permissionKey: string | null
|
||||
}
|
||||
|
||||
// 菜单API类
|
||||
export class MenuApi {
|
||||
/**
|
||||
* 获取首页菜单
|
||||
*/
|
||||
static async getIndexMenus(): Promise<ApiResponse<MenuItem[]>> {
|
||||
return await ApiRequest.get('/aiol/aiolMenu/getIndexMenus')
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取学生菜单
|
||||
*/
|
||||
static async getStudentMenus(): Promise<ApiResponse<MenuItem[]>> {
|
||||
return await ApiRequest.get('/aiol/aiolMenu/getStudentMenus')
|
||||
}
|
||||
}
|
||||
|
||||
export default MenuApi
|
||||
186
src/components/layout/DynamicNavigation.vue
Normal file
186
src/components/layout/DynamicNavigation.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="dynamic-navigation">
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="menuStore.loading" class="loading">
|
||||
<n-spin size="small" />
|
||||
<span>加载菜单中...</span>
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-else-if="menuStore.error" class="error">
|
||||
<n-alert type="error" :title="menuStore.error" />
|
||||
<n-button @click="handleRetry" size="small" type="primary">
|
||||
重试
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<nav v-else class="nav-menu">
|
||||
<router-link
|
||||
v-for="menu in menuStore.navMenus"
|
||||
:key="menu.id"
|
||||
:to="menu.path"
|
||||
class="nav-item"
|
||||
:class="{ active: isCurrentRoute(menu.path) }"
|
||||
>
|
||||
<n-icon v-if="menu.icon" :component="getIcon(menu.icon)" />
|
||||
<span>{{ menu.name }}</span>
|
||||
</router-link>
|
||||
</nav>
|
||||
|
||||
<!-- 调试信息（开发环境） -->
|
||||
<div v-if="isDev" class="debug-info">
|
||||
<n-collapse>
|
||||
<n-collapse-item title="菜单调试信息" name="debug">
|
||||
<pre>{{ JSON.stringify(menuStore.indexMenus, null, 2) }}</pre>
|
||||
</n-collapse-item>
|
||||
</n-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import {
|
||||
NSpin,
|
||||
NAlert,
|
||||
NButton,
|
||||
NIcon,
|
||||
NCollapse,
|
||||
NCollapseItem
|
||||
} from 'naive-ui'
|
||||
import {
|
||||
HomeOutlined,
|
||||
BookOutlined,
|
||||
TeamOutlined,
|
||||
FileTextOutlined,
|
||||
CalendarOutlined,
|
||||
RobotOutlined
|
||||
} from '@vicons/antd'
|
||||
import { useMenuStore } from '@/stores/menu'
|
||||
|
||||
// 图标映射
|
||||
const iconMap: Record<string, any> = {
|
||||
home: HomeOutlined,
|
||||
book: BookOutlined,
|
||||
team: TeamOutlined,
|
||||
resource: FileTextOutlined,
|
||||
activity: CalendarOutlined,
|
||||
ai: RobotOutlined,
|
||||
}
|
||||
|
||||
const menuStore = useMenuStore()
|
||||
const route = useRoute()
|
||||
|
||||
// 是否为开发环境
|
||||
const isDev = computed(() => import.meta.env.DEV)
|
||||
|
||||
// 获取图标组件
|
||||
const getIcon = (iconName: string) => {
|
||||
return iconMap[iconName] || HomeOutlined
|
||||
}
|
||||
|
||||
// 检查是否为当前路由
|
||||
const isCurrentRoute = (path: string) => {
|
||||
return route.path === path
|
||||
}
|
||||
|
||||
// 重试加载菜单
|
||||
const handleRetry = async () => {
|
||||
await menuStore.fetchIndexMenus()
|
||||
}
|
||||
|
||||
// 组件挂载时加载菜单
|
||||
onMounted(async () => {
|
||||
if (menuStore.indexMenus.length === 0) {
|
||||
await menuStore.fetchIndexMenus()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dynamic-navigation {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.debug-info {
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.debug-info pre {
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.nav-menu {
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
flex-shrink: 0;
|
||||
min-width: 80px;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.nav-item span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
106
src/stores/menu.ts
Normal file
106
src/stores/menu.ts
Normal file
@ -0,0 +1,106 @@
|
||||
// 菜单状态管理
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import type { MenuItem } from '@/api/modules/menu'
|
||||
import { MenuApi } from '@/api/modules/menu'
|
||||
import { generateNavMenus } from '@/utils/routeUtils'
|
||||
|
||||
export const useMenuStore = defineStore('menu', () => {
|
||||
// 状态
|
||||
const indexMenus = ref<MenuItem[]>([])
|
||||
const studentMenus = ref<MenuItem[]>([])
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// 计算属性
|
||||
const navMenus = computed(() => generateNavMenus(indexMenus.value))
|
||||
|
||||
const visibleIndexMenus = computed(() =>
|
||||
indexMenus.value
|
||||
.filter(menu => menu.izVisible === 1)
|
||||
.sort((a, b) => b.sortOrder - a.sortOrder)
|
||||
)
|
||||
|
||||
const visibleStudentMenus = computed(() =>
|
||||
studentMenus.value
|
||||
.filter(menu => menu.izVisible === 1)
|
||||
.sort((a, b) => b.sortOrder - a.sortOrder)
|
||||
)
|
||||
|
||||
// 方法
|
||||
const fetchIndexMenus = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
const response = await MenuApi.getIndexMenus()
|
||||
if (response.code === 200) {
|
||||
indexMenus.value = response.data || []
|
||||
console.log('✅ 首页菜单加载成功:', indexMenus.value)
|
||||
} else {
|
||||
throw new Error(response.message || '获取首页菜单失败')
|
||||
}
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '获取首页菜单失败'
|
||||
console.error('❌ 获取首页菜单失败:', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchStudentMenus = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
const response = await MenuApi.getStudentMenus()
|
||||
if (response.code === 200) {
|
||||
studentMenus.value = response.data || []
|
||||
console.log('✅ 学生菜单加载成功:', studentMenus.value)
|
||||
} else {
|
||||
throw new Error(response.message || '获取学生菜单失败')
|
||||
}
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '获取学生菜单失败'
|
||||
console.error('❌ 获取学生菜单失败:', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getMenuByPath = (path: string, type: 'index' | 'student' = 'index'): MenuItem | undefined => {
|
||||
const menus = type === 'index' ? indexMenus.value : studentMenus.value
|
||||
return menus.find(menu => menu.path === path)
|
||||
}
|
||||
|
||||
const isRouteVisible = (path: string, type: 'index' | 'student' = 'index'): boolean => {
|
||||
const menu = getMenuByPath(path, type)
|
||||
return menu ? menu.izVisible === 1 : false
|
||||
}
|
||||
|
||||
const clearMenus = () => {
|
||||
indexMenus.value = []
|
||||
studentMenus.value = []
|
||||
error.value = null
|
||||
}
|
||||
|
||||
return {
|
||||
// 状态
|
||||
indexMenus,
|
||||
studentMenus,
|
||||
loading,
|
||||
error,
|
||||
|
||||
// 计算属性
|
||||
navMenus,
|
||||
visibleIndexMenus,
|
||||
visibleStudentMenus,
|
||||
|
||||
// 方法
|
||||
fetchIndexMenus,
|
||||
fetchStudentMenus,
|
||||
getMenuByPath,
|
||||
isRouteVisible,
|
||||
clearMenus,
|
||||
}
|
||||
})
|
||||
114
src/utils/routeUtils.ts
Normal file
114
src/utils/routeUtils.ts
Normal file
@ -0,0 +1,114 @@
|
||||
// 路由工具函数
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
import type { MenuItem } from '@/api/modules/menu'
|
||||
|
||||
// 组件映射表 - 将路径映射到对应的组件
|
||||
const componentMap: Record<string, () => Promise<any>> = {
|
||||
'/': () => import('@/views/Home.vue'),
|
||||
'/courses': () => import('@/views/Courses.vue'),
|
||||
'/special-training': () => import('@/views/SpecialTraining.vue'),
|
||||
'/faculty': () => import('@/views/Faculty.vue'),
|
||||
'/resources': () => import('@/views/Resources.vue'),
|
||||
'/activities': () => import('@/views/Activities.vue'),
|
||||
'/ai/app': () => import('@/views/Ai/AiAppList-NaiveUI.vue'),
|
||||
}
|
||||
|
||||
// 路由名称映射表 - 将路径映射到路由名称
|
||||
const routeNameMap: Record<string, string> = {
|
||||
'/': 'Home',
|
||||
'/courses': 'Courses',
|
||||
'/special-training': 'SpecialTraining',
|
||||
'/faculty': 'Faculty',
|
||||
'/resources': 'Resources',
|
||||
'/activities': 'Activities',
|
||||
'/ai/app': 'AiAppList',
|
||||
}
|
||||
|
||||
// 路由标题映射表 - 将路径映射到页面标题
|
||||
const routeTitleMap: Record<string, string> = {
|
||||
'/': '首页',
|
||||
'/courses': '课程列表',
|
||||
'/special-training': '专题训练',
|
||||
'/faculty': '师资力量',
|
||||
'/resources': '精选资源',
|
||||
'/activities': '全部活动',
|
||||
'/ai/app': 'AI应用管理',
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据菜单数据生成路由配置
|
||||
* @param menus 菜单数据数组
|
||||
* @returns 路由配置数组
|
||||
*/
|
||||
export function generateRoutesFromMenus(menus: MenuItem[]): RouteRecordRaw[] {
|
||||
const routes: RouteRecordRaw[] = []
|
||||
|
||||
// 过滤可见的菜单项并按排序字段排序
|
||||
const visibleMenus = menus
|
||||
.filter(menu => menu.izVisible === 1)
|
||||
.sort((a, b) => b.sortOrder - a.sortOrder) // 降序排列
|
||||
|
||||
for (const menu of visibleMenus) {
|
||||
const { path, name } = menu
|
||||
|
||||
// 检查路径是否有对应的组件
|
||||
if (!componentMap[path]) {
|
||||
console.warn(`路径 ${path} 没有对应的组件映射，跳过生成路由`)
|
||||
continue
|
||||
}
|
||||
|
||||
const route: RouteRecordRaw = {
|
||||
path,
|
||||
name: routeNameMap[path] || name,
|
||||
component: componentMap[path],
|
||||
meta: {
|
||||
title: routeTitleMap[path] || name,
|
||||
menuId: menu.id,
|
||||
sortOrder: menu.sortOrder,
|
||||
permissionKey: menu.permissionKey,
|
||||
}
|
||||
}
|
||||
|
||||
routes.push(route)
|
||||
}
|
||||
|
||||
return routes
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成导航菜单数据
|
||||
* @param menus 菜单数据数组
|
||||
* @returns 导航菜单数组
|
||||
*/
|
||||
export function generateNavMenus(menus: MenuItem[]) {
|
||||
return menus
|
||||
.filter(menu => menu.izVisible === 1)
|
||||
.sort((a, b) => b.sortOrder - a.sortOrder)
|
||||
.map(menu => ({
|
||||
id: menu.id,
|
||||
name: menu.name,
|
||||
path: menu.path,
|
||||
icon: menu.icon,
|
||||
sortOrder: menu.sortOrder,
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查路由是否存在于菜单中
|
||||
* @param path 路由路径
|
||||
* @param menus 菜单数据数组
|
||||
* @returns 是否存在
|
||||
*/
|
||||
export function isRouteInMenus(path: string, menus: MenuItem[]): boolean {
|
||||
return menus.some(menu => menu.path === path && menu.izVisible === 1)
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据路径获取菜单项
|
||||
* @param path 路由路径
|
||||
* @param menus 菜单数据数组
|
||||
* @returns 菜单项或undefined
|
||||
*/
|
||||
export function getMenuByPath(path: string, menus: MenuItem[]): MenuItem | undefined {
|
||||
return menus.find(menu => menu.path === path)
|
||||
}
|
||||
320
src/views/AiModelTest.vue
Normal file
320
src/views/AiModelTest.vue
Normal file
@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div class="ai-model-test">
|
||||
<n-card title="AI模型字典API测试">
|
||||
<n-space vertical size="large">
|
||||
<!-- 操作按钮 -->
|
||||
<n-card title="操作" size="small">
|
||||
<n-space>
|
||||
<n-button
|
||||
@click="handleLoadModels"
|
||||
:loading="loading"
|
||||
type="primary"
|
||||
>
|
||||
加载AI模型列表
|
||||
</n-button>
|
||||
<n-button
|
||||
@click="handleDirectRequest"
|
||||
:loading="loading"
|
||||
type="info"
|
||||
>
|
||||
直接请求测试
|
||||
</n-button>
|
||||
<n-button @click="handleClearModels">
|
||||
清空数据
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<!-- 状态信息 -->
|
||||
<n-card title="状态信息" size="small">
|
||||
<n-descriptions :column="2" bordered>
|
||||
<n-descriptions-item label="加载状态">
|
||||
<n-tag :type="loading ? 'warning' : 'success'">
|
||||
{{ loading ? '加载中' : '已完成' }}
|
||||
</n-tag>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="错误信息">
|
||||
<n-tag v-if="error" type="error">
|
||||
{{ error }}
|
||||
</n-tag>
|
||||
<n-tag v-else type="success">无错误</n-tag>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="模型数量">
|
||||
{{ modelList.length }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="API地址">
|
||||
<n-code>/sys/dict/getDictItems/airag_model where model_type = 'LLM',name,id</n-code>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="用户Token">
|
||||
<n-tag v-if="userStore.token" type="success">已登录</n-tag>
|
||||
<n-tag v-else type="warning">未登录</n-tag>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Base URL">
|
||||
<n-code>{{ baseURL }}</n-code>
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</n-card>
|
||||
|
||||
<!-- 模型列表 -->
|
||||
<n-card title="AI模型列表" size="small">
|
||||
<n-data-table
|
||||
:columns="modelColumns"
|
||||
:data="modelList"
|
||||
:pagination="false"
|
||||
size="small"
|
||||
/>
|
||||
</n-card>
|
||||
|
||||
<!-- 选择器测试 -->
|
||||
<n-card title="选择器测试" size="small">
|
||||
<n-form-item label="选择AI模型">
|
||||
<n-select
|
||||
v-model:value="selectedModel"
|
||||
placeholder="请选择AI模型"
|
||||
:options="modelOptions"
|
||||
:loading="loading"
|
||||
@update:value="handleModelSelect"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="当前选择">
|
||||
<n-tag v-if="selectedModel" type="info">
|
||||
{{ getSelectedModelText() }}
|
||||
</n-tag>
|
||||
<span v-else>未选择</span>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
|
||||
<!-- 原始数据 -->
|
||||
<n-card title="原始API响应数据" size="small">
|
||||
<n-code
|
||||
:code="JSON.stringify(rawData, null, 2)"
|
||||
language="json"
|
||||
show-line-numbers
|
||||
/>
|
||||
</n-card>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, h } from 'vue'
|
||||
import {
|
||||
NCard,
|
||||
NSpace,
|
||||
NDescriptions,
|
||||
NDescriptionsItem,
|
||||
NTag,
|
||||
NButton,
|
||||
NDataTable,
|
||||
NCode,
|
||||
NFormItem,
|
||||
NSelect,
|
||||
useMessage
|
||||
} from 'naive-ui'
|
||||
import type { DataTableColumns } from 'naive-ui'
|
||||
import { SystemApi, type DictItem } from '@/api'
|
||||
import axios from 'axios'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
const message = useMessage()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 状态
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const modelList = ref<DictItem[]>([])
|
||||
const rawData = ref<any>(null)
|
||||
const selectedModel = ref<string>('')
|
||||
|
||||
// 计算属性
|
||||
const baseURL = computed(() => import.meta.env.VITE_API_BASE_URL || '/jeecgboot')
|
||||
|
||||
// 计算属性
|
||||
const modelOptions = computed(() =>
|
||||
modelList.value.map(item => ({
|
||||
label: item.text,
|
||||
value: item.value
|
||||
}))
|
||||
)
|
||||
|
||||
// 表格列定义
|
||||
const modelColumns: DataTableColumns<DictItem> = [
|
||||
{
|
||||
title: 'Value',
|
||||
key: 'value',
|
||||
width: 200,
|
||||
render: (row) => {
|
||||
return h('code', {
|
||||
style: 'background: #f5f5f5; padding: 2px 4px; border-radius: 3px;'
|
||||
}, row.value)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Text',
|
||||
key: 'text',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: 'Label',
|
||||
key: 'label',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: 'Title',
|
||||
key: 'title',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: 'Color',
|
||||
key: 'color',
|
||||
width: 100,
|
||||
render: (row) => {
|
||||
return row.color ? h(NTag, { type: 'info' }, () => row.color) : '无'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// 加载AI模型列表
|
||||
const handleLoadModels = async () => {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
console.log('🚀 开始加载AI模型列表...')
|
||||
console.log('🔍 当前时间戳:', Date.now())
|
||||
console.log('🔍 请求URL:', '/sys/dict/getDictItems/airag_model%20where%20model_type%20=%20\'LLM\',name,id')
|
||||
|
||||
const response = await SystemApi.getAiModelDict()
|
||||
|
||||
console.log('📦 完整API响应:', response)
|
||||
console.log('📦 响应数据:', response.data)
|
||||
|
||||
rawData.value = response
|
||||
|
||||
if (response.code === 200 || response.code === 0) {
|
||||
modelList.value = response.data || []
|
||||
message.success(`加载成功，共${modelList.value.length}个模型`)
|
||||
console.log('✅ AI模型列表加载成功:', modelList.value)
|
||||
} else {
|
||||
throw new Error(response.message || '获取模型列表失败')
|
||||
}
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '加载失败'
|
||||
message.error(error.value || '未知错误')
|
||||
console.error('❌ 加载AI模型列表失败:', err)
|
||||
console.error('❌ 错误详情:', {
|
||||
message: err.message,
|
||||
response: err.response,
|
||||
config: err.config,
|
||||
stack: err.stack
|
||||
})
|
||||
|
||||
// 保存错误信息到rawData以便查看
|
||||
rawData.value = {
|
||||
error: err.message,
|
||||
response: err.response?.data,
|
||||
config: err.config
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 直接请求测试
|
||||
const handleDirectRequest = async () => {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
console.log('🚀 开始直接请求测试...')
|
||||
|
||||
const baseURL = import.meta.env.VITE_API_BASE_URL || '/jeecgboot'
|
||||
const timestamp = Date.now()
|
||||
const token = userStore.token || localStorage.getItem('X-Access-Token') || ''
|
||||
|
||||
const url = `${baseURL}/sys/dict/getDictItems/airag_model%20where%20model_type%20=%20'LLM',name,id?_t=${timestamp}`
|
||||
|
||||
console.log('🔍 请求信息:', {
|
||||
url,
|
||||
timestamp,
|
||||
token: token ? '***' : '无',
|
||||
baseURL
|
||||
})
|
||||
|
||||
const headers: any = {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Request-Time': timestamp.toString(),
|
||||
'timestamp': timestamp.toString(),
|
||||
'X-Timestamp': timestamp.toString(),
|
||||
}
|
||||
|
||||
if (token) {
|
||||
headers['X-Access-Token'] = token
|
||||
}
|
||||
|
||||
console.log('🔍 请求头:', headers)
|
||||
|
||||
const response = await axios.get(url, { headers })
|
||||
|
||||
console.log('📦 直接请求响应:', response)
|
||||
rawData.value = response.data
|
||||
|
||||
if (response.data.code === 200 || response.data.code === 0) {
|
||||
modelList.value = response.data.result || response.data.data || []
|
||||
message.success(`直接请求成功，共${modelList.value.length}个模型`)
|
||||
} else {
|
||||
throw new Error(response.data.message || '直接请求失败')
|
||||
}
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '直接请求失败'
|
||||
message.error(error.value || '未知错误')
|
||||
console.error('❌ 直接请求失败:', err)
|
||||
|
||||
rawData.value = {
|
||||
error: err.message,
|
||||
response: err.response?.data,
|
||||
status: err.response?.status,
|
||||
headers: err.response?.headers
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 清空数据
|
||||
const handleClearModels = () => {
|
||||
modelList.value = []
|
||||
rawData.value = null
|
||||
selectedModel.value = ''
|
||||
error.value = null
|
||||
message.info('数据已清空')
|
||||
}
|
||||
|
||||
// 模型选择
|
||||
const handleModelSelect = (value: string) => {
|
||||
const model = modelList.value.find(item => item.value === value)
|
||||
if (model) {
|
||||
message.info(`已选择: ${model.text}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取选择的模型文本
|
||||
const getSelectedModelText = () => {
|
||||
const model = modelList.value.find(item => item.value === selectedModel.value)
|
||||
return model ? model.text : selectedModel.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ai-model-test {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:deep(.n-code) {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
218
src/views/MenuTest.vue
Normal file
218
src/views/MenuTest.vue
Normal file
@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="menu-test">
|
||||
<n-card title="动态菜单路由测试">
|
||||
<n-space vertical size="large">
|
||||
<!-- 菜单状态 -->
|
||||
<n-card title="菜单状态" size="small">
|
||||
<n-descriptions :column="2" bordered>
|
||||
<n-descriptions-item label="加载状态">
|
||||
<n-tag :type="menuStore.loading ? 'warning' : 'success'">
|
||||
{{ menuStore.loading ? '加载中' : '已加载' }}
|
||||
</n-tag>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="错误信息">
|
||||
<n-tag v-if="menuStore.error" type="error">
|
||||
{{ menuStore.error }}
|
||||
</n-tag>
|
||||
<n-tag v-else type="success">无错误</n-tag>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="首页菜单数量">
|
||||
{{ menuStore.indexMenus.length }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="可见菜单数量">
|
||||
{{ menuStore.visibleIndexMenus.length }}
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</n-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<n-card title="操作" size="small">
|
||||
<n-space>
|
||||
<n-button
|
||||
@click="handleRefreshMenus"
|
||||
:loading="menuStore.loading"
|
||||
type="primary"
|
||||
>
|
||||
刷新菜单
|
||||
</n-button>
|
||||
<n-button @click="handleClearMenus">
|
||||
清空菜单
|
||||
</n-button>
|
||||
<n-button @click="handleTestRoute">
|
||||
测试路由跳转
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<n-card title="菜单列表" size="small">
|
||||
<n-data-table
|
||||
:columns="menuColumns"
|
||||
:data="menuStore.visibleIndexMenus"
|
||||
:pagination="false"
|
||||
size="small"
|
||||
/>
|
||||
</n-card>
|
||||
|
||||
<!-- 路由信息 -->
|
||||
<n-card title="当前路由信息" size="small">
|
||||
<n-descriptions :column="1" bordered>
|
||||
<n-descriptions-item label="路径">
|
||||
{{ $route.path }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="名称">
|
||||
{{ $route.name }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="标题">
|
||||
{{ $route.meta.title }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="菜单ID">
|
||||
{{ $route.meta.menuId || '无' }}
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</n-card>
|
||||
|
||||
<!-- 动态导航组件 -->
|
||||
<n-card title="动态导航组件" size="small">
|
||||
<DynamicNavigation />
|
||||
</n-card>
|
||||
|
||||
<!-- 原始数据 -->
|
||||
<n-card title="原始菜单数据" size="small">
|
||||
<n-code
|
||||
:code="JSON.stringify(menuStore.indexMenus, null, 2)"
|
||||
language="json"
|
||||
show-line-numbers
|
||||
/>
|
||||
</n-card>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { h } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
NCard,
|
||||
NSpace,
|
||||
NDescriptions,
|
||||
NDescriptionsItem,
|
||||
NTag,
|
||||
NButton,
|
||||
NDataTable,
|
||||
NCode,
|
||||
useMessage
|
||||
} from 'naive-ui'
|
||||
import type { DataTableColumns } from 'naive-ui'
|
||||
import { useMenuStore } from '@/stores/menu'
|
||||
import DynamicNavigation from '@/components/layout/DynamicNavigation.vue'
|
||||
import type { MenuItem } from '@/api/modules/menu'
|
||||
|
||||
const menuStore = useMenuStore()
|
||||
const router = useRouter()
|
||||
const message = useMessage()
|
||||
|
||||
// 表格列定义
|
||||
const menuColumns: DataTableColumns<MenuItem> = [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '路径',
|
||||
key: 'path',
|
||||
width: 150,
|
||||
render: (row) => {
|
||||
return h('code', { style: 'background: #f5f5f5; padding: 2px 4px; border-radius: 3px;' }, row.path)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
key: 'type',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
key: 'sortOrder',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '可见',
|
||||
key: 'izVisible',
|
||||
width: 80,
|
||||
render: (row) => {
|
||||
return h(NTag, {
|
||||
type: row.izVisible === 1 ? 'success' : 'error'
|
||||
}, () => row.izVisible === 1 ? '是' : '否')
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 100,
|
||||
render: (row) => {
|
||||
return h(NButton, {
|
||||
size: 'small',
|
||||
type: 'primary',
|
||||
onClick: () => handleNavigate(row.path)
|
||||
}, () => '跳转')
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// 刷新菜单
|
||||
const handleRefreshMenus = async () => {
|
||||
try {
|
||||
await menuStore.fetchIndexMenus()
|
||||
message.success('菜单刷新成功')
|
||||
} catch (error) {
|
||||
message.error('菜单刷新失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 清空菜单
|
||||
const handleClearMenus = () => {
|
||||
menuStore.clearMenus()
|
||||
message.info('菜单已清空')
|
||||
}
|
||||
|
||||
// 测试路由跳转
|
||||
const handleTestRoute = () => {
|
||||
const menus = menuStore.visibleIndexMenus
|
||||
if (menus.length > 0) {
|
||||
const randomMenu = menus[Math.floor(Math.random() * menus.length)]
|
||||
handleNavigate(randomMenu.path)
|
||||
} else {
|
||||
message.warning('没有可用的菜单项')
|
||||
}
|
||||
}
|
||||
|
||||
// 导航到指定路径
|
||||
const handleNavigate = (path: string) => {
|
||||
router.push(path).then(() => {
|
||||
message.success(`已跳转到: ${path}`)
|
||||
}).catch((error) => {
|
||||
message.error(`跳转失败: ${error.message}`)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.menu-test {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:deep(.n-code) {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user