style: command viewer scroller

src/components/highlight-code/code-viewer-dark.tsx

@@ -10,6 +10,7 @@ interface CodeViewerProps {
   copyable?: boolean;
   height?: string | number;
   style?: React.CSSProperties;
+  xScrollable?: boolean;
 }
 const DarkViewer: React.FC<CodeViewerProps> = (props) => {
   const {
@@ -19,7 +20,8 @@ const DarkViewer: React.FC<CodeViewerProps> = (props) => {
     autodetect,
     ignoreIllegals,
     copyable,
-    height = 'auto'
+    height = 'auto',
+    xScrollable = false
   } = props || {};
 
   return (
@@ -33,6 +35,7 @@ const DarkViewer: React.FC<CodeViewerProps> = (props) => {
       autodetect={autodetect}
       ignoreIllegals={ignoreIllegals}
       copyable={copyable}
+      xScrollable={xScrollable}
     ></CodeViewer>
   );
 };

src/components/highlight-code/code-viewer-light.tsx

@@ -10,6 +10,7 @@ interface CodeViewerProps {
   copyable?: boolean;
   height?: string | number;
   style?: React.CSSProperties;
+  xScrollable?: boolean;
 }
 const LightViewer: React.FC<CodeViewerProps> = (props) => {
   const {
@@ -20,7 +21,8 @@ const LightViewer: React.FC<CodeViewerProps> = (props) => {
     ignoreIllegals,
     copyable,
     style,
-    height = 'auto'
+    height = 'auto',
+    xScrollable = false
   } = props || {};
 
   return (
@@ -34,6 +36,7 @@ const LightViewer: React.FC<CodeViewerProps> = (props) => {
       autodetect={autodetect}
       ignoreIllegals={ignoreIllegals}
       copyable={copyable}
+      xScrollable={xScrollable}
     ></CodeViewer>
   );
 };

src/components/highlight-code/code-viewer.tsx

@@ -15,6 +15,7 @@ interface CodeViewerProps {
   height?: string | number;
   theme?: 'light' | 'dark';
   style?: React.CSSProperties;
+  xScrollable?: boolean;
 }
 
 interface CodeHeaderProps {
@@ -43,6 +44,14 @@ const CodeHeaderWrapper = styled.div`
 
 const Wrapper = styled.div`
   border-radius: var(--border-radius-mini);
+  &:hover {
+    .custome-scrollbar {
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar-thumb);
+        border-radius: 4px;
+      }
+    }
+  }
 `;
 
 const CodeHeader: React.FC<CodeHeaderProps> = ({
@@ -80,7 +89,8 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
     ignoreIllegals = true,
     copyable = true,
     height = 'auto',
-    style
+    style,
+    xScrollable = false
   } = props || {};
 
   const highlightedCode = useMemo(() => {
@@ -131,7 +141,8 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
           'code-pre custome-scrollbar custom-scrollbar-horizontal ',
           {
             dark: props.theme === 'dark',
-            light: props.theme === 'light'
+            light: props.theme === 'light',
+            'x-scrollable': xScrollable
           }
         )}
         style={{
@@ -141,7 +152,10 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
         }}
       >
         <code
-          style={{ minHeight: height }}
+          style={{
+            minHeight: height,
+            ...(xScrollable ? { width: 'max-content' } : {})
+          }}
           className={classNames(highlightedCode.className, {
             dark: props.theme === 'dark',
             light: props.theme === 'light'

src/components/highlight-code/index.tsx

@@ -10,6 +10,7 @@ const HighlightCode: React.FC<{
   copyable?: boolean;
   theme?: 'light' | 'dark';
   fixedTheme?: 'light' | 'dark';
+  xScrollable?: boolean;
   height?: string | number;
   style?: React.CSSProperties;
   copyValue?: string;
@@ -21,7 +22,8 @@ const HighlightCode: React.FC<{
     lang = 'bash',
     copyable = true,
     theme,
-    height = 'auto'
+    height = 'auto',
+    xScrollable = false
   } = props;
 
   const { userSettings } = useUserSettings();
@@ -40,6 +42,7 @@ const HighlightCode: React.FC<{
           copyValue={copyValue}
           copyable={copyable}
           height={height}
+          xScrollable={xScrollable}
           style={style}
         />
       ) : (
@@ -50,6 +53,7 @@ const HighlightCode: React.FC<{
           copyValue={copyValue}
           copyable={copyable}
           height={height}
+          xScrollable={xScrollable}
         />
       )}
     </div>

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_jo5x7z2z718.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_rajpu0blzkp.js'
 });
 
 export default IconFont;

src/components/tags-wrapper/index.tsx

@@ -120,6 +120,7 @@ const TagsWrapper: React.FC<TagsWrapperProps> = (props) => {
           >
             <Tag
               className="more"
+              variant="outlined"
               style={{ marginInline: hiddenIndices.end < 1 ? 0 : `${gap}px 0` }}
               ref={moreBtnRef}
             >
@@ -132,4 +133,4 @@ const TagsWrapper: React.FC<TagsWrapperProps> = (props) => {
   );
 };
 
-export default React.memo(TagsWrapper);
+export default TagsWrapper;

src/layouts/extraRender.tsx

@@ -10,9 +10,7 @@ import {
   DiscordOutlined,
   GithubOutlined,
   HomeOutlined,
-  LogoutOutlined,
+  ReadOutlined
-  ReadOutlined,
-  SettingOutlined
 } from '@ant-design/icons';
 import { history, useIntl, useNavigate } from '@umijs/max';
 import { Avatar, Button, Divider, Modal } from 'antd';
@@ -235,7 +233,7 @@ export const ExtraContent = (props: { isDarkTheme?: boolean }) => {
         key: 'settings',
         label: (
           <span className="flex flex-center">
-            <SettingOutlined />
+            <IconFont type="icon-settings-02" />
             <span className="m-l-8" style={{ marginLeft: 8 }}>
               {intl?.formatMessage?.({ id: 'common.button.settings' })}
             </span>
@@ -270,7 +268,7 @@ export const ExtraContent = (props: { isDarkTheme?: boolean }) => {
         {originNode}
         <Divider style={{ marginBlock: 4 }} />
         <CustomItem onClick={handleLogout} className="border-top">
-          <LogoutOutlined rotate={180} />
+          <IconFont type="icon-logout" style={{ fontSize: 17 }} />
           <span>{intl?.formatMessage?.({ id: 'common.button.logout' })}</span>
         </CustomItem>
       </DropdownWrapper>

src/locales/en-US/clusters.ts

@@ -28,7 +28,7 @@ export default {
   'clusters.workerpool.volumes.add': 'Add Volume',
   'clusters.create.provider.self': 'Self-Hosted',
   'clusters.create.provider.cloud': 'Cloud Provider',
-  'clusters.create.selectProvider': 'Select Provider',
+  'clusters.create.steps.selectProvider': 'Select Provider',
   'clusters.create.configBasic': 'Basic Configuration',
   'clusters.create.execCommand': 'Execute Command',
   'clusters.create.supportedGpu': 'Supported GPUs',
@@ -117,8 +117,9 @@ export default {
   'clusters.form.setDefault': 'Set as Default',
   'clusters.form.setDefault.tips': 'Default for deployment.',
   'clusters.addworker.noClusters': 'No available clusters',
-  'clusters.create.complete.tips': 'Cluster created successfully!',
+  'clusters.create.steps.complete.tips': 'Cluster created successfully!',
-  'clusters.create.complete': 'Completed',
+  'clusters.create.steps.complete': 'Complete',
+  'clusters.create.steps.configure': 'Configure',
   'clusters.create.dockerTips1': 'Next, add worker to this cluster.',
   'clusters.create.dockerTips2':
     'You can also skip this step and add them later from the cluster list.',

src/locales/ja-JP/clusters.ts

@@ -28,7 +28,7 @@ export default {
   'clusters.workerpool.volumes.add': 'Add Volume',
   'clusters.create.provider.self': 'Self-Hosted',
   'clusters.create.provider.cloud': 'Cloud Provider',
-  'clusters.create.selectProvider': 'Select Provider',
+  'clusters.create.steps.selectProvider': 'Select Provider',
   'clusters.create.configBasic': 'Basic Configuration',
   'clusters.create.execCommand': 'Execute Command',
   'clusters.create.supportedGpu': 'Supported GPUs',
@@ -117,8 +117,9 @@ export default {
   'clusters.form.setDefault': 'Set as Default',
   'clusters.form.setDefault.tips': 'Default for deployment.',
   'clusters.addworker.noClusters': 'No available clusters',
-  'clusters.create.complete.tips': 'Cluster created successfully!',
+  'clusters.create.steps.complete.tips': 'Cluster created successfully!',
-  'clusters.create.complete': 'Completed',
+  'clusters.create.steps.complete': 'Complete',
+  'clusters.create.steps.configure': 'Configure',
   'clusters.create.dockerTips1': 'Next, add worker to this cluster.',
   'clusters.create.dockerTips2':
     'You can also skip this step and add them later from the cluster list.',
@@ -157,7 +158,7 @@ export default {
 // 27. 'clusters.workerpool.volumes.add': 'Add Volume'
 // 28. 'clusters.create.provider.self': 'Self-Hosted',
 // 29. 'clusters.create.provider.cloud': 'Cloud Provider',
-// 30. 'clusters.create.selectProvider': 'Select Provider',
+// 30. 'clusters.create.steps.selectProvider': 'Select Provider',
 // 31. 'clusters.create.configBasic': 'Basic Configuration',
 // 32. 'clusters.create.execCommand': 'Execute Command',
 // 33. 'clusters.create.supportedGpu': 'Supported GPUs',
@@ -219,10 +220,11 @@ export default {
 // 85.  'clusters.addworker.enterWorkerAddress': 'Enter worker external address',
 // 86.  'clusters.addworker.enterWorkerAddress.error': 'Please enter the worker external address.',
 // 87. 'clusters.addworker.noClusters': 'No available clusters',
-// 88. 'clusters.create.complete.tips': 'Cluster created successfully!',
+// 88. 'clusters.create.steps.complete.tips': 'Cluster created successfully!',
-// 89. 'clusters.create.complete': 'Completed',
+// 89. 'clusters.create.steps.complete': 'Complete',
 // 90. 'clusters.create.dockerTips1': 'Next, add worker to this cluster.',
 // 91. 'clusters.create.dockerTips2': 'You can also skip this step and add them later from the cluster list.',
 // 92. 'clusters.create.k8sTips1': 'Next, register existing Kubernetes cluster.',
-// 93. 'clusters.create.k8sTips2': 'You can also skip this step and register it later from the cluster list.'
+// 93. 'clusters.create.k8sTips2': 'You can also skip this step and register it later from the cluster list.',
+// 94. 'clusters.create.steps.configure': 'Configure',
 // ========== End of To-Do List ==========

src/locales/ru-RU/clusters.ts

@@ -28,7 +28,7 @@ export default {
   'clusters.workerpool.volumes.add': 'Добавить том',
   'clusters.create.provider.self': 'Самостоятельное размещение',
   'clusters.create.provider.cloud': 'Облачный провайдер',
-  'clusters.create.selectProvider': 'Выберите провайдера',
+  'clusters.create.steps.selectProvider': 'Выберите провайдера',
   'clusters.create.configBasic': 'Базовая конфигурация',
   'clusters.create.execCommand': 'Выполнить команду',
   'clusters.create.supportedGpu': 'Поддерживаемые GPU',
@@ -118,8 +118,9 @@ export default {
   'clusters.form.setDefault.tips':
     'Использовать по умолчанию для развертывания.',
   'clusters.addworker.noClusters': 'No available clusters',
-  'clusters.create.complete.tips': 'Cluster created successfully!',
+  'clusters.create.steps.complete.tips': 'Cluster created successfully!',
-  'clusters.create.complete': 'Completed',
+  'clusters.create.steps.complete': 'Complete',
+  'clusters.create.steps.configure': 'Configure',
   'clusters.create.dockerTips1': 'Next, add worker to this cluster.',
   'clusters.create.dockerTips2':
     'You can also skip this step and add them later from the cluster list.',
@@ -131,10 +132,11 @@ export default {
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
 // 1. 'clusters.addworker.hygonNotes': `If <span class="bold-text">/opt/hyhal</span> or <span class="bold-text">/opt/dtk</span> does not exist, create symbolic links pointing to the corresponding Hygon installation paths, for example: <span class="desc-fill">ln -s /path/to/hyhal /opt/hyhal</span> <span class="desc-fill">ln -s /path/to/dtk /opt/dtk</span>.`,
 // 2. 'clusters.addworker.noClusters': 'No available clusters',
-// 3. 'clusters.create.complete.tips': 'Cluster created successfully!',
+// 3. 'clusters.create.steps.complete.tips': 'Cluster created successfully!',
-// 4. 'clusters.create.complete': 'Completed',
+// 4. 'clusters.create.steps.complete': 'Complete',
 // 5. 'clusters.create.dockerTips1': 'Next, add worker to this cluster.',
 // 6. 'clusters.create.dockerTips2': 'You can also skip this step and add them later from the cluster list.',
 // 7. 'clusters.create.k8sTips1': 'Next, register existing Kubernetes cluster.',
-// 8. 'clusters.create.k8sTips2': 'You can also skip this step and register it later from the cluster list.'
+// 8. 'clusters.create.k8sTips2': 'You can also skip this step and register it later from the cluster list.',
+// 9. 'clusters.create.steps.configure': 'Configure',
 // ================================================================

src/locales/zh-CN/clusters.ts

@@ -28,7 +28,7 @@ export default {
   'clusters.workerpool.volumes.add': '添加存储卷',
   'clusters.create.provider.self': '自建环境',
   'clusters.create.provider.cloud': '云环境',
-  'clusters.create.selectProvider': '选择环境',
+  'clusters.create.steps.selectProvider': '选择环境',
   'clusters.create.configBasic': '基本配置',
   'clusters.create.execCommand': '执行命令',
   'clusters.create.supportedGpu': '支持的 GPU',
@@ -114,8 +114,9 @@ export default {
   'clusters.form.setDefault': '设为默认',
   'clusters.form.setDefault.tips': '部署时的默认集群。',
   'clusters.addworker.noClusters': '无可用集群',
-  'clusters.create.complete.tips': '集群创建成功！',
+  'clusters.create.steps.complete.tips': '集群创建成功！',
-  'clusters.create.complete': '完成',
+  'clusters.create.steps.complete': '完成',
+  'clusters.create.steps.configure': '配置',
   'clusters.create.dockerTips1': '接下来，为该集群添加节点。',
   'clusters.create.dockerTips2': '你也可以跳过此步骤，稍后在集群列表中添加。',
   'clusters.create.k8sTips1': '接下来，注册已有的 Kubernetes 集群。',

src/pages/_components/collapse-panel/index.tsx

@@ -13,8 +13,10 @@ const CollapseInner = styled(Collapse)`
     border-radius: var(--border-radius-base) !important;
     font-size: 14px !important;
     font-weight: 600 !important;
+    &:hover {
       background-color: var(--ant-color-fill-tertiary) !important;
     }
+  }
 
   .ant-collapse-body {
     padding-inline: 0 !important;
@@ -32,7 +34,8 @@ const CollapsePanel: React.FC<{
   activeKey: string | string[];
   accordion?: boolean;
   onChange?: (key: string | string[]) => void;
-}> = ({ items, activeKey, accordion, onChange }) => {
+  styles?: Record<string, React.CSSProperties>;
+}> = ({ items, activeKey, accordion, onChange, styles }) => {
   return (
     <CollapseInner
       expandIconPlacement="start"
@@ -42,6 +45,12 @@ const CollapsePanel: React.FC<{
       activeKey={activeKey}
       onChange={onChange}
       destroyOnHidden={false}
+      styles={{
+        ...styles,
+        header: {
+          backgroundColor: 'var(--ant-collapse-header-bg)'
+        }
+      }}
       expandIcon={({ isActive }) => (
         <IconFont
           type="icon-down"

src/pages/_components/yaml-editor/index.tsx

@@ -48,7 +48,7 @@ const Header = styled.div`
   padding-inline: 10px;
   font-size: 14px;
   border-bottom: 1px solid var(--ant-color-border);
-  background-color: var(--ant-color-fill-tertiary);
+  background-color: var(--ant-color-fill-quaternary);
 `;
 
 interface ViewerProps {

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

@@ -1,9 +1,7 @@
-import { clusterSessionAtom } from '@/atoms/clusters';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import ColumnWrapper from '@/pages/_components/column-wrapper';
-import { useIntl, useSearchParams } from '@umijs/max';
+import { useIntl } from '@umijs/max';
-import { useAtom } from 'jotai';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -40,29 +38,20 @@ const Content = styled.div`
   width: 100%;
 `;
 
-const StepsWrapper = styled.div`
-  width: 220px;
-  padding-inline: 24px;
-  padding-block: 16px;
-  border-right: 1px solid var(--ant-color-split);
-`;
-
 const MainWrapper = styled.div`
   display: flex;
   height: 100%;
 `;
 
 const ClusterCreate: React.FC<{
+  action: PageActionType;
+  setCurrentTitle?: (title: string) => void;
   onClose?: () => void;
-}> = ({ onClose }) => {
+}> = ({ onClose, action, setCurrentTitle }) => {
-  const intl = useIntl();
   const startStep = 0;
   const stepList = useStepList();
   const { systemConfig } = useSystemConfig();
-  const [searchParams] = useSearchParams();
+  const intl = useIntl();
-  const action =
-    (searchParams.get('action') as PageActionType) || PageAction.CREATE;
-  const [clusterSession, setClusterSession] = useAtom(clusterSessionAtom);
   const [credentialList, setCredentialList] = useState<
     Global.BaseOption<number, { provider: ProviderType }>[]
   >([]);
@@ -85,7 +74,6 @@ const ClusterCreate: React.FC<{
   const [formValues, setFormValues] = useState<Record<string, any>>({});
   const [submitLoading, setSubmitLoading] = useState<boolean>(false);
   const [isAddWorkerStep, setIsAddWorkerStep] = useState<boolean>(false);
-  const [isComplete, setIsComplete] = useState<boolean>(false);
 
   const formRefs: Record<string, any> = {
     [moduleMap.BasicForm]: useRef<any>(null),
@@ -240,6 +228,7 @@ const ClusterCreate: React.FC<{
   // add worker or cluster registration step
   const handleAddWorker = () => {
     setIsAddWorkerStep(true);
+    setCurrentTitle?.(intl.formatMessage({ id: 'resources.button.create' }));
     onNext();
   };
 
@@ -301,7 +290,6 @@ const ClusterCreate: React.FC<{
     const res = await createCluster({ data });
     const info = await queryClusterToken({ id: res.id });
     setSubmitLoading(false);
-    setIsComplete(true);
     setRegistrationInfo({
       ...info,
       cluster_id: res.id
@@ -320,11 +308,6 @@ const ClusterCreate: React.FC<{
 
   return (
     <MainWrapper>
-      {/* {!isAddWorkerStep && (
-        <StepsWrapper>
-          <ClusterSteps steps={steps} currentStep={currentStep}></ClusterSteps>
-        </StepsWrapper>
-      )} */}
       <ColumnWrapper
         styles={{
           container: { paddingTop: 16, paddingBottom: 16 }
@@ -341,13 +324,6 @@ const ClusterCreate: React.FC<{
           />
         }
       >
-        {/* {!isComplete && (
-          <div style={{ marginBottom: 24 }}>
-            <Title level={5} style={{ marginBottom: 8, fontSize: 14 }}>
-              {steps[currentStep]?.subTitle || steps[currentStep]?.title}
-            </Title>
-          </div>
-        )} */}
         {!isAddWorkerStep && (
           <div style={{ marginBottom: 32 }}>
             <ClusterSteps

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

@@ -1,4 +1,5 @@
 import GSDrawer from '@/components/scroller-modal/gs-drawer';
+import { PageAction } from '@/config';
 import React from 'react';
 import ClusterCreate from './cluster-create';
 
@@ -13,13 +14,14 @@ const ClusterModal: React.FC<ClusterModalProps> = ({
   onClose,
   title
 }) => {
+  const [currentTitle, setCurrentTitle] = React.useState<string>(title);
   const handleCancel = () => {
     onClose();
   };
 
   return (
     <GSDrawer
-      title={title}
+      title={currentTitle}
       open={open}
       onClose={handleCancel}
       destroyOnHidden={true}
@@ -34,7 +36,11 @@ const ClusterModal: React.FC<ClusterModalProps> = ({
       }}
       footer={false}
     >
-      <ClusterCreate onClose={handleCancel}></ClusterCreate>
+      <ClusterCreate
+        onClose={handleCancel}
+        action={PageAction.CREATE}
+        setCurrentTitle={setCurrentTitle}
+      ></ClusterCreate>
     </GSDrawer>
   );
 };

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

@@ -65,6 +65,7 @@ const AddWorkerCommand: React.FC<ViewModalProps> = ({
       code={code}
       copyValue={code}
       lang="bash"
+      xScrollable={true}
     ></HighlightCode>
   );
 };

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

@@ -131,7 +131,7 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
         body: {
           paddingBlock: 0
         },
-        wrapper: { width: 865 }
+        wrapper: { width: 700 }
       }}
       footer={false}
     >

src/pages/cluster-management/components/cluster-steps.tsx

@@ -1,4 +1,3 @@
-import { CheckCircleFilled, CheckCircleOutlined } from '@ant-design/icons';
 import { Steps } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
@@ -9,6 +8,9 @@ const Wrapper = styled.div`
   gap: 24px;
 `;
 
+/**
+ * --steps-item-base-width: 20px;  type="panel"
+ */
 const Box = styled.div`
   .indicates {
     color: var(--ant-color-text-tertiary);
@@ -16,76 +18,20 @@ const Box = styled.div`
     margin-bottom: 24px;
   }
   .ant-steps {
-    --steps-title-font-size: 14px;
     .ant-steps-item {
       --steps-item-base-width: 20px;
     }
+    .ant-steps-item-rail-wait {
+      --steps-item-solid-line-color: var(--ant-color-split);
     }
-`;
+    &:not(.ant-steps-panel) {
-
+      .ant-steps-item-finish {
-const StepItemWrapper = styled.div`
+        --steps-item-icon-bg-color: var(--ant-color-primary);
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding-bottom: 16px;
-  // border-bottom: 1px solid var(--ant-color-split);
-  .description {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-
-    .title {
-      font-weight: 500;
-      line-height: 20px;
-      color: var(--ant-color-text-tertiary);
-    }
-    .content {
-      line-height: 22px;
-      font-size: 14px;
-      color: var(--ant-color-text-tertiary);
-    }
-  }
-  &.active {
-    .description {
-      .title {
-        color: var(--ant-color-text);
-        font-weight: 600;
-      }
-      .content {
-        color: var(--ant-color-text);
       }
     }
   }
 `;
 
-const StepsItem: React.FC<{
-  active: boolean;
-  item: {
-    title: string;
-    content: string;
-  };
-}> = ({ active, item }) => {
-  return (
-    <StepItemWrapper className={active ? 'active' : ''}>
-      <div className="icon">
-        {active ? (
-          <CheckCircleFilled
-            style={{ color: 'var(--ant-color-primary)', fontSize: 20 }}
-          />
-        ) : (
-          <CheckCircleOutlined
-            style={{ color: 'var(--ant-color-text-disabled)', fontSize: 20 }}
-          />
-        )}
-      </div>
-      <div className="description">
-        <div className="title">{item.title}</div>
-        <div className="content">{item.content}</div>
-      </div>
-    </StepItemWrapper>
-  );
-};
-
 const ClusterSteps: React.FC<{
   currentStep: number;
   onChange?: (step: number) => void;
@@ -94,28 +40,41 @@ const ClusterSteps: React.FC<{
   const { steps, currentStep = 0, onChange } = props;
 
   const visibleSteps = steps.filter((step) => !step.hideInSteps);
-  return (
+
-    <Box>
+  const styles: Record<string, any> = {
-      <Wrapper>
+    root: {
-        {/* {visibleSteps.map((item, index) => (
+      '--ant-steps-description-max-width': 'auto'
-          <StepsItem
+    },
-            key={index}
-            active={currentStep === index}
-            item={item}
-          ></StepsItem>
-        ))} */}
-        <Steps
-          current={currentStep}
-          items={visibleSteps}
-          type="panel"
-          styles={{
     item: {
       paddingBlock: 0
     },
+    itemIcon: {
+      fontSize: 0,
+      width: 8,
+      height: 8,
+      marginInlineStart: 0
+    },
+    itemWrapper: {
+      alignItems: 'center'
+    },
     itemRail: {
-              borderColor: 'var(--ant-color-split)'
+      borderWidth: 1.5,
+      borderRadius: 1,
+      insetInlineStart: 10,
+      insetInlineEnd: 2,
+      '--steps-horizontal-rail-margin': '12px'
     }
-          }}
+  };
+
+  return (
+    <Box>
+      <Wrapper>
+        <Steps
+          current={currentStep}
+          items={visibleSteps}
+          variant="filled"
+          size="small"
+          styles={styles}
         ></Steps>
       </Wrapper>
     </Box>

src/pages/cluster-management/components/success-result.tsx

@@ -35,11 +35,11 @@ const SuccessResult: React.FC<{
       }}
       icon={
         <CheckCircleFilled
-          style={{ color: 'var(--ant-color-success)', fontSize: 42 }}
+          style={{ color: 'var(--ant-color-success)', fontSize: 36 }}
         />
       }
       status="success"
-      title={intl.formatMessage({ id: 'clusters.create.complete.tips' })}
+      title={intl.formatMessage({ id: 'clusters.create.steps.complete.tips' })}
       subTitle={provider === ProviderValueMap.Kubernetes ? k8sTips : dockerTips}
       extra={[
         <Flex gap={16} justify="center" key="buttons">

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

@@ -15,7 +15,9 @@ export default function useStepList() {
   return useMemo(
     () => [
       {
-        title: intl.formatMessage({ id: 'clusters.create.selectProvider' }),
+        title: intl.formatMessage({
+          id: 'clusters.create.steps.selectProvider'
+        }),
         content: '',
         subTitle: '',
         description:
@@ -35,7 +37,7 @@ export default function useStepList() {
         providers: []
       },
       {
-        title: intl.formatMessage({ id: 'common.title.config' }),
+        title: intl.formatMessage({ id: 'clusters.create.steps.configure' }),
         content: '',
         description:
           'Set the cluster name, description, or other essential parameters in advanced settings.',
@@ -72,7 +74,7 @@ export default function useStepList() {
         beforeNext: handleBack
       },
       {
-        title: intl.formatMessage({ id: 'clusters.create.complete' }),
+        title: intl.formatMessage({ id: 'clusters.create.steps.complete' }),
         content: '',
         description: '',
         showButtons: (provider?: ProviderType) => {

src/pages/llmodels/forms/advance-config.tsx

@@ -77,9 +77,10 @@ const AdvanceConfig = () => {
             included={true}
             max={modelContextData?.scaled || 163840}
             tooltip={{}}
+            step={1024}
             marks={{
-              [modelContextData?.native]: 'native',
+              [modelContextData?.scaled]: 'scaled',
-              [modelContextData?.scaled]: 'scaled'
+              [modelContextData?.native]: 'native'
             }}
           ></SealSlider>
         </Form.Item>