fix: 单集群详情样式优化

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/ChangeLog.tsx

@@ -7,6 +7,7 @@ import moment from 'moment';
 import { timeFormat } from '../../constants/common';
 import { DownOutlined } from '@ant-design/icons';
 import { renderToolTipValue } from './config';
+import RenderEmpty from '@src/components/RenderEmpty';
 
 const { Panel } = Collapse;
 
@@ -51,17 +52,6 @@ const ChangeLog = () => {
     );
   }, []);
 
-  const renderEmpty = () => {
-    return (
-      <>
-        <div className="empty-panel">
-          <div className="img" />
-          <div className="text">暂无配置记录</div>
-        </div>
-      </>
-    );
-  };
-
   const getHref = (item: any) => {
     if (item.resTypeName.toLowerCase().includes('topic')) return `/cluster/${clusterId}/topic/list#topicName=${item.resName}`;
     if (item.resTypeName.toLowerCase().includes('broker')) return `/cluster/${clusterId}/broker/list#brokerId=${item.resName}`;
@@ -73,7 +63,7 @@ const ChangeLog = () => {
       <div className="change-log-panel">
         <div className="title">历史变更记录</div>
         {!loading && !data.length ? (
-          renderEmpty()
+          <RenderEmpty message="暂无配置记录" />
         ) : (
           <div id="changelog-scroll-box">
             <Spin spinning={loading} style={{ paddingLeft: '42%', marginTop: 100 }} />

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/CheckDetail.tsx

 /* eslint-disable react/display-name */
-import { Drawer, Form, Spin, Table, Utils } from 'knowdesign';
+import { Drawer, Spin, Table, Utils } from 'knowdesign';
 import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
-import { useIntl } from 'react-intl';
 import { getDetailColumn } from './config';
 import API from '../../api';
 import { useParams } from 'react-router-dom';
 
 const CheckDetail = forwardRef((props: any, ref): JSX.Element => {
-  const intl = useIntl();
-  const [form] = Form.useForm();
   const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState([]);
@@ -28,7 +25,6 @@ const CheckDetail = forwardRef((props: any, ref): JSX.Element => {
   };
 
   const onCancel = () => {
-    form.resetFields();
     setVisible(false);
   };
 

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/LeftSider.tsx

@@ -153,7 +153,7 @@ const LeftSider = () => {
         <Divider />
         <div className="title">
           <div className="name">{renderToolTipValue(clusterInfo?.name, 35)}</div>
-          {global.hasPermission && global.hasPermission(ClustersPermissionMap.CLUSTER_CHANGE_INFO) ? (
+          {!loading && global.hasPermission && global.hasPermission(ClustersPermissionMap.CLUSTER_CHANGE_INFO) ? (
             <div className="edit-icon-box" onClick={() => setVisible(true)}>
               <IconFont className="edit-icon" type="icon-bianji2" />
             </div>
@@ -239,8 +239,7 @@ const LeftSider = () => {
       <AccessClusters
         visible={visible}
         setVisible={setVisible}
-        title={'edit.cluster'}
-        infoLoading={loading}
+        title="edit.cluster"
         afterSubmitSuccess={getPhyClusterInfo}
         clusterInfo={clusterInfo}
         kafkaVersion={Object.keys(kafkaVersion)}

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.less

@@ -377,26 +377,6 @@
           }
         }
       }
-
-      .empty-panel {
-        margin-top: 96px;
-        text-align: center;
-
-        .img {
-          width: 51px;
-          height: 34px;
-          margin-left: 80px;
-          margin-bottom: 7px;
-          background-size: cover;
-          background-image: url('../../assets/empty.png');
-        }
-
-        .text {
-          font-size: 10px;
-          color: #919aac;
-          line-height: 20px;
-        }
-      }
     }
   }
 }