# 拟态提示条（Notification Banner）

- 类型 / 材质：`banner` / `neumorphic`（新拟态）
- 状态：done ｜ 最后提交：2026-11-01
- 灵感来源：GOV.UK notification banner / USWDS alert
- 依据标准：`/design#states` ｜ 组件页：`/showcase/component/banner/neumorphic` ｜ 条目：`/r/banner--neumorphic.json`
- 必缺状态：（无必缺状态）
- 整页场景：尚未接入

## 规格

- 同一份 props 与 role 分配
- 底板同色挤出，语义色只染图标与标题——上色就不是拟态了
- 少了底色通道，严重度靠图标形状 + 文案承担，暗色下更弱
- 零边框，分层全靠外双阴影

## 参数（CSS 变量）

`--color-info-fg` `--color-success-fg` `--color-text` `--color-text-muted` `--color-text-subtle` `--color-warning-fg` `--neuro-bg` `--neuro-dark` `--neuro-light`

## Props 契约

| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| `tone` | `'info' | 'success' | 'warning'` | 可选 | 严重度：错误与警告共用一支琥珀色（和输入框的错误描边同色） |
| `title` | `string` | 必填 | — |
| `description` | `ReactNode` | 可选 | — |
| `action` | `ReactNode` | 可选 | 一个动作：链接或按钮，放正文之后 |
| `dismissible` | `boolean` | 可选 | 可关：常驻不等于不能收，但绝不自动消失（决策 17） |
| `className` | `string` | 可选 | — |

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

```
复现「拟态提示条」— Notification Banner（提示条 / Neumorphic）
灵感来源：GOV.UK notification banner / USWDS alert
规格：
- 同一份 props 与 role 分配
- 底板同色挤出，语义色只染图标与标题——上色就不是拟态了
- 少了底色通道，严重度靠图标形状 + 文案承担，暗色下更弱
- 零边框，分层全靠外双阴影
参数（CSS 变量）：--color-info-fg --color-success-fg --color-text --color-text-muted --color-text-subtle --color-warning-fg --neuro-bg --neuro-dark --neuro-light
必缺状态：（无必缺状态）
整页场景：（尚未接进整页场景）
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/banner/neumorphic · 标准 states /design#states · 调研笔记 /showcase/component/banner/neumorphic#notes
```

## 调研笔记

import { useState, type ReactNode } from 'react';
import { CircleCheck, Info, TriangleAlert, X } from 'lucide-react';
import { Icon } from '@/components/ui-echo/Icon';

interface Props {
  /** 严重度：错误与警告共用一支琥珀色（和输入框的错误描边同色） */
  tone?: 'info' | 'success' | 'warning';
  title: string;
  description?: ReactNode;
  /** 一个动作：链接或按钮，放正文之后 */
  action?: ReactNode;
  /** 可关：常驻不等于不能收，但绝不自动消失（决策 17） */
  dismissible?: boolean;
  className?: string;
}

const TONE = {
  info: { icon: Info, role: 'status' as const, fg: 'text-[var(--color-info-fg)]' },
  success: { icon: CircleCheck, role: 'status' as const, fg: 'text-[var(--color-success-fg)]' },
  warning: { icon: TriangleAlert, role: 'alert' as const, fg: 'text-[var(--color-warning-fg)]' },
};

/**
 * 拟态提示条：面板必须是同色挤出的，所以语义色只染图标与标题，
 * 不给底板上色——上色就不是拟态了。严重度靠图标形状 + 文案承担。
 */
export function NeumorphicBanner({
  tone = 'info',
  title,
  description,
  action,
  dismissible = false,
  className = '',
}: Props) {
  const [hidden, setHidden] = useState(false);
  const t = TONE[tone];

  if (hidden) return null;

  return (
    <div
      role={t.role}
      className={`
        flex items-start gap-3 px-4 py-3.5 rounded-2xl border border-transparent
        bg-[var(--neuro-bg)]
        shadow-[5px_5px_12px_var(--neuro-dark),-5px_-5px_12px_var(--neuro-light)]
        ${className}
      `}
    >
      <Icon icon={t.icon} size={16} className={`shrink-0 mt-0.5 ${t.fg}`} />
      <div className="min-w-0 flex-1">
        <p className={`text-sm font-semibold ${t.fg}`}>{title}</p>
        {(description || action) && (
          <div className="mt-1 text-sm text-[var(--color-text-muted)] leading-relaxed">
            {description}
            {action && <span className="mt-2 block">{action}</span>}
          </div>
        )}
      </div>
      {dismissible && (
        <button
          type="button"
          onClick={() => setHidden(true)}
          aria-label={`关闭提示：${title}`}
          className="press-feedback shrink-0 grid place-items-center size-6 -mr-1 rounded-full
            text-[var(--color-text-subtle)] hover:text-[var(--color-text)] cursor-pointer"
        >
          <Icon icon={X} size={14} />
        </button>
      )}
    </div>
  );
}