فهرست منبع

💄 style(CardPro): Enhance CardPro layout handling

• 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.
t0ng7u 11 ماه پیش
والد
کامیت
a1018c5823
1فایلهای تغییر یافته به همراه21 افزوده شده و 4 حذف شده
  1. 21 4
      web/src/components/common/ui/CardPro.js

+ 21 - 4
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,