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>
   );
 }