add 新增 页面表单全高表格内部数据滚动功能

src/layout/components/AppMain.vue

@@ -13,12 +13,14 @@
 
 <script setup name="AppMain" lang="ts">
 import animateConfig from '@/animate';
+import { useFullHeightTable } from '@/hooks/table/useFullHeightTable';
 import { useSettingsStore } from '@/store/modules/settings';
 import { useTagsViewStore } from '@/store/modules/tagsView';
 import IframeToggle from './IframeToggle/index.vue';
 
 const route = useRoute();
 const tagsViewStore = useTagsViewStore();
+useFullHeightTable();
 
 // 随机动画集合
 const animate = ref<string>('');

src/layout/components/Settings/index.vue

@@ -154,6 +154,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>
@@ -260,6 +267,7 @@ const saveSetting = () => {
   settings.value.theme = storeSettings.value.theme;
   settings.value.navType = storeSettings.value.navType;
   settings.value.radiusBase = storeSettings.value.radiusBase;
+  settings.value.fullHeightTable = storeSettings.value.fullHeightTable;
   setTimeout(() => {
     modal.closeLoading();
   }, 1000);

src/settings.ts

@@ -81,6 +81,11 @@ const setting: DefaultSettings = {
   /**
    * 页面圆角大小
    */
-  radiusBase: 14
+  radiusBase: 14,
+
+  /**
+   * 表格全高内部滚动
+   */
+  fullHeightTable: true
 };
 export default setting;

src/store/modules/settings.ts

@@ -16,7 +16,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);
@@ -32,6 +33,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;
@@ -52,6 +54,7 @@ export const useSettingsStore = defineStore('setting', () => {
     dark,
     navType,
     radiusBase,
+    fullHeightTable,
     setTitle
   };
 });

src/types/global.d.ts

@@ -131,6 +131,11 @@ declare global {
      * 页面圆角大小
      */
     radiusBase: number;
+
+    /**
+     * 表格全高内部滚动
+     */
+    fullHeightTable: boolean;
   }
 
   interface DefaultSettings extends LayoutSetting {