From 3b3ae9c0dd5f433e7bb5a48c6dbabdf63e5e399e Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sat, 19 Jul 2025 02:35:01 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20refactor(CardTable):=20proper=20?=
 =?UTF-8?q?empty-state=20handling=20&=20pagination=20visibility=20on=20mob?=
 =?UTF-8?q?ile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• 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.
---
 web/src/components/common/ui/CardTable.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/web/src/components/common/ui/CardTable.js b/web/src/components/common/ui/CardTable.js
index 3418b51b..b90f38af 100644
--- a/web/src/components/common/ui/CardTable.js
+++ b/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>