You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 

1.5 KiB

Changelog: EmptyState Component Rebuild

日期

2026-02-06

类型

  • 重构 (Refactor)
  • UI/UX 优化

变更描述

对全站通用的 EmptyState 组件进行了深度重构,旨在提供更符合极简主义设计风格的空状态体验,并增强组件的灵活性。

核心改进

  1. 精简变体类型

    • 移除了冗余的 glow, outline, dashed, simple 等变体。
    • 保留并优化了 3 种核心变体:
      • subtle (默认): 适用于主内容区,轻微背景和边框。
      • minimal: 适用于侧边栏、搜索结果、面板内部,无背景,视觉权重极低。
      • glass: 适用于浮层或高级预览区,采用磨砂玻璃质感。
  2. 视觉弱化 (Minimal Mode)

    • 图标尺寸缩小 (scale-75) 并降低透明度 (opacity-60)。
    • 标题颜色从 text-primary 降级为 text-text-secondary
    • 描述文案颜色使用 text-text-quaternary
  3. 双按钮支持

    • 引入 primaryActionsecondaryAction 属性。
    • 支持并排或自动布局的按钮组。
    • 保持了对旧版 action 属性的向后兼容。
  4. 响应式优化

    • 优化了 sm 尺寸下的间距和文字大小,确保在极窄面板下依然美观。

涉及文件

  • client/src/components/common/EmptyState.tsx

验证建议

  • 在侧边栏搜索无结果场景下测试 minimal 变体。
  • 在主列表为空场景下测试 subtle 变体的双按钮布局。
  • 在深色背景或浮层场景下测试 glass 变体。