chore(deps): upgrade antd to v6

package.json

@@ -16,8 +16,8 @@
     "immer": "^9.0.6"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.5.1",
+    "@ant-design/icons": "^6.1.0",
-    "@ant-design/pro-components": "^2.7.19",
+    "@ant-design/pro-components": "3.1.0-0",
     "@braintree/sanitize-url": "^7.1.1",
     "@huggingface/gguf": "^0.1.7",
     "@huggingface/hub": "^0.15.1",
@@ -26,12 +26,12 @@
     "@orcid/bibtex-parse-js": "^0.0.25",
     "@react-hook/resize-observer": "^2.0.2",
     "@types/lodash": "^4.17.4",
-    "@umijs/max": "^4.2.11",
+    "@umijs/max": "^4.6.15",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
     "ahooks": "^3.8.5",
     "ansi-to-html": "^0.7.2",
-    "antd": "^5.25.4",
+    "antd": "^6.1.2",
     "antd-style": "^3.6.2",
     "axios": "^1.8.2",
     "classnames": "^2.5.1",

src/components/auto-image/index.tsx

@@ -96,7 +96,7 @@ const AutoImage: React.FC<
         preview &&
         !isError && {
           mask: <EyeOutlined />,
-          toolbarRender: (
+          actionsRender: (
             _,
             {
               transform: { scale },

src/components/auto-image/single-image.tsx

@@ -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>
                 )}

src/components/auto-tooltip/index.tsx

@@ -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;

src/components/collapse-container/index.tsx

@@ -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>
     );

src/components/drop-down-buttons/index.tsx

@@ -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
+        <Space.Compact>
-          disabled={disabled}
+          <>
-          trigger={trigger}
+            {showText ? (
-          type="primary"
+              <Button
-          popupRender={(menus: any) => {
+                {...headItem?.props}
-            return (
+                disabled={headItem?.disabled || disabled}
-              <DropdownWrapper>
+                className={classNames('dropdown-button', size)}
-                {_.map(_.tail(items), (item: any) => {
+                onClick={handleButtonClick}
-                  return (
+                size={size}
-                    <Button
+                icon={headItem?.icon}
-                      {...item.props}
+                variant={variant}
-                      type="text"
+                color={color}
-                      size={size}
+              >
-                      icon={item.icon}
+                {intl.formatMessage({
-                      key={item.key}
+                  id: headItem?.label
-                      disabled={item.disabled}
-                      onClick={() => handleMenuClick(item)}
-                      style={{
-                        width: '100%',
-                        justifyContent: 'flex-start',
-                        paddingInline: 10
-                      }}
-                    >
-                      {intl.formatMessage({ id: item.label })}
-                    </Button>
-                  );
                 })}
-              </DropdownWrapper>
+                {extra}
-            );
+              </Button>
-          }}
+            ) : (
-          buttonsRender={([leftButton, rightButton]) => [
+              <Tooltip
-            <>
+                title={intl.formatMessage({ id: headItem?.label })}
-              {showText ? (
+                key="leftButton"
+              >
                 <Button
                   {...headItem?.props}
-                  disabled={headItem?.disabled || disabled}
                   className={classNames('dropdown-button', size)}
                   onClick={handleButtonClick}
                   size={size}
                   icon={headItem?.icon}
-                  variant={variant}
+                  disabled={headItem?.disabled}
-                  color={color}
+                ></Button>
-                >
+              </Tooltip>
-                  {intl.formatMessage({
+            )}
-                    id: headItem?.label
+          </>
-                  })}
+          <Dropdown
-                  {extra}
+            disabled={disabled}
-                </Button>
+            trigger={trigger}
-              ) : (
+            placement="bottomRight"
-                <Tooltip
+            styles={{
-                  title={intl.formatMessage({ id: headItem?.label })}
+              root: {
-                  key="leftButton"
+                minWidth: 160
-                >
+              },
-                  <Button
+              itemIcon: {
-                    {...headItem?.props}
+                fontSize: 14
-                    className={classNames('dropdown-button', size)}
+              }
-                    onClick={handleButtonClick}
+            }}
-                    size={size}
+            menu={{
-                    icon={headItem?.icon}
+              onClick: handleMenuClick,
-                    disabled={headItem?.disabled}
+              items: _.tail(items).map((item: any) => ({
-                  ></Button>
+                ...item,
-                </Tooltip>
+                ...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>
-        ></Dropdown.Button>
+        </Space.Compact>
       )}
     </>
   );

src/components/footer/index.tsx

@@ -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>

src/components/list-input/list-item.tsx

@@ -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';

src/components/overlay-scroller/index.tsx

@@ -82,9 +82,9 @@ export const TooltipOverlayScroller: React.FC<
     <Tooltip
       styles={{
         ...styles,
-        body: {
+        container: {
           paddingInline: 0,
-          ...styles?.body
+          ...styles?.container
         }
       }}
       title={

src/components/page-tools/index.tsx

@@ -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>

src/components/popover/index.tsx

@@ -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>

src/components/scroller-modal/gs-drawer.tsx

@@ -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}

src/components/scroller-modal/index.tsx

@@ -60,7 +60,7 @@ const ScrollerModal = (
       title={<Title>{props.title}</Title>}
       destroyOnHidden={true}
       styles={{
-        content: {
+        container: {
           padding: 0
         },
         header: {

src/components/seal-form/auto-complete.tsx

@@ -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}

src/components/seal-form/seal-cascader.tsx

@@ -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);

src/components/seal-form/seal-select.tsx

@@ -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}

src/components/seal-form/simple-select.tsx

@@ -196,8 +196,8 @@ const SimpleSelect: React.FC<SelectProps & { ref?: any; showTags?: boolean }> =
     };
 
     const handleOnSearch = (value: string) => {
-      if (restProps.onSearch) {
+      if (restProps.showSearch?.onSearch) {
-        restProps.onSearch(value);
+        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}
+          showSearch={{
-          filterOption={filterOption}
+            onSearch: handleOnSearch,
+            filterOption: restProps.showSearch?.filterOption || filterOption
+          }}
           onOpenChange={handleOnOpenChange}
         >
           {props.children}

src/components/seal-form/styles/cascader.less

@@ -1,5 +0,0 @@
-:local(.dropdown-visible) {
-  :local(.ant-select-selector) {
-    border-bottom: 0 !important;
-  }
-}

src/components/seal-form/wrapper/input.ts

@@ -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;

src/components/seal-form/wrapper/select.ts

@@ -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 {
+        .ant-select .ant-select-input {
-          padding-block-start: 0 !important;
+          top: 5px !important;
         }
-
+        .ant-select-placeholder {
-        .ant-select .ant-select-selection-search {
+          position: absolute;
-          top: 10px !important;
+          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 {
+      .ant-select-content {
-      flex: 1;
+        padding-block: 20px 0 !important;
-      padding-inline: ${INPUT_INNER_PADDING}px !important;
+        box-shadow: none !important;
-      border-width: var(--ant-line-width);
+      }
-      border-style: var(--ant-line-type);
+      &.ant-cascader {
-      border-color: var(--ant-color-border);
+        .ant-select-content-item-prefix + .ant-select-content-item-suffix {
-      border-radius: ${BORDERRADIUS}px;
+          margin-inline-start: 0 !important;
-      height: 54px !important;
+        }
-      padding-block: 20px 0 !important;
+      }
-      box-shadow: none !important;
 
-      &:focus-within {
+      .ant-select-input {
-        border-color: var(--ant-input-active-border-color) !important;
+        height: ${INPUTHEIGHT}px !important;
-        outline: 0;
+        top: 14px !important;
-        background-color: var(--ant-input-active-bg);
+      }
+      .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;

src/components/simple-table/info-column.tsx

@@ -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,

src/components/tags-wrapper/index.tsx

@@ -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),

src/components/tags-wrapper/theme-tag.tsx

@@ -26,6 +26,7 @@ const ThemeTag: React.FC<TagProps & { opacity?: number }> = ({
   return (
     <TagWrapper
       {...restProps}
+      variant="outlined"
       style={{
         ...style,
         opacity: isDarkTheme ? 1 : opacity

src/components/util-bar/index.tsx

@@ -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>

src/config/global.d.ts

@@ -73,6 +73,7 @@ declare namespace Global {
     label: string;
     key: string;
     icon: React.ReactNode;
+    locale?: boolean;
     props?: {
       danger?: boolean;
     };

src/config/theme/dark.ts

@@ -9,6 +9,12 @@ export default {
       inputFontSize: 14,
       inputFontSizeLG: 14
     },
+    InputNumber: {
+      handleWidth: 32
+    },
+    Tag: {
+      defaultBg: '#1d1d1d'
+    },
     Steps: {
       descriptionMaxWidth: 200,
       iconSizeSM: 20

src/config/theme/light.ts

@@ -9,6 +9,12 @@ export default {
       inputFontSize: 14,
       inputFontSizeLG: 14
     },
+    InputNumber: {
+      handleWidth: 32
+    },
+    Tag: {
+      defaultBg: '#fafafa'
+    },
     Steps: {
       descriptionMaxWidth: 200,
       iconSizeSM: 20

src/global.less

@@ -189,8 +189,7 @@ body {
   }
 
   .ant-input-outlined,
-  .ant-input-number,
+  .ant-input-number {
-  .ant-select-selector {
     background: transparent !important;
   }
 

src/hooks/use-body-scroll.ts

@@ -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;

src/layouts/index.tsx

@@ -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}

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

@@ -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}

src/pages/api-keys/components/add-apikey-modal/index.tsx

@@ -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 }}
                 >

src/pages/backends/components/add-modal.tsx

@@ -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>

src/pages/backends/components/backend-card.tsx

@@ -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' })}

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

@@ -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>

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

@@ -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}
     >

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

@@ -169,7 +169,7 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
               width: '100%'
             }}
             type="success"
-            message={renderMessage(addedCount)}
+            title={renderMessage(addedCount)}
             closable
           />
         )}

src/pages/cluster-management/components/add-worker/check-environment.tsx

@@ -36,7 +36,7 @@ const CheckEnvironment = () => {
         style={{
           marginBottom: 8
         }}
-        message={
+        title={
           <span
             dangerouslySetInnerHTML={{
               __html: intl.formatMessage(

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

@@ -140,7 +140,7 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
                 width: '100%'
               }}
               type="success"
-              message={renderMessage(addedCount)}
+              title={renderMessage(addedCount)}
               closable
             />
           )}

src/pages/cluster-management/components/add-worker/step-collapse.tsx

@@ -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 },

src/pages/cluster-management/components/cloud-provider-form.tsx

@@ -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}

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

@@ -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>
   );
 };

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

@@ -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"
+        orientation="vertical"
-      >
+      ></Steps>
-        {steps.map((step) => (
-          <Step
-            key={step.title}
-            title={step.title}
-            description={step.content}
-          />
-        ))}
-      </Steps>
     </Wrapper>
   );
 };

src/pages/cluster-management/components/pool-form.tsx

@@ -365,8 +365,9 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
             ]}
           >
             <SealSelect
-              showSearch
+              showSearch={{
-              filterOption={filterInstanceOption}
+                filterOption: filterInstanceOption
+              }}
               labelRender={instanceLabelRender}
               notFoundContent={<NotFoundContent />}
               label={intl.formatMessage({

src/pages/llmodels/components/deploy-builtin-modal.tsx

@@ -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

src/pages/llmodels/components/deploy-modal.tsx

@@ -542,7 +542,9 @@ const AddModal: FC<AddModalProps> = (props) => {
       closeIcon={false}
       maskClosable={false}
       keyboard={false}
-      width={width}
+      styles={{
+        wrapper: { width: width }
+      }}
       footer={false}
     >
       <Container>

src/pages/llmodels/components/incompatiable-info.tsx

@@ -114,7 +114,7 @@ const IncompatiableInfo: React.FC<IncompatiableInfoProps> = (props) => {
       <CompatibleTag
         icon={<WarningOutlined />}
         color={error ? 'error' : 'warning'}
-        bordered={false}
+        variant="filled"
       ></CompatibleTag>
     </TooltipOverlayScroller>
   );

src/pages/llmodels/components/instance-item.tsx

@@ -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
+        <span>
-          opacity={0.75}
+          <ThemeTag
-          color="processing"
+            opacity={0.75}
-          style={{
+            color="processing"
-            marginRight: 0,
+            style={{
-            display: 'flex',
+              marginRight: 0,
-            alignItems: 'center',
+              display: 'flex',
-            maxWidth: '100%',
+              alignItems: 'center',
-            minWidth: 50,
+              maxWidth: '100%',
-            textOverflow: 'ellipsis',
+              minWidth: 50,
-            whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
-            overflow: 'hidden',
+              whiteSpace: 'nowrap',
-            borderRadius: 12
+              overflow: 'hidden',
-          }}
+              borderRadius: 12
-        >
+            }}
-          <InfoCircleOutlined className="m-r-5" />
+          >
-          {intl.formatMessage({
+            <InfoCircleOutlined className="m-r-5" />
-            id: 'models.table.acrossworker'
+            {intl.formatMessage({
-          })}
+              id: 'models.table.acrossworker'
-        </ThemeTag>
+            })}
+          </ThemeTag>
+        </span>
       </TooltipOverlayScroller>
     );
   };
@@ -608,7 +608,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
     return (
       <Tooltip
         styles={{
-          body: {
+          container: {
             paddingInline: 12
           }
         }}

src/pages/llmodels/components/model-tag.tsx

@@ -53,6 +53,7 @@ const ModelTag: React.FC<ModelTagProps> = ({ categoryKey, size }) => {
   return (
     <Tag
       icon={config.icon}
+      variant="outlined"
       style={{
         height: size,
         margin: 0,

src/pages/llmodels/components/separator.tsx

@@ -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>

src/pages/llmodels/components/table-list.tsx

@@ -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>

src/pages/llmodels/components/update-modal.tsx

@@ -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

src/pages/llmodels/download/index.tsx

@@ -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%' }}>

src/pages/llmodels/forms/speculative-decode.tsx

@@ -168,7 +168,9 @@ const SpeculativeDecode = () => {
                   id: 'models.form.draftModel.tips'
                 })}
                 options={draftModelList}
-                onSearch={onSearch}
+                showSearch={{
+                  onSearch: onSearch
+                }}
                 onBlur={handleOnDraftBlur}
                 onSelect={handleDraftSelect}
               ></AutoComlete>

src/pages/llmodels/style/data-form.less

@@ -15,7 +15,7 @@
       }
     }
 
-    .ant-collapse-content-box {
+    .ant-collapse-body {
       padding-inline: 0 !important;
       padding-block: 0 !important;
     }

src/pages/playground/components/ground-reranker.tsx

@@ -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>

src/pages/playground/components/image-edit.tsx

@@ -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

src/pages/playground/components/message-input.tsx

@@ -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 })}

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -302,7 +302,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
           <Popover
             autoAdjustOverflow={true}
             styles={{
-              body: {
+              container: {
                 width: 375,
                 paddingInline: 0
               }

src/pages/playground/components/rerank-message.tsx

@@ -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',

src/pages/playground/embedding.tsx

@@ -90,7 +90,7 @@ const PlaygroundEmbedding: React.FC = () => {
         />,
         <Divider
           key="divider"
-          type="vertical"
+          orientation="vertical"
           style={{ height: 24, marginInline: 16 }}
         />,
         <ExtraContent key="extra-content" />

src/pages/playground/images.tsx

@@ -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" />

src/pages/playground/index.tsx

@@ -160,7 +160,7 @@ const Playground: React.FC = () => {
           {activeKey === 'chat' && (
             <Divider
               key="divider"
-              type="vertical"
+              orientation="vertical"
               style={{ height: 16, marginInline: 16 }}
             />
           )}

src/pages/playground/rerank.tsx

@@ -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" />

src/pages/playground/speech.tsx

@@ -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" />

src/pages/playground/style/message-input.less

@@ -57,12 +57,6 @@
     transform: rotate(-30deg);
   }
 
-  .ant-select-selector {
-    .ant-select-selection-overflow {
-      justify-content: flex-end;
-    }
-  }
-
   .input-box {
     width: 100%;
     display: flex;

src/pages/resources/components/worker-detail-modal.tsx

@@ -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}

src/pages/resources/hooks/use-instances-columns.tsx

@@ -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
         }
       }}