86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import BackButton from './BackButton';
|
|
import { useSimpleBack } from '@/hooks/useBackNavigation';
|
|
|
|
interface PageHeaderProps {
|
|
/** 页面标题 */
|
|
title: string;
|
|
/** 返回按钮文本 */
|
|
backText?: string;
|
|
/** 自定义返回逻辑 */
|
|
onBack?: () => void;
|
|
/** 默认返回路径 */
|
|
defaultBackPath?: string;
|
|
/** 是否显示返回按钮 */
|
|
showBack?: boolean;
|
|
/** 右侧扩展内容 */
|
|
rightContent?: React.ReactNode;
|
|
/** 自定义CSS类名 */
|
|
className?: string;
|
|
/** 标题样式类名 */
|
|
titleClassName?: string;
|
|
/** 返回按钮样式变体 */
|
|
backButtonVariant?: 'icon' | 'button' | 'text';
|
|
/** 返回按钮自定义样式类名 */
|
|
backButtonClassName?: string;
|
|
/** 是否固定在顶部 */
|
|
fixed?: boolean;
|
|
/** 是否显示底部边框 */
|
|
showBorder?: boolean;
|
|
}
|
|
|
|
/**
|
|
* 通用页面Header组件
|
|
* 支持返回按钮、标题和右侧扩展插槽
|
|
*/
|
|
export const PageHeader: React.FC<PageHeaderProps> = ({
|
|
title,
|
|
backText = '返回',
|
|
onBack,
|
|
defaultBackPath = '/',
|
|
showBack = true,
|
|
rightContent,
|
|
className = '',
|
|
titleClassName = '',
|
|
backButtonVariant = 'icon',
|
|
backButtonClassName = '',
|
|
fixed = true,
|
|
showBorder = true
|
|
}) => {
|
|
const { goBack } = useSimpleBack(defaultBackPath);
|
|
|
|
const handleBack = onBack || goBack;
|
|
|
|
const baseClasses = `bg-white ${showBorder ? 'border-b border-gray-200' : ''} ${fixed ? 'fixed top-0 left-0 right-0 z-20' : ''}`;
|
|
const headerClasses = `${baseClasses} ${className}`;
|
|
// 默认小号按钮样式
|
|
const defaultBackBtnClass = 'text-sm px-2 py-1 h-8 min-h-0';
|
|
|
|
return (
|
|
<header className={headerClasses}>
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<div className="flex items-center ">
|
|
{showBack && (
|
|
<BackButton
|
|
variant={backButtonVariant}
|
|
text={backText}
|
|
onBack={handleBack}
|
|
className={`${defaultBackBtnClass} ${backButtonClassName}`.trim()}
|
|
/>
|
|
)}
|
|
<h1 className={`text-lg font-semibold ${titleClassName}`}>
|
|
{title}
|
|
</h1>
|
|
</div>
|
|
|
|
{rightContent && (
|
|
<div className="flex items-center gap-2">
|
|
{rightContent}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default PageHeader;
|