💄 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 */}
|
||||
{(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,
|
||||
|
||||
Reference in New Issue
Block a user