AI 提示词：设计系统组件文档生成器

# 组件名称
Button（按钮）

## 概述
- 功能描述
  - 用于触发单次或批量的操作指令，支持主行动、表单提交与批量操作等场景。
- 设计原则
  - 明确层级：通过主/次/幽灵/危险样式体现操作优先级与意图。
  - 一致性：基于主题 Token（颜色、间距、圆角）统一外观与交互反馈。
  - 可达性：文本/背景对比度≥4.5，键盘可达（可聚焦、可用键盘操作）。
- 使用场景
  - 页面主行动（如“立即提交”“下一步”）。
  - 表单提交（如“提交表单”“保存草稿”）。
  - 批量操作（如“批量删除”“批量导出”）。
- 技术参数
  - 版本：v3
  - 依赖：Icon 模块（用于图标型按钮或带图标的按钮）。
  - 兼容性：向后兼容 v2（见升级注意事项与批量更新清单）。
  - 变更点：统一尺寸为 S/M/L；弃用 type=secondary-ghost（统一至 ghost 样式）。

## 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| variant | 'primary' \| 'secondary' \| 'ghost' \| 'danger' | 'primary' | 按钮视觉样式与意图。primary 用于主行动；secondary 用于次要行动；ghost 用于弱化或有色背景上的低干扰操作；danger 用于破坏性操作。 |
| size | 'S' \| 'M' \| 'L' | 'M' | 统一尺寸规格。S 适合紧凑场景与次要操作；M 作为默认；L 用于主行动与高显著性场景。 |
| disabled | boolean | false | 禁用状态，不可交互与不可触发操作。需提供明确的视觉弱化与可达性提示（例如 aria-disabled）。 |
| loading | boolean | false | 加载状态。显示进度指示或旋转图标，阻止重复触发，保持按钮宽度稳定避免布局跳动。 |
| icon | Icon 引用（ID 或组件） | - | 搭配 Icon 模块使用的图标引用。支持纯图标按钮或图标+文本按钮。 |
| iconPosition | 'left' \| 'right' | 'left' | 图标相对文案的位置。建议与主题间距 Token 保持一致的图文间距。 |
| block | boolean | false | 是否占满可用行宽（整行按钮）。用于移动端或需要强强调的主行动。 |
| ariaLabel | string | - | 图标型或无文本按钮的无障碍名称。用于读屏与键盘用户识别按钮意图。 |
| type | 'button' \| 'submit' \| 'reset' | 'button' | 表单上下文中的按钮类型。submit 用于提交表单；reset 用于重置；默认 button 用于普通点击操作。 |
| onClick | function | - | 触发操作的回调。需保证幂等或添加节流/防重机制，以避免重复提交。 |

## 交互状态
- 默认状态
  - 采用对应 variant 的主题颜色、边框与阴影 Token。
  - 文本与背景对比度≥4.5，图标与文本之间间距遵循间距 Token。
  - 包含可见的键盘焦点样式（焦点环/高亮），与悬停/按下区别清晰。
- 悬停状态
  - 提供轻微的颜色或阴影变化，保持与默认状态的层级一致性与可读性。
  - 不改变按钮尺寸，避免布局抖动。
- 按下状态
  - 以更深的色阶或压低阴影表现按压反馈。
  - 点击后触发相应操作，若进入 loading，应立即切换至加载状态并阻止重复触发。
- 禁用状态
  - 文本与图标弱化；移除悬停与按下反馈。
  - 不可聚焦与不可点击（根据实现策略，可采用语义禁用或 aria-disabled 标注）。
- 加载状态
  - 显示进度指示（依赖 Icon 模块或内置进度指示符）。
  - 维持原有按钮宽度与布局；通常阻止再次点击，避免重复提交。
  - 文案可保持或替换为“处理中”类提示词，需保证对比度与可读性。

## 使用示例
```代码示例
// 说明：以下为与属性说明一致的伪代码示例，具体调用方式以团队技术栈与组件库实现为准。

// 1. 页面主行动（L，primary）
<Button variant="primary" size="L" type="submit">
  提交申请
</Button>

// 2. 次要行动（M，secondary）
<Button variant="secondary" size="M" onClick={handleSave}>
  保存草稿
</Button>

// 3. 幽灵按钮（S，ghost）+ 左侧图标
<Button variant="ghost" size="S" icon="download" iconPosition="left" onClick={handleDownload}>
  下载
</Button>

// 4. 危险操作（M，danger）
<Button variant="danger" size="M" onClick={handleBatchDelete}>
  删除选中
</Button>

// 5. 禁用状态（M，primary）
<Button variant="primary" size="M" disabled>
  提交
</Button>

// 6. 加载状态（M，primary）
<Button variant="primary" size="M" loading type="submit">
  正在提交…
</Button>

// 7. 仅图标按钮（需 ariaLabel）
<Button variant="ghost" size="S" icon="more" ariaLabel="更多操作" onClick={openMenu} />
```

## 注意事项
- 使用限制
  - primary 仅用于单页最主要行动；同一视图避免出现多个 L 级 primary。
  - danger 仅用于不可逆或高风险操作，建议搭配确认流程（如弹窗确认）。
  - ghost 适合弱化场景或有色背景上；在浅色背景上需确保文本/边框可读性与对比度。
  - loading 状态下应防止重复触发；如需取消加载，提供明确的交互路径。
- 兼容性说明（v3 相对 v2）
  - 统一尺寸：v2 中的尺寸映射至 v3 为 S/M/L。建议按视觉规范映射（示例策略：原 xs→S、md→M、lg→L），以设计评审产出为准。
  - 样式变更：弃用 type=secondary-ghost。请统一使用 variant="ghost" 表达弱化按钮样式。
  - 向后兼容：保留 v2 常用属性的兼容入口；如存在旧属性名（如 type 借用样式标识），需在迁移期内做映射与告警提示，具体按工程实现策略执行。
- 批量更新建议清单（供升级到 v3 使用）
  1. 全库检索并替换：type=secondary-ghost → variant="ghost"。
  2. 全库尺寸归一：将旧尺寸枚举统一映射至 S/M/L；更新设计稿与代码保持一致。
  3. 可达性校验：逐屏检查按钮文本/背景对比度≥4.5；纯图标按钮补充 ariaLabel。
  4. 表单语义检查：提交按钮统一显式声明 type="submit"；非提交操作使用 type="button"。
  5. 加载与防重：为涉及网络提交的按钮统一接入 loading 与防重复触发策略。
  6. 图标依赖梳理：确保所有 icon 属性引用均来自 Icon 模块的受支持图标集合。
  7. 危险操作审核：danger 使用场景增加确认流程（如二次确认对话框），避免误操作。
- 性能考虑
  - 避免在频繁点击场景中触发多次重渲染；建议对回调进行节流/防重。
  - loading 期间保持布局稳定，避免文案长度变化导致的抖动。
  - 图标资源按需加载，减少初始渲染负担。

## 相关组件
- Icon（依赖）
  - 用途：提供按钮内的图标或加载指示。
- ButtonGroup
  - 用途：同类操作分组时的间距与对齐规范；需与 S/M/L 尺寸对齐。
- Modal/Confirm（确认对话框）
  - 用途：与 danger 操作搭配的二次确认流程。
- Tooltip
  - 用途：为禁用按钮提供原因说明（如权限不足、条件未满足）。
- Progress/Spinner
  - 用途：在 loading 状态下的进度反馈（若未内置）。
- Form（表单容器/字段）
  - 用途：与 type="submit" 搭配，负责表单数据校验与提交流程。
- Menu/Dropdown
  - 用途：图标按钮或“更多操作”触发的动作集合。

附：关联关系清单（v3 变更影响）
- Icon：确认可用图标集与加载指示样式，统一尺寸与对齐规范。
- ButtonGroup：同步 S/M/L 间距与排列规则，移除对旧尺寸枚举的依赖。
- Modal/Confirm：危险操作入口统一从 danger 按钮触发，完善确认交互。
- Tooltip：在禁用态与幽灵按钮上确保对比度与提示可读性。
- Form：统一按钮类型语义（submit/button），检查提交入口的 loading 处理。
- Progress/Spinner：与按钮的 loading 状态联动，确保视觉与尺寸一致。
- Menu/Dropdown：纯图标按钮触发菜单时的焦点管理与键盘操作一致性。

# 组件名称
DatePicker（日期选择器）

## 概述
- 功能描述
  - 支持选择单日或日期范围，精度至“日”。
  - 以“输入框 + 弹层（日历面板）”的复合结构提供交互，含跨月导航与快捷预设。
  - 兼容受控与非受控两种数据管理方式，支持国际化日期格式（默认 YYYY-MM-DD）。
- 设计原则
  - 明确性：输入框与面板分工清晰，选择路径直观（起始-结束）。
  - 一致性：状态样式统一（默认/聚焦/悬停/选中/禁用/错误），导航与预设行为一致。
  - 可达性：所有可交互目标触达区域≥44px；支持键盘与读屏辅助。
  - 可预期：范围选择规则稳定（起始≤结束，跨月一致导航），错误与空状态提示明确。
- 使用场景（按场景概述）
  - 日程安排
    - 常用单日选择或短范围（1–7天）；需清晰的当天高亮与跨周导航。
    - 可提供“今天/明天/本周”等快捷预设。
  - 报表筛选
    - 多见范围选择（如“本月”“上月”“近7天”）；强调快速设定与格式标准化（YYYY-MM-DD）。
    - 支持禁用未来日期或超出数据可用期的日期。
  - 预订流程
    - 典型为起止日期（入住—离店）；需清晰的选中状态连线与禁选规则（不可逆、最短/最长天数）。
    - 提供跨月稳定导航与已售罄/不可用日期的禁用样式。

## 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| type | 'single' \| 'range' | 'single' | 选择模式：单日或范围。 |
| value | Date \| [Date, Date] | - | 受控值。单日为 Date；范围为 [start, end]。 |
| defaultValue | Date \| [Date, Date] | - | 非受控初始值。 |
| onChange | (value) => void | - | 值变更回调。单日返回 Date；范围返回 [start, end]。 |
| format | string | 'YYYY-MM-DD' | 显示与输入解析格式，建议使用国际化可配置格式。 |
| disabled | boolean | false | 禁用组件；输入框与面板不可交互。 |
| error | boolean | false | 错误状态开关；常用于表单校验反馈。 |
| minDate | Date | - | 可选最小日期（含）。 |
| maxDate | Date | - | 可选最大日期（含）。 |
| disabledDate | (date: Date) => boolean | - | 按业务规则禁用指定日期；返回 true 表示该日不可选。 |
| presets | Array<{ label: string; value: Date \| [Date, Date] }> | - | 快捷预设集合；单日或范围值与类型一致。 |
| placeholder | string \| [string, string] | - | 占位文案；范围模式可分别配置起止占位。 |
| allowClear | boolean | true | 显示清除控件；清除后恢复为空状态。 |
| open | boolean | - | 受控面板展开状态。 |
| onOpenChange | (open: boolean) => void | - | 面板展开/收起状态回调。 |
| locale | { months: string[]; weekdays: string[]; ... } | - | 文案与本地化配置；用于月份名称、星期名称等。 |
| inputSize | 'sm' \| 'md' \| 'lg' | 'md' | 输入框尺寸，需保证可点击目标≥44px。 |
| readOnlyInput | boolean | false | 输入框只读；用户通过面板选择，不允许直接键入。 |
| name | string | - | 表单字段名。 |
| id | string | - | 输入框元素 id。 |
| placement | 'top' \| 'bottom' \| 'left' \| 'right' | 'bottom' | 弹层相对输入框的展开位置。 |
| firstDayOfWeek | 0–6 | 1 | 周起始日配置（0=周日）。 |
| rangeConstraints | { minSpan?: number; maxSpan?: number } | - | 范围选择约束（最短/最长天数），不满足时给出错误提示。 |

## 组件结构
- 输入区
  - 文本输入框：显示当前选择值；支持占位、清除、错误提示。
  - 触发图标：点击展开/收起弹层。
  - 清除控件（可选）：当 allowClear=true 且有值时显示。
- 弹层（日历面板）
  - 月份头部：当前年月、跨月导航（前一月/后一月）。
  - 日期网格：按周显示日期；包含默认、悬停、选中、禁用等状态。
  - 范围高亮（type='range'）：起始/结束日期标记与连续选区高亮。
  - 快捷预设区（可选）：列出预设项，点击后快速填充值。
- 辅助信息
  - 错误/帮助文案：位于输入框下方或内部，提示格式错误、越界等。
  - 无数据或空结果说明：用于空状态。

## 交互状态
- 默认状态
  - 输入框显示占位或当前值；弹层收起；控件可点击。
- 聚焦状态
  - 输入框获得焦点；弹层可根据策略自动展开；边框高亮。
- 悬停状态
  - 鼠标悬停输入框、清除控件或日期单元格时，显示悬停样式。
- 选中状态
  - 单日模式：选中日期高亮。
  - 范围模式：起始与结束高亮，区间连续高亮；跨月选择保持连续性。
- 禁用状态
  - 输入框与弹层不可交互；禁用日期单元格不可点击且样式弱化。
- 错误状态
  - 输入框与辅助文案显示错误提示；错误样式与读屏提示同步。

## 交互（按场景说明）
- 日程安排
  - 选择流程：点击输入框展开面板 → 选择单日或短范围 → 确认后收起。
  - 快捷：提供“今天/明天/本周”，点击即填充值。
  - 约束：可禁用过去日期或非工作日视业务规则。
- 报表筛选
  - 选择流程：优先使用范围预设（“近7天/本月/上月”），减少手动选择成本。
  - 键盘与输入：允许直接键入标准格式（YYYY-MM-DD），失焦校验并同步面板。
  - 约束：禁用未来日期；当越界时给出错误并阻止提交。
- 预订流程
  - 选择流程：先选入住日期，再选离店日期，自动高亮连线；支持跨月。
  - 约束：rangeConstraints 限制最短/最长天数；禁用售罄或不可用日期。
  - 反馈：当离店早于入住或不满足最短/最长时，显示错误并清晰指示修正方式。

## 空状态与错误提示（按场景说明）
- 空状态
  - 通用：输入框显示 placeholder；面板可显示“请选择日期”或预设列表。
  - 日程安排：空状态下强调当日高亮与“快速选择”入口。
  - 报表筛选：展示与数据有效期相关的说明（如“数据更新至：YYYY-MM-DD”）。
  - 预订流程：在空状态下，禁用不可预订日期并展示说明（如“节假日已满”）。
- 错误提示类型与文案
  - 格式错误：输入不符合 format；文案示例：“请输入有效日期，格式为 YYYY-MM-DD。”
  - 越界错误：选择超出 minDate/maxDate；文案示例：“选择日期需在可选范围内。”
  - 逻辑错误（范围）：结束早于开始；文案示例：“结束日期需不早于开始日期。”
  - 约束不满足：不满足最短/最长跨度；文案示例：“选择范围至少 X 天/不超过 Y 天。”
  - 不可用日期：命中 disabledDate；文案示例：“该日期不可选择。”
- 错误呈现
  - 在输入框下方或内联展示错误文本；同时应用错误边框与图标。
  - 读屏文本与 ARIA 属性同步，确保无障碍提示一致。
  - 更正策略：保留已选起点，引导用户重新选择有效终点（范围模式）。

## 使用示例
```代码示例
// 注意：以下为与技术栈无关的伪代码，属性名与事件需按实际项目实现对齐。

// 1. 单日选择（受控）
<DatePicker
  type="single"
  value={Date('2025-10-10')}
  format="YYYY-MM-DD"
  presets={[
    { label: '今天', value: Date('2025-10-10') },
    { label: '明天', value: Date('2025-10-11') },
  ]}
  minDate={Date('2020-01-01')}
  maxDate={Date('2030-12-31')}
  onChange={(d) => setDate(d)}
/>

// 2. 日期范围（非受控，含约束与禁用未来）
<DatePicker
  type="range"
  defaultValue={[Date('2025-10-01'), Date('2025-10-07')]}
  format="YYYY-MM-DD"
  rangeConstraints={{ minSpan: 2, maxSpan: 30 }}
  disabledDate={(d) => d > Today()}
  presets={[
    { label: '近7天', value: [Today().addDays(-6), Today()] },
    { label: '本月', value: [StartOfMonth(Today()), EndOfMonth(Today())] },
  ]}
/>

// 3. 报表筛选（允许输入与空状态）
<FormField label="统计周期">
  <DatePicker
    type="range"
    placeholder={['开始日期', '结束日期']}
    allowClear={true}
    format="YYYY-MM-DD"
    readOnlyInput={false}
    onChange={(range) => refreshReport(range)}
  />
  <HelperText>数据更新至：2025-10-10</HelperText>
</FormField>
```

## 注意事项
- 使用限制
  - 精度至“日”，不支持时分秒；如需时间选择，请使用 TimePicker 或 DateTime 组合组件。
  - 范围模式下结束日期必须不早于开始日期；跨月选择应保持连续高亮。
  - 当启用 rangeConstraints 时，必须在 UI 与校验层同时生效。
- 兼容性说明
  - 国际化：默认格式为 YYYY-MM-DD；应与 locale 配合展示月份与星期文案。
  - 无障碍：交互目标≥44px；为输入与日期单元格提供可感知焦点与 ARIA 属性。
  - 键盘交互建议：Tab 在可交互元素间切换；方向键在日历中移动；Enter 确认选择。
- 性能考虑
  - disabledDate 为高频调用函数时，应避免复杂计算；可对结果进行缓存。
  - 跨月导航与范围高亮需在渲染层优化，避免整面板重绘。
  - 受控模式下，onChange 与值更新应保持幂等与最小重渲染。

## 相关组件
- Input（输入框）
- Popover（弹层/气泡层）
- Calendar（日历网格）
- TimePicker（时间选择器）
- FormField（表单字段容器）

# 组件名称
OTPInput

## 概述
- 功能描述
  - 用于输入一次性短验证码（One-Time Password/Code），以等宽格承载多位字符，支持自动聚焦与整串粘贴，完成后触发回调。
- 设计原则
  - 明确性：将多位验证码分割为等宽格，降低认知负担。
  - 可达性：提供清晰的读屏提示与分组语义，确保键盘与读屏器可用。
  - 稳定性：粘贴、删除、禁用与错误等状态下行为可预期。
- 使用场景
  - 登录二次验证（2FA/OTP）
  - 敏感操作（如转账、修改安全设置）确认

## 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| length | number | 6 | 验证码位数。需为正整数；应与服务端约定一致。 |
| mask | boolean | false | 是否以掩码字符显示输入内容（如 •）。仅影响展示，不改变提交值。 |
| type | 'number' | 'number' | 输入类型。用于约束输入与唤起数字键盘等。 |
| onChange | (value: string) => void | - | 输入变化时触发，value 为当前已输入串（长度 ≤ length）。应避免在此回调中进行频繁的远端校验。 |
| onComplete | (value: string) => void | - | 当输入达到 length 位时触发一次。适用于提交或发起校验。 |

说明：
- 组件默认在挂载后将焦点置于第一格（自动聚焦）。
- “错误/禁用”为组件支持的交互状态，具体呈现通常由上层表单或样式体系控制（例如通过表单校验结果为组件根元素添加错误态样式，或通过业务逻辑控制禁用态）。

## 交互状态
- 默认状态
  - 等宽格显示，占位符为空；可逐位输入；支持整串粘贴。
- 悬停状态
  - 非触屏设备上，边框或背景可轻微强化，提示可交互（不影响输入逻辑）。
- 激活状态（聚焦）
  - 当前格获得聚焦，具备清晰的焦点可视指示；读屏器应提示“请输入共 length 位验证码”或等效说明。
- 错误状态
  - 视觉上以错误样式标识（如边框/说明文案），同时为根容器或单元格添加可被读屏识别的错误语义（详见无障碍说明）。
- 禁用状态
  - 禁止输入与粘贴，维持占位展示；焦点不可进入。

行为补充：
- 粘贴：当用户粘贴完整验证码时，自动按位分配至各格；若超出 length，额外字符忽略；若不足 length，按序填充已有位。
- 删除：按退格键可删除当前位内容。若业务有特殊删除规则，应对外一致。

## 使用示例
```代码示例
// 场景：登录二次验证（6位数字验证码）
// 框架无关伪代码/类 React 风格示例（仅使用本文档声明的 props）

function TwoFactorForm() {
  const [code, setCode] = useState('');      // 当前输入串
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');

  const handleChange = (val) => {
    setCode(val);              // 局部状态更新
    setError('');              // 输入变化时清理错误展示（如有）
    // 注意：如需实时校验，请在此对请求做防抖处理，避免高频请求。
  };

  const handleComplete = async (val) => {
    setSubmitting(true);
    setError('');
    try {
      // 将 val 发送到后端进行校验
      await api.verifyOTP(val);
      // 通过后进入下一步流程
      proceed();
    } catch (e) {
      setError('验证码有误，请重试');
      // 可在错误态下清空或保留输入，依业务需求决定
      // setCode('');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <form aria-labelledby="otp-label" onSubmit={(e) => e.preventDefault()}>
      <div id="otp-label">验证码</div>
      <OTPInput
        length={6}
        mask={false}
        type="number"
        onChange={handleChange}
        onComplete={handleComplete}
      />
      {error ? (
        <div role="alert" aria-live="assertive">{error}</div>
      ) : null}

      <button type="submit" disabled={submitting || code.length < 6}>
        下一步
      </button>
    </form>
  );
}

// 场景：敏感操作确认（禁用/错误态展示由外部控制）
// - 禁用时不允许编辑与粘贴
function SensitiveActionOTP({ disabled }) {
  const [code, setCode] = useState('');
  const [error, setError] = useState('');

  return (
    <div className={`otp-field ${disabled ? 'is-disabled' : ''} ${error ? 'is-error' : ''}`}>
      <label>短信验证码</label>
      <OTPInput
        length={6}
        mask
        type="number"
        onChange={setCode}
        onComplete={(v) => { /* 提交或下一步 */ }}
      />
      {error ? <div className="field-error" role="alert">{error}</div> : null}
    </div>
  );
}

// 防抖示例：在 onChange 中做服务端预校验（例如黑名单检测/速率限制提示）
const debounce = (fn, wait = 200) => {
  let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), wait); };
};

function OTPWithDebouncedCheck() {
  const [tip, setTip] = useState('');
  const debouncedCheck = useMemo(() => debounce(async (val) => {
    if (!val) return;
    const ok = await api.precheck(val); // 轻量接口
    setTip(ok ? '' : '验证码格式异常或已过期提示');
  }, 250), []);

  return (
    <div>
      <OTPInput
        length={6}
        type="number"
        onChange={(val) => {
          debouncedCheck(val);
        }}
        onComplete={(val) => {/* 提交校验 */}}
      />
      {tip ? <div aria-live="polite">{tip}</div> : null}
    </div>
  );
}
```

## 注意事项
- 使用限制
  - length 应与后端约定保持一致；跨端（Web/移动）需统一位数与校验规则。
  - 粘贴仅接受可见 ASCII 数字与常见全角数字；超长截断，不足不触发完成回调。
  - mask 仅影响展示，不应改变 onChange/onComplete 传出的实际值。
- 兼容性说明
  - 数字键盘：在 Web 实现中，为保证移动端数字键盘可用且保留前导零，应确保实现方案不会丢失前导零；如使用原生 number 类型可能导致前导零被省略，需谨慎评估。
  - 读屏器：应提供分组与错误提示（见无障碍）。在低版本读屏器上，完成提示可通过 aria-live polite 提示补偿。
- 性能考虑
  - 受控渲染：内部更新应尽量局部化，避免每次输入全量重渲染。
  - 输入防抖：将频繁的网络校验逻辑放入 onChange 的防抖中；将最终提交放入 onComplete，可减少请求次数。
  - 粘贴优化：对整串粘贴的解析应一次性写入，避免逐格触发多次回调。

## 无障碍
- 分组与标签
  - 根容器应使用 role="group" 并配有清晰可见的标签文本（例如“验证码”）；若通过可见标签标注，可通过 aria-labelledby 关联。
- 读屏提示
  - 聚焦时提示“请输入共 N 位验证码”；完成时通过 aria-live polite 提示“已输入 N 位验证码”或等效文案。
- 错误与描述
  - 错误态应设置 aria-invalid（适用于输入单元）或通过 aria-describedby 与错误信息绑定，使读屏器可感知。
- 键盘可达性
  - 焦点应明确可见；Tab 可进入组件，Shift+Tab 可离开组件；删除与粘贴行为对键盘与读屏一致可用。

## 相关组件
- Input/TextField（基础输入）
- FormField（表单校验与错误呈现）
- Button（提交/下一步）
- Message/Toast（校验结果反馈）
- Countdown/ResendCode（重发验证码）