fix: 增加固定高度和高度自适应的布局 VerticalFlexLayout

src/components/Breadcrumb.vue

@@ -1,16 +1,15 @@
 <template>
-  <el-card>
-    <div class="breadcrumb">
-      <span v-if="showIcon" class="return-icon" @click="router.back()"
-        ><img src="@/assets/icons/rollback.png" alt=""
-      /></span>
-      <span class="title">{{ title }}</span>
-    </div>
-  </el-card>
+  <div class="breadcrumb">
+    <span v-if="showIcon" class="return-icon" @click="router.back()"
+      ><img src="@/assets/icons/rollback.png" alt=""
+    /></span>
+    <span class="title">{{ title || routeTitle }}</span>
+  </div>
 </template>
 
 <script setup lang="ts">
-  import { useRouter } from 'vue-router';
+  import { computed } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
 
   defineProps({
     title: {
@@ -24,10 +23,20 @@
   });
 
   const router = useRouter();
+  const route = useRoute();
+  // 如果没传props的title，就取route的meta.title
+  const routeTitle = computed(() => route.meta.title);
 </script>
 
 <style scoped lang="scss">
   .breadcrumb {
+    // position: sticky;
+    // top: 0;
+    background: #fff;
+    padding: 16px 22px;
+    margin-bottom: 10px;
+    border-radius: 4px;
+    z-index: 999;
     .return-icon {
       cursor: pointer;
     }

src/components/VerticalFlexLayout.vue

@@ -0,0 +1,32 @@
+<!-- 
+ 布局
+static slot 是传入固定高度，比如面包屑
+default slot 是传入高度自动撑开部分 
+-->
+<template>
+  <div class="flexWrapper">
+    <div class="staticContent">
+      <slot name="static"></slot>
+    </div>
+
+    <div class="flexContent">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .flexWrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  .staticContent {
+    flex-shrink: 0;
+  }
+  .flexContent {
+    flex: 1;
+    overflow-y: auto;
+    background-color: #fff;
+  }
+</style>

src/main.scss

@@ -47,3 +47,11 @@ body {
 .cursor-pointer {
   cursor: pointer;
 }
+
+
+  .paginationPosition {
+    /* mt-4 flex justify-end */
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }

src/views/auth/dept/dept.vue

@@ -1,25 +1,32 @@
 <template>
-  <PageWrapper>
-    <div class="search"
-      ><span class="searchLabel"> 搜索：</span><el-input v-model="searchKey" placeholder="请输入关键字进行搜索" />
-    </div>
-    <el-table :data="filterData" row-key="id" :tree-props="treeProps" default-expand-all>
-      <el-table-column label="组织名称">
-        <template #default="{ row }">
-          {{ `${row.deptName} (${row.userCount})` }}
-        </template>
-      </el-table-column>
-    </el-table>
+  <VerticalFlexLayout>
+    <template #static>
+      <Breadcrumb />
+    </template>
+    <div>
+      <div>
+        <div class="search"
+          ><span class="searchLabel"> 搜索：</span><el-input v-model="searchKey" placeholder="请输入关键字进行搜索" />
+        </div>
+        <el-table :data="filterData" row-key="id" :tree-props="treeProps" default-expand-all>
+          <el-table-column label="组织名称">
+            <template #default="{ row }">
+              {{ `${row.deptName} (${row.userCount})` }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
 
-    <CreateDrawer
-      ref="createDrawerRef"
-      :title="drawerTitle"
-      :deptList="tableData"
-      :data-source="currentDept"
-      :width="450"
-      @change="reloadTable"
-    />
-  </PageWrapper>
+      <CreateDrawer
+        ref="createDrawerRef"
+        :title="drawerTitle"
+        :deptList="tableData"
+        :data-source="currentDept"
+        :width="450"
+        @change="reloadTable"
+      />
+    </div>
+  </VerticalFlexLayout>
 </template>
 
 <script lang="ts" setup>
@@ -29,6 +36,8 @@
   import CreateDrawer from './CreateDrawer.vue';
   import type { DeptTree, DeptTreeItem } from '@/types/dept/type';
   import { filterTree } from '@/utils/tree';
+  import Breadcrumb from '@/components/Breadcrumb.vue';
+  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
 
   const tableData = ref<DeptTree[]>([]);
   const treeProps = reactive({
@@ -96,6 +105,8 @@
   }
   .search {
     margin: 20px;
+    margin-top: 0;
+    padding-top: 20px;
     width: 300px;
     display: flex;
     .searchLabel {

src/views/system/dictionary/dictionary.vue

@@ -1,59 +1,58 @@
 <template>
-  <Breadcrumb title="字典管理" :show-icon="false" />
-  <div class="dictionary-container">
-    <el-card shadow="hover">
-      <div class="table-operations">
-        <el-button type="primary" @click="handleAddDialogShow" :icon="Plus">新增字典项</el-button>
-      </div>
-
-      <el-table
-        v-loading="loading"
-        height="calc(100vh - 300px)"
-        :data="dataSource"
-        style="width: 100%; margin-top: 16px"
-      >
-        <el-table-column prop="dictName" label="字典名称" />
-        <el-table-column prop="dictCode" label="字典编码" />
-        <el-table-column prop="description" label="字典描述" show-overflow-tooltip />
-        <el-table-column prop="dictType" label="分类" width="180">
-          <template #default="{ row }">
-            {{ typeLabelMap[row.dictType] || '' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="status" label="状态" width="180">
-          <template #default="{ row }">
-            {{ statusLabelMap[row.status] || '' }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200" fixed="right">
-          <template #default="{ row }">
-            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button type="primary" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <div class="pagination-container">
-        <el-pagination
-          v-model:current-page="currentPage"
-          v-model:page-size="pageSize"
-          :page-sizes="[10, 20, 50, 100]"
-          :total="totalRow"
-          background
-          layout="total, prev, pager, next, sizes, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
-    </el-card>
-    <AddDict
-      v-if="dialogVisible"
-      ref="addDictRef"
-      @close="closeAddDialog"
-      @submit="handleSubmit"
-      :dictCode="currentDictCode"
-    />
-  </div>
+  <VerticalFlexLayout>
+    <template #static>
+      <Breadcrumb />
+    </template>
+    <div class="dictionary-container">
+      <el-card shadow="never">
+        <div class="table-operations">
+          <el-button type="primary" @click="handleAddDialogShow" :icon="Plus">新增字典项</el-button>
+        </div>
+
+        <el-table v-loading="loading" :data="dataSource" style="width: 100%; margin-top: 16px">
+          <el-table-column prop="dictName" label="字典名称" />
+          <el-table-column prop="dictCode" label="字典编码" />
+          <el-table-column prop="description" label="字典描述" show-overflow-tooltip />
+          <el-table-column prop="dictType" label="分类" width="180">
+            <template #default="{ row }">
+              {{ typeLabelMap[row.dictType] || '' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="状态" width="180">
+            <template #default="{ row }">
+              {{ statusLabelMap[row.status] || '' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="200" fixed="right">
+            <template #default="{ row }">
+              <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
+              <el-button type="primary" link @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <div class="paginationPosition">
+          <el-pagination
+            v-model:current-page="currentPage"
+            v-model:page-size="pageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            :total="totalRow"
+            background
+            layout="total, prev, pager, next, sizes, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </el-card>
+      <AddDict
+        v-if="dialogVisible"
+        ref="addDictRef"
+        @close="closeAddDialog"
+        @submit="handleSubmit"
+        :dictCode="currentDictCode"
+      />
+    </div>
+  </VerticalFlexLayout>
 </template>
 
 <script lang="ts" setup>
@@ -65,6 +64,7 @@
   import { useDataSource } from './useDataSource';
   import { dictionaryStatusOptions, dictionaryTypeOptions } from './constants';
   import Breadcrumb from '@/components/Breadcrumb.vue';
+  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
 
   // 表格数据
   const loading = ref(false);
@@ -137,13 +137,13 @@
   }
 
   const createDictionary = (formData: SaveDictParams) => {
-    createDictApi(formData).then((res) => {
+    createDictApi(formData).then(() => {
       ElMessage.success('保存成功');
     });
   };
 
   const updateDictionary = (formData: SaveDictParams) => {
-    updateDict(formData).then((res) => {
+    updateDict(formData).then(() => {
       ElMessage.success('编辑成功');
     });
   };
@@ -173,11 +173,5 @@
     .table-operations {
       margin-bottom: 16px;
     }
-
-    .pagination-container {
-      margin-top: 16px;
-      display: flex;
-      justify-content: flex-end;
-    }
   }
 </style>

src/views/system/menu/menu.vue

@@ -1,87 +1,97 @@
 <template>
-  <PageWrapper>
-    <el-row :gutter="12">
-      <el-col :span="6">
-        <el-card shadow="hover">
-          <template #header>
-            <el-space>
-              <el-button type="primary" icon-placement="left" @click="openCreateDrawer">
-                添加菜单
-                <template #icon>
-                  <div class="flex items-center">
-                    <el-icon size="14">
-                      <FileAddOutlined />
-                    </el-icon>
-                  </div>
-                </template>
-              </el-button>
-
-              <el-button type="primary" plain icon-placement="left" @click="packHandle">
-                全部{{ expandedKeys.length ? '收起' : '展开' }}
-                <template #icon>
-                  <div class="flex items-center">
-                    <el-icon size="14">
-                      <AlignLeftOutlined />
-                    </el-icon>
-                  </div>
-                </template>
-              </el-button>
-            </el-space>
-          </template>
-          <div class="w-full menu">
-            <div class="menu-list" v-loading="loading">
-              <el-scrollbar height="620px">
-                <el-tree
-                  ref="treeRef"
-                  :pattern="pattern"
-                  :data="menuTree"
-                  nodeKey="id"
-                  highlight-current
-                  check-strictly
-                  :expand-on-click-node="false"
-                  @current-change="onSelectTreeItem"
-                  @update:expanded-keys="onExpandedKeys"
-                />
-              </el-scrollbar>
-            </div>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :span="18">
-        <el-card shadow="hover">
-          <template #header>
-            <div class="flex justify-between">
+  <VerticalFlexLayout>
+    <template #static>
+      <Breadcrumb />
+    </template>
+    <PageWrapper style="background: #fff; height: calc(100% - 70px)">
+      <el-row :gutter="12">
+        <el-col :span="6">
+          <el-card shadow="hover">
+            <template #header>
               <el-space>
-                <span>编辑菜单 {{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
+                <el-button type="primary" icon-placement="left" @click="openCreateDrawer">
+                  添加菜单
+                  <template #icon>
+                    <div class="flex items-center">
+                      <el-icon size="14">
+                        <FileAddOutlined />
+                      </el-icon>
+                    </div>
+                  </template>
+                </el-button>
+
+                <el-button type="primary" plain icon-placement="left" @click="packHandle">
+                  全部{{ expandedKeys.length ? '收起' : '展开' }}
+                  <template #icon>
+                    <div class="flex items-center">
+                      <el-icon size="14">
+                        <AlignLeftOutlined />
+                      </el-icon>
+                    </div>
+                  </template>
+                </el-button>
               </el-space>
-              <el-popconfirm
-                @confirm="handleDeleteMenu"
-                v-if="isEditMenu"
-                :title="`确定要删除菜单${treeItemTitle}吗？`"
-              >
-                <template #reference>
-                  <el-button type="danger" size="small" style="margin-left: 50px">删除菜单</el-button>
-                </template>
-              </el-popconfirm>
+            </template>
+            <div class="w-full menu">
+              <div class="menu-list" v-loading="loading">
+                <el-scrollbar height="620px">
+                  <el-tree
+                    ref="treeRef"
+                    :pattern="pattern"
+                    :data="menuTree"
+                    nodeKey="id"
+                    highlight-current
+                    check-strictly
+                    :expand-on-click-node="false"
+                    @current-change="onSelectTreeItem"
+                    @update:expanded-keys="onExpandedKeys"
+                  />
+                </el-scrollbar>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="18">
+          <el-card shadow="hover">
+            <template #header>
+              <div class="flex justify-between">
+                <el-space>
+                  <span>编辑菜单 {{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
+                </el-space>
+                <el-popconfirm
+                  @confirm="handleDeleteMenu"
+                  v-if="isEditMenu"
+                  :title="`确定要删除菜单${treeItemTitle}吗？`"
+                >
+                  <template #reference>
+                    <el-button type="danger" size="small" style="margin-left: 50px">删除菜单</el-button>
+                  </template>
+                </el-popconfirm>
+              </div>
+            </template>
+            <!-- 表单 -->
+            <div class="pt-6">
+              <MenuForm
+                v-show="selectedMenuId != null"
+                ref="menuFormRef"
+                :parent-menu-tree="menuTree"
+                @change="handleMenuChange"
+                class="w-2/3 ml-10"
+                isShowSubmit
+              />
+              <el-empty v-show="selectedMenuId == null" description="从左侧列表选择一项后，进行编辑" />
             </div>
-          </template>
-          <!-- 表单 -->
-          <div class="pt-6">
-            <MenuForm
-              v-show="selectedMenuId != null"
-              ref="menuFormRef"
-              :parent-menu-tree="menuTree"
-              @change="handleMenuChange"
-              class="w-2/3 ml-10"
-              isShowSubmit
-            />
-            <el-empty v-show="selectedMenuId == null" description="从左侧列表选择一项后，进行编辑" />
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-    <CreateDrawer ref="createDrawerRef" :title="drawerTitle" :parent-menu-tree="menuTree" @change="handleMenuChange" />
-  </PageWrapper>
+          </el-card>
+        </el-col>
+      </el-row>
+      <CreateDrawer
+        ref="createDrawerRef"
+        :title="drawerTitle"
+        :parent-menu-tree="menuTree"
+        @change="handleMenuChange"
+      />
+    </PageWrapper>
+  </VerticalFlexLayout>
 </template>
 <script lang="ts" setup>
   import { ref, onMounted, shallowRef } from 'vue';
@@ -95,6 +105,8 @@
   import MenuForm from './MenuForm.vue';
   import { cloneDeep } from 'lodash-es';
   import { PageWrapper } from '@/components/Page';
+  import Breadcrumb from '@/components/Breadcrumb.vue';
+  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
 
   const menuDetailTree = shallowRef<MenuDetailTree>([]); // 菜单详情树
   const menuTree = shallowRef<MenuTree>([]); // 菜单树，用于展示

src/views/system/permission/PagePermission.vue

@@ -1,94 +1,100 @@
 <template>
-  <div class="page-permission">
-    <el-row :gutter="12">
-      <!-- 左侧权限树 -->
-      <el-col :span="6">
-        <el-card shadow="hover">
-          <template #header>
-            <el-space>
-              <el-button type="primary" icon-placement="left" @click="openCreateDrawer">
-                添加权限
-                <template #icon>
-                  <div class="flex items-center">
-                    <el-icon size="14">
-                      <FileAddOutlined />
-                    </el-icon>
-                  </div>
-                </template>
-              </el-button>
-
-              <el-button type="primary" plain icon-placement="left" @click="packHandle">
-                全部{{ expandedKeys.length ? '收起' : '展开' }}
-                <template #icon>
-                  <div class="flex items-center">
-                    <el-icon size="14">
-                      <AlignLeftOutlined />
-                    </el-icon>
-                  </div>
-                </template>
-              </el-button>
-            </el-space>
-          </template>
-
-          <div class="w-full">
-            <div v-loading="loading">
-              <el-scrollbar height="620px">
-                <el-tree
-                  ref="treeRef"
-                  :data="permissionViewTree"
-                  nodeKey="value"
-                  highlight-current
-                  check-strictly
-                  :expand-on-click-node="false"
-                  @current-change="onSelectTreeNode"
-                  @update:expanded-keys="onExpandedKeys"
-                />
-              </el-scrollbar>
-            </div>
-          </div>
-        </el-card>
-      </el-col>
-
-      <!-- 右侧编辑权限 -->
-      <el-col :span="18">
-        <el-card shadow="hover">
-          <template #header>
-            <div class="editPermission">
+  <VerticalFlexLayout>
+    <template #static>
+      <Breadcrumb />
+    </template>
+
+    <div class="page-permission">
+      <el-row :gutter="12">
+        <!-- 左侧权限树 -->
+        <el-col :span="6">
+          <el-card shadow="hover">
+            <template #header>
               <el-space>
-                <span>编辑权限: </span>
-                <span>{{ treeItemTitle }}</span>
+                <el-button type="primary" icon-placement="left" @click="openCreateDrawer">
+                  添加权限
+                  <template #icon>
+                    <div class="flex items-center">
+                      <el-icon size="14">
+                        <FileAddOutlined />
+                      </el-icon>
+                    </div>
+                  </template>
+                </el-button>
+
+                <el-button type="primary" plain icon-placement="left" @click="packHandle">
+                  全部{{ expandedKeys.length ? '收起' : '展开' }}
+                  <template #icon>
+                    <div class="flex items-center">
+                      <el-icon size="14">
+                        <AlignLeftOutlined />
+                      </el-icon>
+                    </div>
+                  </template>
+                </el-button>
               </el-space>
-              <el-popconfirm
-                v-if="isEditing"
-                :title="`确定要删除${treeItemTitle}吗？`"
-                width="200"
-                @confirm="handleDeletePermission"
-              >
-                <template #reference>
-                  <el-button type="danger" size="small">删除权限</el-button>
-                </template>
-              </el-popconfirm>
+            </template>
+
+            <div class="w-full">
+              <div v-loading="loading">
+                <el-scrollbar height="620px">
+                  <el-tree
+                    ref="treeRef"
+                    :data="permissionViewTree"
+                    nodeKey="value"
+                    highlight-current
+                    check-strictly
+                    :expand-on-click-node="false"
+                    @current-change="onSelectTreeNode"
+                    @update:expanded-keys="onExpandedKeys"
+                  />
+                </el-scrollbar>
+              </div>
             </div>
-          </template>
-          <!-- 表单 -->
-          <div class="pt-6">
-            <PermissionForm
-              v-show="selectedPermissionId != null"
-              ref="formInstance"
-              :permissionList="permissionViewTree"
-              @change="handleChangePermssion"
-              isShowSubmit
-              class="w-2/3 ml-10"
-            />
-            <el-empty v-show="selectedPermissionId == null" description="从左侧列表选择一项后，进行编辑" />
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <!-- 添加新权限 -->
-    <CreateDrawer ref="drawerInstance" :permissionList="permissionViewTree" @change="handleChangePermssion" />
-  </div>
+          </el-card>
+        </el-col>
+
+        <!-- 右侧编辑权限 -->
+        <el-col :span="18">
+          <el-card shadow="hover">
+            <template #header>
+              <div class="editPermission">
+                <el-space>
+                  <span>编辑权限: </span>
+                  <span>{{ treeItemTitle }}</span>
+                </el-space>
+                <el-popconfirm
+                  v-if="isEditing"
+                  :title="`确定要删除${treeItemTitle}吗？`"
+                  width="200"
+                  @confirm="handleDeletePermission"
+                >
+                  <template #reference>
+                    <el-button type="danger" size="small">删除权限</el-button>
+                  </template>
+                </el-popconfirm>
+              </div>
+            </template>
+            <!-- 表单 -->
+            <div class="pt-6">
+              <PermissionForm
+                v-show="selectedPermissionId != null"
+                ref="formInstance"
+                :permissionList="permissionViewTree"
+                @change="handleChangePermssion"
+                isShowSubmit
+                class="w-2/3 ml-10"
+              />
+              <el-empty v-show="selectedPermissionId == null" description="从左侧列表选择一项后，进行编辑" />
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <!-- 添加新权限 -->
+      <CreateDrawer ref="drawerInstance" :permissionList="permissionViewTree" @change="handleChangePermssion" />
+    </div>
+  </VerticalFlexLayout>
 </template>
 
 <script setup lang="ts">
@@ -107,6 +113,8 @@
   import { getTreeItem } from '@/utils';
   import { cloneDeep } from 'lodash-es';
   import { ElMessage } from 'element-plus';
+  import Breadcrumb from '@/components/Breadcrumb.vue';
+  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
 
   // 左侧权限树相关
   const expandedKeys = ref<PermissionViewItem['value'][]>([]);
@@ -239,7 +247,8 @@
 
 <style scoped>
   .page-permission {
-    height: calc(100vh - 100px);
+    height: calc(100vh - 173px);
+    background-color: #fff;
   }
   .editPermission {
     display: flex;

src/views/system/person-group/PersonGroup.vue

@@ -1,58 +1,63 @@
 <template>
-  <div>
-    <el-card>
-      <template #header>
-        <el-button type="primary" @click="openEditDrawer()" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
-          <template #icon>
-            <el-icon>
-              <PlusOutlined />
-            </el-icon>
-          </template>
-          新建人员分组
-        </el-button>
-      </template>
+  <VerticalFlexLayout>
+    <template #static>
+      <Breadcrumb />
+    </template>
+    <div>
+      <el-card shadow="never">
+        <template #header>
+          <el-button type="primary" @click="openEditDrawer()" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
+            <template #icon>
+              <el-icon>
+                <PlusOutlined />
+              </el-icon>
+            </template>
+            新建人员分组
+          </el-button>
+        </template>
 
-      <el-table height="calc(100vh - 256px)" :data="personGroupList">
-        <el-table-column label="分组名" width="300" prop="name" />
-        <el-table-column label="分组描述" prop="description" />
-        <el-table-column label="人员数量" width="200" prop="total" />
-        <el-table-column label="创建人" width="200" prop="operatorName" />
-        <el-table-column label="创建时间" width="200" prop="operationTime" />
-        <el-table-column label="操作" width="240">
-          <template #default="{ row }">
-            <section class="actions">
-              <el-button type="primary" link @click="openCheckDrawer(row)">查看</el-button>
-              <el-button type="primary" link @click="openEditDrawer(row)" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
-                编辑
-              </el-button>
-              <el-button type="primary" link @click="deleteGroup(row)" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
-                删除
-              </el-button>
-            </section>
-          </template>
-        </el-table-column>
-      </el-table>
+        <el-table :data="personGroupList">
+          <el-table-column label="分组名" width="300" prop="name" />
+          <el-table-column label="分组描述" prop="description" />
+          <el-table-column label="人员数量" width="200" prop="total" />
+          <el-table-column label="创建人" width="200" prop="operatorName" />
+          <el-table-column label="创建时间" width="200" prop="operationTime" />
+          <el-table-column label="操作" width="240">
+            <template #default="{ row }">
+              <section class="actions">
+                <el-button type="primary" link @click="openCheckDrawer(row)">查看</el-button>
+                <el-button type="primary" link @click="openEditDrawer(row)" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
+                  编辑
+                </el-button>
+                <el-button type="primary" link @click="deleteGroup(row)" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
+                  删除
+                </el-button>
+              </section>
+            </template>
+          </el-table-column>
+        </el-table>
 
-      <section class="mt-4 flex justify-end">
-        <el-pagination
-          background
-          layout="total, sizes, prev, pager, next"
-          :page-sizes="[10, 30, 50]"
-          :total="total"
-          v-model:page-size="personGroupListRequestParams.pageSize"
-          v-model:current-page="personGroupListRequestParams.pageNumber"
-          @change="queryPersonGroupList"
-        />
-      </section>
-      <PersonGroupEditDrawer :title="drawerTitle" ref="editDrawerInstance" @submitted="onSubmit" />
-      <PersonGroupExhibitionDrawer :title="drawerTitle" ref="exhibitionDrawerInstance" />
-    </el-card>
-  </div>
+        <section class="paginationPosition">
+          <el-pagination
+            background
+            layout="total, sizes, prev, pager, next"
+            :page-sizes="[10, 30, 50]"
+            :total="total"
+            v-model:page-size="personGroupListRequestParams.pageSize"
+            v-model:current-page="personGroupListRequestParams.pageNumber"
+            @change="queryPersonGroupList"
+          />
+        </section>
+        <PersonGroupEditDrawer :title="drawerTitle" ref="editDrawerInstance" @submitted="onSubmit" />
+        <PersonGroupExhibitionDrawer :title="drawerTitle" ref="exhibitionDrawerInstance" />
+      </el-card>
+    </div>
+  </VerticalFlexLayout>
 </template>
 
 <script setup lang="ts">
   import { PlusOutlined } from '@vicons/antd';
-  import { QueryPersonGroupPageParams, PersonGroupListItem } from '@/types/person-group/type';
+  import { PersonGroupListItem } from '@/types/person-group/type';
   import { deleteUserGroup } from '@/api/system/person-group';
   import usePersonGroupListQuery from './hooks/usePersonGroupListQuery';
   import PersonGroupEditDrawer from './components/PersonGroupEditDrawer.vue';
@@ -60,6 +65,8 @@
   import PersonGroupExhibitionDrawer from './components/PersonGroupExhibitionDrawer.vue';
   import { ElMessage, ElMessageBox } from 'element-plus';
   import { PERM_NOTICE } from '@/types/permission/constants';
+  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
+  import Breadcrumb from '@/components/Breadcrumb.vue';
 
   const { personGroupListRequestParams, personGroupList, total, setRequestParams, queryPersonGroupList } =
     usePersonGroupListQuery();

src/views/system/role/role.vue

@@ -1,57 +1,63 @@
 <template>
-  <div>
-    <el-card class="mb-3 proCard">
-      <el-space align="center">
-        <el-input
-          :style="{ width: '320px' }"
-          v-model="requestParams.queryParam!.roleName"
-          clearable
-          placeholder="请输入角色名称"
-          @keyup.enter="queryRolesPage"
-        />
-        <el-button type="primary" :icon="Search" @click="queryRolesPage">查询</el-button>
-      </el-space>
-    </el-card>
+  <VerticalFlexLayout>
+    <template #static>
+      <Breadcrumb />
+    </template>
 
-    <el-card>
-      <template #header>
-        <el-button type="primary" @click="openDrawer()" v-permission="PERM_USER.ROLE"> 添加角色 </el-button>
-      </template>
+    <div>
+      <el-card class="mb-3 proCard">
+        <el-space align="center">
+          <el-input
+            :style="{ width: '320px' }"
+            v-model="requestParams.queryParam!.roleName"
+            clearable
+            placeholder="请输入角色名称"
+            @keyup.enter="queryRolesPage"
+          />
+          <el-button type="primary" :icon="Search" @click="queryRolesPage">查询</el-button>
+        </el-space>
+      </el-card>
 
-      <el-table height="calc(100vh - 340px)" :data="roleList">
-        <el-table-column label="角色ID" width="100" prop="id" />
-        <el-table-column label="角色名称" prop="roleName" />
-        <el-table-column label="备注" prop="remark" />
-        <el-table-column label="创建时间" width="200" prop="createdAt" />
-        <el-table-column label="操作" width="160">
-          <template #default="{ row }">
-            <section class="actions">
-              <img src="@/assets/icons/edit.png" @click="openDrawer(row)" v-permission="PERM_USER.ROLE" />
-              <img
-                src="@/assets/icons/delete.png"
-                @click="deleteRole(row.id)"
-                v-permission="{ action: [PERM_USER.ROLE] }"
-              />
-            </section>
-          </template>
-        </el-table-column>
-      </el-table>
+      <el-card shadow="never">
+        <template #header>
+          <el-button type="primary" @click="openDrawer()" v-permission="PERM_USER.ROLE"> 添加角色 </el-button>
+        </template>
 
-      <section class="mt-4 flex justify-end">
-        <el-pagination
-          background
-          layout="total, sizes, prev, pager, next"
-          :page-sizes="[10, 30, 50]"
-          :total="total"
-          v-model:page-size="requestParams.pageSize"
-          v-model:current-page="requestParams.pageNumber"
-          @change="queryRolesPage"
-        />
-      </section>
-    </el-card>
+        <el-table :data="roleList">
+          <el-table-column label="角色ID" width="100" prop="id" />
+          <el-table-column label="角色名称" prop="roleName" />
+          <el-table-column label="备注" prop="remark" />
+          <el-table-column label="创建时间" width="200" prop="createdAt" />
+          <el-table-column label="操作" width="160">
+            <template #default="{ row }">
+              <section class="actions">
+                <img src="@/assets/icons/edit.png" @click="openDrawer(row)" v-permission="PERM_USER.ROLE" />
+                <img
+                  src="@/assets/icons/delete.png"
+                  @click="deleteRole(row.id)"
+                  v-permission="{ action: [PERM_USER.ROLE] }"
+                />
+              </section>
+            </template>
+          </el-table-column>
+        </el-table>
 
-    <RoleDrawer :title="drawerTitle" ref="drawerInstance" @submitted="onSubmitRole" />
-  </div>
+        <section class="paginationPosition">
+          <el-pagination
+            background
+            layout="total, sizes, prev, pager, next"
+            :page-sizes="[10, 30, 50]"
+            :total="total"
+            v-model:page-size="requestParams.pageSize"
+            v-model:current-page="requestParams.pageNumber"
+            @change="queryRolesPage"
+          />
+        </section>
+      </el-card>
+
+      <RoleDrawer :title="drawerTitle" ref="drawerInstance" @submitted="onSubmitRole" />
+    </div>
+  </VerticalFlexLayout>
 </template>
 
 <script lang="ts" setup>
@@ -63,6 +69,8 @@
   import { Role } from '@/types/role/type';
   import { deleteRole as _deleteRole } from '@/api/system/role';
   import { PERM_USER } from '@/types/permission/constants';
+  import Breadcrumb from '@/components/Breadcrumb.vue';
+  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
 
   const { roleList, total, queryRolesPage, requestParams } = useRolesQuery();
 

src/views/system/user/user.vue

@@ -1,157 +1,163 @@
 <template>
-  <div class="user-page">
-    <SearchForm
-      ref="searchFormRef"
-      :departmentList="departmentList"
-      :roleData="roleData"
-      @get-table-data="onSearchCommit"
-      @reset-form="onResetForm"
-    />
-    <el-card>
-      <template #header>
-        <el-space align="center">
-          <el-button type="primary" @click="openAddSingleDrawer" v-permission="PERM_USER.ACCOUNT_MANAGE">
-            <template #icon>
-              <el-icon>
-                <Plus />
-              </el-icon>
+  <VerticalFlexLayout>
+    <template #static>
+      <Breadcrumb />
+    </template>
+
+    <div class="user-page">
+      <SearchForm
+        ref="searchFormRef"
+        :departmentList="departmentList"
+        :roleData="roleData"
+        @get-table-data="onSearchCommit"
+        @reset-form="onResetForm"
+      />
+      <el-card shadow="never">
+        <template #header>
+          <el-space align="center">
+            <el-button type="primary" @click="openAddSingleDrawer" v-permission="PERM_USER.ACCOUNT_MANAGE">
+              <template #icon>
+                <el-icon>
+                  <Plus />
+                </el-icon>
+              </template>
+              添加用户
+            </el-button>
+
+            <el-button
+              color="#1890FF"
+              @click="openAddMultipleDrawer"
+              style="margin-left: 18px"
+              plain
+              v-permission="PERM_USER.ACCOUNT_MANAGE"
+            >
+              <template #icon>
+                <el-icon>
+                  <DocumentAdd />
+                </el-icon>
+              </template>
+              批量导入
+            </el-button>
+          </el-space>
+        </template>
+
+        <el-table :data="userList" row-key="id">
+          <el-table-column label="工号" prop="staffNo">
+            <template #default="scope">
+              <div>
+                <span style="margin-left: 10px">{{ scope.row.staffNo }}</span>
+              </div>
             </template>
-            添加用户
-          </el-button>
-
-          <el-button
-            color="#1890FF"
-            @click="openAddMultipleDrawer"
-            style="margin-left: 18px"
-            plain
-            v-permission="PERM_USER.ACCOUNT_MANAGE"
-          >
-            <template #icon>
-              <el-icon>
-                <DocumentAdd />
-              </el-icon>
+          </el-table-column>
+          <el-table-column label="登录账号" prop="username" width="150">
+            <template #default="scope">
+              <div class="account">
+                {{ scope.row.username }}
+                <el-tooltip
+                  class="box-item"
+                  effect="dark"
+                  content="租户管理员账号，自动拥有全部相机查看权限及功能权限"
+                  placement="top-start"
+                  v-if="scope.row.roleType === RoleTypeEnum.TENANT_ADMIN"
+                >
+                  <el-icon color="#409efc">
+                    <Stamp />
+                  </el-icon>
+                </el-tooltip>
+              </div>
             </template>
-            批量导入
-          </el-button>
-        </el-space>
-      </template>
-
-      <el-table height="calc(100vh - 340px)" :data="userList" row-key="id">
-        <el-table-column label="工号" prop="staffNo">
-          <template #default="scope">
-            <div>
-              <span style="margin-left: 10px">{{ scope.row.staffNo }}</span>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="登录账号" prop="username" width="150">
-          <template #default="scope">
-            <div class="account">
-              {{ scope.row.username }}
-              <el-tooltip
-                class="box-item"
-                effect="dark"
-                content="租户管理员账号，自动拥有全部相机查看权限及功能权限"
-                placement="top-start"
-                v-if="scope.row.roleType === RoleTypeEnum.TENANT_ADMIN"
-              >
-                <el-icon color="#409efc">
-                  <Stamp />
-                </el-icon>
-              </el-tooltip>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="姓名" prop="realname" />
-        <el-table-column label="手机" prop="mobile" />
-        <el-table-column label="状态" prop="isDisabled">
-          <template #default="scope">
-            <div>
-              <el-tag :type="!scope.row.isDisabled ? 'success' : 'danger'">
-                {{ !scope.row.isDisabled ? '正常' : '锁定' }}</el-tag
-              >
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="角色" prop="roleList">
-          <template #default="scope">
-            <div>
-              {{ tranformRoleList(scope.row.roleList) }}
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="组织" prop="deptList">
-          <template #default="scope">
-            <div>
-              {{ tranformDeptList(scope.row.deptList) }}
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="认证方式" prop="certify" />
-        <el-table-column label="创建时间" prop="createdAt" />
-        <el-table-column label="操作" width="200">
-          <template #default="scope">
-            <el-space v-if="scope.row.roleType !== RoleTypeEnum.SUPER_ADMIN">
-              <div class="el-space el-space--horizontal">
-                <!-- <div
+          </el-table-column>
+          <el-table-column label="姓名" prop="realname" />
+          <el-table-column label="手机" prop="mobile" />
+          <el-table-column label="状态" prop="isDisabled">
+            <template #default="scope">
+              <div>
+                <el-tag :type="!scope.row.isDisabled ? 'success' : 'danger'">
+                  {{ !scope.row.isDisabled ? '正常' : '锁定' }}</el-tag
+                >
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="角色" prop="roleList">
+            <template #default="scope">
+              <div>
+                {{ tranformRoleList(scope.row.roleList) }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="组织" prop="deptList">
+            <template #default="scope">
+              <div>
+                {{ tranformDeptList(scope.row.deptList) }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="认证方式" prop="certify" />
+          <el-table-column label="创建时间" prop="createdAt" />
+          <el-table-column label="操作" width="200">
+            <template #default="scope">
+              <el-space v-if="scope.row.roleType !== RoleTypeEnum.SUPER_ADMIN">
+                <div class="el-space el-space--horizontal">
+                  <!-- <div
                   class="el-space__item"
                   @click="handleEdit(scope.row)"
                   v-permission="{ action: [PERM_USER.ACCOUNT_EDIT] }"
                 > -->
-                <div class="el-space__item" @click="handleEdit(scope.row)" v-permission="PERM_USER.ACCOUNT_MANAGE">
-                  <div><img :src="editIcon" class="el-tooltip__trigger" /></div>
-                </div>
-                <!-- <div
+                  <div class="el-space__item" @click="handleEdit(scope.row)" v-permission="PERM_USER.ACCOUNT_MANAGE">
+                    <div><img :src="editIcon" class="el-tooltip__trigger" /></div>
+                  </div>
+                  <!-- <div
                   class="el-space__item"
                   @click="handleDelete(scope.row)"
                   v-permission="{ action: [PERM_USER.ACCOUNT_DELETE] }"
                 > -->
-                <div class="el-space__item" @click="handleDelete(scope.row)" v-permission="PERM_USER.ACCOUNT_MANAGE">
-                  <div><img :src="deleteIcon" class="el-tooltip__trigger" /></div>
-                </div>
-                <div
-                  class="el-space__item"
-                  v-if="visibleRestPassBtn(scope.row.roleType) && hasResetPasswordPermission()"
-                  @click="handleResetCode(scope.row)"
-                >
-                  <div class="tooltip__password">重置密码</div>
+                  <div class="el-space__item" @click="handleDelete(scope.row)" v-permission="PERM_USER.ACCOUNT_MANAGE">
+                    <div><img :src="deleteIcon" class="el-tooltip__trigger" /></div>
+                  </div>
+                  <div
+                    class="el-space__item"
+                    v-if="visibleRestPassBtn(scope.row.roleType) && hasResetPasswordPermission()"
+                    @click="handleResetCode(scope.row)"
+                  >
+                    <div class="tooltip__password">重置密码</div>
+                  </div>
                 </div>
-              </div>
-            </el-space>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <section class="mt-4 flex justify-end">
-        <el-pagination
-          background
-          layout="total, sizes, prev, pager, next"
-          :page-sizes="[10, 30, 50]"
-          :total="total"
-          v-model:page-size="params.pageSize"
-          v-model:current-page="params.pageNumber"
-          @change="loadPageData"
-        />
-      </section>
-    </el-card>
-    <CreateDrawer
-      ref="createDrawerRef"
-      :title="drawerTitle"
-      @change="reloadTable"
-      :departmentList="departmentList"
-      :roleData="roleData"
-      :width="450"
-    />
-    <ResetCodeDrawer ref="ResetCodeDrawerRef" :title="drawerTitle" @change="reloadTable" />
-
-    <AddUser
-      v-if="showAddPopover"
-      :colseAddUser="setShowAddPopoverFalse"
-      v-model="showAddPopover"
-      class="add-popover"
-      @change="reloadTable"
-    />
-  </div>
+              </el-space>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <section class="paginationPosition">
+          <el-pagination
+            background
+            layout="total, sizes, prev, pager, next"
+            :page-sizes="[10, 30, 50]"
+            :total="total"
+            v-model:page-size="params.pageSize"
+            v-model:current-page="params.pageNumber"
+            @change="loadPageData"
+          />
+        </section>
+      </el-card>
+      <CreateDrawer
+        ref="createDrawerRef"
+        :title="drawerTitle"
+        @change="reloadTable"
+        :departmentList="departmentList"
+        :roleData="roleData"
+        :width="450"
+      />
+      <ResetCodeDrawer ref="ResetCodeDrawerRef" :title="drawerTitle" @change="reloadTable" />
+
+      <AddUser
+        v-if="showAddPopover"
+        :colseAddUser="setShowAddPopoverFalse"
+        v-model="showAddPopover"
+        class="add-popover"
+        @change="reloadTable"
+      />
+    </div>
+  </VerticalFlexLayout>
 </template>
 
 <script lang="ts" setup>
@@ -178,6 +184,8 @@
   import { PERM_USER } from '@/types/permission/constants';
   import { calculateTreeData } from '@/utils';
   import { DeptTreeItem } from '@/types/dept/type';
+  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
+  import Breadcrumb from '@/components/Breadcrumb.vue';
 
   const userStore = useUserStore();
   const { getUserInfo } = storeToRefs(userStore);