为上课记录表添加分组序号列

app/app/static/app.js

@@ -44,6 +44,7 @@ const WEEKDAYS = ["星期日", "星期一", "星期二", "星期三", "星期四
 const COPY_LINE_BREAK = "\r\n";
 const SORT_DIRECTIONS = { asc: 1, desc: -1 };
 const RECORD_PAGE_SIZE = 30;
+const RECORD_TABLE_COLUMN_COUNT = 8;
 let currentRecords = [];
 let recordSort = { date: "asc", time: "asc" };
 let currentRecordOrder = [];
@@ -241,7 +242,7 @@ function toggleRecordSort(field) {
   renderCurrentRecords();
 }
 
-function renderRecordRow(row) {
+function renderRecordRow(row, rowNumber) {
   const key = row._recordKey;
   const corrected = correctedRecords.get(key);
   const displayRow = getDisplayRecord(row);
@@ -251,6 +252,7 @@ function renderRecordRow(row) {
   const badge = corrected ? '<span class="correction-badge">已修改</span>' : "";
   const summaryExpanded = expandedSummaryRecords.has(key);
   return `<tr class="record-row${correctedClass}${summaryClass}" data-record-key="${escapeHtml(key)}" tabindex="0" role="button" aria-expanded="${summaryExpanded ? "true" : "false"}">
+    <td class="num record-index-cell" data-label="序号">${escapeHtml(rowNumber)}</td>
     <td data-label="日期">${escapeHtml(displayRow.date)} ${escapeHtml(displayRow.weekday)}</td>
     <td data-label="时间">${escapeHtml(displayRow.time)}</td>
     <td data-label="学生">${escapeHtml(displayRow.student)}</td>
@@ -298,7 +300,7 @@ function renderSummaryEntry(summary, recordKey, index) {
 
 function renderSummaryMissingRow(key, expanded) {
   return `<tr class="summary-collapse-row summary-missing-row" data-summary-row="${escapeHtml(key)}" ${expanded ? "" : "hidden"}>
-    <td colspan="7">
+    <td colspan="${RECORD_TABLE_COLUMN_COUNT}">
       <div class="summary-missing">
         <span>无课程小结</span>
         <button class="small-button summary-supplement" type="button" data-record-key="${escapeHtml(key)}">补充课程小结</button>
@@ -312,23 +314,25 @@ function renderGroupedRecords(records) {
   return groupRecordsByTeacher(records)
     .map(
       (group) => {
+        let displayIndex = 0;
         const collapsed = collapsedTeacherGroups.has(group.teacher);
         const rows = collapsed
           ? ""
           : sortRecordsForDisplay(group.records)
             .map((row) => {
+              displayIndex += 1;
               currentRecordOrder.push(row._recordKey);
               const summaryCount = Number(row.summary_count || 0);
               const summaryRow = summaryCount
                 ? `<tr class="summary-collapse-row" data-summary-row="${escapeHtml(row._recordKey)}" ${expandedSummaryRecords.has(row._recordKey) ? "" : "hidden"}>
-                    <td colspan="7">${(row.summaries || []).map((summary, index) => renderSummaryEntry(summary, row._recordKey, index)).join("")}</td>
+                    <td colspan="${RECORD_TABLE_COLUMN_COUNT}">${(row.summaries || []).map((summary, index) => renderSummaryEntry(summary, row._recordKey, index)).join("")}</td>
                   </tr>`
                 : renderSummaryMissingRow(row._recordKey, expandedSummaryRecords.has(row._recordKey));
-              return `${renderRecordRow(row)}${summaryRow}`;
+              return `${renderRecordRow(row, displayIndex)}${summaryRow}`;
             })
             .join("");
         return `<tr class="teacher-group" data-teacher="${escapeHtml(group.teacher)}">
-        <td colspan="7">
+        <td colspan="${RECORD_TABLE_COLUMN_COUNT}">
           <button class="teacher-group-toggle" type="button" data-teacher="${escapeHtml(group.teacher)}" aria-expanded="${collapsed ? "false" : "true"}">
             <strong>${escapeHtml(group.teacher)}</strong>
             <span>${group.count} 条记录 · ${displayHours(group.totalHours)} · ${collapsed ? "展开" : "收起"}</span>
@@ -789,7 +793,7 @@ async function queryRecords(query, options = {}) {
   const q = query.trim();
   if (!q) return;
   const offset = Number(options.offset || 0);
-  recordRows.innerHTML = `<tr><td colspan="7" class="empty">正在查询</td></tr>`;
+  recordRows.innerHTML = `<tr><td colspan="${RECORD_TABLE_COLUMN_COUNT}" class="empty">正在查询</td></tr>`;
   recordMeta.innerHTML = "";
   if (recordPager) {
     recordPager.hidden = true;
@@ -831,7 +835,7 @@ async function queryRecords(query, options = {}) {
     }
 
     if (!data.records.length) {
-      recordRows.innerHTML = `<tr><td colspan="7" class="empty">未找到符合条件的上课记录</td></tr>`;
+      recordRows.innerHTML = `<tr><td colspan="${RECORD_TABLE_COLUMN_COUNT}" class="empty">未找到符合条件的上课记录</td></tr>`;
       renderPager(recordPager, currentRecordPage);
       return;
     }
@@ -844,7 +848,7 @@ async function queryRecords(query, options = {}) {
     recordRows.innerHTML = renderGroupedRecords(currentRecords);
     renderPager(recordPager, currentRecordPage);
   } catch (error) {
-    recordRows.innerHTML = `<tr><td colspan="7" class="empty">查询失败：${escapeHtml(error.message)}</td></tr>`;
+    recordRows.innerHTML = `<tr><td colspan="${RECORD_TABLE_COLUMN_COUNT}" class="empty">查询失败：${escapeHtml(error.message)}</td></tr>`;
   }
 }
 

app/app/static/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>新时空教务管理系统</title>
-    <link rel="stylesheet" href="/static/styles.css?v=20260620-summary-binding" />
+    <link rel="stylesheet" href="/static/styles.css?v=20260626-record-index" />
   </head>
   <body>
     <header class="topbar">
@@ -53,6 +53,7 @@
           <table>
             <thead>
               <tr>
+                <th class="num">序号</th>
                 <th>
                   <button id="dateSortBtn" class="sort-header-button" type="button" aria-label="日期排序：升序排列，点击切换为降序排列">日期 升序排列</button>
                 </th>
@@ -68,7 +69,7 @@
             </thead>
             <tbody id="recordRows">
               <tr>
-                <td colspan="7" class="empty">输入查询条件后显示明细</td>
+                <td colspan="8" class="empty">输入查询条件后显示明细</td>
               </tr>
             </tbody>
           </table>
@@ -166,6 +167,6 @@
       </section>
     </div>
 
-    <script src="/static/app.js?v=20260620-summary-binding"></script>
+    <script src="/static/app.js?v=20260626-record-index"></script>
   </body>
 </html>

app/app/static/styles.css

@@ -1392,6 +1392,11 @@ td {
   color: var(--muted);
 }
 
+.record-index-cell {
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
 .record-row {
   cursor: pointer;
 }