feat: setting 模块

src/styles/index.scss

@@ -216,3 +216,15 @@ div:focus {
 		margin-right: 5px;
 	}
 }
+// 用于 类似 toolLeft 内嵌多个 el-button 排版 小屏兼容
+.btn-actions-flex-gap {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	gap: 8px 12px;
+	.el-button {
+		& + .el-button {
+			margin-left: 0;
+		}
+	}
+}

src/styles/lance-element/table.scss

@@ -291,6 +291,18 @@
 
 @media (max-width: 750px) {
 	.#{$prefix}table-warp {
+		/*.tableBody {
+			.toolBarWrap {
+				.toolLeft {
+
+					!*.el-button {
+						& + .el-button {
+							margin-left: 0;
+						}
+					}*!
+				}
+			}
+		}*/
 		.el-pagination {
 			--el-pagination-item-gap: 4px;
 			--el-pagination-font-size: 12px;

src/views/setting/dict/index.vue

@@ -487,4 +487,27 @@ watch(groupFilterText, val => {
 		width: 0;
 	}
 }
+@media (max-width: 750px) {
+	.pageWrap {
+		//overflow-y: auto;
+		flex-direction: column;
+		overflow-y: auto;
+		:deep(.aside-wrap) {
+			margin-bottom: 10px;
+			margin-right: 0;
+			//height: 50%;
+			.menu-card {
+				.el-card__body {
+					width: 100%;
+				}
+			}
+			.trigger-bar {
+				display: none;
+			}
+		}
+		.content-warp {
+			width: 100%;
+		}
+	}
+}
 </style>

src/views/setting/menu/index.vue

@@ -7,7 +7,7 @@
 			</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)">
+					<header style="padding: 10px 12px; border-bottom: 1px solid var(--el-border-color-light)">
 						<el-input v-model="menuFilterText" placeholder="输入关键字进行过滤" clearable></el-input>
 					</header>
 					<el-main class="nopadding">
@@ -46,7 +46,7 @@
 		</div>
 
 		<el-container class="container-bg">
-			<el-main ref="mainRef" class="nopadding" style="padding: 20px">
+			<el-main ref="mainRef">
 				<save ref="saveRef" :menu="menuList" @success-cb="getMenu()"></save>
 			</el-main>
 		</el-container>
@@ -217,10 +217,7 @@ 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 {
@@ -234,4 +231,20 @@ onMounted(() => {
 		}
 	}
 }
+@media (max-width: 750px) {
+	.pageWrap {
+		flex-direction: column;
+		overflow-y: auto;
+		:deep(.aside-wrap) {
+			margin-bottom: 10px;
+			margin-right: 0;
+			.local_aside {
+				width: 100%;
+			}
+			.trigger-bar {
+				display: none;
+			}
+		}
+	}
+}
 </style>

src/views/setting/role/index.vue

@@ -14,11 +14,13 @@
 				:columns="activeColumns"
 			>
 				<template #toolLeft>
-					<el-button plain :icon="Plus" type="primary" @click="addHandler">新增</el-button>
-					<el-button plain :icon="Key" :disabled="!curSelectionRows.length || curSelectionRows.length !== 1" @click="visiblePermission = true"
-						>权限设置</el-button
-					>
-					<el-button plain :icon="Delete" :disabled="curSelectionRows.length === 0" type="danger" @click="batch_del">删除</el-button>
+					<div class="btn-actions-flex-gap">
+						<el-button plain :icon="Plus" type="primary" @click="addHandler">新增</el-button>
+						<el-button plain :icon="Key" :disabled="!curSelectionRows.length || curSelectionRows.length !== 1" @click="visiblePermission = true"
+							>权限设置</el-button
+						>
+						<el-button plain :icon="Delete" :disabled="curSelectionRows.length === 0" type="danger" @click="batch_del">删除</el-button>
+					</div>
 				</template>
 
 				<template #statusSlot="scope">
@@ -334,3 +336,13 @@ watch(groupFilterText, val => {
 	treeRef.value!.filter(val)
 })
 </script>
+<style lang="scss" scoped>
+@media (max-width: 750px) {
+	.pageWrap {
+		overflow-y: auto;
+	}
+	.content-warp {
+		min-height: 120%;
+	}
+}
+</style>

src/views/setting/user/index.vue

@@ -49,11 +49,13 @@
 				:columns="activeColumns"
 			>
 				<template #toolLeft>
-					<el-button plain :icon="Plus" type="primary" @click="addHandler">新增</el-button>
-					<el-button plain :icon="Delete" :disabled="curSelectionRows.length === 0" type="danger" @click="batch_del">删除</el-button>
-					<el-button plain :icon="User" :disabled="curSelectionRows.length === 0" @click="chooseThing('role')">分配角色</el-button>
-					<el-button plain :icon="Connection" :disabled="curSelectionRows.length === 0" @click="chooseThing('department')">分配部门</el-button>
-					<el-button plain :icon="Key" :disabled="curSelectionRows.length === 0" @click="resetPwdVisibile = true">密码重置</el-button>
+					<div class="btn-actions-flex-gap">
+						<el-button plain :icon="Plus" type="primary" @click="addHandler">新增</el-button>
+						<el-button plain :icon="Delete" :disabled="curSelectionRows.length === 0" type="danger" @click="batch_del">删除</el-button>
+						<el-button plain :icon="User" :disabled="curSelectionRows.length === 0" @click="chooseThing('role')">分配角色</el-button>
+						<el-button plain :icon="Connection" :disabled="curSelectionRows.length === 0" @click="chooseThing('department')">分配部门</el-button>
+						<el-button plain :icon="Key" :disabled="curSelectionRows.length === 0" @click="resetPwdVisibile = true">密码重置</el-button>
+					</div>
 				</template>
 
 				<template #filterAvatarSlot="scope">
@@ -541,6 +543,15 @@ watch(groupFilterText, val => {
 .content-warp {
 	// 300 + 28
 	width: calc(100% - 328px);
+	/*.actions {
+		//margin-top: 10px;
+		.el-button {
+			//:deep(.el-button) {
+			& + .el-button {
+				margin-left: 0;
+			}
+		}
+	}*/
 }
 .aside-wrap--collapsed {
 	margin-left: -10px;
@@ -548,4 +559,36 @@ watch(groupFilterText, val => {
 		width: 0;
 	}
 }
+@media (max-width: 750px) {
+	.pageWrap {
+		flex-direction: column;
+		overflow-y: auto;
+		:deep(.aside-wrap) {
+			margin-bottom: 10px;
+			margin-right: 0;
+			//height: 50%;
+			.menu-card {
+				.el-card__body {
+					width: 100%;
+				}
+			}
+			.trigger-bar {
+				display: none;
+			}
+		}
+
+		.content-warp {
+			width: 100%;
+			min-height: 130%;
+			/*:deep(.le-table-warp) {
+				.tableBody {
+					min-height: 500px;
+				}
+				!*.tableParentEl {
+					min-height: 300px;
+				}*!
+			}*/
+		}
+	}
+}
 </style>