💄 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.
This commit is contained in:
@@ -127,11 +127,25 @@ const CardPro = ({
|
|||||||
>
|
>
|
||||||
{/* 操作按钮区域 - 用于type1和type3 */}
|
{/* 操作按钮区域 - 用于type1和type3 */}
|
||||||
{(type === 'type1' || type === 'type3') && actionsArea && (
|
{(type === 'type1' || type === 'type3') && actionsArea && (
|
||||||
<div className="w-full">
|
Array.isArray(actionsArea) ? (
|
||||||
{actionsArea}
|
actionsArea.map((area, idx) => (
|
||||||
</div>
|
<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 && (
|
{searchArea && (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
@@ -171,7 +185,10 @@ CardPro.propTypes = {
|
|||||||
statsArea: PropTypes.node,
|
statsArea: PropTypes.node,
|
||||||
descriptionArea: PropTypes.node,
|
descriptionArea: PropTypes.node,
|
||||||
tabsArea: PropTypes.node,
|
tabsArea: PropTypes.node,
|
||||||
actionsArea: PropTypes.node,
|
actionsArea: PropTypes.oneOfType([
|
||||||
|
PropTypes.node,
|
||||||
|
PropTypes.arrayOf(PropTypes.node),
|
||||||
|
]),
|
||||||
searchArea: PropTypes.node,
|
searchArea: PropTypes.node,
|
||||||
// 表格内容
|
// 表格内容
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
|
|||||||
Reference in New Issue
Block a user