feat: 新增服务看板页面

实现 Dashboard 看板视图并将应用默认入口由调优改为看板,路由、侧边栏默认菜单与登录跳转同步调整;侧边栏增加导航失败高亮校正,布局与 ECharts 注册柱状图适配看板,补充两份回归脚本、设计走查记录与五张设计截图。
This commit is contained in:
caoxiaozhu
2026-07-11 14:49:37 +08:00
parent ddf47eb8fe
commit cc113db1aa
15 changed files with 1013 additions and 11 deletions

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed } from 'vue'
import { computed, nextTick, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
@@ -9,7 +9,7 @@ const auth = useAuthStore()
/** 当前激活菜单 key取路由路径第一段如 /fine-tune/create → fine-tune */
const activeMenu = computed(() => {
const seg = route.path.split('/')[1] || 'fine-tune'
const seg = route.path.split('/')[1] || 'dashboard'
// 训练日志归到模型调优
if (seg === 'training-log') return 'fine-tune'
// 维度管理归到模型评测
@@ -62,10 +62,33 @@ const menuGroups = [
},
]
function handleSelect(key: string) {
/**
* 传给 el-menu 的激活值。
*
* el-menu 在点击菜单项时会立即把内部高亮移到被点击项,再触发 @select。
* 若随后 router.push 被路由守卫拦截如未保存草稿确认route.path 不变,
* activeMenu 也不会变化,导致 el-menu 无法把高亮校正回当前路由对应的项。
* 这里用一个可写 ref 包裹,导航失败时主动触发一次「置空 → 还原」,
* 强制 el-menu 重新对齐到真实激活项。
*/
const menuActive = ref(activeMenu.value)
watch(activeMenu, (value) => {
menuActive.value = value
})
async function handleSelect(key: string) {
const all = menuGroups.flatMap((g) => g.items)
const target = all.find((i) => i.key === key)
if (target) router.push(target.to)
if (!target) return
const failure = await router.push(target.to)
// 导航被守卫取消(如未保存修改确认)时,把高亮校正回当前路由
if (failure) {
menuActive.value = ''
await nextTick()
menuActive.value = activeMenu.value
}
}
function handleLogout() {
@@ -85,7 +108,7 @@ function handleLogout() {
<!-- 导航 -->
<el-scrollbar class="sidebar-nav" wrap-class="nav-scrollbar-wrap">
<el-menu
:default-active="activeMenu"
:default-active="menuActive"
class="sidebar-menu"
background-color="transparent"
text-color="var(--sidebar-text)"