From f84a6fc50a9707b8d661d0c95c45274bc0be66cb Mon Sep 17 00:00:00 2001
From: zuohuaijun <zuohuaijun@163.com>
Date: Sat, 3 Aug 2024 02:11:21 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=98=8E1=E3=80=81=E6=8B=86=E5=88=86?=
 =?UTF-8?q?=E7=AA=97=E6=A0=BC=E7=BB=84=E4=BB=B6=E8=B0=83=E6=95=B4=20=202?=
 =?UTF-8?q?=E3=80=81=E8=8F=9C=E5=8D=95=E5=92=8C=E7=BB=84=E7=BB=87=E6=A0=91?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=E9=BB=98=E8=AE=A4=E5=B7=A6=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/src/views/system/cache/index.vue  | 74 ++++++++++++---------------
 Web/src/views/system/menu/index.vue   |  2 +-
 Web/src/views/system/org/index.vue    | 17 +++---
 Web/src/views/system/region/index.vue | 15 +++---
 Web/src/views/system/user/index.vue   |  6 +--
 5 files changed, 55 insertions(+), 59 deletions(-)

diff --git a/Web/src/views/system/cache/index.vue b/Web/src/views/system/cache/index.vue
index 0c13add0..a99b4cff 100644
--- a/Web/src/views/system/cache/index.vue
+++ b/Web/src/views/system/cache/index.vue
@@ -1,46 +1,40 @@
 <template>
 	<div class="sys-cache-container">
-		<splitpanes horizontal>
-			<pane size="5">
-				<NoticeBar text="系统缓存数据管理，请慎重操作！" leftIcon="iconfont icon-tongzhi2" background="var(--el-color-primary-light-9)" color="var(--el-color-primary)" />
+		<NoticeBar text="系统缓存数据管理，请慎重操作！" leftIcon="iconfont icon-tongzhi2" background="var(--el-color-primary-light-9)" color="var(--el-color-primary)" style="margin-bottom: 5px" />
+		<splitpanes class="default-theme">
+			<pane size="20">
+				<el-card shadow="hover" header="缓存列表" v-loading="state.loading" style="height: 100%" body-style="height:100%; overflow:auto">
+					<template #header>
+						<div class="card-header">
+							<span>缓存列表</span>
+							<el-button icon="ele-Refresh" size="small" circle @click="handleQuery" v-auth="'sysCache/keyList'" />
+						</div>
+					</template>
+					<el-tree
+						ref="treeRef"
+						class="filter-tree"
+						:data="state.cacheData"
+						node-key="id"
+						:props="{ children: 'children', label: 'name' }"
+						@node-click="nodeClick"
+						:default-checked-keys="state.cacheData"
+						highlight-current
+						check-strictly
+						default-expand-all
+						accordion
+					/>
+				</el-card>
 			</pane>
-			<pane size="95">
-				<splitpanes>
-					<pane size="20">
-						<el-card shadow="hover" header="缓存列表" v-loading="state.loading" class="mt8" style="height: 100%" body-style="height:100%; overflow:auto">
-							<template #header>
-								<div class="card-header">
-									<span>缓存列表</span>
-									<el-button icon="ele-Refresh" size="small" circle text @click="handleQuery" v-auth="'sysCache:keyList'" />
-								</div>
-							</template>
-							<el-tree
-								ref="treeRef"
-								class="filter-tree"
-								:data="state.cacheData"
-								node-key="id"
-								:props="{ children: 'children', label: 'name' }"
-								@node-click="nodeClick"
-								:default-checked-keys="state.cacheData"
-								highlight-current
-								check-strictly
-								default-expand-all
-								accordion
-							/>
-						</el-card>
-					</pane>
-					<pane size="80">
-						<el-card shadow="hover" header="缓存数据" v-loading="state.loading1" class="mt8" style="height: 100%" body-style="height:100%; overflow:auto">
-							<template #header>
-								<div class="card-header">
-									<span>{{ `缓存数据${state.cacheKey ? `【${state.cacheKey}】` : ''}` }}</span>
-									<el-button icon="ele-Delete" size="small" type="danger" @click="delCache" v-auth="'sysCache:delete'"> 删除缓存 </el-button>
-								</div>
-							</template>
-							<vue-json-pretty :data="state.cacheValue" showLength showIcon showLineNumber showSelectController />
-						</el-card>
-					</pane>
-				</splitpanes>
+			<pane size="80">
+				<el-card shadow="hover" header="缓存数据" v-loading="state.loading1" style="height: 100%" body-style="height:100%; overflow:auto">
+					<template #header>
+						<div class="card-header">
+							<span>{{ `缓存数据${state.cacheKey ? `【${state.cacheKey}】` : ''}` }}</span>
+							<el-button icon="ele-Delete" size="small" type="danger" @click="delCache" v-auth="'sysCache/delete'"> 删除缓存 </el-button>
+						</div>
+					</template>
+					<vue-json-pretty :data="state.cacheValue" showLength showIcon showLineNumber showSelectController />
+				</el-card>
 			</pane>
 		</splitpanes>
 	</div>
diff --git a/Web/src/views/system/menu/index.vue b/Web/src/views/system/menu/index.vue
index d6c4c078..595bf3f5 100644
--- a/Web/src/views/system/menu/index.vue
+++ b/Web/src/views/system/menu/index.vue
@@ -109,7 +109,7 @@ const options = useVxeTable<SysMenu>(
 		columns: [
 			// { type: 'checkbox', width: 40, fixed: 'left' },
 			{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
-			{ field: 'title', title: '菜单名称', minWidth: 180, showOverflow: 'tooltip', treeNode: true, slots: { default: 'row_title' } },
+			{ field: 'title', title: '菜单名称', minWidth: 180, showOverflow: 'tooltip', treeNode: true, align: 'left', headerAlign: 'center', slots: { default: 'row_title' } },
 			{ field: 'type', title: '菜单类型', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_type' } },
 			{ field: 'path', title: '路由路径', minWidth: 150, showOverflow: 'tooltip' },
 			{ field: 'component', title: '组件路径', minWidth: 150, showOverflow: 'tooltip' },
diff --git a/Web/src/views/system/org/index.vue b/Web/src/views/system/org/index.vue
index 7e9a80e9..411ffab7 100644
--- a/Web/src/views/system/org/index.vue
+++ b/Web/src/views/system/org/index.vue
@@ -1,11 +1,10 @@
 <template>
 	<div class="sys-org-container">
-		<el-row :gutter="5" style="width: 100%; height: 100%">
-			<el-col :span="4" :xs="24" style="display: flex; height: 100%">
+		<splitpanes class="default-theme">
+			<pane size="15" style="display: flex; flex: 1">
 				<OrgTree ref="orgTreeRef" @node-click="handleNodeChange" />
-			</el-col>
-
-			<el-col :span="20" :xs="24" style="display: flex; flex-direction: column; height: 100%">
+			</pane>
+			<pane size="85">
 				<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
 					<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
 						<el-row :gutter="10">
@@ -71,8 +70,8 @@
 						</template>
 					</vxe-grid>
 				</el-card>
-			</el-col>
-		</el-row>
+			</pane>
+		</splitpanes>
 
 		<EditOrg ref="editOrgRef" :title="state.title" :orgData="state.treeData" @reload="handleQuery" />
 	</div>
@@ -83,6 +82,8 @@ import { onMounted, reactive, ref, nextTick } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { VxeGridInstance, VxeGridListeners } from 'vxe-table';
 import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
 
 import OrgTree from '/@/views/system/org/component/orgTree.vue';
 import EditOrg from '/@/views/system/org/component/editOrg.vue';
@@ -115,7 +116,7 @@ const options = useVxeTable<SysOrg>(
 		columns: [
 			// { type: 'checkbox', width: 40, fixed: 'left' },
 			{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
-			{ field: 'name', title: '机构名称', minWidth: 200, showOverflow: 'tooltip', treeNode: true },
+			{ field: 'name', title: '机构名称', minWidth: 200, showOverflow: 'tooltip', treeNode: true, align: 'left', headerAlign: 'center' },
 			{ field: 'code', title: '机构编码', minWidth: 200, showOverflow: 'tooltip' },
 			{ field: 'level', title: '级别', minWidth: 70, showOverflow: 'tooltip' },
 			{ field: 'type', title: '机构类型', minWidth: 80, formatter: ({ cellValue }: any) => state.orgTypeList.find((u: any) => u.code == cellValue)?.value, showOverflow: 'tooltip' },
diff --git a/Web/src/views/system/region/index.vue b/Web/src/views/system/region/index.vue
index 053426ab..e953a97b 100644
--- a/Web/src/views/system/region/index.vue
+++ b/Web/src/views/system/region/index.vue
@@ -1,11 +1,10 @@
 <template>
 	<div class="sys-region-container">
-		<el-row :gutter="5" style="width: 100%; height: 100%">
-			<el-col :span="6" :xs="24" style="display: flex; height: 100%">
+		<splitpanes class="default-theme">
+			<pane size="20" style="display: flex; flex: 1">
 				<RegionTree ref="regionTreeRef" @node-click="handleNodeChange" />
-			</el-col>
-
-			<el-col :span="18" :xs="24" style="display: flex; flex-direction: column; height: 100%">
+			</pane>
+			<pane size="80">
 				<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
 					<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
 						<el-row :gutter="10">
@@ -58,8 +57,8 @@
 						</template>
 					</vxe-grid>
 				</el-card>
-			</el-col>
-		</el-row>
+			</pane>
+		</splitpanes>
 
 		<EditRegion ref="editRegionRef" :title="state.title" @handleQuery="handleQuery" />
 	</div>
@@ -72,6 +71,8 @@ import { auth } from '/@/utils/authFunction';
 import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
 import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
 import { Local } from '/@/utils/storage';
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
 
 import RegionTree from '/@/views/system/region/component/regionTree.vue';
 import EditRegion from '/@/views/system/region/component/editRegion.vue';
diff --git a/Web/src/views/system/user/index.vue b/Web/src/views/system/user/index.vue
index 9ac69bca..2d9ce7a1 100644
--- a/Web/src/views/system/user/index.vue
+++ b/Web/src/views/system/user/index.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="sys-user-container">
-		<splitpanes>
-			<pane size="16">
+		<splitpanes class="default-theme">
+			<pane size="15" style="display: flex; flex: 1">
 				<OrgTree ref="orgTreeRef" @node-click="handleNodeChange" />
 			</pane>
-			<pane size="94">
+			<pane size="85">
 				<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
 					<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
 						<el-row :gutter="10">