R29-1 R29-6: 重构海音达工作台壳层与高频页面

client/src/components/common/EmptyStateCard.tsx

@@ -4,14 +4,16 @@ type EmptyStateCardProps = {
   title: string;
   description: string;
   footer?: ReactNode;
+  icon?: ReactNode;
 };
 
-export function EmptyStateCard({ title, description, footer }: EmptyStateCardProps) {
+export function EmptyStateCard({ title, description, footer, icon }: EmptyStateCardProps) {
   return (
-    <section className="card-std p-8">
-      <h3 className="card-title">{title}</h3>
-      <p className="card-desc">{description}</p>
-      {footer ? <div className="mt-4">{footer}</div> : null}
+    <section className="card-std p-8 text-center">
+      {icon ? <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-2xl bg-zinc-100 text-zinc-500">{icon}</div> : null}
+      <h3 className="text-base font-semibold text-zinc-900">{title}</h3>
+      <p className="card-desc mx-auto max-w-xl">{description}</p>
+      {footer ? <div className="mt-5 flex justify-center">{footer}</div> : null}
     </section>
   );
 }

client/src/components/common/PageHeader.tsx

@@ -1,20 +1,26 @@
 import type { ReactNode } from "react";
 
+import { cn } from "../../lib/utils";
+
 type PageHeaderProps = {
   title: string;
   subtitle?: string;
   actions?: ReactNode;
+  eyebrow?: string;
+  meta?: ReactNode;
+  className?: string;
 };
 
-export function PageHeader({ title, subtitle, actions }: PageHeaderProps) {
+export function PageHeader({ title, subtitle, actions, eyebrow, meta, className }: PageHeaderProps) {
   return (
-    <div className="mb-6 flex flex-wrap items-start justify-between gap-4">
-      <div>
-        <h2 className="text-2xl font-bold tracking-tight text-zinc-900">{title}</h2>
-        {subtitle ? <p className="mt-1 text-sm font-medium text-zinc-500">{subtitle}</p> : null}
+    <header className={cn("flex flex-wrap items-start justify-between gap-4", className)}>
+      <div className="min-w-0 max-w-3xl">
+        {eyebrow ? <div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">{eyebrow}</div> : null}
+        <h2 className="mt-1 text-[2rem] font-semibold tracking-tight text-zinc-900">{title}</h2>
+        {subtitle ? <p className="mt-2 text-sm leading-6 text-zinc-600">{subtitle}</p> : null}
+        {meta ? <div className="mt-3 flex flex-wrap gap-2">{meta}</div> : null}
       </div>
-
-      {actions ? <div className="shrink-0">{actions}</div> : null}
-    </div>
+      {actions ? <div className="flex shrink-0 flex-wrap gap-2">{actions}</div> : null}
+    </header>
   );
 }