12

frontend1/src/pages/system/user-data-scope/index.less

@@ -1,6 +1,5 @@
 .user-data-scope-page {
   min-height: 100%;
-  overflow: hidden;
 }
 
 .user-data-scope-overview {
@@ -39,43 +38,26 @@
 }
 
 .user-data-scope-table-card {
-  flex: 1;
   min-height: 0;
   overflow: hidden;
 
   .ant-card-body {
-    height: 100%;
+    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
   }
 }
 
 .user-data-scope-table {
-  min-height: 0;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-
   .ant-spin-nested-loading,
   .ant-spin-container {
     min-height: 0;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
   }
 
-  .ant-table {
+  .ant-table-body {
-    min-height: 0;
+    overflow-y: auto !important;
-    flex: 1;
-  }
-
-  .ant-table-container {
-    min-height: 0;
   }
 
   .ant-table-pagination {
-    flex-shrink: 0;
+    background: #fff;
     margin: 12px 16px !important;
   }
 }

frontend1/src/pages/system/user-data-scope/index.tsx

@@ -1,7 +1,7 @@
 import { App, Button, Card, Col, DatePicker, Drawer, Form, Input, Popconfirm, Row, Select, Space, Table, Tag, Tooltip, Typography } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import dayjs from "dayjs";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined, TeamOutlined } from "@ant-design/icons";
 import PageHeader from "@/components/shared/PageHeader";
 import { deleteUserDataScopeGrant, fetchUsersByRoleId, listRoles, listTenants, listUserDataScopeGrants, listUserDataScopeUsers, saveUserDataScopeAssignment } from "@/api";
@@ -148,6 +148,8 @@ export default function UserDataScopePage() {
   const [tenants, setTenants] = useState<SysTenant[]>([]);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [editingGrantGroup, setEditingGrantGroup] = useState<UserDataScopeGrantGroup | null>(null);
+  const [tableScrollY, setTableScrollY] = useState(360);
+  const tableCardRef = useRef<HTMLDivElement | null>(null);
   const [selectedTenantId, setSelectedTenantId] = useState<number | undefined>(() => getActiveTenantId());
   const [query, setQuery] = useState<{ keyword?: string; viewerUserId?: number; resourceType?: string; current: number; pageSize: number }>({
     current: 1,
@@ -203,6 +205,30 @@ export default function UserDataScopePage() {
     loadPageData();
   }, [loadPageData]);
 
+  useEffect(() => {
+    const updateTableScrollY = () => {
+      const tableCard = tableCardRef.current;
+      if (!tableCard) {
+        return;
+      }
+      const rect = tableCard.getBoundingClientRect();
+      const footerReserve = 112;
+      const nextScrollY = Math.max(260, Math.floor(window.innerHeight - rect.top - footerReserve));
+      setTableScrollY(nextScrollY);
+    };
+
+    updateTableScrollY();
+    window.addEventListener("resize", updateTableScrollY);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(updateTableScrollY);
+    if (observer && tableCardRef.current) {
+      observer.observe(tableCardRef.current);
+    }
+    return () => {
+      window.removeEventListener("resize", updateTableScrollY);
+      observer?.disconnect();
+    };
+  }, [filteredGrantGroups.length, query.pageSize]);
+
   const userOptions = useMemo(() => users.map((user) => ({
     label: (
       <Space direction="vertical" size={0}>
@@ -516,7 +542,7 @@ export default function UserDataScopePage() {
         </div>
       </Card>
 
-      <Card className="app-page__content-card user-data-scope-table-card" styles={{ body: { padding: 0 } }}>
+      <Card ref={tableCardRef} className="app-page__content-card user-data-scope-table-card" styles={{ body: { padding: 0 } }}>
         <Table
           className="user-data-scope-table"
           rowKey="id"
@@ -524,7 +550,7 @@ export default function UserDataScopePage() {
           columns={columns}
           dataSource={pagedGrantGroups}
           size="middle"
-          scroll={{ y: "max(260px, calc(100vh - 470px))", x: 980 }}
+          scroll={{ y: tableScrollY, x: 980 }}
           pagination={getStandardPagination(
             filteredGrantGroups.length,
             query.current,