跳到主要内容

20-20-20 护眼助手

· 阅读需 1 分钟
Bowen Zhang
Bowen Zhang
本文作者

基于 React + TypeScript + Capacitor 8 的 Android 护眼提醒应用，遵循 20-20-20 护眼法则：每 20 分钟提醒用户远眺 20 英尺外 20 秒。

功能​

  • 专注计时 — 倒计时模式（默认 20 分钟），时间到自动切换休息阶段
  • 休息提醒 — 20 秒休息倒计时，通过系统通知提醒远眺
  • 可调时长 — 支持自定义专注时长（分钟 + 秒），设置存储于本地
  • 后台校准 — 应用切到后台后自动校准已流逝时间
  • 周期统计 — 显示已完成专注周期数

技术栈​

层技术
框架React 19 + TypeScript 6
构建Vite 8 + @vitejs/plugin-react
样式Tailwind CSS 4
移动端壳Capacitor 8（Android）
原生能力LocalNotifications、App lifecycle
代码检查oxlint

开发​

npm install
npm run dev            # 开发服务器（http://localhost:4000）
npm run build          # 生产构建
npm run lint           # oxlint 检查
npm run preview        # 预览构建产物

Android 构建​

npm run run:android             # 热重载运行到 Android 设备
npm run build:android           # 构建 release APK
npm run build:android:debug     # 构建 debug APK

Release APK 输出：android/app/build/outputs/apk/release/EyeCare202020-v{version}-release.apk

签名配置通过项目根目录 keystore.properties 文件（不纳入版本控制）。

项目结构​

src/
├── main.tsx        # 入口，挂载 React 应用 + 初始化 VConsole 调试面板
├── App.tsx         # 主计时器组件（SVG 环形进度条、阶段切换、后台恢复）
├── Settings.tsx    # 设置页面（专注时长调节、localStorage 持久化）
└── index.css       # Tailwind CSS 入口

android/            # Capacitor Android 原生项目

许可​

MIT