feat(ASA): 添加导航菜单入口,将系统配置整合为下拉菜单

- 将知识库导航指向新的多知识库管理页面
- 将嵌入模型、LLM 配置、Prompt 模板、意图规则、话术流程、输出护栏整合到「系统配置」下拉菜单
- 添加下拉菜单样式和交互效果
This commit is contained in:
MerCry 2026-02-27 18:47:43 +08:00
parent 932d4d15ab
commit c1f5d3229f
1 changed files with 97 additions and 10 deletions

View File

@ -17,7 +17,7 @@
<el-icon><Odometer /></el-icon>
<span>控制台</span>
</router-link>
<router-link to="/kb" class="nav-item" :class="{ active: isActive('/kb') }">
<router-link to="/admin/knowledge-bases" class="nav-item" :class="{ active: isActive('/admin/knowledge-bases') }">
<el-icon><FolderOpened /></el-icon>
<span>知识库</span>
</router-link>
@ -30,14 +30,53 @@
<span>会话监控</span>
</router-link>
<div class="nav-divider"></div>
<router-link to="/admin/embedding" class="nav-item" :class="{ active: isActive('/admin/embedding') }">
<el-icon><Connection /></el-icon>
<span>嵌入模型</span>
</router-link>
<router-link to="/admin/llm" class="nav-item" :class="{ active: isActive('/admin/llm') }">
<el-icon><ChatDotSquare /></el-icon>
<span>LLM 配置</span>
</router-link>
<el-dropdown trigger="hover" placement="bottom-start">
<div class="nav-item dropdown-trigger" :class="{ active: isAdminActive }">
<el-icon><Setting /></el-icon>
<span>系统配置</span>
<el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
</div>
<template #dropdown>
<el-dropdown-menu class="admin-dropdown-menu">
<el-dropdown-item>
<router-link to="/admin/embedding" class="dropdown-link">
<el-icon><Connection /></el-icon>
嵌入模型
</router-link>
</el-dropdown-item>
<el-dropdown-item>
<router-link to="/admin/llm" class="dropdown-link">
<el-icon><ChatDotSquare /></el-icon>
LLM 配置
</router-link>
</el-dropdown-item>
<el-dropdown-item divided>
<router-link to="/admin/prompt-templates" class="dropdown-link">
<el-icon><Document /></el-icon>
Prompt 模板
</router-link>
</el-dropdown-item>
<el-dropdown-item>
<router-link to="/admin/intent-rules" class="dropdown-link">
<el-icon><Aim /></el-icon>
意图规则
</router-link>
</el-dropdown-item>
<el-dropdown-item>
<router-link to="/admin/script-flows" class="dropdown-link">
<el-icon><Share /></el-icon>
话术流程
</router-link>
</el-dropdown-item>
<el-dropdown-item>
<router-link to="/admin/guardrails" class="dropdown-link">
<el-icon><Shield /></el-icon>
输出护栏
</router-link>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</nav>
</div>
<div class="header-right">
@ -70,7 +109,7 @@ import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useTenantStore } from '@/stores/tenant'
import { getTenantList, type Tenant } from '@/api/tenant'
import { Odometer, FolderOpened, Cpu, Monitor, Connection, ChatDotSquare } from '@element-plus/icons-vue'
import { Odometer, FolderOpened, Cpu, Monitor, Connection, ChatDotSquare, Setting, ArrowDown, Document, Aim, Share, Shield } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const route = useRoute()
@ -84,6 +123,10 @@ const isActive = (path: string) => {
return route.path === path || route.path.startsWith(path + '/')
}
const isAdminActive = computed(() => {
return route.path.startsWith('/admin')
})
const handleTenantChange = (val: string) => {
tenantStore.setTenant(val)
//
@ -212,6 +255,21 @@ onMounted(() => {
font-size: 16px;
}
.dropdown-trigger {
cursor: pointer;
}
.dropdown-arrow {
font-size: 12px;
margin-left: 4px;
transition: transform 0.2s;
}
.dropdown-trigger:hover .dropdown-arrow,
.dropdown-trigger.active .dropdown-arrow {
transform: rotate(180deg);
}
.nav-divider {
width: 1px;
height: 20px;
@ -274,3 +332,32 @@ onMounted(() => {
}
}
</style>
<style>
.admin-dropdown-menu {
min-width: 160px;
}
.admin-dropdown-menu .el-dropdown-menu__item {
padding: 0;
}
.dropdown-link {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
width: 100%;
color: var(--text-primary, #1E293B);
text-decoration: none;
font-size: 14px;
}
.dropdown-link:hover {
color: var(--primary-color, #4F7CFF);
}
.dropdown-link .el-icon {
font-size: 16px;
}
</style>