chore: upgrade antd lib to 5.25.4

src/components/auto-tooltip/index.tsx

@@ -106,7 +106,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
     <TooltipOverlayScroller
       toolTipProps={{
         ...tooltipProps,
-        destroyTooltipOnHide: false
+        destroyOnHidden: false
       }}
       title={isOverflowing || showTitle ? title || children : false}
     >

src/components/delete-modal/index.tsx

@@ -138,7 +138,7 @@ const DeleteModal = forwardRef((props, ref) => {
       open={visible}
       onOk={handleOk}
       onCancel={handleCancel}
-      destroyOnClose={false}
+      destroyOnHidden={false}
       closeIcon={false}
       maskClosable={false}
       keyboard={false}

src/components/image-editor/tools-bar.tsx

@@ -48,12 +48,14 @@ const ToolsBar: React.FC<ToolsBarProps> = (props) => {
       <Tooltip
         placement="bottomLeft"
         arrow={false}
-        overlayInnerStyle={{
-          background: 'var(--color-white-1)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'flex-start',
-          width: 160
+        styles={{
+          body: {
+            background: 'var(--color-white-1)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            width: 160
+          }
         }}
         title={
           <div className="flex-column" style={{ width: '100%' }}>

src/components/overlay-scroller/index.tsx

@@ -75,12 +75,15 @@ export const TooltipOverlayScroller: React.FC<
   scrollbars,
   oppositeTheme
 }) => {
-  const { overlayInnerStyle, ...rest } = toolTipProps || {};
+  const { styles, ...rest } = toolTipProps || {};
   return (
     <Tooltip
-      overlayInnerStyle={{
-        paddingInline: 0,
-        ...overlayInnerStyle
+      styles={{
+        ...styles,
+        body: {
+          paddingInline: 0,
+          ...styles?.body
+        }
       }}
       title={
         title && (

src/components/progress-bar/index.tsx

@@ -65,7 +65,11 @@ const RenderProgress = memo(
             title={label}
             open={open}
             onOpenChange={setOpen}
-            overlayInnerStyle={{ paddingInline: 12 }}
+            styles={{
+              body: {
+                paddingInline: 12
+              }
+            }}
           >
             {renderProgress}
           </Tooltip>

src/components/scroller-modal/index.tsx

@@ -45,7 +45,7 @@ const ScrollerModal = (props: ModalProps & { maxContentHeight?: number }) => {
   return (
     <Modal
       {...props}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       styles={{
         content: {
           padding: 0

src/components/seal-table/components/table-row.tsx

@@ -1,17 +1,9 @@
-import useSetChunkRequest, {
-  createAxiosToken
-} from '@/hooks/use-chunk-request';
-import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
+import { createAxiosToken } from '@/hooks/use-chunk-request';
+import { useMemoizedFn } from 'ahooks';
 import { Col, Row, Spin } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import RowContext from '../row-context';
 import TableContext from '../table-context';
 import { RowContextProps, SealTableProps } from '../types';
@@ -43,10 +35,8 @@ const TableRow: React.FC<
     allChildren?: any[];
     setDisableExpand?: (record: any) => boolean;
   }>(TableContext);
-  const { setChunkRequest } = useSetChunkRequest();
   const [childrenData, setChildrenData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
-  const [firstLoad, setFirstLoad] = useState(true);
   const pollTimer = useRef<any>(null);
   const chunkRequestRef = useRef<any>(null);
   const childrenDataRef = useRef<any[]>([]);
@@ -55,12 +45,6 @@ const TableRow: React.FC<
   const [updateChild, setUpdateChild] = useState(true);
   const [currentExpand, setCurrentExpand] = useState(false);
 
-  const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({
-    dataList: childrenData,
-    limit: 100,
-    setDataList: setChildrenData
-  });
-
   useEffect(() => {
     return () => {
       if (pollTimer.current) {
@@ -87,16 +71,6 @@ const TableRow: React.FC<
 
   const renderChildrenData = () => {
     if (childrenData.length === 0) {
-      // return (
-      //   <Empty
-      //     image={loading ? null : Empty.PRESENTED_IMAGE_SIMPLE}
-      //     description={loading ? null : undefined}
-      //     style={{
-      //       marginBlock: 0,
-      //       height: 54
-      //     }}
-      //   ></Empty>
-      // );
       return null;
     }
     return renderChildren?.(childrenData, {
@@ -116,7 +90,7 @@ const TableRow: React.FC<
     }
   };
 
-  const handleLoadChildren = useCallback(async () => {
+  const handleLoadChildren = useMemoizedFn(async () => {
     try {
       axiosToken.current?.cancel?.();
       axiosToken.current = createAxiosToken();
@@ -130,10 +104,8 @@ const TableRow: React.FC<
     } catch (error) {
       setChildrenData([]);
       setLoading(false);
-    } finally {
-      setFirstLoad(false);
     }
-  }, [record, loadChildren]);
+  });
 
   const filterUpdateChildrenHandler = () => {
     const dataList = _.filter(tableContext.allChildren, (data: any) => {
@@ -142,32 +114,6 @@ const TableRow: React.FC<
     setChildrenData(dataList);
   };
 
-  const updateChildrenHandler = (list: any) => {
-    _.each(list, (data: any) => {
-      updateChunkedList(data);
-    });
-  };
-
-  const createChunkRequest = () => {
-    chunkRequestRef.current?.current?.cancel?.();
-    if (!watchChildren) {
-      return;
-    }
-    const url = loadChildrenAPI?.(record) as string;
-    try {
-      chunkRequestRef.current = setChunkRequest({
-        url,
-        params: {
-          page: 1,
-          perPage: 100
-        },
-        handler: updateChildrenHandler
-      });
-    } catch (error) {
-      // ignore
-    }
-  };
-
   const handleRowExpand = async () => {
     onExpand?.(!expanded, record, record[rowKey]);
     setCurrentExpand(!expanded);
@@ -216,7 +162,6 @@ const TableRow: React.FC<
   useEffect(() => {
     const handleVisibilityChange = async () => {
       if (document.visibilityState === 'hidden') {
-        cacheDataListRef.current = [];
         setUpdateChild(false);
       } else {
         setUpdateChild(true);
@@ -237,7 +182,6 @@ const TableRow: React.FC<
     }
     return () => {
       chunkRequestRef.current?.current?.cancel?.();
-      cacheDataListRef.current = [];
     };
   }, [updateChild, tableContext.allChildren]);
 
@@ -259,13 +203,13 @@ const TableRow: React.FC<
             disableExpand={disableExpand}
           ></RowPrefix>
           <Row className="seal-table-row">
-            {columns?.map((columnProps) => {
+            {columns?.map(({ key, ...restProps }) => {
               return (
                 <Col
-                  key={`${columnProps.dataIndex}-${rowIndex}`}
-                  span={columnProps.span}
+                  key={`${restProps.dataIndex}-${rowIndex}`}
+                  span={restProps.span}
                 >
-                  <TableColumn {...columnProps}></TableColumn>
+                  <TableColumn {...restProps}></TableColumn>
                 </Col>
               );
             })}

src/components/status-tag/index.tsx

@@ -157,7 +157,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
             autoHide: 'never'
           }}
           toolTipProps={{
-            destroyTooltipOnHide: true
+            destroyOnHidden: true
           }}
         >
           <span className="txt err">

src/components/upload-audio/index.tsx

@@ -46,7 +46,12 @@ const UploadAudio: React.FC<UploadAudioProps> = (props) => {
 
   return (
     <Tooltip
-      overlayInnerStyle={{ maxWidth: 290, width: 'max-content' }}
+      styles={{
+        body: {
+          maxWidth: 290,
+          width: 'max-content'
+        }
+      }}
       title={intl.formatMessage(
         { id: 'playground.audio.uploadfile.tips' },
         { formats: props.accept }

src/hooks/use-table-fetch.ts

@@ -42,6 +42,8 @@ export default function useTableFetch<T>(
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
+
+  // for skeleton loading
   const [extraStatus, setExtraStatus] = useState<Record<string, any>>({
     firstLoad: true
   });

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

@@ -102,7 +102,7 @@ const AddModal: React.FC<AddModalProps> = ({
       onOk={handleSumit}
       onCancel={onCancel}
       afterOpenChange={handleAfterOpenChange}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       closeIcon={false}
       maskClosable={false}
       keyboard={false}

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

@@ -105,7 +105,7 @@ const AddCluster: React.FC<AddModalProps> = ({
       title={modalTitle}
       open={open}
       onCancel={handleCancel}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       closeIcon={true}
       maskClosable={false}
       keyboard={false}

src/pages/cluster-management/components/add-credential.tsx

@@ -57,7 +57,7 @@ const AddModal: React.FC<AddModalProps> = ({
       open={open}
       centered={true}
       onOk={handleSumit}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       closeIcon={false}
       maskClosable={false}
       keyboard={false}

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

@@ -48,7 +48,7 @@ const AddCluster: React.FC<AddModalProps> = ({
       title={title}
       open={open}
       onCancel={handleCancel}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       closeIcon={true}
       maskClosable={false}
       keyboard={false}

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

@@ -28,7 +28,7 @@ const AddCluster: React.FC<AddModalProps> = ({
       title={title}
       open={open}
       onCancel={handleCancel}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       closeIcon={true}
       maskClosable={false}
       keyboard={false}

src/pages/cluster-management/hooks/use-credential-columns.tsx

@@ -71,7 +71,7 @@ const useCredentialColumns = (
         )
       }
     ];
-  }, [handleSelect, sortOrder]);
+  }, [intl, handleSelect, sortOrder]);
 };
 
 export default useCredentialColumns;

src/pages/dashboard/components/usage-inner/export-data.tsx

@@ -142,7 +142,7 @@ const ExportData: React.FC<{
       open={open}
       centered={false}
       onCancel={onCancel}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       closeIcon={true}
       maskClosable={false}
       keyboard={false}

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;

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

@@ -293,7 +293,12 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
           </Dropdown>
           <Popover
             autoAdjustOverflow={true}
-            overlayInnerStyle={{ width: 375, paddingInline: 0 }}
+            styles={{
+              body: {
+                width: 375,
+                paddingInline: 0
+              }
+            }}
             content={
               <OverlayScroller
                 maxHeight={500}

src/pages/playground/components/prompt-modal.tsx

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

src/pages/playground/components/view-common-code.tsx

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

src/pages/resources/components/add-worker.tsx

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

src/pages/resources/components/update-labels.tsx

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

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

@@ -23,7 +23,7 @@ const WorkerDetailModal: React.FC<WorkerDetailModalProps> = ({
       width={'calc(100vw - 200px)'}
       title={`${currentData?.name}`}
       open={open}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       onClose={handleOnClose}
     >
       <WorkerDetailContent worker_id={currentData?.id} />

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

@@ -360,7 +360,7 @@ const useFilesColumns = (props: {
         )
       }
     ];
-  }, [workersList, handleSelect]);
+  }, [intl, workersList, handleSelect]);
 };
 
 export default useFilesColumns;

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

@@ -138,7 +138,7 @@ const useGPUColumns = (props: {
         }
       }
     ];
-  }, [clusterList, loadend, firstLoad]);
+  }, [intl, clusterList, loadend, firstLoad]);
 };
 
 export default useGPUColumns;

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

@@ -157,10 +157,12 @@ const DistributionInfo: React.FC<{
     <TooltipOverlayScroller
       toolTipProps={{
         trigger: 'hover',
-        overlayInnerStyle: {
-          width: 'max-content',
-          maxWidth: '520px',
-          minWidth: '400px'
+        styles: {
+          body: {
+            width: 'max-content',
+            maxWidth: '520px',
+            minWidth: '400px'
+          }
         }
       }}
       title={renderDistributedServer(severList, instanceData)}
@@ -217,7 +219,11 @@ const OffloadInfo: React.FC<{
   };
   return (
     <Tooltip
-      overlayInnerStyle={{ paddingInline: 12 }}
+      styles={{
+        body: {
+          paddingInline: 12
+        }
+      }}
       title={<InfoColumn fieldList={fieldList} data={offloadData}></InfoColumn>}
     >
       <ThemeTag
@@ -338,7 +344,7 @@ const useInstanceColumns = (props: {
         )
       }
     ];
-  }, [clusterList]);
+  }, [intl, clusterList]);
 };
 
 export default useInstanceColumns;

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

@@ -58,7 +58,7 @@ const AddModal: React.FC<AddModalProps> = ({
       centered={true}
       onOk={handleSumit}
       onCancel={onCancel}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       closeIcon={false}
       maskClosable={false}
       keyboard={false}