feat(ui): 共享组件补齐——Card 面色分层 + Button link/lg + 4 原子件

- Card 新增 tone(panel/card/soft)/flat/interactive；cardClass 兼容旧字符串签名
- Button 新增 link(coral 文字链) 变体与 lg 尺寸
- 新增原子件 Eyebrow(统一眉题) / StatusDot(状态点·读屏可见) /
  Skeleton(motion-safe 占位) / Meter(进度条·progressbar)
- PageHeader/SectionHeader 用 display/title 字阶 + Eyebrow 眉题

apps/web/lib/ui/variants.test.ts

@@ -50,6 +50,33 @@ describe("ui variants", () => {
     expect(inputClass()).toContain(transitionUi);
   });
 
+  it("builds a coral inline link button variant", () => {
+    const klass = buttonClass({ variant: "link" });
+
+    expect(klass).toContain("text-cinnabar");
+    expect(klass).toContain("underline-offset-4");
+    expect(klass).toContain("hover:underline");
+  });
+
+  it("supports a large button size for prominent CTAs", () => {
+    expect(buttonClass({ size: "lg" })).toContain("px-5");
+  });
+
+  it("layers card surface tones and can drop the shadow", () => {
+    expect(cardClass({ tone: "card" })).toContain("bg-surface-card");
+    expect(cardClass({ tone: "soft" })).toContain("bg-surface-soft");
+    expect(cardClass()).toContain("bg-panel");
+    expect(cardClass({ flat: true })).not.toContain("shadow-paper");
+    expect(cardClass({ interactive: true })).toContain("hover:border-cinnabar/40");
+  });
+
+  it("keeps the legacy string cardClass signature working", () => {
+    const klass = cardClass("mt-4");
+    expect(klass).toContain("mt-4");
+    expect(klass).toContain("bg-panel");
+    expect(klass).toContain("rounded-lg");
+  });
+
   it("keeps warning badges readable on the paper background", () => {
     const klass = badgeClass({ variant: "warning" });
 

apps/web/lib/ui/variants.ts

@@ -3,9 +3,12 @@ export type ButtonVariant =
   | "secondary"
   | "outline"
   | "ghost"
-  | "danger";
+  | "danger"
+  | "link";
 
-export type ButtonSize = "sm" | "md" | "icon";
+export type ButtonSize = "sm" | "md" | "lg" | "icon";
+
+export type CardTone = "panel" | "card" | "soft";
 
 export type BadgeVariant =
   | "neutral"
@@ -48,11 +51,13 @@ const buttonVariants: Record<ButtonVariant, string> = {
   outline: `border-cinnabar bg-transparent text-cinnabar hover:bg-[var(--color-cinnabar-wash)] active:bg-[var(--color-cinnabar-wash)] ${disabledFade}`,
   ghost: `border-transparent bg-transparent text-ink-soft hover:bg-[var(--color-cinnabar-wash)] hover:text-cinnabar ${disabledFade}`,
   danger: `border-conflict bg-transparent text-conflict hover:bg-conflict/10 ${disabledFade}`,
+  link: `border-transparent bg-transparent text-cinnabar underline-offset-4 hover:text-cinnabar-active hover:underline ${disabledFade}`,
 };
 
 const buttonSizes: Record<ButtonSize, string> = {
   sm: "px-3 py-1.5 text-xs",
   md: "px-4 py-2",
+  lg: "px-5 py-2.5 text-base",
   icon: "h-9 w-9 p-0",
 };
 
@@ -91,8 +96,30 @@ export function badgeClass({
   return cn(badgeBase, badgeVariants[variant], className);
 }
 
-export function cardClass(className?: string): string {
-  return cn("rounded-lg border border-line bg-panel shadow-paper", className);
+const cardTones: Record<CardTone, string> = {
+  panel: "bg-panel",
+  card: "bg-surface-card",
+  soft: "bg-surface-soft",
+};
+
+interface CardClassOptions {
+  tone?: CardTone;
+  flat?: boolean;
+  interactive?: boolean;
+  className?: string;
+}
+
+// 兼容旧签名 cardClass("extra")，同时支持面色分层/去阴影/可交互卡片。
+export function cardClass(opts?: string | CardClassOptions): string {
+  const o: CardClassOptions = typeof opts === "string" ? { className: opts } : opts ?? {};
+  const tone = o.tone ?? "panel";
+  return cn(
+    "rounded-lg border border-line",
+    cardTones[tone],
+    o.flat ? null : "shadow-paper",
+    o.interactive ? `${transitionUi} hover:border-cinnabar/40 hover:shadow-paper` : null,
+    o.className,
+  );
 }
 
 const fieldTextBase = "block text-sm font-medium text-ink";