# sms-count-down LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/sms-count-down` 的使用方式。

## 模块定位

短信验证码倒计时组件

## 导入方式

```ts
import { SmsCountDown } from '@flatbiz/antd/sms-count-down';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `* from ./sms-count-down.jsx`
- `SmsCountDown` - 短信验证码倒计时组件
- `SmsCountDownProps` - 短信倒计时组件的属性接口 @extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> - 继承 div 元素的所有 HTML 属性，但排除 onClick（组件内部处理点击事件）
- `SmsCountDownRefApi` - 短信倒计时组件的 Ref API 接口 @description 通过 ref 可以访问组件内部的方法，用于外部程序化控制组件行为

## Props / 配置要点

### SmsCountDownProps

短信倒计时组件的属性接口 @extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> - 继承 div 元素的所有 HTML 属性，但排除 onClick（组件内部处理点击事件）

- `onSendRequest`（必填）：: () => Promise<void>；验证码发送请求函数 @returns Promise<void> - 返回 Promise，成功时开始倒计时，失败时恢复初始状态 @description 当用户点击发送按钮时调用此函数，函数执行成功后会自动开始倒计时
- `totalTicks`（可选）：: number；倒计时总时长（单位：秒） @default 60 @description 从开始倒计时到结束的总秒数，例如 60 表示倒计时 60 秒
- `duration`（可选）：: number；倒计时更新间隔（单位：毫秒） @default 1000 @description 倒计时数值更新的频率，1000 表示每秒更新一次
- `autoStart`（可选）：: boolean；是否自动开始倒计时 @default false @description - true: 组件挂载后自动开始倒计时（不会调用 onSendRequest） - false: 需要用户点击才会触发发送和倒计时 @note 自动开始时不会调用 onSendRequest，仅用于显示倒计时状态
- `sendTxt`（可选）：: string；初始状态文案（未发送时显示） @default '获取验证码' @description 组件初始状态或倒计时结束后显示的文本
- `sentTxt`（可选）：: string；倒计时完成后的文案 @default '重新获取' @description 倒计时结束后显示的文本，提示用户可以重新发送
- `processingTxt`（可选）：: string；发送中状态文案 @default '发送中...' @description 点击发送按钮后，等待 onSendRequest 执行完成期间显示的文本
- `onTick`（可选）：: (time: number) => void；倒计时数值变化时的回调函数 @param time - 当前剩余的秒数 @description 每次倒计时更新时都会调用此函数，可用于外部监听倒计时状态

## 使用规则与行为

- 短信验证码倒计时组件 功能说明： - 提供短信验证码发送的倒计时功能 - 支持自定义倒计时时长、格式化文本、状态文案等 - 支持自动开始倒计时（不触发发送请求） - 支持通过 ref 手动触发发送 - 使用 ahooks 的 useCountDown 实现倒计时逻辑 使用场景： - 登录、注册、找回密码等需要发送短信验证码的场景 - 需要防止频繁点击发送验证码的场景
- 短信倒计时组件的属性接口 @extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> - 继承 div 元素的所有 HTML 属性，但排除 onClick（组件内部处理点击事件）
- 验证码发送请求函数 @returns Promise<void> - 返回 Promise，成功时开始倒计时，失败时恢复初始状态 @description 当用户点击发送按钮时调用此函数，函数执行成功后会自动开始倒计时
- 倒计时总时长（单位：秒） @default 60 @description 从开始倒计时到结束的总秒数，例如 60 表示倒计时 60 秒
- 倒计时更新间隔（单位：毫秒） @default 1000 @description 倒计时数值更新的频率，1000 表示每秒更新一次
- 是否自动开始倒计时 @default false @description - true: 组件挂载后自动开始倒计时（不会调用 onSendRequest） - false: 需要用户点击才会触发发送和倒计时 @note 自动开始时不会调用 onSendRequest，仅用于显示倒计时状态
- 倒计时文本格式化模板 @default '{t}s' @description 使用 {t} 作为占位符，会被替换为剩余秒数 @example '{t}s' => '60s', '{t}秒后重试' => '60秒后重试'
- 初始状态文案（未发送时显示） @default '获取验证码' @description 组件初始状态或倒计时结束后显示的文本
- 倒计时完成后的文案 @default '重新获取' @description 倒计时结束后显示的文本，提示用户可以重新发送
- 发送中状态文案 @default '发送中...' @description 点击发送按钮后，等待 onSendRequest 执行完成期间显示的文本

## 基础示例

```tsx
import { SmsCountDown, type SmsCountDownProps } from '@flatbiz/antd/sms-count-down';

const props: SmsCountDownProps = {
  // 按业务传入必要参数
};

<SmsCountDown {...props} />;
```

## 源码索引

- `src/sms-count-down/index.ts`
- `src/sms-count-down/sms-count-down.tsx`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/sms-count-down` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。