From 83ba47ab8f09c4f96a23c151bf784b4b7bdd2561 Mon Sep 17 00:00:00 2001
From: Yaojia Wang <yaojia.wang@billo.life>
Date: Sat, 11 Jul 2026 07:24:08 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E5=85=B1=E4=BA=AB=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=A1=A5=E9=BD=90=E2=80=94=E2=80=94Card=20=E9=9D=A2?=
 =?UTF-8?q?=E8=89=B2=E5=88=86=E5=B1=82=20+=20Button=20link/lg=20+=204=20?=
 =?UTF-8?q?=E5=8E=9F=E5=AD=90=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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/components/ui/Card.tsx          | 13 +++++--
 apps/web/components/ui/Eyebrow.tsx       | 23 ++++++++++++
 apps/web/components/ui/Meter.tsx         | 45 ++++++++++++++++++++++++
 apps/web/components/ui/PageHeader.tsx    | 10 +++---
 apps/web/components/ui/SectionHeader.tsx |  7 +++-
 apps/web/components/ui/Skeleton.tsx      | 18 ++++++++++
 apps/web/components/ui/StatusDot.tsx     | 41 +++++++++++++++++++++
 apps/web/lib/ui/variants.test.ts         | 27 ++++++++++++++
 apps/web/lib/ui/variants.ts              | 35 +++++++++++++++---
 9 files changed, 206 insertions(+), 13 deletions(-)
 create mode 100644 apps/web/components/ui/Eyebrow.tsx
 create mode 100644 apps/web/components/ui/Meter.tsx
 create mode 100644 apps/web/components/ui/Skeleton.tsx
 create mode 100644 apps/web/components/ui/StatusDot.tsx

diff --git a/apps/web/components/ui/Card.tsx b/apps/web/components/ui/Card.tsx
index fac42b5..8a42324 100644
--- a/apps/web/components/ui/Card.tsx
+++ b/apps/web/components/ui/Card.tsx
@@ -1,20 +1,29 @@
 import type { HTMLAttributes, ReactNode } from "react";
 
-import { cardClass } from "@/lib/ui/variants";
+import { cardClass, type CardTone } from "@/lib/ui/variants";
 
 interface CardProps extends HTMLAttributes<HTMLElement> {
   children: ReactNode;
   as?: "article" | "div" | "section";
+  tone?: CardTone;
+  flat?: boolean;
+  interactive?: boolean;
 }
 
 export function Card({
   as: Component = "div",
   children,
   className,
+  tone,
+  flat,
+  interactive,
   ...props
 }: CardProps) {
   return (
-    <Component className={cardClass(className)} {...props}>
+    <Component
+      className={cardClass({ tone, flat, interactive, className })}
+      {...props}
+    >
       {children}
     </Component>
   );
diff --git a/apps/web/components/ui/Eyebrow.tsx b/apps/web/components/ui/Eyebrow.tsx
new file mode 100644
index 0000000..d61935b
--- /dev/null
+++ b/apps/web/components/ui/Eyebrow.tsx
@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/ui/variants";
+
+interface EyebrowProps {
+  children: ReactNode;
+  className?: string;
+}
+
+// 眉题/小标签：无衬线、eyebrow 字号（含正字距 0.08em）、说明色、大写。
+// 统一各页此前 mono/uppercase 互不一致的小标签写法。
+export function Eyebrow({ children, className }: EyebrowProps) {
+  return (
+    <p
+      className={cn(
+        "font-sans text-eyebrow uppercase text-muted-soft",
+        className,
+      )}
+    >
+      {children}
+    </p>
+  );
+}
diff --git a/apps/web/components/ui/Meter.tsx b/apps/web/components/ui/Meter.tsx
new file mode 100644
index 0000000..af09301
--- /dev/null
+++ b/apps/web/components/ui/Meter.tsx
@@ -0,0 +1,45 @@
+import { cn } from "@/lib/ui/variants";
+
+export type MeterTone = "accent" | "success" | "warning" | "danger" | "info";
+
+const meterTones: Record<MeterTone, string> = {
+  accent: "bg-cinnabar",
+  success: "bg-pass",
+  warning: "bg-overdue",
+  danger: "bg-conflict",
+  info: "bg-info",
+};
+
+interface MeterProps {
+  /** 0..1，超出范围自动夹取。 */
+  value: number;
+  tone?: MeterTone;
+  label?: string;
+  className?: string;
+}
+
+// 进度条：语义色填充，宽度过渡走动效 token；对读屏暴露 progressbar。
+export function Meter({ value, tone = "accent", label, className }: MeterProps) {
+  const pct = Math.max(0, Math.min(1, value)) * 100;
+  return (
+    <div
+      className={cn(
+        "h-1.5 w-full overflow-hidden rounded-full bg-line/60",
+        className,
+      )}
+      role="progressbar"
+      aria-valuenow={Math.round(pct)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={label}
+    >
+      <div
+        className={cn(
+          "h-full rounded-full transition-[width] duration-base ease-standard",
+          meterTones[tone],
+        )}
+        style={{ width: `${pct}%` }}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/components/ui/PageHeader.tsx b/apps/web/components/ui/PageHeader.tsx
index 641fae0..6747ca8 100644
--- a/apps/web/components/ui/PageHeader.tsx
+++ b/apps/web/components/ui/PageHeader.tsx
@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
 
+import { Eyebrow } from "./Eyebrow";
+
 interface PageHeaderProps {
   title: string;
   eyebrow?: string;
@@ -16,12 +18,8 @@ export function PageHeader({
   return (
     <header className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
       <div>
-        {eyebrow ? (
-          <p className="mb-1 font-mono text-xs uppercase tracking-wide text-ink-soft/70">
-            {eyebrow}
-          </p>
-        ) : null}
-        <h1 className="font-serif text-2xl text-ink">{title}</h1>
+        {eyebrow ? <Eyebrow className="mb-1.5">{eyebrow}</Eyebrow> : null}
+        <h1 className="font-serif text-display-sm text-ink">{title}</h1>
         {description ? (
           <p className="mt-2 max-w-2xl text-sm leading-6 text-ink-soft">
             {description}
diff --git a/apps/web/components/ui/SectionHeader.tsx b/apps/web/components/ui/SectionHeader.tsx
index 4bafb40..54c855c 100644
--- a/apps/web/components/ui/SectionHeader.tsx
+++ b/apps/web/components/ui/SectionHeader.tsx
@@ -2,8 +2,11 @@ import type { ReactNode } from "react";
 
 import { cn } from "@/lib/ui/variants";
 
+import { Eyebrow } from "./Eyebrow";
+
 interface SectionHeaderProps {
   title: string;
+  eyebrow?: string;
   description?: ReactNode;
   action?: ReactNode;
   className?: string;
@@ -11,6 +14,7 @@ interface SectionHeaderProps {
 
 export function SectionHeader({
   title,
+  eyebrow,
   description,
   action,
   className,
@@ -18,7 +22,8 @@ export function SectionHeader({
   return (
     <div className={cn("flex items-start justify-between gap-4", className)}>
       <div className="min-w-0">
-        <h2 className="font-serif text-base text-ink">{title}</h2>
+        {eyebrow ? <Eyebrow className="mb-1">{eyebrow}</Eyebrow> : null}
+        <h2 className="font-serif text-title-md text-ink">{title}</h2>
         {description ? (
           <p className="mt-1 text-sm leading-6 text-ink-soft">{description}</p>
         ) : null}
diff --git a/apps/web/components/ui/Skeleton.tsx b/apps/web/components/ui/Skeleton.tsx
new file mode 100644
index 0000000..2919bd3
--- /dev/null
+++ b/apps/web/components/ui/Skeleton.tsx
@@ -0,0 +1,18 @@
+import { cn } from "@/lib/ui/variants";
+
+interface SkeletonProps {
+  className?: string;
+}
+
+// 加载占位：柔和线条底 + motion-safe 脉冲（尊重 prefers-reduced-motion）。
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "block rounded-md bg-line/60 motion-safe:animate-pulse",
+        className,
+      )}
+    />
+  );
+}
diff --git a/apps/web/components/ui/StatusDot.tsx b/apps/web/components/ui/StatusDot.tsx
new file mode 100644
index 0000000..3614a77
--- /dev/null
+++ b/apps/web/components/ui/StatusDot.tsx
@@ -0,0 +1,41 @@
+import { cn } from "@/lib/ui/variants";
+
+export type StatusTone =
+  | "neutral"
+  | "accent"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info";
+
+const dotTones: Record<StatusTone, string> = {
+  neutral: "bg-ink-soft",
+  accent: "bg-cinnabar",
+  success: "bg-pass",
+  warning: "bg-overdue",
+  danger: "bg-conflict",
+  info: "bg-info",
+};
+
+interface StatusDotProps {
+  tone?: StatusTone;
+  /** 提供 label 时对读屏可见（不单靠颜色传达状态）。 */
+  label?: string;
+  className?: string;
+}
+
+// 状态点：语义色圆点，配合文案使用；有 label 时暴露给读屏。
+export function StatusDot({ tone = "neutral", label, className }: StatusDotProps) {
+  return (
+    <span
+      className={cn(
+        "inline-block h-2 w-2 shrink-0 rounded-full",
+        dotTones[tone],
+        className,
+      )}
+      role={label ? "img" : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+    />
+  );
+}
diff --git a/apps/web/lib/ui/variants.test.ts b/apps/web/lib/ui/variants.test.ts
index b88137a..9781cb3 100644
--- a/apps/web/lib/ui/variants.test.ts
+++ b/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" });
 
diff --git a/apps/web/lib/ui/variants.ts b/apps/web/lib/ui/variants.ts
index 4555720..6afb743 100644
--- a/apps/web/lib/ui/variants.ts
+++ b/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";