From 613a28a6b995f6754de2a804cb38c211495d84ea Mon Sep 17 00:00:00 2001
From: chenyuan <chenyuan@example.com>
Date: Mon, 21 Sep 2026 11:31:07 +0800
Subject: [PATCH] feat: extend exam question template and assessment flow

---
 src/api/exam.js                      |   2 +-
 src/views/teacherEnd/exam/editor.vue | 137 +++++++++++++++++++++++----
 src/views/teacherEnd/exam/index.vue  |  55 +++++++++--
 3 files changed, 165 insertions(+), 29 deletions(-)

diff --git a/src/api/exam.js b/src/api/exam.js
index 3163111..83cdd3b 100644
--- a/src/api/exam.js
+++ b/src/api/exam.js
@@ -9,7 +9,7 @@ export const updateQuestion = (id, data) => request({ url: `${base}/teacher/ques
 export const deleteQuestion = (id) => request({ url: `${base}/teacher/questions/${id}`, method: "delete" });
 export const uploadQuestionAttachment = (data) => request({ url: `${base}/teacher/questions/attachment`, method: "post", data, headers: { "Content-Type": "multipart/form-data" } });
 export const importQuestions = (data) => request({ url: `${base}/teacher/questions/import`, method: "post", data, headers: { "Content-Type": "multipart/form-data" } });
-export const downloadQuestionTemplate = () => request({ url: `${base}/teacher/questions/template`, method: "get", responseType: "blob" });
+export const downloadQuestionTemplate = (format = "word") => request({ url: `${base}/teacher/questions/template`, method: "get", params: { format }, responseType: "blob" });
 
 export const getTeacherExams = (params) => request({ url: `${base}/teacher`, method: "get", params });
 export const getTeacherExam = (id) => request({ url: `${base}/teacher/${id}`, method: "get" });
diff --git a/src/views/teacherEnd/exam/editor.vue b/src/views/teacherEnd/exam/editor.vue
index 80c66e5..22a5dce 100644
--- a/src/views/teacherEnd/exam/editor.vue
+++ b/src/views/teacherEnd/exam/editor.vue
@@ -26,7 +26,10 @@
 
     <section v-if="!inProgress && activeStep === 1" class="editor-panel question-stage">
       <header class="section-head"><div><h2>选择试题</h2><p>勾选题目并设置该题分值，选择结果实时同步到试卷概览</p></div>
-        <div class="import-actions"><el-button :icon="Download" @click="downloadTemplate">导入模板</el-button><el-upload :show-file-list="false" accept=".docx" :http-request="importPaperQuestions"><el-button type="primary" plain :icon="Upload">导入 Word 试题</el-button></el-upload></div>
+        <div class="import-tools">
+          <div class="import-actions"><el-button class="template-button" :icon="Download" @click="downloadTemplate">下载 Word 模板</el-button><el-upload class="word-upload" :show-file-list="false" accept=".docx" :http-request="importPaperQuestions"><el-button type="primary" :icon="Upload">导入 Word 试题</el-button></el-upload></div>
+          <span class="import-hint">按模板填写后上传，系统会解析题干、选项、答案和解析，并自动选中题目</span>
+        </div>
       </header>
       <div class="question-layout">
         <aside class="type-nav">
@@ -105,27 +108,119 @@ function formatValue(value) { const date = value instanceof Date ? value : new D
 </script>
 
 <style scoped lang="scss">
-.exam-editor { color: #1f2937; padding-bottom: 84px; }
-.editor-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #e5e7eb; padding-bottom: 14px; > :last-child { justify-self: end; } }
-.title-block { display: flex; align-items: center; gap: 10px; h1 { margin: 0; font-size: 23px; letter-spacing: 0; } }
-.steps { max-width: 760px; margin: 28px auto; }
-.editor-panel { width: 100%; max-width: none; margin: auto; h2 { font-size: 19px; margin: 0 0 22px; } }
-.base-form { max-width: 650px; .el-input, .el-select { width: 100%; } .el-date-editor { width: 100%; } }
-.unit { margin-left: 8px; color: #6b7280; }
-.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; h2 { margin: 0; } p { margin: 6px 0 0; color: #6b7280; } }
-.import-actions { display: flex; gap: 8px; }
-.question-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; }
-.type-nav { border-right: 1px solid #e5e7eb; padding-right: 14px; button { width: 100%; border: 0; background: transparent; padding: 12px; display: flex; justify-content: space-between; color: #4b5563; cursor: pointer; border-radius: 4px; &.active { color: #0f5d72; background: #eaf5f7; } b { font-weight: 600; } } }
+.exam-editor {
+  --exam-line: rgba(57, 174, 224, 0.28);
+  --exam-line-soft: rgba(57, 174, 224, 0.16);
+  --exam-panel: rgba(2, 18, 31, 0.58);
+  --exam-text: #e8f6ff;
+  --exam-muted: #8fb6d0;
+  color: var(--exam-text);
+  padding-bottom: 92px;
+}
+
+.editor-head {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 2px 0 16px;
+  border-bottom: 1px solid var(--exam-line);
+  > :last-child { justify-self: end; }
+  :deep(.el-button) { font-weight: 700; }
+  :deep(.el-button:not(.el-button--primary)) { color: #9edcff; }
+  :deep(.el-button:not(.el-button--primary):hover) { color: #fff; background: rgba(20, 116, 160, 0.24); }
+}
+
+.title-block {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  h1 {
+    margin: 0;
+    color: #f3fbff;
+    font-size: 24px;
+    font-weight: 800;
+    letter-spacing: 0.02em;
+    text-shadow: 0 0 18px rgba(65, 201, 255, 0.18);
+  }
+}
+
+.steps {
+  max-width: 820px;
+  margin: 28px auto 34px;
+  :deep(.el-step__title) { color: #7597ad; font-size: 15px; font-weight: 700; }
+  :deep(.el-step__title.is-process) { color: #e9fbff; }
+  :deep(.el-step__title.is-finish) { color: #bceeff; }
+  :deep(.el-step__head.is-process) { color: #6fe2ff; border-color: #42c9f5; }
+  :deep(.el-step__head.is-finish) { color: #62d9df; border-color: #36bfc6; }
+  :deep(.el-step__head.is-wait) { color: #628399; border-color: rgba(96, 151, 180, 0.58); }
+  :deep(.el-step__icon) { background: #071a2a; }
+  :deep(.el-step__icon-inner) { font-weight: 800; }
+  :deep(.el-step__line) { background-color: rgba(77, 157, 193, 0.38); }
+  :deep(.el-step__line-inner) { border-color: #40c7e7; }
+}
+
+.editor-panel {
+  width: 100%;
+  max-width: 1180px;
+  margin: auto;
+  padding: 0 24px 26px;
+  box-sizing: border-box;
+  h2 {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0 0 24px;
+    color: #eaf9ff;
+    font-size: 20px;
+    font-weight: 800;
+    &::before { width: 4px; height: 20px; border-radius: 4px; background: linear-gradient(#61e5ff, #168dd1); content: ''; }
+  }
+}
+
+.base-form {
+  max-width: 820px;
+  padding: 22px 26px 12px;
+  border: 1px solid var(--exam-line-soft);
+  border-radius: 12px;
+  background: var(--exam-panel);
+  box-shadow: inset 0 1px 0 rgba(161, 229, 255, 0.04);
+  :deep(.el-form-item) { margin-bottom: 20px; }
+  :deep(.el-form-item__label) { color: #d4efff; font-weight: 700; }
+  :deep(.el-form-item__error) { color: #ff9c91; }
+  :deep(.el-input), :deep(.el-select), :deep(.el-date-editor) { width: 100%; }
+  :deep(.el-input__wrapper), :deep(.el-select__wrapper) {
+    min-height: 40px;
+    border: 1px solid rgba(52, 169, 218, 0.48);
+    background: rgba(3, 27, 43, 0.86);
+    box-shadow: none;
+  }
+  :deep(.el-input__wrapper:hover), :deep(.el-input__wrapper.is-focus), :deep(.el-select__wrapper:hover), :deep(.el-select__wrapper.is-focused) { border-color: #3cc8f2; box-shadow: 0 0 0 3px rgba(20, 164, 218, 0.12); }
+  :deep(.el-input__inner), :deep(.el-select__selected-item), :deep(.el-select__placeholder), :deep(.el-range-input) { color: #eaf8ff; }
+  :deep(.el-input__count-inner) { color: #8fb6d0; background: transparent; }
+  :deep(.el-input-number) { width: 180px; }
+  :deep(.el-input-number .el-input__wrapper) { padding-right: 58px; }
+  :deep(.el-input-number__decrease), :deep(.el-input-number__increase) { color: #bdeaff; background: rgba(16, 82, 111, 0.55); border-color: rgba(56, 162, 207, 0.34); }
+  :deep(.el-switch__label) { color: #75b9dd; }
+  :deep(.el-switch__label.is-active) { color: #43c3ff; }
+}
+
+.unit { margin-left: 10px; color: var(--exam-muted); }
+.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 18px; h2 { margin: 0; } p { margin: 6px 0 0; color: var(--exam-muted); } }
+.import-tools { display: grid; justify-items: end; gap: 8px; }
+.import-actions { display: flex; gap: 8px; :deep(.el-button) { height: 38px; border-radius: 8px; font-weight: 700; } :deep(.template-button) { color: #b9e8fa; border-color: rgba(86, 173, 212, 0.48); background: rgba(12, 67, 93, 0.5); } :deep(.template-button:hover) { color: #fff; border-color: #4acbf0; background: rgba(18, 111, 149, 0.62); } :deep(.word-upload .el-button) { border-color: rgba(48, 185, 255, 0.85); background: linear-gradient(135deg, #078dce, #1557d6); } }
+.import-hint { max-width: 420px; color: #7faec5; font-size: 12px; line-height: 1.45; text-align: right; }
+.question-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; }
+.type-nav { align-self: start; display: grid; gap: 5px; padding: 10px; border: 1px solid var(--exam-line-soft); border-radius: 12px; background: rgba(2, 18, 31, 0.72); box-shadow: inset 0 1px 0 rgba(161, 229, 255, 0.04); button { appearance: none; -webkit-appearance: none; width: 100%; border: 1px solid transparent; background: transparent !important; padding: 12px; display: flex; justify-content: space-between; color: #9ab9ce !important; cursor: pointer; border-radius: 8px; font: inherit; text-align: left; &.active { color: #e4fbff !important; border-color: rgba(55, 197, 235, 0.34); background: rgba(11, 112, 151, 0.28) !important; } &:hover { color: #fff !important; background: rgba(24, 117, 158, 0.2) !important; } b { font-weight: 700; color: #74d4ec; } } }
 .question-list { min-width: 0; }
-.question-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 16px 12px; border-bottom: 1px solid #e5e7eb; &.selected { background: #f3fafb; } h3 { font-size: 15px; line-height: 1.6; margin: 0; font-weight: 600; } }
-.options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 20px; color: #6b7280; margin-top: 9px; }
-.score-input { display: flex; align-items: center; gap: 6px; .el-input-number { width: 104px; } }
-.score-summary { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid #d9e1e5; margin-bottom: 18px; > div { padding: 16px; border-right: 1px solid #d9e1e5; display: grid; gap: 5px; &:last-child { border-right: 0; } span, small { color: #6b7280; } strong { font-size: 24px; color: #154f5f; } } .total { background: #edf7f4; } }
-.anchor-nav { display: flex; gap: 8px; margin: 18px 0; button { border: 1px solid #b9cdd3; background: white; color: #176b87; padding: 7px 14px; border-radius: 4px; cursor: pointer; } }
-.paper-section { scroll-margin-top: 20px; border-top: 2px solid #1f6f78; padding-top: 16px; margin-top: 26px; h3 { font-size: 17px; } }
-.paper-question { display: grid; grid-template-columns: 26px 1fr; padding: 12px 0; border-bottom: 1px solid #eef1f3; h4 { margin: 0 0 8px; line-height: 1.6; font-weight: 500; b { float: right; color: #176b87; } } p { margin: 4px 0; color: #4b5563; } }
-.editor-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; display: flex; justify-content: center; align-items: center; gap: 12px; background: rgba(255,255,255,.96); border-top: 1px solid #e5e7eb; z-index: 10; }
-@media (max-width: 760px) { .editor-head { grid-template-columns: 1fr; gap: 12px; .title-block { grid-row: 1; } > :last-child { justify-self: start; } } .question-layout { grid-template-columns: 1fr; } .type-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #e5e7eb; } .score-summary { grid-template-columns: 1fr 1fr; } .section-head { align-items: flex-start; flex-direction: column; gap: 12px; } }
+.question-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 16px 14px; border-bottom: 1px solid var(--exam-line-soft); &.selected { background: rgba(17, 120, 155, 0.14); } h3 { color: #e7f7ff; font-size: 15px; line-height: 1.6; margin: 0; font-weight: 600; } }
+.options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 20px; color: #9abbd0; margin-top: 9px; }
+.score-input { display: flex; align-items: center; gap: 6px; color: #bde9f7; :deep(.el-input-number) { width: 104px; } }
+.score-summary { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--exam-line); border-radius: 10px; overflow: hidden; margin-bottom: 18px; > div { padding: 16px; border-right: 1px solid var(--exam-line-soft); display: grid; gap: 5px; &:last-child { border-right: 0; } span, small { color: #8fb6d0; } strong { font-size: 24px; color: #8ee9ff; } } .total { background: rgba(18, 116, 124, 0.24); } }
+.anchor-nav { display: flex; gap: 8px; margin: 18px 0; button { border: 1px solid rgba(73, 181, 218, 0.46); background: rgba(7, 56, 82, 0.52); color: #8cdef4; padding: 7px 14px; border-radius: 6px; cursor: pointer; } }
+.paper-section { scroll-margin-top: 20px; border-top: 2px solid #1f9db5; padding-top: 16px; margin-top: 26px; h3 { color: #e9fbff; font-size: 17px; } }
+.paper-question { display: grid; grid-template-columns: 26px 1fr; padding: 12px 0; border-bottom: 1px solid var(--exam-line-soft); h4 { margin: 0 0 8px; color: #e5f5ff; line-height: 1.6; font-weight: 500; b { float: right; color: #70ddf8; } } p { margin: 4px 0; color: #9dbfd2; } }
+.editor-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 76px; display: flex; justify-content: center; align-items: center; gap: 12px; background: linear-gradient(180deg, rgba(4, 24, 38, 0.86), rgba(2, 13, 24, 0.98)); border-top: 1px solid rgba(66, 181, 225, 0.34); box-shadow: 0 -12px 32px rgba(0, 8, 18, 0.28); backdrop-filter: blur(14px); z-index: 10; :deep(.el-button) { min-width: 112px; height: 40px; border-radius: 8px; font-weight: 700; } :deep(.el-button:not(.el-button--primary)) { color: #b9e8fa; border-color: rgba(86, 173, 212, 0.42); background: rgba(12, 67, 93, 0.45); } }
+@media (max-width: 760px) { .editor-head { grid-template-columns: 1fr; gap: 12px; .title-block { grid-row: 1; } > :last-child { justify-self: start; } } .question-layout { grid-template-columns: 1fr; } .type-nav { display: flex; overflow-x: auto; border: 1px solid var(--exam-line-soft); } .score-summary { grid-template-columns: 1fr 1fr; } .section-head { align-items: flex-start; flex-direction: column; gap: 12px; } .import-tools { justify-items: start; width: 100%; } .import-hint { max-width: none; text-align: left; } }
 </style>
 
 <style lang="scss">
diff --git a/src/views/teacherEnd/exam/index.vue b/src/views/teacherEnd/exam/index.vue
index 86ffc10..3e864b2 100644
--- a/src/views/teacherEnd/exam/index.vue
+++ b/src/views/teacherEnd/exam/index.vue
@@ -15,10 +15,27 @@
           <el-input v-model="questionQuery.keyword" placeholder="搜索题干" clearable :prefix-icon="Search" @keyup.enter="loadQuestions" />
           <el-button :icon="Search" @click="loadQuestions">查询</el-button>
           <div class="toolbar-spacer" />
-          <el-button :icon="Download" @click="downloadTemplate">下载导入模板</el-button>
-          <el-upload :show-file-list="false" accept=".docx" :http-request="doImport">
-            <el-button :icon="Upload">Word 批量导入</el-button>
-          </el-upload>
+          <div class="toolbar-actions">
+            <el-dropdown trigger="click" @command="downloadTemplate">
+              <el-button :icon="Download">下载模板<el-icon class="el-icon--right"><ArrowDown /></el-icon></el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="word">Word 导入模板</el-dropdown-item>
+                  <el-dropdown-item command="excel">Excel 导入模板</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <el-dropdown trigger="click" @command="openImportPicker">
+              <el-button type="primary" :icon="Upload" :loading="importing">批量导入<el-icon class="el-icon--right"><ArrowDown /></el-icon></el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="word">导入 Word 文件</el-dropdown-item>
+                  <el-dropdown-item command="excel">导入 Excel 文件</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <input ref="importInput" class="import-file-input" type="file" :accept="importAccept" @change="handleImportFile" />
+          </div>
         </section>
         <el-table v-loading="loading" :data="questions" class="data-table">
           <el-table-column label="题型" width="110"><template #default="{ row }"><el-tag :type="typeTone[row.type]">{{ typeName[row.type] }}</el-tag></template></el-table-column>
@@ -102,8 +119,10 @@ import * as examApi from "@/api/exam";
 
 const router = useRouter();
 const activeTab = ref("questions");
-const loading = ref(false); const saving = ref(false); const questions = ref([]); const exams = ref([]); const examKeyword = ref("");
+const loading = ref(false); const saving = ref(false); const importing = ref(false); const questions = ref([]); const exams = ref([]); const examKeyword = ref("");
 const questionDialog = ref(false); const questionFormRef = ref();
+const importInput = ref(); const importFormat = ref("word");
+const importAccept = computed(() => importFormat.value === "word" ? ".docx" : ".xls,.xlsx");
 const typeOptions = [{ label: "单选题", value: "SINGLE" }, { label: "多选题", value: "MULTIPLE" }, { label: "判断题", value: "TRUE_FALSE" }, { label: "简答题", value: "SHORT_ANSWER" }];
 const typeName = Object.fromEntries(typeOptions.map((item) => [item.value, item.label]));
 const typeTone = { SINGLE: "", MULTIPLE: "success", TRUE_FALSE: "warning", SHORT_ANSWER: "info" };
@@ -126,8 +145,10 @@ function deleteOption(index) { const [removed] = questionForm.options.splice(ind
 async function saveQuestion() { await questionFormRef.value.validate(); if (isChoice.value && (!questionForm.answer.length || questionForm.options.some((item) => !item.content.trim()))) return ElMessage.warning("请补全选项并设置正确答案"); saving.value = true; try { questionForm.id ? await examApi.updateQuestion(questionForm.id, questionForm) : await examApi.createQuestion(questionForm); ElMessage.success("题目已保存"); questionDialog.value = false; loadQuestions(); } finally { saving.value = false; } }
 async function removeQuestion(row) { await ElMessageBox.confirm("删除后无法恢复，确认删除该题目？", "删除题目", { type: "warning" }); await examApi.deleteQuestion(row.id); ElMessage.success("已删除"); loadQuestions(); }
 async function uploadMaterial({ file }) { const form = new FormData(); form.append("file", file); const { data } = await examApi.uploadQuestionAttachment(form); questionForm.attachmentName = data.name; questionForm.attachmentUrl = data.url; ElMessage.success("资料已上传"); }
-async function doImport({ file }) { const form = new FormData(); form.append("file", file); const { data } = await examApi.importQuestions(form); ElMessage.success(`成功导入 ${data.length} 道题`); loadQuestions(); }
-async function downloadTemplate() { saveAs(await examApi.downloadQuestionTemplate(), "考试题库导入模板.docx"); }
+function openImportPicker(format) { importFormat.value = format; importInput.value.value = ""; importInput.value.click(); }
+async function handleImportFile(event) { const [file] = event.target.files; if (!file) return; await doImport({ file }); }
+async function doImport({ file }) { importing.value = true; try { const form = new FormData(); form.append("file", file); const { data } = await examApi.importQuestions(form); ElMessage.success(`成功导入 ${data.length} 道题`); loadQuestions(); } finally { importing.value = false; if (importInput.value) importInput.value.value = ""; } }
+async function downloadTemplate(format) { const extension = format === "excel" ? "xlsx" : "docx"; saveAs(await examApi.downloadQuestionTemplate(format), `考试题库${format === "excel" ? "Excel" : "Word"}导入模板.${extension}`); }
 async function publish(row) { await ElMessageBox.confirm(`确认发布“${row.name}”？发布后将在设定时间自动开始。`, "发布考试", { type: "warning" }); await examApi.publishExam(row.id); ElMessage.success("已发布"); loadExams(); }
 async function withdraw(row) { await examApi.withdrawExam(row.id); ElMessage.success("已撤回"); loadExams(); }
 async function removeExam(row) { await ElMessageBox.confirm(`确认永久删除“${row.name}”？仅在已导出全部答卷后允许删除。`, "删除考试", { type: "warning", confirmButtonText: "确认删除" }); await examApi.deleteExam(row.id); ElMessage.success("已删除"); loadExams(); }
@@ -243,6 +264,16 @@ function formatTime(value) { return value ? new Date(value).toLocaleString("zh-C
   flex: 1;
 }
 
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.import-file-input {
+  display: none;
+}
+
 :deep(.toolbar .el-input__wrapper),
 :deep(.toolbar .el-select__wrapper) {
   min-height: 38px;
@@ -438,6 +469,16 @@ function formatTime(value) { return value ? new Date(value).toLocaleString("zh-C
     display: none;
   }
 
+  .toolbar-actions {
+    align-items: stretch;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .toolbar-actions :deep(.el-dropdown) {
+    width: 100%;
+  }
+
   .toolbar .el-input,
   .toolbar .el-select {
     width: 100%;