更新

src/layouts/index.vue

@@ -21,10 +21,6 @@
 			<a-layout class="main-layout">
 				<a-layout-header class="app-header">
 					<div class="header-left">
-						<a-button
-							v-if="selectedParentMenu && selectedParentMenu.children && selectedParentMenu.children.length > 0"
-							type="text" :icon="sidebarCollapsed ? h(MenuUnfoldOutlined) : h(MenuFoldOutlined)"
-							@click="toggleSidebar" class="collapse-btn" />
 						<breadcrumb />
 					</div>
 					<userbar />
@@ -42,8 +38,9 @@
 
 		<!-- Menu布局：左侧菜单栏布局 -->
 		<template v-else-if="layoutMode === 'menu'">
-			<a-layout-sider theme="light" :collapsed="sidebarCollapsed" :collapsible="true" @collapse="handleCollapse"
-				class="full-menu-sidebar" width="200" :collapsed-width="64">
+			<a-layout-sider theme="light" style="border-right: 1px solid #f0f0f0" :collapsed="sidebarCollapsed"
+				:collapsible="true" @collapse="handleCollapse" class="full-menu-sidebar" width="200"
+				:collapsed-width="64">
 				<div class="logo-box-full">
 					<span v-if="!sidebarCollapsed" class="logo-text">VUE ADMIN</span>
 					<span v-else class="logo-text-mini">V</span>
@@ -53,8 +50,6 @@
 			<a-layout class="main-layout">
 				<a-layout-header class="app-header">
 					<div class="header-left">
-						<a-button type="text" :icon="sidebarCollapsed ? h(MenuUnfoldOutlined) : h(MenuFoldOutlined)"
-							@click="toggleSidebar" class="collapse-btn" />
 						<breadcrumb />
 					</div>
 					<userbar />
@@ -90,6 +85,16 @@
 				</router-view>
 			</a-layout-content>
 		</template>
+
+		<!-- 漂浮的设置按钮 -->
+		<a-float-button type="primary" @click="openSetting">
+			<template #icon>
+				<SettingOutlined />
+			</template>
+		</a-float-button>
+
+		<!-- 布局设置组件 -->
+		<setting ref="settingRef" />
 	</a-layout>
 </template>
 
@@ -97,7 +102,7 @@
 import { computed, ref, h } from 'vue'
 import { useRoute } from 'vue-router'
 import { useLayoutStore } from '@/stores/modules/layout'
-import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
+import { SettingOutlined } from '@ant-design/icons-vue'
 
 import userbar from './components/userbar.vue'
 import breadcrumb from './components/breadcrumb.vue'
@@ -106,10 +111,13 @@ import topMenu from './components/topMenu.vue'
 import sideMenu from './components/sideMenu.vue'
 import level1Menu from './components/level1Menu.vue'
 import level2Menu from './components/level2Menu.vue'
+import setting from './components/setting.vue'
 
 const route = useRoute()
 const layoutStore = useLayoutStore()
 
+const settingRef = ref(null)
+
 const layoutMode = computed(() => layoutStore.layoutMode)
 const sidebarCollapsed = computed(() => layoutStore.sidebarCollapsed)
 const selectedParentMenu = computed(() => layoutStore.selectedParentMenu)
@@ -131,15 +139,15 @@ const layoutClass = computed(() => {
 	}
 })
 
-// 切换侧边栏
-const toggleSidebar = () => {
-	layoutStore.toggleSidebar()
-}
-
 // 处理折叠
 const handleCollapse = (collapsed) => {
 	layoutStore.sidebarCollapsed = collapsed
 }
+
+// 打开设置抽屉
+const openSetting = () => {
+	settingRef.value?.openDrawer()
+}
 </script>
 
 <style scoped lang="scss">
@@ -155,6 +163,7 @@ const handleCollapse = (collapsed) => {
 		justify-content: space-between;
 		align-items: center;
 		background-color: #ffffff;
+		border-bottom: 1px solid #f0f0f0;
 		box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 		height: 60px;
 		z-index: 9;
@@ -230,12 +239,11 @@ const handleCollapse = (collapsed) => {
 	&.layout-menu {
 		.full-menu-sidebar {
 			background-color: #ffffff;
-			box-shadow: 2px 0 6px rgba(0, 21, 41, 0.1);
 			z-index: 10;
 
 			.logo-box-full {
 				width: 100%;
-				height: 64px;
+				height: 60px;
 				display: flex;
 				align-items: center;
 				justify-content: center;