✨ 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.
This commit is contained in:
@@ -30,6 +30,7 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
Divider,
|
Divider,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
|
Empty,
|
||||||
Input,
|
Input,
|
||||||
InputNumber,
|
InputNumber,
|
||||||
Modal,
|
Modal,
|
||||||
@@ -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 = () => {
|
|||||||
}
|
}
|
||||||
: 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}
|
||||||
|
|||||||
@@ -40,6 +40,7 @@ import {
|
|||||||
Avatar,
|
Avatar,
|
||||||
Button,
|
Button,
|
||||||
Descriptions,
|
Descriptions,
|
||||||
|
Empty,
|
||||||
Modal,
|
Modal,
|
||||||
Popover,
|
Popover,
|
||||||
Space,
|
Space,
|
||||||
@@ -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 = () => {
|
|||||||
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}} 条', {
|
||||||
|
|||||||
@@ -40,6 +40,7 @@ import {
|
|||||||
Card,
|
Card,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Divider,
|
Divider,
|
||||||
|
Empty,
|
||||||
Form,
|
Form,
|
||||||
ImagePreview,
|
ImagePreview,
|
||||||
Layout,
|
Layout,
|
||||||
@@ -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 = () => {
|
|||||||
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}} 条', {
|
||||||
|
|||||||
@@ -17,14 +17,19 @@ import {
|
|||||||
Tabs,
|
Tabs,
|
||||||
TabPane,
|
TabPane,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
|
Empty
|
||||||
} from '@douyinfe/semi-ui';
|
} from '@douyinfe/semi-ui';
|
||||||
|
import {
|
||||||
|
IllustrationNoResult,
|
||||||
|
IllustrationNoResultDark
|
||||||
|
} from '@douyinfe/semi-illustrations';
|
||||||
import {
|
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 = () => {
|
|||||||
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,
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ import {
|
|||||||
Card,
|
Card,
|
||||||
Divider,
|
Divider,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
|
Empty,
|
||||||
Form,
|
Form,
|
||||||
Modal,
|
Modal,
|
||||||
Popover,
|
Popover,
|
||||||
@@ -30,6 +31,10 @@ import {
|
|||||||
Tag,
|
Tag,
|
||||||
Typography
|
Typography
|
||||||
} from '@douyinfe/semi-ui';
|
} from '@douyinfe/semi-ui';
|
||||||
|
import {
|
||||||
|
IllustrationNoResult,
|
||||||
|
IllustrationNoResultDark
|
||||||
|
} from '@douyinfe/semi-illustrations';
|
||||||
import {
|
import {
|
||||||
IconPlus,
|
IconPlus,
|
||||||
IconCopy,
|
IconCopy,
|
||||||
@@ -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>
|
||||||
|
|||||||
@@ -27,6 +27,7 @@ import {
|
|||||||
Card,
|
Card,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Divider,
|
Divider,
|
||||||
|
Empty,
|
||||||
Form,
|
Form,
|
||||||
Layout,
|
Layout,
|
||||||
Modal,
|
Modal,
|
||||||
@@ -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 = () => {
|
|||||||
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}} 条', {
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
|
Empty,
|
||||||
Form,
|
Form,
|
||||||
Modal,
|
Modal,
|
||||||
Space,
|
Space,
|
||||||
@@ -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 = () => {
|
|||||||
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>
|
||||||
|
|||||||
@@ -20,6 +20,7 @@ import {
|
|||||||
Card,
|
Card,
|
||||||
Divider,
|
Divider,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
|
Empty,
|
||||||
Form,
|
Form,
|
||||||
Modal,
|
Modal,
|
||||||
Space,
|
Space,
|
||||||
@@ -27,6 +28,10 @@ import {
|
|||||||
Tag,
|
Tag,
|
||||||
Typography
|
Typography
|
||||||
} from '@douyinfe/semi-ui';
|
} from '@douyinfe/semi-ui';
|
||||||
|
import {
|
||||||
|
IllustrationNoResult,
|
||||||
|
IllustrationNoResultDark
|
||||||
|
} from '@douyinfe/semi-illustrations';
|
||||||
import {
|
import {
|
||||||
IconPlus,
|
IconPlus,
|
||||||
IconSearch,
|
IconSearch,
|
||||||
@@ -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"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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"
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user