70 lines
2.4 KiB
React
70 lines
2.4 KiB
React
|
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
|