⏳ 倒计时

自定义时长倒计时，支持进度环展示和完成通知

倒计时组件帮助你记录和跟踪自定义时长的倒计时，以圆形进度环直观展示剩余时间。

🔧 基本使用

• 在组件面板中拖入倒计时组件
• 点击圆内时间区域可直接编辑时长（时、分、秒），支持输入和上下微调
• 点击 ▶ 开始 按钮启动倒计时
• 倒计时结束后会发送浏览器通知提醒，并在圆内闪烁 2 秒后自动重置

🖼️ 效果示意

        ┌─────────────────┐
        │                 │
        │    Countdown    │
        │                 │
        │    ┌───────┐    │
        │   ╱         ╲   │
        │  │  00:05   │  │ 
        │  │   :30    │  │ 
        │  │          │  │ 
        │   ╲         ╱   │
        │    └───────┘    │
        │   ▶ Start  ■    │
        │                 │
        └─────────────────┘

⚡ 功能特性

• 内联编辑：直接点击时间显示进入编辑模式，通过输入框或上下箭头调整时长
• 精确计时：基于时间戳差值计算，不受标签页休眠节流影响（标签页重新可见时自动补算）
• 运行时持久化：倒计时状态保存在本地存储中，刷新页面不会丢失进度
• 默认时长：可预设默认时长，重置后自动回到该值
• 完成通知：倒计时结束自动发送浏览器通知，标签页失去焦点时也能收到提醒

⚙️ 设置项

设置项	类型	说明
默认时长	时/分/秒输入	预设倒计时时长，重置后回到此值
显示小时	开关	时长超过 1 小时时是否显示小时位
标签文字	文本输入	圆环上方自定义文字（如「专注」「休息」）
进度环颜色	颜色选择器	进度弧线的颜色，浅色/深色独立配置
轨道颜色	颜色选择器	底色轨道的颜色
环宽度	滑块	进度环的 stroke 宽度
字体	字体选择	时间数字字体
字体大小	滑块	时间数字字号

🎨 样式

• 圆形进度环设计，进度弧度和轨道颜色可自定义
• 可自定义进度环宽度（strokeWidth）
• 支持显示/隐藏小时位
• 可添加自定义标签文字显示在圆环上方
• 毛玻璃背景圆效果，支持阴影和边框
• 浅色/深色主题独立配置