ClawHub

工作日薪看板 Pro

Other

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

Install

openclaw skills install nexus-wage-widget

工作日薪看板 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

新建指南（从零还原）

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

  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 获取精确代码。