Skill: lwter/nexus-wage-widget (version 1.0.0)

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


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)