oa-frontend-pretrial-cleanup 收敛PC试运行前页面风格

client/src/components/common/PageHeader.tsx

@@ -13,16 +13,16 @@ type PageHeaderProps = {
 
 export function PageHeader({ title, subtitle, actions, eyebrow, meta, className }: PageHeaderProps) {
   return (
-    <header className={cn("flex flex-wrap items-start justify-between gap-4", className)}>
+    <header className={cn("flex flex-col gap-4 md:flex-row md:items-end md:justify-between", className)}>
       <div className="min-w-0 max-w-3xl">
         {eyebrow ? (
-          <div className="text-xs font-bold uppercase tracking-[0.2em] text-primary">{eyebrow}</div>
+          <div className="text-xs font-bold uppercase text-primary">{eyebrow}</div>
         ) : null}
-        <h2 className="mt-1 text-2xl font-semibold text-[var(--color-text-primary)]">{title}</h2>
-        {subtitle ? <p className="mt-1.5 text-sm text-[var(--color-text-secondary)]">{subtitle}</p> : null}
+        <h1 className="mt-1 text-2xl font-semibold text-[var(--color-text-primary)] md:text-3xl">{title}</h1>
+        {subtitle ? <p className="mt-2 text-sm leading-6 text-[var(--color-text-secondary)]">{subtitle}</p> : null}
         {meta ? <div className="mt-3 flex flex-wrap gap-2">{meta}</div> : null}
       </div>
-      {actions ? <div className="flex shrink-0 flex-wrap gap-2">{actions}</div> : null}
+      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
     </header>
   );
 }

client/src/components/patterns/ListWorkspace.tsx

@@ -102,3 +102,35 @@ export function WorkspaceEmptyState({
     </div>
   );
 }
+
+export function WorkspaceNotice({
+  title,
+  children,
+  tone = "info",
+  actions,
+  className,
+}: {
+  title: string;
+  children?: ReactNode;
+  tone?: "info" | "warning" | "neutral";
+  actions?: ReactNode;
+  className?: string;
+}) {
+  const toneClass = {
+    info: "border-primary/20 bg-primary/5 text-primary",
+    warning: "border-amber-200 bg-amber-50 text-amber-800",
+    neutral: "border-slate-200 bg-slate-50 text-slate-700",
+  }[tone];
+
+  return (
+    <section className={cn("rounded-xl border px-4 py-3 text-sm", toneClass, className)}>
+      <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+        <div className="min-w-0">
+          <div className="font-semibold">{title}</div>
+          {children ? <div className="mt-1 leading-6 text-slate-600">{children}</div> : null}
+        </div>
+        {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
+      </div>
+    </section>
+  );
+}