70 lines
2.4 KiB
JavaScript
70 lines
2.4 KiB
JavaScript
import './SplitLayout.css'
|
||
|
||
/**
|
||
* 主内容区布局组件
|
||
* @param {Object} props
|
||
* @param {string} props.direction - 布局方向：'horizontal'（左右）| 'vertical'（上下）
|
||
* @param {ReactNode} props.mainContent - 主内容区
|
||
* @param {ReactNode} props.extendContent - 扩展内容区
|
||
* @param {number} props.extendSize - 扩展区尺寸（horizontal 模式下为宽度，px）
|
||
* @param {number} props.gap - 主内容与扩展区间距（px）
|
||
* @param {boolean} props.showExtend - 是否显示扩展区
|
||
* @param {string} props.extendPosition - 扩展区位置（horizontal: 'right', vertical: 'top'）
|
||
* @param {string} props.className - 自定义类名
|
||
*
|
||
* @deprecated 旧参数（向后兼容）：leftContent, rightContent, rightWidth, showRight
|
||
*/
|
||
function SplitLayout({
|
||
// 新 API
|
||
direction = 'horizontal',
|
||
mainContent,
|
||
extendContent,
|
||
extendSize = 360,
|
||
gap = 16,
|
||
showExtend = true,
|
||
extendPosition,
|
||
className = '',
|
||
// 旧 API（向后兼容）
|
||
leftContent,
|
||
rightContent,
|
||
rightWidth,
|
||
showRight,
|
||
}) {
|
||
// 向后兼容：如果使用旧 API，转换为新 API
|
||
const actualMainContent = mainContent || leftContent
|
||
const actualExtendContent = extendContent || rightContent
|
||
const actualExtendSize = extendSize !== 360 ? extendSize : (rightWidth || 360)
|
||
const actualShowExtend = showExtend !== undefined ? showExtend : (showRight !== undefined ? showRight : true)
|
||
const actualDirection = direction
|
||
const actualExtendPosition = extendPosition || (actualDirection === 'horizontal' ? 'right' : 'top')
|
||
|
||
return (
|
||
<div
|
||
className={`split-layout split-layout-${actualDirection} ${className}`}
|
||
style={{ gap: `${gap}px` }}
|
||
>
|
||
{/* 纵向布局且扩展区在顶部时，先渲染扩展区 */}
|
||
{actualDirection === 'vertical' && actualExtendPosition === 'top' && actualShowExtend && actualExtendContent && (
|
||
<div className="split-layout-extend split-layout-extend-top">
|
||
{actualExtendContent}
|
||
</div>
|
||
)}
|
||
|
||
{/* 主内容区 */}
|
||
<div className="split-layout-main">{actualMainContent}</div>
|
||
|
||
{/* 横向布局时，扩展区在右侧 */}
|
||
{actualDirection === 'horizontal' && actualShowExtend && actualExtendContent && (
|
||
<div
|
||
className="split-layout-extend split-layout-extend-right"
|
||
style={{ width: `${actualExtendSize}px` }}
|
||
>
|
||
{actualExtendContent}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default SplitLayout
|