style: ui for no data in table list

src/pages/resources/components/gpus.tsx

@@ -1,9 +1,11 @@
+import IconFont from '@/components/icon-font';
 import { FilterBar } from '@/components/page-tools';
 import useTableFetch from '@/hooks/use-table-fetch';
+import NoResult from '@/pages/_components/no-result';
 import { queryClusterList } from '@/pages/cluster-management/apis';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import { ConfigProvider, Empty, Table } from 'antd';
+import { ConfigProvider, Table } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { GPU_DEVICES_API, queryGpuDevicesList } from '../apis';
 import { GPUDeviceItem } from '../config/types';
@@ -44,14 +46,18 @@ const GPUList: React.FC = () => {
 
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
-    if (
-      !dataSource.loading &&
-      dataSource.loadend &&
-      !dataSource.dataList.length
-    ) {
-      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
-    }
-    return <div></div>;
+    return (
+      <NoResult
+        loading={dataSource.loading}
+        loadend={dataSource.loadend}
+        dataSource={dataSource.dataList}
+        image={<IconFont type="icon-gpu1" />}
+        filters={queryParams}
+        noFoundText={intl.formatMessage({ id: 'noresult.gpus.nofound' })}
+        title={intl.formatMessage({ id: 'noresult.gpus.title' })}
+        subTitle={intl.formatMessage({ id: 'noresult.gpus.subTitle' })}
+      ></NoResult>
+    );
   };
 
   const columns = useGPUColumns({

src/pages/resources/components/model-files.tsx

@@ -1,10 +1,12 @@
 import { modelsExpandKeysAtom } from '@/atoms/models';
 import DeleteModal from '@/components/delete-modal';
+import IconFont from '@/components/icon-font';
 import { FilterBar } from '@/components/page-tools';
 import { PageAction } from '@/config';
 import useAppUtils from '@/hooks/use-app-utils';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import useTableFetch from '@/hooks/use-table-fetch';
+import NoResult from '@/pages/_components/no-result';
 import { createModel } from '@/pages/llmodels/apis';
 import DeployModal from '@/pages/llmodels/components/deploy-modal';
 import { modelSourceMap } from '@/pages/llmodels/config';
@@ -21,7 +23,7 @@ import useRecognizeAudio from '@/pages/llmodels/hooks/use-recognize-audio';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { ConfigProvider, Empty, Table, message } from 'antd';
+import { ConfigProvider, Table, message } from 'antd';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
@@ -190,18 +192,6 @@ const ModelFiles = () => {
     }
   });
 
-  const renderEmpty = (type?: string) => {
-    if (type !== 'Table') return;
-    if (
-      !dataSource.loading &&
-      dataSource.loadend &&
-      !dataSource.dataList.length
-    ) {
-      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
-    }
-    return <div></div>;
-  };
-
   const handleClickDropdown = (item: any) => {
     const config = modalConfig[item.key];
     const hasLinuxWorker = workersList.some(
@@ -212,6 +202,22 @@ const ModelFiles = () => {
     }
   };
 
+  const renderEmpty = (type?: string) => {
+    if (type !== 'Table') return;
+    return (
+      <NoResult
+        loading={dataSource.loading}
+        loadend={dataSource.loadend}
+        dataSource={dataSource.dataList}
+        image={<IconFont type="icon-files" />}
+        filters={queryParams}
+        noFoundText={intl.formatMessage({ id: 'noresult.modelfiles.nofound' })}
+        title={intl.formatMessage({ id: 'noresult.modelfiles.title' })}
+        subTitle={intl.formatMessage({ id: 'noresult.modelfiles.subTitle' })}
+      ></NoResult>
+    );
+  };
+
   const handleDownloadCancel = () => {
     setDownlaodMoalStatus({
       ...downloadModalStatus,

src/pages/resources/components/workers.tsx

@@ -1,12 +1,14 @@
 import DeleteModal from '@/components/delete-modal';
+import IconFont from '@/components/icon-font';
 import { FilterBar } from '@/components/page-tools';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { queryClusterList } from '@/pages/cluster-management/apis';
 import { PageContainer } from '@ant-design/pro-components';
-import { useIntl } from '@umijs/max';
+import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { ConfigProvider, Empty, Table, message } from 'antd';
+import { Button, ConfigProvider, Table, message } from 'antd';
 import React, { useEffect, useState } from 'react';
+import NoResult from '../../_components/no-result';
 import TerminalTabs from '../../_components/terminal-tabs';
 import {
   WORKERS_API,
@@ -43,6 +45,7 @@ const Workers: React.FC = () => {
     API: WORKERS_API
   });
 
+  const navigate = useNavigate();
   const intl = useIntl();
   const [updateLabelsData, setUpdateLabelsData] = useState<{
     open: boolean;
@@ -175,16 +178,28 @@ const Workers: React.FC = () => {
     }
   });
 
+  const handleAddWorker = () => {
+    navigate('/cluster-management/clusters/list');
+  };
+
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
-    if (
-      !dataSource.loading &&
-      dataSource.loadend &&
-      !dataSource.dataList.length
-    ) {
-      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
-    }
-    return <div></div>;
+    return (
+      <NoResult
+        loading={dataSource.loading}
+        loadend={dataSource.loadend}
+        dataSource={dataSource.dataList}
+        image={<IconFont type="icon-resources" />}
+        filters={queryParams}
+        noFoundText={intl.formatMessage({ id: 'noresult.workers.nofound' })}
+        title={intl.formatMessage({ id: 'noresult.workers.title' })}
+        subTitle={intl.formatMessage({ id: 'noresult.workers.subTitle' })}
+      >
+        <Button type="primary" onClick={handleAddWorker}>
+          {intl.formatMessage({ id: 'noresult.workers.button.add' })}
+        </Button>
+      </NoResult>
+    );
   };
 
   const handleClusterChange = (value: number) => {