工作日薪看板 Pro

工作日薪看板 Pro — 实时工资计算 + 番茄钟专注的玻璃质感 HTML widget。 这是用户的个人生产力工具，存在于 references\daily_wage.html。 当用户提及"工作日薪"、"工资看板"、"daily_wage"、"番茄钟"、"专注时刻"、桌面 widget 或玻璃质感卡片时，必须使用本 skill。 本 skill 包含该文件的完整架构、视觉规范、交互逻辑和核心代码，任何 bot 都能据此准确还原。

工作日薪看板 Pro — 完整还原指南

本文件是 daily_wage.html 的权威参考。路径：references\daily_wage.html

文件概述

一个单文件 HTML+CSS+JS 桌面 widget，含：

• 实时工资计算：根据时间/月薪/工时实时计算今日已赚
• 番茄钟专注时刻：25 分钟倒计时，浏览器通知
• 7 种视觉主题：极客暗夜、爱马仕橙、总裁黑金、烂漫少女、东方木漏、极简白昼、赛博霓虹
• 两种布局：横向宽版（PC）和方形液态版（手机/小屏）
• 偏好设置：弹窗模态框，可调整月薪/工时/主题/透明度等，保存到 localStorage

核心规格参数

字体

• 中文：Noto Sans SC（fonts.loli.net CDN，不是 Google Fonts）
• 等宽：Source Code Pro
• 字体 px 值只能用偶数（如 12px、14px、24px、32px），不能用单数
• 该规则仅限 font-size，padding/margin/border 等不受限

视觉主题（7 个 data-theme）

每个主题通过 CSS 变量 --variant 覆盖：

1. dark — 默认，深紫渐变
2. hermes — 爱马仕橙金
3. girly — 粉红少女
4. business — 黑金奢华
5. zen — 蓝绿禅意
6. light — 极简白昼
7. cyber — 荧光赛博

每个主题覆盖 15 个 CSS 变量：--bg-grad, --glass-bg, --glass-border, --glass-highlight, --text-main, --text-sub, --accent-money, --accent-money-soft, --accent-focus, --accent-other, --panel-bg, --panel-hover, --ambient-1, --ambient-2, --ambient-3, --progress-shimmer, --shadow-soft, --shadow-strong

Glass Card 样式

• --glass-opacity: 0.4（默认），可设置，CSS 变量
• --glass-blur: 24px（默认），可设置
• 圆角 28px，多层 box-shadow（环境光 + 高光线）
• ::before 伪元素顶部边缘高光

面板（.w-panel）

• 圆角 20px，内边距 18px，overflow: hidden
• 悬停时轻微上移、边框显色、阴影加深

布局

宽屏 PC（.widget-wide，默认，>900px）

• max-width: 740px
• 3 列 2 行网格：
  • 时间（1/3, 跨 2 行）：等宽大字体 clamp(36px, 5.5vw, 48px)，冒号闪烁动画
  • 今日已赚（2/3, 第 1 行）：等宽绿色大字 clamp(40px, 6.5vw, 52px)，发光动画
  • 进度条（2/3, 第 2 行）：水平排列，左侧专注时刻面板 + 右侧进度条
  • 天气（3/3, 第 1 行）：竖排图标+温度，建议使用bot定时抓取当天天气 weather.json 给daily_wage.html调用
  • 发薪倒计时（3/3, 第 2 行）：竖排天数

手机/方形（.widget-square, ≤900px）

• max-width: 340px，竖排 flex
• 今日已赚大字 clamp(46px, 9vw, 60px)
• 2×2 网格按钮（发薪 + 专注时刻）
• 底部进度条，水平显示起止时间

响应式断点：单断点 900px。>900px = PC 版，≤900px = 手机版

专注时刻面板（Pomodoro）

宽屏版（id="focus-wide"）：

• 宽度：112px，内边距：12px
• 标题「专注时刻」：14px → 激活后 12px（仅 PC 模式缩小，手机模式标题不变）
• 倒计时数字：激活后 24px 等宽紫字 --accent-focus
• 子文本：未激活时「点击开始」12px

方形版（id="focus-sq"）：

• 倒计时数字：激活后 32px
• 未激活时图标 +「专注」文字

激活状态：.pom-active 类 → 边框 --accent-focus + 紫色光晕 box-shadow

交互逻辑（IIFE 闭包 var Pom）：

• toggle() → 启动/停止 25 分钟倒计时
• 激活时图标 ▶ → ⏸（svg 多边形 ↔ 矩形对），两端同时切换
• 每 200ms 刷新显示
• 到点时：浏览器 Notification + 标题栏闪烁 5 秒（🔔专注时间到！↔ 工作日薪看板）

设置弹窗（Modal）

• 点击右下角齿轮按钮打开
• 参数：展示组件（宽版/方形）、视觉主题、月薪、发薪日、上下班时间、透明度、模糊度
• 实时预览：切换主题即时生效
• 保存到 localStorage，键名前缀 widget_（如 widget_theme, widget_salary）

配置数据（Config 对象）

js

{
  theme, widgetType, salary, startTime, endTime, payday, glassOpacity, glassBlur,
  getDailyData() { /* 计算 dailySalary, startSec, endSec, totalWorkSec, salaryPerSec */ }
}

• 月工作日数：21.75 天
• 已赚金额 = (当前秒数 - 上班秒数) × (日薪 / 总工作秒数)

实时更新循环

js

function loop() {
  updateWidget();
  requestAnimationFrame(loop);
}

动画清单

• breathe / breathe2 — 环境光呼吸
• shimmer — 进度条流光
• pulse-dot — 工作状态指示灯脉冲
• colon-blink — 时间冒号闪烁
• money-glow — 金额发光
• float-btn — 设置按钮呼吸
• subtle-float — 微浮动
• gradient-shift — 渐变位移
• 尊重 prefers-reduced-motion: reduce

进度条

• 高度 6px，圆角 3px
• 填充渐变 --accent-other → --accent-money + 阴影
• 流光伪元素 ::after

代码风格约定

• JS 使用 IIFE 闭包模式，不使用 class / this
• 所有 CSS font-size px 值必须为偶数
• 文件位置：references\daily_wage.html
• CDN：fonts.loli.net（Google Fonts 国内镜像），不能用 fonts.googleapis.com

新建指南（从零还原）

如果需要在另一台机器重新创建：

1. 创建单文件 HTML，CDN 用 fonts.loli.net
2. 7 个主题完整覆盖 18 个 CSS 变量
3. 玻璃质感卡片结构：.glass-card + .w-panel + 环境光 .ambient-light × 3
4. 网格布局 strict 3×2（PC）/ 1 列（手机）
5. 进度条水平排列，专注时刻面板在左侧
6. Pomodoro IIFE 闭包实现，共享状态机
7. 设置弹窗 + localStorage 持久化
8. requestAnimationFrame 实时更新循环
9. 所有 font-size 用偶数

引用源文件：若用户询问细节，直接读取 references\daily_wage.html 获取精确代码。