平台管理样式修改LkhUI修改

src/components/UserInfo.vue

@@ -2,7 +2,15 @@
   <el-dropdown trigger="click">
     <div class="user-info">
       <img :src="UserAvatar" class="user-avatar" />
-      <span class="user-name">{{ userStore.info?.realname }}</span>
+      <el-tooltip
+        class="box-item"
+        effect="light"
+        :content="userStore.info?.realname"
+        placement="top"
+        :disabled="userStore.info?.realname.length < 10"
+      >
+        <span class="user-name">{{ userStore.info?.realname }}</span>
+      </el-tooltip>
       <img :src="ArrowIcon" class="dropdown-icon" />
     </div>
     <template #dropdown>
@@ -50,6 +58,10 @@
     font-weight: 400;
     font-size: 14cpx;
     color: $text-color;
+    max-width: 180px;
+    white-space: nowrap; /* 防止文本换行 */
+    overflow: hidden; /* 隐藏溢出的文本 */
+    text-overflow: ellipsis; /* 显示省略号 */
   }
   .dropdown-icon {
     width: 25px;

src/constant/pagination.ts

@@ -1,2 +1,3 @@
 export const PAGE_SIZE_CONFIG = [20, 50, 100];
 export const DEFAULT_PAGE_SIZE = 20;
+export const DEFAULT_LAYOUT = 'prev, pager, next, jumper, sizes, total';

src/views/system/dictionary/dictionary.vue

@@ -9,9 +9,9 @@
       </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="dictName" label="字典名称" width="360" />
+        <el-table-column prop="dictCode" label="字典编码" width="360" />
+        <el-table-column prop="description" label="字典描述" width="680" />
         <el-table-column prop="dictType" label="分类" width="180">
           <template #default="{ row }">
             {{ typeLabelMap[row.dictType] || '' }}
@@ -37,7 +37,7 @@
           :page-sizes="[10, 20, 50, 100]"
           :total="totalRow"
           background
-          layout="total, prev, pager, next, sizes, jumper"
+          :layout="DEFAULT_LAYOUT"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
         />
@@ -56,6 +56,7 @@
 <script lang="ts" setup>
   import { ref, onMounted, computed } from 'vue';
   import { ElMessage, ElMessageBox } from 'element-plus';
+  import { DEFAULT_LAYOUT } from '@/constant/pagination';
   import { Plus } from '@element-plus/icons-vue';
   import AddDict from './components/AddDict.vue';
   import { createDictApi, SaveDictParams, updateDict, deleteDict } from '@/api/dict';

src/views/system/menu/menu.vue

@@ -3,87 +3,86 @@
     <template #static>
       <Breadcrumb />
     </template>
-    <PageWrapper style="background: #fff; height: calc(100% - 70px)">
-      <el-row :gutter="12">
-        <el-col :span="6">
-          <el-card shadow="never">
-            <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" 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>
+    <PageWrapper style="background: #fff; height: 100%; width: 100%">
+      <div class="main_page">
+        <div class="left_panel">
+          <div class="left_top">
+            <el-space>
+              <el-button type="primary" icon-placement="left" @click="openCreateDrawer" style="margin-left: 20px">
+                添加菜单
+                <template #icon>
+                  <div class="flex items-center">
+                    <el-icon size="14">
+                      <FileAddOutlined />
+                    </el-icon>
+                  </div>
+                </template>
+              </el-button>
+
+              <el-button type="primary" 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>
+          </div>
+          <div class="w-full menu" style="margin-top: 20px; margin-left: 20px">
+            <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>
-          </el-card>
-        </el-col>
-        <el-col :span="18">
-          <el-card shadow="never">
-            <template #header>
-              <div class="flex justify-between">
-                <el-space>
-                  <span>编辑菜单 {{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
-                </el-space>
-                <el-popconfirm
-                  @confirm="handleDeleteMenu"
-                  v-if="isEditMenu"
-                  :title="`确定要删除菜单${treeItemTitle}吗？`"
+          </div>
+        </div>
+        <div class="right_panel">
+          <div class="right_top">
+            <div class="flex justify-between" style="align-items: center">
+              <el-space>
+                <span style="color: #303133; margin-left: 20px"
+                  >编辑菜单 {{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span
                 >
-                  <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="从左侧列表选择一项后，进行编辑" />
+              </el-space>
+              <el-popconfirm
+                @confirm="handleDeleteMenu"
+                v-if="isEditMenu"
+                :title="`确定要删除菜单${treeItemTitle}吗？`"
+              >
+                <template #reference>
+                  <el-button type="danger" size="small" style="margin-left: 50px; align-items: center"
+                    >删除菜单</el-button
+                  >
+                </template>
+              </el-popconfirm>
             </div>
-          </el-card>
-        </el-col>
-      </el-row>
+          </div>
+          <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>
+        </div>
+      </div>
       <CreateDrawer
         ref="createDrawerRef"
         :title="drawerTitle"
@@ -236,3 +235,43 @@
     expandedKeys.value = keys;
   }
 </script>
+<style lang="scss" scoped>
+  .main_page {
+    width: 100%;
+    height: calc(100vh - 172px);
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    .left_panel {
+      width: 25%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      border-right: 1px solid #eaeaea;
+      .left_top {
+        width: 100%;
+        height: 69px;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        border-bottom: 1px solid #eaeaea;
+      }
+    }
+    .right_panel {
+      width: 75%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      .right_top {
+        width: 100%;
+        height: 69px;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        border-bottom: 1px solid #eaeaea;
+      }
+    }
+  }
+</style>

src/views/system/permission/PagePermission.vue

@@ -3,97 +3,87 @@
     <template #static>
       <Breadcrumb />
     </template>
+    <PageWrapper style="background: #fff; height: 100%; width: 100%">
+      <div class="main_page">
+        <div class="left_panel">
+          <div class="left_top">
+            <el-space>
+              <el-button type="primary" icon-placement="left" @click="openCreateDrawer" style="margin-left: 20px">
+                添加权限
+                <template #icon>
+                  <div class="flex items-center">
+                    <el-icon size="14">
+                      <FileAddOutlined />
+                    </el-icon>
+                  </div>
+                </template>
+              </el-button>
 
-    <div class="page-permission">
-      <el-row :gutter="12">
-        <!-- 左侧权限树 -->
-        <el-col :span="6">
-          <el-card shadow="never">
-            <template #header>
+              <el-button type="primary" 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>
+          </div>
+          <div class="w-full" style="margin-top: 20px; margin-left: 20px">
+            <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>
+        </div>
+        <div class="right_panel">
+          <div class="right_top">
+            <div class="editPermission" style="align-items: center">
               <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" 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>
+                <span style="color: #303133; margin-left: 20px">编辑权限 </span>
+                <span v-if="treeItemTitle" style="color: #303133">：{{ treeItemTitle }}</span>
               </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>
+              <el-popconfirm
+                v-if="isEditing"
+                :title="`确定要删除${treeItemTitle}吗？`"
+                width="200"
+                @confirm="handleDeletePermission"
+              >
+                <template #reference>
+                  <el-button type="danger" size="small" style="margin-left: 50px; align-items: center"
+                    >删除权限</el-button
+                  >
+                </template>
+              </el-popconfirm>
             </div>
-          </el-card>
-        </el-col>
-
-        <!-- 右侧编辑权限 -->
-        <el-col :span="18">
-          <el-card shadow="never">
-            <template #header>
-              <div class="editPermission">
-                <el-space>
-                  <span>编辑权限 </span>
-                  <span v-if="treeItemTitle">:{{ 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>
-
-      <!-- 添加新权限 -->
+          </div>
+          <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>
+        </div>
+      </div>
       <CreateDrawer ref="drawerInstance" :permissionList="permissionViewTree" @change="handleChangePermssion" />
-    </div>
+    </PageWrapper>
   </VerticalFlexLayout>
 </template>
 
@@ -101,6 +91,7 @@
   import { ref, shallowRef, onMounted } from 'vue';
   import PermissionForm from './PermissionForm.vue';
   import CreateDrawer from './CreateDrawer.vue';
+  import { PageWrapper } from '@/components/Page';
   import { AlignLeftOutlined, FileAddOutlined } from '@vicons/antd';
   import {
     PermissionTree,
@@ -255,3 +246,43 @@
     justify-content: space-between;
   }
 </style>
+<style lang="scss" scoped>
+  .main_page {
+    width: 100%;
+    height: calc(100vh - 172px);
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    .left_panel {
+      width: 25%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      border-right: 1px solid #eaeaea;
+      .left_top {
+        width: 100%;
+        height: 69px;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        border-bottom: 1px solid #eaeaea;
+      }
+    }
+    .right_panel {
+      width: 75%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      .right_top {
+        width: 100%;
+        height: 69px;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        border-bottom: 1px solid #eaeaea;
+      }
+    }
+  }
+</style>

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

@@ -15,12 +15,12 @@
         </el-button>
 
         <el-table :data="personGroupList" style="margin-top: 20px">
-          <el-table-column label="分组名" prop="name" />
-          <el-table-column label="分组描述" prop="description" />
-          <el-table-column label="人员数量" prop="total" />
-          <el-table-column label="创建人" prop="operatorName" />
-          <el-table-column label="创建时间" prop="operationTime" />
-          <el-table-column label="操作">
+          <el-table-column label="分组名" prop="name" width="240" />
+          <el-table-column label="分组描述" prop="description" width="580" />
+          <el-table-column label="人员数量" prop="total" width="200" />
+          <el-table-column label="创建人" prop="operatorName" width="240" />
+          <el-table-column label="创建时间" prop="operationTime" width="240" />
+          <el-table-column label="操作" width="300" fixed="right">
             <template #default="{ row }">
               <section class="actions">
                 <el-button type="primary" link @click="openCheckDrawer(row)">查看</el-button>
@@ -38,7 +38,7 @@
         <section class="paginationPosition">
           <el-pagination
             background
-            layout="total, sizes, prev, pager, next"
+            :layout="DEFAULT_LAYOUT"
             :page-sizes="[10, 30, 50]"
             :total="total"
             v-model:page-size="personGroupListRequestParams.pageSize"
@@ -62,6 +62,7 @@
   import { onMounted, ref } from 'vue';
   import PersonGroupExhibitionDrawer from './components/PersonGroupExhibitionDrawer.vue';
   import { ElMessage } from 'element-plus';
+  import { DEFAULT_LAYOUT } from '@/constant/pagination';
   import { msgConfirm } from '@/utils/element-plus/messageBox';
 
   import { PERM_NOTICE } from '@/types/permission/constants';

src/views/system/role/role.vue

@@ -22,10 +22,10 @@
 
       <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">
+        <el-table-column label="角色名称" prop="roleName" width="480" />
+        <el-table-column label="备注" prop="remark" width="800" />
+        <el-table-column label="创建时间" width="240" prop="createdAt" />
+        <el-table-column label="操作" width="200" fixed="right">
           <template #default="{ row }">
             <section class="actions">
               <img src="@/assets/icons/edit.png" @click="openDrawer(row)" v-permission="PERM_USER.ROLE" />
@@ -42,7 +42,7 @@
       <section class="paginationPosition">
         <el-pagination
           background
-          layout="total, sizes, prev, pager, next"
+          :layout="DEFAULT_LAYOUT"
           :page-sizes="[10, 30, 50]"
           :total="total"
           v-model:page-size="requestParams.pageSize"
@@ -59,6 +59,7 @@
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue';
   import { Search } from '@element-plus/icons-vue';
+  import { DEFAULT_LAYOUT } from '@/constant/pagination';
   import RoleDrawer from './components/RoleDrawer.vue';
   import useRolesQuery from './hooks/useRolesQuery';
   import { Role } from '@/types/role/type';

src/views/system/user/user.vue

@@ -34,14 +34,14 @@
         </div>
 
         <el-table :data="userList" row-key="id" style="margin-top: 10px">
-          <el-table-column label="工号" prop="staffNo">
+          <el-table-column label="工号" prop="staffNo" width="200">
             <template #default="scope">
               <div>
                 <span>{{ scope.row.staffNo }}</span>
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="登录账号" prop="username" width="150">
+          <el-table-column label="登录账号" prop="username" width="240">
             <template #default="scope">
               <div class="account">
                 {{ scope.row.username }}
@@ -59,9 +59,9 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="姓名" prop="realname" />
-          <el-table-column label="手机" prop="mobile" />
-          <el-table-column label="状态" prop="isDisabled">
+          <el-table-column label="姓名" prop="realname" width="200" />
+          <el-table-column label="手机" prop="mobile" width="200" />
+          <el-table-column label="状态" prop="isDisabled" width="200">
             <template #default="scope">
               <div>
                 <el-tag :type="!scope.row.isDisabled ? 'success' : 'danger'">
@@ -70,23 +70,23 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="角色" prop="roleList">
+          <el-table-column label="角色" prop="roleList" width="240">
             <template #default="scope">
               <div>
                 {{ tranformRoleList(scope.row.roleList) }}
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="组织" prop="deptList">
+          <el-table-column label="组织" prop="deptList" width="200">
             <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">
+          <el-table-column label="认证方式" prop="certify" width="200" />
+          <el-table-column label="创建时间" prop="createdAt" width="240" />
+          <el-table-column label="操作" width="200" fixed="right">
             <template #default="scope">
               <el-space v-if="scope.row.roleType !== RoleTypeEnum.SUPER_ADMIN">
                 <div class="el-space el-space--horizontal">
@@ -122,7 +122,7 @@
         <section class="paginationPosition">
           <el-pagination
             background
-            layout="total, sizes, prev, pager, next"
+            :layout="DEFAULT_LAYOUT"
             :page-sizes="[10, 30, 50]"
             :total="total"
             v-model:page-size="params.pageSize"
@@ -157,6 +157,7 @@
   import { reactive, ref, onMounted } from 'vue';
   import { storeToRefs } from 'pinia';
   import { ElMessage } from 'element-plus';
+  import { DEFAULT_LAYOUT } from '@/constant/pagination';
   import { Plus, DocumentAdd, Stamp } from '@element-plus/icons-vue';
   import { OptionsProps, SearchParamsProps } from './types';
   import { RoleTypeEnum } from '@/types/role/constants';