工作日计算器

"算工作日，不算摸鱼" 🐟

#📋 项目概览

工作日计算器是一个专为现代打工人设计的智能工作日计算工具，支持多种工作制模式，提供精准的工作日计算和可视化展示功能。项目采用现代化技术栈构建，支持多语言国际化，已成功部署至生产环境并获得良好的用户反馈。

▸项目名称: 工作日计算器 (Workday Calculator)
▸项目口号: "算工作日，不算摸鱼"
▸在线地址: [部署在 Vercel 平台]
▸开发周期: 3天 MVP → 持续迭代优化
▸技术栈: Next.js 15 + React 19 + TypeScript + Tailwind CSS

#🎯 项目背景

市场需求分析

在现代职场环境中，工作制度日趋多样化：

▸传统做五休二: 仍是主流，但需要考虑法定节假日
▸做六休一: 部分行业和公司采用
▸大小周制度: 互联网公司常见，计算复杂
▸弹性工作制: 自定义工作日安排

现有工具存在的痛点：

▸功能单一: 大多数日历工具只支持标准工作制
▸计算不准: 无法准确处理中国法定节假日和调休
▸用户体验差: 界面陈旧，缺乏现代化设计
▸缺乏情绪价值: 纯工具性，缺少趣味性和情感共鸣

目标用户群体

▸
大小周/弹性工作制打工人 (核心用户)
- ▸需要精确计算复杂工作制下的工作日
- ▸关注工作生活平衡，需要"破防倒计时"等情绪价值
▸
HR和行政人员 (专业用户)
- ▸需要计算考勤、排班、薪资结算
- ▸要求计算准确性和专业性
▸
群聊斗图党 (娱乐用户)
- ▸使用梗图生成功能制作表情包
- ▸分享工作日计算结果到社交媒体

#⚡ 核心功能

🗓️ 多种工作制支持

预置工作制模板

▸
做五休二 (5天工作2天休息)
- ▸标准周一到周五工作制
- ▸自动识别周末和法定节假日
▸
做六休一 (6天工作1天休息)
- ▸周一到周六工作，周日休息
- ▸适用于零售、服务业等行业
▸
大小周 (双周循环工作制)
- ▸第一周：周一到周五工作 (5天)
- ▸第二周：周一到周六工作 (6天)
- ▸支持"本周六是否为工作日"的智能判断
▸
自定义工作制
- ▸日历可视化选择工作日
- ▸支持CSV文件批量导入
- ▸灵活适应各种特殊工作安排

智能节假日识别

▸中国法定节假日: 自动识别2024-2025年所有法定节假日
▸调休安排: 准确处理节假日调休的工作日安排
▸自定义假期: 支持添加公司内部假期、个人请假等

📊 智能计算引擎

核心算法特性

▸精确计算: 基于日期库 date-fns 4.1.0 确保计算准确性
▸实时更新: 支持日期范围变更后的实时重新计算
▸边界处理: 正确处理跨月、跨年的日期计算
▸性能优化: 大数据量计算优化，支持长时间范围计算

计算结果展示

▸工作日统计: 精确的工作日和休息日数量
▸工作周数: 按标准工作周计算的周数统计
▸进度指示: 当前月份和周的工作进度百分比
▸下次假期: 智能预测下一个休息日或假期

🎨 趣味功能

梗图生成器

▸
6套主题皮肤:
- ▸赛博朋克风格
- ▸简约商务风格
- ▸可爱卡通风格
- ▸复古怀旧风格
- ▸科技未来风格
- ▸温馨治愈风格
▸一键生成: 自动生成包含计算结果的分享图片
▸高清导出: 支持PNG格式高清图片下载

破防倒计时

▸实时倒计时: 距离下次休息日的精确时间
▸进度条显示: 可视化展示工作进度
▸情绪共鸣: "还有X天X小时X分钟"的贴心提醒

毒鸡汤彩蛋

▸随机触发: 每3次计算随机弹出1条
▸内容丰富: 包含摸鱼技巧、职场吐槽、励志鸡汤等
▸情绪价值: 为枯燥的工作计算增添趣味性

🔗 分享功能

专属海报生成

▸个性化设计: 包含用户计算结果的定制海报
▸二维码集成: 自动生成短链二维码，方便分享传播
▸社交优化: 适配微信、微博等主流社交平台尺寸

短链分享系统

▸8位短码: 基于 nanoid 生成的唯一标识
▸参数保存: 自动保存计算参数，支持一键复现
▸访问统计: 跟踪分享链接的访问数据

#🛠️ 技术实现

前端架构

核心框架

▸
Next.js 15.2.4:
- ▸采用 App Router 架构
- ▸支持 SSR/SSG 混合渲染
- ▸自动代码分割和性能优化
- ▸内置 API Routes 支持
▸
React 19:
- ▸最新的 React 版本
- ▸支持并发特性和 Suspense
- ▸优化的 Hooks 性能
▸
TypeScript 5:
- ▸全项目类型安全
- ▸严格的类型检查配置
- ▸优秀的开发体验和代码提示

UI 组件系统

▸
Tailwind CSS 4.1.9:
- ▸原子化 CSS 框架
- ▸响应式设计支持
- ▸深色/浅色主题切换
- ▸自定义设计系统
▸
Radix UI:
- ▸无障碍访问支持
- ▸高质量的基础组件
- ▸完全可定制的样式
▸
Lucide React:
- ▸现代化图标库
- ▸一致的视觉风格
- ▸轻量级 SVG 图标

状态管理

▸
Zustand:
- ▸轻量级状态管理库
- ▸简洁的 API 设计
- ▸TypeScript 友好
- ▸支持持久化存储
▸
React Hook Form:
- ▸高性能表单处理
- ▸最小化重渲染
- ▸内置验证支持
▸
Zod 3.25.67:
- ▸运行时类型验证
- ▸与 TypeScript 完美集成
- ▸详细的错误信息

核心算法实现

工作日计算引擎 (`calculation-engine.ts`)

export class WorkDayCalculator {
  // 核心计算逻辑
  calculate(): CalculationResult {
    // 1. 日期范围遍历
    // 2. 工作制模式匹配
    // 3. 节假日规则应用
    // 4. 自定义规则处理
    // 5. 统计结果生成
  }
  
  // 大小周智能判断
  private createBigSmallScheduleWithSaturday(isSaturdayWorkDay: boolean) {
    // 根据当前周六状态动态生成大小周模式
  }
}

工作制模式系统 (`work-schedules.ts`)

▸模式定义: 使用二进制字符串定义工作模式
▸循环计算: 支持周循环和双周循环
▸动态生成: 根据用户选择动态生成工作制

国际化系统 (`i18n.ts`)

▸12种语言支持: 中文、英文、日文、韩文等
▸动态路由: /[locale]/ 路由结构
▸SEO优化: 每种语言独立的 meta 信息

后端服务

API 设计

▸RESTful API: 标准的 REST 接口设计
▸类型安全: 请求/响应的完整类型定义
▸错误处理: 统一的错误响应格式
▸性能优化: 计算结果缓存机制

数据存储

▸
Supabase:
- ▸PostgreSQL 数据库
- ▸实时数据同步
- ▸用户认证系统
- ▸文件存储服务

工作日计算器

技术栈

工作日计算器

#📋 项目概览

#🎯 项目背景

市场需求分析

目标用户群体

#⚡ 核心功能

🗓️ 多种工作制支持

预置工作制模板

智能节假日识别

📊 智能计算引擎

核心算法特性

计算结果展示

🎨 趣味功能

梗图生成器

破防倒计时

毒鸡汤彩蛋

🔗 分享功能

专属海报生成

短链分享系统

#🛠️ 技术实现

前端架构

核心框架

UI 组件系统

状态管理

核心算法实现

工作日计算引擎 (`calculation-engine.ts`)

工作制模式系统 (`work-schedules.ts`)

国际化系统 (`i18n.ts`)

后端服务

API 设计

数据存储

部署架构

Vercel 平台部署

性能优化

工作日计算器

技术栈

工作日计算器

#📋 项目概览

#🎯 项目背景

市场需求分析

目标用户群体

#⚡ 核心功能

🗓️ 多种工作制支持

预置工作制模板

智能节假日识别

📊 智能计算引擎

核心算法特性

计算结果展示

🎨 趣味功能

梗图生成器

破防倒计时

毒鸡汤彩蛋

🔗 分享功能

专属海报生成

短链分享系统

#🛠️ 技术实现

前端架构

核心框架

UI 组件系统

状态管理

核心算法实现

工作日计算引擎 (calculation-engine.ts)

工作制模式系统 (work-schedules.ts)

国际化系统 (i18n.ts)

后端服务

API 设计

数据存储

部署架构

Vercel 平台部署

性能优化

工作日计算引擎 (`calculation-engine.ts`)

工作制模式系统 (`work-schedules.ts`)

国际化系统 (`i18n.ts`)