macOS 风格番茄计时器：设计与实现详解

概述

本文介绍一款采用 macOS 设计语言的网页版番茄计时器实现。该计时器完全遵循苹果的人机界面指南(HIG)，提供原汁原味的 macOS 使用体验，同时具备响应式设计和深色模式支持。

核心特性

原生 macOS UI 风格：
- 使用 San Francisco 系统字体
- 采用苹果系统配色方案
- 实现毛玻璃模糊背景效果
- 包含原生 SF Symbols 图标
完整番茄工作法功能：
- 可调节计时时长（5/10/15/25分钟）
- 开始/暂停/重置控制
- 计时结束提醒与音效
- 低时间预警（变色提示）
现代化技术实现：
- 纯前端 HTML/CSS/JavaScript 实现
- 响应式布局适配不同设备
- 支持系统的深色/浅色模式切换
- 使用 Web Audio API 生成提示音

技术实现解析

1. 界面设计

css 复制代码

:root {
    --system-blue: #007AFF;
    --system-green: #34C759;
    /* 其他系统颜色定义... */
}

@media (prefers-color-scheme: dark) {
    :root {
        --system-background: rgba(28, 28, 30, 0.8);
        /* 深色模式变量覆盖... */
    }
}

.container {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

关键设计要点：

使用 CSS 变量实现主题切换
backdrop-filter 实现苹果特色的毛玻璃效果
媒体查询自动适配系统外观偏好
圆角半径与间距遵循 macOS 设计规范

2. 计时器逻辑

javascript 复制代码

function updateDisplay() {
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  
    // 30秒以下变红色预警
    if (timeLeft <= 30) {
        timerDisplay.style.color = 'var(--system-red)';
    }
}

计时功能特点：

使用 setInterval 实现秒级更新
数字展示使用等宽字体特性 (font-variant-numeric: tabular-nums)
动态颜色变化增强时间感知
模块化设计便于功能扩展

运行界面：

3. 系统提示音效

javascript 复制代码

function playSystemSound() {
    const context = new AudioContext();
    const oscillator = context.createOscillator();
    // 创建三声短促提示音
    gainNode.gain.linearRampToValueAtTime(0.3, now + 0.1);
    gainNode.gain.linearRampToValueAtTime(0, now + 0.2);
    // ...重复三次
}

音效实现亮点：

纯代码生成，无需音频文件
模拟 macOS 系统提示音效
使用 Web Audio API 精确控制音高和时长
伴随视觉通知增强提醒效果

使用指南

基本操作：
- 选择所需时长（默认5分钟）
- 点击"开始"按钮启动计时
- 计时结束自动提醒
高级功能：
- 深色模式随系统自动切换
- 暂停后可从当前时间恢复
- 重置按钮恢复初始选择时长

扩展建议

添加计时历史记录功能
实现多阶段番茄钟（工作+休息循环）
增加浏览器通知API支持
添加任务完成统计功能

总结

这款采用 macOS 设计语言的番茄计时器展示了如何将系统原生设计规范应用于Web应用。通过精心设计的UI组件、流畅的交互体验和恰当的系统集成，为用户提供了接近原生应用的体验。项目代码结构清晰，便于进一步定制和功能扩展。