tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ layout 布局代码重构优化，精简重复的css代码

Browse Source
This commit is contained in:
ray
2025-02-20 18:41:47 +08:00
parent a076e2eaa5
commit 60a4d28162
1 changed files with 135 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
src/layout/index.vue
View File

@@ -1,44 +1,41 @@
<template>
<div class="wh-full" :class="classObj">
<!-- 遮罩层 -->
<div
v-if="isMobile && isOpenSidebar"
class="wh-full fixed-lt z-999 bg-black bg-opacity-30"
@click="handleOutsideClick"
/>
<div class="layout" :class="layoutClass">
<!-- 移动端遮罩层 -->
<div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="handleCloseSidebar" />
<!-- 公用侧边栏 -->
<Sidebar class="sidebar-container" />
<!-- 侧边栏 -->
<Sidebar class="layout__sidebar" />
<!-- 混合布局 -->
<div v-if="layout === LayoutEnum.MIX" class="mix-container">
<div class="mix-container-sidebar">
<div v-if="layout === LayoutEnum.MIX" class="layout__container">
<!-- 左侧菜单栏 -->
<div class="layout__sidebar--left">
<el-scrollbar>
<SidebarMenu :data="mixedLayoutLeftRoutes" :base-path="activeTopMenuPath" />
</el-scrollbar>
<div class="sidebar-toggle">
<hamburger :is-active="appStore.sidebar.opened" @toggle-click="toggleSidebar" />
<div class="layout__sidebar-toggle">
<hamburger :is-active="appStore.sidebar.opened" @toggle-click="handleToggleSidebar" />
</div>
</div>
<div :class="{ hasTagsView: isShowTagsView }" class="main-container">
<!-- 主内容区域 -->
<div :class="{ hasTagsView: isShowTagsView }" class="layout__main">
<TagsView v-if="isShowTagsView" />
<AppMain />
<Settings v-if="defaultSettings.showSettings" />
<!-- 返回顶部 -->
<!-- 返回顶部按钮 -->
<el-backtop target=".app-main">
<div class="i-svg:backtop w-6 h-6" />
</el-backtop>
</div>
</div>
<!-- 左侧和顶部布局 -->
<div v-else :class="{ hasTagsView: isShowTagsView }" class="main-container">
<!-- 左侧或顶部布局的主内容区 -->
<div v-else :class="{ hasTagsView: isShowTagsView }" class="layout__main">
<NavBar v-if="layout === LayoutEnum.LEFT" />
<TagsView v-if="isShowTagsView" />
<AppMain />
<Settings v-if="defaultSettings.showSettings" />
<!-- 返回顶部 -->
<!-- 返回顶部按钮 -->
<el-backtop target=".app-main">
<div class="i-svg:backtop w-6 h-6" />
</el-backtop>
@@ -47,11 +44,17 @@
</template>
<script setup lang="ts">
// 状态管理
import { useAppStore, useSettingsStore, usePermissionStore } from "@/store";
// 配置
import defaultSettings from "@/settings";
// 枚举
import { DeviceEnum } from "@/enums/DeviceEnum";
import { LayoutEnum } from "@/enums/LayoutEnum";
// 组件
import NavBar from "./components/NavBar/index.vue";
const appStore = useAppStore();
@@ -59,154 +62,161 @@ const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const width = useWindowSize().width;
const WIDTH_DESKTOP = 992; // 响应式布局容器固定宽度 大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
const isOpenSidebar = computed(() => appStore.sidebar.opened);
const isShowTagsView = computed(() => settingsStore.tagsView); // 是否显示tagsView
const layout = computed(() => settingsStore.layout); // 布局模式 left top mix
const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活path
const mixedLayoutLeftRoutes = computed(() => permissionStore.mixedLayoutLeftRoutes); // 混合布局左侧菜单
// 常量
const WIDTH_DESKTOP = 992; // 响应式布局容器固定宽度（大屏 >=1200px，中屏 >=992px，小屏 >=768px）
// 计算属性
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE); // 是否为移动设备
const isSidebarOpen = computed(() => appStore.sidebar.opened); // 侧边栏是否展开
const isShowTagsView = computed(() => settingsStore.tagsView); // 是否显示标签视图
const layout = computed(() => settingsStore.layout); // 当前布局模式（left、top、mix）
const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活路径
const mixedLayoutLeftRoutes = computed(() => permissionStore.mixedLayoutLeftRoutes); // 混合布局左侧菜单路由
// 监听顶部菜单激活路径变化，更新混合布局左侧菜单路由
watch(
() => activeTopMenuPath.value,
(newVal: string) => {
permissionStore.setMixedLayoutLeftRoutes(newVal);
},
{
deep: true,
immediate: true,
}
{ deep: true, immediate: true }
);
const classObj = computed(() => ({
hideSidebar: !appStore.sidebar.opened,
openSidebar: appStore.sidebar.opened,
mobile: appStore.device === DeviceEnum.MOBILE,
[`layout-${settingsStore.layout}`]: true,
}));
// 监听窗口宽度变化，调整设备类型和侧边栏状态
watchEffect(() => {
appStore.toggleDevice(width.value < WIDTH_DESKTOP ? DeviceEnum.MOBILE : DeviceEnum.DESKTOP);
if (width.value >= WIDTH_DESKTOP) {
const isDesktop = width.value >= WIDTH_DESKTOP;
appStore.toggleDevice(isDesktop ? DeviceEnum.DESKTOP : DeviceEnum.MOBILE);
if (isDesktop) {
appStore.openSideBar();
} else {
appStore.closeSideBar();
}
});
function handleOutsideClick() {
appStore.closeSideBar();
}
function toggleSidebar() {
appStore.toggleSidebar();
}
// 监听路由变化，如果是移动设备且侧边栏展开，则关闭侧边栏
const route = useRoute();
watch(route, () => {
if (isMobile.value && isOpenSidebar.value) {
if (isMobile.value && isSidebarOpen.value) {
appStore.closeSideBar();
}
});
// 计算属性：布局样式
const layoutClass = computed(() => ({
hideSidebar: !appStore.sidebar.opened,
openSidebar: appStore.sidebar.opened,
mobile: appStore.device === DeviceEnum.MOBILE,
[`layout-${settingsStore.layout}`]: true,
}));
/**
* 处理遮罩层点击事件，关闭侧边栏
*/
function handleCloseSidebar() {
appStore.closeSideBar();
}
/**
* 处理切换侧边栏的展开/收起状态
*/
function handleToggleSidebar() {
appStore.toggleSidebar();
}
</script>
<style lang="scss" scoped>
.sidebar-container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 999;
width: $sidebar-width;
background-color: $menu-background;
transition: width 0.28s;
.layout {
width: 100%;
height: 100%;
:deep(.el-menu) {
border: none;
&__overlay {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
&__sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 999;
width: $sidebar-width;
background-color: $menu-background;
transition: width 0.28s;
:deep(.el-menu) {
border: none;
}
}
&__main {
position: relative;
height: 100%;
margin-left: $sidebar-width;
overflow-y: auto;
transition: margin-left 0.28s;
.fixed-header {
position: sticky;
top: 0;
z-index: 9;
transition: width 0.28s;
}
}
}
.main-container {
position: relative;
height: 100%;
margin-left: $sidebar-width;
overflow-y: auto;
transition: margin-left 0.28s;
// 占位符选择器
%layout__sidebar--horizontal {
width: 100% !important;
height: $navbar-height;
.fixed-header {
position: sticky;
top: 0;
z-index: 9;
transition: width 0.28s;
:deep(.el-scrollbar) {
flex: 1;
height: $navbar-height;
}
:deep(.el-menu-item),
:deep(.el-sub-menu__title),
:deep(.el-menu--horizontal) {
height: $navbar-height;
line-height: $navbar-height;
}
}
.layout-top {
.sidebar-container {
.layout__sidebar {
position: sticky;
z-index: 999;
display: flex;
width: 100% !important;
height: $navbar-height;
:deep(.el-scrollbar) {
flex: 1;
height: $navbar-height;
}
:deep(.el-menu-item),
:deep(.el-sub-menu__title),
:deep(.el-menu--horizontal) {
height: $navbar-height;
line-height: $navbar-height;
}
:deep(.el-menu--collapse) {
width: 100%;
}
@extend %layout__sidebar--horizontal;
}
.main-container {
.layout__main {
height: calc(100vh - $navbar-height);
margin-left: 0;
}
}
.layout-mix {
.sidebar-container {
width: 100% !important;
height: $navbar-height;
:deep(.el-scrollbar) {
flex: 1;
height: $navbar-height;
}
:deep(.el-menu-item),
:deep(.el-sub-menu__title),
:deep(.el-menu--horizontal) {
height: $navbar-height;
line-height: $navbar-height;
}
:deep(.el-menu--horizontal.el-menu) {
border: none;
}
.layout__sidebar {
@extend %layout__sidebar--horizontal;
}
.mix-container {
.layout__container {
display: flex;
height: 100%;
padding-top: $navbar-height;
.mix-container-sidebar {
.layout__sidebar--left {
position: relative;
width: $sidebar-width;
height: 100%;
background-color: var(--menu-background);
:deep(.el-scrollbar) {
// 50px 是底部收缩按钮的高度
height: calc(100vh - $navbar-height - 50px);
}
@@ -215,7 +225,7 @@ watch(route, () => {
border: none;
}
.sidebar-toggle {
.layout__sidebar-toggle {
position: absolute;
bottom: 0;
display: flex;
@@ -224,19 +234,10 @@ watch(route, () => {
width: 100%;
height: 50px;
line-height: 50px;
box-shadow: 0 0 6px -2px var(--el-color-primary);
div:hover {
background-color: var(--menu-background);
}
:deep(svg) {
color: var(--el-color-primary) !important;
}
}
}
.main-container {
.layout__main {
flex: 1;
min-width: 0;
margin-left: 0;
@@ -246,24 +247,24 @@ watch(route, () => {
.hideSidebar {
&.layout-left {
.main-container {
.layout__main {
margin-left: $sidebar-width-collapsed;
}
}
&.layout-top {
.main-container {
.layout__main {
margin-left: 0;
}
}
&.layout-mix {
.sidebar-container {
.layout__sidebar {
width: 100% !important;
}
.mix-container {
&-sidebar {
.layout__container {
.layout__sidebar--left {
width: $sidebar-width-collapsed;
}
}
@@ -271,22 +272,22 @@ watch(route, () => {
}
.layout-left.hideSidebar {
.sidebar-container {
.layout__sidebar {
width: $sidebar-width-collapsed !important;
}
.main-container {
.layout__main {
margin-left: $sidebar-width-collapsed;
}
&.mobile {
.sidebar-container {
.layout__sidebar {
pointer-events: none;
transform: translate3d(-$sidebar-width, 0, 0);
transition-duration: 0.3s;
}
.main-container {
.layout__main {
margin-left: 0;
}
}