适用场景
- 后台新开一个数据列表页，接口和字段都定了只差前端
- 三个列表页各写一套分页逻辑，拿它统一成同一个组件
- 联调时接口经常超时，用它把失败态先兜住再谈样式
PROMPT
写业务组件比写页面多的前端，知道列表组件的坑八成在状态上。要在后台做一个带搜索框和分页的列表、又不想每次都从零写时，用它。 【需求】 1 框架 Vue 3 组合式 API 加 TypeScript，样式用 Tailwind 2 功能是搜索框带 300 毫秒防抖，加分页列表，加每页条数切换 10/20/50 3 数据来自接口，返回 list 和 total 两个字段，请求可能失败 4 要响应式，窄屏下表格可横向滚动 5 组件对外只暴露 api 和 columns 两个 prop，其余内部处理 【输出要求】 1 给完整可用的单文件组件代码，不要用省略号跳过逻辑 2 结构、样式、逻辑分开写，逻辑里的关键判断加中文注释 3 必须处理空状态、加载中、请求失败三种情况，不许只写正常路径 4 防抖要能在组件卸载时取消，不许留下定时器 5 说明 props 类型和事件，附一段父组件调用示例 6 指出这个组件后续最可能被改的两处，以及改的时候要注意什么