Lemon-miaow
bd49313e7e
新增组件: - PageHeader: 统一页面头部（14 个页面） - StatCard: 统一数值统计卡片（6 个页面） - MessageLine: 统一错误/成功提示条（16 处） - ConfirmFooter: 统一 Dialog 底部按钮（8 个文件） - SearchInput: 统一搜索框（5 个页面） - SubmissionStatusBadge: 统一提交状态徽章 - RoleBadge / UserStatusBadge: 统一用户角色/状态徽章 - BackLink: 统一返回导航链接（5 个页面） - InlineConfirm: 统一二次确认交互（3 个 section） 修复: - Pagination 图标尺寸统一 h-4 w-4 - 右上角按钮统一 size=sm gap-1.5 - StatCard 默认值恢复 text-2xl（24px） States.tsx 新增 NotYours / NotRunning 通用状态组件 已有文件 -659 行，新组件 +353 行，净减 306 行
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import type { LucideIcon } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface PageHeaderProps {
|
|
icon?: LucideIcon | React.ReactNode;
|
|
title: React.ReactNode;
|
|
subtitle?: React.ReactNode;
|
|
actions?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function PageHeader({ icon: Icon, title, subtitle, actions, className }: PageHeaderProps) {
|
|
return (
|
|
<div className={cn("flex flex-wrap items-center justify-between gap-3", className)}>
|
|
<div className="flex items-center gap-3">
|
|
{Icon && (
|
|
<div className="shrink-0 text-primary">
|
|
{React.isValidElement(Icon)
|
|
? Icon
|
|
: React.createElement(Icon as React.ComponentType<{ className?: string }>, {
|
|
className: "h-6 w-6",
|
|
})}
|
|
</div>
|
|
)}
|
|
<div className="text-left">
|
|
<h1 className="text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
|
|
{subtitle && <div className="text-sm text-muted-foreground mt-0.5">{subtitle}</div>}
|
|
</div>
|
|
</div>
|
|
{actions && <div className="flex items-center gap-3 shrink-0">{actions}</div>}
|
|
</div>
|
|
);
|
|
}
|