Skip to content

phsl / new-api

Go to a project
Commit 4c4d3331 by Apple\Apple
Options

✨ 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.
parent 2fc3b392
Showing with 108 additions and 2 deletions
web/src/components/table/ChannelsTable.js
...@@ -30,6 +30,7 @@ import { ...@@ -30,6 +30,7 @@ import {
Button, Button,
Divider, Divider,
Dropdown, Dropdown,
Empty,
Input, Input,
InputNumber, InputNumber,
Modal, Modal,
...@@ -43,6 +44,10 @@ import { ...@@ -43,6 +44,10 @@ import {
Card, Card,
Form Form
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import {
IllustrationNoResult,
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import EditChannel from '../../pages/Channel/EditChannel.js'; import EditChannel from '../../pages/Channel/EditChannel.js';
import { import {
IconTreeTriangleDown, IconTreeTriangleDown,
...@@ -1526,6 +1531,14 @@ const ChannelsTable = () => { ...@@ -1526,6 +1531,14 @@ const ChannelsTable = () => {
} }
: null : 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" className="rounded-xl overflow-hidden"
size="middle" size="middle"
loading={loading} loading={loading}
......
web/src/components/table/LogsTable.js
...@@ -40,6 +40,7 @@ import { ...@@ -40,6 +40,7 @@ import {
Avatar, Avatar,
Button, Button,
Descriptions, Descriptions,
Empty,
Modal, Modal,
Popover, Popover,
Space, Space,
...@@ -53,6 +54,10 @@ import { ...@@ -53,6 +54,10 @@ import {
Divider, Divider,
Form Form
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import {
IllustrationNoResult,
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import { ITEMS_PER_PAGE } from '../../constants'; import { ITEMS_PER_PAGE } from '../../constants';
import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph'; import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
import { IconSetting, IconSearch, IconForward } from '@douyinfe/semi-icons'; import { IconSetting, IconSearch, IconForward } from '@douyinfe/semi-icons';
...@@ -1367,6 +1372,14 @@ const LogsTable = () => { ...@@ -1367,6 +1372,14 @@ const LogsTable = () => {
scroll={{ x: 'max-content' }} scroll={{ x: 'max-content' }}
className='rounded-xl overflow-hidden' className='rounded-xl overflow-hidden'
size='middle' size='middle'
empty={
<Empty
image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
description={t('搜索无结果')}
style={{ padding: 30 }}
/>
}
pagination={{ pagination={{
formatPageText: (page) => formatPageText: (page) =>
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
......
web/src/components/table/MjLogsTable.js
...@@ -40,6 +40,7 @@ import { ...@@ -40,6 +40,7 @@ import {
Card, Card,
Checkbox, Checkbox,
Divider, Divider,
Empty,
Form, Form,
ImagePreview, ImagePreview,
Layout, Layout,
...@@ -50,6 +51,10 @@ import { ...@@ -50,6 +51,10 @@ import {
Tag, Tag,
Typography Typography
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import {
IllustrationNoResult,
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import { ITEMS_PER_PAGE } from '../../constants'; import { ITEMS_PER_PAGE } from '../../constants';
import { import {
IconEyeOpened, IconEyeOpened,
...@@ -937,6 +942,14 @@ const LogsTable = () => { ...@@ -937,6 +942,14 @@ const LogsTable = () => {
scroll={{ x: 'max-content' }} scroll={{ x: 'max-content' }}
className="rounded-xl overflow-hidden" className="rounded-xl overflow-hidden"
size="middle" size="middle"
empty={
<Empty
image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
description={t('搜索无结果')}
style={{ padding: 30 }}
/>
}
pagination={{ pagination={{
formatPageText: (page) => formatPageText: (page) =>
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
......
web/src/components/table/ModelPricing.js
...@@ -17,14 +17,19 @@ import { ...@@ -17,14 +17,19 @@ import {
Tabs, Tabs,
TabPane, TabPane,
Dropdown, Dropdown,
Empty
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import { import {
IllustrationNoResult,
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import {
IconVerify, IconVerify,
IconHelpCircle, IconHelpCircle,
IconSearch, IconSearch,
IconCopy, IconCopy,
IconInfoCircle, IconInfoCircle,
IconLayers, IconLayers
} from '@douyinfe/semi-icons'; } from '@douyinfe/semi-icons';
import { UserContext } from '../../context/User/index.js'; import { UserContext } from '../../context/User/index.js';
import { AlertCircle } from 'lucide-react'; import { AlertCircle } from 'lucide-react';
...@@ -489,6 +494,14 @@ const ModelPricing = () => { ...@@ -489,6 +494,14 @@ const ModelPricing = () => {
loading={loading} loading={loading}
rowSelection={rowSelection} rowSelection={rowSelection}
className="custom-table" 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={{ pagination={{
defaultPageSize: 10, defaultPageSize: 10,
pageSize: pageSize, pageSize: pageSize,
......
web/src/components/table/RedemptionsTable.js
...@@ -22,6 +22,7 @@ import { ...@@ -22,6 +22,7 @@ import {
Card, Card,
Divider, Divider,
Dropdown, Dropdown,
Empty,
Form, Form,
Modal, Modal,
Popover, Popover,
...@@ -31,6 +32,10 @@ import { ...@@ -31,6 +32,10 @@ import {
Typography Typography
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import { import {
IllustrationNoResult,
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import {
IconPlus, IconPlus,
IconCopy, IconCopy,
IconSearch, IconSearch,
...@@ -592,6 +597,14 @@ const RedemptionsTable = () => { ...@@ -592,6 +597,14 @@ const RedemptionsTable = () => {
loading={loading} loading={loading}
rowSelection={rowSelection} rowSelection={rowSelection}
onRow={handleRow} 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" className="rounded-xl overflow-hidden"
size="middle" size="middle"
></Table> ></Table>
......
web/src/components/table/TaskLogsTable.js
...@@ -27,6 +27,7 @@ import { ...@@ -27,6 +27,7 @@ import {
Card, Card,
Checkbox, Checkbox,
Divider, Divider,
Empty,
Form, Form,
Layout, Layout,
Modal, Modal,
...@@ -36,6 +37,10 @@ import { ...@@ -36,6 +37,10 @@ import {
Tag, Tag,
Typography Typography
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import {
IllustrationNoResult,
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import { ITEMS_PER_PAGE } from '../../constants'; import { ITEMS_PER_PAGE } from '../../constants';
import { import {
IconEyeOpened, IconEyeOpened,
...@@ -764,6 +769,14 @@ const LogsTable = () => { ...@@ -764,6 +769,14 @@ const LogsTable = () => {
scroll={{ x: 'max-content' }} scroll={{ x: 'max-content' }}
className="rounded-xl overflow-hidden" className="rounded-xl overflow-hidden"
size="middle" size="middle"
empty={
<Empty
image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
description={t('搜索无结果')}
style={{ padding: 30 }}
/>
}
pagination={{ pagination={{
formatPageText: (page) => formatPageText: (page) =>
t('第 {{start}} - {{end}} 条，共 {{total}} 条', { t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
......
web/src/components/table/TokensTable.js
...@@ -15,6 +15,7 @@ import { ...@@ -15,6 +15,7 @@ import {
Button, Button,
Card, Card,
Dropdown, Dropdown,
Empty,
Form, Form,
Modal, Modal,
Space, Space,
...@@ -22,6 +23,10 @@ import { ...@@ -22,6 +23,10 @@ import {
Table, Table,
Tag Tag
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import {
IllustrationNoResult,
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import { import {
CheckCircle, CheckCircle,
...@@ -725,6 +730,14 @@ const TokensTable = () => { ...@@ -725,6 +730,14 @@ const TokensTable = () => {
loading={loading} loading={loading}
rowSelection={rowSelection} rowSelection={rowSelection}
onRow={handleRow} 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" className="rounded-xl overflow-hidden"
size="middle" size="middle"
></Table> ></Table>
......
web/src/components/table/UsersTable.js
...@@ -20,6 +20,7 @@ import { ...@@ -20,6 +20,7 @@ import {
Card, Card,
Divider, Divider,
Dropdown, Dropdown,
Empty,
Form, Form,
Modal, Modal,
Space, Space,
...@@ -28,6 +29,10 @@ import { ...@@ -28,6 +29,10 @@ import {
Typography Typography
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import { import {
IllustrationNoResult,
IllustrationNoResultDark
} from '@douyinfe/semi-illustrations';
import {
IconPlus, IconPlus,
IconSearch, IconSearch,
IconEdit, IconEdit,
...@@ -640,6 +645,14 @@ const UsersTable = () => { ...@@ -640,6 +645,14 @@ const UsersTable = () => {
}} }}
loading={loading} loading={loading}
onRow={handleRow} 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" className="rounded-xl overflow-hidden"
size="middle" size="middle"
/> />
......
web/src/i18n/locales/en.json
...@@ -1567,5 +1567,6 @@ ...@@ -1567,5 +1567,6 @@
"使用统计": "Usage Statistics", "使用统计": "Usage Statistics",
"资源消耗": "Resource Consumption", "资源消耗": "Resource Consumption",
"性能指标": "Performance Indicators", "性能指标": "Performance Indicators",
"模型数据分析": "Model Data Analysis" "模型数据分析": "Model Data Analysis",
"搜索无结果": "No results found"
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment