# 极简提示条（Notification Banner）

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

## 规格

- 同一份 props 与 role 分配
- 平底 + 一条语义色发丝边，零模糊零 inset 零阴影
- 圆角 rounded-md，关闭按钮方角
- 语义与结构同玻璃提示条

## 参数（CSS 变量）

`--color-info-bd` `--color-info-bg` `--color-info-fg` `--color-success-bd` `--color-success-bg` `--color-success-fg` `--color-text` `--color-text-muted` `--color-text-subtle` `--color-warning-bd` `--color-warning-bg` `--color-warning-fg`

## Props 契约

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

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

```
复现「极简提示条」— Notification Banner（提示条 / Minimal）
灵感来源：GOV.UK notification banner / USWDS alert
规格：
- 同一份 props 与 role 分配
- 平底 + 一条语义色发丝边，零模糊零 inset 零阴影
- 圆角 rounded-md，关闭按钮方角
- 语义与结构同玻璃提示条
参数（CSS 变量）：--color-info-bd --color-info-bg --color-info-fg --color-success-bd --color-success-bg --color-success-fg --color-text --color-text-muted --color-text-subtle --color-warning-bd --color-warning-bg --color-warning-fg
必缺状态：（无必缺状态）
整页场景：（尚未接进整页场景）
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/banner/minimal · 标准 states /design#states · 调研笔记 /showcase/component/banner/minimal#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)]',
    box: 'bg-[var(--color-info-bg)] border-[var(--color-info-bd)]',
  },
  success: {
    icon: CircleCheck,
    role: 'status' as const,
    fg: 'text-[var(--color-success-fg)]',
    box: 'bg-[var(--color-success-bg)] border-[var(--color-success-bd)]',
  },
  warning: {
    icon: TriangleAlert,
    role: 'alert' as const,
    fg: 'text-[var(--color-warning-fg)]',
    box: 'bg-[var(--color-warning-bg)] border-[var(--color-warning-bd)]',
  },
};

/** 极简提示条：平底 + 一条语义色发丝边，零模糊零 inset；层级靠字号，不靠阴影 */
export function MinimalBanner({
  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-md border ${t.box} ${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
            text-[var(--color-text-subtle)] hover:text-[var(--color-text)] cursor-pointer"
        >
          <Icon icon={X} size={14} />
        </button>
      )}
    </div>
  );
}