diff --git a/gen/index-tree.tsx.ftl b/gen/index-tree.tsx.ftl index 9284902c..6c8eb411 100644 --- a/gen/index-tree.tsx.ftl +++ b/gen/index-tree.tsx.ftl @@ -62,6 +62,7 @@ import { useDict } from '@/hooks/useDict'; <#if enableExport> import { useTableExport } from '@/hooks/useTableExport'; +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 export default function ${BusinessName}Page() { const actionRef = useRef(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={{ diff --git a/gen/index.tsx.ftl b/gen/index.tsx.ftl index e5ca8dec..b6444d22 100644 --- a/gen/index.tsx.ftl +++ b/gen/index.tsx.ftl @@ -64,6 +64,7 @@ import { useDateRangeQuery } from '@/hooks/useDateRangeQuery'; <#if enableExport> import { useTableExport } from '@/hooks/useTableExport'; +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 export default function ${BusinessName}Page() { const actionRef = useRef(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 }} diff --git a/src/assets/styles/components/table-tools.less b/src/assets/styles/components/table-tools.less index 869aff42..7e1add8b 100644 --- a/src/assets/styles/components/table-tools.less +++ b/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)); } diff --git a/src/components/layout/LayoutSettings.tsx b/src/components/layout/LayoutSettings.tsx index c6f4db7a..00139ded 100644 --- a/src/components/layout/LayoutSettings.tsx +++ b/src/components/layout/LayoutSettings.tsx @@ -133,6 +133,9 @@ export default function LayoutSettings({ open, value, onChange, onOpenChange }: patchValue({ dynamicTitle })} /> + + patchValue({ fullHeightTable })} /> +