工作日薪看板 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 对象）
{
theme, widgetType, salary, startTime, endTime, payday, glassOpacity, glassBlur,
getDailyData() { /* 计算 dailySalary, startSec, endSec, totalWorkSec, salaryPerSec */ }
}
- 月工作日数：21.75 天
- 已赚金额 = (当前秒数 - 上班秒数) × (日薪 / 总工作秒数)
实时更新循环
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
新建指南（从零还原）
如果需要在另一台机器重新创建：
- 创建单文件 HTML，CDN 用
fonts.loli.net - 7 个主题完整覆盖 18 个 CSS 变量
- 玻璃质感卡片结构：
.glass-card+.w-panel+ 环境光.ambient-light× 3 - 网格布局 strict 3×2（PC）/ 1 列（手机）
- 进度条水平排列，专注时刻面板在左侧
- Pomodoro IIFE 闭包实现，共享状态机
- 设置弹窗 + localStorage 持久化
requestAnimationFrame实时更新循环- 所有 font-size 用偶数
引用源文件：若用户询问细节，直接读取 references\daily_wage.html 获取精确代码。
