rollcall-classroom-assets 1.0.5 → 1.0.7

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());
@@ -323,12 +331,31 @@ function rosterDelList() {
 }
 
 // 名单服务端同步：自定义班单名增删（服务端 class_data 权威）
+// ★ 2026-10-14 复核 L2：这条原来是 fire-and-forget（只 .catch(() => {})），而服务端现在有四种
+//   「没写成」：403 没权限 / 409 撞上乐观锁（名单刚被别的老师改了）/ 507 整行超字节 / 网络断。
+//   不回滚就出现最难查的那种问题：老师看见名字已经加上了，刷一次页面它又不见了 ——
+//   界面在说一件服务端并不知道的事。现在失败就把这一次内存改动收回去，
+//   并把服务端那句人话原样显示出来（错误文案单点在 src/index.ts，别在这儿另编一套）。
 function rosterSync(api, cls, name) {
+  const undo = () => {
+    const arr = dynRoster[cls] = dynRoster[cls] || [];
+    if (api === 'add-student') { const i = arr.indexOf(name); if (i >= 0) arr.splice(i, 1); }
+    else if (!arr.includes(name)) arr.push(name);
+    try { afterRosterChange(''); } catch (e) { }
+  };
   fetch(`/api/${api}`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ class: cls, name })
-  }).catch(() => {});
+  }).then(async r => {
+    let d = null; try { d = await r.json(); } catch (e) { }
+    if (d && d.ok) return;
+    undo();
+    rosterToast('⚠️ 名单没存上：' + ((d && d.error) || ('HTTP ' + r.status)) + '（刚才那次改动已收回，可重做一次）');
+  }).catch(() => {
+    undo();
+    rosterToast('⚠️ 名单没存上（连不上服务器），刚才那次改动已收回 —— 重做一次或等网络恢复');
+  });
 }
 // 内置班权威名单全量上传（KV class_data[cls] 就是名单本身，批改页 /api/roster 直接读它）
 // 串行排队：一次操作可能触发多次上传（批量添加等），排队保证服务端最终状态 = 最后一次全量名单
@@ -1054,23 +1081,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 +1150,9 @@ async function syncPendingQAs() {
       } else {
         delToastText.textContent = `⚠️ 同步 ${data.saved} 条，剩余 ${remaining.length} 条待重试`;
         setTimeout(updateSyncIndicator, 2000);
+        // 送成功的这批落地后，队列里还剩（多半就是上面那几百毫秒里新点的）—— 继续排一波。
+        // 只在成功路径上排：失败已有 10 秒退避，这里无条件重排会在服务端挂掉时变成密集重试。
+        requestQASync();
       }
       return;
     }
@@ -1088,6 +1161,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 +1187,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 +1411,7 @@ function flipQaResult(name, target) {
   renderLivePanel();
   delToastText.textContent = `↔️ 已改判：${name} → ${target === 'correct' ? '✓ 合格' : '✗ 不合格'}`;
   setTimeout(() => updateSyncIndicator(), 1500);
-  syncPendingQAs();
+  requestQASync();                     // 改判也走攒批（连点改判时一次上报）
   scheduleLiveRefresh();
 }
 
@@ -1619,6 +1701,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.5",
+  "version": "1.0.7",
   "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();