生成可复用组件

帮我写一个可复用的组件：{{组件名，如 空状态提示}}

使用场景：{{在哪几处会用到}}
技术栈：{{如 React + TypeScript + Tailwind}}

组件要求：
1. 用 TypeScript，props 全部定义清楚类型，并写简短注释说明每个 prop 的用途。
2. 把可能需要变的东西都做成 props（文案、尺寸、状态、回调），不要在组件里写死。
3. 给出默认值，让我只传最少的参数也能用。
4. 考虑边界：内容超长、数据为空、加载中、禁用态，分别怎么显示。
5. 写 2-3 个使用示例，覆盖最常见和最容易出错的用法。

约束：
- 不要过度设计，我不需要支持我没提到的场景。
- 不引入新的依赖。
- 无障碍：{{如 键盘可操作、有 aria-label}}。

把 {{}} 里的部分换成你自己的内容

为什么这么写

1. 「把可能变的东西做成 props」是可复用和一次性的分水岭，逼 AI 提前做参数化
2. 要求默认值，保证组件在最小用法下就能跑，降低使用门槛
3. 明确列出四种边界状态，堵住 AI 最常漏的空数据/超长内容分支
4. 「不要过度设计」防止 AI 给你一个支持二十种场景、你一个都用不上的巨型组件

用起来的样子

做「空状态」组件时，AI 会把图标、标题、描述、操作按钮都做成 props，并给出无按钮、只有标题的最小用法示例。

常见坑

• !不写使用场景，AI 不知道该做成多通用，要么太死要么过度设计
• !不看边界状态，组件一遇到空数据就白屏或报错

相关分类