@math-pro/elapsed-time

时间运算工具组件，支持三种计算模式：

• 经过时间：已知开始时间和结束时间，求经过了多长时间
• 开始时间：已知结束时间和经过时间，反推开始时间
• 结束时间：已知开始时间和经过时间，推算结束时间

安装

pnpm add @math-pro/elapsed-time

使用

import { ElapsedTime } from '@math-pro/elapsed-time'

export default function App() {
  return <ElapsedTime mode="elapsedTime" />
}

默认不会自动聚焦或弹出软键盘。需要挂载、切换 mode 和 reset 后回到第一个输入格时，显式传入 autoFocus：

<ElapsedTime
  mode="elapsedTime"
  autoFocus
  onInputHint={(message) => showToast(message)}
  onFieldErrorChange={(error) => {
    // error 为 null 表示当前字段错误已经修正或组件已经重置
    console.log(error)
  }}
/>

功能

• 竖式计算布局，视觉上对应加减运算过程
• 支持 24 小时制 和 12 小时制（含 AM/PM 选择）
• 逐格输入，自动跳格，支持跨行 Enter、方向键和退格键导航
• 实时校验，非法输入仅回滚当前按键并将焦点保留在错误格
• 切换模式或格式时自动重置输入

导出

组件

| 名称 | 说明 | |---|---| | ElapsedTime | 主组件；必须传 mode，可配置 autoFocus、onInputHint 和 onFieldErrorChange |

类型

| 名称 | 说明 | |---|---| | Mode | 计算模式：'elapsed' \| 'start' \| 'end' | | TimeFormat | 时间格式：'24h' \| '12h' | | Meridiem | 上下午：'am' \| 'pm' | | TimeValue | 时间值：{ hour, minute, meridiem? } | | TimeDigits | 四格输入状态：[string, string, string, string] | | TimeFieldState | 单个时间字段状态：{ digits, meridiem } | | ValidationResult | 校验结果：{ valid, error? } | | CalculationResult | 计算结果：{ value, error? } | | ElapsedTimeFieldError | 当前非法输入的位置、业务角色、错误种类与提示文本 |

计算规则

• 时间范围：00:00 — 24:00（含边界 24:00）
• 经过时间不允许跨天（最大 24:00）
• 12 小时制下，24:00 无法表示，结束时间恰好为 24:00 时会提示切换为 24 小时制
• 结束时间不能早于开始时间