chore: upgrade antd lib to 5.25.4

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

@@ -509,7 +509,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
       bordered={false}
       ghost
       accordion
-      destroyInactivePanel={false}
+      destroyOnHidden={false}
       className={dataformStyles['advanced-collapse']}
       expandIcon={({ isActive }) => (
         <IconFont

src/pages/llmodels/components/api-access-info.tsx

@@ -81,7 +81,7 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
       }}
       title={intl.formatMessage({ id: 'models.table.button.apiAccessInfo' })}
       width={550}
-      destroyOnClose
+      destroyOnHidden
       closable={true}
       maskClosable={false}
       onOk={handleClose}

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

@@ -508,7 +508,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       title={title}
       open={open}
       onClose={handleCancel}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       closeIcon={false}
       maskClosable={false}
       keyboard={false}

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

@@ -446,7 +446,7 @@ const AddModal: FC<AddModalProps> = (props) => {
       title={title}
       open={open}
       onClose={handleCancel}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       closeIcon={false}
       maskClosable={false}
       keyboard={false}

src/pages/llmodels/components/hf-model-file.tsx

@@ -414,7 +414,12 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
             </ItemFileWrapper>
           ) : (
             <Empty
-              imageStyle={{ height: 'auto', marginTop: '20px' }}
+              styles={{
+                image: {
+                  height: 'auto',
+                  marginTop: '20px'
+                }
+              }}
               image={Empty.PRESENTED_IMAGE_SIMPLE}
               description={intl.formatMessage({
                 id: 'models.search.nofiles'

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

@@ -107,9 +107,11 @@ const WorkerInfo = (props: {
         open={open}
         onOpenChange={setOpen}
         title={props.title}
-        overlayInnerStyle={{
-          width: 'max-content',
-          maxWidth: '400px'
+        styles={{
+          body: {
+            width: 'max-content',
+            maxWidth: '400px'
+          }
         }}
       >
         <span className="server-info">
@@ -184,11 +186,15 @@ const RenderWorkerDownloading = (props: {
   return (
     <Tooltip
       arrow={true}
-      overlayInnerStyle={{
-        width: 300,
-        backgroundColor: 'var(--color-spotlight-bg)'
+      styles={{
+        body: {
+          width: 300,
+          backgroundColor: 'var(--color-spotlight-bg)'
+        }
+      }}
+      classNames={{
+        root: 'light-downloading-tooltip'
       }}
-      overlayClassName="light-downloading-tooltip"
       title={
         <RenderRayactorDownloading
           severList={severList}
@@ -505,10 +511,12 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
       <TooltipOverlayScroller
         toolTipProps={{
           trigger: 'hover',
-          overlayInnerStyle: {
-            width: 'max-content',
-            maxWidth: '520px',
-            minWidth: '400px'
+          styles: {
+            body: {
+              width: 'max-content',
+              maxWidth: '520px',
+              minWidth: '400px'
+            }
           }
         }}
         title={renderDistributedServer(severList)}
@@ -561,7 +569,11 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
     };
     return (
       <Tooltip
-        overlayInnerStyle={{ paddingInline: 12 }}
+        styles={{
+          body: {
+            paddingInline: 12
+          }
+        }}
         title={
           <InfoColumn fieldList={fieldList} data={offloadData}></InfoColumn>
         }

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

@@ -514,7 +514,11 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
   const renderGGUFTips = useMemo(() => {
     return (
       <Tooltip
-        overlayInnerStyle={{ width: 'max-content' }}
+        styles={{
+          body: {
+            width: 'max-content'
+          }
+        }}
         title={
           <UL>
             <li>{intl.formatMessage({ id: 'models.search.gguf.tips' })}</li>

src/pages/llmodels/components/search-result.tsx

@@ -61,7 +61,12 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
     if (networkError) {
       return (
         <Empty
-          imageStyle={{ height: 'auto', marginTop: '20px' }}
+          styles={{
+            image: {
+              height: 'auto',
+              marginTop: '20px'
+            }
+          }}
           image={
             <IconFont
               type="icon-networkerror"
@@ -98,7 +103,12 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
     }
     return (
       <Empty
-        imageStyle={{ height: 'auto', marginTop: '20px' }}
+        styles={{
+          image: {
+            height: 'auto',
+            marginTop: '20px'
+          }
+        }}
         image={
           <SearchOutlined
             className="font-size-16"

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

@@ -1,12 +1,10 @@
 import { modelsExpandKeysAtom } from '@/atoms/models';
-import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
 import DropDownActions from '@/components/drop-down-actions';
 import DropdownButtons from '@/components/drop-down-buttons';
 import { PageSize } from '@/components/logs-viewer/config';
 import PageTools from '@/components/page-tools';
 import SealTable from '@/components/seal-table';
-import { SealColumnProps } from '@/components/seal-table/types';
 import { PageAction } from '@/config';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
@@ -14,15 +12,11 @@ import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
 import { handleBatchRequest } from '@/utils';
-import {
-  DownOutlined,
-  QuestionCircleOutlined,
-  SyncOutlined
-} from '@ant-design/icons';
+import { DownOutlined, SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
-import { Button, Input, Select, Space, Tooltip, message } from 'antd';
-import dayjs from 'dayjs';
+import { useMemoizedFn } from 'ahooks';
+import { Button, Input, Select, Space, message } from 'antd';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
 import React, {
@@ -51,9 +45,7 @@ import {
 import {
   ButtonList,
   categoryToPathMap,
-  generateSource,
   modalConfig,
-  setModelActionList,
   sourceOptions
 } from '../config/button-actions';
 import {
@@ -63,10 +55,10 @@ import {
   SourceType
 } from '../config/types';
 import useFormInitialValues from '../hooks/use-form-initial-values';
+import useModelsColumns from '../hooks/use-models-columns';
 import APIAccessInfoModal from './api-access-info';
 import DeployModal from './deploy-modal';
 import Instances from './instances';
-import ModelTag from './model-tag';
 import UpdateModel from './update-modal';
 import ViewLogsModal from './view-logs-modal';
 interface ModelsProps {
@@ -96,21 +88,6 @@ interface ModelsProps {
   total: number;
 }
 
-const statusList = [
-  {
-    label: 'Running',
-    value: 'running'
-  },
-  {
-    label: 'Stopped',
-    value: 'stopped'
-  },
-  {
-    label: 'Error',
-    value: 'error'
-  }
-];
-
 const getFormattedData = (record: any, extraData = {}) => ({
   id: record.id,
   data: {
@@ -441,57 +418,47 @@ const Models: React.FC<ModelsProps> = ({
       }
     });
   }, []);
-  const handleSelect = useCallback(
-    async (val: any, row: ListItem) => {
-      try {
-        if (val === 'edit') {
-          handleEdit(row);
-        }
-        if (val === 'chat') {
-          handleOpenPlayGround(row);
-        }
-        if (val === 'delete') {
-          handleDelete(row);
-        }
-        if (val === 'start') {
-          await handleStartModel(row);
-          message.success(intl.formatMessage({ id: 'common.message.success' }));
-          updateExpandedRowKeys([row.id, ...expandedRowKeys]);
-          onStart?.();
-        }
-
-        if (val === 'api') {
-          handleViewAPIInfo(row);
-        }
-
-        if (val === 'stop') {
-          modalRef.current?.show({
-            content: 'models.instances',
-            title: 'common.title.stop.confirm',
-            okText: 'common.button.stop',
-            operation: 'common.stop.single.confirm',
-            name: row.name,
-            async onOk() {
-              await handleStopModel(row);
-              onStop?.([row.id]);
-            }
-          });
-        }
-      } catch (error) {
-        // ignore
+  const handleSelect = useMemoizedFn(async (val: any, row: ListItem) => {
+    try {
+      if (val === 'edit') {
+        handleEdit(row);
+      }
+      if (val === 'chat') {
+        handleOpenPlayGround(row);
+      }
+      if (val === 'delete') {
+        handleDelete(row);
+      }
+      if (val === 'start') {
+        await handleStartModel(row);
+        message.success(intl.formatMessage({ id: 'common.message.success' }));
+        updateExpandedRowKeys([row.id, ...expandedRowKeys]);
+        onStart?.();
       }
-    },
-    [
-      handleEdit,
-      handleOpenPlayGround,
-      handleDelete,
-      onStop,
-      onStart,
-      expandedRowKeys
-    ]
-  );
 
-  const handleChildSelect = useCallback(
+      if (val === 'api') {
+        handleViewAPIInfo(row);
+      }
+
+      if (val === 'stop') {
+        modalRef.current?.show({
+          content: 'models.instances',
+          title: 'common.title.stop.confirm',
+          okText: 'common.button.stop',
+          operation: 'common.stop.single.confirm',
+          name: row.name,
+          async onOk() {
+            await handleStopModel(row);
+            onStop?.([row.id]);
+          }
+        });
+      }
+    } catch (error) {
+      // ignore
+    }
+  });
+
+  const handleChildSelect = useMemoizedFn(
     (val: any, row: ModelInstanceListItem) => {
       if (val === 'delete') {
         handleDeleteInstace(row);
@@ -499,8 +466,7 @@ const Models: React.FC<ModelsProps> = ({
       if (val === 'viewlog') {
         handleViewLogs(row);
       }
-    },
-    [handleViewLogs, handleDeleteInstace]
+    }
   );
 
   const renderChildren = useCallback(
@@ -575,114 +541,23 @@ const Models: React.FC<ModelsProps> = ({
     }
   };
 
-  const columns: SealColumnProps[] = useMemo(() => {
-    return [
-      {
-        title: intl.formatMessage({ id: 'common.table.name' }),
-        dataIndex: 'name',
-        key: 'name',
-        span: 5,
-        render: (text: string, record: ListItem) => (
-          <span className="flex-center" style={{ maxWidth: '100%' }}>
-            <AutoTooltip ghost>
-              <span className="m-r-5">{text}</span>
-            </AutoTooltip>
-            <ModelTag categoryKey={record.categories?.[0] || ''} />
-          </span>
-        )
-      },
-      {
-        title: 'Cluster',
-        dataIndex: 'cluster',
-        key: 'cluster',
-        span: 3,
-        render: (text: string, record: ListItem) => (
-          <span className="flex flex-column" style={{ width: '100%' }}>
-            {
-              clusterList.find((item) => item.value === record.cluster_id)
-                ?.label
-            }
-          </span>
-        )
-      },
-      {
-        title: intl.formatMessage({ id: 'models.form.source' }),
-        dataIndex: 'source',
-        key: 'source',
-        span: 5,
-        render: (text: string, record: ListItem) => (
-          <span className="flex flex-column" style={{ width: '100%' }}>
-            <AutoTooltip ghost>{generateSource(record)}</AutoTooltip>
-          </span>
-        )
-      },
-      {
-        title: (
-          <Tooltip
-            title={intl.formatMessage(
-              { id: 'models.form.replicas.tips' },
-              { api: `${window.location.origin}/v1` }
-            )}
-          >
-            <span style={{ fontWeight: 'var(--font-weight-medium)' }}>
-              {intl.formatMessage({ id: 'models.form.replicas' })}
-            </span>
-            <QuestionCircleOutlined className="m-l-5" />
-          </Tooltip>
-        ),
-        dataIndex: 'replicas',
-        key: 'replicas',
-        align: 'center',
-        span: 4,
-        editable: {
-          valueType: 'number',
-          title: intl.formatMessage({ id: 'models.table.replicas.edit' })
-        },
-        render: (text: number, record: ListItem) => (
-          <span style={{ paddingLeft: 10, minWidth: '33px' }}>
-            {record.ready_replicas} / {record.replicas}
-          </span>
-        )
-      },
-      {
-        title: intl.formatMessage({ id: 'common.table.createTime' }),
-        dataIndex: 'created_at',
-        key: 'created_at',
-        defaultSortOrder: 'descend',
-        sortOrder,
-        sorter: false,
-        span: 4,
-        render: (text: number) => (
-          <AutoTooltip ghost>
-            {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
-          </AutoTooltip>
-        )
-      },
-      {
-        title: intl.formatMessage({ id: 'common.table.operation' }),
-        key: 'operation',
-        dataIndex: 'operation',
-        span: 3,
-        render: (text, record) => (
-          <DropdownButtons
-            items={setModelActionList(record)}
-            onSelect={(val) => handleSelect(val, record)}
-          />
-        )
-      }
-    ];
-  }, [sortOrder, intl, handleSelect]);
+  const options = useMemo(() => {
+    return {
+      handleSelect,
+      clusterList,
+      sortOrder
+    };
+  }, [handleSelect, clusterList, sortOrder]);
 
-  const handleToggleExpandAll = useCallback(
-    (expanded: boolean) => {
-      const keys = dataSource.map((item) => item.id);
-      handleExpandAll(expanded, keys);
-      if (expanded) {
-        handleOnToggleExpandAll();
-      }
-    },
-    [dataSource]
-  );
+  const columns = useModelsColumns(options);
+
+  const handleToggleExpandAll = useMemoizedFn((expanded: boolean) => {
+    const keys = dataSource.map((item) => item.id);
+    handleExpandAll(expanded, keys);
+    if (expanded) {
+      handleOnToggleExpandAll();
+    }
+  });
 
   return (
     <>

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

@@ -273,9 +273,8 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
       open={open}
       centered={true}
       onOk={handleSumit}
-      onCancel={onCancel}
-      onClose={handleOnClose}
-      destroyOnClose={true}
+      onCancel={handleOnClose}
+      destroyOnHidden={true}
       closeIcon={true}
       maskClosable={false}
       keyboard={false}

src/pages/llmodels/components/view-logs-modal.tsx

@@ -101,7 +101,7 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
       open={open}
       centered={true}
       onCancel={handleCancel}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       closeIcon={true}
       maskClosable={false}
       keyboard={true}

src/pages/llmodels/download/index.tsx

@@ -134,7 +134,7 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
       title={title}
       open={open}
       onClose={handleCancel}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       closeIcon={false}
       maskClosable={false}
       keyboard={false}

src/pages/llmodels/hooks/use-models-columns.tsx

@@ -0,0 +1,130 @@
+// columns.ts
+import AutoTooltip from '@/components/auto-tooltip';
+import DropdownButtons from '@/components/drop-down-buttons';
+import { SealColumnProps } from '@/components/seal-table/types';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Tooltip } from 'antd';
+import type { SortOrder } from 'antd/es/table/interface';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import ModelTag from '../components/model-tag';
+import { generateSource, setModelActionList } from '../config/button-actions';
+import { ListItem } from '../config/types';
+
+interface ModelsColumnsHookProps {
+  handleSelect: (val: string, record: ListItem) => void;
+  sortOrder: SortOrder;
+  clusterList: Global.BaseOption<
+    number,
+    { provider: string; state: string | number }
+  >[];
+}
+
+const useModelsColumns = ({
+  handleSelect,
+  clusterList,
+  sortOrder
+}: ModelsColumnsHookProps): SealColumnProps[] => {
+  const intl = useIntl();
+
+  return useMemo(() => {
+    return [
+      {
+        title: intl.formatMessage({ id: 'common.table.name' }),
+        dataIndex: 'name',
+        key: 'name',
+        span: 5,
+        render: (text: string, record: ListItem) => (
+          <span className="flex-center" style={{ maxWidth: '100%' }}>
+            <AutoTooltip ghost>
+              <span className="m-r-5">{text}</span>
+            </AutoTooltip>
+            <ModelTag categoryKey={record.categories?.[0] || ''} />
+          </span>
+        )
+      },
+      {
+        title: 'Cluster',
+        dataIndex: 'cluster',
+        key: 'cluster',
+        span: 3,
+        render: (text: string, record: ListItem) => (
+          <span className="flex flex-column" style={{ width: '100%' }}>
+            {
+              clusterList.find((item) => item.value === record.cluster_id)
+                ?.label
+            }
+          </span>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'models.form.source' }),
+        dataIndex: 'source',
+        key: 'source',
+        span: 5,
+        render: (text: string, record: ListItem) => (
+          <span className="flex flex-column" style={{ width: '100%' }}>
+            <AutoTooltip ghost>{generateSource(record)}</AutoTooltip>
+          </span>
+        )
+      },
+      {
+        title: (
+          <Tooltip
+            title={intl.formatMessage(
+              { id: 'models.form.replicas.tips' },
+              { api: `${window.location.origin}/v1` }
+            )}
+          >
+            <span style={{ fontWeight: 'var(--font-weight-medium)' }}>
+              {intl.formatMessage({ id: 'models.form.replicas' })}
+            </span>
+            <QuestionCircleOutlined className="m-l-5" />
+          </Tooltip>
+        ),
+        dataIndex: 'replicas',
+        key: 'replicas',
+        align: 'center',
+        span: 4,
+        editable: {
+          valueType: 'number',
+          title: intl.formatMessage({ id: 'models.table.replicas.edit' })
+        },
+        render: (text: number, record: ListItem) => (
+          <span style={{ paddingLeft: 10, minWidth: '33px' }}>
+            {record.ready_replicas} / {record.replicas}
+          </span>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.createTime' }),
+        dataIndex: 'created_at',
+        key: 'created_at',
+        defaultSortOrder: 'descend',
+        sortOrder,
+        sorter: false,
+        span: 4,
+        render: (text: number) => (
+          <AutoTooltip ghost>
+            {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.operation' }),
+        key: 'operation',
+        dataIndex: 'operation',
+        span: 3,
+        render: (text, record) => (
+          <DropdownButtons
+            items={setModelActionList(record)}
+            onSelect={(val) => handleSelect(val, record)}
+          />
+        )
+      }
+    ];
+  }, [sortOrder, clusterList, intl, handleSelect]);
+};
+
+export default useModelsColumns;