137 lines
3.8 KiB
Vue
137 lines
3.8 KiB
Vue
<template>
|
|
<n-layout style="height: 100vh" has-sider>
|
|
<n-layout-sider
|
|
bordered
|
|
show-trigger
|
|
collapse-mode="width"
|
|
:collapsed-width="64"
|
|
:width="240"
|
|
:native-scrollbar="false"
|
|
>
|
|
<div style="height: 60px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #e8e8e8;">
|
|
<h3 style="margin: 0; color: #18a058;">运营管理</h3>
|
|
</div>
|
|
<n-menu
|
|
:collapsed-width="64"
|
|
:collapsed-icon-size="22"
|
|
:options="menuOptions"
|
|
:value="activeKey"
|
|
@update:value="handleMenuSelect"
|
|
/>
|
|
</n-layout-sider>
|
|
<n-layout>
|
|
<n-layout-header bordered style="height: 60px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between;">
|
|
<div class="header-left">
|
|
<h2 style="margin: 0;">梦幻西游运营管理系统</h2>
|
|
</div>
|
|
<div class="header-right" v-if="adminStore.userInfo">
|
|
<n-dropdown :options="userMenuOptions" @select="handleUserMenuSelect">
|
|
<div class="user-dropdown-trigger">
|
|
<span>{{ adminStore.userInfo.username }}</span>
|
|
<RiArrowDownSLine style="margin-left: 4px;" />
|
|
</div>
|
|
</n-dropdown>
|
|
</div>
|
|
</n-layout-header>
|
|
<n-layout-content style="padding: 24px;">
|
|
<router-view />
|
|
</n-layout-content>
|
|
<n-layout-footer bordered style="padding: 16px; text-align: center;">
|
|
<p style="margin: 0;">© 2026 梦幻西游一站式运营管理平台 - 运营管理系统</p>
|
|
</n-layout-footer>
|
|
</n-layout>
|
|
</n-layout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, h } from 'vue'
|
|
import { NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NLayoutFooter, NMenu, NDropdown } from 'naive-ui'
|
|
import { RouterLink, useRoute, useRouter } from 'vue-router'
|
|
import { useAdminStore } from '@/stores/admin'
|
|
import { RiDashboardLine, RiArrowDownSLine, RiUserLine, RiLogoutBoxRLine, RiSettings3Line, RiUserSettingsLine, RiToolsLine } from '@remixicon/vue'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const adminStore = useAdminStore()
|
|
|
|
const activeKey = ref(String(route.name))
|
|
|
|
const menuOptions = [
|
|
{
|
|
label: () => h(RouterLink, { to: '/admin/dashboard' }, { default: () => '工作台' }),
|
|
key: 'AdminDashboard',
|
|
icon: () => h(RiDashboardLine, { size: '20px' })
|
|
},
|
|
{
|
|
label: '系统管理',
|
|
key: 'SystemManagement',
|
|
icon: () => h(RiSettings3Line, { size: '20px' }),
|
|
children: [
|
|
{
|
|
label: () => h(RouterLink, { to: '/admin/user-management' }, { default: () => '用户管理' }),
|
|
key: 'UserManagement',
|
|
icon: () => h(RiUserSettingsLine, { size: '20px' })
|
|
},
|
|
{
|
|
label: () => h(RouterLink, { to: '/admin/system-config' }, { default: () => '系统配置' }),
|
|
key: 'SystemConfig',
|
|
icon: () => h(RiToolsLine, { size: '20px' })
|
|
}
|
|
]
|
|
}
|
|
]
|
|
|
|
const userMenuOptions = [
|
|
{
|
|
label: '用户信息',
|
|
key: 'userInfo',
|
|
icon: () => h(RiUserLine, { size: '18px' })
|
|
},
|
|
{
|
|
type: 'divider',
|
|
key: 'd1'
|
|
},
|
|
{
|
|
label: '退出登录',
|
|
key: 'logout',
|
|
icon: () => h(RiLogoutBoxRLine, { size: '18px' })
|
|
}
|
|
]
|
|
|
|
const handleMenuSelect = (key: string) => {
|
|
activeKey.value = key
|
|
}
|
|
|
|
const handleUserMenuSelect = (key: string) => {
|
|
if (key === 'logout') {
|
|
handleLogout()
|
|
} else if (key === 'userInfo') {
|
|
console.log('用户信息')
|
|
}
|
|
}
|
|
|
|
const handleLogout = () => {
|
|
adminStore.logout()
|
|
router.push('/admin/login')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header-left h2 {
|
|
color: #18a058;
|
|
}
|
|
|
|
.user-dropdown-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.user-dropdown-trigger:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
</style>
|