template
/
template_admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/layout/AdminLayout.vue
View File

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