107 lines
2.6 KiB
Vue
107 lines
2.6 KiB
Vue
<template>
|
||
<div class="gx_layout">
|
||
<div class="gx_layout_header">
|
||
<div class="logo">GxDL算力云</div>
|
||
<div class="menu">
|
||
<a-menu
|
||
v-model:selectedKeys="current"
|
||
mode="horizontal"
|
||
:items="leftRoutes"
|
||
@click="({ key }) => handleMenuClick(key)"
|
||
/>
|
||
<a-menu
|
||
v-model:selectedKeys="current"
|
||
mode="horizontal"
|
||
:items="rightRoutes"
|
||
@click="({ key }) => handleMenuClick(key)"
|
||
/>
|
||
</div>
|
||
<div class="user-info"></div>
|
||
</div>
|
||
<div class="gx_layout_content">
|
||
<router-view />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ref, watch } from 'vue'
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
|
||
// 根据当前路由初始化菜单选中项（去掉 /layout 前缀）
|
||
const getActiveKeyFromRoute = () => {
|
||
const path = route.path
|
||
if (path.startsWith('/layout')) {
|
||
const key = path.replace('/layout', '') || '/home'
|
||
return [key.startsWith('/') ? key : '/' + key]
|
||
}
|
||
return ['/home']
|
||
}
|
||
|
||
const current = ref(getActiveKeyFromRoute())
|
||
|
||
// 监听路由变化（浏览器前进后退时同步菜单）
|
||
watch(() => route.path, () => {
|
||
current.value = getActiveKeyFromRoute()
|
||
})
|
||
|
||
// 菜单数据（key 使用子路径，如 '/admin'）
|
||
const leftRoutes = ref([
|
||
{ key: '/home', label: '首页' },
|
||
{ key: '/center', label: '算力中心' },
|
||
{ key: '/yunmain', label: '云主机' }
|
||
])
|
||
const rightRoutes = ref([
|
||
{ key: '/document', label: '用户文档' },
|
||
{ key: '/admin/home', label: '控制台' }
|
||
])
|
||
|
||
// 点击菜单跳转
|
||
const handleMenuClick = (key) => {
|
||
// key 如 "/admin" → 拼成 "/layout/admin"
|
||
const fullPath = `/layout${key}`
|
||
router.push(fullPath)
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.gx_layout{
|
||
width: 100%;
|
||
height:100vh;
|
||
.gx_layout_header{
|
||
height: 60px;
|
||
background: #ffffff;
|
||
border-bottom: 1px solid rgb(216 216 216);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
flex: 1;
|
||
.logo{
|
||
width: 200px;
|
||
}
|
||
.user-info{
|
||
width: 100px;
|
||
}
|
||
.menu{
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
&>ul:first-child{
|
||
width: 100%;
|
||
border-bottom: none;
|
||
}
|
||
&>ul{
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
}
|
||
.gx_layout_content{
|
||
height: calc(100% - 60px);
|
||
background-color: rgba(240, 240, 240, 1);
|
||
}
|
||
}
|
||
|
||
</style> |