# 拟态卡片（Neumorphic Card）

- 类型 / 材质：`card` / `neumorphic`（新拟态）
- 状态：done ｜ 最后提交：2026-10-31
- 灵感来源：Neumorphism（同色浮起 + 一组双阴影）
- 依据标准：`/design#material` ｜ 组件页：`/showcase/component/card/neumorphic` ｜ 条目：`/r/card--neumorphic.json`
- 必缺状态：（无必缺状态）
- 整页场景：尚未接入

## 规格

- 同色底 + 一组外双阴影浮起，没有边框与模糊
- hover 只提亮表面到 --neuro-light，不再抬高
- 可点时 role=button，Enter / 空格触发
- 标题/副标/内容 slot 与玻璃卡片一致

## 参数（CSS 变量）

`--color-accent` `--color-text-muted` `--dur-fast` `--fw-semibold` `--neuro-bg` `--neuro-light` `--neuro-shadow`

## Props 契约

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

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

```
复现「拟态卡片」— Neumorphic Card（卡片 / Neumorphic）
灵感来源：Neumorphism（同色浮起 + 一组双阴影）
规格：
- 同色底 + 一组外双阴影浮起，没有边框与模糊
- hover 只提亮表面到 --neuro-light，不再抬高
- 可点时 role=button，Enter / 空格触发
- 标题/副标/内容 slot 与玻璃卡片一致
参数（CSS 变量）：--color-accent --color-text-muted --dur-fast --fw-semibold --neuro-bg --neuro-light --neuro-shadow
必缺状态：（无必缺状态）
整页场景：（尚未接进整页场景）
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/card/neumorphic · 标准 material /design#material · 调研笔记 /showcase/component/card/neumorphic#notes
```

## 调研笔记

import { type ReactNode } from 'react';

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

/**
 * 拟态卡片：与玻璃、极简卡片同一份 props，
 * 同色浮起（一组外双阴影），没有边框与模糊；hover 只提亮表面，不再抬高。
 */
export function NeumorphicCard({
  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(--neuro-bg)]
        shadow-[var(--neuro-shadow)]
        transition-[background-color] duration-[var(--dur-fast)]
        ${onClick ? 'hover:bg-[var(--neuro-light)] 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>
  );
}