fix: 列表高度撑满

src/components/BaseCrud/index.tsx

@@ -1,5 +1,5 @@
 import { useIntl } from '@@/plugin-locale/localeExports';
-import { Button, Tooltip } from 'antd';
+import { Button, Card, Tooltip } from 'antd';
 import type { ActionType, ProColumns, RequestData } from '@jetlinks/pro-table';
 import ProTable from '@jetlinks/pro-table';
 
@@ -17,6 +17,7 @@ import type { Form } from '@formily/core';
 import SearchComponent from '@/components/SearchComponent';
 import type { ProFormInstance } from '@ant-design/pro-form';
 import type { SearchConfig } from '@ant-design/pro-form/lib/components/Submitter';
+import { useDomFullHeight } from '@/hooks';
 
 export type Option = {
   model: 'edit' | 'preview' | 'add';
@@ -52,6 +53,7 @@ export type Props<T> = {
 };
 
 const BaseCrud = <T extends Record<string, any>>(props: Props<T>) => {
+  const { minHeight } = useDomFullHeight(`.BaseCrud`);
   const intl = useIntl();
   const ref = useRef<ProFormInstance>();
   const {
@@ -76,8 +78,9 @@ const BaseCrud = <T extends Record<string, any>>(props: Props<T>) => {
   } = props;
 
   const [param, setParam] = useState({});
+
   return (
-    <>
+    <Card className="BaseCrud" style={{ minHeight }}>
       <SearchComponent<T>
         field={columns}
         onSearch={async (data) => {
@@ -168,7 +171,7 @@ const BaseCrud = <T extends Record<string, any>>(props: Props<T>) => {
         customForm={form}
         footer={footer}
       />
-    </>
+    </Card>
   );
 };
 

src/pages/Log/Access/index.tsx

@@ -9,6 +9,7 @@ import { EyeOutlined } from '@ant-design/icons';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import SearchComponent from '@/components/SearchComponent';
 import Detail from '@/pages/Log/Access/Detail';
+import { useDomFullHeight } from '@/hooks';
 
 const service = new BaseService('logger/access');
 
@@ -18,6 +19,7 @@ const Access = () => {
   const [param, setParam] = useState({});
   const [visible, setVisible] = useState<boolean>(false);
   const [current, setCurrent] = useState<Partial<AccessLogItem>>({});
+  const { minHeight } = useDomFullHeight(`.accessLog`, 24);
 
   const columns: ProColumns<AccessLogItem>[] = [
     {
@@ -129,6 +131,8 @@ const Access = () => {
       <ProTable<AccessLogItem>
         columns={columns}
         params={param}
+        tableClassName={'accessLog'}
+        tableStyle={{ minHeight }}
         scroll={{ x: 1366 }}
         request={async (params) =>
           service.query({ ...params, sorts: [{ name: 'responseTime', order: 'desc' }] })

src/pages/Log/System/index.tsx

@@ -9,6 +9,7 @@ import BaseService from '@/utils/BaseService';
 import { EyeOutlined } from '@ant-design/icons';
 import SearchComponent from '@/components/SearchComponent';
 import Detail from '@/pages/Log/System/Detail';
+import { useDomFullHeight } from '@/hooks';
 
 const service = new BaseService<SystemLogItem>('logger/system');
 const System = () => {
@@ -17,6 +18,7 @@ const System = () => {
   const [param, setParam] = useState({});
   const [visible, setVisible] = useState<boolean>(false);
   const [current, setCurrent] = useState<Partial<SystemLogItem>>({});
+  const { minHeight } = useDomFullHeight(`.systemLog`, 24);
 
   const columns: ProColumns<SystemLogItem>[] = [
     {
@@ -122,6 +124,8 @@ const System = () => {
         columns={columns}
         params={param}
         scroll={{ x: 1366 }}
+        tableClassName={'systemLog'}
+        tableStyle={{ minHeight }}
         request={async (params) =>
           service.query({ ...params, sorts: [{ name: 'createTime', order: 'desc' }] })
         }

src/pages/account/NotificationRecord/index.tsx

@@ -10,6 +10,7 @@ import Detail from './detail';
 import { Badge, message } from 'antd';
 import Service from './service';
 import encodeQuery from '@/utils/encodeQuery';
+import { useDomFullHeight } from '@/hooks';
 
 export const service = new Service('notifications');
 
@@ -20,6 +21,7 @@ const NotificationRecord = () => {
   const [visible, setVisible] = useState<boolean>(false);
   const [current, setCurrent] = useState<Partial<NotifitionRecord>>({});
   const [typeList, setTypeList] = useState<any>({});
+  const { minHeight } = useDomFullHeight(`.record`, 24);
 
   useEffect(() => {
     service.getProvidersList().then((resp) => {
@@ -148,6 +150,8 @@ const NotificationRecord = () => {
         rowKey="id"
         scroll={{ x: 1366 }}
         search={false}
+        tableClassName={'record'}
+        tableStyle={{ minHeight }}
         request={async (params) =>
           service.queryList(encodeQuery({ ...params, sorts: { notifyTime: 'desc' } }))
         }

src/pages/account/NotificationSubscription/index.tsx

@@ -16,6 +16,7 @@ import { Badge, message } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import Save from './save';
 import Service from './service';
+import { useDomFullHeight } from '@/hooks';
 
 export const service = new Service('notifications/subscriptions');
 
@@ -26,6 +27,7 @@ const NotificationSubscription = observer(() => {
   const [visible, setVisible] = useState<boolean>(false);
   const [current, setCurrent] = useState<Partial<NotifitionSubscriptionItem>>({});
   const [typeList, setTypeList] = useState<any>({});
+  const { minHeight } = useDomFullHeight(`.subscription`, 24);
 
   useEffect(() => {
     service.getProvidersList().then((resp) => {
@@ -182,6 +184,8 @@ const NotificationSubscription = observer(() => {
         columns={columns}
         scroll={{ x: 1366 }}
         search={false}
+        tableClassName={'subscription'}
+        tableStyle={{ minHeight }}
         rowKey="id"
         request={async (params) =>
           service.query({ ...params, sorts: [{ name: 'createTime', order: 'desc' }] })

src/pages/link/Channel/Modbus/Access/index.tsx

@@ -19,6 +19,7 @@ import styles from './index.less';
 import AddPoint from './addPoint';
 import useSendWebsocketMessage from '@/hooks/websocket/useSendWebsocketMessage';
 import { map } from 'rxjs/operators';
+import { useDomFullHeight } from '@/hooks';
 
 const Access = () => {
   const intl = useIntl();
@@ -38,6 +39,7 @@ const Access = () => {
   const [propertyValue, setPropertyValue] = useState<any>({});
   const wsRef = useRef<any>();
   const [filterList, setFilterList] = useState([]);
+  const { minHeight } = useDomFullHeight(`.modbusAccess`, 26);
 
   const columns: ProColumns<any>[] = [
     {
@@ -222,14 +224,14 @@ const Access = () => {
     return () => wsRef.current && wsRef.current?.unsubscribe();
   }, [data]);
 
-  useEffect(() => {
-    console.log(deviceId);
-  }, [deviceId]);
+  // useEffect(() => {
+  //   console.log(deviceId);
+  // }, [deviceId]);
 
   return (
     <PageContainer>
       <Card className={styles.list}>
-        <div style={{ display: 'flex' }}>
+        <div className="modbusAccess" style={{ display: 'flex', minHeight }}>
           <div>
             <div style={{ width: '250px', marginTop: 15 }}>
               <Input.Search

src/pages/link/Channel/Modbus/index.tsx

@@ -17,6 +17,7 @@ import SearchComponent from '@/components/SearchComponent';
 import Service from './service';
 import Save from './Save';
 import { getMenuPathByCode } from '@/utils/menu';
+import { useDomFullHeight } from '@/hooks';
 
 export const service = new Service('modbus/master');
 
@@ -27,6 +28,7 @@ const Modbus = () => {
   const { permission } = PermissionButton.usePermission('link/Channel/Modbus');
   const [visible, setVisible] = useState<boolean>(false);
   const [current, setCurrent] = useState<Partial<OpaUa>>({});
+  const { minHeight } = useDomFullHeight(`.modbus`, 24);
 
   const iconMap = new Map();
   iconMap.set('1', require('/public/images/channel/1.png'));
@@ -243,6 +245,8 @@ const Modbus = () => {
         rowKey="id"
         scroll={{ x: 1366 }}
         search={false}
+        tableClassName={'modbus'}
+        tableStyle={{ minHeight }}
         headerTitle={
           <PermissionButton
             onClick={() => {

src/pages/link/Channel/Opcua/Access/index.tsx

@@ -19,6 +19,7 @@ import styles from './index.less';
 import AddPoint from './addPoint';
 import useSendWebsocketMessage from '@/hooks/websocket/useSendWebsocketMessage';
 import { map } from 'rxjs/operators';
+import { useDomFullHeight } from '@/hooks';
 
 const Access = () => {
   const intl = useIntl();
@@ -41,6 +42,7 @@ const Access = () => {
   const [bindDeviceId, setBindDeviceId] = useState<any>('');
   const wsRef = useRef<any>();
   const [filterList, setFilterList] = useState([]);
+  const { minHeight } = useDomFullHeight(`.opcuaAccess`, 26);
 
   const columns: ProColumns<any>[] = [
     {
@@ -230,7 +232,7 @@ const Access = () => {
   return (
     <PageContainer>
       <Card className={styles.list}>
-        <div style={{ display: 'flex' }}>
+        <div className="opcuaAccess" style={{ display: 'flex', minHeight }}>
           <div>
             <div style={{ width: '250px', marginTop: 15 }}>
               <Input.Search

src/pages/link/Channel/Opcua/index.tsx

@@ -17,6 +17,7 @@ import SearchComponent from '@/components/SearchComponent';
 import Service from './service';
 import Save from './Save';
 import { getMenuPathByCode } from '@/utils/menu';
+import { useDomFullHeight } from '@/hooks';
 
 export const service = new Service('opc/client');
 
@@ -27,6 +28,7 @@ const Opcua = () => {
   const { permission } = PermissionButton.usePermission('link/Channel/Opcua');
   const [visible, setVisible] = useState<boolean>(false);
   const [current, setCurrent] = useState<Partial<OpaUa>>({});
+  const { minHeight } = useDomFullHeight(`.opcua`, 24);
 
   const iconMap = new Map();
   iconMap.set('1', require('/public/images/channel/1.png'));
@@ -252,6 +254,8 @@ const Opcua = () => {
         columns={columns}
         rowKey="id"
         search={false}
+        tableClassName={'opcua'}
+        tableStyle={{ minHeight }}
         headerTitle={
           <PermissionButton
             onClick={() => {

src/pages/media/Cascade/Channel/index.tsx

@@ -10,6 +10,7 @@ import { useIntl, useLocation } from 'umi';
 import BindChannel from './BindChannel';
 import BadgeStatus, { StatusColorEnum } from '@/components/BadgeStatus';
 import { PermissionButton } from '@/components';
+import { useDomFullHeight } from '@/hooks';
 
 const Channel = () => {
   const location: any = useLocation();
@@ -22,6 +23,7 @@ const Channel = () => {
   const [data, setData] = useState<string>('');
   const [popVisible, setPopvisible] = useState<string>('');
   const { permission } = PermissionButton.usePermission('media/Cascade');
+  const { minHeight } = useDomFullHeight(`.cascadeDevice`, 24);
 
   const unbind = async (list: string[]) => {
     const resp = await service.unbindChannel(id, list);
@@ -205,6 +207,8 @@ const Channel = () => {
         columns={columns}
         scroll={{ x: 1366 }}
         search={false}
+        tableClassName={'cascadeDevice'}
+        tableStyle={{ minHeight }}
         headerTitle={'通道列表'}
         request={async (params) => {
           return service.queryBindChannel(id, {

src/pages/media/Device/Channel/index.tsx

@@ -22,6 +22,7 @@ import { ProviderValue } from '../index';
 import Live from './Live';
 import { getButtonPermission, getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
 import Tree from './Tree';
+import { useDomFullHeight } from '@/hooks';
 
 export const service = new Service('media');
 
@@ -35,6 +36,7 @@ export default () => {
   const [deviceId, setDeviceId] = useState('');
   const [channelId, setChannelId] = useState('');
   const [type, setType] = useState('');
+  const { minHeight } = useDomFullHeight(`.channelDevice`, 24);
 
   const location = useLocation();
   const history = useHistory();
@@ -234,6 +236,8 @@ export default () => {
             columns={columns}
             actionRef={actionRef}
             // scroll={{x:1366}}
+            tableClassName={'channelDevice'}
+            tableStyle={{ minHeight }}
             options={{ fullScreen: true }}
             params={queryParam}
             defaultParams={[

src/pages/media/Stream/index.less

@@ -52,3 +52,6 @@
     }
   }
 }
+.stream {
+  display: flex;
+}

src/pages/media/Stream/index.tsx

@@ -11,6 +11,7 @@ import styles from './index.less';
 import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
 import { model } from '@formily/reactive';
 import { PermissionButton } from '@/components';
+import { useDomFullHeight } from '@/hooks';
 
 export const service = new Service('media/server');
 
@@ -25,6 +26,7 @@ const Stream = () => {
   const [param, setParam] = useState<any>({ pageSize: 10, terms: [] });
   const permissionCode = 'media/Stream';
   const { permission } = PermissionButton.usePermission(permissionCode);
+  const { minHeight } = useDomFullHeight(`.stream`);
 
   const columns: ProColumns<StreamItem>[] = [
     {
@@ -75,7 +77,7 @@ const Stream = () => {
           });
         }}
       />
-      <Card>
+      <Card className="stream" style={{ minHeight }}>
         {dataSource.data.length > 0 ? (
           <>
             <PermissionButton
@@ -202,6 +204,7 @@ const Stream = () => {
           </>
         ) : (
           <Empty
+            style={{ marginTop: '10%' }}
             description={
               <span>
                 暂无数据，请先

src/pages/rule-engine/Alarm/Configuration/index.tsx

@@ -64,7 +64,7 @@ const Configuration = () => {
     {
       title: '关联场景联动',
       dataIndex: 'sceneName',
-      width: 160,
+      width: 250,
       render: (text: any, record: any) => (
         <PermissionButton
           type={'link'}

src/pages/rule-engine/Alarm/Log/TabComponent/index.tsx

@@ -13,6 +13,7 @@ import { service } from '@/pages/rule-engine/Alarm/Log';
 import { getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
 import { useHistory } from 'umi';
 import classNames from 'classnames';
+import { useDomFullHeight } from '@/hooks';
 
 interface Props {
   type: string;
@@ -38,6 +39,7 @@ colorMap.set(4, '#999999');
 colorMap.set(5, '#C4C4C4');
 
 const TabComponent = observer((props: Props) => {
+  const { minHeight } = useDomFullHeight(`.alarmLog`);
   const columns: ProColumns<any>[] = [
     {
       title: '名称',
@@ -178,7 +180,7 @@ const TabComponent = observer((props: Props) => {
           handleSearch(dt);
         }}
       />
-      <Card>
+      <Card className="alarmLog" style={{ minHeight }}>
         {dataSource?.data.length > 0 ? (
           <Row gutter={[24, 24]} style={{ marginTop: 10 }}>
             {(dataSource?.data || []).map((item: any) => (
@@ -249,7 +251,7 @@ const TabComponent = observer((props: Props) => {
             ))}
           </Row>
         ) : (
-          <Empty />
+          <Empty style={{ marginTop: '10%' }} />
         )}
         {dataSource.data.length > 0 && (
           <div style={{ display: 'flex', marginTop: 20, justifyContent: 'flex-end' }}>

src/pages/system/DataSource/Management/index.tsx

@@ -9,6 +9,7 @@ import DataTable from './DataTable';
 import styles from './index.less';
 import EditTable from './EditTable';
 import _ from 'lodash';
+import { useDomFullHeight } from '@/hooks';
 
 const Management = () => {
   const location = useLocation<{ id: string }>();
@@ -22,6 +23,7 @@ const Management = () => {
   const [model, setModel] = useState<'edit' | 'add' | 'list'>('list');
   const [tableList, setTableList] = useState<any[]>([]);
   const [param, setParam] = useState<string | undefined>(undefined);
+  const { minHeight } = useDomFullHeight(`.management`);
 
   const handleSearch = () => {
     service.rdbTree(id).then((resp) => {
@@ -64,7 +66,7 @@ const Management = () => {
 
   return (
     <PageContainer>
-      <Card>
+      <Card className="management" style={{ minHeight }}>
         <div className={styles.datasourceBox}>
           <div className={styles.left}>
             <Input.Search

src/pages/system/DataSource/index.tsx

@@ -21,6 +21,7 @@ import Save from './Save';
 import { Store } from 'jetlinks-store';
 import { getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
 import { useHistory } from 'umi';
+import { useDomFullHeight } from '@/hooks';
 
 export const service = new Service('datasource/config');
 
@@ -32,6 +33,7 @@ const DataSource = observer(() => {
   const { permission: userPermission } = usePermissions('system/DataSource');
   const [visible, setVisible] = useState<boolean>(false);
   const [current, setCurrent] = useState<Partial<DataSourceItem>>({});
+  const { minHeight } = useDomFullHeight(`.datasource`, 24);
 
   useEffect(() => {
     service.getType().then((res) => {
@@ -233,6 +235,8 @@ const DataSource = observer(() => {
         search={false}
         rowKey="id"
         scroll={{ x: 1366 }}
+        tableClassName={'datasource'}
+        tableStyle={{ minHeight }}
         headerTitle={
           <PermissionButton
             onClick={() => {

src/pages/system/Menu/index.tsx

@@ -20,6 +20,7 @@ import type { MenuItem } from './typing';
 import moment from 'moment';
 import { getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
 import { PermissionButton } from '@/components';
+import { useDomFullHeight } from '@/hooks';
 
 export const service = new Service('menu');
 
@@ -38,7 +39,7 @@ export const State = model<ModelType>({
 export default observer(() => {
   const actionRef = useRef<ActionType>();
   const intl = useIntl();
-
+  const { minHeight } = useDomFullHeight(`.menu`, 24);
   const [param, setParam] = useState({});
   const history = useHistory();
   const { permission } = PermissionButton.usePermission('system/Menu');
@@ -252,6 +253,8 @@ export default observer(() => {
         actionRef={actionRef}
         rowKey="id"
         scroll={{ x: 1366 }}
+        tableClassName={'menu'}
+        tableStyle={{ minHeight }}
         pagination={false}
         search={false}
         params={param}

src/pages/system/Permission/index.tsx

@@ -21,13 +21,14 @@ import { downloadObject } from '@/utils/util';
 import Token from '@/utils/token';
 import { getButtonPermission } from '@/utils/menu';
 import { PermissionButton } from '@/components';
+import { useDomFullHeight } from '@/hooks';
 
 export const service = new Service('permission');
 const Permission: React.FC = observer(() => {
   const intl = useIntl();
   const actionRef = useRef<ActionType>();
   const permissionCode = 'system/Permission';
-
+  const { minHeight } = useDomFullHeight(`.permission`, 24);
   const [param, setParam] = useState({});
   const [model, setMode] = useState<'add' | 'edit' | 'query'>('query');
   const [current, setCurrent] = useState<Partial<PermissionItem>>({});
@@ -267,6 +268,8 @@ const Permission: React.FC = observer(() => {
         columns={columns}
         search={false}
         scroll={{ x: 1366 }}
+        tableClassName={'permission'}
+        tableStyle={{ minHeight }}
         headerTitle={
           <Space>
             <PermissionButton

src/pages/system/Platforms/Api/base.tsx

@@ -7,6 +7,7 @@ import { model } from '@formily/reactive';
 import { observer } from '@formily/react';
 import './index.less';
 import { useLocation } from 'umi';
+import { useDomFullHeight } from '@/hooks';
 
 export const ApiModel = model<{
   data: any[];
@@ -40,6 +41,7 @@ export default observer((props: ApiPageProps) => {
   const location = useLocation();
   const [operations, setOperations] = useState<string[]>([]);
   const [GrantKeys, setGrantKeys] = useState<string[]>([]);
+  const { minHeight } = useDomFullHeight(`.platforms-api`);
 
   const initModel = () => {
     ApiModel.data = [];
@@ -89,7 +91,7 @@ export default observer((props: ApiPageProps) => {
   }, []);
 
   return (
-    <div className={'platforms-api'}>
+    <div className={'platforms-api'} style={{ minHeight }}>
       <div className={'platforms-api-tree'}>
         <Tree
           isShowGranted={props.isShowGranted}

src/pages/system/Platforms/index.tsx

@@ -19,6 +19,7 @@ import PasswordModal from './password';
 import Service from './service';
 import { message } from 'antd';
 import { getMenuPathByCode } from '@/utils/menu';
+import { useDomFullHeight } from '@/hooks';
 
 export const service = new Service('api-client');
 
@@ -33,6 +34,7 @@ export default () => {
   const [editData, setEditData] = useState<any | undefined>(undefined);
 
   const { permission } = PermissionButton.usePermission('system/Platforms');
+  const { minHeight } = useDomFullHeight(`.platform`, 24);
 
   const deleteById = async (id: string) => {
     const resp: any = await service.remove(id);
@@ -47,6 +49,7 @@ export default () => {
       dataIndex: 'name',
       title: '名称',
       fixed: 'left',
+      width: '20%',
       ellipsis: true,
     },
     {
@@ -269,6 +272,8 @@ export default () => {
         params={param}
         columns={columns}
         actionRef={actionRef}
+        tableClassName={'platform'}
+        tableStyle={{ minHeight }}
         request={(params: any) =>
           service.query({
             ...params,

src/pages/system/Relationship/index.tsx

@@ -9,6 +9,7 @@ import { useIntl } from 'umi';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { message } from 'antd';
 import Save from './Save';
+import { useDomFullHeight } from '@/hooks';
 
 export const service = new Service('relation');
 
@@ -19,6 +20,7 @@ const Relationship = () => {
   const [visible, setVisible] = useState<boolean>(false);
   const actionRef = useRef<ActionType>();
   const { permission } = PermissionButton.usePermission('system/Relationship');
+  const { minHeight } = useDomFullHeight(`.relation`, 24);
 
   const columns: ProColumns<ReationItem>[] = [
     {
@@ -112,6 +114,8 @@ const Relationship = () => {
         search={false}
         rowKey="id"
         scroll={{ x: 1366 }}
+        tableClassName={'relation'}
+        tableStyle={{ minHeight }}
         request={async (params) => {
           return service.query({ ...params, sorts: [{ name: 'createTime', order: 'desc' }] });
         }}

src/pages/system/Role/index.tsx

@@ -34,8 +34,6 @@ const Role: React.FC = observer(() => {
         defaultMessage: '标识',
       }),
       dataIndex: 'id',
-      fixed: 'left',
-      width: '25%',
       // copyable: true,
       ellipsis: true,
       // sorter: true,
@@ -87,7 +85,6 @@ const Role: React.FC = observer(() => {
       }),
       valueType: 'option',
       width: 200,
-      fixed: 'right',
       render: (text, record) => [
         <PermissionButton
           key="editable"
@@ -216,7 +213,6 @@ const Role: React.FC = observer(() => {
         moduleName="role"
         columns={columns}
         service={service}
-        scroll={{ x: 1366 }}
         search={false}
         title={intl.formatMessage({
           id: 'pages.system.role',

src/pages/system/User/index.tsx

@@ -19,12 +19,14 @@ import { observer } from '@formily/react';
 import { PermissionButton } from '@/components';
 import usePermissions from '@/hooks/permission';
 import ResetPassword from '@/pages/system/User/ResetPassword';
+import { useDomFullHeight } from '@/hooks';
 
 export const service = new Service('user');
 
 const User = observer(() => {
   const intl = useIntl();
   const actionRef = useRef<ActionType>();
+  const { minHeight } = useDomFullHeight(`.user`, 24);
 
   const { permission: userPermission } = usePermissions('system/User');
   const [model, setMode] = useState<'add' | 'edit' | 'query'>('query');
@@ -231,6 +233,8 @@ const User = observer(() => {
         params={param}
         columns={columns}
         scroll={{ x: 1366 }}
+        tableClassName={'user'}
+        tableStyle={{ minHeight }}
         search={false}
         headerTitle={
           <PermissionButton