From bd07886ffa67711de5e25abc9970b00a18865654 Mon Sep 17 00:00:00 2001
From: molong <ycgpp@126.com>
Date: Tue, 27 Jan 2026 09:43:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/app.scss             |   3 +-
 src/layouts/components/breadcrumb.vue |  93 ++--
 src/layouts/components/menu-item.vue  |  70 +--
 src/layouts/components/menu.vue       | 152 ------
 src/layouts/components/setting.vue    | 500 ++++----------------
 src/layouts/components/tags.vue       | 561 +++++++++++-----------
 src/layouts/components/userbar.vue    | 364 +++++----------
 src/layouts/index.vue                 | 641 +++++++++++---------------
 src/layouts/other/404.vue             |   3 +-
 src/layouts/other/empty.vue           |   4 +-
 10 files changed, 842 insertions(+), 1549 deletions(-)
 delete mode 100644 src/layouts/components/menu.vue

diff --git a/src/assets/style/app.scss b/src/assets/style/app.scss
index fabdfc9..ac30967 100644
--- a/src/assets/style/app.scss
+++ b/src/assets/style/app.scss
@@ -66,7 +66,8 @@ body {
 }
 
 #app {
-	min-height: 100vh;
+	width: 100%;
+	height: 100vh;
 }
 
 // ==================== 暗色主题样式 ====================
diff --git a/src/layouts/components/breadcrumb.vue b/src/layouts/components/breadcrumb.vue
index 5206cc3..55bb842 100644
--- a/src/layouts/components/breadcrumb.vue
+++ b/src/layouts/components/breadcrumb.vue
@@ -1,12 +1,12 @@
 <template>
 	<el-breadcrumb separator="/">
 		<transition-group name="breadcrumb">
-			<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
-				<span v-if="index === breadcrumbs.length - 1" class="no-redirect">
-					{{ item.meta?.title }}
+			<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+				<span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">
+					{{ item.meta.title }}
 				</span>
 				<a v-else class="redirect" @click.prevent="handleLink(item)">
-					{{ item.meta?.title }}
+					{{ item.meta.title }}
 				</a>
 			</el-breadcrumb-item>
 		</transition-group>
@@ -14,9 +14,8 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-// import { useI18n } from '@/hooks/useI18n'
 
 defineOptions({
 	name: 'LayoutBreadcrumb',
@@ -24,30 +23,36 @@ defineOptions({
 
 const route = useRoute()
 const router = useRouter()
-// const { t } = useI18n()
 
-// 面包屑列表
-const breadcrumbs = computed(() => {
-	const matched = route.matched.filter((item) => item.meta && item.meta.title)
+const levelList = ref([])
+
+const getBreadcrumb = () => {
+	let matched = route.matched.filter((item) => {
+		if (item.meta && item.meta.title) {
+			return true
+		}
+		return false
+	})
 
 	const first = matched[0]
 
-	if (!first || !first.meta?.title) {
-		return []
+	if (!isDashboard(first)) {
+		matched = [{ path: '/dashboard', meta: { title: '首页' } }].concat(matched)
 	}
 
-	// 如果第一个不是首页，添加首页
-	// if (first.path !== '/') {
-	// 	matched.unshift({
-	// 		path: '/',
-	// 		meta: { title: '首页' },
-	// 	})
-	// }
+	levelList.value = matched.filter(
+		(item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
+	)
+}
 
-	return matched
-})
+const isDashboard = (route) => {
+	const name = route && route.name
+	if (!name) {
+		return false
+	}
+	return name.toString().trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+}
 
-// 处理点击
 const handleLink = (item) => {
 	const { redirect, path } = item
 	if (redirect) {
@@ -56,52 +61,46 @@ const handleLink = (item) => {
 	}
 	router.push(path)
 }
+
+watch(
+	() => route.path,
+	() => {
+		getBreadcrumb()
+	},
+	{ immediate: true }
+)
 </script>
 
 <style lang="scss" scoped>
-.el-breadcrumb {
-	display: inline-flex;
-	align-items: center;
+.app-breadcrumb.el-breadcrumb {
+	display: inline-block;
 	font-size: 14px;
-	line-height: 1;
-
-	:deep(.el-breadcrumb__item) {
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-		.el-breadcrumb__inner {
-			font-weight: 400;
-			transition: all 0.3s;
-		}
-
-		&:last-child .el-breadcrumb__inner {
-			font-weight: 500;
-		}
-	}
+	line-height: 50px;
+	margin-left: 8px;
 
 	.no-redirect {
-		color: var(--el-text-color-primary);
+		color: #97a8be;
 		cursor: text;
-		font-weight: 500;
 	}
 
 	.redirect {
-		color: var(--el-text-color-regular);
-		cursor: pointer;
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		color: #666;
+		font-weight: 600;
 
 		&:hover {
-			color: var(--el-color-primary);
+			color: var(--primary-color);
+			cursor: pointer;
 		}
 	}
 }
 
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
-	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	transition: all 0.5s;
 }
 
 .breadcrumb-enter-from,
-.breadcrumb-leave-to {
+.breadcrumb-leave-active {
 	opacity: 0;
 	transform: translateX(20px);
 }
diff --git a/src/layouts/components/menu-item.vue b/src/layouts/components/menu-item.vue
index f0790da..2a225d8 100644
--- a/src/layouts/components/menu-item.vue
+++ b/src/layouts/components/menu-item.vue
@@ -13,7 +13,7 @@
 		</el-sub-menu>
 
 		<!-- 无子菜单 -->
-		<el-menu-item v-else-if="!menu.meta?.hidden" :index="menu.path">
+		<el-menu-item v-else-if="!menu.meta?.hidden" :index="menu.path" @click="handleMenuClick(menu)">
 			<el-icon v-if="menu.meta?.icon">
 				<component :is="menu.meta.icon" />
 			</el-icon>
@@ -25,8 +25,11 @@
 </template>
 
 <script setup>
+import { defineProps } from 'vue'
+import { useRouter } from 'vue-router'
+
 defineOptions({
-	name: 'MenuItem',
+	name: 'LayoutMenuItem',
 })
 
 defineProps({
@@ -40,60 +43,25 @@ defineProps({
 	},
 })
 
+const router = useRouter()
+
 // 判断是否有子菜单
 const hasChildren = (menu) => {
 	return menu.children && menu.children.length > 0
 }
+
+// 处理菜单点击
+const handleMenuClick = (menu) => {
+	if (menu.meta?.link) {
+		// 外部链接
+		window.open(menu.meta.link, '_blank')
+	} else if (menu.path) {
+		// 内部路由
+		router.push(menu.path)
+	}
+}
 </script>
 
 <style lang="scss" scoped>
-// 子菜单项样式
-:deep(.el-sub-menu) {
-	.el-sub-menu__title {
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-		&:hover {
-			background-color: var(--el-fill-color-light) !important;
-		}
-	}
-
-	// 子菜单内容区
-	.el-menu {
-		background-color: var(--el-bg-color);
-	}
-
-	// 菜单项样式
-	.el-menu-item {
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-		&:hover {
-			background-color: var(--el-fill-color-light) !important;
-		}
-
-		&.is-active {
-			background-color: var(--el-color-primary-light-9) !important;
-			color: var(--el-color-primary) !important;
-			font-weight: 500;
-		}
-	}
-}
-
-// 图标样式优化
-:deep(.el-icon) {
-	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-// 箭头图标动画
-:deep(.el-sub-menu__icon-arrow) {
-	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-	.el-sub-menu.is-opened > .el-sub-menu__title & {
-		transform: rotateZ(180deg);
-	}
-}
-
-// 菜单文本样式
-:deep(span) {
-	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
+// 菜单项样式继承自 Element Plus
 </style>
diff --git a/src/layouts/components/menu.vue b/src/layouts/components/menu.vue
deleted file mode 100644
index 0581eb2..0000000
--- a/src/layouts/components/menu.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-	<el-menu :default-active="activeMenu" :mode="menuMode" :collapse="isCollapse" :unique-opened="uniqueOpened" :router="true" :collapse-transition="false" @select="handleSelect">
-		<template v-for="menu in menuList" :key="menu.path">
-			<!-- 有子菜单 -->
-			<el-sub-menu v-if="hasChildren(menu) && !menu.meta?.hidden" :index="menu.path">
-				<template #title>
-					<el-icon v-if="menu.meta?.icon">
-						<component :is="menu.meta.icon" />
-					</el-icon>
-					<span>{{ menu.meta?.title }}</span>
-				</template>
-				<!-- 递归渲染子菜单 -->
-				<menu-item :menu-list="menu.children" :parent-path="menu.path" />
-			</el-sub-menu>
-
-			<!-- 无子菜单 -->
-			<el-menu-item v-else-if="!menu.meta?.hidden" :index="menu.path">
-				<el-icon v-if="menu.meta?.icon">
-					<component :is="menu.meta.icon" />
-				</el-icon>
-				<template #title>
-					<span>{{ menu.meta?.title }}</span>
-				</template>
-			</el-menu-item>
-		</template>
-	</el-menu>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import { useLayoutStore } from '@/stores/modules/layout'
-import { useUserStore } from '@/stores/modules/user'
-import MenuItem from './menu-item.vue'
-
-defineOptions({
-	name: 'LayoutMenu',
-})
-
-const props = defineProps({
-	mode: {
-		type: String,
-		default: 'vertical',
-	},
-})
-
-const route = useRoute()
-const layoutStore = useLayoutStore()
-const userStore = useUserStore()
-
-// 菜单模式
-const menuMode = computed(() => props.mode)
-
-// 是否折叠
-const isCollapse = computed(() => layoutStore.sidebarCollapsed)
-
-// 是否只展开一个子菜单
-const uniqueOpened = computed(() => true)
-
-// 当前激活的菜单
-const activeMenu = computed(() => {
-	const { meta, path } = route
-	if (meta?.activeMenu) {
-		return meta.activeMenu
-	}
-	return path
-})
-
-// 菜单列表
-const menuList = computed(() => {
-	const menus = userStore.getMenu() || []
-
-	// 如果是默认布局（双栏布局），只显示当前选中的父菜单的子菜单
-	if (layoutStore.layoutMode === 'default' && layoutStore.selectedParentMenu) {
-		const selectedMenu = menus.find((m) => m.path === layoutStore.selectedParentMenu.path)
-		return selectedMenu?.children || []
-	}
-
-	// 其他布局显示所有菜单
-	return menus
-})
-
-// 判断是否有子菜单
-const hasChildren = (menu) => {
-	return menu.children && menu.children.length > 0
-}
-
-// 菜单选择处理
-const handleSelect = (index) => {
-	console.log('Menu selected:', index)
-}
-</script>
-
-<style lang="scss" scoped>
-.el-menu {
-	border-right: none;
-	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-	// 菜单项样式
-	:deep(.el-menu-item) {
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-		&:hover {
-			background-color: var(--el-fill-color-light) !important;
-		}
-
-		&.is-active {
-			background-color: var(--el-color-primary-light-9) !important;
-			color: var(--el-color-primary) !important;
-			font-weight: 500;
-		}
-	}
-
-	// 子菜单样式
-	:deep(.el-sub-menu__title) {
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-		&:hover {
-			background-color: var(--el-fill-color-light) !important;
-		}
-
-		.el-sub-menu__icon-arrow {
-			transition: transform 0.3s;
-		}
-	}
-
-	:deep(.el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow) {
-		transform: rotateZ(180deg);
-	}
-
-	// 图标样式
-	:deep(.el-icon) {
-		width: 18px;
-		height: 18px;
-		font-size: 18px;
-		vertical-align: middle;
-		margin-right: 8px;
-	}
-
-	// 折叠状态
-	&.el-menu--collapse {
-		:deep(.el-menu-item),
-		:deep(.el-sub-menu__title) {
-			padding: 0 20px;
-		}
-
-		:deep(.el-icon) {
-			margin-right: 0;
-		}
-	}
-}
-</style>
diff --git a/src/layouts/components/setting.vue b/src/layouts/components/setting.vue
index c1dde4b..96384c9 100644
--- a/src/layouts/components/setting.vue
+++ b/src/layouts/components/setting.vue
@@ -1,141 +1,51 @@
 <template>
-	<div class="setting-container">
-		<!-- 设置按钮 -->
-		<div class="setting-btn" @click="showDrawer = true">
-			<el-icon>
-				<Setting />
+	<div class="drawer-container">
+		<el-drawer v-model="drawerVisible" title="布局设置" size="280px">
+			<el-scrollbar>
+				<el-form label-width="100px" label-position="left">
+					<el-form-item label="布局模式">
+						<el-select v-model="layoutMode" placeholder="请选择" @change="handleLayoutModeChange">
+							<el-option label="默认布局" value="default" />
+							<el-option label="菜单布局" value="menu" />
+							<el-option label="顶部布局" value="top" />
+						</el-select>
+					</el-form-item>
+
+					<el-form-item label="主题颜色">
+						<el-color-picker v-model="themeColor" @change="handleThemeChange" />
+					</el-form-item>
+
+					<el-divider>显示设置</el-divider>
+
+					<el-form-item label="显示标签栏">
+						<el-switch v-model="showTags" @change="handleShowTagsChange" />
+					</el-form-item>
+
+					<el-form-item label="显示面包屑">
+						<el-switch v-model="showBreadcrumb" @change="handleShowBreadcrumbChange" />
+					</el-form-item>
+
+					<el-divider>其他</el-divider>
+
+					<el-form-item>
+						<el-button type="primary" @click="handleReset">重置设置</el-button>
+					</el-form-item>
+				</el-form>
+			</el-scrollbar>
+		</el-drawer>
+
+		<div class="setting-btn" @click="drawerVisible = true">
+			<el-icon :size="24">
+				<component :is="'ElIconSetting'" />
 			</el-icon>
 		</div>
-
-		<!-- 设置抽屉 -->
-		<el-drawer v-model="showDrawer" title="系统设置" :size="300" :close-on-click-modal="false">
-			<div class="setting-content">
-				<!-- 布局模式 -->
-				<div class="setting-item">
-					<div class="setting-title">布局模式</div>
-					<div class="setting-value">
-						<el-radio-group v-model="layoutMode" @change="handleLayoutModeChange">
-							<el-radio label="default">
-								<div class="layout-option">
-									<div class="layout-preview layout-default">
-										<div class="layout-aside-left"></div>
-										<div class="layout-aside-right"></div>
-										<div class="layout-main"></div>
-									</div>
-									<span>双栏布局</span>
-								</div>
-							</el-radio>
-							<el-radio label="menu">
-								<div class="layout-option">
-									<div class="layout-preview layout-menu">
-										<div class="layout-aside"></div>
-										<div class="layout-main"></div>
-									</div>
-									<span>菜单布局</span>
-								</div>
-							</el-radio>
-							<el-radio label="top">
-								<div class="layout-option">
-									<div class="layout-preview layout-top">
-										<div class="layout-header"></div>
-										<div class="layout-main"></div>
-									</div>
-									<span>顶部布局</span>
-								</div>
-							</el-radio>
-						</el-radio-group>
-					</div>
-				</div>
-
-				<!-- 主题色 -->
-				<div class="setting-item">
-					<div class="setting-title">主题色</div>
-					<div class="setting-value">
-						<div class="color-picker-wrapper">
-							<el-color-picker v-model="themeColor" show-alpha :predefine="predefineColors" @change="handleThemeColorChange" />
-						</div>
-						<div class="color-presets">
-							<div v-for="color in predefineColors" :key="color" class="color-preset" :class="{ active: themeColor === color }" :style="{ backgroundColor: color }" @click="handleColorPresetClick(color)"></div>
-						</div>
-					</div>
-				</div>
-
-				<!-- 主题模式 -->
-				<div class="setting-item">
-					<div class="setting-title">主题模式</div>
-					<div class="setting-value">
-						<el-radio-group v-model="isDark" @change="handleThemeModeChange">
-							<el-radio :label="false">
-								<el-icon>
-									<Sunny />
-								</el-icon>
-								浅色
-							</el-radio>
-							<el-radio :label="true">
-								<el-icon>
-									<Moon />
-								</el-icon>
-								深色
-							</el-radio>
-						</el-radio-group>
-					</div>
-				</div>
-
-				<!-- 标签栏 -->
-				<div class="setting-item">
-					<div class="setting-title">
-						<span>显示标签栏</span>
-						<el-tooltip content="开启后页面顶部显示标签页" placement="top">
-							<el-icon>
-								<QuestionFilled />
-							</el-icon>
-						</el-tooltip>
-					</div>
-					<div class="setting-value">
-						<el-switch v-model="showTags" @change="handleShowTagsChange" />
-					</div>
-				</div>
-
-				<!-- 面包屑 -->
-				<div class="setting-item">
-					<div class="setting-title">
-						<span>显示面包屑</span>
-						<el-tooltip content="开启后页面顶部显示面包屑导航" placement="top">
-							<el-icon>
-								<QuestionFilled />
-							</el-icon>
-						</el-tooltip>
-					</div>
-					<div class="setting-value">
-						<el-switch v-model="showBreadcrumb" @change="handleShowBreadcrumbChange" />
-					</div>
-				</div>
-
-				<!-- 操作按钮 -->
-				<div class="setting-actions">
-					<el-button type="primary" @click="handleSave">
-						<el-icon>
-							<Check />
-						</el-icon>
-						保存配置
-					</el-button>
-					<el-button @click="handleReset">
-						<el-icon>
-							<RefreshLeft />
-						</el-icon>
-						重置默认
-					</el-button>
-				</div>
-			</div>
-		</el-drawer>
 	</div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed } from 'vue'
+import { useLayoutStore } from '../../stores/modules/layout'
 import { ElMessage } from 'element-plus'
-import { Setting, Sunny, Moon, QuestionFilled, Check, RefreshLeft } from '@element-plus/icons-vue'
-import { useLayoutStore } from '@/stores/modules/layout'
 
 defineOptions({
 	name: 'LayoutSetting',
@@ -143,350 +53,94 @@ defineOptions({
 
 const layoutStore = useLayoutStore()
 
-// 抽屉显示状态
-const showDrawer = ref(false)
-
-// 预定义颜色
-const predefineColors = [
-	'#1890ff',
-	'#409eff',
-	'#67c23a',
-	'#e6a23c',
-	'#f56c6c',
-	'#909399',
-	'#722ed1',
-	'#eb2f96',
-	'#52c41a',
-	'#1890ff',
-	'#2f54eb',
-	'#722ed1',
-	'#f5222d',
-	'#fa541c',
-	'#fa8c16',
-	'#faad14',
-	'#fadb14',
-	'#a0d911',
-	'#52c41a',
-	'#13c2c2',
-	'#1890ff',
-	'#2f54eb',
-	'#722ed1',
-]
+const drawerVisible = ref(false)
 
 // 布局模式
 const layoutMode = computed({
 	get: () => layoutStore.layoutMode,
-	set: (val) => layoutStore.setLayoutMode(val),
+	set: (value) => {
+		layoutStore.setLayoutMode(value)
+	},
 })
 
-// 主题色
-const themeColor = ref(layoutStore.themeColor)
-
-// 主题模式（深色/浅色）
-const isDark = ref(document.documentElement.classList.contains('dark'))
+// 主题颜色
+const themeColor = computed({
+	get: () => layoutStore.themeColor,
+	set: (value) => {
+		layoutStore.setThemeColor(value)
+	},
+})
 
 // 显示标签栏
 const showTags = computed({
 	get: () => layoutStore.showTags,
-	set: (val) => layoutStore.setShowTags(val),
+	set: (value) => {
+		layoutStore.setShowTags(value)
+	},
 })
 
 // 显示面包屑
 const showBreadcrumb = computed({
 	get: () => layoutStore.showBreadcrumb,
-	set: (val) => layoutStore.setShowBreadcrumb(val),
+	set: (value) => {
+		layoutStore.setShowBreadcrumb(value)
+	},
 })
 
 // 布局模式变化
 const handleLayoutModeChange = (value) => {
-	console.log('Layout mode changed:', value)
+	layoutStore.setLayoutMode(value)
+	ElMessage.success('布局模式已切换')
 }
 
-// 主题色变化
-const handleThemeColorChange = (value) => {
-	if (value) {
-		layoutStore.setThemeColor(value)
-	}
+// 主题颜色变化
+const handleThemeChange = (value) => {
+	layoutStore.setThemeColor(value)
 }
 
-// 预定义颜色点击
-const handleColorPresetClick = (color) => {
-	themeColor.value = color
-	layoutStore.setThemeColor(color)
-}
-
-// 主题模式变化
-const handleThemeModeChange = (value) => {
-	if (value) {
-		document.documentElement.classList.add('dark')
-	} else {
-		document.documentElement.classList.remove('dark')
-	}
-}
-
-// 标签栏显示变化
+// 显示标签栏变化
 const handleShowTagsChange = (value) => {
 	layoutStore.setShowTags(value)
 }
 
-// 面包屑显示变化
+// 显示面包屑变化
 const handleShowBreadcrumbChange = (value) => {
 	layoutStore.setShowBreadcrumb(value)
 }
 
-// 保存配置
-const handleSave = () => {
-	ElMessage.success('配置已保存')
-	showDrawer.value = false
-}
-
-// 重置配置
+// 重置设置
 const handleReset = () => {
 	layoutStore.resetTheme()
-	themeColor.value = layoutStore.themeColor
-	isDark.value = false
-	document.documentElement.classList.remove('dark')
-	ElMessage.success('已重置为默认配置')
+	ElMessage.success('设置已重置')
 }
-
-// 初始化
-onMounted(() => {
-	themeColor.value = layoutStore.themeColor
-})
 </script>
 
 <style lang="scss" scoped>
-.setting-container {
-	// 设置按钮
+.drawer-container {
 	.setting-btn {
 		position: fixed;
 		top: 50%;
 		right: 0;
-		transform: translateY(-50%);
+		z-index: 9999;
 		width: 48px;
 		height: 48px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: var(--el-color-primary);
+		background: var(--primary-color);
 		color: #fff;
-		cursor: pointer;
 		border-radius: 6px 0 0 6px;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-		z-index: 9999;
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-		user-select: none;
+		cursor: pointer;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		transition: all 0.3s;
+
+		&:hover {
+			background: var(--primary-color);
+			opacity: 0.9;
+		}
 
 		.el-icon {
 			font-size: 20px;
-			transition: transform 0.3s;
-		}
-
-		&:hover {
-			width: 56px;
-			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-
-			.el-icon {
-				transform: rotate(90deg);
-			}
-		}
-
-		&:active {
-			transform: translateY(-50%) scale(0.95);
-		}
-	}
-
-	// 设置内容
-	.setting-content {
-		padding: 20px;
-
-		.setting-item {
-			margin-bottom: 24px;
-
-			.setting-title {
-				font-size: 14px;
-				font-weight: 500;
-				color: var(--el-text-color-primary);
-				margin-bottom: 12px;
-				display: flex;
-				align-items: center;
-				gap: 4px;
-
-				.el-icon {
-					font-size: 14px;
-					color: var(--el-text-color-secondary);
-					cursor: help;
-				}
-			}
-
-			.setting-value {
-				// 布局选项
-				:deep(.el-radio-group) {
-					width: 100%;
-					display: flex;
-					flex-direction: column;
-					gap: 12px;
-
-					.el-radio {
-						margin-right: 0;
-						width: 100%;
-					}
-
-					.el-radio__label {
-						width: 100%;
-						padding-left: 0;
-					}
-				}
-
-				.layout-option {
-					display: flex;
-					align-items: center;
-					gap: 12px;
-					padding: 12px;
-					border: 2px solid var(--el-border-color);
-					border-radius: 8px;
-					transition: all 0.3s;
-					cursor: pointer;
-
-					&:hover {
-						border-color: var(--el-color-primary);
-						background-color: var(--el-fill-color-light);
-					}
-
-					span {
-						font-size: 14px;
-						color: var(--el-text-color-primary);
-					}
-				}
-
-				// 布局预览
-				.layout-preview {
-					width: 80px;
-					height: 60px;
-					background: var(--el-fill-color-blank);
-					border: 2px solid var(--el-border-color);
-					border-radius: 4px;
-					position: relative;
-					overflow: hidden;
-
-					&.layout-default {
-						.layout-aside-left {
-							position: absolute;
-							left: 0;
-							top: 0;
-							bottom: 0;
-							width: 20px;
-							background: var(--el-color-primary-light-7);
-						}
-
-						.layout-aside-right {
-							position: absolute;
-							left: 20px;
-							top: 0;
-							bottom: 0;
-							width: 25px;
-							background: var(--el-color-primary-light-5);
-						}
-
-						.layout-main {
-							position: absolute;
-							right: 0;
-							top: 0;
-							bottom: 0;
-							left: 45px;
-							background: var(--el-fill-color-lighter);
-						}
-					}
-
-					&.layout-menu {
-						.layout-aside {
-							position: absolute;
-							left: 0;
-							top: 0;
-							bottom: 0;
-							width: 25px;
-							background: var(--el-color-primary-light-5);
-						}
-
-						.layout-main {
-							position: absolute;
-							right: 0;
-							top: 0;
-							bottom: 0;
-							left: 25px;
-							background: var(--el-fill-color-lighter);
-						}
-					}
-
-					&.layout-top {
-						.layout-header {
-							position: absolute;
-							top: 0;
-							left: 0;
-							right: 0;
-							height: 12px;
-							background: var(--el-color-primary-light-5);
-						}
-
-						.layout-main {
-							position: absolute;
-							right: 0;
-							top: 12px;
-							bottom: 0;
-							left: 0;
-							background: var(--el-fill-color-lighter);
-						}
-					}
-				}
-
-				// 颜色选择器
-				.color-picker-wrapper {
-					margin-bottom: 12px;
-
-					:deep(.el-color-picker__trigger) {
-						width: 100%;
-						height: 40px;
-					}
-				}
-
-				.color-presets {
-					display: grid;
-					grid-template-columns: repeat(6, 1fr);
-					gap: 8px;
-
-					.color-preset {
-						width: 100%;
-						padding-bottom: 100%;
-						position: relative;
-						border-radius: 4px;
-						cursor: pointer;
-						transition: all 0.3s;
-						border: 2px solid transparent;
-
-						&:hover {
-							transform: scale(1.1);
-						}
-
-						&.active {
-							border-color: var(--el-color-primary);
-							transform: scale(1.1);
-						}
-					}
-				}
-			}
-		}
-
-		// 操作按钮
-		.setting-actions {
-			margin-top: 32px;
-			padding-top: 20px;
-			border-top: 1px solid var(--el-border-color-light);
-			display: flex;
-			gap: 12px;
-
-			.el-button {
-				flex: 1;
-			}
 		}
 	}
 }
diff --git a/src/layouts/components/tags.vue b/src/layouts/components/tags.vue
index 1952a07..a72f9db 100644
--- a/src/layouts/components/tags.vue
+++ b/src/layouts/components/tags.vue
@@ -1,214 +1,278 @@
 <template>
 	<div class="tags-view-container">
-		<el-scrollbar class="tags-view-wrapper">
-			<router-link v-for="tag in visibleTags" :key="tag.fullPath" :class="isActive(tag) ? 'active' : ''" class="tags-view-item" :to="{ path: tag.fullPath }" @click.middle="closeTag(tag)" @contextmenu.prevent="openMenu(tag, $event)">
-				{{ tag.title || tag.meta?.title }}
-				<el-icon v-if="!tag.meta?.affix" class="el-icon-close" @click.prevent.stop="closeTag(tag)">
-					<Close />
-				</el-icon>
-			</router-link>
-		</el-scrollbar>
-
+		<div class="tags-view-wrapper" @wheel="handleWheel">
+			<div
+				ref="scrollRef"
+				class="scroll-content"
+				:style="{ transform: `translateX(${scrollState.translateX}px)`, transition: scrollState.transition }"
+			>
+				<router-link
+					v-for="(tag, index) in visitedViews"
+					:id="`scroll-li-${index}`"
+					:key="tag.path"
+					:class="isActive(tag) ? 'active' : ''"
+					:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+					class="tags-view-item"
+					@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
+					@contextmenu.prevent="openMenu(tag, $event)"
+				>
+					{{ tag.title }}
+					<el-icon v-if="!isAffix(tag)" class="close-icon" @click.prevent.stop="closeSelectedTag(tag)">
+						<ElIconClose />
+					</el-icon>
+				</router-link>
+			</div>
+		</div>
 		<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
 			<li @click="refreshSelectedTag(selectedTag)">
-				<el-icon>
-					<Refresh />
-				</el-icon>
+				<el-icon><ElIconRefresh /></el-icon>
 				刷新
 			</li>
-			<li v-if="!selectedTag?.meta?.affix" @click="closeSelectedTag(selectedTag)">
-				<el-icon>
-					<Close />
-				</el-icon>
+			<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
+				<el-icon><ElIconClose /></el-icon>
 				关闭
 			</li>
 			<li @click="closeOthersTags">
-				<el-icon>
-					<CircleClose />
-				</el-icon>
+				<el-icon><ElIconCircleClose /></el-icon>
 				关闭其他
 			</li>
 			<li @click="closeAllTags(selectedTag)">
-				<el-icon>
-					<CircleCloseFilled />
-				</el-icon>
-				关闭全部
+				<el-icon><ElIconFolderDelete /></el-icon>
+				关闭所有
 			</li>
 		</ul>
 	</div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useLayoutStore } from '@/stores/modules/layout'
-import { Close, Refresh, CircleClose, CircleCloseFilled } from '@element-plus/icons-vue'
+import { useLayoutStore } from '../../stores/modules/layout'
 
 defineOptions({
-	name: 'LayoutTags',
+	name: 'TagsView',
 })
 
 const route = useRoute()
 const router = useRouter()
 const layoutStore = useLayoutStore()
 
-// 右键菜单
 const visible = ref(false)
 const top = ref(0)
 const left = ref(0)
-const selectedTag = ref(null)
+const selectedTag = ref({})
 const affixTags = ref([])
-
-// 可见的标签（去重）
-const visibleTags = computed(() => {
-	const tags = layoutStore.viewTags || []
-	// 使用 Map 根据 fullPath 去重，保留最后出现的
-	const tagMap = new Map()
-	tags.forEach((tag) => {
-		if (tag.fullPath) {
-			tagMap.set(tag.fullPath, tag)
-		}
-	})
-	return Array.from(tagMap.values())
+const scrollRef = ref(null)
+const scrollState = ref({
+	translateX: 0,
+	transition: ''
+})
+
+const visitedViews = computed(() => layoutStore.viewTags)
+const activeTabIndex = computed(() => {
+	const index = visitedViews.value.findIndex(view => view.path === route.path)
+	return index
 })
 
-// 判断是否激活
 const isActive = (tag) => {
-	return tag.fullPath === route.fullPath
+	return tag.path === route.path
 }
 
-// 过滤固定的标签
-const filterAffixTags = (routes, basePath = '/') => {
-	let tags = []
-	routes.forEach((route) => {
-		if (route.meta?.affix) {
-			const tagPath = basePath + route.path
-			tags.push({
-				name: route.name,
-				fullPath: tagPath,
-				path: tagPath,
-				title: route.meta?.title,
-				meta: route.meta,
-			})
-		}
-		if (route.children) {
-			const tempTags = filterAffixTags(route.children, route.path + '/')
-			if (tempTags.length >= 1) {
-				tags = [...tags, ...tempTags]
-			}
+const isAffix = (tag) => {
+	return tag.meta && tag.meta.affix
+}
+
+// 滚动逻辑
+const setTransition = () => {
+	scrollState.value.transition = 'transform 0.5s cubic-bezier(0.15, 0, 0.15, 1)'
+	setTimeout(() => {
+		scrollState.value.transition = ''
+	}, 250)
+}
+
+const getCurrentTabElement = () => {
+	const index = activeTabIndex.value
+	return index >= 0 ? document.getElementById(`scroll-li-${index}`) : null
+}
+
+const calculateScrollPosition = () => {
+	if (!scrollRef.value) return null
+
+	const scrollWrapper = scrollRef.value.parentElement
+	if (!scrollWrapper) return null
+
+	const scrollWidth = scrollWrapper.offsetWidth
+	const ulWidth = scrollRef.value.offsetWidth
+	const curTabEl = getCurrentTabElement()
+
+	if (!curTabEl) return null
+
+	const { offsetLeft, clientWidth } = curTabEl
+	const curTabRight = offsetLeft + clientWidth
+	const targetLeft = scrollWidth - curTabRight
+
+	return {
+		scrollWidth,
+		ulWidth,
+		offsetLeft,
+		clientWidth,
+		curTabRight,
+		targetLeft
+	}
+}
+
+const autoPositionTab = () => {
+	const positions = calculateScrollPosition()
+	if (!positions) return
+
+	const { scrollWidth, ulWidth, offsetLeft, curTabRight, targetLeft } = positions
+	const currentTranslateX = scrollState.value.translateX
+
+	if ((offsetLeft > Math.abs(currentTranslateX) && curTabRight <= scrollWidth) ||
+		(currentTranslateX < targetLeft && targetLeft < 0)) {
+		return
+	}
+
+	requestAnimationFrame(() => {
+		if (curTabRight > scrollWidth) {
+			scrollState.value.translateX = Math.max(targetLeft - 6, scrollWidth - ulWidth)
+		} else if (offsetLeft < Math.abs(currentTranslateX)) {
+			scrollState.value.translateX = -offsetLeft
 		}
 	})
-	return tags
 }
 
-// 初始化标签
-const initTags = () => {
-	affixTags.value = filterAffixTags(route.matched)
-	for (const tag of affixTags.value) {
-		if (tag.name) {
-			layoutStore.updateViewTags(tag)
-		}
-	}
+const adjustPositionAfterClose = () => {
+	const positions = calculateScrollPosition()
+	if (!positions) return
+
+	const { scrollWidth, ulWidth, offsetLeft, clientWidth } = positions
+	const curTabLeft = offsetLeft + clientWidth
+
+	requestAnimationFrame(() => {
+		scrollState.value.translateX = curTabLeft > scrollWidth ? scrollWidth - ulWidth : 0
+	})
 }
 
-// 添加标签
 const addTags = () => {
-	if (route.name && !route.meta?.hidden) {
+	const { name } = route
+	if (name) {
 		layoutStore.updateViewTags({
-			name: route.name,
 			path: route.path,
 			fullPath: route.fullPath,
-			title: route.meta?.title,
+			name: name,
+			title: route.meta.title,
 			meta: route.meta,
+			query: route.query,
 		})
 	}
-	return false
 }
 
-// 关闭标签
-const closeTag = (tag) => {
-	layoutStore.removeViewTags(tag.fullPath)
-	if (isActive(tag)) {
-		toLastView(tag)
+const closeSelectedTag = (view) => {
+	layoutStore.removeViewTags(view.fullPath)
+	setTransition()
+	nextTick(() => {
+		adjustPositionAfterClose()
+	})
+	if (isActive(view)) {
+		toLastView(visitedViews.value, view)
 	}
 }
 
-// 关闭选中的标签
-const closeSelectedTag = (tag) => {
-	closeTag(tag)
+const closeOthersTags = () => {
+	router.push(selectedTag.value)
+	layoutStore.viewTags = visitedViews.value.filter((tag) => {
+		return tag.meta && tag.meta.affix || tag.fullPath === selectedTag.value.fullPath
+	})
+	setTransition()
 }
 
-// 跳转到最后一个标签
-const toLastView = (tag) => {
-	const views = visibleTags.value
-	const latestView = views.slice(-1)[0]
+const closeAllTags = (view) => {
+	layoutStore.viewTags = visitedViews.value.filter((tag) => tag.meta && tag.meta.affix)
+	setTransition()
+	if (view && view.fullPath) {
+		toLastView(visitedViews.value, view)
+	} else {
+		toLastView(layoutStore.viewTags)
+	}
+}
+
+const toLastView = (visitedViews, view) => {
+	const latestView = visitedViews.slice(-1)[0]
 	if (latestView) {
 		router.push(latestView.fullPath)
 	} else {
-		// 如果没有标签，跳转到首页
-		router.push('/')
+		if (view.name === 'Dashboard') {
+			router.replace({ path: '/redirect' + view.fullPath })
+		} else {
+			router.push('/')
+		}
 	}
 }
 
-// 关闭其他标签
-const closeOthersTags = () => {
-	router.push(selectedTag.value.fullPath)
-	layoutStore.clearViewTags()
-	addTags()
-	for (const tag of affixTags.value) {
-		layoutStore.updateViewTags(tag)
-	}
+const refreshSelectedTag = (view) => {
+	layoutStore.removeViewTags(view.fullPath)
+	const { fullPath } = view
+	layoutStore.updateViewTags({
+		path: view.path,
+		fullPath: view.fullPath,
+		name: view.name,
+		title: view.meta.title,
+		meta: view.meta,
+		query: view.query,
+	})
+	router.replace({
+		path: '/redirect' + fullPath
+	})
 }
 
-// 关闭所有标签
-const closeAllTags = () => {
-	layoutStore.clearViewTags()
-	for (const tag of affixTags.value) {
-		layoutStore.updateViewTags(tag)
-	}
-	if (affixTags.value.length > 0) {
-		router.push(affixTags.value[0].fullPath)
-	} else {
-		router.push('/')
-	}
-}
-
-// 刷新选中的标签
-const refreshSelectedTag = (tag) => {
-	layoutStore.refreshTag()
-	router.replace({ path: tag.fullPath })
-}
-
-// 打开右键菜单
 const openMenu = (tag, e) => {
+	const scrollWrapper = scrollRef.value?.parentElement
+	if (!scrollWrapper) return
+
 	const menuMinWidth = 105
-	const offsetLeft = e.clientX - container.getBoundingClientRect().left // container margin left
-	const offsetWidth = container.offsetWidth - 100
+	const offsetLeft = scrollWrapper.getBoundingClientRect().left || 0
+	const offsetWidth = scrollWrapper.offsetWidth || 0
 	const maxLeft = offsetWidth - menuMinWidth
-	left.value = offsetLeft > maxLeft ? maxLeft : offsetLeft
+	left.value = e.clientX - offsetLeft + 15
+
+	if (left.value > maxLeft) {
+		left.value = maxLeft
+	}
+
 	top.value = e.clientY
 	visible.value = true
 	selectedTag.value = tag
 }
 
-// 关闭右键菜单
 const closeMenu = () => {
 	visible.value = false
 }
 
-// 容器引用
-let container = null
+const handleWheel = (e) => {
+	const scrollWrapper = scrollRef.value?.parentElement
+	if (!scrollWrapper) return
 
-// 监听路由变化
-watch(
-	() => route.path,
-	() => {
-		addTags()
-	},
-	{ immediate: true },
-)
+	const scrollWidth = scrollWrapper.offsetWidth
+	const tagElements = scrollRef.value?.querySelectorAll('.tags-view-item')
+	if (!tagElements || tagElements.length === 0) return
+
+	const ulWidth = scrollRef.value.offsetWidth
+	const eventDelta = e.wheelDelta || -e.deltaY * 40
+	const currentScroll = -scrollState.value.translateX
+	const newScroll = Math.max(0, Math.min(currentScroll + eventDelta, scrollWidth - ulWidth))
+	scrollState.value.translateX = -newScroll
+	closeMenu()
+}
+
+watch(route, () => {
+	addTags()
+	nextTick(() => {
+		setTransition()
+		autoPositionTab()
+	})
+})
 
-// 监听右键菜单可见性
 watch(visible, (value) => {
 	if (value) {
 		document.body.addEventListener('click', closeMenu)
@@ -219,8 +283,10 @@ watch(visible, (value) => {
 
 onMounted(() => {
 	addTags()
-	initTags()
-	container = document.querySelector('.tags-view-container')
+	nextTick(() => {
+		setTransition()
+		autoPositionTab()
+	})
 })
 </script>
 
@@ -228,152 +294,125 @@ onMounted(() => {
 .tags-view-container {
 	height: 34px;
 	width: 100%;
-	background: var(--el-fill-color-blank);
-	border-bottom: 1px solid var(--el-border-color-light);
-	box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+	background: #fff;
+	border-bottom: 1px solid #d8dce5;
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
 	position: relative;
-	z-index: 9;
 
 	.tags-view-wrapper {
-		white-space: nowrap;
+		height: 100%;
+		width: 100%;
 		position: relative;
 		overflow: hidden;
-		width: 100%;
+		white-space: nowrap;
 
-		:deep(.el-scrollbar__wrap) {
-			height: 34px;
-			overflow-x: auto;
-			scrollbar-width: thin;
+		.scroll-content {
+			display: inline-block;
+			white-space: nowrap;
+			will-change: transform;
+			height: 100%;
+			display: flex;
+			align-items: center;
 
-			&::-webkit-scrollbar {
-				height: 4px;
-			}
-
-			&::-webkit-scrollbar-thumb {
-				background-color: var(--el-border-color-darker);
+			.tags-view-item {
+				display: inline-flex;
+				align-items: center;
+				position: relative;
+				cursor: pointer;
+				height: 26px;
+				line-height: 26px;
+				border: 1px solid #d8dce5;
+				color: #495060;
+				background: #fff;
+				padding: 0 8px;
+				font-size: 12px;
+				margin-left: 5px;
 				border-radius: 2px;
-			}
+				transition: all 0.3s;
+				text-decoration: none;
+				user-select: none;
 
-			&::-webkit-scrollbar-track {
-				background-color: transparent;
-			}
-		}
+				&:first-of-type {
+					margin-left: 5px;
+				}
 
-		:deep(.el-scrollbar__bar.is-horizontal) {
-			height: 0;
+				&:hover {
+					color: #409eff;
+					background: #ecf5ff;
+					border-color: #b3d8ff;
+				}
+
+				&.active {
+					background-color: #409eff;
+					color: #fff;
+					border-color: #409eff;
+
+					&::before {
+						content: '';
+						background: #fff;
+						display: inline-block;
+						width: 8px;
+						height: 8px;
+						border-radius: 50%;
+						position: relative;
+						margin-right: 4px;
+					}
+				}
+
+				.close-icon {
+					width: 14px;
+					height: 14px;
+					font-size: 14px;
+					margin-left: 5px;
+					border-radius: 50%;
+					text-align: center;
+					transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+					transform-origin: 100% 50%;
+					vertical-align: middle;
+					display: inline-flex;
+					align-items: center;
+					justify-content: center;
+
+					&:hover {
+						background-color: #ff4d4f;
+						color: #fff;
+					}
+				}
+			}
 		}
 	}
 
-	.tags-view-item {
-		display: inline-flex;
-		position: relative;
-		align-items: center;
-		cursor: pointer;
-		height: 26px;
-		line-height: 26px;
-		border: 1px solid var(--el-border-color-light);
-		color: var(--el-text-color-regular);
-		background: var(--el-fill-color-blank);
-		padding: 0 12px;
+	.contextmenu {
+		margin: 0;
+		background: #fff;
+		z-index: 3000;
+		position: absolute;
+		list-style-type: none;
+		padding: 5px 0;
+		border-radius: 4px;
 		font-size: 12px;
-		margin-left: 5px;
-		margin-top: 4px;
-		border-radius: 3px;
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-		user-select: none;
+		font-weight: 400;
+		color: #333;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		min-width: 100px;
 
-		&:first-of-type {
-			margin-left: 10px;
-		}
-
-		&:last-of-type {
-			margin-right: 10px;
-		}
-
-		&:hover {
-			background-color: var(--el-fill-color-light);
-			color: var(--el-color-primary);
-			border-color: var(--el-color-primary-light-7);
-			transform: translateY(-1px);
-			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-		}
-
-		&.active {
-			background-color: var(--el-color-primary);
-			border-color: var(--el-color-primary);
-			color: #fff;
-			font-weight: 500;
-			transform: translateY(-1px);
-			box-shadow: 0 2px 8px rgba(var(--el-color-primary-rgb), 0.3);
-
-			&::before {
-				content: '';
-				background: #fff;
-				display: inline-block;
-				width: 6px;
-				height: 6px;
-				border-radius: 50%;
-				position: relative;
-				margin-right: 6px;
-				flex-shrink: 0;
-			}
-		}
-
-		.el-icon-close {
-			display: inline-flex;
+		li {
+			margin: 0;
+			padding: 8px 16px;
+			cursor: pointer;
+			display: flex;
 			align-items: center;
-			justify-content: center;
-			border-radius: 50%;
-			text-align: center;
-			transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-			transform-origin: 100% 50%;
-			font-size: 12px;
-			margin-left: 6px;
-			width: 16px;
-			height: 16px;
-			line-height: 16px;
-			vertical-align: middle;
-			flex-shrink: 0;
-			opacity: 0.7;
+			gap: 8px;
+			transition: all 0.3s;
 
 			&:hover {
-				background-color: #fff;
-				color: var(--el-color-danger);
-				opacity: 1;
-				transform: rotate(90deg);
+				background: #ecf5ff;
+				color: #409eff;
 			}
-		}
-	}
-}
 
-.contextmenu {
-	margin: 0;
-	background: var(--el-bg-color);
-	z-index: 3000;
-	position: absolute;
-	list-style-type: none;
-	padding: 5px 0;
-	border-radius: 4px;
-	font-size: 12px;
-	font-weight: 400;
-	color: var(--el-text-color-regular);
-	box-shadow: var(--el-box-shadow-light);
-
-	li {
-		margin: 0;
-		padding: 8px 16px;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		gap: 8px;
-
-		&:hover {
-			background: var(--el-fill-color-light);
-			color: var(--el-color-primary);
-		}
-
-		.el-icon {
-			font-size: 14px;
+			.el-icon {
+				font-size: 14px;
+			}
 		}
 	}
 }
diff --git a/src/layouts/components/userbar.vue b/src/layouts/components/userbar.vue
index 51e7363..c94d450 100644
--- a/src/layouts/components/userbar.vue
+++ b/src/layouts/components/userbar.vue
@@ -1,311 +1,187 @@
 <template>
-	<div class="userbar-container">
-		<!-- 全屏切换 -->
-		<el-tooltip content="全屏" placement="bottom">
-			<div class="icon-btn" @click="toggleFullScreen">
-				<el-icon v-if="!isFullScreen">
-					<FullScreen />
+	<div class="navbar-right">
+		<div class="right-item">
+			<el-tooltip content="全屏" placement="bottom">
+				<el-icon class="icon-btn" @click="toggleFullScreen">
+					<component :is="isFullscreen ? 'ElIconFullScreen' : 'ElIconAim'" />
 				</el-icon>
-				<el-icon v-else>
-					<Aim />
-				</el-icon>
-			</div>
-		</el-tooltip>
+			</el-tooltip>
+		</div>
 
-		<!-- 语言切换 -->
-		<el-dropdown trigger="click" @command="handleLanguageChange">
-			<div class="icon-btn">
-				<el-icon>
-					<Location />
+		<div class="right-item">
+			<el-tooltip content="刷新" placement="bottom">
+				<el-icon class="icon-btn" @click="refreshPage">
+					<component :is="'ElIconRefresh'" />
 				</el-icon>
-			</div>
-			<template #dropdown>
-				<el-dropdown-menu>
-					<el-dropdown-item :disabled="currentLanguage === 'zh-CN'" command="zh-CN"> 简体中文 </el-dropdown-item>
-					<el-dropdown-item :disabled="currentLanguage === 'en-US'" command="en-US"> English </el-dropdown-item>
-				</el-dropdown-menu>
-			</template>
-		</el-dropdown>
+			</el-tooltip>
+		</div>
 
-		<!-- 主题设置 -->
-		<el-dropdown trigger="click">
-			<div class="icon-btn">
-				<el-icon>
-					<Sunny />
-				</el-icon>
-			</div>
-			<template #dropdown>
-				<el-dropdown-menu>
-					<el-dropdown-item @click="setTheme('light')">
-						<el-icon>
-							<Sunny />
-						</el-icon>
-						浅色主题
-					</el-dropdown-item>
-					<el-dropdown-item @click="setTheme('dark')">
-						<el-icon>
-							<Moon />
-						</el-icon>
-						深色主题
-					</el-dropdown-item>
-				</el-dropdown-menu>
-			</template>
-		</el-dropdown>
-
-		<!-- 消息通知 -->
-		<el-tooltip content="消息" placement="bottom">
-			<div class="icon-btn">
-				<el-badge :value="messageCount" :hidden="messageCount === 0" :max="99">
-					<el-icon>
-						<Bell />
-					</el-icon>
-				</el-badge>
-			</div>
-		</el-tooltip>
-		<el-dropdown trigger="click" @command="handleCommand">
-			<div class="avatar-wrapper">
-				<el-avatar v-if="userStore.userInfo?.avatar" :src="userStore.userInfo.avatar" />
-				<el-avatar v-else>
-					<UserFilled />
-				</el-avatar>
-				<span class="username">{{ userStore.userInfo?.username || 'Admin' }}</span>
-				<el-icon class="el-icon-caret-bottom">
-					<ArrowDown />
-				</el-icon>
-			</div>
-			<template #dropdown>
-				<el-dropdown-menu>
-					<el-dropdown-item command="home">
-						<el-icon>
-							<HomeFilled />
-						</el-icon>
-						首页
-					</el-dropdown-item>
-					<el-dropdown-item command="profile">
-						<el-icon>
-							<User />
-						</el-icon>
-						个人中心
-					</el-dropdown-item>
-					<el-dropdown-item divided command="settings">
-						<el-icon>
-							<Setting />
-						</el-icon>
-						系统设置
-					</el-dropdown-item>
-					<el-dropdown-item divided command="logout">
-						<el-icon>
-							<SwitchButton />
-						</el-icon>
-						退出登录
-					</el-dropdown-item>
-				</el-dropdown-menu>
-			</template>
-		</el-dropdown>
+		<div class="right-item">
+			<el-dropdown trigger="click" @command="handleCommand">
+				<span class="el-dropdown-link">
+					<el-avatar :size="32" :src="userInfo.avatar || ''">
+						<el-icon><component :is="'ElIconUser'" /></el-icon>
+					</el-avatar>
+					<span class="username">{{ userInfo.username || '用户' }}</span>
+					<el-icon class="el-icon--right"><component :is="'ElIconArrowDown'" /></el-icon>
+				</span>
+				<template #dropdown>
+					<el-dropdown-menu>
+						<el-dropdown-item command="profile">
+							<el-icon><component :is="'ElIconUser'" /></el-icon>
+							个人中心
+						</el-dropdown-item>
+						<el-dropdown-item command="settings">
+							<el-icon><component :is="'ElIconSetting'" /></el-icon>
+							设置
+						</el-dropdown-item>
+						<el-dropdown-item divided command="logout">
+							<el-icon><component :is="'ElIconSwitchButton'" /></el-icon>
+							退出登录
+						</el-dropdown-item>
+					</el-dropdown-menu>
+				</template>
+			</el-dropdown>
+		</div>
 	</div>
 </template>
 
 <script setup>
-import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { ElMessageBox, ElMessage } from 'element-plus'
-import { ArrowDown, HomeFilled, User, Setting, SwitchButton, FullScreen, Aim, Location, Sunny, Moon, Bell, UserFilled } from '@element-plus/icons-vue'
-import { useUserStore } from '@/stores/modules/user'
-import { useI18nStore } from '@/stores/modules/i18n'
+import { useUserStore } from '../../stores/modules/user'
+import { useLayoutStore } from '../../stores/modules/layout'
+import { ElMessage } from 'element-plus'
 
 defineOptions({
-	name: 'LayoutUserbar',
+	name: 'UserBar',
 })
 
 const router = useRouter()
 const userStore = useUserStore()
-const i18nStore = useI18nStore()
+const layoutStore = useLayoutStore()
 
-// 全屏状态
-const isFullScreen = ref(false)
+const isFullscreen = ref(false)
+const userInfo = ref({
+	username: '',
+	avatar: '',
+})
 
-// 消息数量
-const messageCount = ref(0)
+// 切换全屏
+const toggleFullScreen = () => {
+	if (!document.fullscreenElement) {
+		document.documentElement.requestFullscreen()
+		isFullscreen.value = true
+	} else {
+		if (document.exitFullscreen) {
+			document.exitFullscreen()
+			isFullscreen.value = false
+		}
+	}
+}
 
-// 当前语言
-const currentLanguage = computed(() => i18nStore.locale)
+// 刷新页面
+const refreshPage = () => {
+	layoutStore.refreshTag()
+	router.replace({
+		path: '/redirect' + router.currentRoute.value.fullPath
+	})
+}
 
 // 处理下拉菜单命令
 const handleCommand = (command) => {
 	switch (command) {
-		case 'home':
-			router.push('/')
-			break
 		case 'profile':
-			router.push('/profile')
+			router.push('/ucenter/profile')
 			break
 		case 'settings':
-			router.push('/settings')
+			router.push('/ucenter/settings')
 			break
 		case 'logout':
 			handleLogout()
 			break
+		default:
+			break
 	}
 }
 
 // 退出登录
 const handleLogout = () => {
-	ElMessageBox.confirm('确定要退出登录吗？', '提示', {
-		confirmButtonText: '确定',
-		cancelButtonText: '取消',
-		type: 'warning',
-	})
-		.then(() => {
-			userStore.logout()
-			router.push('/login')
-			ElMessage.success('退出成功')
-		})
-		.catch(() => {
-			// 取消退出
-		})
+	userStore.logout()
+	ElMessage.success('退出登录成功')
+	router.push('/login')
 }
 
-// 切换全屏
-const toggleFullScreen = () => {
-	if (!document.fullscreenElement) {
-		document.documentElement.requestFullscreen()
-		isFullScreen.value = true
-	} else {
-		if (document.exitFullscreen) {
-			document.exitFullscreen()
-			isFullScreen.value = false
+// 获取用户信息
+const getUserInfo = () => {
+	const info = userStore.userInfo
+	if (info) {
+		userInfo.value = {
+			username: info.username || info.nickName || '用户',
+			avatar: info.avatar || '',
 		}
 	}
 }
 
 // 监听全屏变化
-const handleFullScreenChange = () => {
-	isFullScreen.value = !!document.fullscreenElement
-}
-
-// 语言切换
-const handleLanguageChange = (lang) => {
-	i18nStore.setLocale(lang)
-	ElMessage.success('语言切换成功')
-}
-
-// 设置主题
-const setTheme = (theme) => {
-	if (theme === 'dark') {
-		document.documentElement.classList.add('dark')
-	} else {
-		document.documentElement.classList.remove('dark')
-	}
-	ElMessage.success('主题切换成功')
+const handleFullscreenChange = () => {
+	isFullscreen.value = !!document.fullscreenElement
 }
 
 onMounted(() => {
-	document.addEventListener('fullscreenchange', handleFullScreenChange)
+	getUserInfo()
+	document.addEventListener('fullscreenchange', handleFullscreenChange)
 })
 
 onUnmounted(() => {
-	document.removeEventListener('fullscreenchange', handleFullScreenChange)
+	document.removeEventListener('fullscreenchange', handleFullscreenChange)
 })
 </script>
 
 <style lang="scss" scoped>
-.userbar-container {
+.navbar-right {
 	display: flex;
 	align-items: center;
-	gap: 16px;
+	height: 100%;
 
-	.avatar-wrapper {
+	.right-item {
 		display: flex;
 		align-items: center;
-		gap: 8px;
+		padding: 0 8px;
 		cursor: pointer;
-		padding: 6px 12px;
-		border-radius: 6px;
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
-		&:hover {
-			background-color: var(--el-fill-color-light);
-			transform: translateY(-1px);
-		}
+		.icon-btn {
+			font-size: 20px;
+			color: #5a5e66;
+			vertical-align: middle;
+			cursor: pointer;
+			transition: color 0.3s;
 
-		.username {
-			font-size: 14px;
-			font-weight: 500;
-			color: var(--el-text-color-primary);
-			max-width: 100px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-
-		.el-icon-caret-bottom {
-			font-size: 12px;
-			color: var(--el-text-color-regular);
-			transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-			.avatar-wrapper:hover & {
-				transform: rotate(180deg);
-				color: var(--el-color-primary);
-			}
-		}
-	}
-
-	.icon-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 36px;
-		height: 36px;
-		cursor: pointer;
-		border-radius: 6px;
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-		user-select: none;
-
-		.el-icon {
-			font-size: 18px;
-			color: var(--el-text-color-regular);
-			transition: all 0.3s;
-		}
-
-		&:hover {
-			background-color: var(--el-fill-color-light);
-			transform: translateY(-1px);
-			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-
-			.el-icon {
-				color: var(--el-color-primary);
+			&:hover {
+				color: var(--primary-color);
 			}
 		}
 
-		&:active {
-			transform: translateY(0);
+		.el-dropdown-link {
+			display: flex;
+			align-items: center;
+			cursor: pointer;
+			color: #5a5e66;
+			transition: color 0.3s;
+
+			&:hover {
+				color: var(--primary-color);
+			}
+
+			.username {
+				margin: 0 8px;
+				font-size: 14px;
+			}
+
+			.el-icon--right {
+				font-size: 12px;
+			}
 		}
-
-		:deep(.el-badge__content) {
-			transform: translateY(-8px) translateX(8px);
-			border: 2px solid var(--el-bg-color);
-		}
-
-		:deep(.el-badge__content.is-fixed) {
-			transform: translateY(-8px) translateX(8px);
-		}
-	}
-}
-
-// 下拉菜单样式优化
-:deep(.el-dropdown-menu__item) {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	transition: all 0.3s;
-
-	.el-icon {
-		font-size: 16px;
-	}
-
-	&:hover {
-		background-color: var(--el-fill-color-light);
-		color: var(--el-color-primary);
 	}
 }
 </style>
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 310aa5a..4af3f81 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -8,7 +8,13 @@
 					<img :src="logo" alt="logo" />
 				</div>
 				<div class="menu-list">
-					<div v-for="menu in parentMenus" :key="menu.path" class="menu-item" :class="{ active: selectedParentMenu?.path === menu.path }" @click="handleParentMenuClick(menu)">
+					<div
+						v-for="menu in parentMenus"
+						:key="menu.path"
+						class="menu-item"
+						:class="{ active: selectedParentMenu?.path === menu.path }"
+						@click="handleParentMenuClick(menu)"
+					>
 						<el-icon v-if="menu.meta?.icon">
 							<component :is="menu.meta.icon" />
 						</el-icon>
@@ -19,13 +25,15 @@
 
 			<!-- 二级菜单栏 -->
 			<el-aside :width="sidebarCollapsed ? '60px' : '220px'" class="second-sidebar">
-				<div v-if="!sidebarCollapsed" class="logo logo-only">
-					<img v-if="logo" :src="logo" alt="logo" />
-					<span class="logo-text hidden">{{ logoText }}</span>
+				<div v-if="!sidebarCollapsed && selectedParentMenu" class="second-sidebar-header">
+					<el-icon v-if="selectedParentMenu.meta?.icon" class="menu-icon">
+						<component :is="selectedParentMenu.meta.icon" />
+					</el-icon>
+					<span class="menu-title">{{ selectedParentMenu.meta?.title }}</span>
 				</div>
-				<el-scrollbar class="menu-scrollbar">
-					<menu-component />
-				</el-scrollbar>
+				<el-menu :default-active="activeMenu" :collapse="sidebarCollapsed" :collapse-transition="false">
+					<layout-menu-item :menu-list="childMenus" />
+				</el-menu>
 			</el-aside>
 
 			<!-- 主内容区 -->
@@ -35,14 +43,14 @@
 						<el-icon class="collapse-icon" @click="toggleSidebar">
 							<component :is="sidebarCollapsed ? 'ElIconExpand' : 'ElIconFold'" />
 						</el-icon>
-						<breadcrumb v-if="showBreadcrumb" />
+						<layout-breadcrumb v-if="showBreadcrumb" />
 					</div>
 					<div class="header-right">
 						<userbar />
 					</div>
 				</el-header>
+				<tags v-if="showTags" />
 				<el-main class="app-main">
-					<tags v-if="showTags" />
 					<router-view v-slot="{ Component, route }">
 						<keep-alive :include="cachedViews">
 							<component v-if="!route.meta.link" :is="Component" :key="refreshKey" />
@@ -60,9 +68,9 @@
 					<img v-if="logo" :src="logo" alt="logo" />
 					<span class="logo-text">{{ logoText }}</span>
 				</div>
-				<el-scrollbar class="menu-scrollbar">
-					<menu-component />
-				</el-scrollbar>
+				<el-menu :default-active="activeMenu" :collapse="sidebarCollapsed" :collapse-transition="false">
+					<layout-menu-item :menu-list="allMenus" />
+				</el-menu>
 			</el-aside>
 			<el-container class="main-container">
 				<el-header class="app-header">
@@ -70,13 +78,13 @@
 						<el-icon class="collapse-icon" @click="toggleSidebar">
 							<component :is="sidebarCollapsed ? 'ElIconExpand' : 'ElIconFold'" />
 						</el-icon>
-						<breadcrumb v-if="showBreadcrumb" />
+						<layout-breadcrumb v-if="showBreadcrumb" />
 					</div>
 					<div class="header-right">
-						<tags v-if="showTags" />
 						<userbar />
 					</div>
 				</el-header>
+				<tags v-if="showTags" />
 				<el-main class="app-main">
 					<router-view v-slot="{ Component, route }">
 						<keep-alive :include="cachedViews">
@@ -97,14 +105,16 @@
 							<img v-if="logo" :src="logo" alt="logo" />
 							<span class="logo-text">{{ logoText }}</span>
 						</div>
-						<menu-component mode="horizontal" />
+						<el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false">
+							<layout-menu-item :menu-list="allMenus" />
+						</el-menu>
 					</div>
 					<div class="header-right">
 						<userbar />
 					</div>
 				</el-header>
+				<tags v-if="showTags" />
 				<el-main class="app-main">
-					<tags v-if="showTags" />
 					<router-view v-slot="{ Component, route }">
 						<keep-alive :include="cachedViews">
 							<component v-if="!route.meta.link" :is="Component" :key="refreshKey" />
@@ -117,60 +127,87 @@
 	</el-container>
 
 	<!-- 设置组件 -->
-	<setting />
+	<layout-setting />
 </template>
 
 <script setup>
 import { computed, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useLayoutStore } from '@/stores/modules/layout'
-import { useUserStore } from '@/stores/modules/user'
-import MenuComponent from './components/menu.vue'
-import Breadcrumb from './components/breadcrumb.vue'
+import { useRoute } from 'vue-router'
+import { useUserStore } from '../stores/modules/user'
+import { useLayoutStore } from '../stores/modules/layout'
+import LayoutMenuItem from './components/menu-item.vue'
+import LayoutBreadcrumb from './components/breadcrumb.vue'
 import Tags from './components/tags.vue'
 import Userbar from './components/userbar.vue'
-import Setting from './components/setting.vue'
-import config from '@/config'
+import LayoutSetting from './components/setting.vue'
 
 defineOptions({
 	name: 'AppLayouts',
 })
 
 const route = useRoute()
-const router = useRouter()
-const layoutStore = useLayoutStore()
 const userStore = useUserStore()
+const layoutStore = useLayoutStore()
 
-// Logo 配置
-const logo = config.LOGO
-const logoText = config.APP_NAME
+// Logo配置
+const logo = computed(() => {
+	return new URL('../assets/logo.png', import.meta.url).href
+})
 
-// 布局相关状态
+const logoText = computed(() => {
+	return import.meta.env.VITE_APP_TITLE || 'Admin'
+})
+
+// 布局相关
 const layoutMode = computed(() => layoutStore.layoutMode)
 const sidebarCollapsed = computed(() => layoutStore.sidebarCollapsed)
 const showTags = computed(() => layoutStore.showTags)
 const showBreadcrumb = computed(() => layoutStore.showBreadcrumb)
-const selectedParentMenu = computed(() => layoutStore.selectedParentMenu)
 const refreshKey = computed(() => layoutStore.refreshKey)
-const viewTags = computed(() => layoutStore.viewTags)
 
-// 布局样式类
-const layoutClass = computed(() => {
-	return {
-		[`layout-${layoutMode.value}`]: true,
-		'sidebar-collapsed': sidebarCollapsed.value,
+// 菜单数据
+const allMenus = computed(() => {
+	return userStore.getMenu() || []
+})
+
+const parentMenus = computed(() => {
+	return allMenus.value.filter((menu) => !menu.meta?.hidden)
+})
+
+const childMenus = computed(() => {
+	if (!selectedParentMenu.value) {
+		return []
 	}
+	return selectedParentMenu.value.children || []
+})
+
+const selectedParentMenu = computed({
+	get: () => layoutStore.selectedParentMenu,
+	set: (value) => layoutStore.setSelectedParentMenu(value),
+})
+
+// 当前激活的菜单
+const activeMenu = computed(() => {
+	const { meta, path } = route
+	if (meta.activeMenu) {
+		return meta.activeMenu
+	}
+	return path
 })
 
 // 缓存的视图
 const cachedViews = computed(() => {
-	return viewTags.value.filter((tag) => tag.meta?.keepAlive).map((tag) => tag.name)
+	return layoutStore.viewTags.map((tag) => tag.name).filter((name) => name)
 })
 
-// 父级菜单（一级菜单）
-const parentMenus = computed(() => {
-	const menus = userStore.getMenu() || []
-	return menus.filter((menu) => !menu.meta?.hidden && menu.children && menu.children.length > 0)
+// 布局样式类
+const layoutClass = computed(() => {
+	return {
+		'layout-default': layoutMode.value === 'default',
+		'layout-menu': layoutMode.value === 'menu',
+		'layout-top': layoutMode.value === 'top',
+		'sidebar-collapsed': sidebarCollapsed.value,
+	}
 })
 
 // 切换侧边栏
@@ -178,380 +215,254 @@ const toggleSidebar = () => {
 	layoutStore.toggleSidebar()
 }
 
-// 处理父菜单点击
+// 处理一级菜单点击
 const handleParentMenuClick = (menu) => {
-	// 如果点击的是当前选中的父菜单，不重复操作
-	if (selectedParentMenu.value?.path === menu.path) {
-		return
-	}
-
-	// 设置选中的父菜单
-	layoutStore.setSelectedParentMenu(menu)
-
-	// 如果父菜单有 redirect，跳转
-	if (menu.redirect) {
-		router.push(menu.redirect)
-		return
-	}
-
-	// 如果有子菜单，跳转到第一个子菜单
-	if (menu.children && menu.children.length > 0) {
-		const firstChild = menu.children.find((child) => !child.meta?.hidden) || menu.children[0]
-		if (firstChild) {
-			router.push(firstChild.path)
-		}
-	}
+	selectedParentMenu.value = menu
 }
 
-// 监听路由变化，自动更新选中的父菜单
+// 监听路由变化，自动选择父菜单
 watch(
 	() => route.path,
 	() => {
 		if (layoutMode.value === 'default') {
-			const menus = userStore.getMenu() || []
-			for (const parentMenu of menus) {
-				if (parentMenu.children && parentMenu.children.some((child) => route.path.startsWith(child.path))) {
-					layoutStore.setSelectedParentMenu(parentMenu)
-					break
+			const path = route.path
+			const parent = parentMenus.value.find((menu) => {
+				if (menu.path === path || path.startsWith(menu.path + '/')) {
+					return true
 				}
+				if (menu.children) {
+					return menu.children.some((child) => child.path === path || path.startsWith(child.path + '/'))
+				}
+				return false
+			})
+
+			if (parent && (!selectedParentMenu.value || !path.startsWith(selectedParentMenu.value.path + '/'))) {
+				selectedParentMenu.value = parent
 			}
 		}
-
-		// 更新视图标签
-		if (route.name && !route.meta?.hidden) {
-			layoutStore.updateViewTags({
-				name: route.name,
-				path: route.path,
-				fullPath: route.fullPath,
-				title: route.meta?.title,
-				meta: route.meta,
-			})
-		}
 	},
-	{ immediate: true },
+	{ immediate: true }
 )
 </script>
 
 <style lang="scss" scoped>
 .app-wrapper {
+	position: relative;
+	height: 100%;
 	width: 100%;
-	height: 100vh;
-	overflow: hidden;
 
-	// 通用侧边栏样式
-	.el-aside {
-		transition: width 0.28s;
+	&.layout-default {
 		display: flex;
-		flex-direction: column;
-		background-color: var(--el-menu-bg-color);
-		border-right: 1px solid var(--el-border-color-light);
-	}
 
-	// Logo 样式
-	.logo {
-		height: 60px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0 20px;
-		border-bottom: 1px solid var(--el-border-color-light);
-
-		img {
-			height: 32px;
-			max-width: 100%;
-			object-fit: contain;
-		}
-
-		.logo-text {
-			margin-left: 10px;
-			font-size: 18px;
-			font-weight: 600;
-			color: var(--el-text-color-primary);
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		// 双栏布局只显示logo，隐藏名称
-		&.logo-only .logo-text.hidden {
-			display: none;
-		}
-
-		&.logo-only {
-			justify-content: center;
-			img {
-				margin: 0;
-			}
-		}
-	}
-
-	.logo-mini {
-		height: 60px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-bottom: 1px solid var(--el-border-color-light);
-
-		img {
-			height: 32px;
-			width: 32px;
-			object-fit: contain;
-		}
-
-		.logo-text-mini {
-			font-size: 16px;
-			font-weight: 600;
-			color: var(--el-text-color-primary);
-		}
-	}
-
-	// Header 样式
-	.el-header {
-		height: 60px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0 20px;
-		background-color: var(--el-bg-color);
-		border-bottom: 1px solid var(--el-border-color-light);
-
-		.header-left,
-		.header-right {
-			display: flex;
-			align-items: center;
-			gap: 16px;
-		}
-
-		.collapse-icon {
-			font-size: 20px;
-			cursor: pointer;
-			color: var(--el-text-color-regular);
-			transition: color 0.3s;
-
-			&:hover {
-				color: var(--el-color-primary);
-			}
-		}
-	}
-
-	// Main 样式
-	.el-main {
-		padding: 0;
-		background-color: var(--el-bg-color-page);
-		overflow-y: auto;
-	}
-
-	.iframe-container {
-		width: 100%;
-		height: 100%;
-		border: none;
-	}
-}
-
-// 默认布局样式
-.layout-default {
-	.first-sidebar {
-		.menu-list {
-			flex: 1;
+		.first-sidebar {
+			width: 60px;
+			height: 100%;
+			background: #001529;
+			overflow-x: hidden;
 			overflow-y: auto;
-			padding: 10px 0;
 
-			.menu-item {
+			.logo-mini {
 				height: 50px;
 				display: flex;
-				flex-direction: column;
 				align-items: center;
 				justify-content: center;
-				cursor: pointer;
-				color: var(--el-text-color-regular);
-				transition: all 0.3s;
+				background: #002140;
 
-				&:hover {
-					background-color: var(--el-fill-color-light);
+				img {
+					width: 32px;
+					height: 32px;
+				}
+			}
+
+			.menu-list {
+				.menu-item {
+					height: 60px;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					cursor: pointer;
+					color: rgba(255, 255, 255, 0.65);
+					transition: all 0.3s;
+
+					&:hover {
+						color: #fff;
+						background: #1890ff;
+					}
+
+					&.active {
+						color: #fff;
+						background: #1890ff;
+					}
+
+					.el-icon {
+						font-size: 24px;
+						margin-bottom: 4px;
+					}
+
+					.menu-text {
+						font-size: 12px;
+						text-align: center;
+					}
+				}
+			}
+		}
+
+		.second-sidebar {
+			background: #fff;
+			border-right: 1px solid #e6e6e6;
+			overflow-x: hidden;
+			overflow-y: auto;
+			transition: width 0.3s;
+			display: flex;
+			flex-direction: column;
+
+			.second-sidebar-header {
+				height: 50px;
+				display: flex;
+				align-items: center;
+				padding: 0 16px;
+				border-bottom: 1px solid #e6e6e6;
+				background: #fafafa;
+				flex-shrink: 0;
+				gap: 8px;
+
+				.menu-icon {
+					font-size: 18px;
+					color: #333;
 				}
 
-				&.active {
-					color: var(--el-color-primary);
-					background-color: var(--el-color-primary-light-9);
-				}
-
-				.el-icon {
-					font-size: 20px;
-					margin-bottom: 4px;
-				}
-
-				.menu-text {
-					font-size: 12px;
-					line-height: 1;
+				.menu-title {
+					font-size: 15px;
+					font-weight: 500;
+					color: #333;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
 				}
 			}
 		}
 	}
 
-	.second-sidebar {
-		.menu-scrollbar {
-			flex: 1;
-			overflow: hidden;
-		}
-	}
-}
+	&.layout-menu {
+		display: flex;
 
-// Menu 布局样式
-.layout-menu {
-	.menu-sidebar {
-		.menu-scrollbar {
-			flex: 1;
-			overflow: hidden;
-		}
-	}
-}
-
-// Top 布局样式
-.layout-top {
-	.top-header {
-		.header-left {
-			display: flex;
-			align-items: center;
-			gap: 20px;
+		.menu-sidebar {
+			background: #fff;
+			border-right: 1px solid #e6e6e6;
+			overflow-x: hidden;
+			overflow-y: auto;
+			transition: width 0.3s;
 
 			.logo {
-				border: none;
-				padding: 0;
-				height: 60px;
-			}
-		}
-	}
-}
+				height: 50px;
+				display: flex;
+				align-items: center;
+				padding: 0 20px;
+				border-bottom: 1px solid #e6e6e6;
 
-// 侧边栏折叠状态
-.sidebar-collapsed {
-	.logo-text {
-		display: none !important;
-	}
-}
+				img {
+					width: 32px;
+					height: 32px;
+					margin-right: 8px;
+				}
 
-// 响应式设计
-@media screen and (max-width: 768px) {
-	// 小屏幕优化
-	.layout-default {
-		.first-sidebar {
-			width: 50px !important;
-
-			.menu-item {
-				height: 45px;
-
-				.el-icon {
+				.logo-text {
 					font-size: 18px;
+					font-weight: 600;
+					color: #333;
 				}
+			}
+		}
+	}
 
-				.menu-text {
-					font-size: 10px;
+	&.layout-top {
+		.top-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			height: 50px;
+			background: #fff;
+			border-bottom: 1px solid #e6e6e6;
+			padding: 0 20px;
+
+			.header-left {
+				display: flex;
+				align-items: center;
+
+				.logo {
+					display: flex;
+					align-items: center;
+					margin-right: 40px;
+
+					img {
+						width: 32px;
+						height: 32px;
+						margin-right: 8px;
+					}
+
+					.logo-text {
+						font-size: 18px;
+						font-weight: 600;
+						color: #333;
+					}
 				}
 			}
 
-			.logo-mini img {
-				height: 28px;
-				width: 28px;
-			}
-		}
-
-		.second-sidebar {
-			position: fixed;
-			left: 50px;
-			top: 0;
-			bottom: 0;
-			z-index: 1000;
-			background: var(--el-bg-color);
-			box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
-		}
-	}
-
-	.layout-menu {
-		.menu-sidebar {
-			position: fixed;
-			left: 0;
-			top: 0;
-			bottom: 0;
-			z-index: 1000;
-			background: var(--el-bg-color);
-			box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
-		}
-	}
-
-	// Header 优化
-	.el-header {
-		padding: 0 12px;
-
-		.header-left,
-		.header-right {
-			gap: 8px;
-		}
-
-		.collapse-icon {
-			font-size: 18px;
-		}
-
-		:deep(.breadcrumb) {
-			display: none;
-		}
-	}
-
-	// Tags 优化
-	.tags-view-item {
-		padding: 0 8px;
-		font-size: 11px;
-	}
-}
-
-@media screen and (max-width: 480px) {
-	// 超小屏幕优化
-	.layout-default {
-		.first-sidebar {
-			width: 45px !important;
-		}
-
-		.second-sidebar {
-			left: 45px;
-		}
-	}
-
-	.layout-menu {
-		.menu-sidebar {
-			width: 200px !important;
-		}
-	}
-
-	// Header 优化
-	.el-header {
-		padding: 0 8px;
-
-		.header-left,
-		.header-right {
-			gap: 6px;
-		}
-
-		.icon-btn {
-			width: 32px;
-			height: 32px;
-		}
-
-		.avatar-wrapper {
-			padding: 4px 8px;
-
-			.username {
-				display: none;
+			.el-menu {
+				border-bottom: none;
 			}
 		}
 	}
 
-	// Logo 优化
-	.logo {
-		img {
-			height: 28px;
+	.main-container {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		.app-header {
+			height: 50px;
+			background: #fff;
+			border-bottom: 1px solid #e6e6e6;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 20px;
+
+			.header-left {
+				display: flex;
+				align-items: center;
+
+				.collapse-icon {
+					font-size: 20px;
+					cursor: pointer;
+					color: #666;
+					margin-right: 16px;
+
+					&:hover {
+						color: var(--primary-color);
+					}
+				}
+			}
+
+			.header-right {
+				display: flex;
+				align-items: center;
+			}
 		}
 
-		.logo-text {
-			font-size: 16px;
+		.app-main {
+			flex: 1;
+			background: #f0f2f5;
+			overflow: auto;
+			padding: 20px;
+
+			.iframe-container {
+				width: 100%;
+				height: 100%;
+				border: none;
+			}
 		}
 	}
 }
diff --git a/src/layouts/other/404.vue b/src/layouts/other/404.vue
index ca836fb..34c54b6 100644
--- a/src/layouts/other/404.vue
+++ b/src/layouts/other/404.vue
@@ -48,9 +48,8 @@ const goHome = () => {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/style/auth.scss';
-
 .not-found-container {
+	width: 100%;
 	min-height: 100vh;
 	display: flex;
 	align-items: center;
diff --git a/src/layouts/other/empty.vue b/src/layouts/other/empty.vue
index 68c76a2..7a07bbd 100644
--- a/src/layouts/other/empty.vue
+++ b/src/layouts/other/empty.vue
@@ -30,7 +30,6 @@
 
 <script setup>
 import { Box } from '@element-plus/icons-vue'
-import '@/assets/style/auth.scss'
 
 defineProps({
 	description: {
@@ -59,9 +58,8 @@ const handleAction = () => {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/style/auth.scss';
-
 .empty-container {
+	width: 100%;
 	min-height: 100vh;
 	display: flex;
 	align-items: center;