chore(deps): upgrade antd to v6

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

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

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

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

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