diff --git a/src/assets/style/app.scss b/src/assets/style/app.scss
index 3b453ad..fabdfc9 100644
--- a/src/assets/style/app.scss
+++ b/src/assets/style/app.scss
@@ -69,6 +69,39 @@ body {
 	min-height: 100vh;
 }
 
+// ==================== 暗色主题样式 ====================
+html.dark {
+	color-scheme: dark;
+
+	// Element Plus 暗色主题变量
+	--el-bg-color: #141414;
+	--el-bg-color-page: #0a0a0a;
+	--el-bg-color-overlay: #1d1e1f;
+	--el-text-color-primary: #e5eaf3;
+	--el-text-color-regular: #cfd3dc;
+	--el-text-color-secondary: #a3a6ad;
+	--el-text-color-placeholder: #8d9096;
+	--el-text-color-disabled: #6c6e72;
+	--el-border-color: #4c4d4f;
+	--el-border-color-light: #414243;
+	--el-border-color-lighter: #363637;
+	--el-border-color-extra-light: #2b2b2c;
+	--el-border-color-dark: #58585b;
+	--el-border-color-darker: #636466;
+	--el-fill-color: #2b2b2c;
+	--el-fill-color-light: #262727;
+	--el-fill-color-lighter: #212121;
+	--el-fill-color-extra-light: #191919;
+	--el-fill-color-dark: #303030;
+	--el-fill-color-darker: #363637;
+	--el-fill-color-blank: transparent;
+	--el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.2);
+	--el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
+	--el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.54);
+	--el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px rgba(0, 0, 0, 0.36);
+	--el-border-color-base: #4c4d4f;
+}
+
 .pages {
 	flex: 1;
 	display: flex;
diff --git a/src/config/index.js b/src/config/index.js
index e7ee526..40b21a2 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,5 +1,6 @@
 export default {
 	APP_NAME: 'vueadmin',
+	LOGO: '',
 	DASHBOARD_URL: '/dashboard',
 
 	// 白名单路由（不需要登录即可访问）
diff --git a/src/layouts/components/breadcrumb.vue b/src/layouts/components/breadcrumb.vue
index e69de29..9f1a293 100644
--- a/src/layouts/components/breadcrumb.vue
+++ b/src/layouts/components/breadcrumb.vue
@@ -0,0 +1,95 @@
+<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 }}
+			</span>
+			<a v-else class="redirect" @click.prevent="handleLink(item)">
+				{{ item.meta?.title }}
+			</a>
+		</el-breadcrumb-item>
+	</transition-group>
+</el-breadcrumb></template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from '@/hooks/useI18n'
+
+defineOptions({
+	name: 'LayoutBreadcrumb',
+})
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+
+// 面包屑列表
+const breadcrumbs = computed(() => {
+	const matched = route.matched.filter((item) => item.meta && item.meta.title)
+
+	const first = matched[0]
+
+	if (!first || !first.meta?.title) {
+		return []
+	}
+
+	// 如果第一个不是首页，添加首页
+	if (first.path !== '/') {
+		matched.unshift({
+			path: '/',
+			meta: { title: t('menu.home') || '首页' },
+		})
+	}
+
+	return matched
+})
+
+// 处理点击
+const handleLink = (item) => {
+	const { redirect, path } = item
+	if (redirect) {
+		router.push(redirect)
+		return
+	}
+	router.push(path)
+}
+</script>
+
+<style lang="scss" scoped>
+.el-breadcrumb {
+	display: inline-block;
+	line-height: 60px;
+	font-size: 14px;
+
+	.no-redirect {
+		color: var(--el-text-color-regular);
+		cursor: text;
+	}
+
+	.redirect {
+		color: var(--el-text-color-primary);
+		cursor: pointer;
+		transition: color 0.3s;
+
+		&:hover {
+			color: var(--el-color-primary);
+		}
+	}
+}
+
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+	transition: all 0.3s;
+}
+
+.breadcrumb-enter-from,
+.breadcrumb-leave-to {
+	opacity: 0;
+	transform: translateX(20px);
+}
+
+.breadcrumb-leave-active {
+	position: absolute;
+}
+</style>
diff --git a/src/layouts/components/menu-item.vue b/src/layouts/components/menu-item.vue
new file mode 100644
index 0000000..baa6469
--- /dev/null
+++ b/src/layouts/components/menu-item.vue
@@ -0,0 +1,47 @@
+<template><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></template>
+
+<script setup>
+defineOptions({
+	name: 'MenuItem',
+})
+
+defineProps({
+	menuList: {
+		type: Array,
+		default: () => [],
+	},
+	parentPath: {
+		type: String,
+		default: '',
+	},
+})
+
+// 判断是否有子菜单
+const hasChildren = (menu) => {
+	return menu.children && menu.children.length > 0
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/layouts/components/menu.vue b/src/layouts/components/menu.vue
index e69de29..05428a2 100644
--- a/src/layouts/components/menu.vue
+++ b/src/layouts/components/menu.vue
@@ -0,0 +1,97 @@
+<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;
+}
+</style>
diff --git a/src/layouts/components/setting.vue b/src/layouts/components/setting.vue
new file mode 100644
index 0000000..5ae24f4
--- /dev/null
+++ b/src/layouts/components/setting.vue
@@ -0,0 +1,495 @@
+<template>
+<div class="setting-container">
+	<!-- 设置按钮 -->
+	<div class="setting-btn" @click="showDrawer = true">
+		<el-icon>
+			<Setting />
+		</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 { 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',
+})
+
+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 layoutMode = computed({
+	get: () => layoutStore.layoutMode,
+	set: (val) => layoutStore.setLayoutMode(val),
+})
+
+// 主题色
+const themeColor = ref(layoutStore.themeColor)
+
+// 主题模式（深色/浅色）
+const isDark = ref(document.documentElement.classList.contains('dark'))
+
+// 显示标签栏
+const showTags = computed({
+	get: () => layoutStore.showTags,
+	set: (val) => layoutStore.setShowTags(val),
+})
+
+// 显示面包屑
+const showBreadcrumb = computed({
+	get: () => layoutStore.showBreadcrumb,
+	set: (val) => layoutStore.setShowBreadcrumb(val),
+})
+
+// 布局模式变化
+const handleLayoutModeChange = (value) => {
+	console.log('Layout mode changed:', value)
+}
+
+// 主题色变化
+const handleThemeColorChange = (value) => {
+	if (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('已重置为默认配置')
+}
+
+// 初始化
+onMounted(() => {
+	themeColor.value = layoutStore.themeColor
+})
+</script>
+
+<style lang="scss" scoped>
+.setting-container {
+
+	// 设置按钮
+	.setting-btn {
+		position: fixed;
+		top: 50%;
+		right: 0;
+		transform: translateY(-50%);
+		width: 48px;
+		height: 48px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--el-color-primary);
+		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;
+
+		.el-icon {
+			font-size: 20px;
+		}
+
+		&:hover {
+			width: 56px;
+			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+		}
+	}
+
+	// 设置内容
+	.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;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/layouts/components/tags.vue b/src/layouts/components/tags.vue
index e69de29..49562de 100644
--- a/src/layouts/components/tags.vue
+++ b/src/layouts/components/tags.vue
@@ -0,0 +1,342 @@
+<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>
+
+	<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
+		<li @click="refreshSelectedTag(selectedTag)">
+			<el-icon>
+				<Refresh />
+			</el-icon>
+			刷新
+		</li>
+		<li v-if="!selectedTag?.meta?.affix" @click="closeSelectedTag(selectedTag)">
+			<el-icon>
+				<Close />
+			</el-icon>
+			关闭
+		</li>
+		<li @click="closeOthersTags">
+			<el-icon>
+				<CircleClose />
+			</el-icon>
+			关闭其他
+		</li>
+		<li @click="closeAllTags(selectedTag)">
+			<el-icon>
+				<CircleCloseFilled />
+			</el-icon>
+			关闭全部
+		</li>
+	</ul>
+</div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLayoutStore } from '@/stores/modules/layout'
+import { Close, Refresh, CircleClose, CircleCloseFilled } from '@element-plus/icons-vue'
+
+defineOptions({
+	name: 'LayoutTags',
+})
+
+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 affixTags = ref([])
+
+// 可见的标签
+const visibleTags = computed(() => {
+	return layoutStore.viewTags || []
+})
+
+// 判断是否激活
+const isActive = (tag) => {
+	return tag.fullPath === route.fullPath
+}
+
+// 过滤固定的标签
+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]
+			}
+		}
+	})
+	return tags
+}
+
+// 初始化标签
+const initTags = () => {
+	affixTags.value = filterAffixTags(route.matched)
+	for (const tag of affixTags.value) {
+		if (tag.name) {
+			layoutStore.updateViewTags(tag)
+		}
+	}
+}
+
+// 添加标签
+const addTags = () => {
+	if (route.name && !route.meta?.hidden) {
+		layoutStore.updateViewTags({
+			name: route.name,
+			path: route.path,
+			fullPath: route.fullPath,
+			title: route.meta?.title,
+			meta: route.meta,
+		})
+	}
+	return false
+}
+
+// 关闭标签
+const closeTag = (tag) => {
+	layoutStore.removeViewTags(tag.fullPath)
+	if (isActive(tag)) {
+		toLastView(tag)
+	}
+}
+
+// 关闭选中的标签
+const closeSelectedTag = (tag) => {
+	closeTag(tag)
+}
+
+// 跳转到最后一个标签
+const toLastView = (tag) => {
+	const views = visibleTags.value
+	const latestView = views.slice(-1)[0]
+	if (latestView) {
+		router.push(latestView.fullPath)
+	} else {
+		// 如果没有标签，跳转到首页
+		router.push('/')
+	}
+}
+
+// 关闭其他标签
+const closeOthersTags = () => {
+	router.push(selectedTag.value.fullPath)
+	layoutStore.clearViewTags()
+	addTags()
+	for (const tag of affixTags.value) {
+		layoutStore.updateViewTags(tag)
+	}
+}
+
+// 关闭所有标签
+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 menuMinWidth = 105
+	const offsetLeft = e.clientX - container.getBoundingClientRect().left // container margin left
+	const offsetWidth = container.offsetWidth - 100
+	const maxLeft = offsetWidth - menuMinWidth
+	left.value = offsetLeft > maxLeft ? maxLeft : offsetLeft
+	top.value = e.clientY
+	visible.value = true
+	selectedTag.value = tag
+}
+
+// 关闭右键菜单
+const closeMenu = () => {
+	visible.value = false
+}
+
+// 容器引用
+let container = null
+
+// 监听路由变化
+watch(
+	() => route.path,
+	() => {
+		addTags()
+	},
+	{ immediate: true },
+)
+
+// 监听右键菜单可见性
+watch(visible, (value) => {
+	if (value) {
+		document.body.addEventListener('click', closeMenu)
+	} else {
+		document.body.removeEventListener('click', closeMenu)
+	}
+})
+
+onMounted(() => {
+	addTags()
+	initTags()
+	container = document.querySelector('.tags-view-container')
+})
+</script>
+
+<style lang="scss" scoped>
+.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);
+
+	.tags-view-wrapper {
+		white-space: nowrap;
+		position: relative;
+		overflow: hidden;
+		width: 100%;
+
+		:deep(.el-scrollbar__wrap) {
+			height: 34px;
+			overflow-x: auto;
+		}
+
+		:deep(.el-scrollbar__bar.is-horizontal) {
+			height: 0;
+		}
+	}
+
+	.tags-view-item {
+		display: inline-block;
+		position: relative;
+		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 8px;
+		font-size: 12px;
+		margin-left: 5px;
+		margin-top: 4px;
+		border-radius: 2px;
+		transition: all 0.3s;
+
+		&: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);
+		}
+
+		&.active {
+			background-color: var(--el-color-primary);
+			border-color: var(--el-color-primary);
+			color: #fff;
+
+			&::before {
+				content: '';
+				background: #fff;
+				display: inline-block;
+				width: 8px;
+				height: 8px;
+				border-radius: 50%;
+				position: relative;
+				margin-right: 2px;
+			}
+		}
+
+		.el-icon-close {
+			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: 5px;
+			width: 14px;
+			height: 14px;
+			line-height: 14px;
+			vertical-align: middle;
+
+			&:hover {
+				background-color: #fff;
+				color: var(--el-color-danger);
+			}
+		}
+	}
+}
+
+.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;
+		}
+	}
+}
+</style>
diff --git a/src/layouts/components/userbar.vue b/src/layouts/components/userbar.vue
index e69de29..d1469ce 100644
--- a/src/layouts/components/userbar.vue
+++ b/src/layouts/components/userbar.vue
@@ -0,0 +1,295 @@
+<template>
+<div class="userbar-container">
+	<!-- 全屏切换 -->
+	<el-tooltip content="全屏" placement="bottom">
+		<div class="icon-btn" @click="toggleFullScreen">
+			<el-icon v-if="!isFullScreen">
+				<FullScreen />
+			</el-icon>
+			<el-icon v-else>
+				<Aim />
+			</el-icon>
+		</div>
+	</el-tooltip>
+
+	<!-- 语言切换 -->
+	<el-dropdown trigger="click" @command="handleLanguageChange">
+		<div class="icon-btn">
+			<el-icon>
+				<Location />
+			</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-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>
+</template>
+
+<script setup>
+import { computed, 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'
+
+defineOptions({
+	name: 'LayoutUserbar',
+})
+
+const router = useRouter()
+const userStore = useUserStore()
+const i18nStore = useI18nStore()
+
+// 全屏状态
+const isFullScreen = ref(false)
+
+// 消息数量
+const messageCount = ref(0)
+
+// 当前语言
+const currentLanguage = computed(() => i18nStore.locale)
+
+// 处理下拉菜单命令
+const handleCommand = (command) => {
+	switch (command) {
+		case 'home':
+			router.push('/')
+			break
+		case 'profile':
+			router.push('/profile')
+			break
+		case 'settings':
+			router.push('/settings')
+			break
+		case 'logout':
+			handleLogout()
+			break
+	}
+}
+
+// 退出登录
+const handleLogout = () => {
+	ElMessageBox.confirm('确定要退出登录吗？', '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(() => {
+			userStore.logout()
+			router.push('/login')
+			ElMessage.success('退出成功')
+		})
+		.catch(() => {
+			// 取消退出
+		})
+}
+
+// 切换全屏
+const toggleFullScreen = () => {
+	if (!document.fullscreenElement) {
+		document.documentElement.requestFullscreen()
+		isFullScreen.value = true
+	} else {
+		if (document.exitFullscreen) {
+			document.exitFullscreen()
+			isFullScreen.value = false
+		}
+	}
+}
+
+// 监听全屏变化
+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('主题切换成功')
+}
+
+onMounted(() => {
+	document.addEventListener('fullscreenchange', handleFullScreenChange)
+})
+
+onUnmounted(() => {
+	document.removeEventListener('fullscreenchange', handleFullScreenChange)
+})
+</script>
+
+<style lang="scss" scoped>
+.userbar-container {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+
+	.avatar-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		cursor: pointer;
+		padding: 4px 8px;
+		border-radius: 4px;
+		transition: background-color 0.3s;
+
+		&:hover {
+			background-color: var(--el-fill-color-light);
+		}
+
+		.username {
+			font-size: 14px;
+			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;
+
+			.avatar-wrapper:hover & {
+				transform: rotate(180deg);
+			}
+		}
+	}
+
+	.icon-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		cursor: pointer;
+		border-radius: 4px;
+		transition: background-color 0.3s;
+
+		.el-icon {
+			font-size: 18px;
+			color: var(--el-text-color-regular);
+		}
+
+		&:hover {
+			background-color: var(--el-fill-color-light);
+
+			.el-icon {
+				color: var(--el-color-primary);
+			}
+		}
+
+		:deep(.el-badge__content) {
+			transform: translateY(-8px) translateX(8px);
+		}
+	}
+}
+</style>
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 597e96a..d8d7249 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -1,59 +1,426 @@
 <template><el-container class="app-wrapper" :class="layoutClass">
 	<!-- 默认布局：左侧双栏布局 -->
 	<template v-if="layoutMode === 'default'">
-		<el-aside width="60px">
-			<!-- logo -->
-			<div class="logo"></div>
-			<!-- 一级菜单 -->
+		<!-- 一级菜单栏 (窄侧边栏) -->
+		<el-aside width="60px" class="first-sidebar">
+			<div class="logo-mini">
+				<img v-if="logo" :src="logo" alt="logo" />
+				<span v-else class="logo-text-mini">{{ logoText }}</span>
+			</div>
 			<div class="menu-list">
-				<div class="item">
-					图标
-					文字
+				<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>
+					<span class="menu-text">{{ menu.meta?.title }}</span>
 				</div>
 			</div>
 		</el-aside>
-		<el-aside>
-			<el-menu default-active="2" @open="handleOpen" @close="handleClose">
-				<menu />
-			</el-menu>
+
+		<!-- 二级菜单栏 -->
+		<el-aside :width="sidebarCollapsed ? '60px' : '220px'" class="second-sidebar">
+			<div v-if="!sidebarCollapsed" class="logo">
+				<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-aside>
-		<el-container>
-			<el-header>
-				<breadcrumb />
-				<userbar />
+
+		<!-- 主内容区 -->
+		<el-container class="main-container">
+			<el-header class="app-header">
+				<div class="header-left">
+					<el-icon class="collapse-icon" @click="toggleSidebar">
+						<component :is="sidebarCollapsed ? 'Expand' : 'Fold'" />
+					</el-icon>
+					<breadcrumb v-if="showBreadcrumb" />
+				</div>
+				<div class="header-right">
+					<userbar />
+				</div>
 			</el-header>
-			<el-main><router-view /></el-main>
+			<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" />
+						<iframe v-else :src="route.meta.link" class="iframe-container" />
+					</keep-alive>
+				</router-view>
+			</el-main>
 		</el-container>
 	</template>
+
 	<!-- Menu布局：左侧菜单栏布局 -->
 	<template v-else-if="layoutMode === 'menu'">
-		<el-aside>
-			<!-- logo+系统名称 -->
-			<div class="logo"></div>
-			<el-menu default-active="2" @open="handleOpen" @close="handleClose">
-				<menu />
-			</el-menu>
+		<el-aside :width="sidebarCollapsed ? '60px' : '220px'" class="menu-sidebar">
+			<div v-if="!sidebarCollapsed" class="logo">
+				<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-aside>
-		<el-container>
-			<el-header>
-				<breadcrumb />
-				<userbar />
+		<el-container class="main-container">
+			<el-header class="app-header">
+				<div class="header-left">
+					<el-icon class="collapse-icon" @click="toggleSidebar">
+						<component :is="sidebarCollapsed ? 'Expand' : 'Fold'" />
+					</el-icon>
+					<breadcrumb v-if="showBreadcrumb" />
+				</div>
+				<div class="header-right">
+					<tags v-if="showTags" />
+					<userbar />
+				</div>
 			</el-header>
-			<el-main><router-view /></el-main>
+			<el-main class="app-main">
+				<router-view v-slot="{ Component, route }">
+					<keep-alive :include="cachedViews">
+						<component v-if="!route.meta.link" :is="Component" :key="refreshKey" />
+						<iframe v-else :src="route.meta.link" class="iframe-container" />
+					</keep-alive>
+				</router-view>
+			</el-main>
 		</el-container>
 	</template>
+
 	<!-- Top布局：顶部菜单栏布局 -->
 	<template v-else-if="layoutMode === 'top'">
-		<el-header>
-			<breadcrumb />
-			<userbar />
-		</el-header>
-		<el-main><router-view /></el-main>
+		<el-container class="main-container">
+			<el-header class="top-header">
+				<div class="header-left">
+					<div class="logo">
+						<img v-if="logo" :src="logo" alt="logo" />
+						<span class="logo-text">{{ logoText }}</span>
+					</div>
+					<menu-component mode="horizontal" />
+				</div>
+				<div class="header-right">
+					<tags v-if="showTags" />
+					<userbar />
+				</div>
+			</el-header>
+			<el-main class="app-main">
+				<router-view v-slot="{ Component, route }">
+					<keep-alive :include="cachedViews">
+						<component v-if="!route.meta.link" :is="Component" :key="refreshKey" />
+						<iframe v-else :src="route.meta.link" class="iframe-container" />
+					</keep-alive>
+				</router-view>
+			</el-main>
+		</el-container>
 	</template>
-</el-container></template>
+</el-container>
+
+<!-- 设置组件 -->
+<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 Tags from './components/tags.vue'
+import Userbar from './components/userbar.vue'
+import Setting from './components/setting.vue'
+import config from '@/config'
+
 defineOptions({
 	name: 'AppLayouts',
 })
+
+const route = useRoute()
+const router = useRouter()
+const layoutStore = useLayoutStore()
+const userStore = useUserStore()
+
+// Logo 配置
+const logo = config.LOGO
+const logoText = config.APP_NAME
+
+// 布局相关状态
+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 cachedViews = computed(() => {
+	return viewTags.value
+		.filter((tag) => tag.meta?.keepAlive)
+		.map((tag) => tag.name)
+})
+
+// 父级菜单（一级菜单）
+const parentMenus = computed(() => {
+	const menus = userStore.getMenu() || []
+	return menus.filter((menu) => !menu.meta?.hidden && menu.children && menu.children.length > 0)
+})
+
+// 切换侧边栏
+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)
+		}
+	}
+}
+
+// 监听路由变化，自动更新选中的父菜单
+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
+				}
+			}
+		}
+
+		// 更新视图标签
+		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 },
+)
 </script>
+
+<style lang="scss" scoped>
+.app-wrapper {
+	width: 100%;
+	height: 100vh;
+	overflow: hidden;
+
+	// 通用侧边栏样式
+	.el-aside {
+		transition: width 0.28s;
+		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-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;
+			overflow-y: auto;
+			padding: 10px 0;
+
+			.menu-item {
+				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;
+
+				&:hover {
+					background-color: var(--el-fill-color-light);
+				}
+
+				&.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;
+				}
+			}
+		}
+	}
+
+	.second-sidebar {
+		.menu-scrollbar {
+			flex: 1;
+			overflow: hidden;
+		}
+	}
+}
+
+// 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;
+
+			.logo {
+				border: none;
+				padding: 0;
+				height: 60px;
+			}
+		}
+	}
+}
+
+// 侧边栏折叠状态
+.sidebar-collapsed {
+	.logo-text {
+		display: none !important;
+	}
+}
+</style>