Browse Source

💄 refactor(CardTable): proper empty-state handling & pagination visibility on mobile

• Imported Semi-UI `Empty` component.
• Detect when `dataSource` is empty on mobile card view:
  – Renders supplied `empty` placeholder (`tableProps.empty`) or a default `<Empty description="No Data" />`.
  – Suppresses the mobile `Pagination` component to avoid blank pages.
• Pagination now renders only when `dataSource.length > 0`, preserving UX parity with desktop tables.
t0ng7u 5 months ago
parent
commit
3b3ae9c0dd
1 changed files with 14 additions and 2 deletions
  1. 14 2
      web/src/components/common/ui/CardTable.js

+ 14 - 2
web/src/components/common/ui/CardTable.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Table, Card, Skeleton, Pagination } from '@douyinfe/semi-ui';
+import { Table, Card, Skeleton, Pagination, Empty } from '@douyinfe/semi-ui';
 import PropTypes from 'prop-types';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 
@@ -97,6 +97,18 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
   }
 
   // 渲染移动端卡片
+  const isEmpty = !showSkeleton && (!dataSource || dataSource.length === 0);
+
+  if (isEmpty) {
+    // 若传入 empty 属性则使用之,否则使用默认 Empty
+    if (tableProps.empty) return tableProps.empty;
+    return (
+      <div className="flex justify-center p-4">
+        <Empty description="No Data" />
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col gap-2">
       {dataSource.map((record, index) => {
@@ -145,7 +157,7 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
         );
       })}
       {/* 分页组件 */}
-      {tableProps.pagination && (
+      {tableProps.pagination && dataSource.length > 0 && (
         <div className="mt-2 flex justify-center">
           <Pagination {...tableProps.pagination} />
         </div>