LingandRX
c039475119
* docs: 添加组件文档注释和类型导入 refactor: 统一使用 SnackbarOptions 类型 style: 优化导入语句顺序和格式 * refactor: 简化假数据生成器中的faker导入和使用 Co-authored-by: Copilot <copilot@github.com> * feat(form-recognizer): 增强表单识别功能并优化UI交互 - 新增字段类型偏好设置功能，支持按域名保存字段类型 - 重构FieldList组件，改进字段选择和类型修改体验 - 添加字段定位闪烁功能，便于在页面上快速找到对应字段 - 优化表单填充逻辑，支持单个字段覆盖默认填充模式 - 移除独立的侧边栏页面，统一使用主页面组件 - 改进useStorageState钩子，增加加载状态管理和防抖处理 * refactor: 移除未使用的组件文件 * refactor(页面头部): 提取通用 PageHeader 组件并替换各页面头部实现 重构各页面头部为统一的 PageHeader 组件，提高代码复用性和维护性 * style(组件): 调整自动刷新开关和存储选项网格的样式 优化自动刷新开关的文本内边距，重构存储选项网格的布局结构，调整间距和边框样式 * style(ui): 调整时间戳页面和结果视图的样式 - 为时区选择器添加圆角 - 优化结果视图的布局和对齐方式 - 调整结果项的内边距和文本样式 * ci(workflow): 移除Firefox测试以简化CI流程 仅保留Chrome浏览器的构建步骤，减少CI运行时间和资源消耗
107 lines
2.5 KiB
TypeScript
107 lines
2.5 KiB
TypeScript
import { Stack, Typography, Box, alpha, SxProps, Theme } from '@mui/material';
|
|
import { ReactNode } from 'react';
|
|
|
|
/**
|
|
* PageHeader 组件属性接口
|
|
*/
|
|
export interface PageHeaderProps {
|
|
/** 要显示的图标组件 */
|
|
icon: ReactNode;
|
|
/** 图标的颜色，默认为 '#1976d2'（蓝色） */
|
|
iconColor?: string;
|
|
/** 主标题文本 */
|
|
title: string;
|
|
/** 副标题文本（可选） */
|
|
subtitle?: string;
|
|
/** 在标题右侧显示的徽章/标签组件（可选） */
|
|
badge?: ReactNode;
|
|
/** 图标容器的自定义样式 */
|
|
iconSx?: SxProps<Theme>;
|
|
/** 标题文本的自定义样式 */
|
|
titleSx?: SxProps<Theme>;
|
|
/** 副标题文本的自定义样式 */
|
|
subtitleSx?: SxProps<Theme>;
|
|
/** 整个组件的自定义样式 */
|
|
sx?: SxProps<Theme>;
|
|
}
|
|
|
|
/**
|
|
* 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 = '#1976d2',
|
|
title,
|
|
subtitle,
|
|
badge,
|
|
iconSx,
|
|
titleSx,
|
|
subtitleSx,
|
|
sx,
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<Stack direction="row" spacing={1.5} alignItems="center" sx={{ mb: 2.5, ...sx }}>
|
|
{/* 图标容器 */}
|
|
<Box
|
|
sx={{
|
|
p: 1,
|
|
borderRadius: 2.5,
|
|
bgcolor: alpha(iconColor, 0.1),
|
|
color: iconColor,
|
|
display: 'flex',
|
|
...iconSx,
|
|
}}
|
|
>
|
|
{icon}
|
|
</Box>
|
|
{/* 标题区域 */}
|
|
<Box sx={{ flex: 1 }}>
|
|
{/* 标题行（含徽章） */}
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
|
<Typography
|
|
variant="subtitle1"
|
|
fontWeight={900}
|
|
sx={{ letterSpacing: '-0.5px', lineHeight: 1.2, ...titleSx }}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
{badge}
|
|
</Stack>
|
|
{/* 副标题 */}
|
|
{subtitle && (
|
|
<Typography
|
|
variant="caption"
|
|
color="text.secondary"
|
|
sx={{ fontWeight: 600, ...subtitleSx }}
|
|
>
|
|
{subtitle}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|