style: cluster creation steps

src/components/seal-table/index.tsx

@@ -23,6 +23,8 @@ const Wrapper = styled.div<{ $token: any }>`
   --ant-table-row-hover-bg: ${(props) => props.$token.rowHoverBg};
   --ant-table-header-icon-color: ${(props) =>
     props.$token.tableHeaderIconColor};
+  --ant-table-header-icon-hover-color: ${(props) =>
+    props.$token.tableHeaderIconHoverColor};
 `;
 
 const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
@@ -152,6 +154,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
       $token={{
         ...token.Table,
         tableHeaderIconColor: token.colorTextQuaternary,
+        tableHeaderIconHoverColor: token.colorTextSecondary,
         colorBorderSecondary: token.colorBorderSecondary
       }}
     >

src/components/seal-table/styles/header.less

@@ -38,6 +38,16 @@
     justify-content: center;
   }
 
+  &:hover {
+    .sorter-header {
+      .sorter {
+        .anticon {
+          color: var(--ant-table-header-icon-hover-color);
+        }
+      }
+    }
+  }
+
   .sorter-header {
     display: flex;
     flex: 1;
@@ -55,6 +65,7 @@
       .anticon {
         font-size: 12px;
         color: var(--ant-table-header-icon-color);
+        transition: color var(--ant-motion-duration-slow);
       }
 
       .sorter-up {