# 玻璃卡片（Liquid Glass Card）

- 类型 / 材质：`card` / `glass-apple`（玻璃）
- 状态：done ｜ 最后提交：2026-10-31
- 灵感来源：visionOS / Linear 浮动卡片
- 依据标准：`/design#material` ｜ 组件页：`/showcase/component/card/glass-apple` ｜ 条目：`/r/card--glass-apple.json`
- 必缺状态：（无必缺状态）
- 整页场景：尚未接入

## 规格

- 玻璃面 + 边缘光学（内高光 + 顶部定向光）
- 内容面板仍用不透明白底——玻璃只做悬浮层
- hover 提亮底色 + 阴影加深，不做位移

## 参数（CSS 变量）

`--color-accent` `--color-text-muted` `--dur-fast` `--fw-semibold` `--glass-bg` `--glass-border` `--glass-highlight` `--glass-inset` `--shadow-md`

## Props 契约

| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| `title` | `string` | 可选 | — |
| `subtitle` | `string` | 可选 | — |
| `children` | `ReactNode` | 可选 | — |
| `onClick` | `() => void` | 可选 | — |
| `className` | `string` | 可选 | — |

## 提示词（可直接粘给智能体）

```
复现「玻璃卡片」— Liquid Glass Card（卡片 / Glass）
灵感来源：visionOS / Linear 浮动卡片
规格：
- 玻璃面 + 边缘光学（内高光 + 顶部定向光）
- 内容面板仍用不透明白底——玻璃只做悬浮层
- hover 提亮底色 + 阴影加深，不做位移
参数（CSS 变量）：--color-accent --color-text-muted --dur-fast --fw-semibold --glass-bg --glass-border --glass-highlight --glass-inset --shadow-md
必缺状态：（无必缺状态）
整页场景：（尚未接进整页场景）
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/card/glass-apple · 标准 material /design#material · 调研笔记 /showcase/component/card/glass-apple#notes
```

## 调研笔记

import { type ReactNode } from 'react';

interface Props {
  title?: string;
  subtitle?: string;
  children?: ReactNode;
  onClick?: () => void;
  className?: string;
}

export function GlassAppleCard({
  title,
  subtitle,
  children,
  onClick,
  className = '',
}: Props) {
  const hasHeader = title || subtitle;

  return (
    <article
      onClick={onClick}
      role={onClick ? 'button' : undefined}
      tabIndex={onClick ? 0 : undefined}
      onKeyDown={onClick ? (event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          onClick();
        }
      } : undefined}
      className={`
        relative
        rounded-2xl
        bg-[var(--glass-bg)] border border-[var(--glass-border)] backdrop-blur-xl
        shadow-[var(--shadow-md),var(--glass-inset)]
        transition-[transform,background-color,border-color] duration-[var(--dur-fast)]
        ${onClick ? 'hover:bg-[var(--glass-highlight)] hover:border-[rgba(29,31,38,0.14)] hover:-translate-y-0.5 cursor-pointer' : ''}
        p-6
        ${className}
      `}
    >
      {hasHeader && (
        <div className="mb-4">
          {title && (
            <h3
              className="text-base"
              style={{ fontWeight: 'var(--fw-semibold)' }}
            >
              {title}
            </h3>
          )}
          {subtitle && (
            <p className="text-sm text-[var(--color-text-muted)] mt-1">{subtitle}</p>
          )}
        </div>
      )}

      {children}
    </article>
  );
}