From a1018c58237d62c9574e5a1118910ce9d4286ec7 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sat, 19 Jul 2025 12:14:08 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style(CardPro):=20Enhance=20Card?=
 =?UTF-8?q?Pro=20layout=20handling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Accept an array for `actionsArea`, enabling multiple action blocks in one card
• Automatically insert a `Divider` between consecutive action blocks
• Add a `Divider` between `actionsArea` and `searchArea` when both exist
• Standardize `Divider` spacing by removing custom `margin` props
• Update `PropTypes`: `actionsArea` now supports `arrayOf(node)`

These changes improve visual separation and usability for complex table cards (e.g., Channels), making the UI cleaner and more consistent.
---
 web/src/components/common/ui/CardPro.js | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/src/components/common/ui/CardPro.js b/web/src/components/common/ui/CardPro.js
index fc57cd53..3325381c 100644
--- a/web/src/components/common/ui/CardPro.js
+++ b/web/src/components/common/ui/CardPro.js
@@ -127,11 +127,25 @@ const CardPro = ({
         >
           {/* 操作按钮区域 - 用于type1和type3 */}
           {(type === 'type1' || type === 'type3') && actionsArea && (
-            <div className="w-full">
-              {actionsArea}
-            </div>
+            Array.isArray(actionsArea) ? (
+              actionsArea.map((area, idx) => (
+                <React.Fragment key={idx}>
+                  {idx !== 0 && <Divider />}
+                  <div className="w-full">
+                    {area}
+                  </div>
+                </React.Fragment>
+              ))
+            ) : (
+              <div className="w-full">
+                {actionsArea}
+              </div>
+            )
           )}
 
+          {/* 当同时存在操作区和搜索区时，插入分隔线 */}
+          {(actionsArea && searchArea) && <Divider />}
+
           {/* 搜索表单区域 - 所有类型都可能有 */}
           {searchArea && (
             <div className="w-full">
@@ -171,7 +185,10 @@ CardPro.propTypes = {
   statsArea: PropTypes.node,
   descriptionArea: PropTypes.node,
   tabsArea: PropTypes.node,
-  actionsArea: PropTypes.node,
+  actionsArea: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]),
   searchArea: PropTypes.node,
   // 表格内容
   children: PropTypes.node,