文档编写指南-提示框

<Callout title="基础提示">
  这是一个默认的 info 类型提示框。
</Callout>

<Callout title="信息提示" type="info">
  用于普通信息、说明、备注。
</Callout>

<Callout title="警告提示" type="warning">
  用于需要注意但不严重的场景。
</Callout>

<Callout title="错误提示" type="error">
  用于操作失败、错误、危险场景。
</Callout>

<Callout title="成功提示" type="success">
  用于操作成功、完成、通过场景。
</Callout>

<Callout title="小技巧" type="idea">
  用于技巧、建议、灵感、最佳实践。
</Callout>

<Callout title="简写警告" type="warn">
  warn 与 warning 效果一致。
</Callout>

<Callout title="自定义图标" type="info" icon="🚀">
  支持 Emoji 作为图标。
</Callout>

<Callout title="JSX 自定义图标" type="success" icon={<strong>✅</strong>}>
  可直接传入 React 节点作为图标。
</Callout>

<Callout type="warn">
  无标题纯内容提示框。
</Callout>

<Callout
  title="自定义样式"
  type="error"
  className="my-4 rounded-lg shadow-lg"
  style={{ background: '#fff5f5', borderColor: '#ff4d4f' }}
>
  支持 className、style 及 div 原生所有属性。
</Callout>

<CalloutContainer type="idea">
  <CalloutTitle className="text-lg font-bold">进阶拆分用法</CalloutTitle>
  <CalloutDescription className="text-gray-600 mt-1">
    使用 CalloutContainer + CalloutTitle + CalloutDescription 自由拆分结构
  </CalloutDescription>
</CalloutContainer>

<Callout title="内嵌 MDX 语法" type="info">
  文本**加粗**、*斜体*、[内部链接](/)
  - 列表项一
  - 列表项二
</Callout>