فهرست منبع

💄 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 7 ماه پیش
والد
کامیت
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,