snapshot: index.html @ 20260903_043639

由 index.html.bak.20260903_043639 重建的历史快照。
时间取自备份文件名（备份生成时刻，Asia/Shanghai）。
此提交只含 index.html，当时其余文件的状态没有对应备份，无法还原。

index.html

@@ -57,6 +57,21 @@
        Tailwind CDN 运行时注入的样式可能排在本文件之后，所以用 !important 压住单边颜色。 */
     .cut-edge { border-bottom: 2px dashed rgba(148, 163, 184, .55) !important; }
 
+    /* 深色看板落影：带品牌色调（靛蓝），比中性黑更贴合渐变底，
+       让下方浅色卡片读起来像"从看板底下滑出"而不是被硬线切开。 */
+    .board-shadow {
+      box-shadow: 0 6px 16px -6px rgba(49, 46, 129, .38),
+                  0 2px 6px -2px rgba(30, 41, 59, .16);
+    }
+
+    /* 空状态容器：极浅底 + 虚线描边，暗示"这里等着被填上"，
+       比一行灰字更像一个可以点进去的坑位。 */
+    .empty-state {
+      border: 1.5px dashed #E2E8F0;   /* slate-200 */
+      border-radius: 14px;
+      background: #FBFCFE;
+    }
+
     /* 半透明胶囊标签（挂在深色看板上） */
     .pill {
       display: inline-flex; align-items: center; gap: 4px;
@@ -114,7 +129,7 @@
 <div id="app" class="max-w-md mx-auto min-h-screen bg-slate-50 flex flex-col shadow-xl relative">
 
   <!-- ===== 顶部资产看板 ===== -->
-  <header class="text-white px-5 pt-5 pb-5 rounded-b-3xl shadow-lg shrink-0 relative overflow-hidden"
+  <header class="text-white px-5 pt-5 pb-5 rounded-b-3xl board-shadow shrink-0 relative overflow-hidden"
     style="background-image: radial-gradient(125% 125% at 85% -10%, #6366F1 0%, rgba(99,102,241,0) 58%), linear-gradient(135deg, #1E293B 0%, #312E81 56%, #4F46E5 100%);">
     <!-- 月份切换（日历/汇总） -->
     <div v-if="tab !== 'settings'" class="flex justify-between items-center">
@@ -167,7 +182,7 @@
   <main class="flex-1 pb-24">
 
     <!-- ========== ① 日历打卡 ========== -->
-    <section v-show="tab === 'calendar'" class="p-4">
+    <section v-show="tab === 'calendar'" class="px-4 pt-5 pb-4">
       <div class="grid grid-cols-7 text-center text-[11px] font-semibold text-slate-400 mb-1.5">
         <span class="text-rose-400">日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span class="text-indigo-400">六</span>
       </div>
@@ -215,7 +230,7 @@
     </section>
 
     <!-- ========== ② 汇总 ========== -->
-    <section v-show="tab === 'summary'" class="px-4 py-4 space-y-3.5">
+    <section v-show="tab === 'summary'" class="px-4 pt-5 pb-4 space-y-3.5">
 
       <!-- 本月到账 -->
       <div class="card overflow-hidden">
@@ -315,14 +330,25 @@
           <div class="flex justify-between"><span>本月下半月工时 {{ fmt(monthStats.h2) }}h</span><span>{{ money(monthStats.h2 * settings.rate) }}</span></div>
           <div class="flex justify-between"><span>本月奖惩结算</span><span>{{ signed(monthStats.adjustNet) }}</span></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 计，差额可能顺延</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 class="card px-5 py-4">
         <p class="text-xs font-bold text-slate-700 mb-2 flex items-center gap-1.5"><svg class="ico text-[15px] text-indigo-600"><use href="#i-lightbulb" /></svg>诊断</p>
         <div class="space-y-1.5 text-[11px] leading-relaxed">
-          <p v-if="monthStats.workDays === 0" class="text-slate-400">本月还没有打卡记录。</p>
+          <!-- 空状态：虚线容器 + 淡色图标坑位，点一下就回日历页打卡，比干摆一行灰字有行动指引 -->
+          <div v-if="monthStats.workDays === 0" @click="tab = 'calendar'"
+            class="empty-state px-4 py-5 flex flex-col items-center gap-2 cursor-pointer active:scale-[.98] transition">
+            <span class="w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center">
+              <svg class="ico text-[20px] text-indigo-400"><use href="#i-notebook-pen" /></svg>
+            </span>
+            <p class="text-[11px] font-bold text-slate-500">本月还没有打卡记录</p>
+            <p class="text-[10px] text-slate-400 text-center leading-relaxed">点这里回日历，选中日期就能记下白班或夜班。<br />记清一天，这里就会算好预估与满勤进度。</p>
+            <span class="mt-0.5 inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-indigo-600 text-white text-[10px] font-bold">
+              <svg class="ico text-[12px]"><use href="#i-calendar-days" /></svg>去打卡
+            </span>
+          </div>
           <template v-else>
             <p v-if="monthStats.workDays < settings.fullDays" class="text-slate-600">
               距离满勤还差 <b class="text-slate-800">{{ settings.fullDays - monthStats.workDays }} 天</b>，达成可得满勤奖约 <b class="text-emerald-700">{{ money(monthStats.totalHours * settings.fullBonusPerHour) }}</b>（{{ nextLabel.month + 1 }}月{{ settings.payDayB }}号发）。
@@ -341,7 +367,7 @@
     </section>
 
     <!-- ========== ③ 设置 ========== -->
-    <section v-show="tab === 'settings'" class="px-4 py-4 space-y-3.5">
+    <section v-show="tab === 'settings'" class="px-4 pt-5 pb-4 space-y-3.5">
 
       <div class="card overflow-hidden">
         <p class="px-5 py-3 text-xs font-bold text-slate-700 bg-slate-50 border-b border-slate-100 flex items-center gap-1.5"><svg class="ico text-[15px] text-indigo-600"><use href="#i-coins" /></svg>薪酬规则</p>