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
1.5 KiB
Changelog: EmptyState Component Rebuild
日期
2026-02-06
类型
- 重构 (Refactor)
- UI/UX 优化
变更描述
对全站通用的 EmptyState 组件进行了深度重构,旨在提供更符合极简主义设计风格的空状态体验,并增强组件的灵活性。
核心改进
-
精简变体类型:
- 移除了冗余的
glow,outline,dashed,simple等变体。 - 保留并优化了 3 种核心变体:
subtle(默认): 适用于主内容区,轻微背景和边框。minimal: 适用于侧边栏、搜索结果、面板内部,无背景,视觉权重极低。glass: 适用于浮层或高级预览区,采用磨砂玻璃质感。
- 移除了冗余的
-
视觉弱化 (Minimal Mode):
- 图标尺寸缩小 (
scale-75) 并降低透明度 (opacity-60)。 - 标题颜色从
text-primary降级为text-text-secondary。 - 描述文案颜色使用
text-text-quaternary。
- 图标尺寸缩小 (
-
双按钮支持:
- 引入
primaryAction和secondaryAction属性。 - 支持并排或自动布局的按钮组。
- 保持了对旧版
action属性的向后兼容。
- 引入
-
响应式优化:
- 优化了
sm尺寸下的间距和文字大小,确保在极窄面板下依然美观。
- 优化了
涉及文件
client/src/components/common/EmptyState.tsx
验证建议
- 在侧边栏搜索无结果场景下测试
minimal变体。 - 在主列表为空场景下测试
subtle变体的双按钮布局。 - 在深色背景或浮层场景下测试
glass变体。