109 lines
2.9 KiB
Vue
109 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<a-layout class="min-h-screen">
|
||
|
|
<a-layout-sider v-model:collapsed="collapsed" class="layout-sider">
|
||
|
|
<div class="text-white text-center py-4 text-lg font-bold">
|
||
|
|
服务器监控平台
|
||
|
|
</div>
|
||
|
|
<a-menu
|
||
|
|
theme="dark"
|
||
|
|
mode="inline"
|
||
|
|
:selected-keys="[activeMenu]"
|
||
|
|
@click="handleMenuClick"
|
||
|
|
>
|
||
|
|
<a-menu-item key="dashboard">
|
||
|
|
<DashboardOutlined />
|
||
|
|
<span>控制台</span>
|
||
|
|
</a-menu-item>
|
||
|
|
<a-menu-item key="servers">
|
||
|
|
<ServerOutlined />
|
||
|
|
<span>服务器管理</span>
|
||
|
|
</a-menu-item>
|
||
|
|
<a-menu-item key="scripts">
|
||
|
|
<FileTextOutlined />
|
||
|
|
<span>脚本管理</span>
|
||
|
|
</a-menu-item>
|
||
|
|
<a-menu-item key="execute">
|
||
|
|
<PlayCircleOutlined />
|
||
|
|
<span>批量执行</span>
|
||
|
|
</a-menu-item>
|
||
|
|
<a-menu-item key="users">
|
||
|
|
<UserOutlined />
|
||
|
|
<span>用户管理</span>
|
||
|
|
</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
</a-layout-sider>
|
||
|
|
|
||
|
|
<a-layout>
|
||
|
|
<a-layout-header class="layout-header px-4 flex items-center justify-between">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<a-button
|
||
|
|
type="text"
|
||
|
|
@click="collapsed = !collapsed"
|
||
|
|
class="mr-4"
|
||
|
|
>
|
||
|
|
<MenuUnfoldOutlined v-if="collapsed" />
|
||
|
|
<MenuFoldOutlined v-else />
|
||
|
|
</a-button>
|
||
|
|
<a-breadcrumb>
|
||
|
|
<a-breadcrumb-item>{{ currentTitle }}</a-breadcrumb-item>
|
||
|
|
</a-breadcrumb>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a-dropdown>
|
||
|
|
<a-button type="text" class="flex items-center">
|
||
|
|
<UserOutlined class="mr-2" />
|
||
|
|
{{ user.username }}
|
||
|
|
</a-button>
|
||
|
|
<template #overlay>
|
||
|
|
<a-menu @click="handleUserMenu">
|
||
|
|
<a-menu-item key="logout">
|
||
|
|
<LogoutOutlined />
|
||
|
|
退出登录
|
||
|
|
</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
</template>
|
||
|
|
</a-dropdown>
|
||
|
|
</a-layout-header>
|
||
|
|
|
||
|
|
<a-layout-content class="layout-content p-6">
|
||
|
|
<RouterView />
|
||
|
|
</a-layout-content>
|
||
|
|
</a-layout>
|
||
|
|
</a-layout>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, computed } from 'vue'
|
||
|
|
import { useRouter, useRoute } from 'vue-router'
|
||
|
|
import { useAuthStore } from '@/store/auth'
|
||
|
|
import {
|
||
|
|
DashboardOutlined,
|
||
|
|
ServerOutlined,
|
||
|
|
FileTextOutlined,
|
||
|
|
PlayCircleOutlined,
|
||
|
|
UserOutlined,
|
||
|
|
MenuUnfoldOutlined,
|
||
|
|
MenuFoldOutlined,
|
||
|
|
LogoutOutlined
|
||
|
|
} from '@ant-design/icons-vue'
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
const route = useRoute()
|
||
|
|
const authStore = useAuthStore()
|
||
|
|
|
||
|
|
const collapsed = ref(false)
|
||
|
|
const user = computed(() => authStore.user)
|
||
|
|
const activeMenu = computed(() => route.name?.toLowerCase())
|
||
|
|
const currentTitle = computed(() => route.meta?.title || '控制台')
|
||
|
|
|
||
|
|
const handleMenuClick = ({ key }) => {
|
||
|
|
router.push(`/${key}`)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleUserMenu = ({ key }) => {
|
||
|
|
if (key === 'logout') {
|
||
|
|
authStore.logout()
|
||
|
|
router.push('/login')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|