chore(deps): upgrade antd to v6

2026-01-06 17:21:32 +08:00
parent b2f5eb8850
commit 17de9d98f4
69 changed files with 2490 additions and 2657 deletions
@@ -96,7 +96,7 @@ const AutoImage: React.FC<
        preview &&
        !isError && {
          mask: <EyeOutlined />,
-          toolbarRender: (
+          actionsRender: (
            _,
            {
              transform: { scale },
@@ -101,7 +101,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
      size={loadingSize}
      steps={{ count: 50, gap: 2 }}
      format={() => <span className="font-size-20">{round(progress, 0)}%</span>}
-      trailColor="var(--ant-color-fill-secondary)"
+      railColor="var(--ant-color-fill-secondary)"
    />;
  };

@@ -181,7 +181,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                        </span>
                      )}
                      strokeColor="var(--color-white-secondary)"
-                      trailColor="var(--ant-color-fill-secondary)"
+                      railColor="var(--ant-color-fill-secondary)"
                    />
                  </span>
                )}
@@ -118,6 +118,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
      ) : (
        <StyledTag
          {...tagProps}
+          variant="outlined"
          className={`${tagProps.className || ''} ${filled ? 'tag-filled' : ''}`}
          ref={contentRef}
          style={{
@@ -147,4 +148,4 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
  );
 };

-export default React.memo(AutoTooltip);
+export default AutoTooltip;
@@ -77,7 +77,7 @@ export interface CollapsibleContainerProps {
  onToggle?: (open: boolean) => void;
  disabled?: boolean;
  variant?: 'outlined' | 'borderless' | undefined;
-  iconPosition?: 'left' | 'right';
+  iconPlacement?: 'left' | 'right';
  className?: string;
  children?: React.ReactNode;
  styles?: {
@@ -100,7 +100,7 @@ export default function CollapsibleContainer({
  variant = 'borderless',
  className = '',
  collapsible,
-  iconPosition = 'left',
+  iconPlacement = 'left',
  styles: cardStyles,
  children
 }: CollapsibleContainerProps) {
@@ -147,7 +147,7 @@ export default function CollapsibleContainer({
      <div className={styles.title} onClick={toggle}>
        <div className={styles.left}>
          <div className={styles.expandIcon}>
-            {iconPosition === 'left' && renderIcon()}
+            {iconPlacement === 'left' && renderIcon()}
            {title && <div>{title}</div>}
          </div>
          {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
@@ -155,7 +155,7 @@ export default function CollapsibleContainer({
        <div className={styles.right}>
          {right && <span>{right}</span>}
          {deleteBtn && <span className="del-btn">{deleteBtn}</span>}
-          {iconPosition === 'right' && renderIcon()}
+          {iconPlacement === 'right' && renderIcon()}
        </div>
      </div>
    );
@@ -1,6 +1,6 @@
 import { MoreOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
+import { Button, Dropdown, Space, Tooltip, type MenuProps } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import React from 'react';
@@ -31,7 +31,9 @@ const DropdownWrapper = styled.div`
  min-width: 160px;
 `;

-const DropdownButtons: React.FC<DropdownButtonsProps> = ({
+const DropdownButtons: React.FC<
+  DropdownButtonsProps & { items: MenuProps['items'] }
+> = ({
  items,
  size = 'middle',
  trigger = ['hover'],
@@ -72,70 +74,64 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
          ></Button>
        </Tooltip>
      ) : (
-        <Dropdown.Button
-          disabled={disabled}
-          trigger={trigger}
-          type="primary"
-          popupRender={(menus: any) => {
-            return (
-              <DropdownWrapper>
-                {_.map(_.tail(items), (item: any) => {
-                  return (
-                    <Button
-                      {...item.props}
-                      type="text"
-                      size={size}
-                      icon={item.icon}
-                      key={item.key}
-                      disabled={item.disabled}
-                      onClick={() => handleMenuClick(item)}
-                      style={{
-                        width: '100%',
-                        justifyContent: 'flex-start',
-                        paddingInline: 10
-                      }}
-                    >
-                      {intl.formatMessage({ id: item.label })}
-                    </Button>
-                  );
+        <Space.Compact>
+          <>
+            {showText ? (
+              <Button
+                {...headItem?.props}
+                disabled={headItem?.disabled || disabled}
+                className={classNames('dropdown-button', size)}
+                onClick={handleButtonClick}
+                size={size}
+                icon={headItem?.icon}
+                variant={variant}
+                color={color}
+              >
+                {intl.formatMessage({
+                  id: headItem?.label
                })}
-              </DropdownWrapper>
-            );
-          }}
-          buttonsRender={([leftButton, rightButton]) => [
-            <>
-              {showText ? (
+                {extra}
+              </Button>
+            ) : (
+              <Tooltip
+                title={intl.formatMessage({ id: headItem?.label })}
+                key="leftButton"
+              >
                <Button
                  {...headItem?.props}
-                  disabled={headItem?.disabled || disabled}
                  className={classNames('dropdown-button', size)}
                  onClick={handleButtonClick}
                  size={size}
                  icon={headItem?.icon}
-                  variant={variant}
-                  color={color}
-                >
-                  {intl.formatMessage({
-                    id: headItem?.label
-                  })}
-                  {extra}
-                </Button>
-              ) : (
-                <Tooltip
-                  title={intl.formatMessage({ id: headItem?.label })}
-                  key="leftButton"
-                >
-                  <Button
-                    {...headItem?.props}
-                    className={classNames('dropdown-button', size)}
-                    onClick={handleButtonClick}
-                    size={size}
-                    icon={headItem?.icon}
-                    disabled={headItem?.disabled}
-                  ></Button>
-                </Tooltip>
-              )}
-            </>,
+                  disabled={headItem?.disabled}
+                ></Button>
+              </Tooltip>
+            )}
+          </>
+          <Dropdown
+            disabled={disabled}
+            trigger={trigger}
+            placement="bottomRight"
+            styles={{
+              root: {
+                minWidth: 160
+              },
+              itemIcon: {
+                fontSize: 14
+              }
+            }}
+            menu={{
+              onClick: handleMenuClick,
+              items: _.tail(items).map((item: any) => ({
+                ...item,
+                ...item.props,
+                label:
+                  item.locale || item.locale === undefined
+                    ? intl.formatMessage({ id: item.label })
+                    : item.label
+              }))
+            }}
+          >
            <Button
              icon={<MoreOutlined />}
              size={size}
@@ -144,8 +140,8 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
              color="default"
              className={classNames('dropdown-button', size)}
            ></Button>
-          ]}
-        ></Dropdown.Button>
+          </Dropdown>
+        </Space.Compact>
      )}
    </>
  );
@@ -56,7 +56,7 @@ const Footer: React.FC = () => {
                <span> {new Date().getFullYear()}</span>
                <span> {intl.formatMessage({ id: 'settings.company' })}</span>
              </CompanyWrapper>
-              <Divider type="vertical" />
+              <Divider orientation="vertical" />
              <Button
                type="link"
                size="small"
@@ -65,7 +65,7 @@ const Footer: React.FC = () => {
              >
                {intl.formatMessage({ id: 'common.button.help' })}
              </Button>
-              <Divider type="vertical" />
+              <Divider orientation="vertical" />
              <Button type="link" size="small" onClick={showVersion}>
                {getAtomStorage(GPUStackVersionAtom)?.version}
              </Button>
@@ -1,4 +1,3 @@
-// import AutoComplete from '@/components/seal-form/auto-complete';
 import { MinusOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
 import React from 'react';
@@ -82,9 +82,9 @@ export const TooltipOverlayScroller: React.FC<
    <Tooltip
      styles={{
        ...styles,
-        body: {
+        container: {
          paddingInline: 0,
-          ...styles?.body
+          ...styles?.container
        }
      }}
      title={
@@ -53,6 +53,7 @@ interface ActionItem {
  value: string;
  key: string;
  icon: React.ReactNode;
+  [key: string]: any;
 }
 interface FilterBarProps {
  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -122,7 +123,7 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
              <Button
                icon={<DownOutlined></DownOutlined>}
                type="primary"
-                iconPosition="end"
+                iconPlacement="end"
              >
                {buttonText}
              </Button>
@@ -12,7 +12,9 @@ const SealPopover: React.FC<PopoverProps> = (props) => {
        {...restProps}
        style={{ ...style }}
        data-maxHeight="300px"
-        overlayClassName={classNames(className, styles.seal_custom_popover)}
+        classNames={{
+          root: classNames(className, styles.seal_custom_popover)
+        }}
      >
        {children}
      </Popover>
@@ -1,6 +1,7 @@
 import { useEscHint } from '@/hooks/use-esc-hint';
 import { CloseOutlined } from '@ant-design/icons';
 import { Button, Drawer, type DrawerProps } from 'antd';
+import React from 'react';

 /**
 * use ColumnWrapper to wrap content in Drawer with scroller
@@ -22,11 +23,18 @@ const ScrollerModal = (props: DrawerProps) => {
  const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
    props.onClose?.(e);
  };
+
  return (
    <>
      <Drawer
        {...restProps}
        styles={{
+          wrapper: {
+            ...styles?.wrapper
+          },
+          root: {
+            ...styles?.root
+          },
          body: {
            height: 'calc(100vh - 57px)',
            paddingBlock: 16,
@@ -34,9 +42,9 @@ const ScrollerModal = (props: DrawerProps) => {
            overflowX: 'hidden',
            ...styles?.body
          },
-          content: {
+          section: {
            borderRadius: '6px 0 0 6px',
-            ...styles?.content
+            ...styles?.section
          }
        }}
        closable={false}
@@ -60,7 +60,7 @@ const ScrollerModal = (
      title={<Title>{props.title}</Title>}
      destroyOnHidden={true}
      styles={{
-        content: {
+        container: {
          padding: 0
        },
        header: {
@@ -32,6 +32,7 @@ const SealAutoComplete: React.FC<
    loading,
    allowClear,
    clearSpaceOnBlur,
+    showSearch,
    ...rest
  } = props;
  const [isFocus, setIsFocus] = useState(false);
@@ -83,10 +84,6 @@ const SealAutoComplete: React.FC<
    props.onBlur?.(e);
  };

-  const handleSearch = (text: string) => {
-    props.onSearch?.(text);
-  };
-
  const handleOnSelect = (value: any, option: any) => {
    onSelect?.(value, option);
  };
@@ -146,7 +143,7 @@ const SealAutoComplete: React.FC<
          onSelect={handleOnSelect}
          onFocus={handleOnFocus}
          onBlur={handleOnBlur}
-          onSearch={handleSearch}
+          showSearch={showSearch}
          onChange={handleChange}
          popupRender={popupRender}
          onInput={handleOnInput}
@@ -146,9 +146,10 @@ const SealCascader: React.FC<
  };

  const handleOnBlur = (e: any) => {
-    if (allowNull && props.value === null) {
+    const noVal = !props.value || props.value.length === 0;
+    if (allowNull && noVal) {
      setIsFocus(true);
-    } else if (!props.value) {
+    } else if (noVal) {
      setIsFocus(false);
    }
    props.onBlur?.(e);
@@ -24,6 +24,7 @@ const SealSelect: React.FC<
    isInFormItems = true,
    notFoundContent = null,
    loading,
+    footer,
    ...rest
  } = props;
  const intl = useIntl();
@@ -106,6 +107,7 @@ const SealSelect: React.FC<
      >
        <BaseSelect
          {...rest}
+          footer={footer}
          ref={inputRef}
          options={children ? null : _options}
          onFocus={handleOnFocus}
@@ -196,8 +196,8 @@ const SimpleSelect: React.FC<SelectProps & { ref?: any; showTags?: boolean }> =
    };

    const handleOnSearch = (value: string) => {
-      if (restProps.onSearch) {
-        restProps.onSearch(value);
+      if (restProps.showSearch?.onSearch) {
+        restProps.showSearch?.onSearch?.(value);
      } else {
        const filteredOptions = options?.filter((option: any) =>
          option.label.toLowerCase().includes(value.toLowerCase())
@@ -268,8 +268,10 @@ const SimpleSelect: React.FC<SelectProps & { ref?: any; showTags?: boolean }> =
          tagRender={TagRender}
          onBlur={handleOnBlur}
          onFocus={handleOnFocus}
-          onSearch={handleOnSearch}
-          filterOption={filterOption}
+          showSearch={{
+            onSearch: handleOnSearch,
+            filterOption: restProps.showSearch?.filterOption || filterOption
+          }}
          onOpenChange={handleOnOpenChange}
        >
          {props.children}
@@ -1,5 +0,0 @@
-:local(.dropdown-visible) {
-  :local(.ant-select-selector) {
-    border-bottom: 0 !important;
-  }
-}
@@ -160,6 +160,9 @@ const InputWrapper = styled.div`
    top: 0;
    height: ${WRAPHEIGHT - 2}px;
  }
+  .ant-input-number-actions {
+    border-radius: 0 ${BORDERRADIUS}px ${BORDERRADIUS}px 0;
+  }
  .seal-textarea-wrapper {
    height: auto;
    padding-right: 10px;
@@ -8,10 +8,11 @@ const SelectWrapper = styled.div`

    &.dropdown-visible {
      .__wrapper__ {
-        .ant-select-selector {
+        .ant-cascader.ant-select.ant-select-outlined {
          border-bottom: none !important;
          border-radius: ${BORDERRADIUS}px ${BORDERRADIUS}px 0 0;
          transition: all 0.2s ease;
+          box-shadow: none;

          &::before {
            content: '';
@@ -79,12 +80,14 @@ const SelectWrapper = styled.div`
          top: 50%;
        }

-        .ant-select-selector {
-          padding-block-start: 0 !important;
+        .ant-select .ant-select-input {
+          top: 5px !important;
        }
-
-        .ant-select .ant-select-selection-search {
-          top: 10px !important;
+        .ant-select-placeholder {
+          position: absolute;
+          top: 10px;
+          left: 0;
+          right: 0;
        }
      }
    }
@@ -96,6 +99,7 @@ const SelectWrapper = styled.div`
      display: flex;
      align-items: center;
      height: 54px;
+      padding-inline: 14px !important;

      .ant-select-selection-wrap {
        height: 100%;
@@ -109,23 +113,25 @@ const SelectWrapper = styled.div`
      &.ant-select-multiple.ant-cascader .ant-select-selection-search {
        top: 0 !important;
      }
-    }

-    .ant-select-selector {
-      flex: 1;
-      padding-inline: ${INPUT_INNER_PADDING}px !important;
-      border-width: var(--ant-line-width);
-      border-style: var(--ant-line-type);
-      border-color: var(--ant-color-border);
-      border-radius: ${BORDERRADIUS}px;
-      height: 54px !important;
-      padding-block: 20px 0 !important;
-      box-shadow: none !important;
+      .ant-select-content {
+        padding-block: 20px 0 !important;
+        box-shadow: none !important;
+      }
+      &.ant-cascader {
+        .ant-select-content-item-prefix + .ant-select-content-item-suffix {
+          margin-inline-start: 0 !important;
+        }
+      }

-      &:focus-within {
-        border-color: var(--ant-input-active-border-color) !important;
-        outline: 0;
-        background-color: var(--ant-input-active-bg);
+      .ant-select-input {
+        height: ${INPUTHEIGHT}px !important;
+        top: 14px !important;
+      }
+      .ant-select-placeholder {
+        > span {
+          padding-inline: 0 !important;
+        }
      }
    }

@@ -143,39 +149,15 @@ const SelectWrapper = styled.div`
      padding-inline-end: 0 !important;
    }

-    .ant-select-auto-complete .ant-select-selector {
-      padding-inline: 0 !important;
-      flex: 1;
-    }
-
    .ant-select-arrow {
      top: 32px;
    }

-    .ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input)
-      .ant-select-selector {
-      background-color: transparent;
-    }
-
    .ant-select-selection-search-input {
      height: ${INPUTHEIGHT}px !important;
    }

    &.validate-status-error {
-      .ant-select-selector {
-        border-width: var(--ant-line-width) !important;
-        border-style: var(--ant-line-type) !important;
-        border-color: var(--ant-color-error) !important;
-
-        &:hover {
-          border-color: var(--ant-color-error-border-hover) !important;
-        }
-
-        &:focus-within {
-          border-color: var(--ant-color-error) !important;
-        }
-      }
-
      &.dropdown-visible {
        .ant-select-dropdown {
          border-color: var(--ant-color-error) !important;
@@ -37,7 +37,7 @@ const InfoColumn: React.FC<InfoColumnProps> = (props) => {
            </span>
            {index < fieldList.length - 1 ? (
              <Divider
-                type="vertical"
+                orientation="vertical"
                style={{
                  height: 30,
                  marginInline: 12,
@@ -102,7 +102,9 @@ const TagsWrapper: React.FC<TagsWrapperProps> = (props) => {
        {hiddenIndices.end < dataList.length && (
          <Dropdown
            trigger={['hover']}
-            overlayClassName="tags-wrapper-dropdown"
+            classNames={{
+              root: 'tags-wrapper-dropdown'
+            }}
            menu={{
              items: _.map(
                _.slice(dataList, hiddenIndices.end),
@@ -26,6 +26,7 @@ const ThemeTag: React.FC<TagProps & { opacity?: number }> = ({
  return (
    <TagWrapper
      {...restProps}
+      variant="outlined"
      style={{
        ...style,
        opacity: isDarkTheme ? 1 : opacity
@@ -8,7 +8,7 @@ interface UitilBarProps {
  gapDegree?: number;
  strokeWidth?: number;
  size?: number;
-  trailColor?: string;
+  railColor?: string;
  strokeColor?: string;
 }
 const UitilBar: React.FC<UitilBarProps> = (props) => {
@@ -20,7 +20,7 @@ const UitilBar: React.FC<UitilBarProps> = (props) => {
    title,
    size = 150,
    strokeColor,
-    trailColor = 'rgba(221,221,221,.5)'
+    railColor = 'rgba(221,221,221,.5)'
  } = props;

  const strokeColorFunc = (percent: number) => {
@@ -42,7 +42,7 @@ const UitilBar: React.FC<UitilBarProps> = (props) => {
        strokeWidth={strokeWidth}
        size={size}
        percent={percent}
-        trailColor={trailColor}
+        railColor={railColor}
        strokeColor={strokeColor || strokeColorFunc(percent)}
      ></Progress>
    </div>
@@ -73,6 +73,7 @@ declare namespace Global {
    label: string;
    key: string;
    icon: React.ReactNode;
+    locale?: boolean;
    props?: {
      danger?: boolean;
    };
@@ -9,6 +9,12 @@ export default {
      inputFontSize: 14,
      inputFontSizeLG: 14
    },
+    InputNumber: {
+      handleWidth: 32
+    },
+    Tag: {
+      defaultBg: '#1d1d1d'
+    },
    Steps: {
      descriptionMaxWidth: 200,
      iconSizeSM: 20
@@ -9,6 +9,12 @@ export default {
      inputFontSize: 14,
      inputFontSizeLG: 14
    },
+    InputNumber: {
+      handleWidth: 32
+    },
+    Tag: {
+      defaultBg: '#fafafa'
+    },
    Steps: {
      descriptionMaxWidth: 200,
      iconSizeSM: 20
@@ -189,8 +189,7 @@ body {
  }

  .ant-input-outlined,
-  .ant-input-number,
-  .ant-select-selector {
+  .ant-input-number {
    background: transparent !important;
  }

@@ -9,7 +9,7 @@ export default function useBodyScroll() {
  const instanceRef = React.useRef<any>(null);
  const timer = React.useRef<any>(null);

-  const int = () => {
+  const init = () => {
    bodyScroller.current =
      window.__GPUSTACK_BODY_SCROLLER__?.elements()?.scrollEventElement;

@@ -18,7 +18,7 @@ export default function useBodyScroll() {

  const saveScrollHeight = React.useCallback(() => {
    if (!bodyScroller.current) {
-      int();
+      init();
    }
    scrollerState.current = instanceRef.current?.state();

@@ -43,11 +43,11 @@ export default function useBodyScroll() {
          y: 'scroll'
        }
      });
-    }, 500);
+    }, 650);
  }, []);

  React.useEffect(() => {
-    int();
+    init();
    return () => {
      bodyScroller.current = null;
      instanceRef.current = null;
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 import { routeCacheAtom, setRouteCache } from '@/atoms/route-cache';
 import { GPUStackVersionAtom, userAtom } from '@/atoms/user';
 import DarkMask from '@/components/dark-mask';
@@ -158,7 +156,7 @@ export default (props: any) => {
    }
  };

-  const dropRouteCache = (pathname) => {
+  const dropRouteCache = (pathname: string) => {
    for (let key of routeCache.keys()) {
      if (key !== pathname && !routeCache.get(key) && routeCachekey[key]) {
        dropByCacheKey(key);
@@ -227,7 +225,7 @@ export default (props: any) => {
    return userSettings.collapsed || false;
  }, [userSettings.collapsed]);

-  const renderMenuHeader = (logo, title) => {
+  const renderMenuHeader = (logo: React.ReactNode, title: React.ReactNode) => {
    return (
      <>
        {logo}
@@ -19,7 +19,7 @@ const CollapseInner = styled(Collapse)`
    }
  }

-  .ant-collapse-content-box {
+  .ant-collapse-body {
    padding-inline: 0 !important;
    padding-block: 0 !important;
  }
@@ -38,7 +38,7 @@ const CollapsePanel: React.FC<{
 }> = ({ items, activeKey, accordion, onChange }) => {
  return (
    <CollapseInner
-      expandIconPosition="start"
+      expandIconPlacement="start"
      bordered={false}
      ghost
      accordion={accordion}
@@ -210,7 +210,9 @@ const AddModal: React.FC<AddModalProps> = ({
      closeIcon={false}
      maskClosable={false}
      keyboard={false}
-      width={600}
+      styles={{
+        wrapper: { width: 600 }
+      }}
      footer={false}
    >
      <ColumnWrapper
@@ -269,7 +271,7 @@ const AddModal: React.FC<AddModalProps> = ({
            <Form.Item>
              <div>
                <Tag
-                  bordered={false}
+                  variant="filled"
                  color="error"
                  style={{ padding: '6px 8px', marginBottom: 16 }}
                >
@@ -195,11 +195,13 @@ const AddModal: React.FC<AddModalProps> = (props) => {
          padding: '0 0 16px',
          overflowX: 'hidden'
        },
-        content: {
+        section: {
          borderRadius: '6px 0 0 6px'
+        },
+        wrapper: {
+          width: 600
        }
      }}
-      width={600}
      footer={false}
    >
      <SegmentedHeader>
@@ -231,7 +231,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
            <Tag
              color="geekblue"
              className="font-400"
-              bordered={false}
+              variant="filled"
              style={{ borderRadius: 'var(--ant-border-radius)', margin: 0 }}
            >
              {intl.formatMessage({ id: 'backend.builtin' })}
@@ -2,7 +2,7 @@ import { clusterSessionAtom } from '@/atoms/clusters';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import ColumnWrapper from '@/pages/_components/column-wrapper';
-import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
+import { useIntl, useSearchParams } from '@umijs/max';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -66,7 +66,6 @@ const ClusterCreate: React.FC<{
  const [searchParams] = useSearchParams();
  const action =
    (searchParams.get('action') as PageActionType) || PageAction.CREATE;
-  const navigate = useNavigate();
  const [clusterSession, setClusterSession] = useAtom(clusterSessionAtom);
  const [credentialList, setCredentialList] = useState<
    Global.BaseOption<number, { provider: ProviderType }>[]
@@ -314,24 +313,12 @@ const ClusterCreate: React.FC<{
        firstAddCluster: false,
        firstAddWorker: false
      });
-      // navigate(`/cluster-management/clusters/list`);
      onClose?.();
      return;
    }
    onClose?.();
-    // navigate(-1);
  };

-  const breadcrumbItems = [
-    {
-      title: <a>{intl.formatMessage({ id: 'clusters.title' })}</a>,
-      onClick: () => handleCancel()
-    },
-    {
-      title: intl.formatMessage({ id: 'common.button.create' })
-    }
-  ];
-
  return (
    <MainWrapper>
      <StepsWrapper>
@@ -21,11 +21,11 @@ const ClusterModal: React.FC<ClusterModalProps> = ({ open, onClose }) => {
      closeIcon={false}
      maskClosable={false}
      keyboard={false}
-      width={900}
      styles={{
        body: {
          paddingBlock: 0
-        }
+        },
+        wrapper: { width: 900 }
      }}
      footer={false}
    >
@@ -169,7 +169,7 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
              width: '100%'
            }}
            type="success"
-            message={renderMessage(addedCount)}
+            title={renderMessage(addedCount)}
            closable
          />
        )}
@@ -36,7 +36,7 @@ const CheckEnvironment = () => {
        style={{
          marginBottom: 8
        }}
-        message={
+        title={
          <span
            dangerouslySetInnerHTML={{
              __html: intl.formatMessage(
@@ -140,7 +140,7 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
                width: '100%'
              }}
              type="success"
-              message={renderMessage(addedCount)}
+              title={renderMessage(addedCount)}
              closable
            />
          )}
@@ -73,7 +73,7 @@ const StepCollapse: React.FC<StepItemProps> = ({
      <CollapsibleContainer
        collapsible={true}
        open={collapseKey?.has(name)}
-        iconPosition="right"
+        iconPlacement="right"
        styles={{
          body: collapseKey?.has(name) ? { padding: 16 } : {},
          content: { paddingTop: 0 },
@@ -168,13 +168,14 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
        ]}
      >
        <SealSelect
-          showSearch
+          showSearch={{
+            filterOption: filterRegionOption
+          }}
          disabled={action === PageAction.EDIT}
          label={intl.formatMessage({ id: 'clusters.workerpool.region' })}
          required
          options={regions}
          loading={loading}
-          filterOption={filterRegionOption}
          labelRender={labelRender}
          optionRender={optionRender}
          onChange={handleRegionChange}
@@ -20,12 +20,16 @@ const ClusterDetailModal: React.FC<ClusterDetailModalProps> = ({

  return (
    <GSDrawer
-      width={'calc(100vw - 200px)'}
+      styles={{
+        wrapper: {
+          width: 'calc(100vw - 200px)'
+        }
+      }}
      title={`${currentData?.name}`}
      open={open}
      onClose={handleOnClose}
    >
-      <ClusterDetailContent data={currentData} />
+      <ClusterDetailContent />
    </GSDrawer>
  );
 };
@@ -2,8 +2,6 @@ import { Steps } from 'antd';
 import React from 'react';
 import styled from 'styled-components';

-const { Step } = Steps;
-
 const Wrapper = styled.div`
  width: min(1200px, 100%);
  margin: 0 auto;
@@ -24,19 +22,12 @@ const ClusterSteps: React.FC<{
  return (
    <Wrapper>
      <Steps
+        items={steps}
        current={currentStep}
        size="small"
        onChange={onChange}
-        direction="vertical"
-      >
-        {steps.map((step) => (
-          <Step
-            key={step.title}
-            title={step.title}
-            description={step.content}
-          />
-        ))}
-      </Steps>
+        orientation="vertical"
+      ></Steps>
    </Wrapper>
  );
 };
@@ -365,8 +365,9 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
            ]}
          >
            <SealSelect
-              showSearch
-              filterOption={filterInstanceOption}
+              showSearch={{
+                filterOption: filterInstanceOption
+              }}
              labelRender={instanceLabelRender}
              notFoundContent={<NotFoundContent />}
              label={intl.formatMessage({
@@ -362,7 +362,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
      closeIcon={false}
      maskClosable={false}
      keyboard={false}
-      width={width}
+      styles={{
+        wrapper: { width: width }
+      }}
      footer={false}
    >
      <CatalogFormContext.Provider
@@ -542,7 +542,9 @@ const AddModal: FC<AddModalProps> = (props) => {
      closeIcon={false}
      maskClosable={false}
      keyboard={false}
-      width={width}
+      styles={{
+        wrapper: { width: width }
+      }}
      footer={false}
    >
      <Container>
@@ -114,7 +114,7 @@ const IncompatiableInfo: React.FC<IncompatiableInfoProps> = (props) => {
      <CompatibleTag
        icon={<WarningOutlined />}
        color={error ? 'error' : 'warning'}
-        bordered={false}
+        variant="filled"
      ></CompatibleTag>
    </TooltipOverlayScroller>
  );
@@ -102,6 +102,10 @@ const draftModelDownloadList: ColumnProps[] = [
  ...statusColumn
 ];

+const calcTotalVram = (vram: Record<string, number>) => {
+  return _.sum(_.values(vram));
+};
+
 const WorkerInfo = (props: {
  title: React.ReactNode;
  defaultOpen: boolean;
@@ -121,7 +125,7 @@ const WorkerInfo = (props: {
        onOpenChange={setOpen}
        title={props.title}
        styles={{
-          body: {
+          container: {
            width: 'max-content',
            maxWidth: '400px'
          }
@@ -224,7 +228,7 @@ const RenderWorkerDownloading = (props: {
    <Tooltip
      arrow={true}
      styles={{
-        body: {
+        container: {
          width: 360,
          backgroundColor: 'var(--color-spotlight-bg)'
        }
@@ -497,10 +501,6 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
    intl
  ]);

-  const calcTotalVram = (vram: Record<string, number>) => {
-    return _.sum(_.values(vram));
-  };
-
  const renderDistributedServer = (severList: any[]) => {
    const list = _.map(severList, (item: any) => {
      const data = _.find(workerList, { id: item.worker_id });
@@ -543,13 +543,11 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
    if (!severList.length) {
      return null;
    }
-
    return (
      <TooltipOverlayScroller
        toolTipProps={{
-          trigger: 'hover',
          styles: {
-            body: {
+            container: {
              width: 'max-content',
              maxWidth: '520px',
              minWidth: '400px'
@@ -558,26 +556,28 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
        }}
        title={renderDistributedServer(severList)}
      >
-        <ThemeTag
-          opacity={0.75}
-          color="processing"
-          style={{
-            marginRight: 0,
-            display: 'flex',
-            alignItems: 'center',
-            maxWidth: '100%',
-            minWidth: 50,
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            borderRadius: 12
-          }}
-        >
-          <InfoCircleOutlined className="m-r-5" />
-          {intl.formatMessage({
-            id: 'models.table.acrossworker'
-          })}
-        </ThemeTag>
+        <span>
+          <ThemeTag
+            opacity={0.75}
+            color="processing"
+            style={{
+              marginRight: 0,
+              display: 'flex',
+              alignItems: 'center',
+              maxWidth: '100%',
+              minWidth: 50,
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              borderRadius: 12
+            }}
+          >
+            <InfoCircleOutlined className="m-r-5" />
+            {intl.formatMessage({
+              id: 'models.table.acrossworker'
+            })}
+          </ThemeTag>
+        </span>
      </TooltipOverlayScroller>
    );
  };
@@ -608,7 +608,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
    return (
      <Tooltip
        styles={{
-          body: {
+          container: {
            paddingInline: 12
          }
        }}
@@ -53,6 +53,7 @@ const ModelTag: React.FC<ModelTagProps> = ({ categoryKey, size }) => {
  return (
    <Tag
      icon={config.icon}
+      variant="outlined"
      style={{
        height: size,
        margin: 0,
@@ -6,7 +6,7 @@ const Separator: React.FC = () => {
  return (
    <div className="separator">
      <Divider
-        type="vertical"
+        orientation="vertical"
        style={{ height: 'calc(100vh - 89px)', marginInline: '0px' }}
      ></Divider>
      <span className="shape"></span>
@@ -700,7 +700,7 @@ const Models: React.FC<ModelsProps> = ({
                <Button
                  icon={<DownOutlined></DownOutlined>}
                  type="primary"
-                  iconPosition="end"
+                  iconPlacement="end"
                >
                  {intl?.formatMessage?.({ id: 'models.button.deploy' })}
                </Button>
@@ -243,7 +243,9 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
      closeIcon={true}
      maskClosable={false}
      keyboard={false}
-      width={600}
+      styles={{
+        wrapper: { width: 600 }
+      }}
      footer={false}
    >
      <ColumnWrapper
@@ -165,7 +165,9 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
      maskClosable={false}
      keyboard={false}
      zIndex={2000}
-      width={width}
+      styles={{
+        wrapper: { width: width }
+      }}
      footer={false}
    >
      <div style={{ display: 'flex', height: '100%' }}>
@@ -168,7 +168,9 @@ const SpeculativeDecode = () => {
                  id: 'models.form.draftModel.tips'
                })}
                options={draftModelList}
-                onSearch={onSearch}
+                showSearch={{
+                  onSearch: onSearch
+                }}
                onBlur={handleOnDraftBlur}
                onSelect={handleDraftSelect}
              ></AutoComlete>
@@ -15,7 +15,7 @@
      }
    }

-    .ant-collapse-content-box {
+    .ant-collapse-body {
      padding-inline: 0 !important;
      padding-block: 0 !important;
    }
@@ -247,10 +247,10 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
          ></div>
        </div>
        <span className="flex-center hover-hidden rank-tag">
-          <Tag color={'geekblue'} bordered={false}>
+          <Tag color={'geekblue'} variant="filled">
            {intl.formatMessage({ id: 'playground.rerank.rank' })}: {data.rank}
          </Tag>
-          <Tag color={'gold'} bordered={false}>
+          <Tag color={'gold'} variant="filled">
            {intl.formatMessage({ id: 'playground.rerank.score' })}:{' '}
            {_.round(data.score, 2)}
          </Tag>
@@ -456,7 +456,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
            {imageList.length > 0 && (
              <>
                <Divider
-                  type="vertical"
+                  orientation="vertical"
                  style={{
                    margin: '0 30px',
                    height: 80
@@ -411,7 +411,7 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
                >
                  {intl.formatMessage({ id: `playground.${message.role}` })}
                </Button>
-                <Divider type="vertical" style={{ margin: 0 }} />
+                <Divider orientation="vertical" style={{ margin: 0 }} />
              </>
            )}
            {actions.includes('check') && (
@@ -451,7 +451,7 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(

            {actions.includes('layout') && updateLayout && (
              <>
-                <Divider type="vertical" style={{ margin: 0 }} />
+                <Divider orientation="vertical" style={{ margin: 0 }} />
                {layoutOptions.map((option) => (
                  <Tooltip
                    title={intl.formatMessage({ id: option.tips })}
@@ -302,7 +302,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
          <Popover
            autoAdjustOverflow={true}
            styles={{
-              body: {
+              container: {
                width: 375,
                paddingInline: 0
              }
@@ -57,7 +57,7 @@ const RerankMessage: React.FC<RerankMessageProps> = ({ header, dataList }) => {
                          status="normal"
                          percentPosition={{ align: 'end', type: 'outer' }}
                          strokeColor={`linear-gradient(90deg, #388bff 0%, #fff ${sItem.normalizValue}%)`}
-                          trailColor="transparent"
+                          railColor="transparent"
                          percent={sItem.normalizValue}
                          style={{
                            position: 'absolute',
@@ -90,7 +90,7 @@ const PlaygroundEmbedding: React.FC = () => {
        />,
        <Divider
          key="divider"
-          type="vertical"
+          orientation="vertical"
          style={{ height: 24, marginInline: 16 }}
        />,
        <ExtraContent key="extra-content" />
@@ -169,7 +169,7 @@ const TextToImages: React.FC = () => {
        ></ViewCodeButtons>,
        <Divider
          key="divider"
-          type="vertical"
+          orientation="vertical"
          style={{ height: 24, marginInline: 16 }}
        />,
        <ExtraContent key="extra-content" />
@@ -160,7 +160,7 @@ const Playground: React.FC = () => {
          {activeKey === 'chat' && (
            <Divider
              key="divider"
-              type="vertical"
+              orientation="vertical"
              style={{ height: 16, marginInline: 16 }}
            />
          )}
@@ -94,7 +94,7 @@ const PlaygroundRerank: React.FC = () => {
        ></ViewCodeButtons>,
        <Divider
          key="divider"
-          type="vertical"
+          orientation="vertical"
          style={{ height: 24, marginInline: 16 }}
        />,
        <ExtraContent key="extra-content" />
@@ -206,7 +206,7 @@ const Playground: React.FC = () => {
        ></ViewCodeButtons>,
        <Divider
          key="divider"
-          type="vertical"
+          orientation="vertical"
          style={{ height: 24, marginInline: 16 }}
        />,
        <ExtraContent key="extra-content" />
@@ -57,12 +57,6 @@
    transform: rotate(-30deg);
  }

-  .ant-select-selector {
-    .ant-select-selection-overflow {
-      justify-content: flex-end;
-    }
-  }
-
  .input-box {
    width: 100%;
    display: flex;
@@ -20,7 +20,9 @@ const WorkerDetailModal: React.FC<WorkerDetailModalProps> = ({

  return (
    <GSDrawer
-      width={'calc(100vw - 200px)'}
+      styles={{
+        wrapper: { width: 'calc(100vw - 200px)' }
+      }}
      title={`${currentData?.name}`}
      open={open}
      destroyOnHidden={true}
@@ -159,7 +159,7 @@ const DistributionInfo: React.FC<{
      toolTipProps={{
        trigger: 'hover',
        styles: {
-          body: {
+          container: {
            width: 'max-content',
            maxWidth: '520px',
            minWidth: '400px'
@@ -221,7 +221,7 @@ const OffloadInfo: React.FC<{
  return (
    <Tooltip
      styles={{
-        body: {
+        container: {
          paddingInline: 12
        }
      }}