#Shortcuts

UnoCSS Shortcuts 系统，提供常用样式组合的快捷类名，简化开发并保持样式一致性。

#基础用法

#设计规范

#占位符类

#empty

空值占位符，用于数据为空时显示横线

#布局类

用于快速实现常见布局结构的快捷类：

#flex-between

水平布局，两端对齐（flex + items-center + justify-between）

#flex-col-between

垂直布局，两端对齐（flex + flex-col + justify-between）

#卡片类

统一的卡片容器样式，提供一致的视觉效果：

#card-default

默认卡片样式（圆角 + 白色背景 + 标准内边距）

#card-default-border

带边框的默认卡片样式

#card-default-sm

小尺寸卡片样式（顶部内边距更小）

#form-card

表单卡片样式（底部边距为 1px）From.Item 默认会有 margin-bottom: 24px;

#卡片头部类

卡片区域的细分样式：

#完整的卡片头部示例

#描述列表类

用于展示键值对信息的网格布局：

#完整的描述列表示例

#标签类

统一的标签样式系统：

#基础标签

#状态标签

#其他工具类

#bg-body

页面背景色（#f5f5f5）

#tabs-no-border

去除 Ant Design Tabs 组件导航栏底部的默认边框

#pagination-bottom-0

去除 Ant Design Table 组件分页器的默认底部边距

#使用建议

#组件样式组合

// 完整的卡片结构
<div className="card-default">
  <div className="card-header">
    <div className="card-header-title">卡片标题</div>
    <div className="card-header-extra">额外操作</div>
  </div>
  <div className="pt-4">
    卡片内容
  </div>
</div>

// 描述列表
<div className="descriptions">
  <div className="descriptions-item">
    <span>标签</span>
    <span>内容值</span>
  </div>
</div>

#标签状态

// 根据状态使用不同的标签样式
<span className="tag-success">成功</span>
<span className="tag-error">失败</span>
<span className="tag-warning">警告</span>

// 大尺寸标签
<span className="tag-success-lg">成功状态</span>

#动态 Shortcuts

系统支持动态生成标签样式的 shortcuts：

• tag-success / tag-success-lg
• tag-error / tag-error-lg
• tag-warning / tag-warning-lg

这些是通过正则匹配动态生成的，可以轻松扩展更多状态。

#注意事项

1. 语义化命名：shortcut 名称应清晰表达其用途
2. 组合使用：多个 shortcuts 可以组合使用实现复杂效果
3. 避免覆盖：使用 shortcuts 后如需调整，添加额外的类名而非修改 shortcut
4. 保持一致：相同功能的组件应使用相同的 shortcuts