fix: 列表宽度跟内容布局补充

src/components/ProTableCard/CardItems/AccessConfig/index.tsx

@@ -39,10 +39,14 @@ export default (props: AccessConfigCardProps) => {
         <div className="card">
           <div className="header">
             <div className="title ellipsis">
-              <Tooltip title={props.name}>{props.name || '--'}</Tooltip>
+              <Tooltip title={props.name} placement="topLeft">
+                {props.name || '--'}
+              </Tooltip>
             </div>
             <div className="desc">
-              <Tooltip title={props.description}>{props.description || '--'}</Tooltip>
+              <Tooltip title={props.description} placement="topLeft">
+                {props.description || '--'}
+              </Tooltip>
             </div>
           </div>
           <div className="container">

src/pages/device/Category/index.tsx

@@ -65,9 +65,7 @@ const Category = observer(() => {
         defaultMessage: '分类名称',
       }),
       dataIndex: 'name',
-      width: 300,
       ellipsis: true,
-      fixed: 'left',
     },
     {
       title: '分类排序',
@@ -94,8 +92,7 @@ const Category = observer(() => {
         defaultMessage: '操作',
       }),
       valueType: 'option',
-      width: 200,
-      fixed: 'right',
+      width: 120,
       render: (text, record) => [
         <PermissionButton
           key="editable"
@@ -182,7 +179,6 @@ const Category = observer(() => {
       <ProTable
         params={param}
         search={false}
-        scroll={{ x: 1366 }}
         request={async (params) => {
           const response = await service.queryTree({
             paging: false,

src/pages/device/Instance/Detail/Running/Event/index.tsx

@@ -27,6 +27,7 @@ const EventLog = (props: Props) => {
       dataIndex: 'timestamp',
       title: '时间',
       sorter: true,
+      ellipsis: true,
       renderText: (text: string) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
     },
     {
@@ -95,6 +96,7 @@ const EventLog = (props: Props) => {
               key: i.id,
               title: i.name,
               dataIndex: i.id,
+              ellipsis: true,
               renderText: (text) => (typeof text === 'object' ? JSON.stringify(text) : text),
             } as ProColumns),
         )

src/pages/device/Instance/index.tsx

@@ -394,7 +394,7 @@ const Instance = () => {
         defaultMessage: '操作',
       }),
       valueType: 'option',
-      width: 200,
+      width: 120,
       fixed: 'right',
       render: (text, record) => tools(record),
     },

src/pages/link/AccessConfig/Detail/Access/index.tsx

@@ -22,6 +22,7 @@ import { getButtonPermission, getMenuPathByCode, MENUS_CODE } from '@/utils/menu
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import TitleComponent from '@/components/TitleComponent';
 import { PermissionButton } from '@/components';
+import { useDomFullHeight } from '@/hooks';
 
 interface Props {
   change: () => void;
@@ -31,7 +32,7 @@ interface Props {
 
 const Access = (props: Props) => {
   const [form] = Form.useForm();
-
+  const { minHeight } = useDomFullHeight(`.access`);
   const history = useHistory();
 
   const [current, setCurrent] = useState<number>(0);
@@ -356,6 +357,7 @@ const Access = (props: Props) => {
               </Row>
             ) : (
               <Empty
+                style={{ marginTop: '10%', marginBottom: '10%' }}
                 description={
                   <span>
                     暂无数据
@@ -451,6 +453,7 @@ const Access = (props: Props) => {
               </Row>
             ) : (
               <Empty
+                style={{ marginTop: '10%', marginBottom: '10%' }}
                 description={
                   <span>
                     暂无数据
@@ -628,7 +631,7 @@ const Access = (props: Props) => {
   };
 
   return (
-    <Card>
+    <Card className="access" style={{ minHeight }}>
       {!props.data?.id && (
         <Button
           type="link"

src/pages/link/Certificate/index.tsx

@@ -29,7 +29,6 @@ const Certificate = () => {
       title: '证书标准',
       render: (_, record: any) => <span>{record.type?.text || '-'}</span>,
       valueType: 'select',
-      fixed: 'left',
       valueEnum: {
         common: {
           text: '国际标准',
@@ -40,13 +39,11 @@ const Certificate = () => {
     {
       dataIndex: 'name',
       title: '证书名称',
-      width: '30%',
       ellipsis: true,
     },
     {
       dataIndex: 'description',
       title: '说明',
-      width: '30%',
       ellipsis: true,
       render: (text: any) => (
         <div style={{ width: '100%' }} className="ellipsis">
@@ -62,9 +59,7 @@ const Certificate = () => {
         defaultMessage: '操作',
       }),
       valueType: 'option',
-      align: 'center',
-      width: 200,
-      fixed: 'right',
+      width: 100,
       render: (text, record) => [
         <PermissionButton
           key={'update'}
@@ -125,7 +120,6 @@ const Certificate = () => {
         params={param}
         columns={columns}
         search={false}
-        scroll={{ x: 1366 }}
         rowKey="id"
         tableClassName={'link-certificate'}
         tableStyle={{ minHeight }}

src/pages/link/Type/index.tsx

@@ -144,6 +144,7 @@ const Network = () => {
     {
       dataIndex: 'description',
       title: '说明',
+      ellipsis: true,
     },
     {
       title: intl.formatMessage({
@@ -151,7 +152,7 @@ const Network = () => {
         defaultMessage: '操作',
       }),
       valueType: 'option',
-      width: 200,
+      width: 120,
       fixed: 'right',
       render: (text, record) => [
         <PermissionButton

src/pages/media/SplitScreen/index.tsx

@@ -6,11 +6,13 @@ import { ScreenPlayer } from '@/components';
 import { ptzStart, ptzStop, ptzTool } from './service';
 import { useRef, useState } from 'react';
 import './index.less';
+import { useDomFullHeight } from '@/hooks';
 
 const SplitScreen = () => {
   const [deviceId, setDeviceId] = useState('');
   const [channelId, setChannelId] = useState('');
   const player = useRef<any>(null);
+  const { minHeight } = useDomFullHeight(`.splitScreen`);
 
   const getMediaUrl = (dId: string, cId: string): string => {
     return ptzStart(dId, cId, 'mp4');
@@ -24,7 +26,7 @@ const SplitScreen = () => {
 
   return (
     <PageContainer>
-      <Card>
+      <Card style={{ minHeight }} className="splitScreen">
         <div className="split-screen">
           <LeftTree onSelect={mediaStart} />
           <div className="right-content">

src/pages/notice/Template/index.tsx

@@ -99,8 +99,6 @@ const Template = observer(() => {
       dataIndex: 'name',
       title: '模版名称',
       ellipsis: true,
-      fixed: 'left',
-      width: '25%',
     },
     {
       dataIndex: 'provider',
@@ -120,9 +118,8 @@ const Template = observer(() => {
         defaultMessage: '操作',
       }),
       valueType: 'option',
-      align: 'center',
+      align: 'left',
       width: 200,
-      fixed: 'right',
       render: (text, record) => [
         <PermissionButton
           key="edit"
@@ -229,7 +226,6 @@ const Template = observer(() => {
         rowKey="id"
         search={false}
         params={param}
-        scroll={{ x: 1366 }}
         columns={columns}
         headerTitle={
           <Space>

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

@@ -99,8 +99,9 @@ const Configuration = () => {
     {
       title: '操作',
       valueType: 'option',
-      align: 'center',
+      align: 'left',
       fixed: 'right',
+      width: 150,
       render: (_, record) => [
         record.sceneTriggerType === 'manual' && (
           <PermissionButton

src/pages/rule-engine/Alarm/Log/Detail/Info.tsx

@@ -2,6 +2,7 @@ import { Descriptions, Modal } from 'antd';
 import { useEffect, useState } from 'react';
 import moment from 'moment';
 import { Store } from 'jetlinks-store';
+import styles from './index.less';
 
 interface Props {
   data: Partial<AlarmLogHistoryItem>;
@@ -16,7 +17,14 @@ const Info = (props: Props) => {
   }, [props.data]);
 
   return (
-    <Modal title={'详情'} visible onCancel={props.close} onOk={props.close} width={1000}>
+    <Modal
+      title={'详情'}
+      visible
+      onCancel={props.close}
+      onOk={props.close}
+      width={1000}
+      className={styles.conent}
+    >
       <Descriptions bordered column={2}>
         {data.targetType === 'device' && (
           <>

src/pages/rule-engine/Alarm/Log/Detail/index.less

@@ -0,0 +1,7 @@
+.conent {
+  :global {
+    .ant-descriptions-bordered .ant-descriptions-item-label {
+      min-width: 180px;
+    }
+  }
+}

src/pages/system/Basis/index.tsx

@@ -10,6 +10,7 @@ import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
 import styles from './index.less';
 import { PageContainer } from '@ant-design/pro-layout';
 import Service from './service';
+import { useDomFullHeight } from '@/hooks';
 
 const Basis = () => {
   const service = new Service();
@@ -18,6 +19,7 @@ const Basis = () => {
   const { permission: userPermission } = usePermissions('system/Basis');
   const [imageUrl, setImageUrl] = useState<string>('');
   const [loading, setLoading] = useState(false);
+  const { minHeight } = useDomFullHeight(`.basis`);
 
   const uploadProps: UploadProps = {
     showUploadList: false,
@@ -108,7 +110,7 @@ const Basis = () => {
 
   return (
     <PageContainer>
-      <Card>
+      <Card className="basis" style={{ minHeight }}>
         <div
           style={{
             display: 'flex',