From 7124011da9c95cf67989289638d4e4907d7c8524 Mon Sep 17 00:00:00 2001
From: biss <bishsh2006@outlook.com>
Date: Sat, 15 Aug 2026 18:57:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=90=E7=BB=A9=E5=BD=95=E5=85=A5=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/utils/scoreGridNavigation.ts   |  67 ++++++++++++++
 web/src/views/ExperimentGradesView.vue | 116 +++++++++++++++++--------
 web/src/views/GradesView.vue           | 105 +++++++++++++++++-----
 3 files changed, 234 insertions(+), 54 deletions(-)
 create mode 100644 web/src/utils/scoreGridNavigation.ts

diff --git a/web/src/utils/scoreGridNavigation.ts b/web/src/utils/scoreGridNavigation.ts
new file mode 100644
index 0000000..f375150
--- /dev/null
+++ b/web/src/utils/scoreGridNavigation.ts
@@ -0,0 +1,67 @@
+import { nextTick } from 'vue'
+
+type Direction = 'up' | 'down' | 'left' | 'right'
+
+/**
+ * Makes an editable score table behave like a spreadsheet without changing
+ * the normal keyboard behaviour of selects, switches, or free-text fields.
+ */
+export function useScoreGridNavigation(grid: string) {
+  function handleScoreGridKeydown(event: KeyboardEvent) {
+    const directionByKey: Record<string, Direction | undefined> = {
+      Enter: 'down',
+      ArrowUp: 'up',
+      ArrowDown: 'down',
+      ArrowLeft: 'left',
+      ArrowRight: 'right',
+    }
+    const direction = directionByKey[event.key]
+    if (!direction) return
+
+    const current = event.currentTarget as HTMLElement
+    const row = Number(current.dataset.scoreRow)
+    const column = Number(current.dataset.scoreColumn)
+    if (!Number.isFinite(row) || !Number.isFinite(column)) return
+
+    const cells = Array.from(
+      document.querySelectorAll<HTMLElement>(`[data-score-grid="${grid}"]`),
+    ).filter((cell) => {
+      const input = cell.querySelector<HTMLInputElement>('input')
+      return input && !input.disabled && !input.readOnly
+    })
+
+    const findCell = (targetRow: number, targetColumn: number) =>
+      cells.find((cell) =>
+        Number(cell.dataset.scoreRow) === targetRow
+        && Number(cell.dataset.scoreColumn) === targetColumn)
+
+    let target: HTMLElement | undefined
+    if (direction === 'left' || direction === 'right') {
+      const rowCells = cells
+        .filter((cell) => Number(cell.dataset.scoreRow) === row)
+        .sort((left, right) => Number(left.dataset.scoreColumn) - Number(right.dataset.scoreColumn))
+      const currentIndex = rowCells.indexOf(current)
+      target = rowCells[currentIndex + (direction === 'left' ? -1 : 1)]
+    } else {
+      const columnCells = cells
+        .filter((cell) => Number(cell.dataset.scoreColumn) === column)
+        .sort((top, bottom) => Number(top.dataset.scoreRow) - Number(bottom.dataset.scoreRow))
+      const currentIndex = columnCells.indexOf(current)
+      target = columnCells[currentIndex + (direction === 'up' ? -1 : 1)]
+        ?? findCell(row + (direction === 'up' ? -1 : 1), column)
+    }
+
+    // Keep arrow keys from changing an input-number value; navigation is the
+    // expected spreadsheet action even at an edge where no next cell exists.
+    event.preventDefault()
+    if (!target) return
+
+    void nextTick(() => {
+      const input = target?.querySelector<HTMLInputElement>('input')
+      input?.focus()
+      input?.select()
+    })
+  }
+
+  return { handleScoreGridKeydown }
+}
diff --git a/web/src/views/ExperimentGradesView.vue b/web/src/views/ExperimentGradesView.vue
index 2051b25..a414ba2 100644
--- a/web/src/views/ExperimentGradesView.vue
+++ b/web/src/views/ExperimentGradesView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import {
   Check,
   Download,
@@ -19,8 +19,10 @@ import {
   academicTermOptionClass,
   defaultAcademicTermId,
 } from '../utils/academicTerms'
+import { useScoreGridNavigation } from '../utils/scoreGridNavigation'
 
 const auth = useAuthStore()
+const { handleScoreGridKeydown } = useScoreGridNavigation('experiment-grade-entry')
 const isStudent = computed(() => auth.user?.roles.includes('Student') ?? false)
 const canViewAllColleges = computed(() =>
   auth.user?.roles.some((role) => ['SuperAdmin', 'AcademicAdmin'].includes(role)) ?? false,
@@ -28,6 +30,10 @@ const canViewAllColleges = computed(() =>
 const loading = ref(false)
 const detailLoading = ref(false)
 const saving = ref(false)
+const autoSaveState = ref<'idle' | 'saving' | 'saved' | 'error'>('idle')
+let autoSaveTimer: ReturnType<typeof setTimeout> | undefined
+let savedRecordSnapshot = ''
+let autoSaving = false
 const terms = ref<any[]>([])
 const colleges = ref<any[]>([])
 const termId = ref('')
@@ -252,6 +258,7 @@ async function loadDetail() {
     detail.value.canEdit = response.canEdit
     detail.value.canReview = response.canReview
     detail.value.canPublish = response.canPublish
+    savedRecordSnapshot = experimentRecordSnapshot()
   } catch (error) {
     ElMessage.error(apiErrorMessage(error))
   } finally {
@@ -276,36 +283,67 @@ function previewTotal(record: any): number | null {
   return Math.round(total * 10) / 10
 }
 
-async function saveRecords() {
+function experimentRecordPayload() {
+  return detail.value.records.map((record: any) => ({
+    id: record.id,
+    participationStatus: record.participationStatus,
+    safetyViolation: record.safetyViolation,
+    attemptNumber: record.attemptNumber,
+    submissionReference: record.submissionReference,
+    submittedAt: record.submittedAt,
+    isLate: record.isLate,
+    teacherComment: record.teacherComment,
+    itemScores: record.itemScores.map((score: any) => ({
+      experimentGradeItemId: score.experimentGradeItemId,
+      score: score.score,
+      comment: score.comment,
+    })),
+  }))
+}
+
+function experimentRecordSnapshot() {
+  return detail.value ? JSON.stringify(experimentRecordPayload()) : ''
+}
+
+function scheduleAutoSave() {
+  if (!detail.value?.canEdit || experimentRecordSnapshot() === savedRecordSnapshot) return
+  autoSaveState.value = 'idle'
+  clearTimeout(autoSaveTimer)
+  autoSaveTimer = setTimeout(() => { void saveRecords(true) }, 60_000)
+}
+
+async function saveRecords(automatic = false) {
   if (!detail.value) return
-  saving.value = true
+  if (automatic && autoSaving) return
+  const records = experimentRecordPayload()
+  const snapshot = JSON.stringify(records)
+  if (automatic) {
+    autoSaving = true
+    autoSaveState.value = 'saving'
+  } else saving.value = true
   try {
     await http.put(`/experiment-grades/sheets/${detail.value.id}/records`, {
-      records: detail.value.records.map((record: any) => ({
-        id: record.id,
-        participationStatus: record.participationStatus,
-        safetyViolation: record.safetyViolation,
-        attemptNumber: record.attemptNumber,
-        submissionReference: record.submissionReference,
-        submittedAt: record.submittedAt,
-        isLate: record.isLate,
-        teacherComment: record.teacherComment,
-        itemScores: record.itemScores.map((score: any) => ({
-          experimentGradeItemId: score.experimentGradeItemId,
-          score: score.score,
-          comment: score.comment,
-        })),
-      })),
+      records,
     })
-    ElMessage.success('本页实验成绩已保存')
-    await loadDetail()
+    savedRecordSnapshot = snapshot
+    if (automatic) autoSaveState.value = 'saved'
+    else {
+      ElMessage.success('本页实验成绩已保存')
+      await loadDetail()
+    }
   } catch (error) {
-    ElMessage.error(apiErrorMessage(error))
+    if (automatic) autoSaveState.value = 'error'
+    else ElMessage.error(apiErrorMessage(error))
   } finally {
-    saving.value = false
+    if (automatic) {
+      autoSaving = false
+      if (experimentRecordSnapshot() !== savedRecordSnapshot) scheduleAutoSave()
+    } else saving.value = false
   }
 }
 
+watch(() => detail.value?.records, scheduleAutoSave, { deep: true })
+
 function downloadTemplate() {
   if (!detail.value) return
   downloadApiFile(
@@ -788,17 +826,24 @@ onMounted(async () => {
             width="125"
           >
             <template #default="{ row }">
-              <el-input-number
-                v-if="detail.canEdit && ['Completed', 'Makeup'].includes(row.participationStatus)"
-                :model-value="itemScore(row, item.id)?.score"
-                :min="0"
-                :max="100"
-                :step="0.5"
-                :controls="false"
-                size="small"
-                @update:model-value="(value: number | undefined) => { const target = itemScore(row, item.id); if (target) target.score = value }"
-              />
-              <span v-else>{{ itemScore(row, item.id)?.score ?? '—' }}</span>
+              <div
+                data-score-grid="experiment-grade-entry"
+                :data-score-row="detail.records.indexOf(row)"
+                :data-score-column="detail.items.indexOf(item)"
+                @keydown="handleScoreGridKeydown"
+              >
+                <el-input-number
+                  v-if="detail.canEdit && ['Completed', 'Makeup'].includes(row.participationStatus)"
+                  :model-value="itemScore(row, item.id)?.score"
+                  :min="0"
+                  :max="100"
+                  :step="0.5"
+                  :controls="false"
+                  size="small"
+                  @update:model-value="(value: number | undefined) => { const target = itemScore(row, item.id); if (target) target.score = value }"
+                />
+                <span v-else>{{ itemScore(row, item.id)?.score ?? '—' }}</span>
+              </div>
             </template>
           </el-table-column>
           <el-table-column label="安全违规" width="105">
@@ -839,11 +884,14 @@ onMounted(async () => {
           <div>
             <b v-if="detail.reviewComment">审核意见：{{ detail.reviewComment }}</b>
             <span>开课学院：{{ detail.courseCollegeName }}</span>
+            <small v-if="detail.canEdit" class="autosave-state">
+              {{ autoSaveState === 'saving' ? '正在自动保存…' : autoSaveState === 'saved' ? '已自动保存' : autoSaveState === 'error' ? '自动保存失败，请手动保存' : '停止编辑 1 分钟后自动保存' }}
+            </small>
           </div>
           <div>
             <el-button v-if="detail.canEdit" :icon="Download" @click="downloadTemplate">下载模板</el-button>
             <el-button v-if="detail.canEdit" :icon="Upload" :loading="saving" @click="chooseImportFile">Excel 导入</el-button>
-            <el-button v-if="detail.canEdit" :icon="EditPen" :loading="saving" @click="saveRecords">保存本页</el-button>
+            <el-button v-if="detail.canEdit" :icon="EditPen" :loading="saving" @click="saveRecords()">保存本页</el-button>
             <el-button v-if="detail.canEdit" type="primary" :icon="Promotion" @click="submitSheet">提交审核</el-button>
             <el-button v-if="detail.canReview" type="danger" plain @click="returnSheet">退回修改</el-button>
             <el-button v-if="detail.canReview" type="success" :icon="Check" @click="approveSheet">审核通过</el-button>
diff --git a/web/src/views/GradesView.vue b/web/src/views/GradesView.vue
index 73f1336..6eb6fd1 100644
--- a/web/src/views/GradesView.vue
+++ b/web/src/views/GradesView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import {
   Check,
   ArrowRight,
@@ -18,9 +18,11 @@ import { downloadApiFile, importExcel } from '../api/excel'
 import { useAuthStore } from '../stores/auth'
 import { useRouter } from 'vue-router'
 import { academicTermLabel, academicTermOptionClass, defaultAcademicTermId } from '../utils/academicTerms'
+import { useScoreGridNavigation } from '../utils/scoreGridNavigation'
 
 const auth = useAuthStore()
 const router = useRouter()
+const { handleScoreGridKeydown } = useScoreGridNavigation('course-grade-entry')
 const isStudent = computed(() => auth.user?.roles.includes('Student') &&
   !auth.user.roles.some((role) =>
     ['SuperAdmin', 'AcademicAdmin', 'CollegeAdmin', 'Teacher'].includes(role)))
@@ -53,6 +55,10 @@ const createForm = reactive({
 const newItemName = ref('')
 const newItemWeight = ref(0)
 const returnComment = ref('')
+const autoSaveState = ref<'idle' | 'saving' | 'saved' | 'error'>('idle')
+let autoSaveTimer: ReturnType<typeof setTimeout> | undefined
+let savedRecordSnapshot = ''
+let autoSaving = false
 
 const presetItems = ['实验', '实习', '课程设计', '作业', '课堂表现', '期中']
 
@@ -199,6 +205,7 @@ async function loadDetail() {
     detail.value.canEdit = response.canEdit
     detail.value.canReview = response.canReview
     detail.value.canPublish = response.canPublish
+    savedRecordSnapshot = gradeRecordSnapshot()
     if (!detail.value.items?.some((item: any) => item.id === experimentGradeItemId.value)) {
       experimentGradeItemId.value =
         detail.value.items?.find((item: any) => item.name.includes('实验'))?.id
@@ -260,28 +267,62 @@ async function createSheet() {
   }
 }
 
-async function saveRecords() {
+function gradeRecordPayload() {
+  return detail.value.records.map((record: any) => ({
+    id: record.id,
+    regularScore: record.regularScore,
+    finalScore: record.finalScore,
+    itemScores: record.itemScores?.map((itemScore: any) => ({
+      gradeItemId: itemScore.gradeItemId,
+      score: itemScore.score,
+    })),
+    examStatus: record.examStatus,
+    notes: record.notes,
+  }))
+}
+
+function gradeRecordSnapshot() {
+  return detail.value ? JSON.stringify(gradeRecordPayload()) : ''
+}
+
+function scheduleAutoSave() {
+  if (!detail.value?.canEdit || gradeRecordSnapshot() === savedRecordSnapshot) return
+  autoSaveState.value = 'idle'
+  clearTimeout(autoSaveTimer)
+  autoSaveTimer = setTimeout(() => { void saveRecords(true) }, 60_000)
+}
+
+async function saveRecords(automatic = false) {
+  if (!detail.value || (automatic && autoSaving)) return
+  const records = gradeRecordPayload()
+  const snapshot = JSON.stringify(records)
+  if (automatic) {
+    autoSaving = true
+    autoSaveState.value = 'saving'
+  }
   try {
     await http.put(`/grades/sheets/${detail.value.id}/records`, {
-      records: detail.value.records.map((record: any) => ({
-        id: record.id,
-        regularScore: record.regularScore,
-        finalScore: record.finalScore,
-        itemScores: record.itemScores?.map((itemScore: any) => ({
-          gradeItemId: itemScore.gradeItemId,
-          score: itemScore.score,
-        })),
-        examStatus: record.examStatus,
-        notes: record.notes,
-      })),
+      records,
     })
-    ElMessage.success('成绩已保存并重新计算总评')
-    await loadDetail()
+    savedRecordSnapshot = snapshot
+    if (automatic) autoSaveState.value = 'saved'
+    else {
+      ElMessage.success('成绩已保存并重新计算总评')
+      await loadDetail()
+    }
   } catch (error) {
-    ElMessage.error(apiErrorMessage(error))
+    if (automatic) autoSaveState.value = 'error'
+    else ElMessage.error(apiErrorMessage(error))
+  } finally {
+    if (automatic) {
+      autoSaving = false
+      if (gradeRecordSnapshot() !== savedRecordSnapshot) scheduleAutoSave()
+    }
   }
 }
 
+watch(() => detail.value?.records, scheduleAutoSave, { deep: true })
+
 async function importExperimentScores() {
   if (!experimentGradeItemId.value) {
     ElMessage.warning('请先选择用于承接实验成绩的课程成绩项。')
@@ -636,7 +677,14 @@ onMounted(async () => {
                 </el-table-column>
                 <el-table-column :label="`平时 ${detail.regularWeight}%`" width="110">
                   <template #default="{ row }">
-                    <div class="score-cell" :class="{ 'is-failed': isFailingScore(row.regularScore) }">
+                    <div
+                      class="score-cell"
+                      :class="{ 'is-failed': isFailingScore(row.regularScore) }"
+                      data-score-grid="course-grade-entry"
+                      :data-score-row="detail.records.indexOf(row)"
+                      data-score-column="0"
+                      @keydown="handleScoreGridKeydown"
+                    >
                       <el-input-number
                         v-if="detail.canEdit && ['Normal', 'Deferred'].includes(row.examStatus)"
                         v-model="row.regularScore"
@@ -653,7 +701,14 @@ onMounted(async () => {
                   :width="item.sourceType === 'ExperimentSummary' ? 150 : 110"
                 >
                   <template #default="{ row }">
-                    <div class="score-cell" :class="{ 'is-failed': isFailingScore(itemScore(row, item.id)?.score) }">
+                    <div
+                      class="score-cell"
+                      :class="{ 'is-failed': isFailingScore(itemScore(row, item.id)?.score) }"
+                      data-score-grid="course-grade-entry"
+                      :data-score-row="detail.records.indexOf(row)"
+                      :data-score-column="detail.items.indexOf(item) + 1"
+                      @keydown="handleScoreGridKeydown"
+                    >
                       <el-input-number
                         v-if="detail.canEdit && ['Normal', 'Deferred'].includes(row.examStatus) && item.sourceType !== 'ExperimentSummary'"
                         :model-value="itemScore(row, item.id)?.score"
@@ -669,7 +724,14 @@ onMounted(async () => {
                 </el-table-column>
                 <el-table-column :label="`期末 ${detail.finalWeight}%`" width="110">
                   <template #default="{ row }">
-                    <div class="score-cell" :class="{ 'is-failed': isFailingScore(row.finalScore) }">
+                    <div
+                      class="score-cell"
+                      :class="{ 'is-failed': isFailingScore(row.finalScore) }"
+                      data-score-grid="course-grade-entry"
+                      :data-score-row="detail.records.indexOf(row)"
+                      :data-score-column="detail.items.length + 1"
+                      @keydown="handleScoreGridKeydown"
+                    >
                       <el-input-number
                         v-if="detail.canEdit && row.examStatus === 'Normal'"
                         v-model="row.finalScore"
@@ -730,6 +792,9 @@ onMounted(async () => {
                 <small v-if="detail.needsCollegeReview && (detail.status === 'Submitted' || detail.status === 'Approved')" class="college-hint">
                   开课学院：{{ detail.needsCollegeReview }}
                 </small>
+                <small v-if="detail.canEdit" class="autosave-state">
+                  {{ autoSaveState === 'saving' ? '正在自动保存…' : autoSaveState === 'saved' ? '已自动保存' : autoSaveState === 'error' ? '自动保存失败，请手动保存' : '停止编辑 1 分钟后自动保存' }}
+                </small>
               </div>
               <div class="grade-actions-buttons">
                 <div v-if="detail.canEdit && detail.items?.length" class="experiment-import">
@@ -749,7 +814,7 @@ onMounted(async () => {
                 </div>
                 <el-button v-if="detail.canEdit" :icon="Download" @click="downloadTemplate">下载模板</el-button>
                 <el-button v-if="detail.canEdit" :icon="Upload" @click="chooseImportFile">Excel导入</el-button>
-                <el-button v-if="detail.canEdit" :icon="EditPen" @click="saveRecords">保存成绩</el-button>
+                <el-button v-if="detail.canEdit" :icon="EditPen" @click="saveRecords()">保存成绩</el-button>
                 <el-button v-if="detail.canEdit" type="primary" :icon="Promotion" @click="submitSheet">提交审核</el-button>
                 <el-button v-if="detail.canReview" type="danger" plain @click="openReturn">退回修改</el-button>
                 <el-button v-if="detail.canReview" type="success" :icon="Check" @click="approveSheet">审核通过</el-button>