feat: 调整AdminLayout组件样式及标签页功能,优化菜单事件处理并更新侧边栏样式
This commit is contained in:
parent
1b9fb6f26d
commit
10819fc69a
|
|
@ -1,17 +1,12 @@
|
|||
<template>
|
||||
<a-layout class="admin-layout">
|
||||
<!-- 侧边栏 -->
|
||||
<a-layout-sider v-model:collapsed="collapsed" :trigger="null" class="admin-sider" collapsible>
|
||||
<a-layout-sider v-model:collapsed="collapsed" :trigger="null" class="admin-side" collapsible>
|
||||
<div class="logo">
|
||||
<img alt="Logo" src="@/assets/logo.svg" />
|
||||
<h1 v-show="!collapsed">Admin System</h1>
|
||||
</div>
|
||||
<a-menu
|
||||
v-model:openKeys="openKeys"
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
mode="inline"
|
||||
theme="dark"
|
||||
>
|
||||
<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline">
|
||||
<template v-for="menu in menus" :key="menu.key">
|
||||
<!-- 有子菜单的情况 -->
|
||||
<template v-if="menu.children && menu.children.length > 0">
|
||||
|
|
@ -106,7 +101,7 @@
|
|||
<a-dropdown :trigger="['hover']">
|
||||
<CloseOutlined />
|
||||
<template #overlay>
|
||||
<a-menu @click="({ key }) => handleTabAction(key, tab)">
|
||||
<a-menu @click="({ key }: any) => handleTabAction(key, tab)">
|
||||
<a-menu-item key="current">关闭当前标签</a-menu-item>
|
||||
<a-menu-item key="others">关闭其它标签</a-menu-item>
|
||||
<a-menu-item key="left">关闭左侧标签</a-menu-item>
|
||||
|
|
@ -237,7 +232,6 @@ const onTabClick = (key: string) => {
|
|||
router.push({
|
||||
path: tab.path,
|
||||
query: tab.query,
|
||||
params: tab.params,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -311,8 +305,7 @@ const loadTabsFromStorage = () => {
|
|||
|
||||
if (savedTabs) {
|
||||
try {
|
||||
const parsedTabs = JSON.parse(savedTabs)
|
||||
tabs.value = parsedTabs
|
||||
tabs.value = JSON.parse(savedTabs)
|
||||
|
||||
// 如果有保存的激活标签,则设置它
|
||||
if (savedActiveTab) {
|
||||
|
|
@ -324,7 +317,6 @@ const loadTabsFromStorage = () => {
|
|||
router.push({
|
||||
path: activeTabData.path,
|
||||
query: activeTabData.query,
|
||||
params: activeTabData.params,
|
||||
})
|
||||
return true // 表示已经从存储中恢复了标签页
|
||||
}
|
||||
|
|
@ -449,8 +441,9 @@ onMounted(() => {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-sider {
|
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
|
||||
.admin-side {
|
||||
background: white;
|
||||
box-shadow: 2px 0 6px rgb(238, 238, 238);
|
||||
z-index: 10;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
|
@ -477,7 +470,6 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.logo h1 {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
Loading…
Reference in New Issue