fix: display instance type spec

src/pages/cluster-management/step-forms/basic-form.tsx

@@ -1,5 +1,6 @@
 import PageTools from '@/components/page-tools';
 import { PageActionType } from '@/config/types';
+import { useIntl } from '@umijs/max';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import styled from 'styled-components';
 import ClusterForm from '../components/cluster-form';
@@ -23,6 +24,7 @@ interface BasicFormProps {
 }
 
 const BasicForm = forwardRef((props: BasicFormProps, ref) => {
+  const intl = useIntl();
   const { provider, credentialList, action, currentData } = props;
   const formRef = useRef<any>(null);
 
@@ -40,7 +42,11 @@ const BasicForm = forwardRef((props: BasicFormProps, ref) => {
     <div>
       <PageTools
         marginBottom={26}
-        left={<Title>Basic Configuration</Title>}
+        left={
+          <Title>
+            {intl.formatMessage({ id: 'clusters.create.configBasic' })}
+          </Title>
+        }
         marginTop={0}
       ></PageTools>
       <ClusterForm

src/pages/cluster-management/step-forms/use-step-list.tsx

@@ -1,10 +1,11 @@
-import { useNavigate } from '@umijs/max';
+import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { useMemo } from 'react';
 import { ProviderType, ProviderValueMap } from '../config';
 import { moduleMap } from './module-registry';
 
 export default function useStepList() {
+  const intl = useIntl();
   const navigate = useNavigate();
 
   const handleBack = useMemoizedFn(() => {
@@ -14,7 +15,7 @@ export default function useStepList() {
   return useMemo(
     () => [
       {
-        title: 'Select Cloud Provider',
+        title: intl.formatMessage({ id: 'clusters.create.selectProvider' }),
         content: '',
         showButtons: (provider?: ProviderType) => {
           return {
@@ -30,7 +31,7 @@ export default function useStepList() {
         providers: []
       },
       {
-        title: 'Configure Cluster Settings',
+        title: intl.formatMessage({ id: 'clusters.create.configBasic' }),
         content: '',
         showButtons: (provider?: ProviderType) => {
           return {
@@ -46,7 +47,7 @@ export default function useStepList() {
         providers: []
       },
       {
-        title: 'Add Worker Pools',
+        title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
         content: '',
         showButtons: (provider?: ProviderType) => {
           return {
@@ -63,7 +64,7 @@ export default function useStepList() {
         beforeNext: handleBack
       },
       {
-        title: 'Add Worker',
+        title: intl.formatMessage({ id: 'resources.button.create' }),
         content: '',
         showButtons: (provider?: ProviderType) => {
           return {
@@ -79,7 +80,7 @@ export default function useStepList() {
         providers: [ProviderValueMap.Custom]
       },
       {
-        title: 'Register Cluster',
+        title: intl.formatMessage({ id: 'clusters.button.register' }),
         content: '',
         showButtons: (provider?: ProviderType) => {
           return {
@@ -95,6 +96,6 @@ export default function useStepList() {
         providers: [ProviderValueMap.Kubernetes]
       }
     ],
-    [handleBack]
+    [handleBack, intl]
   );
 }

src/pages/cluster-management/step-forms/worker-pools-form.tsx

@@ -1,6 +1,7 @@
 import PageTools from '@/components/page-tools';
 import { PageActionType } from '@/config/types';
 import { PlusOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
 import { Button, FormInstance } from 'antd';
 import {
   forwardRef,
@@ -42,6 +43,7 @@ interface WorkerPoolsFormProps {
 }
 
 const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
+  const intl = useIntl();
   const { provider, action, currentData } = props;
   const countRef = useRef(0);
   const formRefs = useRef<Record<number, FormInstance<any> | null>>({});
@@ -73,10 +75,13 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
         name: `Pool-${newId + 1}`
       } as NodePoolFormData)
     );
-    setActiveKey((prev) => new Set([newId]));
 
     requestAnimationFrame(() => {
-      window.scrollTo(0, document.body.scrollHeight);
+      setActiveKey((prev) => new Set([newId]));
+      window.scrollTo({
+        top: document.body.scrollHeight,
+        behavior: 'smooth'
+      });
     });
   };
 
@@ -95,6 +100,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
 
   const gatherFormValues = (results: PromiseSettledResult<any>[]) => {
     const resultList = results.map((result: PromiseSettledResult<any>) => {
+      console.log('gatherFormValues========', results);
       if (result.status === 'fulfilled') {
         return result.value;
       }
@@ -103,7 +109,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
       }
       return {};
     });
-    console.log('gatherFormValues========', resultList);
+
     return resultList;
   };
 
@@ -177,7 +183,9 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
         marginTop={0}
         left={
           <span className="flex-center gap-16">
-            <Title>Worker Pools</Title>
+            <Title>
+              {intl.formatMessage({ id: 'clusters.workerpool.title' })}
+            </Title>
           </span>
         }
         right={
@@ -187,7 +195,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
             color="default"
             icon={<PlusOutlined />}
           >
-            Add Pool
+            {intl.formatMessage({ id: 'clusters.button.addNodePool' })}
           </Button>
         }
       ></PageTools>