feat: 菜单管理 字典管理 收缩 支持

src/views/setting/dict/index.vue

@@ -1,7 +1,11 @@
 <template>
 	<div class="pageWrap bgc">
-		<div class="aside-box-system">
-			<el-aside width="200px" style="height: 100%">
+		<div :class="['h-full mr-2 aside-wrap', isCollapsed ? 'aside-wrap--collapsed' : '']">
+			<div :class="['trigger-bar', isCollapsed ? 'trigger-bar--collapsed' : '']" @click="isCollapsed = !isCollapsed">
+				<div class="bar__top"></div>
+				<div class="bar__bottom"></div>
+			</div>
+			<el-aside class="local_aside">
 				<el-container style="height: 100%">
 					<el-header>
 						<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
@@ -97,6 +101,7 @@ import { ElMessage, ElTree, ElMessageBox } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete, Edit } from '@element-plus/icons-vue'
 
+const isCollapsed = ref(false)
 const visible = ref(false) // 弹窗显示隐藏
 const isCreate = ref(true)
 const activeData = ref({})
@@ -474,4 +479,21 @@ watch(groupFilterText, val => {
 .custom-tree-node:hover .do {
 	display: inline-block;
 }
+.content-warp {
+	// 260 + 28
+	width: calc(100% - 288px);
+}
+.aside-wrap {
+	background-color: var(--el-bg-color);
+	.local_aside {
+		height: 100%;
+		width: 260px;
+	}
+	&--collapsed {
+		margin-left: -10px;
+		.local_aside {
+			width: 0;
+		}
+	}
+}
 </style>

src/views/setting/menu/index.vue

@@ -1,7 +1,11 @@
 <template>
 	<div class="pageWrap bgc">
-		<div class="aside-box-system">
-			<el-aside v-loading="menuLoading" width="300px" style="height: 100%">
+		<div :class="['h-full mr-2 aside-wrap', isCollapsed ? 'aside-wrap--collapsed' : '']">
+			<div :class="['trigger-bar', isCollapsed ? 'trigger-bar--collapsed' : '']" @click="isCollapsed = !isCollapsed">
+				<div class="bar__top"></div>
+				<div class="bar__bottom"></div>
+			</div>
+			<el-aside class="local_aside" v-loading="menuLoading">
 				<el-container style="height: 100%">
 					<header style="padding: 13px 15px; border-bottom: 1px solid var(--el-border-color-light)">
 						<el-input v-model="menuFilterText" placeholder="输入关键字进行过滤" clearable></el-input>
@@ -56,6 +60,7 @@ import { Plus, Refresh, Delete } from '@element-plus/icons-vue'
 import { onMounted, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { generateTitle } from '@/utils/i18n'
+const isCollapsed = ref(false)
 const menuLoading = ref(false)
 const menuList = ref([])
 const menuFilterText = ref('')
@@ -212,4 +217,21 @@ onMounted(() => {
 .custom-tree-node:hover .do {
 	display: inline-block;
 }
+.content-warp {
+	// 300 + 28
+	width: calc(100% - 328px);
+}
+.aside-wrap {
+	background-color: var(--el-bg-color);
+	.local_aside {
+		height: 100%;
+		width: 300px;
+	}
+	&--collapsed {
+		margin-left: -10px;
+		.local_aside {
+			width: 0;
+		}
+	}
+}
 </style>