chore(deps): upgrade antd to v6

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

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

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

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>