Skip to content

README_CN.md

Latest commit

 

History

History
167 lines (121 loc) · 4.66 KB

README_CN.md

File metadata and controls

167 lines (121 loc) · 4.66 KB

English | 中文简体

TimeFlow 倒计时专注应用

TimeFlow 是一个美观实用的倒计时应用，帮助您专注于重要目标和时间节点。应用提供多种倒计时卡片，包括重要节日、考试以及季节变化，并配有实时时间统计功能，让您更好地感知时间流逝。

在线演示

演示站点：https://countdown.gts.us.kg/ 移动端适配不是很好，桌面端体验更佳。

功能特色

🎯 多样化倒计时

  • 重要事件倒计时：内置中考、高考、春节、元旦、国庆节等多个重要事件
  • 季节变化倒计时：自动计算距离下一个季节的时间
  • 正计时支持：支持从指定日期开始的正向计时（如站点运行时间）
  • 实时时间统计：展示今日、本周、本月、本年的进度条和时间分布

🎨 高度可定制化界面

  • 背景设置：支持纯色背景和图片背景（可上传本地图片或使用默认背景）
  • 视觉效果：可调节毛玻璃模糊强度和卡片透明度
  • 配色方案：支持白色和黑色文字主题
  • 响应式设计：完美适配桌面端和移动端显示

🧩 灵活的卡片配置

  • 自定义描述信息：每个倒计时卡片可添加描述信息
  • 灵活布局：可自定义季节倒计时卡片在列表中的位置
  • 统一视觉风格：所有卡片采用一致的设计语言和交互动效

⚡ 实时更新

  • 所有倒计时精确到秒，实时更新
  • 时间统计每分钟自动刷新

快速开始

本地运行

  1. 克隆项目到本地：
git clone <repository-url>
cd TimeFlow
  1. 安装依赖：
npm install
  1. 启动开发服务器：
npm run dev
  1. 在浏览器中打开 http://localhost:3000 查看应用

构建生产版本

运行以下命令构建生产版本：

npm run build

构建完成后，所有静态文件将生成在 dist 目录中。

部署

您可以将 dist 目录中的文件部署到任何静态网站托管服务，例如：

  • Vercel
  • Netlify
  • GitHub Pages
  • 自有服务器

使用指南

主界面

应用主界面包含三个主要区域：

  1. 事件倒计时卡片：显示各个重要事件的倒计时
  2. 季节倒计时卡片：显示距离下一个季节的时间
  3. 时间统计卡片：以进度条形式展示时间流逝情况

设置面板

点击右上角的设置按钮可以打开设置面板，您可以在此处：

  1. 背景设置

    • 选择背景类型（纯色或图片）
    • 选择预设背景图片或上传本地图片
    • 设置背景颜色（纯色模式下）

  2. 外观样式

    • 切换文字颜色（白色/黑色）
    • 调整毛玻璃模糊强度
    • 控制卡片透明度

所有设置会自动保存并在页面刷新后保持。

技术栈

  • React 19
  • TypeScript
  • Vite 6
  • Tailwind CSS
  • Lucide React Icons

浏览器兼容性

应用支持所有现代浏览器，包括：

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

开发

项目结构

TimeFlow/
├── components/          # React 组件
├── utils/               # 工具函数
├── public/              # 默认背景图片
├── dist/                # 生产构建输出
├── App.tsx             # 主应用组件
├── constants.tsx       # 应用常量配置
├── types.ts            # TypeScript 类型定义
├── vite.config.ts      # Vite 配置文件
└── index.html          # HTML 入口文件

添加新的倒计时事件

  1. 在 constants.tsx 文件的 TARGET_EVENTS 数组中添加新的事件对象
  2. 每个事件需要包含以下属性：
    • id: 唯一标识符
    • name: 事件名称
    • month: 月份（1-12）
    • day: 日期（1-31）
    • icon: 显示图标（来自 lucide-react）
    • type: 计时类型（'countdown' 倒计时 或 'countup' 正计时）
    • startYear: 正计时的起始年份（仅正计时需要）
    • description: 描述信息（可选）

自定义背景图片

  1. 将背景图片放入 public 目录
  2. 在设置面板中选择"默认背景"选项卡即可看到新添加的图片

移动端与桌面端不同背景

  1. 在 constants.tsx 中设置 APP_CONFIG.enableDifferentBackgrounds 为 true
  2. 设置 APP_CONFIG.mobileBgImage 为移动端专用背景图片路径

自定义季节卡片位置

在 constants.tsx 中设置 APP_CONFIG.seasonCardPosition：

  • 'first': 放在最前面
  • 'last': 放在最后面
  • 数字: 指定具体位置索引（从0开始）

许可证

MIT License

支持

如有问题或建议，请提交 issue 或联系开发者。