Layout 布局组件快速搭建
<template>
<div class="layout-container">
<el-container>
<!-- 左侧边栏 -->
<el-aside>
<!-- Logo 组件 -->
<Logo class="os-logo"/>
<!-- 菜单组件 -->
<Menu class="menu-classic" />
</el-aside>
<el-container>
<!-- 页面顶部区域 -->
<el-header>
<!-- 头部内容区域 -->
<div class="header-content">
<!-- 折叠按钮 -->
<svg-icon class="fold-expand-button" name="Fold" />
<!-- 面包屑导航 -->
<Breadcrumb />
</div>
<!-- 头部菜单区域 -->
<div class="header-menu">
<!-- 语言切换下拉菜单 -->
<el-dropdown :hide-on-click="false">
<svg-icon name="Earth" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>简体中文</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- 搜索按钮 -->
<svg-icon class="cursor-pointer" name="Search" />
<!-- 主题配置按钮 -->
<el-tooltip content="主题配置" placement="bottom">
<svg-icon class="cursor-pointer" name="Theme" @click="toggleThemeConfig" />
</el-tooltip>
<!-- 锁屏按钮 -->
<el-tooltip content="锁屏" placement="bottom">
<svg-icon class="cursor-pointer" name="Lock" />
</el-tooltip>
<!-- 全屏按钮 -->
<el-tooltip content="全屏" placement="bottom">
<svg-icon class="cursor-pointer" name="FullScreen" />
</el-tooltip>
<!-- 用户信息下拉菜单 -->
<el-dropdown>
<div class="flex items-center gap-1">
<el-tag type="primary">Admin</el-tag>
<el-avatar src="/0/88/" />
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="profile">
<template #default>
<div class="flex items-center gap-1">
<svg-icon name="User" />
<span>个人中心</span>
</div>
</template>
</el-dropdown-item>
<el-dropdown-item command="logout">
<template #default>
<div class="flex items-center gap-1">
<svg-icon name="Logout" />
<span>退出登录</span>
</div>
</template>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-header>
<!-- 标签栏 -->
<tab-bar class="tab-container" />
<!-- 主内容区域 -->
<el-main>
<Main />
</el-main>
<!-- 底部页脚 -->
<el-footer>
<Footer />
</el-footer>
</el-container>
</el-container>
</div>
</template>