feat: 新增全高表格（内部滚动）布局设置 & 分页优化

src/components/Pagination/index.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <div :class="{ hidden: hidden }" class="pagination-container">
     <el-pagination
       v-model:current-page="currentPage"
@@ -21,8 +21,8 @@ import { propTypes } from '@/utils/propTypes';
 const props = defineProps({
   total: propTypes.number,
   page: propTypes.number.def(1),
-  limit: propTypes.number.def(20),
-  pageSizes: { type: Array<number>, default: () => [10, 20, 30, 50] },
+  limit: propTypes.number.def(100),
+  pageSizes: { type: Array<number>, default: () => [10, 20, 50, 100, 200, 500,1000,1500,3000] },
   // 移动端页码按钮的数量端默认值5
   pagerCount: propTypes.number.def(document.body.clientWidth < 992 ? 5 : 7),
   layout: propTypes.string.def('total, sizes, prev, pager, next, jumper'),

src/layout/components/Settings/index.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <el-drawer v-model="showSettings" :with-header="false" direction="rtl" size="300px" close-on-click-modal>
     <h3 class="drawer-title">菜单导航设置</h3>
     <div class="nav-wrap">
@@ -121,6 +121,13 @@
       </span>
     </div>
 
+    <div class="drawer-item">
+      <span>全高表格（内部滚动）</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.fullHeightTable" class="drawer-switch" />
+      </span>
+    </div>
+
     <el-divider />
 
     <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting">保存配置</el-button>
@@ -227,6 +234,7 @@ const saveSetting = () => {
   settings.value.sideTheme = storeSettings.value.sideTheme;
   settings.value.theme = storeSettings.value.theme;
   settings.value.navType = storeSettings.value.navType;
+  settings.value.fullHeightTable = storeSettings.value.fullHeightTable;
   settings.value.radiusBase = storeSettings.value.radiusBase;
   setTimeout(() => {
     proxy?.$modal.closeLoading();

src/settings.ts

@@ -1,4 +1,4 @@
-import { LanguageEnum } from '@/enums/LanguageEnum';
+import { LanguageEnum } from '@/enums/LanguageEnum';
 import { NavTypeEnum } from '@/enums/NavTypeEnum';
 
 const setting: DefaultSettings = {
@@ -76,6 +76,11 @@ const setting: DefaultSettings = {
   /**
    * 页面圆角大小
    */
-  radiusBase: 8
+  radiusBase: 8,
+
+  /**
+   * 表格全高内部滚动
+   */
+  fullHeightTable: true
 };
 export default setting;

src/store/modules/settings.ts

@@ -1,4 +1,4 @@
-import { defineStore } from 'pinia';
+import { defineStore } from 'pinia';
 import defaultSettings from '@/settings';
 import { useDynamicTitle } from '@/utils/dynamicTitle';
 import { useStorage } from '@vueuse/core';
@@ -15,7 +15,8 @@ export const useSettingsStore = defineStore('setting', () => {
     sideTheme: defaultSettings.sideTheme,
     theme: defaultSettings.theme,
     navType: defaultSettings.navType,
-    radiusBase: defaultSettings.radiusBase
+    radiusBase: defaultSettings.radiusBase,
+    fullHeightTable: defaultSettings.fullHeightTable
   });
   const title = ref<string>(defaultSettings.title);
   const theme = ref<string>(storageSetting.value.theme);
@@ -30,6 +31,7 @@ export const useSettingsStore = defineStore('setting', () => {
   const dark = ref<boolean>(defaultSettings.dark);
   const navType = ref<NavTypeEnum>(storageSetting.value.navType || NavTypeEnum.LEFT);
   const radiusBase = ref<number>(storageSetting.value.radiusBase ?? defaultSettings.radiusBase);
+  const fullHeightTable = ref<boolean>(storageSetting.value.fullHeightTable ?? defaultSettings.fullHeightTable);
 
   const setTitle = (value: string) => {
     title.value = value;
@@ -49,6 +51,7 @@ export const useSettingsStore = defineStore('setting', () => {
     dark,
     navType,
     radiusBase,
+    fullHeightTable,
     setTitle
   };
 });

src/types/global.d.ts

@@ -1,4 +1,4 @@
-import type { PropType as VuePropType, ComponentInternalInstance as ComponentInstance } from 'vue';
+import type { PropType as VuePropType, ComponentInternalInstance as ComponentInstance } from 'vue';
 import { LanguageEnum } from '@/enums/LanguageEnum';
 import { NavTypeEnum } from '@/enums/NavTypeEnum';
 
@@ -127,6 +127,11 @@ declare global {
      * 页面圆角大小
      */
     radiusBase: number;
+
+    /**
+     * 表格全高内部滚动
+     */
+    fullHeightTable: boolean;
   }
 
   declare interface DefaultSettings extends LayoutSetting {

src/views/monitor/operlog/index.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
@@ -61,15 +61,14 @@
         </el-row>
       </template>
 
-      <el-table
+      <el-table :max-height="tableMaxHeight" 
         ref="operLogTableRef"
         v-loading="loading"
         :data="operlogList"
         border
         :default-sort="defaultSort"
         @selection-change="handleSelectionChange"
-        @sort-change="handleSortChange"
-      >
+        @sort-change="handleSortChange">
         <el-table-column type="selection" width="50" align="center" />
         <el-table-column label="日志编号" align="center" prop="operId" />
         <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
@@ -106,8 +105,7 @@
           width="110"
           :show-overflow-tooltip="true"
           sortable="custom"
-          :sort-orders="['descending', 'ascending']"
-        >
+          :sort-orders="['descending', 'ascending']">
           <template #default="scope">
             <span>{{ scope.row.costTime }}毫秒</span>
           </template>
@@ -133,6 +131,7 @@ import { list, delOperlog, cleanOperlog } from '@/api/monitor/operlog';
 import { OperLogForm, OperLogQuery, OperLogVO } from '@/api/monitor/operlog/types';
 import OperInfoDialog from './oper-info-dialog.vue';
 
+import { useSettingsStore } from '@/store/modules/settings';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_oper_type, sys_common_status } = toRefs<any>(proxy?.useDict('sys_oper_type', 'sys_common_status'));
 
@@ -148,6 +147,13 @@ const defaultSort = ref<any>({ prop: 'operTime', order: 'descending' });
 const operLogTableRef = ref<ElTableInstance>();
 const queryFormRef = ref<ElFormInstance>();
 
+const settingsStore = useSettingsStore();
+
+const tableMaxHeight = computed(() => {
+  if (!settingsStore.fullHeightTable) return undefined;
+  return document.documentElement.clientHeight - 320;
+});
+
 const data = reactive<PageData<OperLogForm, OperLogQuery>>({
   form: {
     operId: undefined,