拟态空态

empty-state · neumorphic · 灵感来源：Neumorphism（同色浮起的小图标块）

还没有发布记录

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

没有匹配「dark mode」的记录

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

复用卡

Empty State · 拟态空态 · 空态 / Neumorphic

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

做一个 Empty State（拟态空态）：
- 同一份 props（title / description / icon / action）
- 同色底 + 外双阴影的图标砖浮出表面，没有边框与模糊
- 文案与动作规则同玻璃空态
用这些 CSS 变量：--color-accent --color-text --color-text-muted --color-text-subtle --neuro-bg --neuro-dark --neuro-light --text-base --text-xs
灵感参考：Neumorphism（同色浮起的小图标块）

参数（CSS 变量）

--color-accent --color-text --color-text-muted --color-text-subtle --neuro-bg --neuro-dark --neuro-light --text-base --text-xs

必缺状态

（无必缺状态）

整页场景

（尚未接进整页场景）

安装（一条链接）

/r/empty-state--neumorphic.json

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

参考（本站可核对）

本站实样标准 states 调研笔记

调研笔记

拟态空态

与玻璃空态同一份 props（title / description / icon / action）
图标块用同色底 + 外投影；页面本身若已是拟态面板，投影要再小一档
三件套、单动作、aria 规则同玻璃空态

实现

empty-state/neumorphic

import { type ReactNode } from 'react';

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

/** 空态：零数据不是"页面坏了"，要说清是什么空了、下一步做什么 */
export function NeumorphicEmptyState({ 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-xl
            bg-[var(--neuro-bg)] border border-transparent
            shadow-[2px_2px_6px_var(--neuro-dark),-2px_-2px_6px_var(--neuro-light)]
            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/neumorphic
状态: done
最后提交: 2026-11-01
风格轴: neumorphic
依赖 token: --color-accent --color-text --color-text-muted --color-text-subtle --neuro-bg --neuro-dark --neuro-light --text-base --text-xs

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