新增my-layout布局组件，自动适配pc端和移动端布局

优化pc端界面为满屏布局

package-lock.json

@@ -18,7 +18,7 @@
         "echarts": "^5.4.1",
         "echarts-gl": "^2.0.9",
         "echarts-wordcloud": "^2.1.0",
-        "element-plus": "^2.3.0",
+        "element-plus": "^2.3.1",
         "js-cookie": "^3.0.1",
         "js-table2excel": "^1.0.3",
         "jsplumb": "^2.15.6",
@@ -1985,9 +1985,9 @@
       }
     },
     "node_modules/element-plus": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.0.tgz",
-      "integrity": "sha512-3s3JO4+LHLi61tFwF2emIHx6nxwKKdj5YWcj3GUBoXKhbuRjhq6xqaxWpBlPk7jySr/8Eci5++T2THbvrpGn7A==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.1.tgz",
+      "integrity": "sha512-IBS7ic1mRyDXpOreRkredV4ByZSuax5HPb0zNOHm4qwKC4wm927yQv+Is0JbzxPzCW5zWaV4PLy9/Gl3E3v59w==",
       "dependencies": {
         "@ctrl/tinycolor": "^3.4.1",
         "@element-plus/icons-vue": "^2.0.6",

package.json

@@ -22,7 +22,7 @@
     "echarts": "^5.4.1",
     "echarts-gl": "^2.0.9",
     "echarts-wordcloud": "^2.1.0",
-    "element-plus": "^2.3.0",
+    "element-plus": "^2.3.1",
     "js-cookie": "^3.0.1",
     "js-table2excel": "^1.0.3",
     "jsplumb": "^2.15.6",

src/components/my-layout/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="my-layout h100" :style="`position: ${state.isMobile ? 'relative' : 'absolute'}`">
+    <splitpanes :horizontal="state.isMobile" class="default-theme">
+      <slot></slot>
+    </splitpanes>
+  </div>
+</template>
+
+<script lang="ts" setup name="my-layout">
+import { reactive, onBeforeMount } from 'vue'
+import mittBus from '/@/utils/mitt'
+import { Splitpanes } from 'splitpanes'
+import 'splitpanes/dist/splitpanes.css'
+
+const state = reactive({
+  isMobile: document.body.clientWidth < 1000,
+})
+
+// 页面加载前
+onBeforeMount(() => {
+  // 监听窗口大小改变时(适配移动端)
+  mittBus.on('layoutMobileResize', (res: LayoutMobileResize) => {
+    // 判断是否是手机端
+    state.isMobile = res.clientWidth < 1000
+  })
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.splitpanes.default-theme .splitpanes__splitter) {
+  background-color: transparent;
+  border-left-color: transparent;
+}
+:deep(.splitpanes.default-theme .splitpanes__pane) {
+  background-color: transparent;
+}
+</style>

src/layout/component/columnsAside.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-columns-aside my-flex-column">
+  <div v-show="!isTagsViewCurrenFull" class="layout-columns-aside my-flex-column">
     <div v-if="setShowLogo" class="layout-logo">
       <img :src="logoMini" class="layout-logo-medium-img" />
     </div>
@@ -54,6 +54,7 @@ import { storeToRefs } from 'pinia'
 import pinia from '/@/stores/index'
 import { useRoutesList } from '/@/stores/routesList'
 import { useThemeConfig } from '/@/stores/themeConfig'
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'
 import mittBus from '/@/utils/mitt'
 import logoMini from '/@/assets/logo-mini.svg'
 
@@ -62,8 +63,10 @@ const columnsAsideOffsetTopRefs = ref<RefType>([])
 const columnsAsideActiveRef = ref()
 const stores = useRoutesList()
 const storesThemeConfig = useThemeConfig()
+const storesTagsViewRoutes = useTagsViewRoutes()
 const { routesList, isColumnsMenuHover, isColumnsNavHover } = storeToRefs(stores)
 const { themeConfig } = storeToRefs(storesThemeConfig)
+const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes)
 const route = useRoute()
 const router = useRouter()
 const state = reactive<ColumnsAsideState>({

src/theme/app.scss

@@ -126,17 +126,17 @@ body,
   .el-scrollbar {
     width: 100%;
   }
-  .layout-el-aside-br-color {
-    border-right: 1px solid var(--el-border-color-light, #ebeef5);
-    .el-scrollbar {
-      border-left: 1px solid var(--el-border-color-light, #ebeef5);
-    }
-  }
   // pc端左侧导航样式
   .layout-aside-pc-220 {
     width: 220px !important;
     transition: width 0.3s ease;
   }
+  .layout-el-aside-br-color {
+    border-right: 1px solid var(--el-border-color-light, #ebeef5);
+    &.layout-aside-pc-220 {
+      width: 221px !important;
+    }
+  }
   .layout-aside-pc-64 {
     width: 64px !important;
     transition: width 0.3s ease;

src/theme/element.scss

@@ -245,9 +245,9 @@
 
 /* Card 卡片
 ------------------------------- */
-.el-card__header {
-  padding: 15px 20px;
-}
+// .el-card__header {
+//   padding: 15px 20px;
+// }
 
 /* Table 表格 element plus 2.2.0 版本
 ------------------------------- */

src/theme/media/layout.scss

@@ -63,3 +63,13 @@
     display: none !important;
   }
 }
+
+@media screen and (max-width: 1000px) {
+  .splitpanes__pane {
+    height: auto !important;
+  }
+
+  .splitpanes__splitter {
+    display: none !important;
+  }
+}

src/theme/my-app.scss

@@ -0,0 +1,26 @@
+.my-layout {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  overflow: hidden;
+  padding: 0px 8px 8px 8px;
+  display: flex;
+  flex-direction: column;
+}
+.my-fill {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .el-card__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: auto;
+  }
+
+  .el-table {
+    flex: 1;
+  }
+}

src/views/admin/api/index.vue

@@ -1,53 +1,49 @@
 <template>
-  <div style="padding: 0px 0px 8px 8px">
-    <el-row :gutter="8" style="width: 100%">
-      <el-col :span="24" :xs="24">
-        <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
-          <el-form :inline="true" @submit.stop.prevent>
-            <el-form-item label="接口名称">
-              <el-input v-model="state.filter.name" placeholder="接口名称" @keyup.enter="onQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
-              <el-button v-auth="'api:admin:api:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
-              <el-popconfirm title="确定要同步接口" hide-icon width="180" hide-after="0" @confirm="onSync">
-                <template #reference>
-                  <el-button v-auth="'api:admin:api:sync'" :loading="state.syncLoading" type="primary" icon="ele-Refresh"> 同步 </el-button>
-                </template>
-              </el-popconfirm>
-            </el-form-item>
-          </el-form>
-        </el-card>
-
-        <el-card shadow="never" style="margin-top: 8px">
-          <el-table
-            :data="state.apiTreeData"
-            style="width: 100%"
-            v-loading="state.loading"
-            row-key="id"
-            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-            :expand-row-keys="state.expandRowKeys"
-          >
-            <el-table-column prop="label" label="接口名称" min-width="120" show-overflow-tooltip />
-            <el-table-column prop="path" label="接口地址" min-width="120" show-overflow-tooltip />
-            <el-table-column prop="description" label="接口描述" min-width="120" show-overflow-tooltip />
-            <el-table-column prop="sort" label="排序" width="80" align="center" show-overflow-tooltip />
-            <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
-              <template #default="{ row }">
-                <el-tag type="success" v-if="row.enabled">启用</el-tag>
-                <el-tag type="danger" v-else>禁用</el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="160" fixed="right" header-align="center" align="center">
-              <template #default="{ row }">
-                <el-button v-auth="'api:admin:api:update'" icon="ele-EditPen" size="small" text type="primary" @click="onEdit(row)">编辑</el-button>
-                <el-button v-auth="'api:admin:api:delete'" icon="ele-Delete" size="small" text type="danger" @click="onDelete(row)">删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-    </el-row>
+  <div class="my-layout">
+    <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
+      <el-form :inline="true" @submit.stop.prevent>
+        <el-form-item label="接口名称">
+          <el-input v-model="state.filter.name" placeholder="接口名称" @keyup.enter="onQuery" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
+          <el-button v-auth="'api:admin:api:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
+          <el-popconfirm title="确定要同步接口" hide-icon width="180" hide-after="0" @confirm="onSync">
+            <template #reference>
+              <el-button v-auth="'api:admin:api:sync'" :loading="state.syncLoading" type="primary" icon="ele-Refresh"> 同步 </el-button>
+            </template>
+          </el-popconfirm>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card class="my-fill mt8" shadow="never">
+      <el-table
+        :data="state.apiTreeData"
+        style="width: 100%"
+        v-loading="state.loading"
+        row-key="id"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        :expand-row-keys="state.expandRowKeys"
+      >
+        <el-table-column prop="label" label="接口名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="path" label="接口地址" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="description" label="接口描述" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="sort" label="排序" width="80" align="center" show-overflow-tooltip />
+        <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-tag type="success" v-if="row.enabled">启用</el-tag>
+            <el-tag type="danger" v-else>禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="160" fixed="right" header-align="center" align="center">
+          <template #default="{ row }">
+            <el-button v-auth="'api:admin:api:update'" icon="ele-EditPen" size="small" text type="primary" @click="onEdit(row)">编辑</el-button>
+            <el-button v-auth="'api:admin:api:delete'" icon="ele-Delete" size="small" text type="danger" @click="onDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
 
     <api-form ref="apiFormRef" :title="state.apiFormTitle" :api-tree-data="state.formApiTreeData"></api-form>
   </div>

src/views/admin/cache/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="padding: 8px">
-    <el-card shadow="never">
+  <div class="my-layout">
+    <el-card class="my-fill mt8" shadow="never">
       <el-table v-loading="state.loading" :data="state.cacheListData" row-key="id" style="width: 100%">
         <el-table-column type="index" width="80" label="#" />
         <el-table-column prop="description" label="缓存名" />

src/views/admin/dictionary/dictionary-type.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
+  <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
     <el-form :model="state.filterModel" :inline="true" @submit.stop.prevent>
       <el-form-item prop="name">
         <el-input v-model="state.filterModel.name" placeholder="名称或编码" @keyup.enter="onQuery" />
@@ -11,7 +11,7 @@
     </el-form>
   </el-card>
 
-  <el-card shadow="never" style="margin-top: 8px">
+  <el-card class="my-fill mt8" shadow="never">
     <el-table
       ref="tableRef"
       v-loading="state.loading"

src/views/admin/dictionary/dictionary.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
+  <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
     <el-form :model="state.filterModel" :inline="true" @submit.stop.prevent>
       <el-form-item prop="name">
         <el-input v-model="state.filterModel.name" placeholder="名称或编码" @keyup.enter="onQuery" />
@@ -11,7 +11,7 @@
     </el-form>
   </el-card>
 
-  <el-card shadow="never" style="margin-top: 8px">
+  <el-card class="my-fill mt8" shadow="never">
     <el-table v-loading="state.loading" :data="state.dictionaryListData" row-key="id" style="width: 100%">
       <el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip />
       <el-table-column prop="code" label="编码" min-width="120" show-overflow-tooltip />

src/views/admin/dictionary/index.vue

@@ -1,22 +1,26 @@
 <template>
-  <div style="padding: 0px 0px 8px 8px">
-    <el-row :gutter="8" style="width: 100%">
-      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+  <my-layout>
+    <pane size="50" min-size="30" max-size="70">
+      <div class="my-flex-column w100 h100">
         <dictionary-type></dictionary-type>
-      </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+      </div>
+    </pane>
+    <pane>
+      <div class="my-flex-column w100 h100">
         <dictionary></dictionary>
-      </el-col>
-    </el-row>
-  </div>
+      </div>
+    </pane>
+  </my-layout>
 </template>
 
 <script lang="ts" setup name="admin/dict">
 import { defineAsyncComponent } from 'vue'
+import { Pane } from 'splitpanes'
 
 // 引入组件
 const DictionaryType = defineAsyncComponent(() => import('./dictionary-type.vue'))
 const Dictionary = defineAsyncComponent(() => import('./dictionary.vue'))
+const MyLayout = defineAsyncComponent(() => import('/@/components/my-layout/index.vue'))
 </script>
 
 <style scoped lang="scss"></style>

src/views/admin/file/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="padding: 0px 0px 8px 8px">
-    <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
+  <div class="my-layout">
+    <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
       <el-form :model="state.filterModel" :inline="true" @submit.stop.prevent>
         <el-form-item prop="name">
           <el-input v-model="state.filterModel.fileName" placeholder="文件名" @keyup.enter="onQuery" />
@@ -12,7 +12,7 @@
       </el-form>
     </el-card>
 
-    <el-card shadow="never" style="margin-top: 8px">
+    <el-card class="my-fill mt8" shadow="never">
       <el-table v-loading="state.loading" :data="state.fileListData" row-key="id" style="width: 100%">
         <el-table-column prop="fileName" label="文件名" min-width="220">
           <template #default="{ row }">

src/views/admin/logs/login-log.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="padding: 0px 0px 8px 8px">
-    <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
+  <div class="my-layout">
+    <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
       <el-form :model="state.filterModel" :inline="true" @submit.stop.prevent>
         <el-form-item prop="name">
           <el-input v-model="state.filterModel.createdUserName" placeholder="登录账户" @keyup.enter="onQuery" />
@@ -11,7 +11,7 @@
       </el-form>
     </el-card>
 
-    <el-card shadow="never" style="margin-top: 8px">
+    <el-card class="my-fill mt8" shadow="never">
       <el-table v-loading="state.loading" :data="state.loginLogListData" row-key="id" style="width: 100%">
         <el-table-column prop="createdUserName" label="登录账号" width="100">
           <template #default="{ row }"> {{ row.createdUserName }}<br />{{ row.nickName }} </template>

src/views/admin/logs/opration-log.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="padding: 0px 0px 8px 8px">
-    <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
+  <div class="my-layout">
+    <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
       <el-form :model="state.filterModel" :inline="true" @submit.stop.prevent>
         <el-form-item prop="name">
           <el-input v-model="state.filterModel.createdUserName" placeholder="操作账号" @keyup.enter="onQuery" />
@@ -11,7 +11,7 @@
       </el-form>
     </el-card>
 
-    <el-card shadow="never" style="margin-top: 8px">
+    <el-card class="my-fill mt8" shadow="never">
       <el-table v-loading="state.loading" :data="state.oprationLogListData" row-key="id" style="width: 100%">
         <el-table-column prop="createdUserName" label="操作账号" width="100">
           <template #default="{ row }"> {{ row.createdUserName }}<br />{{ row.nickName }} </template>

src/views/admin/org/components/org-menu.vue

@@ -1,9 +1,9 @@
 <template>
-  <el-card shadow="never" style="margin-top: 8px">
+  <el-card shadow="never" style="margin-top: 8px" body-style="padding:0px;" class="my-fill">
     <template #header>
       <el-input v-model="state.filterText" placeholder="筛选部门" clearable />
     </template>
-    <div v-loading="state.loading">
+    <el-scrollbar v-loading="state.loading" height="100%" max-height="100%" :always="false" wrap-style="padding:var(--el-card-padding)">
       <el-tree
         ref="orgMenuRef"
         :data="state.orgTreeData"
@@ -19,7 +19,7 @@
         @node-click="onNodeClick"
         @check-change="onCheckChange"
       />
-    </div>
+    </el-scrollbar>
   </el-card>
 </template>
 

src/views/admin/org/index.vue

@@ -1,64 +1,60 @@
 <template>
-  <div style="padding: 0px 0px 8px 8px">
-    <el-row :gutter="8" style="width: 100%">
-      <el-col :span="24" :xs="24">
-        <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
-          <el-form :inline="true" @submit.stop.prevent>
-            <el-form-item label="部门名称">
-              <el-input v-model="state.filter.name" placeholder="部门名称" @keyup.enter="onQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
-              <el-button v-auth="'api:admin:org:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
+  <div class="my-layout">
+    <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
+      <el-form :inline="true" @submit.stop.prevent>
+        <el-form-item label="部门名称">
+          <el-input v-model="state.filter.name" placeholder="部门名称" @keyup.enter="onQuery" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
+          <el-button v-auth="'api:admin:org:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-        <el-card shadow="never" style="margin-top: 8px">
-          <el-table
-            :data="state.orgTreeData"
-            style="width: 100%"
-            v-loading="state.loading"
-            row-key="id"
-            default-expand-all
-            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-          >
-            <el-table-column prop="name" label="部门名称" min-width="120" show-overflow-tooltip />
-            <el-table-column prop="code" label="部门编码" min-width="120" show-overflow-tooltip />
-            <el-table-column prop="value" label="部门值" min-width="80" show-overflow-tooltip />
-            <el-table-column prop="sort" label="排序" width="80" align="center" show-overflow-tooltip />
-            <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
-              <template #default="{ row }">
-                <el-tag type="success" v-if="row.enabled">启用</el-tag>
-                <el-tag type="danger" v-else>禁用</el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="160" fixed="right" header-align="center" align="center">
-              <template #default="{ row }">
-                <el-button
-                  v-if="auth('api:admin:org:update') && row.parentId > 0"
-                  icon="ele-EditPen"
-                  size="small"
-                  text
-                  type="primary"
-                  @click="onEdit(row)"
-                  >编辑</el-button
-                >
-                <el-button
-                  v-if="auth('api:admin:org:delete') && row.parentId > 0"
-                  icon="ele-Delete"
-                  size="small"
-                  text
-                  type="danger"
-                  @click="onDelete(row)"
-                  >删除</el-button
-                >
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-    </el-row>
+    <el-card class="my-fill mt8" shadow="never">
+      <el-table
+        :data="state.orgTreeData"
+        style="width: 100%"
+        v-loading="state.loading"
+        row-key="id"
+        default-expand-all
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+        <el-table-column prop="name" label="部门名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="code" label="部门编码" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="value" label="部门值" min-width="80" show-overflow-tooltip />
+        <el-table-column prop="sort" label="排序" width="80" align="center" show-overflow-tooltip />
+        <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-tag type="success" v-if="row.enabled">启用</el-tag>
+            <el-tag type="danger" v-else>禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="160" fixed="right" header-align="center" align="center">
+          <template #default="{ row }">
+            <el-button
+              v-if="auth('api:admin:org:update') && row.parentId > 0"
+              icon="ele-EditPen"
+              size="small"
+              text
+              type="primary"
+              @click="onEdit(row)"
+              >编辑</el-button
+            >
+            <el-button
+              v-if="auth('api:admin:org:delete') && row.parentId > 0"
+              icon="ele-Delete"
+              size="small"
+              text
+              type="danger"
+              @click="onDelete(row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
 
     <org-form ref="orgFormRef" :title="state.orgFormTitle" :org-tree-data="state.orgTreeData"></org-form>
   </div>

src/views/admin/permission/index.vue

@@ -1,95 +1,91 @@
 <template>
-  <div style="padding: 0px 0px 8px 8px">
-    <el-row :gutter="8" style="width: 100%">
-      <el-col :span="24" :xs="24">
-        <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
-          <el-form :inline="true" @submit.stop.prevent>
-            <el-form-item label="权限名称">
-              <el-input v-model="state.filter.name" placeholder="权限名称" @keyup.enter="onQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
-              <el-dropdown
-                v-auths="['api:admin:permission:addgroup', 'api:admin:permission:addmenu', 'api:admin:permission:adddot']"
-                style="margin-left: 12px"
-              >
-                <el-button type="primary"
-                  >新增<el-icon class="el-icon--right"><ele-ArrowDown /></el-icon
-                ></el-button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item v-if="auth('api:admin:permission:addgroup')" @click="onAdd(1)">新增分组</el-dropdown-item>
-                    <el-dropdown-item v-if="auth('api:admin:permission:addmenu')" @click="onAdd(2)">新增菜单</el-dropdown-item>
-                    <el-dropdown-item v-if="auth('api:admin:permission:adddot')" @click="onAdd(3)">新增权限点</el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </el-form-item>
-          </el-form>
-        </el-card>
-
-        <el-card shadow="never" style="margin-top: 8px">
-          <el-table
-            :data="state.permissionTreeData"
-            style="width: 100%"
-            v-loading="state.loading"
-            row-key="id"
-            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-            :expand-row-keys="state.expandRowKeys"
+  <div class="my-layout">
+    <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
+      <el-form :inline="true" @submit.stop.prevent>
+        <el-form-item label="权限名称">
+          <el-input v-model="state.filter.name" placeholder="权限名称" @keyup.enter="onQuery" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
+          <el-dropdown
+            v-auths="['api:admin:permission:addgroup', 'api:admin:permission:addmenu', 'api:admin:permission:adddot']"
+            style="margin-left: 12px"
           >
-            <el-table-column prop="label" label="权限名称" width="240" show-overflow-tooltip>
-              <template #default="{ row }">
-                <SvgIcon :name="row.icon" />
-                {{ row.label }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="type" label="类型" width="80" show-overflow-tooltip>
-              <template #default="{ row }">
-                {{ row.type === 1 ? '分组' : row.type === 2 ? '菜单' : row.type === 3 ? '权限点' : '' }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="path" label="权限地址" min-width="240" show-overflow-tooltip>
-              <template #default="{ row }">
-                <div v-if="row.type === 1 || row.type === 2">
-                  {{ row.path ? '路由地址：' + row.path : '' }}
-                  {{ row.viewPath ? '视图地址：' + row.viewPath : '' }}
-                  {{ row.redirect ? '重定向地址：' + row.redirect : '' }}
-                  {{ row.link ? '链接地址：' + row.link : '' }}
-                </div>
-                <div v-if="row.type === 3">接口地址：{{ row.apiPaths }}</div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="sort" label="排序" width="80" align="center" show-overflow-tooltip />
-            <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
-              <template #default="{ row }">
-                <el-tag type="success" v-if="row.enabled">启用</el-tag>
-                <el-tag type="danger" v-else>禁用</el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="160" fixed="right" header-align="center" align="center">
-              <template #default="{ row }">
-                <el-button
-                  v-if="
-                    (row.type === 1 && auth('api:admin:permission:updategroup')) ||
-                    (row.type === 2 && auth('api:admin:permission:updatemenu')) ||
-                    (row.type === 3 && auth('api:admin:permission:updatedot'))
-                  "
-                  icon="ele-EditPen"
-                  size="small"
-                  text
-                  type="primary"
-                  @click="onEdit(row)"
-                  >编辑</el-button
-                >
-                <el-button v-auth="'api:admin:permission:delete'" icon="ele-Delete" size="small" text type="danger" @click="onDelete(row)"
-                  >删除</el-button
-                >
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-    </el-row>
+            <el-button type="primary"
+              >新增<el-icon class="el-icon--right"><ele-ArrowDown /></el-icon
+            ></el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item v-if="auth('api:admin:permission:addgroup')" @click="onAdd(1)">新增分组</el-dropdown-item>
+                <el-dropdown-item v-if="auth('api:admin:permission:addmenu')" @click="onAdd(2)">新增菜单</el-dropdown-item>
+                <el-dropdown-item v-if="auth('api:admin:permission:adddot')" @click="onAdd(3)">新增权限点</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card class="my-fill mt8" shadow="never">
+      <el-table
+        :data="state.permissionTreeData"
+        style="width: 100%"
+        v-loading="state.loading"
+        row-key="id"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        :expand-row-keys="state.expandRowKeys"
+      >
+        <el-table-column prop="label" label="权限名称" width="240" show-overflow-tooltip>
+          <template #default="{ row }">
+            <SvgIcon :name="row.icon" />
+            {{ row.label }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="类型" width="80" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.type === 1 ? '分组' : row.type === 2 ? '菜单' : row.type === 3 ? '权限点' : '' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="path" label="权限地址" min-width="240" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div v-if="row.type === 1 || row.type === 2">
+              {{ row.path ? '路由地址：' + row.path : '' }}
+              {{ row.viewPath ? '视图地址：' + row.viewPath : '' }}
+              {{ row.redirect ? '重定向地址：' + row.redirect : '' }}
+              {{ row.link ? '链接地址：' + row.link : '' }}
+            </div>
+            <div v-if="row.type === 3">接口地址：{{ row.apiPaths }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sort" label="排序" width="80" align="center" show-overflow-tooltip />
+        <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-tag type="success" v-if="row.enabled">启用</el-tag>
+            <el-tag type="danger" v-else>禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="160" fixed="right" header-align="center" align="center">
+          <template #default="{ row }">
+            <el-button
+              v-if="
+                (row.type === 1 && auth('api:admin:permission:updategroup')) ||
+                (row.type === 2 && auth('api:admin:permission:updatemenu')) ||
+                (row.type === 3 && auth('api:admin:permission:updatedot'))
+              "
+              icon="ele-EditPen"
+              size="small"
+              text
+              type="primary"
+              @click="onEdit(row)"
+              >编辑</el-button
+            >
+            <el-button v-auth="'api:admin:permission:delete'" icon="ele-Delete" size="small" text type="danger" @click="onDelete(row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
 
     <permission-group-form
       ref="permissionGroupFormRef"

src/views/admin/role/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div style="padding: 0px 0px 8px 8px">
-    <el-row :gutter="8" style="width: 100%">
-      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-        <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
+  <my-layout>
+    <pane size="50" min-size="30" max-size="70">
+      <div class="my-flex-column w100 h100">
+        <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
           <el-form :inline="true" @submit.stop.prevent>
             <el-form-item label="角色名称">
               <el-input v-model="state.filter.roleName" placeholder="角色名称" @keyup.enter="onQuery" />
@@ -24,7 +24,7 @@
           </el-form>
         </el-card>
 
-        <el-card shadow="never" style="margin-top: 8px">
+        <el-card class="my-fill mt8" shadow="never">
           <el-table
             ref="roleTableRef"
             v-loading="state.loading"
@@ -69,9 +69,11 @@
             </el-table-column>
           </el-table>
         </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-        <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
+      </div>
+    </pane>
+    <pane>
+      <div class="my-flex-column w100 h100">
+        <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
           <el-form :inline="true" @submit.stop.prevent>
             <el-form-item label="姓名">
               <el-input v-model="state.filter.name" placeholder="姓名" @keyup.enter="onGetRoleUserList" />
@@ -84,7 +86,7 @@
           </el-form>
         </el-card>
 
-        <el-card shadow="never" style="margin-top: 8px">
+        <el-card class="my-fill mt8" shadow="never">
           <el-table
             ref="userTableRef"
             v-loading="state.userListLoading"
@@ -99,14 +101,14 @@
             <!-- <el-table-column prop="email" label="邮箱" min-width="120" show-overflow-tooltip /> -->
           </el-table>
         </el-card>
-      </el-col>
-    </el-row>
+      </div>
+    </pane>
 
     <role-form ref="roleFormRef" :title="state.roleFormTitle" :role-tree-data="state.roleFormTreeData"></role-form>
     <user-select ref="userSelectRef" title="添加员工" multiple :sure-loading="state.sureLoading" @sure="onSureUser"></user-select>
     <set-role-menu ref="setRoleMenuRef"></set-role-menu>
     <set-role-data-scope ref="setRoleDataScopeRef"></set-role-data-scope>
-  </div>
+  </my-layout>
 </template>
 
 <script lang="ts" setup name="admin/role">
@@ -118,6 +120,7 @@ import { ElTable } from 'element-plus'
 import { cloneDeep } from 'lodash-es'
 import eventBus from '/@/utils/mitt'
 import { auth } from '/@/utils/authFunction'
+import { Pane } from 'splitpanes'
 
 // 引入组件
 const RoleForm = defineAsyncComponent(() => import('./components/role-form.vue'))
@@ -125,6 +128,7 @@ const SetRoleMenu = defineAsyncComponent(() => import('./components/set-role-men
 const SetRoleDataScope = defineAsyncComponent(() => import('./components/set-role-data-scope.vue'))
 const UserSelect = defineAsyncComponent(() => import('/@/views/admin/user/components/user-select.vue'))
 const MyDropdownMore = defineAsyncComponent(() => import('/@/components/my-dropdown-more/index.vue'))
+const MyLayout = defineAsyncComponent(() => import('/@/components/my-layout/index.vue'))
 
 const { proxy } = getCurrentInstance() as any
 

src/views/admin/task/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="padding: 0px 0px 8px 8px">
-    <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
+  <div class="my-layout">
+    <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
       <el-form :inline="true" @submit.stop.prevent>
         <el-form-item>
           <el-input v-model="state.filter.topic" placeholder="任务名称" @keyup.enter="onQuery" />
@@ -11,7 +11,7 @@
       </el-form>
     </el-card>
 
-    <el-card shadow="never" style="margin-top: 8px">
+    <el-card class="my-fill mt8" shadow="never">
       <el-table v-loading="state.loading" :data="state.taskListData" row-key="id" style="width: 100%">
         <el-table-column prop="id" label="任务编号" width="126" />
         <el-table-column prop="topic" label="任务名称" min-width="120" show-overflow-tooltip />

src/views/admin/tenant/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="padding: 0px 0px 8px 8px">
-    <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
+  <div class="my-layout">
+    <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
       <el-form :inline="true" @submit.stop.prevent>
         <el-form-item label="姓名">
           <el-input v-model="state.filter.name" placeholder="姓名" @keyup.enter="onQuery" />
@@ -12,8 +12,8 @@
       </el-form>
     </el-card>
 
-    <el-card shadow="never" style="margin-top: 8px">
-      <el-table v-loading="state.loading" :data="state.tenantListData" row-key="id" style="width: 100%">
+    <el-card class="my-fill mt8" shadow="never">
+      <el-table v-loading="state.loading" :data="state.tenantListData" row-key="id" height="'100%'" style="width: 100%; height: 100%">
         <el-table-column prop="name" label="企业名称" min-width="120" show-overflow-tooltip />
         <el-table-column prop="code" label="企业编码" width="120" show-overflow-tooltip />
         <el-table-column prop="realName" label="姓名" width="120" show-overflow-tooltip />
@@ -52,6 +52,7 @@
           </template>
         </el-table-column>
       </el-table>
+
       <div class="my-flex my-flex-end" style="margin-top: 20px">
         <el-pagination
           v-model:currentPage="state.pageInput.currentPage"
@@ -190,5 +191,3 @@ const onSetTenantMenu = (tenant: TenantListOutput) => {
   setTenantMenuRef.value.open(tenant)
 }
 </script>
-
-<style scoped lang="scss"></style>

src/views/admin/user/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div style="padding: 0px 0px 8px 8px">
-    <el-row :gutter="8" style="width: 100%">
-      <el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="4">
-        <div class="my-flex-column h100">
-          <org-menu @node-click="onOrgNodeClick" class="my-flex-fill" select-first-node></org-menu>
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="20">
-        <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
+  <my-layout>
+    <pane size="20" min-size="20" max-size="35">
+      <div class="my-flex-column w100 h100">
+        <org-menu @node-click="onOrgNodeClick" select-first-node></org-menu>
+      </div>
+    </pane>
+    <pane>
+      <div class="my-flex-column w100 h100">
+        <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
           <el-form @submit.stop.prevent style="max-width: 640px">
             <el-row :gutter="35">
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
@@ -25,7 +25,7 @@
           </el-form>
         </el-card>
 
-        <el-card shadow="never" style="margin-top: 8px">
+        <el-card class="my-fill mt8" shadow="never">
           <el-table v-loading="state.loading" :data="state.userListData" row-key="id" style="width: 100%">
             <el-table-column prop="userName" label="账号" width="120" show-overflow-tooltip />
             <el-table-column prop="name" label="姓名" width="120" show-overflow-tooltip>
@@ -88,11 +88,11 @@
             />
           </div>
         </el-card>
-      </el-col>
-    </el-row>
 
-    <user-form ref="userFormRef" :title="state.userFormTitle"></user-form>
-  </div>
+        <user-form ref="userFormRef" :title="state.userFormTitle"></user-form>
+      </div>
+    </pane>
+  </my-layout>
 </template>
 
 <script lang="ts" setup name="admin/user">
@@ -101,12 +101,14 @@ import { UserGetPageOutput, PageInputUserGetPageDto, OrgListOutput, UserSetManag
 import { UserApi } from '/@/api/admin/User'
 import eventBus from '/@/utils/mitt'
 import { auth } from '/@/utils/authFunction'
+import { Pane } from 'splitpanes'
 
 // 引入组件
 const UserForm = defineAsyncComponent(() => import('./components/user-form.vue'))
 const OrgMenu = defineAsyncComponent(() => import('/@/views/admin/org/components/org-menu.vue'))
 const MyDropdownMore = defineAsyncComponent(() => import('/@/components/my-dropdown-more/index.vue'))
 const MySelectInput = defineAsyncComponent(() => import('/@/components/my-select-input/index.vue'))
+const MyLayout = defineAsyncComponent(() => import('/@/components/my-layout/index.vue'))
 
 const { proxy } = getCurrentInstance() as any
 

src/views/admin/view/index.vue

@@ -1,49 +1,45 @@
 <template>
-  <div style="padding: 0px 0px 8px 8px">
-    <el-row :gutter="8" style="width: 100%">
-      <el-col :span="24" :xs="24">
-        <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
-          <el-form :inline="true" @submit.stop.prevent>
-            <el-form-item label="视图名称">
-              <el-input v-model="state.filter.name" placeholder="视图名称" @keyup.enter="onQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
-              <el-button v-auth="'api:admin:view:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
+  <div class="my-layout">
+    <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
+      <el-form :inline="true" @submit.stop.prevent>
+        <el-form-item label="视图名称">
+          <el-input v-model="state.filter.name" placeholder="视图名称" @keyup.enter="onQuery" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
+          <el-button v-auth="'api:admin:view:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-        <el-card shadow="never" style="margin-top: 8px">
-          <el-table
-            :data="state.viewTreeData"
-            style="width: 100%"
-            v-loading="state.loading"
-            row-key="id"
-            default-expand-all
-            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-          >
-            <el-table-column prop="label" label="视图名称" min-width="120" show-overflow-tooltip />
-            <el-table-column prop="name" label="视图命名" min-width="120" show-overflow-tooltip />
-            <el-table-column prop="path" label="视图地址" min-width="120" show-overflow-tooltip />
-            <el-table-column prop="sort" label="排序" width="80" align="center" show-overflow-tooltip />
-            <!-- <el-table-column prop="description" label="视图描述" min-width="120" show-overflow-tooltip /> -->
-            <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
-              <template #default="{ row }">
-                <el-tag type="success" v-if="row.enabled">启用</el-tag>
-                <el-tag type="danger" v-else>禁用</el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="160" fixed="right" header-align="center" align="center">
-              <template #default="{ row }">
-                <el-button v-auth="'api:admin:view:update'" icon="ele-EditPen" size="small" text type="primary" @click="onEdit(row)">编辑</el-button>
-                <el-button v-auth="'api:admin:view:delete'" icon="ele-Delete" size="small" text type="danger" @click="onDelete(row)">删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-    </el-row>
+    <el-card class="my-fill mt8" shadow="never">
+      <el-table
+        :data="state.viewTreeData"
+        style="width: 100%"
+        v-loading="state.loading"
+        row-key="id"
+        default-expand-all
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+        <el-table-column prop="label" label="视图名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="name" label="视图命名" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="path" label="视图地址" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="sort" label="排序" width="80" align="center" show-overflow-tooltip />
+        <!-- <el-table-column prop="description" label="视图描述" min-width="120" show-overflow-tooltip /> -->
+        <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-tag type="success" v-if="row.enabled">启用</el-tag>
+            <el-tag type="danger" v-else>禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="160" fixed="right" header-align="center" align="center">
+          <template #default="{ row }">
+            <el-button v-auth="'api:admin:view:update'" icon="ele-EditPen" size="small" text type="primary" @click="onEdit(row)">编辑</el-button>
+            <el-button v-auth="'api:admin:view:delete'" icon="ele-Delete" size="small" text type="danger" @click="onDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
 
     <view-form ref="viewFormRef" :title="state.viewFormTitle" :view-tree-data="state.viewTreeData"></view-form>
   </div>