@math-pro/elapsed-time

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

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

安装

pnpm add @math-pro/elapsed-time

使用

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

export default function App() {
  return <ElapsedTime />
}

功能

• 竖式计算布局，视觉上对应加减运算过程
• 支持 24 小时制 和 12 小时制（含 AM/PM 选择）
• 逐格输入，自动跳格，支持键盘导航（方向键、退格键）
• 实时校验，输入有误时就地提示错误
• 切换模式或格式时自动重置输入

导出

组件

| 名称 | 说明 | |---|---| | ElapsedTime | 主组件，开箱即用，无需传入任何 props |

类型

| 名称 | 说明 | |---|---| | 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? } |

计算规则

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