openclaw/work-hours-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapshot: index.html @ 20260903_050157

Browse Source 
由 index.html.bak.20260903_050157 重建的历史快照。
时间取自备份文件名（备份生成时刻，Asia/Shanghai）。
此提交只含 index.html，当时其余文件的状态没有对应备份，无法还原。
This commit is contained in:
OpenClaw Agent
2026-09-03 05:01:57 +08:00
parent 2f668a62f3
commit d3f926cae6
1 changed files with 69 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+69 -43
View File
@@ -17,6 +17,14 @@
--neg-fg: #E11D48; /* 负向·玫瑰字 = rose-600 */ --neg-fg: #E11D48; /* 负向·玫瑰字 = rose-600 */
--page: #F8FAFC; /* 页面底色 = slate-50 */ --page: #F8FAFC; /* 页面底色 = slate-50 */
--line: #F1F5F9; /* 卡片描边 = slate-100 */ --line: #F1F5F9; /* 卡片描边 = slate-100 */
/* 圆角三级阶梯：外层容器 / 内嵌块 / 胶囊标签 */
--r-out: 16px;
--r-in: 10px;
--r-pill: 999px;
/* 统一描边与落影 */
--hair: 1px solid rgba(0, 0, 0, .06);
--lift: 0 4px 20px -2px rgba(0, 0, 0, .05);
} }
.no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar::-webkit-scrollbar { display: none; }
@@ -31,14 +39,32 @@
/* 等宽数字：账单上下对齐，数值刷新时不左右跳动 */ /* 等宽数字：账单上下对齐，数值刷新时不左右跳动 */
.font-mono-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .font-mono-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* 统一卡片：16px 圆角 + 极柔和弥散阴影 */ /* 统一卡片：外层 16px 圆角 + 一根发丝描边 + 大范围弥散落影。
落影用大 blur、小 alpha，读起来是「浮起来」而不是「加了一道灰边」。 */
.card { .card {
border-radius: 16px; border-radius: var(--r-out);
background: #ffffff; background: #ffffff;
border: 1px solid var(--line); border: var(--hair);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), 0 1px 2px -1px rgba(0, 0, 0, .05); box-shadow: var(--lift);
} }
/* 内嵌块（卡片里的小格子）：圆角收一档到 10px，形成外大内小的嵌套层级 */
.inset { border-radius: var(--r-in); }
/* 金额柔色徽章：正向薄荷、负向玫瑰、零值中性。
把符号和数字一起裹进底色里，靠色相表意，不再靠一个生硬的加减号。 */
.amt {
display: inline-flex; align-items: center;
padding: 2px 8px;
border-radius: var(--r-pill);
font-size: 11px; line-height: 1.45; font-weight: 700;
font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
white-space: nowrap;
}
.amt-pos { background: var(--pos-bg); color: var(--pos-fg); }
.amt-neg { background: var(--neg-bg); color: var(--neg-fg); }
.amt-zero { background: #F1F5F9; color: #94A3B8; }
/* Lucide 线性图标：尺寸由自身 font-size 决定（用 Tailwind text-· 类控制）， /* Lucide 线性图标：尺寸由自身 font-size 决定（用 Tailwind text-· 类控制），
避免和 Tailwind 的宽高工具类抢层叠顺序。 避免和 Tailwind 的宽高工具类抢层叠顺序。
注意：注释里不能出现星号加斜杠，否则会提前闭合注释、把下面整条规则吃掉。 */ 注意：注释里不能出现星号加斜杠，否则会提前闭合注释、把下面整条规则吃掉。 */
@@ -235,26 +261,26 @@
<!-- 本月到账 --> <!-- 本月到账 -->
<div class="card overflow-hidden"> <div class="card overflow-hidden">
<div class="px-5 py-3 border-b border-slate-100 flex items-center justify-between"> <div class="px-5 py-3 border-b border-slate-100 flex items-center justify-between">
<span class="text-xs font-bold text-slate-700 flex items-center gap-1.5"><svg class="ico text-[15px] text-indigo-600"><use href="#i-wallet" /></svg>本月到账</span> <span class="text-[13px] font-bold text-slate-800 flex items-center gap-1.5"><svg class="ico text-[15px] text-indigo-600"><use href="#i-wallet" /></svg>本月到账</span>
<span class="text-[10px] text-slate-400">时薪 {{ settings.rate }} 元/h</span> <span class="text-[10px] font-normal text-slate-400 font-mono-num">时薪 {{ settings.rate }} 元/h</span>
</div> </div>
<div class="divide-y divide-slate-100"> <div class="divide-y divide-slate-100">
<div class="flex items-center justify-between px-5 py-3.5"> <div class="flex items-center justify-between px-5 py-3.5">
<div class="min-w-0 pr-2"> <div class="min-w-0 pr-2">
<p class="text-xs font-bold text-slate-700">{{ currentMonth + 1 }}月{{ settings.payDayB }}日</p> <p class="text-xs font-semibold text-slate-700">{{ currentMonth + 1 }}月{{ settings.payDayB }}日</p>
<p class="text-[10px] text-slate-400 mt-0.5">{{ prevLabel.month + 1 }}月下半月 {{ fmt(prevStats.h2) }}h + 奖惩 {{ signed(prevStats.adjustNet) }}</p> <p class="text-[10px] font-normal text-slate-400 mt-0.5">{{ prevLabel.month + 1 }}月下半月 {{ fmt(prevStats.h2) }}h + 奖惩 {{ signed(prevStats.adjustNet) }}</p>
</div> </div>
<span class="text-base font-black text-slate-800 shrink-0">{{ money(payoutThisB) }}</span> <span class="text-[17px] font-bold text-slate-800 shrink-0 font-mono-num">{{ money(payoutThisB) }}</span>
</div> </div>
<div class="flex items-center justify-between px-5 py-3.5"> <div class="flex items-center justify-between px-5 py-3.5">
<div class="min-w-0 pr-2"> <div class="min-w-0 pr-2">
<p class="text-xs font-bold text-slate-700">{{ currentMonth + 1 }}月{{ settings.payDayA }}日</p> <p class="text-xs font-semibold text-slate-700">{{ currentMonth + 1 }}月{{ settings.payDayA }}日</p>
<p class="text-[10px] text-slate-400 mt-0.5">本月上半月 {{ fmt(monthStats.h1) }}h · 纯工时</p> <p class="text-[10px] font-normal text-slate-400 mt-0.5">本月上半月 {{ fmt(monthStats.h1) }}h · 纯工时</p>
</div> </div>
<span class="text-base font-black text-slate-800 shrink-0">{{ money(payoutThisA) }}</span> <span class="text-[17px] font-bold text-slate-800 shrink-0 font-mono-num">{{ money(payoutThisA) }}</span>
</div> </div>
<div class="flex items-center justify-between px-5 py-3 bg-slate-50"> <div class="flex items-center justify-between px-5 py-3 bg-slate-50">
<span class="text-xs font-bold text-slate-500">本月现金流合计</span> <span class="text-xs font-semibold text-slate-500">本月现金流合计</span>
<span class="text-lg font-bold text-indigo-600 font-mono-num">{{ money(payoutThisB + payoutThisA) }}</span> <span class="text-lg font-bold text-indigo-600 font-mono-num">{{ money(payoutThisB + payoutThisA) }}</span>
</div> </div>
</div> </div>
@@ -262,60 +288,60 @@
<!-- 本月工时 --> <!-- 本月工时 -->
<div class="card px-5 py-4"> <div class="card px-5 py-4">
<p class="text-xs font-bold text-slate-700 mb-3 flex items-center gap-1.5"><svg class="ico text-[15px] text-indigo-600"><use href="#i-clock" /></svg>本月工时</p> <p class="text-[13px] font-bold text-slate-800 mb-3 flex items-center gap-1.5"><svg class="ico text-[15px] text-indigo-600"><use href="#i-clock" /></svg>本月工时</p>
<div class="grid grid-cols-2 gap-2 mb-3"> <div class="grid grid-cols-2 gap-2 mb-3">
<div class="bg-sky-50/70 rounded-xl p-2.5 border border-sky-100"> <div class="inset bg-sky-50/70 p-2.5 border border-sky-100">
<p class="text-[10px] text-sky-700/80">上半月 1–{{ settings.cutoff }}日</p> <p class="text-[10px] font-normal text-sky-700/80">上半月 1–{{ settings.cutoff }}日</p>
<p class="text-sm font-bold text-sky-700 mt-0.5 font-mono-num">{{ fmt(monthStats.h1) }}h</p> <p class="text-[15px] font-bold text-sky-700 mt-0.5 font-mono-num">{{ fmt(monthStats.h1) }}h</p>
<p class="text-[10px] text-slate-400">{{ money(monthStats.h1 * settings.rate) }}</p> <p class="text-[10px] font-normal text-slate-400 font-mono-num">{{ money(monthStats.h1 * settings.rate) }}</p>
</div> </div>
<div class="bg-violet-50/60 rounded-xl p-2.5 border border-violet-100/70"> <div class="inset bg-violet-50/60 p-2.5 border border-violet-100/70">
<p class="text-[10px] text-violet-700/70">下半月 {{ settings.cutoff + 1 }}日–月底</p> <p class="text-[10px] font-normal text-violet-700/70">下半月 {{ settings.cutoff + 1 }}日–月底</p>
<p class="text-sm font-black text-violet-700 mt-0.5">{{ fmt(monthStats.h2) }}h</p> <p class="text-[15px] font-bold text-violet-700 mt-0.5 font-mono-num">{{ fmt(monthStats.h2) }}h</p>
<p class="text-[10px] text-slate-400">{{ money(monthStats.h2 * settings.rate) }}</p> <p class="text-[10px] font-normal text-slate-400 font-mono-num">{{ money(monthStats.h2 * settings.rate) }}</p>
</div> </div>
</div> </div>
<div class="space-y-1.5 text-xs"> <div class="space-y-1.5 text-xs">
<div class="flex justify-between"><span class="text-slate-500">出勤天数</span><span class="font-bold text-slate-700">{{ monthStats.workDays }} 天（白 {{ monthStats.dayShifts }} / 夜 {{ monthStats.nightShifts }}）</span></div> <div class="flex justify-between"><span class="text-slate-500">出勤天数</span><span class="font-semibold text-slate-700 font-mono-num">{{ monthStats.workDays }} 天（白 {{ monthStats.dayShifts }} / 夜 {{ monthStats.nightShifts }}）</span></div>
<div class="flex justify-between"><span class="text-slate-500">休息 / 请假</span><span class="font-bold text-slate-700">{{ monthStats.restDays }} / {{ monthStats.leaveDays }} 天</span></div> <div class="flex justify-between"><span class="text-slate-500">休息 / 请假</span><span class="font-semibold text-slate-700 font-mono-num">{{ monthStats.restDays }} / {{ monthStats.leaveDays }} 天</span></div>
<div class="flex justify-between pt-1.5 border-t border-slate-100"><span class="text-slate-500">工时收入合计</span><span class="font-black text-slate-800">{{ money(monthStats.basePay) }}</span></div> <div class="flex justify-between pt-2 border-t border-slate-100"><span class="font-semibold text-slate-600">工时收入合计</span><span class="font-bold text-slate-800 font-mono-num">{{ money(monthStats.basePay) }}</span></div>
</div> </div>
</div> </div>
<!-- 本月奖惩（挂账） --> <!-- 本月奖惩（挂账） -->
<div class="card px-5 py-4"> <div class="card px-5 py-4">
<div class="flex items-center justify-between mb-1"> <div class="flex items-center justify-between mb-1">
<p class="text-xs font-bold text-slate-700 flex items-center gap-1.5"><svg class="ico text-[15px] text-indigo-600"><use href="#i-award" /></svg>本月奖惩</p> <p class="text-[13px] font-bold text-slate-800 flex items-center gap-1.5"><svg class="ico text-[15px] text-indigo-600"><use href="#i-award" /></svg>本月奖惩</p>
<span class="text-[10px] font-bold text-amber-700 bg-amber-100 px-1.5 py-0.5 rounded">次月{{ settings.payDayB }}号结算</span> <span class="text-[10px] font-semibold text-amber-700 bg-amber-100 px-2 py-0.5 rounded-full">次月{{ settings.payDayB }}号结算</span>
</div> </div>
<p class="text-[10px] text-slate-400 mb-2.5">以下金额不计入当月工资</p> <p class="text-[10px] font-normal text-slate-400 mb-2.5">以下金额不计入当月工资</p>
<div class="space-y-1.5 text-xs"> <div class="space-y-1.5 text-xs">
<div class="flex justify-between"> <div class="flex justify-between items-center">
<span class="text-slate-500">满勤奖<span class="text-slate-400">{{ monthStats.workDays >= settings.fullDays ? '（' + fmt(monthStats.totalHours) + 'h×' + settings.fullBonusPerHour + '）' : '（未达' + settings.fullDays + '天）' }}</span></span> <span class="text-slate-500">满勤奖<span class="text-slate-400">{{ monthStats.workDays >= settings.fullDays ? '（' + fmt(monthStats.totalHours) + 'h×' + settings.fullBonusPerHour + '）' : '（未达' + settings.fullDays + '天）' }}</span></span>
<span class="font-bold" :class="monthStats.fullBonus > 0 ? 'text-emerald-600' : 'text-slate-400'">{{ monthStats.fullBonus > 0 ? '+' + money(monthStats.fullBonus) : '¥0' }}</span> <span class="amt" :class="monthStats.fullBonus > 0 ? 'amt-pos' : 'amt-zero'">{{ monthStats.fullBonus > 0 ? '+' + money(monthStats.fullBonus) : '¥0' }}</span>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between items-center">
<span class="text-slate-500">查获奖励<span class="text-slate-400">（{{ monthStats.foundCount }}件）</span></span> <span class="text-slate-500">查获奖励<span class="text-slate-400">（{{ monthStats.foundCount }}件）</span></span>
<span class="font-bold" :class="monthStats.foundBonus > 0 ? 'text-emerald-600' : 'text-slate-400'">{{ monthStats.foundBonus > 0 ? '+' + money(monthStats.foundBonus) : '¥0' }}</span> <span class="amt" :class="monthStats.foundBonus > 0 ? 'amt-pos' : 'amt-zero'">{{ monthStats.foundBonus > 0 ? '+' + money(monthStats.foundBonus) : '¥0' }}</span>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between items-center">
<span class="text-slate-500">漏查处罚<span class="text-slate-400">（{{ monthStats.missedCount }}件）</span></span> <span class="text-slate-500">漏查处罚<span class="text-slate-400">（{{ monthStats.missedCount }}件）</span></span>
<span class="font-bold" :class="monthStats.missedPenalty > 0 ? 'text-rose-600' : 'text-slate-400'">{{ monthStats.missedPenalty > 0 ? '-' + money(monthStats.missedPenalty) : '¥0' }}</span> <span class="amt" :class="monthStats.missedPenalty > 0 ? 'amt-neg' : 'amt-zero'">{{ monthStats.missedPenalty > 0 ? '-' + money(monthStats.missedPenalty) : '¥0' }}</span>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between items-center">
<span class="text-slate-500">其他扣款</span> <span class="text-slate-500">其他扣款</span>
<span class="font-bold" :class="monthStats.otherPenalties > 0 ? 'text-rose-600' : 'text-slate-400'">{{ monthStats.otherPenalties > 0 ? '-' + money(monthStats.otherPenalties) : '¥0' }}</span> <span class="amt" :class="monthStats.otherPenalties > 0 ? 'amt-neg' : 'amt-zero'">{{ monthStats.otherPenalties > 0 ? '-' + money(monthStats.otherPenalties) : '¥0' }}</span>
</div> </div>
<div class="flex justify-between pt-1.5 border-t border-slate-100"> <div class="flex justify-between items-center pt-2 border-t border-slate-100">
<span class="text-slate-500">奖惩净额</span> <span class="font-semibold text-slate-600">奖惩净额</span>
<span class="font-black" :class="monthStats.adjustNet >= 0 ? 'text-emerald-700' : 'text-rose-700'">{{ signed(monthStats.adjustNet) }}</span> <span class="amt text-[12px]" :class="monthStats.adjustNet > 0 ? 'amt-pos' : (monthStats.adjustNet < 0 ? 'amt-neg' : 'amt-zero')">{{ signed(monthStats.adjustNet) }}</span>
</div> </div>
</div> </div>
<div v-if="penaltyDetails.length" class="mt-3 pt-2.5 border-t border-slate-100 space-y-1"> <div v-if="penaltyDetails.length" class="mt-3 pt-2.5 border-t border-slate-100 space-y-1">
<p class="text-[10px] font-bold text-slate-400 mb-1">处罚明细</p> <p class="text-[10px] font-bold text-slate-400 mb-1">处罚明细</p>
<div v-for="d in penaltyDetails" :key="d.day" class="flex justify-between text-[11px]"> <div v-for="d in penaltyDetails" :key="d.day" class="flex justify-between items-center text-[11px]">
<span class="text-slate-500 truncate pr-2">{{ d.day }}日 {{ d.reason }}</span> <span class="text-slate-500 truncate pr-2">{{ d.day }}日 {{ d.reason }}</span>
<span class="text-rose-600 font-bold shrink-0">-{{ money(d.amount) }}</span> <span class="amt amt-neg shrink-0">-{{ money(d.amount) }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -327,8 +353,8 @@
<span class="text-lg font-black text-amber-700">{{ money(payoutNextB) }}</span> <span class="text-lg font-black text-amber-700">{{ money(payoutNextB) }}</span>
</div> </div>
<div class="space-y-1 text-[11px] text-amber-800/80"> <div class="space-y-1 text-[11px] text-amber-800/80">
<div class="flex justify-between"><span>本月下半月工时 {{ fmt(monthStats.h2) }}h</span><span>{{ money(monthStats.h2 * settings.rate) }}</span></div> <div class="flex justify-between items-center"><span>本月下半月工时 {{ fmt(monthStats.h2) }}h</span><span class="font-mono-num font-semibold">{{ money(monthStats.h2 * settings.rate) }}</span></div>
<div class="flex justify-between"><span>本月奖惩结算</span><span>{{ signed(monthStats.adjustNet) }}</span></div> <div class="flex justify-between items-center"><span>本月奖惩结算</span><span class="amt" :class="monthStats.adjustNet > 0 ? 'amt-pos' : (monthStats.adjustNet < 0 ? 'amt-neg' : 'amt-zero')">{{ signed(monthStats.adjustNet) }}</span></div>
</div> </div>
<p v-if="monthStats.h2 * settings.rate + monthStats.adjustNet < 0" class="mt-2 text-[10px] text-rose-600 font-bold flex items-start gap-1"><svg class="ico text-[13px] mt-px"><use href="#i-triangle-alert" /></svg><span>处罚已超过下半月工时收入，实发按 ¥0 计，差额可能顺延</span></p> <p v-if="monthStats.h2 * settings.rate + monthStats.adjustNet < 0" class="mt-2 text-[10px] text-rose-600 font-bold flex items-start gap-1"><svg class="ico text-[13px] mt-px"><use href="#i-triangle-alert" /></svg><span>处罚已超过下半月工时收入，实发按 ¥0 计，差额可能顺延</span></p>
</div> </div>