雨霖铃
103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
import { ReactNode, useMemo } from 'react';
|
|
import { getEntryPointType } from '@/config/features';
|
|
|
|
/**
|
|
* PageHeader 组件属性接口
|
|
*/
|
|
export interface PageHeaderProps {
|
|
/** 要显示的图标组件 */
|
|
icon: ReactNode;
|
|
/** 图标的颜色，默认使用主题 primary.main 色 */
|
|
iconColor?: string;
|
|
/** 主标题文本 */
|
|
title: string;
|
|
/** 副标题文本（可选） */
|
|
subtitle?: string;
|
|
/** 在标题右侧显示的徽章/标签组件（可选） */
|
|
badge?: ReactNode;
|
|
/** 图标容器的自定义样式 */
|
|
iconSx?: React.CSSProperties;
|
|
/** 标题文本的自定义样式 */
|
|
titleSx?: React.CSSProperties;
|
|
/** 副标题文本的自定义样式 */
|
|
subtitleSx?: React.CSSProperties;
|
|
/** 整个组件的自定义样式 */
|
|
sx?: React.CSSProperties;
|
|
}
|
|
|
|
/**
|
|
* PageHeader - 通用页面标题栏组件
|
|
*
|
|
* 用于显示带图标的页面标题，支持自定义颜色、副标题、徽章等功能
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <PageHeader
|
|
* icon={<AccessTimeIcon />}
|
|
* iconColor="#1976d2"
|
|
* title="时间戳转换"
|
|
* subtitle="Unix 毫秒数转换与格式化"
|
|
* />
|
|
* ```
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <PageHeader
|
|
* icon={<StorageIcon />}
|
|
* iconColor={storageCleanerPageStyles.warningColor}
|
|
* title="存储清理"
|
|
* subtitle={domain}
|
|
* badge={<Badge>已占用 {size}</Badge>}
|
|
* />
|
|
* ```
|
|
*/
|
|
export default function PageHeader({
|
|
icon,
|
|
iconColor = '#3b82f6',
|
|
title,
|
|
subtitle,
|
|
badge,
|
|
iconSx,
|
|
titleSx,
|
|
subtitleSx,
|
|
sx,
|
|
}: PageHeaderProps) {
|
|
const entryPointType = useMemo(() => getEntryPointType(), []);
|
|
|
|
if (entryPointType === 'popup') {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-3 mb-6" style={sx}>
|
|
{/* 图标容器 */}
|
|
<div
|
|
className="p-2 rounded-lg flex items-center"
|
|
style={{
|
|
backgroundColor: `${iconColor}15`,
|
|
color: iconColor,
|
|
...iconSx,
|
|
}}
|
|
>
|
|
{icon}
|
|
</div>
|
|
{/* 标题区域 */}
|
|
<div className="flex-1">
|
|
{/* 标题行（含徽章） */}
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-base font-extrabold tracking-tight leading-tight" style={titleSx}>
|
|
{title}
|
|
</span>
|
|
{badge}
|
|
</div>
|
|
{/* 副标题 */}
|
|
{subtitle && (
|
|
<span className="text-xs font-semibold text-gray-500" style={subtitleSx}>
|
|
{subtitle}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|