玻璃空态

empty-state · glass-apple · 灵感来源：Carbon empty states pattern / Polaris empty state

还没有发布记录

第一次发布后，版本、负责人和回滚点会出现在这里。

没有匹配「dark mode」的记录

换个关键词，或把筛选清掉。

复用卡

Empty State · 玻璃空态 · 空态 / Glass

规格 · 术语提示词（给 AI 用）

做一个 Empty State（玻璃空态）：
- 三件套：正面措辞的标题 + 一句说明 + 单个主操作；零数据不是错误，不用 warning 色
- 图标只是装饰，aria-hidden；读屏靠标题与说明
- 只放一个动作——两个以上按钮会把空态变成第二个工具栏
- 面板级玻璃材质：半透明底 + 发丝边 + inset，图标砖与之同一层语言
用这些 CSS 变量：--color-accent --color-surface --color-text --color-text-muted --color-text-subtle --glass-bg --glass-border --glass-inset --text-base --text-xs
灵感参考：Carbon empty states pattern / Polaris empty state

参数（CSS 变量）

--color-accent --color-surface --color-text --color-text-muted --color-text-subtle --glass-bg --glass-border --glass-inset --text-base --text-xs

必缺状态

（无必缺状态）

整页场景

组件目录

安装（一条链接）

/r/empty-state--glass-apple.json

免外壳的 markdown 版：/llms/components/empty-state--glass-apple.md

参考（本站可核对）

本站实样标准 states 调研笔记

调研笔记

玻璃空态

三件套缺一不可：正面措辞的标题 + 一句说明 + 单个主操作；"没有数据"不是错误，不要用 warning 色
图标只是装饰，aria-hidden；读屏靠标题与说明
只放一个动作：两个以上按钮会把空态变成第二个工具栏
空表格的消费方要同时移除表头与表脚，否则读屏会遍历一张空表
同屏出现多个空态时，动作降级成次级按钮

实现

empty-state/glass-apple

import { type ReactNode } from 'react';

interface Props {
  title: string;
  description?: string;
  icon?: ReactNode;
  /** 一个主操作；多个动作会让空态变成第二个工具栏 */
  action?: ReactNode;
  className?: string;
}

/** 空态：零数据不是"页面坏了"，要说清是什么空了、下一步做什么 */
export function GlassAppleEmptyState({ title, description, icon, action, className = '' }: Props) {
  return (
    <div className={`flex flex-col items-center justify-center gap-3 px-6 py-14 text-center ${className}`}>
      {icon && (
        <div
          className="
            grid place-items-center size-11 rounded-2xl
            bg-[var(--glass-bg)] border border-[var(--glass-border)] backdrop-blur-xl
            shadow-[var(--glass-inset)] text-[var(--color-text-subtle)]
          "
          aria-hidden="true"
        >
          {icon}
        </div>
      )}
      <p className="text-[length:var(--text-base)] font-medium text-[var(--color-text)]">{title}</p>
      {description && (
        <p className="text-[length:var(--text-xs)] text-[var(--color-text-muted)] max-w-sm leading-relaxed">
          {description}
        </p>
      )}
      {action}
    </div>
  );
}

元信息

标识: empty-state/glass-apple
状态: done
最后提交: 2026-11-01
风格轴: glass-apple
依赖 token: --color-accent --color-surface --color-text --color-text-muted --color-text-subtle --glass-bg --glass-border --glass-inset --text-base --text-xs

在工作台打开源码与 notes 都在 src/components/empty-state/glass-apple/