feat: 样式暗黑/白天模式调整

src/styles/index.scss

@@ -156,6 +156,12 @@ div:focus {
 		padding: 0px;
 	}
 }
+
+.aside-box {
+	background-color: var(--el-bg-color) !important;
+	margin-right: 10px;
+}
+
 .content-warp {
 	flex: 1;
 	width: calc(100% - 210px);

src/views/setting/dict/index.vue

@@ -1,46 +1,48 @@
 <template>
 	<div class="pageWrap bgc">
-		<el-aside style="margin-right: 10px" width="200px">
-			<el-container style="height: 100%">
-				<el-header>
-					<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
-				</el-header>
-				<el-main style="flex-basis: 100%; padding: 0px">
-					<el-tree
-						ref="treeRef"
-						class="menu-tree"
-						:data="treeData"
-						node-key="id"
-						:current-node-key="''"
-						:highlight-current="true"
-						:expand-on-click-node="false"
-						:props="{ label: 'name' }"
-						default-expand-all
-						:filter-node-method="filterNode"
-						@node-click="leftTreeClick"
-					>
-						<template #default="{ node, data }">
-							<span class="custom-tree-node">
-								<span class="label">{{ node.label }}</span>
-								<span class="code">{{ data.code }}</span>
-								<span class="do">
-									<el-icon @click.stop="dicEdit(data)"><Edit /></el-icon>
-									<el-icon @click.stop="dictDel(node, data)"><Delete /></el-icon>
+		<div class="aside-box">
+			<el-aside width="200px" style="height: 100%">
+				<el-container style="height: 100%">
+					<el-header>
+						<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
+					</el-header>
+					<el-main style="flex-basis: 100%; padding: 0px">
+						<el-tree
+							ref="treeRef"
+							class="menu-tree"
+							:data="treeData"
+							node-key="id"
+							:current-node-key="''"
+							:highlight-current="true"
+							:expand-on-click-node="false"
+							:props="{ label: 'name' }"
+							default-expand-all
+							:filter-node-method="filterNode"
+							@node-click="leftTreeClick"
+						>
+							<template #default="{ node, data }">
+								<span class="custom-tree-node">
+									<span class="label">{{ node.label }}</span>
+									<span class="code">{{ data.code }}</span>
+									<span class="do">
+										<el-icon @click.stop="dicEdit(data)"><Edit /></el-icon>
+										<el-icon @click.stop="dictDel(node, data)"><Delete /></el-icon>
+									</span>
 								</span>
-							</span>
-						</template>
-					</el-tree>
-				</el-main>
-				<el-footer style="height: 51px">
-					<el-button type="primary" style="width: 100%" @click="addHandler('tree')">
-						<el-icon>
-							<Plus />
-						</el-icon>
-						字典分类
-					</el-button>
-				</el-footer>
-			</el-container>
-		</el-aside>
+							</template>
+						</el-tree>
+					</el-main>
+					<el-footer style="height: 51px">
+						<el-button type="primary" style="width: 100%" @click="addHandler('tree')">
+							<el-icon>
+								<Plus />
+							</el-icon>
+							字典分类
+						</el-button>
+					</el-footer>
+				</el-container>
+			</el-aside>
+		</div>
 		<div class="content-warp flex-column-page-wrap">
 			<!-- 公用搜索组件 -->
 			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"></LeSearchForm>

src/views/setting/menu/index.vue

@@ -1,43 +1,46 @@
 <template>
 	<div class="pageWrap bgc">
-		<el-aside v-loading="menuLoading" width="300px" style="margin-right: 10px">
-			<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>
-				</header>
-				<el-main class="nopadding">
-					<el-tree
-						ref="menuRef"
-						class="menu-tree"
-						node-key="id"
-						:data="menuList"
-						:props="menuProps"
-						highlight-current
-						:expand-on-click-node="false"
-						check-strictly
-						show-checkbox
-						:filter-node-method="menuFilterNode"
-						@node-click="menuClick"
-					>
-						<template #default="{ node, data }">
-							<span class="custom-tree-node el-tree-node__label">
-								<span class="label">
-									{{ generateTitle(node.label) }}
+		<div class="aside-box">
+			<el-aside v-loading="menuLoading" width="300px" style="height: 100%">
+				<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>
+					</header>
+					<el-main class="nopadding">
+						<el-tree
+							ref="menuRef"
+							class="menu-tree"
+							node-key="id"
+							:data="menuList"
+							:props="menuProps"
+							highlight-current
+							:expand-on-click-node="false"
+							check-strictly
+							show-checkbox
+							:filter-node-method="menuFilterNode"
+							@node-click="menuClick"
+						>
+							<template #default="{ node, data }">
+								<span class="custom-tree-node el-tree-node__label">
+									<span class="label">
+										{{ generateTitle(node.label) }}
+									</span>
+									<span class="do">
+										<el-icon @click.stop="add(node, data)"><Plus /></el-icon>
+									</span>
 								</span>
-								<span class="do">
-									<el-icon @click.stop="add(node, data)"><Plus /></el-icon>
-								</span>
-							</span>
-						</template>
-					</el-tree>
-				</el-main>
-				<el-footer style="height: 51px">
-					<el-button :icon="Refresh" @click="getMenu()"></el-button>
-					<el-button type="primary" :icon="Plus" @click="add()"></el-button>
-					<el-button type="danger" plain :icon="Delete" @click="delMenu"></el-button>
-				</el-footer>
-			</el-container>
-		</el-aside>
+							</template>
+						</el-tree>
+					</el-main>
+					<el-footer style="height: 51px">
+						<el-button :icon="Refresh" @click="getMenu()"></el-button>
+						<el-button type="primary" :icon="Plus" @click="add()"></el-button>
+						<el-button type="danger" plain :icon="Delete" @click="delMenu"></el-button>
+					</el-footer>
+				</el-container>
+			</el-aside>
+		</div>
+
 		<el-container class="container-bg">
 			<el-main ref="mainRef" class="nopadding" style="padding: 20px">
 				<save ref="saveRef" :menu="menuList"></save>
@@ -163,6 +166,13 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-aside) {
+	&.aside-box {
+		background-color: var(--el-bg-color-page) !important;
+		margin-right: 10px;
+	}
+}
+
 .nopadding {
 	padding: 0px;
 }

src/views/setting/user/index.vue

@@ -1,27 +1,29 @@
 <template>
 	<div class="pageWrap bgc">
-		<el-aside style="margin-right: 10px" width="200px">
-			<el-container>
-				<el-header>
-					<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
-				</el-header>
-				<el-main class="nopadding">
-					<el-tree
-						ref="treeRef"
-						class="menu-tree"
-						:data="treeData"
-						node-key="id"
-						:current-node-key="''"
-						:highlight-current="true"
-						:expand-on-click-node="false"
-						:props="defaultProps"
-						default-expand-all
-						:filter-node-method="filterNode"
-						@node-click="roleClick"
-					/>
-				</el-main>
-			</el-container>
-		</el-aside>
+		<div class="aside-box">
+			<el-aside width="200px" style="height: 100%">
+				<el-container>
+					<el-header>
+						<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
+					</el-header>
+					<el-main class="nopadding">
+						<el-tree
+							ref="treeRef"
+							class="menu-tree"
+							:data="treeData"
+							node-key="id"
+							:current-node-key="''"
+							:highlight-current="true"
+							:expand-on-click-node="false"
+							:props="defaultProps"
+							default-expand-all
+							:filter-node-method="filterNode"
+							@node-click="roleClick"
+						/>
+					</el-main>
+				</el-container>
+			</el-aside>
+		</div>
 		<!--		<el-divider direction="vertical" style="height: 100%" />-->
 		<div class="content-warp flex-column-page-wrap">
 			<!-- 公用搜索组件 -->
@@ -481,6 +483,13 @@ watch(groupFilterText, val => {
 })
 </script>
 <style scoped lang="scss">
+:deep(.el-aside) {
+	&.aside-box {
+		background-color: var(--el-bg-color-page) !important;
+		margin-right: 10px;
+	}
+}
+
 .nopadding {
 	padding: 0px;
 }