fix: Topic 详情 Partition Tab 卡片模式展示优化

km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx

@@ -6,6 +6,7 @@ import api, { MetricType } from '@src/api';
 import { useParams } from 'react-router-dom';
 import TagsWithHide from '@src/components/TagsWithHide';
 import SwitchTab from '@src/components/SwitchTab';
+import RenderEmpty from '@src/components/RenderEmpty';
 
 interface PropsType {
   hashData: any;
@@ -86,18 +87,6 @@ function getTranformedBytes(bytes: number) {
   return [outBytes.toFixed(2), unit[i]];
 }
 
-const RenderEmpty = (props: { message: string }) => {
-  const { message } = props;
-  return (
-    <>
-      <div className="empty-panel">
-        <div className="img" />
-        <div className="text">{message}</div>
-      </div>
-    </>
-  );
-};
-
 const PartitionPopoverContent = (props: {
   clusterId: string;
   hashData: any;
@@ -125,18 +114,21 @@ const PartitionPopoverContent = (props: {
         { label: 'LeaderBroker', value: leaderBrokerId },
         {
           label: 'BeginningOffset',
-          value: `${metricsData.LogStartOffset === undefined ? '-' : metricsData.LogStartOffset} ${global.getMetricDefine(type, 'LogStartOffset')?.unit || ''
+          value: `${metricsData.LogStartOffset === undefined ? '-' : metricsData.LogStartOffset} ${
-            }`,
+            global.getMetricDefine(type, 'LogStartOffset')?.unit || ''
+          }`,
         },
         {
           label: 'EndOffset',
-          value: `${metricsData.LogEndOffset === undefined ? '-' : metricsData.LogEndOffset} ${global.getMetricDefine(type, 'LogEndOffset')?.unit || ''
+          value: `${metricsData.LogEndOffset === undefined ? '-' : metricsData.LogEndOffset} ${
-            }`,
+            global.getMetricDefine(type, 'LogEndOffset')?.unit || ''
+          }`,
         },
         {
           label: 'MsgNum',
-          value: `${metricsData.Messages === undefined ? '-' : metricsData.Messages} ${global.getMetricDefine(type, 'Messages')?.unit || ''
+          value: `${metricsData.Messages === undefined ? '-' : metricsData.Messages} ${
-            }`,
+            global.getMetricDefine(type, 'Messages')?.unit || ''
+          }`,
         },
         {
           label: 'LogSize',
@@ -281,13 +273,14 @@ const PartitionCard = (props: { clusterId: string; hashData: any }) => {
                 <div className="broker-container-box-detail">
                   {partitionState.alive ? (
                     partitionState?.replicaList?.length ? (
-                      <div className="partition-list">
+                      <div className={`partition-list ${hoverPartitionId !== -1 ? 'partition-list-hover-state' : ''}`}>
                         {partitionState?.replicaList?.map((partition) => {
                           return (
                             <div
                               key={partition.partitionId}
-                              className={`partition-list-item partition-list-item-${partition.isLeaderReplace ? 'leader' : partition.inSync ? 'isr' : 'osr'
+                              className={`partition-list-item partition-list-item-${
-                                } ${partition.partitionId === hoverPartitionId ? 'partition-active' : ''}`}
+                                partition.isLeaderReplace ? 'leader' : partition.inSync ? 'isr' : 'osr'
+                              } ${partition.partitionId === hoverPartitionId ? 'partition-active' : ''}`}
                               onMouseEnter={() => setHoverPartitionId(partition.partitionId)}
                               onMouseLeave={() => setHoverPartitionId(-1)}
                               onClick={() => setClickPartition(`${partitionState.brokerId}&${partition.partitionId}`)}
@@ -316,10 +309,10 @@ const PartitionCard = (props: { clusterId: string; hashData: any }) => {
                         })}
                       </div>
                     ) : (
-                      <RenderEmpty message="暂无数据" />
+                      <RenderEmpty message="暂无数据" height="unset" />
                     )
                   ) : (
-                    <RenderEmpty message="暂无数据" />
+                    <RenderEmpty message="暂无数据" height="unset" />
                   )}
                 </div>
               </div>

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

@@ -215,8 +215,8 @@
         position: relative;
         width: 324px;
         min-height: calc(100% - 66px);
-        margin: 0 0 12px 6px;
+        margin: 0 6px 6px 6px;
-        padding: 22px 20px 0 20px;
+        padding: 12px 12px 0 12px;
         border-radius: 12px;
         background: #ffffff;
         overflow: hidden;
@@ -226,16 +226,16 @@
           flex-flow: row wrap;
           width: 100%;
           &-item {
-            width: 32px;
+            width: 34px;
             height: 16px;
-            margin-bottom: 22px;
+            margin-bottom: 12px;
             border-radius: 4px;
             text-align: center;
             line-height: 16px;
-            transition: all ease 0.2s;
+            transition: all ease-in-out 0.3s;
             cursor: pointer;
-            &:not(&:nth-of-type(5n)) {
+            &:not(&:nth-of-type(8n)) {
-              margin-right: 31px;
+              margin-right: 4px;
             }
             &-leader {
               background: rgba(85, 110, 230, 0.1);
@@ -262,27 +262,21 @@
               }
             }
           }
-        }
+          &-hover-state {
-
+            .partition-list-item {
-        .empty-panel {
+              &-leader:not(.partition-active) {
-          display: flex;
+                background-color: #f6f7fd;
-          flex-direction: column;
+                color: #dbe1f8;
-          align-items: center;
+              }
-          margin-bottom: 18px;
+              &-isr:not(.partition-active) {
-          text-align: center;
+                background-color: #fcfcfc;
-
+                color: #c4c6c9;
-          .img {
+              }
-            width: 51px;
+              &-osr:not(.partition-active) {
-            height: 34px;
+                background-color: #fefaf4;
-            margin-bottom: 7px;
+                color: #f8d6af;
-            background-size: cover;
+              }
-            background-image: url('../../assets/empty.png');
+            }
-          }
-
-          .text {
-            font-size: 10px;
-            color: #919aac;
-            line-height: 20px;
           }
         }
       }