✨ feat(tables): add "No Results" empty state for all table components

Add consistent empty state handling across all table components to improve user experience when search/filter results are empty. Changes: - Import Empty component and IllustrationNoResult/IllustrationNoResultDark from @douyinfe/semi-ui - Add empty prop to Table components with "搜索无结果" message - Support both light and dark theme illustrations - Apply internationalization support for empty state text Affected files: - web/src/components/table/MjLogsTable.js - web/src/components/table/LogsTable.js - web/src/components/table/ChannelsTable.js - web/src/components/table/RedemptionsTable.js - web/src/components/table/TaskLogsTable.js - web/src/components/table/TokensTable.js - web/src/components/table/UsersTable.js - web/src/components/table/ModelPricing.js This ensures consistent UX across all table components when no data matches the current search or filter criteria.
2025-06-08 23:42:39 +08:00
parent 74be7b20f6
commit 9dbfd1b0af
9 changed files with 107 additions and 2 deletions
--- a/web/src/components/table/ChannelsTable.js
+++ b/web/src/components/table/ChannelsTable.js
@@ -30,6 +30,7 @@ import {
  Button,
  Divider,
  Dropdown,
+  Empty,
  Input,
  InputNumber,
  Modal,
@@ -43,6 +44,10 @@ import {
  Card,
  Form
 } from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark
+} from '@douyinfe/semi-illustrations';
 import EditChannel from '../../pages/Channel/EditChannel.js';
 import {
  IconTreeTriangleDown,
@@ -1526,6 +1531,14 @@ const ChannelsTable = () => {
              }
              : null
          }
+          empty={
+            <Empty
+              image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+              darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
+              description={t('搜索无结果')}
+              style={{ padding: 30 }}
+            />
+          }
          className="rounded-xl overflow-hidden"
          size="middle"
          loading={loading}
--- a/web/src/components/table/LogsTable.js
+++ b/web/src/components/table/LogsTable.js
@@ -40,6 +40,7 @@ import {
  Avatar,
  Button,
  Descriptions,
+  Empty,
  Modal,
  Popover,
  Space,
@@ -53,6 +54,10 @@ import {
  Divider,
  Form
 } from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark
+} from '@douyinfe/semi-illustrations';
 import { ITEMS_PER_PAGE } from '../../constants';
 import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
 import { IconSetting, IconSearch, IconForward } from '@douyinfe/semi-icons';
@@ -1367,6 +1372,14 @@ const LogsTable = () => {
          scroll={{ x: 'max-content' }}
          className='rounded-xl overflow-hidden'
          size='middle'
+          empty={
+            <Empty
+              image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+              darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
+              description={t('搜索无结果')}
+              style={{ padding: 30 }}
+            />
+          }
          pagination={{
            formatPageText: (page) =>
              t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
--- a/web/src/components/table/MjLogsTable.js
+++ b/web/src/components/table/MjLogsTable.js
@@ -40,6 +40,7 @@ import {
  Card,
  Checkbox,
  Divider,
+  Empty,
  Form,
  ImagePreview,
  Layout,
@@ -50,6 +51,10 @@ import {
  Tag,
  Typography
 } from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark
+} from '@douyinfe/semi-illustrations';
 import { ITEMS_PER_PAGE } from '../../constants';
 import {
  IconEyeOpened,
@@ -937,6 +942,14 @@ const LogsTable = () => {
            scroll={{ x: 'max-content' }}
            className="rounded-xl overflow-hidden"
            size="middle"
+            empty={
+              <Empty
+                image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+                darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
+                description={t('搜索无结果')}
+                style={{ padding: 30 }}
+              />
+            }
            pagination={{
              formatPageText: (page) =>
                t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
--- a/web/src/components/table/ModelPricing.js
+++ b/web/src/components/table/ModelPricing.js
@@ -17,14 +17,19 @@ import {
  Tabs,
  TabPane,
  Dropdown,
+  Empty
 } from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark
+} from '@douyinfe/semi-illustrations';
 import {
  IconVerify,
  IconHelpCircle,
  IconSearch,
  IconCopy,
  IconInfoCircle,
-  IconLayers,
+  IconLayers
 } from '@douyinfe/semi-icons';
 import { UserContext } from '../../context/User/index.js';
 import { AlertCircle } from 'lucide-react';
@@ -489,6 +494,14 @@ const ModelPricing = () => {
        loading={loading}
        rowSelection={rowSelection}
        className="custom-table"
+        empty={
+          <Empty
+            image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+            darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
+            description={t('搜索无结果')}
+            style={{ padding: 30 }}
+          />
+        }
        pagination={{
          defaultPageSize: 10,
          pageSize: pageSize,
--- a/web/src/components/table/RedemptionsTable.js
+++ b/web/src/components/table/RedemptionsTable.js
@@ -22,6 +22,7 @@ import {
  Card,
  Divider,
  Dropdown,
+  Empty,
  Form,
  Modal,
  Popover,
@@ -30,6 +31,10 @@ import {
  Tag,
  Typography
 } from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark
+} from '@douyinfe/semi-illustrations';
 import {
  IconPlus,
  IconCopy,
@@ -592,6 +597,14 @@ const RedemptionsTable = () => {
          loading={loading}
          rowSelection={rowSelection}
          onRow={handleRow}
+          empty={
+            <Empty
+              image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+              darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
+              description={t('搜索无结果')}
+              style={{ padding: 30 }}
+            />
+          }
          className="rounded-xl overflow-hidden"
          size="middle"
        ></Table>
--- a/web/src/components/table/TaskLogsTable.js
+++ b/web/src/components/table/TaskLogsTable.js
@@ -27,6 +27,7 @@ import {
  Card,
  Checkbox,
  Divider,
+  Empty,
  Form,
  Layout,
  Modal,
@@ -36,6 +37,10 @@ import {
  Tag,
  Typography
 } from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark
+} from '@douyinfe/semi-illustrations';
 import { ITEMS_PER_PAGE } from '../../constants';
 import {
  IconEyeOpened,
@@ -764,6 +769,14 @@ const LogsTable = () => {
            scroll={{ x: 'max-content' }}
            className="rounded-xl overflow-hidden"
            size="middle"
+            empty={
+              <Empty
+                image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+                darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
+                description={t('搜索无结果')}
+                style={{ padding: 30 }}
+              />
+            }
            pagination={{
              formatPageText: (page) =>
                t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
--- a/web/src/components/table/TokensTable.js
+++ b/web/src/components/table/TokensTable.js
@@ -15,6 +15,7 @@ import {
  Button,
  Card,
  Dropdown,
+  Empty,
  Form,
  Modal,
  Space,
@@ -22,6 +23,10 @@ import {
  Table,
  Tag
 } from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark
+} from '@douyinfe/semi-illustrations';

 import {
  CheckCircle,
@@ -725,6 +730,14 @@ const TokensTable = () => {
          loading={loading}
          rowSelection={rowSelection}
          onRow={handleRow}
+          empty={
+            <Empty
+              image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+              darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
+              description={t('搜索无结果')}
+              style={{ padding: 30 }}
+            />
+          }
          className="rounded-xl overflow-hidden"
          size="middle"
        ></Table>
--- a/web/src/components/table/UsersTable.js
+++ b/web/src/components/table/UsersTable.js
@@ -20,6 +20,7 @@ import {
  Card,
  Divider,
  Dropdown,
+  Empty,
  Form,
  Modal,
  Space,
@@ -27,6 +28,10 @@ import {
  Tag,
  Typography
 } from '@douyinfe/semi-ui';
+import {
+  IllustrationNoResult,
+  IllustrationNoResultDark
+} from '@douyinfe/semi-illustrations';
 import {
  IconPlus,
  IconSearch,
@@ -640,6 +645,14 @@ const UsersTable = () => {
          }}
          loading={loading}
          onRow={handleRow}
+          empty={
+            <Empty
+              image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+              darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
+              description={t('搜索无结果')}
+              style={{ padding: 30 }}
+            />
+          }
          className="rounded-xl overflow-hidden"
          size="middle"
        />
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -1567,5 +1567,6 @@
  "使用统计": "Usage Statistics",
  "资源消耗": "Resource Consumption",
  "性能指标": "Performance Indicators",
-  "模型数据分析": "Model Data Analysis"
+  "模型数据分析": "Model Data Analysis",
+  "搜索无结果": "No results found"
 }