rollcall-classroom-assets 1.0.4 → 1.0.6

package/dm-app.js

@@ -143,6 +143,14 @@ const lpPass = document.getElementById('lpPass');
 const lpFail = document.getElementById('lpFail');
 
 // --- 班级按钮（按当前账号任教班级动态生成） ---
+function obSessionBar() {   // 会话过期横幅：SW 喂了陈旧副本时，别让老师对着绿界面干点不动
+  if (document.getElementById('obSessionBar')) return;
+  const b = document.createElement('div');
+  b.id = 'obSessionBar';
+  b.style.cssText = 'position:fixed;top:0;left:0;right:0;z-index:9999;background:#8a2b0f;color:#fff;text-align:center;font-size:13px;padding:5px 10px;';
+  b.innerHTML = '登录已过期，保存不会生效 —— <a href="/login.html" style="color:#fff;text-decoration:underline">点此重新登录</a>';
+  (document.body || document.documentElement).appendChild(b);
+}
 function buildClassBtns() {
   classBar.querySelectorAll('.boot-tip').forEach(e => e.remove());   // 移除首屏「正在加载名单…」占位
   classBar.querySelectorAll('.class-btn.class-cls').forEach(b => b.remove());
@@ -1054,23 +1062,66 @@ function updateSyncIndicator() {
 }
 
 // 批量同步所有待处理记录
+// —— 攒批上报（2026-10-14 容量整改）——
+// 批量接口早就有了（record-qa-batch 一次收一整批），但每个 ✓/✗ 都**立刻**触发一次发送：
+// 一节 53 人的课 = 53 次跨境往返（实测单次 TTFB 0.8~1.5 秒），也是全站最容易省的请求量。
+// 现在：攒够 QA_FLUSH_N 条或等 QA_FLUSH_MS 毫秒发一批；切后台/关页面**立即冲刷**，
+// 绝不为了攒批把老师的点名结果留在 localStorage 里。服务端按 class+name+result+time 去重，
+// 所以冲刷后没读到响应（页面被冻结）也不要紧 —— 下次打开重发同一批，不会产生重复记录。
+const QA_FLUSH_N = 5, QA_FLUSH_MS = 3000;
+let qaFlushTimer = null, qaSending = false, qaDeferredFlush = false;
+function requestQASync() {
+  const n = getPendingQAs().length;
+  if (n === 0) return;
+  if (n >= QA_FLUSH_N) { flushQASync(); return; }
+  if (!qaFlushTimer) qaFlushTimer = setTimeout(() => { qaFlushTimer = null; flushQASync(); }, QA_FLUSH_MS);
+}
+function flushQASync() {
+  if (qaFlushTimer) { clearTimeout(qaFlushTimer); qaFlushTimer = null; }
+  if (qaSending) { qaDeferredFlush = true; return; }   // 记一下：上一批落下来时补发，别把这次请求吞了
+  syncPendingQAs();
+}
+// 切后台/关页面前冲刷。★ visibilitychange 挂在 **document** 上（规范里它在 document 触发，
+// 而且不冒泡）—— 挂在 window 上收不到，测试第一版就是这么漏掉的；pagehide 才在 window。
+// 走 flushQASync 而不是直接调 syncPendingQAs：上一批还在飞时后者会被发送闸挡掉，
+// 挡掉又不能不管 —— 这正是「切后台了却什么都没发出去」的那条路。
+try {
+  document.addEventListener('visibilitychange', () => {
+    if (!document.hidden) return;
+    if (getPendingQAs().length > 0) flushQASync();
+  }, { passive: true });
+} catch (e) { /* 老环境没有这个事件，不阻塞点名 */ }
+try {
+  window.addEventListener('pagehide', () => {
+    if (getPendingQAs().length > 0) flushQASync();
+  }, { passive: true });
+} catch (e) { }
+
 async function syncPendingQAs() {
   let pending = getPendingQAs();
   if (pending.length === 0) return;
+  if (qaSending) return;
+  qaSending = true;
+  setTimeout(() => { qaSending = false; }, 8000);        // 兜底：响应回调丢了也别把发送闸永久锁住
   // 收集后通过批量 API 一次性提交
   const batch = pending.map(p => ({ class: p.class, name: p.name, result: p.result, time: p.time, ...(p.content ? { content: p.content } : {}) }));
   try {
     const r = await fetch('/api/record-qa-batch', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
+      // keepalive：切后台/关页面那一次的冲刷要能在页面被冻结后仍然发出去
+      keepalive: true,
       body: JSON.stringify(batch)
     });
     const data = await r.json();
     if (data.ok) {
-      // 从队列移除本次已提交的条目（服务端已按 class+name+result+time 去重：
-      // saved 为实际新增数；即便 saved=0（全部已存在）也应清空 pending，避免无限重试）
-      const savedSet = new Set(batch.map(e => `${e.class}|${e.name}|${e.result}|${e.time}`));
-      const remaining = pending.filter(p => !savedSet.has(`${p.class}|${p.name}|${p.result}|${p.time}`));
+      // 只从队列里摘掉【这一批发出去的】那些条目 —— 必须重新读一遍当前队列。
+      // 以前是拿进来时那份 pending 快照算 remaining 再整体写回：上一批在飞的这几百毫秒里
+      // 老师新点的记录（不在快照里）会被这次写回一起清掉，本机、服务器两头都没有 —— 静默丢点名结果。
+      // 服务端按 class+name+result+time 去重，saved 为实际新增数；即便 saved=0（全部已存在）
+      // 也应摘除，避免无限重试。
+      const sentSet = new Set(batch.map(e => `${e.class}|${e.name}|${e.result}|${e.time}`));
+      const remaining = getPendingQAs().filter(p => !sentSet.has(`${p.class}|${p.name}|${p.result}|${p.time}`));
       savePendingQAs(remaining);
       if (remaining.length === 0) {
         if (data.saved > 0) {
@@ -1080,6 +1131,9 @@ async function syncPendingQAs() {
       } else {
         delToastText.textContent = `⚠️ 同步 ${data.saved} 条，剩余 ${remaining.length} 条待重试`;
         setTimeout(updateSyncIndicator, 2000);
+        // 送成功的这批落地后，队列里还剩（多半就是上面那几百毫秒里新点的）—— 继续排一波。
+        // 只在成功路径上排：失败已有 10 秒退避，这里无条件重排会在服务端挂掉时变成密集重试。
+        requestQASync();
       }
       return;
     }
@@ -1088,6 +1142,15 @@ async function syncPendingQAs() {
     updateSyncIndicator();
     // 超时/失败后等 10 秒再试
     setTimeout(syncPendingQAs, 10000);
+  } finally {
+    qaSending = false;                 // 发送闸必须在两条路径上都放开，否则点名会「看起来不再同步」
+    // 上一批在飞时收到的冲刷请求（切后台、满 5 条、改判连点）在这里补一次。
+    // 只在「确实有人请求过」时补 —— 无条件按剩余量重发会绕开上面那个 10 秒退避，
+    // 服务端挂了就会变成密集重试风暴。
+    if (qaDeferredFlush) {
+      qaDeferredFlush = false;
+      if (getPendingQAs().length > 0) syncPendingQAs();
+    }
   }
 }
 
@@ -1105,8 +1168,8 @@ function recordQA(resultType) {
   delToastText.textContent = `📝 已记录：${name} - ${label}${content ? `（${content}）` : ''}`;
   setTimeout(() => updateSyncIndicator(), 1500);
 
-  // 2. 后台同步到服务器
-  syncPendingQAs();
+  // 2. 后台同步到服务器（攒批：见 requestQASync）
+  requestQASync();
 
   // 3. 实时名单面板（开着时：本地 pending 即时渲染 + 稍后网络校准）
   if (livePanel.classList.contains('show')) {
@@ -1329,7 +1392,7 @@ function flipQaResult(name, target) {
   renderLivePanel();
   delToastText.textContent = `↔️ 已改判：${name} → ${target === 'correct' ? '✓ 合格' : '✗ 不合格'}`;
   setTimeout(() => updateSyncIndicator(), 1500);
-  syncPendingQAs();
+  requestQASync();                     // 改判也走攒批（连点改判时一次上报）
   scheduleLiveRefresh();
 }
 
@@ -1619,6 +1682,14 @@ async function bootstrap() {
     } else {
       selectClass(myClasses[0]);
     }
+    // ⚠️ 会话有效性旁路核对（2026-10-13 P0-6）：__BOOT__ 是上次有效会话时注入的快照，
+    // SW 在网络差时可能把它喂给会话已过期的浏览器 —— 界面全绿，保存却全 401。
+    (async () => {
+      try {
+        const r = await fetch('/api/me', { cache: 'no-store' });
+        if (r.status === 401) obSessionBar();
+      } catch (e) { /* 网络不通：离线模式自有兜底 */ }
+    })();
     const pending = getPendingQAs();
     if (pending.length > 0) setTimeout(syncPendingQAs, 2000);
     return;  // 服务端注入数据已完整，无需再拉 API

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollcall-classroom-assets",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Static assets for the classroom workbench (roll-call): app JS, pinyin/xlsx/zxing engines and icons. Published only so they can be served from a China-friendly CDN.",
   "keywords": [
     "assets",

package/zuoye-app.js

@@ -1339,6 +1339,14 @@ function obBadge(n) {   // 持久徽标：队列非空就常驻，不像 flashAu
   }
   obChip.textContent = '📴 待补传 ' + n + ' 条';
 }
+function obSessionBar() {   // 会话过期横幅：SW 喂了陈旧副本时，别让老师对着绿界面干点不动
+  if (document.getElementById('obSessionBar')) return;
+  const b = document.createElement('div');
+  b.id = 'obSessionBar';
+  b.style.cssText = 'position:fixed;top:0;left:0;right:0;z-index:9999;background:#8a2b0f;color:#fff;text-align:center;font-size:13px;padding:5px 10px;';
+  b.innerHTML = '登录已过期，保存不会生效 —— <a href="/login.html" style="color:#fff;text-decoration:underline">点此重新登录</a>';
+  (document.body || document.documentElement).appendChild(b);
+}
 function obOfflineBar() {   // 离线模式横幅：开着页面断网时也能一眼看到
   let b = document.getElementById('obOfflineBar');
   if (b) return;
@@ -2069,12 +2077,40 @@ function buildDateChip(it){
   });
   return c;
 }
+// —— 历史记录范围（左栏日期芯片往回取几天）——
+// 服务端只接受 1~7 / 14（其余回落 7）。为什么要窗口：`zuoye_<老师>_<班>_<日期>` 一学期就是几百个键，
+// 以前 /api/zuoye/history 是「list 全部 + 每 20 个一批 get」，SQL 条数随学期线性增长，
+// 而免费计划每次 invocation 只允许 50 条 D1 查询（超了直接报错）。
+// 现在窗口内是一段连续键区间 → 服务端一条范围读拿回全部值（见 src/d1store.ts 的 getRange）。
+const HIST_DAYS_ALLOWED = [1, 2, 3, 4, 5, 6, 7, 14];
+let histDays = (() => {
+  let v;
+  try { v = parseInt(localStorage.getItem('zy_hist_days') || '7', 10); } catch (e) { v = 7; }
+  return HIST_DAYS_ALLOWED.indexOf(v) >= 0 ? v : 7;
+})();
+function histUrl(cls) {
+  return `/api/zuoye/history?cls=${encodeURIComponent(cls)}&days=${histDays}`;
+}
+function wireHistDays() {
+  const sel = $('histDaysSel');
+  if (!sel || sel.__wired) return;
+  sel.__wired = 1;
+  sel.value = String(histDays);
+  sel.onchange = () => {
+    const v = parseInt(sel.value, 10);
+    histDays = HIST_DAYS_ALLOWED.indexOf(v) >= 0 ? v : 7;
+    sel.value = String(histDays);
+    try { localStorage.setItem('zy_hist_days', String(histDays)); } catch (e) { }
+    loadHistory();                      // 换范围就立刻重拉，别让老师以为要点两下
+  };
+}
 async function loadHistory() {
+  wireHistDays();
   const h = $('dateList');
   h.innerHTML = '<span class="hist-empty">加载历史…</span>';
   closeDatePop();
   try {
-    const r = await (await fetch(`/api/zuoye/history?cls=${encodeURIComponent(curCls)}`)).json();
+    const r = await (await fetch(histUrl(curCls))).json();
     histories = r.ok ? (r.dates || []) : [];
   } catch(e){ histories = []; }
   $('moreDatesBtn').style.display = 'none';
@@ -3201,11 +3237,11 @@ async function openDatePicker(cls) {
   const chipsBox = $('dpChips');
   const titleEl = $('dpTitle');
   if (!overlay || !chipsBox || !titleEl) return;
-  titleEl.textContent = `${cls}班 · 选择日期`;
+  titleEl.textContent = `${cls}班 · 选择日期（近 ${histDays} 天）`;
   chipsBox.innerHTML = '<span class="dp-empty">加载历史记录…</span>';
   overlay.classList.add('on');
   try {
-    const r = await (await fetch(`/api/zuoye/history?cls=${encodeURIComponent(cls)}`)).json();
+    const r = await (await fetch(histUrl(cls))).json();
     const dates = r.ok ? (r.dates || []) : [];
     if (!dates.length) { chipsBox.innerHTML = '<span class="dp-empty">该班暂无历史记录</span>'; return; }
     chipsBox.innerHTML = '';
@@ -3301,6 +3337,15 @@ async function bootstrap() {
       saveBtn.disabled = shareBtn.disabled = true;
       return;
     }
+    // ⚠️ 会话有效性旁路核对（2026-10-13 P0-6）：__BOOT__ 是上次**有效会话**时注入的快照，
+    // SW 在网络差时可能把它喂给一个会话已过期的浏览器 —— 界面全绿，保存却全 401。
+    // 不阻塞渲染地并行核对一次：401 就挂横幅明说，别让老师对着一片绿干点不动。
+    (async () => {
+      try {
+        const r = await fetch('/api/me', { cache: 'no-store' });
+        if (r.status === 401) obSessionBar();
+      } catch (e) { /* 网络不通：离线模式自有兜底，不打扰 */ }
+    })();
     setEditReady(false);
     bookLoad();
     const kick = () => schedulePrefetch();
@@ -8173,7 +8218,7 @@ const BC_MODE_KEY = 'rollcall_bc_mode';
 const BC_TIP = {
   thermal: '编号 = 班级号 + 姓氏拼音 A→Z 序号（35 班第 1 个 = 3501），全班固定不变。<b>热敏 50×20</b>：一张标签占一页，把打印机纸张设成 50×20 后直接连打，撕下贴作业本封面即可。',
   '30x10': '编号 = 班级号 + 姓氏拼音 A→Z 序号（35 班第 1 个 = 3501），全班固定不变。<b>热敏 30×10</b>：便携标签机常用小纸，一张占一页；上行印「编号 + 姓名」、下行是条码，把打印机纸张设成 30×10 后直接连打，撕下贴作业本角即可。',
-  a4: '编号 = 班级号 + 姓氏拼音 A→Z 序号（35 班第 1 个 = 3501），全班固定不变。<b>A4 拼版</b>：一页排 4 列，打印后沿虚线剪开，贴在作业本封面即可用扫码枪扫。',
+  a4: '编号 = 班级号 + 姓氏拼音 A→Z 序号（35 班第 1 个 = 3501），全班固定不变。<b>A4 拼版</b>：一页 <b>4 列 × 14 行 = 56 格</b>（一个班 50 出头也能一页印完，不必跨页），打印后沿虚线剪开，贴作业本封面即可用扫码枪扫。',
   a4one: '编号 = 班级号 + 姓氏拼音 A→Z 序号（35 班第 1 个 = 3501），全班固定不变。<b>A4 · 一生一版</b>：一个孩子一张纸，11 行 × 3 列 = 33 张 TA 自己的 50×20 标签；<b>条码带已加高到 12.8mm</b>（贴书脊竖着更好扫），格与格之间留 6mm 空当，落剪刀好裁。'
 };
 // 打印方式白名单：thermal = 50×20、30x10 = 便携小标签、a4 = 拼版、a4one = A4 一生一版（11×4 同名）。
@@ -8181,11 +8226,13 @@ const BC_TIP = {
 const BC_MODES = ['thermal', '30x10', 'a4', 'a4one'];
 function normBcMode(v) { return BC_MODES.indexOf(String(v)) >= 0 ? String(v) : 'thermal'; }
 // @page 是**整篇文档级**规则，只能由 JS 按当前模式注入一条；三模式各自一张纸，集中在这里。
-// 热敏纸都不吃页边距（标签本身就是成品尺寸），A4 才要留 8mm 走打印机不可打印区。
+// 热敏纸都不吃页边距（标签本身就是成品尺寸），A4 才要留边距走打印机不可打印区。
 const BC_PAGE = {
   thermal: '@page{size:50mm 20mm;margin:0}',
   '30x10': '@page{size:30mm 10mm;margin:0}',
-  a4: '@page{size:A4 portrait;margin:8mm}',
+  // 拼版：8mm → 5mm（第 177 轮，用户：一页要装下整个班，最多 53 人）。
+  //   5mm 下可用 200×287mm → 4 列 × 14 行 = 56 格，一页放下整班；原来 8mm/12 行 = 48 格，53 人要跨页。
+  a4: '@page{size:A4 portrait;margin:5mm}',
   // 一生一版：5mm 页边距 → 可用宽 200mm = 4×50mm，正好贴满预裁标签纸
   a4one: '@page{size:A4 portrait;margin:5mm}'
 };
@@ -8231,12 +8278,13 @@ function renderBcSheet() {
   //              （Code128 下限 0.25mm 的 1.97 倍），左右几乎无白边（静止区只留 2 模块）。
   //              上行 3mm + 0.15mm 间距 + 条码 6.15mm ≈ 9.3mm，10mm 纸内不跨页。
   //   A4 拼版 ：姓名 / 条码 / 编号 三行，剪开即用。第 176 轮：**条码不再写死 35mm 宽**，
-  //              改由 CSS width:100% 撑满格子（见 .mode-a4 .bc-svg），于是出码比例必须同步压扁
-  //              —— h 40 → 35（viewBox 20 → 17.5 模块高）：格子内宽 ≈44.6mm 时条码高 ≈11.8mm，
-  //              与一生一版那张图的条码带比例（48:12.8）一致，整格 ≈48×21mm，12 行/页不溢出。
-  //              若沿用 h=40，条码会涨到 13.5mm 高，整格 ≈22.3mm → 12 行 291mm 超一页。
+  //              改由 CSS width:100% 撑满格子（见 .mode-a4 .bc-svg），于是出码比例必须同步压扁。
+  //              第 177 轮：一页要装下整班（4 列 × 14 行 = 56 格）→ 行高被压到 ≈18.4mm，
+  //              出码再压一档 h 35 → 30（viewBox 17.5 → 15 模块高）：格子内宽 ≈45.3mm 时
+  //              条码高 ≈10.3mm、模块宽 0.69mm（下限 0.25mm 的 2.7 倍），扫得动。
+  //              若沿用 h=35，条码 11.5mm 高 → 整格 ≈19.6mm，14 行 296mm 超一页。
   sheet.innerHTML = items.map(x => bcMode === 'a4'
-    ? `<div class="bc-label"><div class="bc-nm" title="${esc(x.name)}">${esc(x.name)}</div>${code128Svg(x.code, { mw: 2, h: 35 })}<div class="bc-no">${esc(x.code)}</div></div>`
+    ? `<div class="bc-label"><div class="bc-nm" title="${esc(x.name)}">${esc(x.name)}</div>${code128Svg(x.code, { mw: 2, h: 30 })}<div class="bc-no">${esc(x.code)}</div></div>`
     : `<div class="bc-label"><div class="bc-hd"><span class="bc-no">${esc(x.code)}</span> <span class="bc-nm" title="${esc(x.name)}">${esc(x.name)}</span></div>${code128Svg(x.code, { mw: 2, h: bcMode === '30x10' ? 25 : 40, quiet: bcMode === '30x10' ? 2 : 10 })}</div>`
   ).join('');
   applyBcPage();