!1876 修复暗色模式时，部分页面背景出现不必要的白色

Merge pull request !1876 from 夜鹰/bugfix/splitter

Web/src/layout/footer/index.vue

@@ -21,7 +21,7 @@ const { themeConfig } = storeToRefs(storesThemeConfig);
 	display: flex;
     line-height: 30px;
     height: 30px;
-    background: #fff;
+    background: var(--el-bg-color);
     border-top: 1px solid var(--el-border-color-light);
 
 	&-warp {

Web/src/theme/element.scss

@@ -545,3 +545,16 @@ $--el-table-text-color: #fb6d49;
 		}
 	}
 }
+
+
+/* Splitter 分隔面板
+------------------------------- */
+.smallbar-el-splitter {
+    .el-splitter-bar {
+        width: 8px !important;
+
+        .el-splitter-bar__dragger {
+            height: 100px !important;
+        }
+    }
+}

Web/src/views/system/cache/index.vue

@@ -4,8 +4,8 @@
 			<NoticeBar text="系统缓存数据管理，请慎重操作！" style="margin: 4px" />
 		</div>
 
-		<splitpanes class="default-theme">
-			<pane size="20">
+		<el-splitter class="smallbar-el-splitter">
+			<el-splitter-panel size="20%" :min="200">
 				<el-card shadow="hover" header="缓存列表" v-loading="state.loading" style="height: 100%" body-style="height:100%; overflow:auto">
 					<template #header>
 						<div class="card-header">
@@ -31,8 +31,8 @@
 						accordion
 					/>
 				</el-card>
-			</pane>
-			<pane size="80">
+			</el-splitter-panel>
+			<el-splitter-panel :min="200">
 				<el-card shadow="hover" header="缓存数据" v-loading="state.loading1" style="height: 100%" body-style="height:100%; overflow:auto">
 					<template #header>
 						<div class="card-header">
@@ -42,8 +42,8 @@
 					</template>
 					<vue-json-pretty :data="state.cacheValue" showLength showIcon showLineNumber showSelectController style="padding-bottom: 60px" />
 				</el-card>
-			</pane>
-		</splitpanes>
+			</el-splitter-panel>
+		</el-splitter>
 	</div>
 </template>
 
@@ -53,7 +53,7 @@ import { ElMessageBox, ElMessage, ElTree } from 'element-plus';
 import NoticeBar from '/@/components/noticeBar/index.vue';
 import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
-import { Splitpanes, Pane } from 'splitpanes';
+//import { Splitpanes, Pane } from 'splitpanes';
 import 'splitpanes/dist/splitpanes.css';
 
 import { getAPI } from '/@/utils/axios-utils';

Web/src/views/system/org/index.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="sys-org-container">
-        <splitpanes class="default-theme">
-            <pane size="20">
+        <el-splitter class="smallbar-el-splitter">
+            <el-splitter-panel size="20%" :min="200">
                 <OrgTree ref="orgTreeRef" @node-click="nodeClick" />
-            </pane>
-            <pane size="80" style="overflow: auto; display: flex; flex-direction: column; background-color: #fff;">
+            </el-splitter-panel>
+            <el-splitter-panel :min="200" style="overflow: auto; display: flex; flex-direction: column;">
                 <el-card shadow="hover" :body-style="{ padding: 5 }">
                     <el-form :model="state.queryParams" ref="queryForm" :inline="true">
                         <el-form-item label="机构名称">
@@ -64,8 +64,8 @@
                         </el-table-column>
                     </el-table>
                 </el-card>
-            </pane>
-        </splitpanes>
+            </el-splitter-panel>
+        </el-splitter>
 
         <EditOrg ref="editOrgRef" :title="state.editOrgTitle" :orgData="state.orgTreeData" @reload="handleQuery" />
     </div>
@@ -74,7 +74,7 @@
 <script lang="ts" setup name="sysOrg">
 import { onMounted, reactive, ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import { Splitpanes, Pane } from 'splitpanes';
+//import { Splitpanes, Pane } from 'splitpanes';
 import 'splitpanes/dist/splitpanes.css';
 import { getAPI } from '/@/utils/axios-utils';
 import { SysOrgApi } from '/@/api-services/api';

Web/src/views/system/region/index.vue

@@ -1,10 +1,10 @@
 <template>
 	<div class="sys-region-container">
-		<splitpanes class="default-theme">
-			<pane size="20">
+		<el-splitter class="smallbar-el-splitter">
+			<el-splitter-panel size="20%" :min="200">
 				<RegionTree ref="regionTreeRef" @node-click="nodeClick" />
-			</pane>
-			<pane size="80" style="overflow: auto; display: flex; flex-direction: column; background-color: #fff;">
+			</el-splitter-panel>
+			<el-splitter-panel :min="200" style="overflow: auto; display: flex; flex-direction: column;">
 				<el-card class="full-table" shadow="hover">
 					<el-form :model="state.queryParams" ref="queryForm" :inline="true">
 						<el-form-item label="行政名称">
@@ -49,8 +49,8 @@
 						layout="total, sizes, prev, pager, next, jumper"
 					/>
 				</el-card>
-			</pane>
-		</splitpanes>
+			</el-splitter-panel>
+		</el-splitter>
 
 		<EditRegion ref="editRegionRef" :title="state.editRegionTitle" @handleQuery="handleQuery" />
 	</div>
@@ -59,7 +59,7 @@
 <script lang="ts" setup name="sysRegion">
 import { onMounted, reactive, ref } from 'vue';
 import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
-import { Splitpanes, Pane } from 'splitpanes';
+//import { Splitpanes, Pane } from 'splitpanes';
 import 'splitpanes/dist/splitpanes.css';
 
 import RegionTree from '/@/views/system/region/component/regionTree.vue';

Web/src/views/system/stressTest/index.vue

@@ -3,8 +3,8 @@
 		<div>
 			<NoticeBar text="接口压测会占用服务器大量的内存资源，请慎重操作！" style="margin: 4px" />
 		</div>
-		<splitpanes class="default-theme overlay-hidden">
-			<pane size="20" class="vh100">
+		<el-splitter class="smallbar-el-splitter overlay-hidden">
+			<el-splitter-panel size="20%" :min="200">
 				<el-card class="vh80" shadow="hover" header="接口列表" v-loading="state.loading">
 					<el-row :gutter="35">
 						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb10">
@@ -37,8 +37,8 @@
 						</template>
 					</el-tree>
 				</el-card>
-			</pane>
-			<pane size="80" class="vh100">
+			</el-splitter-panel>
+			<el-splitter-panel :min="200">
 				<el-card class="main-container vh80" shadow="hover" header="缓存数据" v-loading="state.loading" body-style="height:100vh; overflow:auto">
 					<template #header>
 						<el-button type="primary" @click="showDialog(undefined)">开始测试</el-button>
@@ -105,8 +105,8 @@
 						</el-descriptions-item>
 					</el-descriptions>
 				</el-card>
-			</pane>
-		</splitpanes>
+			</el-splitter-panel>
+		</el-splitter>
 		<EditStressTest ref="editStressTestRef" @refreshData="refreshData" />
 	</div>
 </template>

Web/src/views/system/update/index.vue

@@ -187,7 +187,7 @@ onUnmounted(() => {
 .sys-update-container {
     display: flex;
     height: 100%;
-    background-color: #f0f2f5;
+    background-color: var(--next-bg-main-color);
 }
 
 .backup-list-description {
@@ -196,14 +196,14 @@ onUnmounted(() => {
 }
 
 .backup-list {
-    background-color: #ffffff;
+    background-color: var(--el-bg-color);
     padding: 20px;
     /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
     border-radius: 4px;
     transition: box-shadow 0.3s ease-in-out;
     max-height: 100%;
     overflow: hidden;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    border: var(--el-border);
 }
 
 .backup-items {
@@ -242,17 +242,17 @@ onUnmounted(() => {
     margin-left: 5px;
     display: flex;
     flex-direction: column;
-    background-color: #ffffff;
+    background-color: var(--el-bg-color);
     border-radius: 4px;
     /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
     transition: box-shadow 0.3s ease-in-out;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    border: var(--el-border);
 }
 
 .toolbar {
     /* margin-bottom: 5px; */
     padding: 5px 0;
-    background-color: #ffffff;
+    background-color: var(--el-bg-color);
     border-radius: 4px;
     /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
     display: flex;

Web/src/views/system/user/index.vue

@@ -1,10 +1,10 @@
 <template>
 	<div class="sys-user-container">
-		<splitpanes class="default-theme">
-			<pane size="20">
+		<el-splitter class="smallbar-el-splitter">
+			<el-splitter-panel size="20%" :min="200">
 				<OrgTree ref="orgTreeRef" @node-click="nodeClick" />
-			</pane>
-			<pane size="80" style="overflow: auto; display: flex; flex-direction: column; background-color: #fff;">
+			</el-splitter-panel>
+			<el-splitter-panel :min="200" style="overflow: auto; display: flex; flex-direction: column;">
                 <el-card shadow="hover" :body-style="{ padding: 5 }">
 					<el-form :model="state.queryParams" ref="queryForm" :inline="true">
 						<el-form-item label="账号">
@@ -117,8 +117,8 @@
 						:page-sizes="[10, 20, 50, 100]" size="small" background @size-change="handleSizeChange"
 						@current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
 				</el-card>
-			</pane>
-		</splitpanes>
+			</el-splitter-panel>
+		</el-splitter>
 
 		<EditUser ref="editUserRef" :title="state.editUserTitle" :orgData="state.orgTreeData" @handleQuery="handleQuery" />
 	</div>
@@ -131,7 +131,7 @@ import OrgTree from '/@/views/system/org/component/orgTree.vue';
 import EditUser from '/@/views/system/user/component/editUser.vue';
 import ModifyRecord from '/@/components/table/modifyRecord.vue';
 import CallBar from '/@/components/callTel/callBar.vue';
-import { Splitpanes, Pane } from 'splitpanes';
+//import { Splitpanes, Pane } from 'splitpanes';
 import 'splitpanes/dist/splitpanes.css';
 import { getAPI } from '/@/utils/axios-utils';
 import { SysUserApi, SysOrgApi } from '/@/api-services/api';