fix(style): cluster detail

src/pages/cluster-management/cluster-detail.tsx

@@ -62,13 +62,15 @@ const ClusterDetailModal = () => {
             key: 'workers',
             label: `Workers`,
             icon: <IconFont type="icon-resources" />,
-            children: <WorkerList clusterId={Number(id)} />
+            children: (
+              <WorkerList clusterId={Number(id)} source="clusterDetail" />
+            )
           },
           {
             key: 'gpus',
             label: `GPUs`,
             icon: <IconFont type="icon-gpu1" />,
-            children: <GPUList clusterId={Number(id)} />
+            children: <GPUList clusterId={Number(id)} source="clusterDetail" />
           },
           ...extraTabs
         ]}

src/pages/cluster-management/components/detail/cluster-basic.tsx

@@ -19,7 +19,7 @@ const Container = styled.div`
   height: 168px;
   .left {
     padding: 16px 24px;
-    width: 160px;
+    width: 124px;
     display: flex;
     flex-direction: column;
     align-items: center;

src/pages/cluster-management/components/detail/cluster-system-load.tsx

@@ -15,7 +15,7 @@ const Container = styled.div`
     align-items: center;
     justify-content: space-between;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
     color: var(--ant-color-text-tertiary);
   }
 

src/pages/resources/components/gpus.tsx

@@ -17,9 +17,10 @@ import useGPUColumns from '../hooks/use-gpu-columns';
 // inside.
 interface GPUListProps {
   clusterId?: number;
+  source?: 'clusterDetail';
 }
 
-const GPUList: React.FC<GPUListProps> = ({ clusterId }) => {
+const GPUList: React.FC<GPUListProps> = ({ clusterId, source }) => {
   const {
     dataSource,
     queryParams,
@@ -109,7 +110,12 @@ const GPUList: React.FC<GPUListProps> = ({ clusterId }) => {
           handleInputChange={handleNameChange}
           handleSelectChange={handleClusterChange}
           selectOptions={clusterList}
-          showSelect={!clusterId}
+          showSelect={source !== 'clusterDetail'}
+          widths={
+            source !== 'clusterDetail'
+              ? { select: 230, input: 230 }
+              : { input: 300 }
+          }
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table

src/pages/resources/components/workers.tsx

@@ -32,9 +32,10 @@ import WorkerRightActions from './worker-right-actions';
 // inside.
 interface WorkersProps {
   clusterId?: number;
+  source?: 'clusterDetail';
 }
 
-const Workers: React.FC<WorkersProps> = ({ clusterId }) => {
+const Workers: React.FC<WorkersProps> = ({ clusterId, source }) => {
   const {
     dataSource,
     rowSelection,
@@ -248,6 +249,7 @@ const Workers: React.FC<WorkersProps> = ({ clusterId }) => {
     loadend: dataSource.loadend,
     firstLoad: extraStatus.firstLoad,
     sortOrder,
+    source,
     handleSelect
   });
 
@@ -260,7 +262,7 @@ const Workers: React.FC<WorkersProps> = ({ clusterId }) => {
     <>
       <PageBox>
         <FilterBar
-          showSelect={!clusterId}
+          showSelect={source !== 'clusterDetail'}
           selectHolder={intl.formatMessage({ id: 'clusters.filterBy.cluster' })}
           marginBottom={22}
           marginTop={30}
@@ -272,13 +274,22 @@ const Workers: React.FC<WorkersProps> = ({ clusterId }) => {
           handleInputChange={handleNameChange}
           rowSelection={rowSelection}
           selectOptions={clusterData.list}
+          widths={
+            source !== 'clusterDetail'
+              ? { select: 230, input: 230 }
+              : { input: 300 }
+          }
           right={
-            <WorkerRightActions
+            source === 'clusterDetail' ? (
-              handleDeleteByBatch={handleDeleteBatch}
+              <></>
-              handleClickPrimary={handleOnAddWorker}
+            ) : (
-              rowSelection={rowSelection}
+              <WorkerRightActions
-              MonitorButton={ActionButton()}
+                handleDeleteByBatch={handleDeleteBatch}
-            ></WorkerRightActions>
+                handleClickPrimary={handleOnAddWorker}
+                rowSelection={rowSelection}
+                MonitorButton={ActionButton()}
+              ></WorkerRightActions>
+            )
           }
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
@@ -296,7 +307,7 @@ const Workers: React.FC<WorkersProps> = ({ clusterId }) => {
             rowKey="id"
             scroll={{ x: 900 }}
             onChange={handleTableChange}
-            rowSelection={rowSelection}
+            rowSelection={source === 'clusterDetail' ? undefined : rowSelection}
             pagination={{
               size: 'middle',
               showSizeChanger: true,

src/pages/resources/hooks/use-worker-columns.tsx

@@ -233,12 +233,14 @@ const useWorkerColumns = ({
   loadend,
   firstLoad,
   sortOrder,
+  source,
   handleSelect
 }: {
   clusterData: {
     list: Global.BaseOption<number>[];
     data: Record<number, string>;
   };
+  source?: string;
   loadend: boolean;
   firstLoad: boolean;
   sortOrder: string[];
@@ -521,6 +523,7 @@ const useWorkerColumns = ({
       {
         title: intl.formatMessage({ id: 'common.table.operation' }),
         key: 'operation',
+        hidden: source === 'clusterDetail',
         render: (_, record) => (
           <DropdownButtons
             items={setActions(record)}
@@ -529,7 +532,7 @@ const useWorkerColumns = ({
         )
       }
     ],
-    [intl, sortOrder, clusterData, loadend, firstLoad, handleSelect]
+    [intl, sortOrder, clusterData, loadend, source, firstLoad, handleSelect]
   );
 };