style: ui for no data in table list

src/pages/users/index.tsx

@@ -1,4 +1,5 @@
 import DeleteModal from '@/components/delete-modal';
+import IconFont from '@/components/icon-font';
 import { FilterBar } from '@/components/page-tools';
 import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
@@ -6,21 +7,14 @@ import useTableFetch from '@/hooks/use-table-fetch';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { ConfigProvider, Empty, message, Switch, Table } from 'antd';
+import { Button, ConfigProvider, message, Table } from 'antd';
 import { useState } from 'react';
-import styled from 'styled-components';
+import NoResult from '../_components/no-result';
 import { createUser, deleteUser, queryUsersList, updateUser } from './apis';
 import AddModal from './components/add-modal';
 import { FormData, ListItem } from './config/types';
 import useUsersColumns from './hooks/use-users-columns';
 
-const StyledSwitch = styled(Switch)`
-  .ant-switch-handle::before {
-    inset-inline-end: 0 !important;
-    inset-inline-start: 0 !important;
-  }
-`;
-
 const Users: React.FC = () => {
   const {
     dataSource,
@@ -136,14 +130,24 @@ const Users: 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-users" />}
+        filters={queryParams}
+        noFoundText={intl.formatMessage({
+          id: 'noresult.users.nofound'
+        })}
+        title={intl.formatMessage({ id: 'noresult.users.title' })}
+        subTitle={intl.formatMessage({ id: 'noresult.users.subTitle' })}
+      >
+        <Button type="primary" onClick={handleAddUser}>
+          {intl.formatMessage({ id: 'noresult.button.add' })}
+        </Button>
+      </NoResult>
+    );
   };
 
   const columns = useUsersColumns({