style: adjust some styles

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

@@ -243,7 +243,9 @@ const ClusterCreate = () => {
     const info = await queryClusterToken({ id: res.id });
     setRegistrationInfo({
       ...info,
-      image: info.container_registry,
+      image: info.container_registry
+        ? `${info.container_registry}/${info.image}`
+        : info.image,
       cluster_id: res.id
     });
     return true;

src/pages/cluster-management/components/add-worker/index.tsx

@@ -68,7 +68,9 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
       firstLoad.current = false;
       setRegistrationInfo({
         ...data,
-        image: data.container_registry,
+        image: data.container_registry
+          ? `${data.container_registry}/${data.image}`
+          : data.image,
         cluster_id: value
       });
     } catch (error) {

src/pages/cluster-management/components/provider-catalog.tsx

@@ -33,6 +33,18 @@ const Title = styled.span`
   margin-block: 20px 16px;
 `;
 
+const Header = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  .description {
+    font-size: 13px;
+    font-weight: 400;
+    color: var(--ant-color-text-tertiary);
+  }
+`;
+
 interface ProviderCatalogProps {
   onSelect?: (provider: string, item: any) => void;
   cols?: number;
@@ -71,6 +83,21 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
     );
   }, [dataList]);
 
+  const renderTitle = (item: any) => {
+    return (
+      <Header>
+        <span>
+          {item.locale ? intl.formatMessage({ id: item.label }) : item.label}
+        </span>
+        {item.description && (
+          <span className="description">
+            {intl.formatMessage({ id: item.description })}
+          </span>
+        )}
+      </Header>
+    );
+  };
+
   return (
     <Container>
       {Object.entries(groupList).map(([groupName, items]) => (
@@ -87,16 +114,9 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
                 active={current === action.key}
                 disabled={action.disabled}
                 clickable={clickable}
-                header={
-                  action.locale
-                    ? intl.formatMessage({ id: action.label })
-                    : action.label
-                }
+                header={renderTitle(action)}
                 icon={action.icon}
-              >
-                {action.description &&
-                  intl.formatMessage({ id: action.description })}
-              </Card>
+              ></Card>
             ))}
           </Wrapper>
         </div>