feat: 文件夹双策略识别 + 布局选项 + 移除提交率卡片 + localStorage缓存层

- 文件夹识别：mode 含 'folder' 优先，缺省时用 parentId 引用反推；
  即使卷王版本无 mode 字段也能正确分组，避免'直接没有文件夹选项'
- 布局选项：工具栏新增 #layoutSel（默认 / 成绩明细与缺考名单同行），
  用 CSS Grid 双模式渲染，窄屏回落单列；偏好写 localStorage
- 移除统计卡片中的提交率卡片（卡片数 9 → 8）
- localStorage 缓存层：问卷列表 / 每个项目数据 / 看板数据 / 班级组别
  筛选 / 布局 / 上次项目 id 全部持久化；进入页面先渲染缓存，
  后台再异步拉新数据并写回缓存；网络失败时仍能用本地缓存查看
- dashboard.php 同步：文件夹识别 / 数据缓存一致更新

assets/app.js

@@ -24,6 +24,26 @@
     lastSig: ''
   };
 
+  /* ---------------- 本地存储 ---------------- */
+  // 浏览器关闭后仍然保留，账号/密码等敏感配置除外；进入页面时优先读缓存，再后台异步刷新
+  const LS = {
+    get(k, def) {
+      try { const v = localStorage.getItem(k); return v == null ? def : JSON.parse(v); }
+      catch (e) { return def; }
+    },
+    set(k, v) {
+      try { localStorage.setItem(k, JSON.stringify(v)); } catch (e) { /* 隐私模式 */ }
+    },
+    del(k) { try { localStorage.removeItem(k); } catch (e) {} }
+  };
+  const LS_PROJECTS  = 'ny_projects';
+  const LS_LASTPID   = 'ny_last_pid';
+  const LS_LASTQID   = 'ny_last_qid';
+  const LS_FILTERS   = 'ny_filters';        // {cls, grp} -> 跟随 projectId
+  const LS_LAYOUT    = 'ny_layout';
+  const LS_ROSTER    = 'ny_roster_cache';   // 名单 cache（用于首屏补齐班级/组别下拉）
+  const dataKey = pid => 'ny_data_' + pid;
+
   /* ---------------- 通用 ---------------- */
   async function api(action, opts) {
     opts = opts || {};
@@ -73,11 +93,8 @@
   }
 
   /* ---------------- 问卷列表 ---------------- */
-  async function loadProjects() {
+  // 把数组渲染到 #projectSel（抽出便于缓存复用）
-    setConn('conn-load', '连接中…');
+  function renderProjects() {
-    try {
-      const list = await api('projects');
-      state.projects = list || [];
     const sel = $('#projectSel');
     const keep = sel.value;
     sel.innerHTML = '';
@@ -88,11 +105,21 @@
       ph.value = ''; ph.textContent = '请选择问卷 / 考试';
       sel.appendChild(ph);
 
-        // 文件夹（mode 含 folder）以 optgroup 分组形式呈现，其子项以 parentId 关联
+      // 双策略识别文件夹：
+      // 1) mode 字段含 'folder'（卷王默认）
+      // 2) 被其他项目作为 parent_id 引用（部分版本无 mode 字段，回退推断）
       const isFolder = p => (p.mode || '').toLowerCase().includes('folder');
-        const folders = state.projects.filter(isFolder);
+      const parentIds = new Set();
-        const folderIds = new Set(folders.map(f => f.id));
+      state.projects.forEach(p => {
-        const childOfFolder = fid => state.projects.filter(p => !isFolder(p) && (p.parent_id || '0') === fid);
+        const pid = (p.parent_id || '0');
+        if (pid && pid !== '0' && pid !== '') parentIds.add(pid);
+      });
+      const folderSet = new Set();
+      state.projects.forEach(p => {
+        if (isFolder(p) || parentIds.has(p.id)) folderSet.add(p.id);
+      });
+      const childOf = fid => state.projects.filter(p =>
+        !folderSet.has(p.id) && (p.parent_id || '0') === fid);
 
       const mkOpt = p => {
         const o = document.createElement('option');
@@ -101,13 +128,13 @@
         return o;
       };
 
-        // 根项（不含文件夹、且 parent_id 不指向任何文件夹）
+      // 根项（不在任何文件夹里的）
-        state.projects.filter(p => !isFolder(p) && !(p.parent_id && p.parent_id !== '0' && folderIds.has(p.parent_id)))
+      state.projects.filter(p => !folderSet.has(p.id))
         .forEach(p => sel.appendChild(mkOpt(p)));
-        // 文件夹及子项
+      // 文件夹及子项（空文件夹不显示，避免点击报错）
-        folders.forEach(f => {
+      state.projects.filter(p => folderSet.has(p.id)).forEach(f => {
-          const kids = childOfFolder(f.id);
+        const kids = childOf(f.id);
-          if (!kids.length) return; // 空文件夹不显示
+        if (!kids.length) return;
         const og = document.createElement('optgroup');
         og.label = '📁 ' + f.name;
         kids.forEach(p => og.appendChild(mkOpt(p)));
@@ -116,25 +143,47 @@
     }
     if (keep && state.projects.some(p => p.id === keep)) sel.value = keep;
     else if (state.deeplinkProject && state.projects.some(p => p.id === state.deeplinkProject)) sel.value = state.deeplinkProject;
-      const surveyCount = state.projects.filter(p => !(p.mode || '').toLowerCase().includes('folder')).length;
+    else {
-      setConn('conn-on', '已连接 · ' + surveyCount + ' 个问卷');
+      const last = LS.get(LS_LASTPID, '');
+      if (last && state.projects.some(p => p.id === last)) sel.value = last;
+    }
+    const surveyCount = state.projects.filter(p => !((p.mode || '').toLowerCase().includes('folder'))).length;
+    setConn('conn-on', (state._fromCache ? '缓存 · ' : '') + '已连接 · ' + surveyCount + ' 个问卷');
     showAlert('');
     if (sel.value) refresh();
+  }
+
+  async function loadProjects() {
+    setConn('conn-load', '连接中…');
+
+    // 1) 先读本地缓存 → 立刻渲染，避免空白
+    const cached = LS.get(LS_PROJECTS, []);
+    if (Array.isArray(cached) && cached.length) {
+      state.projects = cached;
+      state._fromCache = true;
+      renderProjects();
+    }
+
+    // 2) 再异步刷新
+    try {
+      const list = await api('projects');
+      state.projects = list || [];
+      state._fromCache = false;
+      LS.set(LS_PROJECTS, state.projects);
+      renderProjects();
     } catch (e) {
+      if (!cached || !cached.length) {
         setConn('conn-err', '连接失败');
         showAlert('无法连接卷王系统：' + e.message + '\n请点击右上角【设置】检查系统地址、接口前缀与账号密码。');
+      } else {
+        showAlert('⚠️ 后台刷新失败，已显示本地缓存：' + e.message);
+      }
     }
   }
 
   /* ---------------- 数据刷新 ---------------- */
-  async function refresh(silent) {
+  function applyData(d, opts) {
-    const pid = $('#projectSel').value;
+    opts = opts || {};
-    if (!pid) return;
-    if (state.loading) return;
-    state.loading = true;
-    if (!silent) setConn('conn-load', '拉取数据…');
-    try {
-      const d = await api('data', { params: { projectId: pid, nameQid: $('#nameFieldSel').value } });
     state.questions = d.questions || [];
     state.rows      = d.rows || [];
     state.absent    = d.absent || [];
@@ -142,7 +191,6 @@
     state.roster    = d.roster || [];
     state.fullScore = (d.config && d.config.full_score) ? (parseInt(d.config.full_score, 10) || 100) : 100;
 
-      // 计算本次刷新新增的 sid（用于绿色底纹）；首次加载不标记
     const cur = new Set(state.rows.map(r => r.sid).filter(Boolean));
     if (state.hasPrev) state.newSids = new Set(Array.from(cur).filter(s => !state.prevSids.has(s)));
     else state.newSids = new Set();
@@ -158,12 +206,42 @@
     renderUnmatched();
     renderHints();
 
-      $('#lastUpdate').textContent = d.updated_at;
+    $('#lastUpdate').textContent = d.updated_at || '—';
-      setConn('conn-on', '实时 · ' + d.project.name);
+    setConn('conn-on', (opts.fromCache ? '缓存 · ' : '') + '实时 · ' + (d.project && d.project.name || ''));
-      showAlert('');
+    if (!opts.fromCache) showAlert('');
+  }
+
+  async function refresh(silent) {
+    const pid = $('#projectSel').value;
+    if (!pid) return;
+    if (state.loading && !silent) return;
+    state.loading = true;
+    if (!silent) setConn('conn-load', '拉取数据…');
+
+    // 1) 先读本地缓存 → 立即渲染，刷新期间保持视觉稳定
+    const cached = LS.get(dataKey(pid), null);
+    if (cached && cached.updated_at) {
+      try {
+        applyData(cached, { fromCache: true });
+      } catch (e) { /* 旧格式缓存忽略 */ }
+    }
+
+    // 2) 后台异步拉真实数据
+    try {
+      const d = await api('data', { params: { projectId: pid, nameQid: $('#nameFieldSel').value } });
+      applyData(d);
+      LS.set(dataKey(pid), d);
+      LS.set(LS_LASTPID, pid);
+      LS.set(LS_LASTQID, $('#nameFieldSel').value || '');
+      // 名单缓存一份（便于刷新前/失败时仍能渲染班级/组别下拉）
+      LS.set(LS_ROSTER, { ts: Date.now(), students: d.roster || [] });
     } catch (e) {
+      if (!cached) {
         if (!silent) setConn('conn-err', '数据获取失败');
         showAlert(e.message);
+      } else {
+        showAlert('⚠️ 后台刷新失败，已显示本地缓存：' + e.message);
+      }
     } finally {
       state.loading = false;
       $('#liveDot').classList.add('on');
@@ -189,8 +267,10 @@
       o.textContent = (q.title || q.id) + '（' + (q.type || '') + '）';
       sel.appendChild(o);
     });
+    const lastQid = LS.get(LS_LASTQID, '');
     if (keep) sel.value = keep;
     else if (state.deeplinkQid) sel.value = state.deeplinkQid;
+    else if (lastQid && (cands.some(c => c.id === lastQid) || (d.questions || []).some(q => q.id === lastQid))) sel.value = lastQid;
     else if (d.name_qid) sel.value = d.name_qid;
   }
 
@@ -202,7 +282,11 @@
     const vals = Array.from(set).sort((a, b) => a.localeCompare(b, 'zh', { numeric: true }));
     sel.innerHTML = '<option value="">全部班级</option>' +
       vals.map(v => '<option value="' + esc(v) + '">' + esc(v) + '</option>').join('');
+    // 优先保留用户当前已选项；否则按本地缓存恢复（跟随 projectId）
+    const pid = $('#projectSel').value;
+    const cache = pid ? (LS.get(LS_FILTERS, {})[pid] || {}) : {};
     if (vals.indexOf(cur) >= 0) sel.value = cur;
+    else if (cache.cls && vals.indexOf(cache.cls) >= 0) sel.value = cache.cls;
     else sel.value = '';
   }
 
@@ -220,10 +304,21 @@
     const vals = Array.from(set).sort();
     grpSel.innerHTML = '<option value="">全部组别</option>' +
       vals.map(v => '<option value="' + esc(v) + '">' + esc(v) + '</option>').join('');
+    const pid = $('#projectSel').value;
+    const cache = pid ? (LS.get(LS_FILTERS, {})[pid] || {}) : {};
     if (vals.indexOf(cur) >= 0) grpSel.value = cur;
+    else if (cache.grp && vals.indexOf(cache.grp) >= 0) grpSel.value = cache.grp;
     else grpSel.value = '';
   }
 
+  function rememberFilters() {
+    const pid = $('#projectSel').value;
+    if (!pid) return;
+    const all = LS.get(LS_FILTERS, {});
+    all[pid] = { cls: $('#clsSel').value, grp: $('#grpSel').value, ts: Date.now() };
+    LS.set(LS_FILTERS, all);
+  }
+
   // 按当前所选班级 + 组别（或无）客户端重算统计卡片
   function computeDisplayStats(cls, grp) {
     const allStudents = state.roster || [];
@@ -268,11 +363,10 @@
     const cls = $('#clsSel').value;
     const grp = $('#grpSel').value;
     const st = computeDisplayStats(cls, grp);
-    const set = (id, v) => { $(id).textContent = v; };
+    const set = (id, v) => { const el = $(id); if (el) el.textContent = v; };
     set('#sTotal', st.total);
     set('#sSubmit', st.submitted);
     set('#sAbsent', st.absent);
-    set('#sRate', st.rate + '%');
     set('#sAvg', st.avg == null ? '-' : st.avg);
     set('#sMax', st.maxScore == null ? '-' : st.maxScore);
     set('#sMin', st.minScore == null ? '-' : st.minScore);
@@ -423,6 +517,16 @@
     if (btn) btn.textContent = on ? '⛶ 退出全屏' : '⛶ 全屏';
   }
 
+  /* ---------------- 布局切换 ---------------- */
+  function applyLayout(mode) {
+    const m = (mode === 'side') ? 'side' : 'default';
+    const lay = document.getElementById('dataLayout');
+    if (lay) lay.setAttribute('data-layout', m);
+    const sel = $('#layoutSel');
+    if (sel && sel.value !== m) sel.value = m;
+    LS.set(LS_LAYOUT, m);
+  }
+
   /* ---------------- 设置 ---------------- */
   async function openSettings() {
     try {
@@ -546,8 +650,6 @@
   /* ---------------- 事件绑定 ---------------- */
   document.addEventListener('DOMContentLoaded', function () {
 
-    $('#projectSel').addEventListener('change', () => { state.prevMap = {}; refresh(); });
-    $('#nameFieldSel').addEventListener('change', () => { state.prevMap = {}; refresh(); });
     $('#btnRefresh').addEventListener('click', () => refresh(false));
     $('#btnSettings').addEventListener('click', openSettings);
     $('#btnRoster').addEventListener('click', openRoster);
@@ -559,17 +661,31 @@
     $('#kw').addEventListener('input', renderTable);
     $('#clsSel').addEventListener('change', () => {
       populateGroups();
+      rememberFilters();
       renderStats();
       renderTable();
       renderAbsent();
       renderHints();
     });
     $('#grpSel').addEventListener('change', () => {
+      rememberFilters();
       renderStats();
       renderTable();
       renderAbsent();
       renderHints();
     });
+    $('#layoutSel').addEventListener('change', e => applyLayout(e.target.value));
+    $('#nameFieldSel').addEventListener('change', () => {
+      state.prevMap = {}; state.prevSids = new Set(); state.hasPrev = false;
+      LS.set(LS_LASTQID, $('#nameFieldSel').value || '');
+      refresh();
+    });
+    $('#projectSel').addEventListener('change', () => {
+      // 切换项目后清掉前一项目的 prevMap 与高亮缓存
+      state.prevMap = {}; state.prevSids = new Set(); state.hasPrev = false;
+      // 用缓存数据先快速渲染，再后台拉新数据
+      refresh();
+    });
     $('#intervalSel').addEventListener('change', schedule);
     $('#autoRefresh').addEventListener('change', e => {
       if (e.target.checked) { schedule(); refresh(true); }
@@ -751,7 +867,10 @@
     });
 
     /* 启动 */
-    // 支持 ?projectId=xxx&nameQid=yyy 直接打开某份问卷
+    // 1) 恢复布局偏好（仅样式，不涉及数据）
+    applyLayout(LS.get(LS_LAYOUT, 'default'));
+
+    // 2) 支持 ?projectId=xxx&nameQid=yyy 直接打开某份问卷
     const qs = new URLSearchParams(location.search);
     if (qs.get('interval')) $('#intervalSel').value = qs.get('interval');
     state.deeplinkProject = qs.get('projectId') || '';

assets/style.css

@@ -212,6 +212,8 @@ select:focus, input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px
   border: 1px solid var(--border); border-radius: var(--radius);
   box-shadow: var(--shadow); overflow: hidden;
 }
+/* 在 .layout 容器内由 gap 控制间距，去掉 panel 自身 margin-top */
+.layout > .panel { margin-top: 0; }
 .panel-head {
   display: flex; align-items: center; justify-content: space-between;
   padding: 13px 18px; border-bottom: 1px solid var(--border-2);
@@ -234,6 +236,38 @@ select:focus, input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px
 .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
 
+/* ---------- 三 panel 布局容器（默认 / 成绩明细与缺考名单同行） ---------- */
+.layout {
+  display: grid; gap: 18px;
+  grid-template-columns: 1fr;
+  margin-top: 18px;
+}
+.layout > #tablePanel    { grid-column: 1; grid-row: 1; }
+.layout > #absentPanel   { grid-column: 1; grid-row: 2; }
+.layout > #unmatchedPanel { grid-column: 1; grid-row: 3; }
+
+/* side：成绩明细 与 缺考名单 同行，未匹配答卷放下面整宽 */
+.layout[data-layout="side"] {
+  grid-template-columns: 1fr 1fr;
+}
+.layout[data-layout="side"] > #tablePanel     { grid-column: 1; grid-row: 1; }
+.layout[data-layout="side"] > #absentPanel    { grid-column: 2; grid-row: 1; }
+.layout[data-layout="side"] > #unmatchedPanel { grid-column: 1 / -1; grid-row: 2; }
+
+/* 窄屏一律回落单列（grid-row 也要还原） */
+@media (max-width: 900px) {
+  .layout, .layout[data-layout="side"] { grid-template-columns: 1fr; }
+  .layout > #tablePanel, .layout > #absentPanel, .layout > #unmatchedPanel,
+  .layout[data-layout="side"] > #tablePanel,
+  .layout[data-layout="side"] > #absentPanel,
+  .layout[data-layout="side"] > #unmatchedPanel {
+    grid-column: 1;
+  }
+  .layout > #tablePanel, .layout[data-layout="side"] > #tablePanel    { grid-row: 1; }
+  .layout > #absentPanel, .layout[data-layout="side"] > #absentPanel { grid-row: 2; }
+  .layout > #unmatchedPanel, .layout[data-layout="side"] > #unmatchedPanel { grid-row: 3; }
+}
+
 /* ---------- 表格 ---------- */
 .table-scroll { overflow: auto; max-height: 62vh; }
 .table-scroll.short { max-height: 320px; }

dashboard.php

@@ -87,6 +87,15 @@ function rateColor(r){
   return 'var(--danger)';
 }
 
+/* 本地存储（缓存问卷列表/看板数据，重开即恢复） */
+const LS = {
+  get(k, def){ try { const v = localStorage.getItem(k); return v == null ? def : JSON.parse(v); } catch(e){ return def; } },
+  set(k, v){ try { localStorage.setItem(k, JSON.stringify(v)); } catch(e){} },
+  del(k){ try { localStorage.removeItem(k); } catch(e){} }
+};
+const LS_PROJECTS = 'ny_projects';
+const LS_DASH = pid => 'ny_dashboard_' + pid;
+
 let DASH = null;   // 最近一次看板数据
 let CUR  = null;   // 当前查看的班级名
 
@@ -102,18 +111,62 @@ async function api(action, opts){
   throw new Error((j && (j.msg || j.error)) || '请求失败');
 }
 
-async function loadProjects(){
+/* ---------- 问卷列表：双策略识别文件夹 + 缓存优先 ---------- */
-  try {
+function renderProjects(list){
-    const list = await api('projects');
   const sel = $('#projectSel');
   const keep = sel.value;
-    sel.innerHTML = '<option value="">请选择问卷 / 考试</option>' +
+  sel.innerHTML = '<option value="">请选择问卷 / 考试</option>';
-      list.map(p => '<option value="' + esc(p.id) + '">' + esc(p.name) + '（' + esc(p.mode || '') + '）</option>').join('');
+  // 双策略识别文件夹：mode 含 folder，或被其他项目作为 parent_id 引用
-    if (keep) sel.value = keep;
+  const isFolder = p => (p.mode || '').toLowerCase().includes('folder');
+  const parentIds = new Set();
+  list.forEach(p => { const pid = (p.parent_id || '0'); if (pid && pid !== '0' && pid !== '') parentIds.add(pid); });
+  const folderSet = new Set();
+  list.forEach(p => { if (isFolder(p) || parentIds.has(p.id)) folderSet.add(p.id); });
+  const childOf = fid => list.filter(p => !folderSet.has(p.id) && (p.parent_id || '0') === fid);
+
+  // 根项
+  list.filter(p => !folderSet.has(p.id)).forEach(p => {
+    const o = document.createElement('option');
+    o.value = p.id; o.textContent = (p.mode ? '[' + p.mode + '] ' : '') + p.name + '（' + (p.total || 0) + '份）';
+    sel.appendChild(o);
+  });
+  // 文件夹
+  list.filter(p => folderSet.has(p.id)).forEach(f => {
+    const kids = childOf(f.id);
+    if (!kids.length) return;
+    const og = document.createElement('optgroup');
+    og.label = '📁 ' + f.name;
+    kids.forEach(p => {
+      const o = document.createElement('option');
+      o.value = p.id; o.textContent = (p.mode ? '[' + p.mode + '] ' : '') + p.name + '（' + (p.total || 0) + '份）';
+      og.appendChild(o);
+    });
+    sel.appendChild(og);
+  });
+  if (keep && list.some(p => p.id === keep)) sel.value = keep;
+  else {
+    const last = LS.get('ny_dash_last_pid', '');
+    if (last && list.some(p => p.id === last)) sel.value = last;
+  }
+}
+
+async function loadProjects(){
+  // 1) 先读本地缓存
+  const cached = LS.get(LS_PROJECTS, []);
+  if (Array.isArray(cached) && cached.length) {
+    renderProjects(cached);
+  }
+  // 2) 后台异步刷新
+  try {
+    const list = await api('projects');
+    LS.set(LS_PROJECTS, list || []);
+    renderProjects(list || []);
   } catch (e) {
+    if (!cached || !cached.length) {
       $('#classGrid').innerHTML = '<div class="empty">加载问卷列表失败：' + esc(e.message) + '</div>';
     }
   }
+}
 
 function renderSummary(d){
   const o = d.overall || {};
@@ -241,22 +294,41 @@ async function loadDashboard(){
     $('#classGrid').innerHTML = '<div class="empty">请选择问卷 / 考试以查看各班数据</div>';
     return;
   }
+
+  // 1) 缓存优先：先渲染上次保存的看板，避免空白
+  const cached = LS.get(LS_DASH(pid), null);
+  if (cached && cached.classes) {
+    DASH = cached;
+    renderSummary(DASH);
+    renderClasses(DASH);
+    $('#lastUpdate').textContent = (cached.updated_at || '—') + '（缓存）';
+    if (CUR) {
+      const still = (DASH.classes || []).some(x => x.class === CUR);
+      if (still) showClassDetail(CUR); else backToOverview();
+    }
+  }
+
+  // 2) 后台拉真实数据
   try {
-    DASH = await api('dashboard', { params: { projectId: pid } });
+    const fresh = await api('dashboard', { params: { projectId: pid } });
+    DASH = fresh;
+    LS.set(LS_DASH(pid), fresh);
+    LS.set('ny_dash_last_pid', pid);
     renderSummary(DASH);
     renderClasses(DASH);
     $('#lastUpdate').textContent = DASH.updated_at || '-';
     $('#liveDot').classList.add('on');
     setTimeout(() => $('#liveDot').classList.remove('on'), 900);
-    // 若正在看某班详情，刷新后同步更新
     if (CUR) {
       const still = (DASH.classes || []).some(x => x.class === CUR);
       if (still) showClassDetail(CUR); else backToOverview();
     }
   } catch (e) {
+    if (!cached) {
       $('#classGrid').innerHTML = '<div class="empty">数据加载失败：' + esc(e.message) + '</div>';
     }
   }
+}
 
 /* ---------- 全屏 ---------- */
 function toggleFullscreen(){

index.php

@@ -75,6 +75,13 @@ $rosterCount = Roster::count();
       <label>组别</label>
       <select id="grpSel"><option value="">全部组别</option></select>
     </div>
+    <div class="field">
+      <label>布局</label>
+      <select id="layoutSel">
+        <option value="default">默认（缺考+未匹配同行）</option>
+        <option value="side">成绩明细与缺考名单同行</option>
+      </select>
+    </div>
     <div class="field">
       <label>自动刷新</label>
       <div class="inline">
@@ -108,7 +115,6 @@ $rosterCount = Roster::count();
     <div class="card accent-blue"><span>名单总人数</span><b id="sTotal">-</b></div>
     <div class="card ok accent-green"><span>已提交</span><b id="sSubmit">-</b></div>
     <div class="card warn accent-orange"><span>缺考</span><b id="sAbsent">-</b></div>
-    <div class="card accent-purple"><span>提交率</span><b id="sRate">-</b></div>
     <div class="card accent-teal"><span>平均分</span><b id="sAvg">-</b></div>
     <div class="card accent-green"><span>最高分</span><b id="sMax">-</b></div>
     <div class="card accent-red"><span>最低分</span><b id="sMin">-</b></div>
@@ -116,7 +122,8 @@ $rosterCount = Roster::count();
     <div class="card accent-gray"><span>平均用时</span><b id="sDur">-</b></div>
   </section>
 
-  <section class="panel">
+  <div class="layout" id="dataLayout" data-layout="default">
+    <section class="panel" id="tablePanel">
       <div class="panel-head">
         <h2>成绩明细 <small id="tableHint"></small></h2>
         <div class="updated">最后更新：<span id="lastUpdate">—</span><i id="liveDot" class="dot"></i></div>
@@ -139,8 +146,7 @@ $rosterCount = Roster::count();
       </div>
     </section>
 
-  <div class="grid-2">
+    <section class="panel" id="absentPanel">
-    <section class="panel">
       <div class="panel-head"><h2>缺考名单 <small id="absentHint"></small></h2></div>
       <div class="table-scroll short">
         <table class="grid compact">
@@ -149,7 +155,8 @@ $rosterCount = Roster::count();
         </table>
       </div>
     </section>
-    <section class="panel">
+
+    <section class="panel" id="unmatchedPanel">
       <div class="panel-head"><h2>未匹配答卷 <small>姓名不在名单中</small></h2></div>
       <div class="table-scroll short">
         <table class="grid compact">