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

gen/index-tree.tsx.ftl

@@ -62,6 +62,7 @@ import { useDict } from '@/hooks/useDict';
 <#if enableExport>
 import { useTableExport } from '@/hooks/useTableExport';
 </#if>
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useTreeTableExpand } from '@/hooks/useTreeTableExpand';
 import { useUserStore } from '@/stores/userStore';
 <#if needDict>
@@ -103,6 +104,7 @@ const ${statusField}InactiveValue = <#if statusColumn.javaType == "Boolean">fals
 </#if>
 export default function ${BusinessName}Page() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1000);
   const [form] = Form.useForm<${BusinessName}Form>();
   const userInfo = useUserStore(state => state.userInfo);
 <#if needDict>
@@ -308,7 +310,7 @@ export default function ${BusinessName}Page() {
         actionRef={actionRef}
         rowKey="${treeCode}"
         columns={columns}
-        scroll={{ x: 1000 }}
+        scroll={tableScroll}
         pagination={false}
         search={{ labelWidth: 90 }}
         expandable={{

gen/index.tsx.ftl

@@ -64,6 +64,7 @@ import { useDateRangeQuery } from '@/hooks/useDateRangeQuery';
 <#if enableExport>
 import { useTableExport } from '@/hooks/useTableExport';
 </#if>
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useTableSelection } from '@/hooks/useTableSelection';
 import { useUserStore } from '@/stores/userStore';
 <#if needDict>
@@ -90,6 +91,7 @@ const ${statusField}InactiveValue = <#if statusColumn.javaType == "Boolean">fals
 </#if>
 export default function ${BusinessName}Page() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1000);
   const [form] = Form.useForm<${BusinessName}Form>();
   const userInfo = useUserStore(state => state.userInfo);
 <#if needDict>
@@ -292,7 +294,7 @@ const { applyDateRange: apply${column.capJavaField}DateRange } = useDateRangeQue
         actionRef={actionRef}
         rowKey="${pkColumn.javaField}"
         columns={columns}
-        scroll={{ x: 1000 }}
+        scroll={tableScroll}
         search={{ labelWidth: 90 }}
         pagination={{ defaultPageSize: 10, showSizeChanger: true }}
         rowSelection={{ selectedRowKeys: ids, onChange: handleSelectionChange }}

src/assets/styles/components/table-tools.less

@@ -83,6 +83,55 @@
   overflow: auto;
 }
 
+.ant-pro-layout .ant-table-body,
+.ant-pro-layout .ant-table-content,
+.ant-pro-layout .ant-table-sticky-scroll {
+  scrollbar-color: rgba(148, 163, 184, 0.42) transparent;
+  scrollbar-width: thin;
+}
+
+.ant-pro-layout .ant-table-body::-webkit-scrollbar,
+.ant-pro-layout .ant-table-content::-webkit-scrollbar,
+.ant-pro-layout .ant-table-sticky-scroll::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.ant-pro-layout .ant-table-body::-webkit-scrollbar-button,
+.ant-pro-layout .ant-table-content::-webkit-scrollbar-button,
+.ant-pro-layout .ant-table-sticky-scroll::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.ant-pro-layout .ant-table-body::-webkit-scrollbar-track,
+.ant-pro-layout .ant-table-content::-webkit-scrollbar-track,
+.ant-pro-layout .ant-table-sticky-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ant-pro-layout .ant-table-body::-webkit-scrollbar-thumb,
+.ant-pro-layout .ant-table-content::-webkit-scrollbar-thumb,
+.ant-pro-layout .ant-table-sticky-scroll::-webkit-scrollbar-thumb {
+  background-color: rgba(148, 163, 184, 0.38);
+  background-clip: padding-box;
+  border: 2px solid transparent;
+  border-radius: 999px;
+}
+
+.ant-pro-layout .ant-table-body::-webkit-scrollbar-thumb:hover,
+.ant-pro-layout .ant-table-content::-webkit-scrollbar-thumb:hover,
+.ant-pro-layout .ant-table-sticky-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(100, 116, 139, 0.56);
+}
+
+.ant-pro-layout .ant-table-body::-webkit-scrollbar-corner,
+.ant-pro-layout .ant-table-content::-webkit-scrollbar-corner,
+.ant-pro-layout .ant-table-sticky-scroll::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
 .icon-select-popover-react {
   width: min(450px, calc(100vw - 48px));
 }

src/components/layout/LayoutSettings.tsx

@@ -133,6 +133,9 @@ export default function LayoutSettings({ open, value, onChange, onOpenChange }:
       <SettingRow label="动态标题">
         <Switch checked={value.dynamicTitle} onChange={dynamicTitle => patchValue({ dynamicTitle })} />
       </SettingRow>
+      <SettingRow label="全高表格">
+        <Switch checked={value.fullHeightTable} onChange={fullHeightTable => patchValue({ fullHeightTable })} />
+      </SettingRow>
 
       <Space style={{ marginTop: 18 }}>
         <Button type="primary" icon={<SaveOutlined />} onClick={() => message.success('配置已保存')}>

src/layouts/BasicLayout.tsx

@@ -181,7 +181,8 @@ export default function BasicLayout() {
   const proLayoutClassName =
     [
       layoutSettings.fixedHeader ? undefined : 'layout-header-static-react',
-      effectiveNavDark ? 'layout-nav-dark-react' : 'layout-nav-light-react'
+      effectiveNavDark ? 'layout-nav-dark-react' : 'layout-nav-light-react',
+      layoutSettings.fullHeightTable ? 'layout-full-height-table-react' : undefined
     ]
       .filter(Boolean)
       .join(' ') || undefined;

src/pages/demo/demo/index.tsx

@@ -16,6 +16,7 @@ import { addDemo, delDemo, getDemo, listDemo, updateDemo } from '@/api/demo/demo
 import RowActions from '@/components/common/RowActions';
 import { useTableExport } from '@/hooks/useTableExport';
 import { useTableSelection } from '@/hooks/useTableSelection';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { hasPermi } from '@/utils/permission';
 import { toPageQuery, toTableData } from '@/utils/ruoyi';
@@ -24,6 +25,7 @@ const defaultDemoForm: DemoForm = {};
 
 export default function DemoDemoPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(760);
   const [form] = Form.useForm<DemoForm>();
   const userInfo = useUserStore(state => state.userInfo);
   const { ids, selectedOne, handleSelectionChange, clearSelection } = useTableSelection<DemoVO>(row => row.id);
@@ -103,7 +105,7 @@ export default function DemoDemoPage() {
         actionRef={actionRef}
         rowKey="id"
         columns={columns}
-        scroll={{ x: 760 }}
+        scroll={tableScroll}
         search={{ labelWidth: 90 }}
         pagination={{ defaultPageSize: 10, showSizeChanger: true }}
         rowSelection={{ selectedRowKeys: ids, onChange: handleSelectionChange }}

src/pages/demo/tree/index.tsx

@@ -15,6 +15,7 @@ import type { TreeForm, TreeQuery, TreeVO } from '@/api/demo/tree/types';
 import { addTree, delTree, getTree, listTree, updateTree } from '@/api/demo/tree';
 import RowActions from '@/components/common/RowActions';
 import { useTreeTableExpand } from '@/hooks/useTreeTableExpand';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { hasPermi } from '@/utils/permission';
 import { handleTree } from '@/utils/ruoyi';
@@ -37,6 +38,7 @@ function toTreeSelectData(nodes: TreeVO[]): TreeSelectNode[] {
 
 export default function DemoTreePage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(760);
   const [form] = Form.useForm<TreeForm>();
   const userInfo = useUserStore(state => state.userInfo);
   const [treeOptions, setTreeOptions] = useState<TreeVO[]>([]);
@@ -125,7 +127,7 @@ export default function DemoTreePage() {
         actionRef={actionRef}
         rowKey="id"
         columns={columns}
-        scroll={{ x: 760 }}
+        scroll={tableScroll}
         pagination={false}
         search={{ labelWidth: 90 }}
         expandable={{

src/pages/monitor/logininfo/index.tsx

@@ -10,6 +10,7 @@ import { useDateRangeQuery } from '@/hooks/useDateRangeQuery';
 import { useDict } from '@/hooks/useDict';
 import { useTableExport } from '@/hooks/useTableExport';
 import { useTableSelection } from '@/hooks/useTableSelection';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { hasPermi } from '@/utils/permission';
@@ -18,6 +19,7 @@ import { toPageQuery, toTableData, withTableSort } from '@/utils/ruoyi';
 
 export default function MonitorLoginInfoPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1352);
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('sys_device_type', 'sys_common_status');
   const { ids, selectedRows, selectedOne, handleSelectionChange, clearSelection } = useTableSelection<LoginInfoVO>(
@@ -130,7 +132,7 @@ export default function MonitorLoginInfoPage() {
         actionRef={actionRef}
         rowKey="infoId"
         columns={columns}
-        scroll={{ x: 1352 }}
+        scroll={tableScroll}
         search={{ labelWidth: 90 }}
         rowSelection={{ selectedRowKeys: ids, onChange: handleSelectionChange }}
         request={async (params, sort) => {

src/pages/monitor/online/index.tsx

@@ -8,6 +8,7 @@ import DictTag from '@/components/common/DictTag';
 import EllipsisText from '@/components/common/EllipsisText';
 import RowActions from '@/components/common/RowActions';
 import { useDict } from '@/hooks/useDict';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { hasPermi } from '@/utils/permission';
@@ -16,6 +17,7 @@ import { toPageQuery, toTableData } from '@/utils/ruoyi';
 
 export default function MonitorOnlinePage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1320);
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('sys_device_type');
   const canForceLogout = hasPermi(userInfo, ['monitor:online:forceLogout']);
@@ -119,7 +121,7 @@ export default function MonitorOnlinePage() {
         actionRef={actionRef}
         rowKey="tokenId"
         columns={columns}
-        scroll={{ x: 1320 }}
+        scroll={tableScroll}
         search={{ labelWidth: 90 }}
         request={async params => {
           const res = await listOnline(toPageQuery(params));

src/pages/monitor/operlog/index.tsx

@@ -14,6 +14,7 @@ import { useDateRangeQuery } from '@/hooks/useDateRangeQuery';
 import { useDict } from '@/hooks/useDict';
 import { useTableExport } from '@/hooks/useTableExport';
 import { useTableSelection } from '@/hooks/useTableSelection';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { hasPermi } from '@/utils/permission';
@@ -27,6 +28,7 @@ function dictText(dicts: DictData[] | undefined, value?: string | number) {
 
 export default function MonitorOperlogPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1680);
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('sys_oper_type', 'sys_common_status', 'sys_device_type');
   const { ids, handleSelectionChange, clearSelection } = useTableSelection<OperLogVO>(row => row.operId);
@@ -163,7 +165,7 @@ export default function MonitorOperlogPage() {
         rowKey="operId"
         columns={columns}
         search={{ labelWidth: 90 }}
-        scroll={{ x: 1680 }}
+        scroll={tableScroll}
         rowSelection={{ selectedRowKeys: ids, onChange: handleSelectionChange }}
         request={async (params, sort) => {
           const { operTimeRange, ...tableParams } = params;

src/pages/system/client/index.tsx

@@ -22,6 +22,7 @@ import RowActions from '@/components/common/RowActions';
 import { useDict } from '@/hooks/useDict';
 import { useTableExport } from '@/hooks/useTableExport';
 import { useTableSelection } from '@/hooks/useTableSelection';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { confirmAction } from '@/utils/modal';
@@ -42,6 +43,7 @@ function getRuleList(ruleList?: string[], ruleValue?: string) {
 
 export default function SystemClientPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1580);
   const [form] = Form.useForm<ClientForm>();
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('sys_normal_disable', 'sys_grant_type', 'sys_device_type');
@@ -210,7 +212,7 @@ export default function SystemClientPage() {
         rowKey="id"
         columns={columns}
         search={{ labelWidth: 95 }}
-        scroll={{ x: 1580 }}
+        scroll={tableScroll}
         rowSelection={{ selectedRowKeys: ids, onChange: handleSelectionChange }}
         request={async params => {
           const query = toPageQuery(params);

src/pages/system/config/index.tsx

@@ -25,6 +25,7 @@ import {
 import RowActions from '@/components/common/RowActions';
 import { useDict } from '@/hooks/useDict';
 import { useTableExport } from '@/hooks/useTableExport';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { confirmTitleSafe } from '@/utils/modal';
@@ -40,6 +41,7 @@ const configTypeTabs = [
 
 export default function SystemConfigPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(900);
   const [form] = Form.useForm<ConfigForm>();
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('sys_yes_no');
@@ -148,7 +150,7 @@ export default function SystemConfigPage() {
         actionRef={actionRef}
         rowKey="configId"
         columns={columns}
-        scroll={{ x: 900 }}
+        scroll={tableScroll}
         search={{ labelWidth: 90 }}
         request={async params => {
           const query = {

src/pages/system/dept/index.tsx

@@ -22,6 +22,7 @@ import EllipsisText from '@/components/common/EllipsisText';
 import RowActions from '@/components/common/RowActions';
 import { useDict } from '@/hooks/useDict';
 import { useTreeTableExpand } from '@/hooks/useTreeTableExpand';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { hasPermi } from '@/utils/permission';
@@ -49,6 +50,7 @@ function toTreeSelectData(depts: DeptVO[]): TreeSelectNode[] {
 
 export default function SystemDeptPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(850);
   const [form] = Form.useForm<DeptForm>();
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('sys_normal_disable');
@@ -191,7 +193,7 @@ export default function SystemDeptPage() {
         actionRef={actionRef}
         rowKey="deptId"
         columns={columns}
-        scroll={{ x: 850 }}
+        scroll={tableScroll}
         search={{ labelWidth: 90 }}
         pagination={false}
         expandable={{

src/pages/system/dict/index.tsx

@@ -20,6 +20,7 @@ import { addType, delType, getType, listType, refreshCache, updateType } from '@
 import EllipsisText from '@/components/common/EllipsisText';
 import RowActions from '@/components/common/RowActions';
 import { useTableExport } from '@/hooks/useTableExport';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useTableSelection } from '@/hooks/useTableSelection';
 import { useDictStore } from '@/stores/dictStore';
 import { useUserStore } from '@/stores/userStore';
@@ -53,6 +54,8 @@ function tagColor(listClass?: string) {
 export default function SystemDictPage() {
   const typeActionRef = useRef<ActionType | undefined>(undefined);
   const dataActionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll: typeTableScroll, tableWrapperRef: typeTableWrapperRef } = useTableScroll(702);
+  const { tableScroll: dataTableScroll, tableWrapperRef: dataTableWrapperRef } = useTableScroll(816);
   const [typeForm] = Form.useForm<DictTypeForm>();
   const [dataForm] = Form.useForm<DictDataForm>();
   const userInfo = useUserStore(state => state.userInfo);
@@ -264,12 +267,12 @@ export default function SystemDictPage() {
   return (
     <PageContainer title="字典管理">
       <div className="dict-grid">
-        <section className="dict-panel">
+        <section ref={typeTableWrapperRef} className="dict-panel">
           <ProTable<DictTypeVO, DictTypeQuery>
             actionRef={typeActionRef}
             rowKey="dictId"
             columns={typeColumns}
-            scroll={{ x: 702 }}
+            scroll={typeTableScroll}
             search={{ labelWidth: 90 }}
             rowClassName={row => (row.dictId === currentDict?.dictId ? 'dict-row-current' : '')}
             rowSelection={{ selectedRowKeys: typeIds, onChange: handleTypeSelectionChange }}
@@ -334,12 +337,12 @@ export default function SystemDictPage() {
           />
         </section>
 
-        <section className="dict-panel">
+        <section ref={dataTableWrapperRef} className="dict-panel">
           <ProTable<DictData, DictDataQuery>
             actionRef={dataActionRef}
             rowKey="dictCode"
             columns={dataColumns}
-            scroll={{ x: 816 }}
+            scroll={dataTableScroll}
             search={{ labelWidth: 90 }}
             params={{ dictType: currentDict?.dictType }}
             rowSelection={{ selectedRowKeys: dataIds, onChange: handleDataSelectionChange }}

src/pages/system/menu/index.tsx

@@ -22,6 +22,7 @@ import IconSelect from '@/components/common/IconSelect';
 import RowActions from '@/components/common/RowActions';
 import { useDict } from '@/hooks/useDict';
 import { useLoading } from '@/hooks/useLoading';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { routeIcon } from '@/utils/menu';
 import { dictOptions } from '@/utils/dict';
@@ -56,6 +57,7 @@ function toTreeNodes(nodes: MenuTreeOption[]): DataNode[] {
 
 export default function SystemMenuPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1120);
   const [form] = Form.useForm<MenuForm>();
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('sys_show_hide', 'sys_normal_disable', 'sys_yes_no');
@@ -200,7 +202,7 @@ export default function SystemMenuPage() {
         actionRef={actionRef}
         rowKey="menuId"
         columns={columns}
-        scroll={{ x: 1120 }}
+        scroll={tableScroll}
         pagination={false}
         search={{ labelWidth: 90 }}
         expandable={{ defaultExpandAllRows: false }}

src/pages/system/notice/index.tsx

@@ -22,6 +22,7 @@ import RichTextEditor from '@/components/common/RichTextEditor';
 import RowActions from '@/components/common/RowActions';
 import { useDict } from '@/hooks/useDict';
 import { useTableSelection } from '@/hooks/useTableSelection';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { resolveOssContent } from '@/utils/ossContent';
 import { dictOptions } from '@/utils/dict';
@@ -47,6 +48,7 @@ function SafeHtmlContent({ html }: { html: string }) {
 
 export default function SystemNoticePage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1120);
   const [form] = Form.useForm<NoticeForm>();
   const location = useLocation();
   const userInfo = useUserStore(state => state.userInfo);
@@ -184,7 +186,7 @@ export default function SystemNoticePage() {
         actionRef={actionRef}
         rowKey="noticeId"
         columns={columns}
-        scroll={{ x: 1120 }}
+        scroll={tableScroll}
         search={{ labelWidth: 90 }}
         rowSelection={{ selectedRowKeys: ids, onChange: handleSelectionChange }}
         request={async params => {

src/pages/system/oss/config.tsx

@@ -25,6 +25,7 @@ import EllipsisText from '@/components/common/EllipsisText';
 import RowActions from '@/components/common/RowActions';
 import { useDict } from '@/hooks/useDict';
 import { useTableSelection } from '@/hooks/useTableSelection';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { confirmAction } from '@/utils/modal';
@@ -46,6 +47,7 @@ function accessPolicyTag(value?: string) {
 
 export default function SystemOssConfigPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1460);
   const [form] = Form.useForm<OssConfigForm>();
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('sys_yes_no');
@@ -177,7 +179,7 @@ export default function SystemOssConfigPage() {
         actionRef={actionRef}
         rowKey="ossConfigId"
         columns={columns}
-        scroll={{ x: 1460 }}
+        scroll={tableScroll}
         search={{ labelWidth: 90 }}
         rowSelection={{ selectedRowKeys: ids, onChange: handleSelectionChange }}
         request={async params => {

src/pages/system/oss/index.tsx

@@ -20,6 +20,7 @@ import ImagePreview from '@/components/common/ImagePreview';
 import ImageUpload from '@/components/common/ImageUpload';
 import RowActions from '@/components/common/RowActions';
 import { useDateRangeQuery } from '@/hooks/useDateRangeQuery';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { saveValidatedBlob } from '@/utils/download';
 import { hasPermi } from '@/utils/permission';
@@ -31,6 +32,7 @@ function isImage(fileSuffix?: string) {
 
 export default function SystemOssPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1300);
   const userInfo = useUserStore(state => state.userInfo);
   const [selectedRows, setSelectedRows] = useState<OssVO[]>([]);
   const [previewListResource, setPreviewListResource] = useState(true);
@@ -146,7 +148,7 @@ export default function SystemOssPage() {
         actionRef={actionRef}
         rowKey="ossId"
         columns={columns}
-        scroll={{ x: 1300 }}
+        scroll={tableScroll}
         search={{ labelWidth: 90 }}
         rowSelection={{ selectedRowKeys: ids, onChange: (_, rows) => setSelectedRows(rows) }}
         request={async (params, sort) => {

src/pages/system/post/index.tsx

@@ -23,6 +23,7 @@ import TreePanel from '@/components/common/TreePanel';
 import { useDict } from '@/hooks/useDict';
 import { useTableExport } from '@/hooks/useTableExport';
 import { useTableSelection } from '@/hooks/useTableSelection';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { hasPermi } from '@/utils/permission';
@@ -47,6 +48,7 @@ function toTreeSelectData(nodes: DeptTreeVO[]): TreeSelectNode[] {
 
 export default function SystemPostPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(960);
   const [form] = Form.useForm<PostForm>();
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('sys_normal_disable');
@@ -182,7 +184,7 @@ export default function SystemPostPage() {
             actionRef={actionRef}
             rowKey="postId"
             columns={columns}
-            scroll={{ x: 960 }}
+            scroll={tableScroll}
             search={{ labelWidth: 90 }}
             rowSelection={{ selectedRowKeys: selectedIds, onChange: handleSelectionChange }}
             request={async params => {

src/pages/system/role/authUser.tsx

@@ -6,6 +6,7 @@ import { Button, message, Popconfirm, Tag } from 'antd';
 import { useRef, useState } from 'react';
 import type { UserQuery, UserVO } from '@/api/system/user/types';
 import { allocatedUserList, authUserCancel, authUserCancelAll } from '@/api/system/role';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { hasPermi } from '@/utils/permission';
 import { toPageQuery, toTableData } from '@/utils/ruoyi';
@@ -19,6 +20,7 @@ export default function RoleAuthUserPage() {
   const location = useLocation();
   const roleId = getRoleId(location.pathname);
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1210);
   const userInfo = useUserStore(state => state.userInfo);
   const [selectedRows, setSelectedRows] = useState<UserVO[]>([]);
   const [selectOpen, { setTrue: openSelectModal, setFalse: closeSelectModal }] = useBoolean(false);
@@ -76,7 +78,7 @@ export default function RoleAuthUserPage() {
         actionRef={actionRef}
         rowKey="userId"
         columns={columns}
-        scroll={{ x: 1210 }}
+        scroll={tableScroll}
         search={{ labelWidth: 90 }}
         pagination={{ defaultPageSize: 10, showSizeChanger: true }}
         rowSelection={{

src/pages/system/role/index.tsx

@@ -29,6 +29,7 @@ import { useDateRangeQuery } from '@/hooks/useDateRangeQuery';
 import { useDict } from '@/hooks/useDict';
 import { useTableExport } from '@/hooks/useTableExport';
 import { useTableSelection } from '@/hooks/useTableSelection';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { confirmAction } from '@/utils/modal';
@@ -48,6 +49,7 @@ const defaultRoleForm: RoleForm = {
 
 export default function SystemRolePage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1132);
   const [form] = Form.useForm<RoleForm>();
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('sys_normal_disable');
@@ -233,7 +235,7 @@ export default function SystemRolePage() {
         actionRef={actionRef}
         rowKey="roleId"
         columns={columns}
-        scroll={{ x: 1132 }}
+        scroll={tableScroll}
         search={{ labelWidth: 90 }}
         pagination={{ defaultPageSize: 10, showSizeChanger: true }}
         rowSelection={{

src/pages/system/user/authRole.tsx

@@ -5,6 +5,7 @@ import { type MouseEvent, useEffect, useMemo, useState } from 'react';
 import type { RoleVO } from '@/api/system/role/types';
 import type { UserVO } from '@/api/system/user/types';
 import { getAuthRole, updateAuthRole } from '@/api/system/user';
+import { useTableScroll } from '@/hooks/useTableScroll';
 function getUserId(pathname: string) {
   return pathname.split('/').filter(Boolean).at(-1) || '';
 }
@@ -19,6 +20,7 @@ function isSelectionControl(target: EventTarget | null) {
 export default function UserAuthRolePage() {
   const location = useLocation();
   const userId = getUserId(location.pathname);
+  const { tableScroll } = useTableScroll(1010);
   const [loading, setLoading] = useState(true);
   const [user, setUser] = useState<UserVO>();
   const [roles, setRoles] = useState<RoleVO[]>([]);
@@ -84,7 +86,7 @@ export default function UserAuthRolePage() {
         loading={loading}
         rowKey="roleId"
         columns={columns}
-        scroll={{ x: 1010 }}
+        scroll={tableScroll}
         dataSource={roles}
         search={false}
         pagination={{ defaultPageSize: 10, showSizeChanger: true }}

src/pages/system/user/index.tsx

@@ -36,6 +36,7 @@ import { useDateRangeQuery } from '@/hooks/useDateRangeQuery';
 import { useDict } from '@/hooks/useDict';
 import { useTableExport } from '@/hooks/useTableExport';
 import { useTableSelection } from '@/hooks/useTableSelection';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { confirmAction } from '@/utils/modal';
@@ -70,6 +71,7 @@ function toTreeSelectData(depts: DeptTreeVO[]): TreeSelectNode[] {
 
 export default function SystemUserPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1220);
   const [form] = Form.useForm<UserForm>();
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('sys_normal_disable', 'sys_user_gender');
@@ -352,7 +354,7 @@ export default function SystemUserPage() {
             actionRef={actionRef}
             rowKey="userId"
             columns={columns}
-            scroll={{ x: 1220 }}
+            scroll={tableScroll}
             search={{ labelWidth: 90 }}
             pagination={{ defaultPageSize: 10, showSizeChanger: true }}
             rowSelection={{

src/pages/tool/gen/index.tsx

@@ -18,6 +18,7 @@ import type { TableQuery, TableVO } from '@/api/tool/gen/types';
 import { batchGenCode, delTable, getDataNames, listTable, previewTable, synchDb } from '@/api/tool/gen';
 import EllipsisText from '@/components/common/EllipsisText';
 import { useDateRangeQuery } from '@/hooks/useDateRangeQuery';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { saveValidatedBlob } from '@/utils/download';
 import { hasPermi } from '@/utils/permission';
@@ -53,6 +54,7 @@ function previewLanguage(name: string) {
 export default function ToolGenPage() {
   const location = useLocation();
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1300);
   const userInfo = useUserStore(state => state.userInfo);
   const [selectedRows, setSelectedRows] = useState<TableVO[]>([]);
   const [dataNames, setDataNames] = useState<string[]>([]);
@@ -229,7 +231,7 @@ export default function ToolGenPage() {
         actionRef={actionRef}
         rowKey="tableId"
         columns={columns}
-        scroll={{ x: 1300 }}
+        scroll={tableScroll}
         search={{ labelWidth: 90 }}
         pagination={{ defaultCurrent: currentPage, defaultPageSize: 10, showSizeChanger: true }}
         rowSelection={{

src/pages/workflow/category/index.tsx

@@ -16,6 +16,7 @@ import type { CategoryForm, CategoryQuery, CategoryVO } from '@/api/workflow/cat
 import { addCategory, delCategory, getCategory, listCategory, updateCategory } from '@/api/workflow/category';
 import RowActions from '@/components/common/RowActions';
 import { useTreeTableExpand } from '@/hooks/useTreeTableExpand';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { hasPermi } from '@/utils/permission';
 import { handleTree } from '@/utils/ruoyi';
@@ -38,6 +39,7 @@ function toTreeSelectData(nodes: CategoryVO[]): CategorySelectNode[] {
 
 export default function WorkflowCategoryPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(900);
   const [form] = Form.useForm<CategoryForm>();
   const userInfo = useUserStore(state => state.userInfo);
   const [categoryOptions, setCategoryOptions] = useState<CategoryVO[]>([]);
@@ -122,7 +124,7 @@ export default function WorkflowCategoryPage() {
         actionRef={actionRef}
         rowKey="categoryId"
         columns={columns}
-        scroll={{ x: 900 }}
+        scroll={tableScroll}
         pagination={false}
         search={{ labelWidth: 90 }}
         expandable={{

src/pages/workflow/leave/index.tsx

@@ -19,6 +19,7 @@ import RowActions from '@/components/common/RowActions';
 import { useDict } from '@/hooks/useDict';
 import { useTableExport } from '@/hooks/useTableExport';
 import { useTableSelection } from '@/hooks/useTableSelection';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { hasPermi } from '@/utils/permission';
@@ -42,6 +43,7 @@ function editableStatus(status?: string) {
 
 export default function WorkflowLeavePage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1160);
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('wf_business_status');
   const { ids, handleSelectionChange, clearSelection } = useTableSelection<LeaveVO>(row => row.id);
@@ -148,7 +150,7 @@ export default function WorkflowLeavePage() {
         actionRef={actionRef}
         rowKey="id"
         columns={columns}
-        scroll={{ x: 1160 }}
+        scroll={tableScroll}
         search={{ labelWidth: 100 }}
         rowSelection={{ selectedRowKeys: ids, onChange: handleSelectionChange }}
         request={async params => {

src/pages/workflow/processDefinition/index.tsx

@@ -32,6 +32,7 @@ import {
 import EllipsisText from '@/components/common/EllipsisText';
 import TreePanel from '@/components/common/TreePanel';
 import { useSearchReset } from '@/hooks/useSearchReset';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { saveValidatedBlob } from '@/utils/download';
 import { confirmAction } from '@/utils/modal';
@@ -72,6 +73,7 @@ function requestDefinitionList(
 export default function WorkflowProcessDefinitionPage() {
   const location = useLocation();
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1240);
   const [form] = Form.useForm<FlowDefinitionForm>();
   const userInfo = useUserStore(state => state.userInfo);
   const [categoryOptions, setCategoryOptions] = useState<CategoryTreeVO[]>([]);
@@ -354,7 +356,7 @@ export default function WorkflowProcessDefinitionPage() {
             actionRef={actionRef}
             rowKey="id"
             columns={columns}
-            scroll={{ x: 1240 }}
+            scroll={tableScroll}
             search={{ labelWidth: 120 }}
             form={{ onReset: resetSearch }}
             pagination={{ defaultPageSize: 10, showSizeChanger: true }}

src/pages/workflow/processInstance/index.tsx

@@ -34,6 +34,7 @@ import UserSelect from '@/components/common/UserSelect';
 import { useDict } from '@/hooks/useDict';
 import { useLoading } from '@/hooks/useLoading';
 import { useSearchReset } from '@/hooks/useSearchReset';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { confirmAction } from '@/utils/modal';
@@ -60,6 +61,7 @@ function openBusinessForm(row: FlowInstanceVO) {
 
 export default function WorkflowProcessInstancePage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1430);
   const [invalidForm] = Form.useForm<{ comment?: string }>();
   const [variableForm] = Form.useForm<{ key?: string; value?: string }>();
   const userInfo = useUserStore(state => state.userInfo);
@@ -311,7 +313,7 @@ export default function WorkflowProcessInstancePage() {
             actionRef={actionRef}
             rowKey="id"
             columns={columns}
-            scroll={{ x: 1430 }}
+            scroll={tableScroll}
             search={{ labelWidth: 110 }}
             form={{ onReset: resetSearch }}
             pagination={{ defaultPageSize: 10, showSizeChanger: true }}

src/pages/workflow/spel/index.tsx

@@ -19,6 +19,7 @@ import EllipsisText from '@/components/common/EllipsisText';
 import RowActions from '@/components/common/RowActions';
 import { useDict } from '@/hooks/useDict';
 import { useTableSelection } from '@/hooks/useTableSelection';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { hasPermi } from '@/utils/permission';
@@ -53,6 +54,7 @@ function buildViewSpel(values: Pick<SpelForm, 'componentName' | 'methodName' | '
 
 export default function WorkflowSpelPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1110);
   const [form] = Form.useForm<SpelForm>();
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('sys_normal_disable');
@@ -162,7 +164,7 @@ export default function WorkflowSpelPage() {
         actionRef={actionRef}
         rowKey="id"
         columns={columns}
-        scroll={{ x: 1110 }}
+        scroll={tableScroll}
         search={{ labelWidth: 90 }}
         rowSelection={{ selectedRowKeys: ids, onChange: handleSelectionChange }}
         request={async params => {

src/pages/workflow/task/allTaskWaiting.tsx

@@ -17,6 +17,7 @@ import ProcessMeddle from '@/components/workflow/ProcessMeddle';
 import UserNameDisplay from '@/components/workflow/UserNameDisplay';
 import { useDict } from '@/hooks/useDict';
 import { useSearchReset } from '@/hooks/useSearchReset';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { dictOptions } from '@/utils/dict';
 import { confirmTitleSafe } from '@/utils/modal';
 import { toPageQuery, toTableData } from '@/utils/ruoyi';
@@ -41,6 +42,7 @@ function openBusinessForm(row: FlowTaskVO) {
 
 export default function WorkflowAllTaskWaitingPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1464);
   const [urgeForm] = Form.useForm<{ message: string; messageType: string[] }>();
   const dicts = useDict('wf_business_status', 'wf_task_status', 'sys_normal_disable');
   const [activeTab, setActiveTab] = useState<AllTaskTab>('waiting');
@@ -248,7 +250,7 @@ export default function WorkflowAllTaskWaitingPage() {
         actionRef={actionRef}
         rowKey="id"
         columns={columns}
-        scroll={{ x: 1464 }}
+        scroll={tableScroll}
         search={{ labelWidth: 100 }}
         form={{ onReset: resetSearch }}
         pagination={{ defaultPageSize: 10, showSizeChanger: true }}

src/pages/workflow/task/myDocument.tsx

@@ -12,6 +12,7 @@ import EllipsisText from '@/components/common/EllipsisText';
 import RowActions from '@/components/common/RowActions';
 import TreePanel from '@/components/common/TreePanel';
 import { useDict } from '@/hooks/useDict';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { useUserStore } from '@/stores/userStore';
 import { dictOptions } from '@/utils/dict';
 import { hasPermi } from '@/utils/permission';
@@ -34,6 +35,7 @@ function openBusinessForm(row: FlowInstanceVO, type: 'update' | 'view') {
 
 export default function WorkflowMyDocumentPage() {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1240);
   const userInfo = useUserStore(state => state.userInfo);
   const dicts = useDict('wf_business_status');
   const [categoryOptions, setCategoryOptions] = useState<CategoryTreeVO[]>([]);
@@ -167,7 +169,7 @@ export default function WorkflowMyDocumentPage() {
             actionRef={actionRef}
             rowKey="id"
             columns={columns}
-            scroll={{ x: 1240 }}
+            scroll={tableScroll}
             search={{ labelWidth: 120 }}
             form={{ onReset: resetSearch }}
             pagination={{ defaultPageSize: 10, showSizeChanger: true }}

src/pages/workflow/task/taskList.tsx

@@ -14,6 +14,7 @@ import RowActions from '@/components/common/RowActions';
 import UserSelect from '@/components/common/UserSelect';
 import UserNameDisplay from '@/components/workflow/UserNameDisplay';
 import { useDict } from '@/hooks/useDict';
+import { useTableScroll } from '@/hooks/useTableScroll';
 import { dictOptions } from '@/utils/dict';
 import { toPageQuery, toTableData } from '@/utils/ruoyi';
 
@@ -48,6 +49,7 @@ function openBusinessForm(row: FlowTaskVO, type: 'approval' | 'view') {
 
 export default function WorkflowTaskListPage({ type }: WorkflowTaskListPageProps) {
   const actionRef = useRef<ActionType | undefined>(undefined);
+  const { tableScroll } = useTableScroll(1460);
   const dicts = useDict('wf_business_status', 'wf_task_status');
   const [selectedApplicants, setSelectedApplicants] = useState<UserVO[]>([]);
   const [applicantOpen, { setTrue: openApplicantModal, setFalse: closeApplicantModal }] = useBoolean(false);
@@ -210,7 +212,7 @@ export default function WorkflowTaskListPage({ type }: WorkflowTaskListPageProps
         actionRef={actionRef}
         rowKey="id"
         columns={columns}
-        scroll={{ x: 1460 }}
+        scroll={tableScroll}
         search={{ labelWidth: 100 }}
         form={{ onReset: resetSearch }}
         request={async params => {

src/stores/appStore.ts

@@ -17,6 +17,7 @@ export interface LayoutSettingsValue {
   fixedHeader: boolean;
   sidebarLogo: boolean;
   dynamicTitle: boolean;
+  fullHeightTable: boolean;
 }
 
 export const layoutSettingsStorageKey = 'layout-setting-react';
@@ -33,7 +34,8 @@ export const defaultLayoutSettings: LayoutSettingsValue = {
   tagsIcon: true,
   fixedHeader: true,
   sidebarLogo: true,
-  dynamicTitle: true
+  dynamicTitle: true,
+  fullHeightTable: true
 };
 
 export function loadLayoutSettings(): LayoutSettingsValue {