feat: 调整AdminLayout组件样式及标签页功能,优化菜单事件处理并更新侧边栏样式

This commit is contained in:
FalingCliff 2025-06-15 02:02:52 +08:00
parent 1b9fb6f26d
commit 10819fc69a
1 changed files with 7 additions and 15 deletions

View File

@ -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;