From d77b307457532e8814260e0a8b65adfaba32ef00 Mon Sep 17 00:00:00 2001
From: qinzhenpen <qzp1807@126.com>
Date: Thu, 15 Oct 2026 11:26:48 +0800
Subject: [PATCH] refactor(task-review): enhance scoring interface and improve
 user interactions

- Introduced a new button for batch AI scoring alongside the existing batch scoring functionality.
- Replaced the inline input for teacher scores with a button that opens a dedicated score dialog for better user experience.
- Improved the layout of the task review panel, including the addition of action buttons for viewing reference answers and AI assistance.
- Updated dialog components for single and batch scoring to enhance usability and visual consistency.
---
 .../teacherEnd/score/TaskReviewPanel.vue      | 1203 ++++++++++++++---
 1 file changed, 995 insertions(+), 208 deletions(-)

diff --git a/src/views/teacherEnd/score/TaskReviewPanel.vue b/src/views/teacherEnd/score/TaskReviewPanel.vue
index 5cb50bd..0e00aca 100644
--- a/src/views/teacherEnd/score/TaskReviewPanel.vue
+++ b/src/views/teacherEnd/score/TaskReviewPanel.vue
@@ -21,20 +21,12 @@
 
       <div class="task-review__list-head">
         <span>学生列表（{{ review.students.length }}）</span>
-        <el-button type="primary" size="small" :disabled="!canBatchScore" @click="batchDialogVisible = true">批量打分</el-button>
+        <div class="task-review__list-actions">
+          <el-button type="default" size="small" :disabled="!canBatchScore" @click="onBatchAiScore">批量AI评分</el-button>
+          <el-button type="primary" size="small" :disabled="!canBatchScore" @click="batchDialogVisible = true">批量打分</el-button>
+        </div>
       </div>
-      <el-table
-        ref="studentTableRef"
-        class="task-review__student-table"
-        :data="review.students"
-        border
-        size="small"
-        row-key="studentUserId"
-        highlight-current-row
-        :row-class-name="studentRowClass"
-        @selection-change="onSelectionChange"
-        @row-click="selectStudent"
-      >
+      <el-table ref="studentTableRef" class="task-review__student-table" :data="review.students" border size="small" row-key="studentUserId" highlight-current-row :row-class-name="studentRowClass" @selection-change="onSelectionChange" @row-click="selectStudent">
         <el-table-column type="selection" width="42" :selectable="canSelectStudent" />
         <el-table-column prop="name" label="姓名" width="86" show-overflow-tooltip />
         <el-table-column prop="username" label="学号" width="102" show-overflow-tooltip />
@@ -43,18 +35,7 @@
         </el-table-column>
         <el-table-column label="老师评分" min-width="104" align="center">
           <template #default="{ row }">
-            <el-input-number
-              v-if="canManageClass && row.scorable"
-              v-model="row.teacherScoreDraft"
-              class="task-review__score-input"
-              :min="0"
-              :max="100"
-              :precision="0"
-              :controls="false"
-              placeholder="评分"
-              @change="saveSingleScore(row)"
-              @click.stop
-            />
+            <el-button v-if="canManageClass && row.scorable" type="primary" size="small" text @click="openScoreDialog(row)">评阅</el-button>
             <el-tag v-else-if="!row.scorable" size="small" type="info">未完成</el-tag>
             <span v-else>{{ formatScore(row.teacherScore) }}</span>
           </template>
@@ -70,39 +51,196 @@
             <h2>{{ selectedStudent.name || selectedStudent.username }}</h2>
             <p>{{ review.selectedTask.projectName }} · {{ review.selectedTask.taskName }}</p>
           </div>
-          <div class="task-review__scores">
-            <span>AI评分 <strong>{{ formatScore(selectedStudent.aiAssessmentScore) }}</strong></span>
-            <span>老师评分 <strong>{{ formatScore(selectedStudent.teacherScore) }}</strong></span>
+          <div class="task-review__head-actions">
+            <button type="button" class="task-review__action-btn" @click="onViewReferenceAnswer">
+              <el-icon><DocumentCopy /></el-icon>
+              查看参考答案
+            </button>
+            <button type="button" class="task-review__action-btn task-review__action-btn--primary" @click="onAiAssistEvaluation">
+              <el-icon><CirclePlus /></el-icon>
+              AI助评
+            </button>
           </div>
         </header>
+        <div class="task-review__scores-section">
+          <div class="task-review__scores">
+            <button type="button" class="task-review__score-item" @click="showAiScoreDetail">
+              <span class="task-review__score-label">AI评分</span>
+              <strong class="task-review__score-value">{{ formatScore(selectedStudent.aiAssessmentScore) }}</strong>
+            </button>
+            <span class="task-review__score-item">
+              <span class="task-review__score-label">老师评分</span>
+              <strong class="task-review__score-value">{{ formatScore(selectedStudent.teacherScore) }}</strong>
+            </span>
+          </div>
+        </div>
         <div v-if="studentPreviewSrc" class="task-review__student-preview-scroll">
-          <iframe
-            :key="studentPreviewSrc"
-            class="task-review__student-preview"
-            :src="studentPreviewSrc"
-            :style="{ height: `${previewFrameHeight}px` }"
-            scrolling="yes"
-            title="学生任务页面只读预览"
-          />
+          <iframe :key="studentPreviewSrc" class="task-review__student-preview" :src="studentPreviewSrc" :style="{ height: `${previewFrameHeight}px` }" scrolling="yes" title="学生任务页面只读预览" />
         </div>
         <el-empty v-else :description="studentPreviewError || '当前任务暂不支持页面预览'" :image-size="104" />
       </template>
       <el-empty v-else description="请选择教学班和实训任务后查看学生任务步骤" :image-size="128" />
     </section>
 
-    <el-dialog v-model="batchDialogVisible" title="批量打分" width="420px" append-to-body @closed="batchScore = null">
-      <p class="task-review__batch-copy">请给该实训任务下已选中的学生批量打分</p>
-      <el-input-number v-model="batchScore" :min="0" :max="100" :precision="0" :controls="false" class="task-review__batch-input" placeholder="请输入0-100分" />
+    <el-dialog v-model="singleScoreDialogVisible" width="480px" append-to-body :show-close="false" class="score-review-dialog" @closed="resetSingleScoreForm">
+      <template #header>
+        <div class="dialog-header">
+          <div class="dialog-header-main">
+            <span class="dialog-badge">
+              <el-icon><EditPen /></el-icon>
+              任务评阅
+            </span>
+            <h3 class="dialog-title">{{ singleScoreForm.studentName }}</h3>
+          </div>
+          <button type="button" class="dialog-close" @click="singleScoreDialogVisible = false">
+            <el-icon><Close /></el-icon>
+          </button>
+        </div>
+      </template>
+      <el-form ref="singleScoreFormRef" label-position="top" :model="singleScoreForm" class="score-review-form">
+        <el-form-item label="老师评分" class="score-review-form__score">
+          <div class="score-input-wrapper">
+            <el-input-number v-model="singleScoreForm.score" :min="0" :max="100" :precision="0" :controls="false" placeholder="0-100" class="score-number-input" />
+            <span class="score-unit">分</span>
+          </div>
+        </el-form-item>
+        <el-form-item label="评语" class="score-review-form__comment">
+          <el-input v-model="singleScoreForm.comment" type="textarea" :rows="4" placeholder="请输入对学生任务完成情况的评价（可选）" maxlength="1000" show-word-limit class="score-comment-textarea" />
+        </el-form-item>
+      </el-form>
       <template #footer>
-        <el-button @click="batchDialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="savingBatch" @click="saveBatchScore">确定</el-button>
+        <div class="dialog-footer">
+          <button type="button" class="dialog-btn dialog-btn--cancel" @click="singleScoreDialogVisible = false">取消</button>
+          <button type="button" class="dialog-btn dialog-btn--primary" :disabled="savingSingleScore" @click="saveSingleScoreDialog">
+            <el-icon v-if="savingSingleScore"><Loading /></el-icon>
+            <el-icon v-else><CircleCheck /></el-icon>
+            {{ savingSingleScore ? "保存中..." : "确认评阅" }}
+          </button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="batchDialogVisible"
+      width="480px"
+      append-to-body
+      :show-close="false"
+      class="score-review-dialog"
+      @closed="
+        batchScore = null;
+        batchComment = null;
+      "
+    >
+      <template #header>
+        <div class="dialog-header">
+          <div class="dialog-header-main">
+            <span class="dialog-badge">
+              <el-icon><DocumentChecked /></el-icon>
+              批量打分
+            </span>
+            <h3 class="dialog-title">已选择 {{ selectedStudents.length }} 名学生</h3>
+          </div>
+          <button type="button" class="dialog-close" @click="batchDialogVisible = false">
+            <el-icon><Close /></el-icon>
+          </button>
+        </div>
       </template>
+      <el-form label-position="top" class="score-review-form" @submit.prevent="saveBatchScore">
+        <el-form-item label="统一打分" class="score-review-form__score">
+          <div class="score-input-wrapper">
+            <el-input-number v-model="batchScore" :min="0" :max="100" :precision="0" :controls="false" placeholder="0-100" class="score-number-input" />
+            <span class="score-unit">分</span>
+          </div>
+        </el-form-item>
+        <el-form-item label="统一评语" class="score-review-form__comment">
+          <el-input v-model="batchComment" type="textarea" :rows="4" placeholder="请输入对选中学生的统一评价（可选）" maxlength="1000" show-word-limit class="score-comment-textarea" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <button type="button" class="dialog-btn dialog-btn--cancel" @click="batchDialogVisible = false">取消</button>
+          <button type="button" class="dialog-btn dialog-btn--primary" :disabled="savingBatch" @click="saveBatchScore">
+            <el-icon v-if="savingBatch"><Loading /></el-icon>
+            <el-icon v-else><CircleCheck /></el-icon>
+            {{ savingBatch ? "保存中..." : "确认打分" }}
+          </button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="aiScoreDetailDialogVisible"
+      width="720px"
+      append-to-body
+      :show-close="false"
+      class="ai-score-detail-dialog"
+    >
+      <template #header>
+        <div class="dialog-header">
+          <div class="dialog-header-main">
+            <span class="dialog-badge">
+              <el-icon><TrendCharts /></el-icon>
+              AI评分详情
+            </span>
+            <h3 class="dialog-title">{{ selectedStudent?.name || selectedStudent?.username }}</h3>
+          </div>
+          <button type="button" class="dialog-close" @click="aiScoreDetailDialogVisible = false">
+            <el-icon><Close /></el-icon>
+          </button>
+        </div>
+      </template>
+      
+      <div class="ai-score-detail">
+        <!-- 综合评分 -->
+        <div class="ai-score-summary">
+          <div class="ai-score-summary__main">
+            <span class="ai-score-summary__label">综合评分</span>
+            <div class="ai-score-summary__score">
+              <span class="ai-score-summary__number">{{ aiScoreDetailData.totalScore ?? '--' }}</span>
+              <span class="ai-score-summary__total">/{{ aiScoreDetailData.totalFullScore }}</span>
+            </div>
+          </div>
+          <p v-if="aiScoreDetailData.comment" class="ai-score-summary__comment">{{ aiScoreDetailData.comment }}</p>
+        </div>
+
+        <!-- 各维度评分 -->
+        <div v-if="aiScoreDetailData.dimensions.length > 0" class="ai-score-dimensions">
+          <div
+            v-for="(dimension, index) in aiScoreDetailData.dimensions"
+            :key="index"
+            class="ai-score-dimension"
+          >
+            <div class="ai-score-dimension__head">
+              <h4 class="ai-score-dimension__title">{{ dimension.name }}</h4>
+              <span class="ai-score-dimension__score">
+                <strong>{{ dimension.score ?? '--' }}</strong>
+                <span>/{{ dimension.fullScore }}</span>
+              </span>
+            </div>
+            <p v-if="dimension.analysis" class="ai-score-dimension__analysis">{{ dimension.analysis }}</p>
+          </div>
+        </div>
+
+        <!-- 优先改进 -->
+        <div v-if="aiScoreDetailData.improvements.length > 0" class="ai-score-improvements">
+          <h4 class="ai-score-improvements__title">优先改进</h4>
+          <ul class="ai-score-improvements__list">
+            <li v-for="(improvement, index) in aiScoreDetailData.improvements" :key="index">
+              {{ improvement }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- 无数据提示 -->
+        <el-empty v-if="!aiScoreDetailData.totalScore && aiScoreDetailData.dimensions.length === 0" description="暂无AI评分详情数据" :image-size="120" />
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
 import { ElMessage } from "element-plus";
+import { EditPen, DocumentChecked, Close, CircleCheck, Loading, DocumentCopy, CirclePlus, TrendCharts } from "@element-plus/icons-vue";
 import * as teacherApi from "@/api/teacher";
 import { listClassTrainingTasks } from "@/api/trainingTask";
 import useUserStore from "@/store/modules/user";
@@ -115,15 +253,18 @@ const props = defineProps({
 
 const userStore = useUserStore();
 const fallbackTeachingClassList = ref([]);
-const teachingClasses = computed(() => props.teachingClassList.length
-  ? props.teachingClassList
-  : fallbackTeachingClassList.value);
+const teachingClasses = computed(() => (props.teachingClassList.length ? props.teachingClassList : fallbackTeachingClassList.value));
 const filters = ref({ classId: "", projectName: "", taskId: "" });
 const review = ref({ projects: [], tasks: [], selectedTask: null, students: [] });
 const loading = ref(false);
 const savingBatch = ref(false);
 const batchDialogVisible = ref(false);
 const batchScore = ref(null);
+const batchComment = ref("");
+const singleScoreDialogVisible = ref(false);
+const savingSingleScore = ref(false);
+const singleScoreFormRef = ref();
+const singleScoreForm = ref({ studentId: "", studentName: "", score: null, comment: "" });
 const selectedStudents = ref([]);
 const selectedStudentId = ref("");
 const studentTableRef = ref();
@@ -133,6 +274,14 @@ const studentPreviewError = ref("");
 const previewFrameHeight = ref(580);
 let previewRequestVersion = 0;
 const PREVIEW_HEIGHT_MESSAGE = "teacher-task-review-preview-height";
+const aiScoreDetailDialogVisible = ref(false);
+const aiScoreDetailData = ref({
+  totalScore: null,
+  totalFullScore: 100,
+  comment: "",
+  dimensions: [],
+  improvements: []
+});
 
 const canManageClass = computed(() => {
   const currentClass = teachingClasses.value.find((item) => item.schoolClassId === filters.value.classId);
@@ -141,13 +290,17 @@ const canManageClass = computed(() => {
 const selectedStudent = computed(() => review.value.students.find((row) => row.studentUserId === selectedStudentId.value) || review.value.students[0] || null);
 const canBatchScore = computed(() => canManageClass.value && selectedStudents.value.length > 0 && Boolean(filters.value.taskId));
 
-watch(teachingClasses, (classes) => {
-  if (!filters.value.classId && classes.length) {
-    const ownTeachingClass = classes.find((schoolClass) => String(schoolClass.createdBy || "") === String(userStore.userInfo.userId || ""));
-    filters.value.classId = ownTeachingClass?.schoolClassId || "";
-    if (filters.value.classId) loadReview();
-  }
-}, { immediate: true });
+watch(
+  teachingClasses,
+  (classes) => {
+    if (!filters.value.classId && classes.length) {
+      const ownTeachingClass = classes.find((schoolClass) => String(schoolClass.createdBy || "") === String(userStore.userInfo.userId || ""));
+      filters.value.classId = ownTeachingClass?.schoolClassId || "";
+      if (filters.value.classId) loadReview();
+    }
+  },
+  { immediate: true },
+);
 watch([selectedStudent, () => review.value.selectedTask], refreshStudentPreview, { immediate: true, flush: "post" });
 
 async function refreshStudentPreview() {
@@ -189,7 +342,7 @@ function formatScore(score) {
   return score === null || score === undefined || score === "" ? "--" : score;
 }
 function normalizeReview(data) {
-  const students = (data?.students || []).map((row) => ({ ...row, teacherScoreDraft: row.teacherScore ?? null }));
+  const students = (data?.students || []).map((row) => ({ ...row }));
   review.value = { projects: data?.projects || [], tasks: data?.tasks || [], selectedTask: data?.selectedTask || null, students };
   const selectedTask = review.value.selectedTask;
   filters.value.taskId = selectedTask?.taskId || "";
@@ -267,21 +420,6 @@ function onPreviewMessage(event) {
   const height = Number(data.height);
   if (Number.isFinite(height) && height > 0) previewFrameHeight.value = Math.max(580, Math.ceil(height));
 }
-async function saveSingleScore(row) {
-  const score = row.teacherScoreDraft;
-  if (!Number.isInteger(score) || score < 0 || score > 100) {
-    ElMessage.error("教师评分必须为0至100之间的整数");
-    row.teacherScoreDraft = row.teacherScore ?? null;
-    return;
-  }
-  try {
-    await teacherApi.saveTaskTeacherScore({ classId: filters.value.classId, studentUserId: row.studentUserId, taskId: filters.value.taskId, teacherScore: score });
-    ElMessage.success("任务评分保存成功");
-    await loadReview();
-  } catch (_) {
-    row.teacherScoreDraft = row.teacherScore ?? null;
-  }
-}
 async function saveBatchScore() {
   if (!Number.isInteger(batchScore.value) || batchScore.value < 0 || batchScore.value > 100) {
     ElMessage.error("请输入0至100之间的整数分数");
@@ -294,6 +432,7 @@ async function saveBatchScore() {
       taskId: filters.value.taskId,
       studentUserIds: selectedStudents.value.map((row) => row.studentUserId),
       teacherScore: batchScore.value,
+      teacherComment: batchComment.value?.trim() || "",
     });
     ElMessage.success("批量任务评分保存成功");
     batchDialogVisible.value = false;
@@ -302,6 +441,41 @@ async function saveBatchScore() {
     savingBatch.value = false;
   }
 }
+function openScoreDialog(row) {
+  singleScoreForm.value = {
+    studentId: row.studentUserId,
+    studentName: row.name || row.username,
+    score: row.teacherScore ?? null,
+    comment: row.teacherComment || "",
+  };
+  singleScoreDialogVisible.value = true;
+}
+function resetSingleScoreForm() {
+  singleScoreForm.value = { studentId: "", studentName: "", score: null, comment: "" };
+  singleScoreFormRef.value?.clearValidate();
+}
+async function saveSingleScoreDialog() {
+  const score = singleScoreForm.value.score;
+  if (score !== null && (!Number.isInteger(score) || score < 0 || score > 100)) {
+    ElMessage.error("教师评分必须为0至100之间的整数，或不输入");
+    return;
+  }
+  savingSingleScore.value = true;
+  try {
+    await teacherApi.saveTaskTeacherScore({
+      classId: filters.value.classId,
+      studentUserId: singleScoreForm.value.studentId,
+      taskId: filters.value.taskId,
+      teacherScore: score,
+      teacherComment: singleScoreForm.value.comment?.trim() || "",
+    });
+    ElMessage.success("任务评分保存成功");
+    singleScoreDialogVisible.value = false;
+    await loadReview();
+  } finally {
+    savingSingleScore.value = false;
+  }
+}
 onMounted(() => {
   window.addEventListener("message", onPreviewMessage);
   loadTeachingClasses();
@@ -310,206 +484,819 @@ onBeforeUnmount(() => {
   window.removeEventListener("message", onPreviewMessage);
   clearTrainingReviewPreview(previewKey.value);
 });
+
+// ========== 新增方法 ==========
+function onBatchAiScore() {
+  if (selectedStudents.value.length === 0) {
+    ElMessage.warning("请先选择学生");
+    return;
+  }
+  ElMessage.info("批量AI评分功能开发中...");
+  // 后续接入 AI 评分接口
+}
+
+function onViewReferenceAnswer() {
+  if (!selectedStudent.value) return;
+  ElMessage.info("查看参考答案功能开发中...");
+  // 后续弹窗展示参考答案
+}
+
+function onAiAssistEvaluation() {
+  if (!selectedStudent.value) return;
+  ElMessage.info("AI助评功能开发中...");
+  // 后续调用 AI 助评接口并展示结果
+}
+
+async function showAiScoreDetail() {
+  if (!selectedStudent.value) return;
+  
+  // 模拟数据 - 后续替换为真实API
+  aiScoreDetailData.value = {
+    totalScore: selectedStudent.value.aiAssessmentScore,
+    totalFullScore: 100,
+    comment: "学生整体完成质量较好，在用户角度分析和市场反馈分析方面表现出色，技术与合规角度分析基本符合要求，结论总结分析有待提升。",
+    dimensions: [
+      {
+        name: "用户角度分析",
+        score: 25,
+        fullScore: 25,
+        analysis: "学生全面分析了产品的用户痛点、需求洞察和用户体验优化方向，能够从用户视角出发提出有价值的改进建议，符合用户为中心的产品设计思维。"
+      },
+      {
+        name: "技术与合规角度分析",
+        score: 23,
+        fullScore: 25,
+        analysis: "对产品的技术可行性和合规性进行了基本分析，识别了主要技术风险点，但在法律法规适配性方面的论述深度不够，建议补充更详细的合规性评估。"
+      },
+      {
+        name: "商业化及市场反馈角度分析",
+        score: 25,
+        fullScore: 25,
+        analysis: "学生准确把握了市场定位和商业模式，对竞争环境有清晰认知，提出的市场推广策略具有可操作性，商业价值分析完整。"
+      },
+      {
+        name: "结论总结分析",
+        score: 19,
+        fullScore: 25,
+        analysis: "总结部分提炼了主要观点，但逻辑性和结构性有待加强，建议按照问题-分析-结论的框架重新组织，增加可操作性建议。"
+      }
+    ],
+    improvements: [
+      "补充技术合规性评估的详细内容，包括数据安全、隐私保护等方面的法规适配性分析",
+      "优化结论总结的逻辑结构，建议采用MECE原则（相互独立、完全穷尽）进行归纳",
+      "在商业化分析中增加财务可行性评估，包括成本收益分析和ROI预测"
+    ]
+  };
+  
+  aiScoreDetailDialogVisible.value = true;
+  
+  // TODO: 后续替换为真实API调用
+  // try {
+  //   const response = await teacherApi.getAiScoreDetail({
+  //     classId: filters.value.classId,
+  //     taskId: filters.value.taskId,
+  //     studentUserId: selectedStudent.value.studentUserId
+  //   });
+  //   aiScoreDetailData.value = response.data;
+  //   aiScoreDetailDialogVisible.value = true;
+  // } catch (error) {
+  //   ElMessage.error("获取AI评分详情失败");
+  // }
+}
 </script>
 
 <style lang="scss" scoped>
 .task-review {
+  display: grid;
+  grid-template-columns: minmax(440px, 520px) minmax(0, 1fr);
+  min-height: calc(100vh - 142px);
+  overflow: hidden;
+  background: #ffffff;
+  border: 1px solid var(--border-color);
+  border-radius: var(--r-card);
+
+  /* ===== 左侧栏 ===== */
+  .task-review__sidebar {
+    min-width: 0;
+    padding: var(--sp-5);
+    border-right: 1px solid var(--border-color);
+    overflow: auto;
+  }
+
+  /* ===== 筛选（白卡）===== */
+  .task-review__filters {
     display: grid;
-    grid-template-columns: minmax(440px, 520px) minmax(0, 1fr);
-    min-height: calc(100vh - 142px);
-    overflow: hidden;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--sp-3);
+    padding: var(--sp-4);
     background: #ffffff;
     border: 1px solid var(--border-color);
     border-radius: var(--r-card);
 
-    /* ===== 左侧栏 ===== */
-    .task-review__sidebar {
-        min-width: 0;
-        padding: var(--sp-5);
-        border-right: 1px solid var(--border-color);
-        overflow: auto;
+    :deep(.el-form-item) {
+      margin-bottom: 0;
     }
 
-    /* ===== 筛选（白卡）===== */
-    .task-review__filters {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: var(--sp-3);
-        padding: var(--sp-4);
-        background: #ffffff;
-        border: 1px solid var(--border-color);
-        border-radius: var(--r-card);
+    :deep(.el-select) {
+      width: 100%;
+    }
+  }
 
-        :deep(.el-form-item) {
-            margin-bottom: 0;
-        }
+  .task-review__list-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: var(--sp-4) 0 var(--sp-1);
+    color: var(--text-strong);
+    font-size: var(--fs-card);
+    font-weight: 700;
+  }
 
-        :deep(.el-select) {
-            width: 100%;
-        }
+  .task-review__list-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  .task-review__score-input {
+    width: 70px;
+  }
+
+  /* ===== 学生表格（纯白 + 灰线）===== */
+  .task-review__student-table {
+    width: 100%;
+    background: #ffffff;
+    border: 1px solid var(--border-color);
+    border-radius: var(--r-card);
+    overflow: hidden;
+
+    :deep(.el-table__header-wrapper th) {
+      background: #ffffff;
+      color: var(--text-strong);
+      font-weight: 600;
+      font-size: var(--fs-body);
     }
 
-    .task-review__list-head {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin: var(--sp-4) 0 var(--sp-1);
-        color: var(--text-strong);
-        font-size: var(--fs-card);
-        font-weight: 700;
+    :deep(.el-table__body tr:hover > td) {
+      background: #f9fafb !important;
     }
 
-    .task-review__score-input {
-        width: 70px;
+    :deep(.task-review__selected-row > td) {
+      background: #f9fafb !important;
     }
 
-    /* ===== 学生表格（纯白 + 灰线）===== */
-    .task-review__student-table {
-        width: 100%;
-        background: #ffffff;
-        border: 1px solid var(--border-color);
-        border-radius: var(--r-card);
-        overflow: hidden;
-
-        :deep(.el-table__header-wrapper th) {
-            background: #ffffff;
-            color: var(--text-strong);
-            font-weight: 600;
-            font-size: var(--fs-body);
-        }
+    :deep(.el-table__cell) {
+      font-size: var(--fs-body);
+      color: var(--text-strong);
+      border-color: var(--border-color);
+    }
 
-        :deep(.el-table__body tr:hover > td) {
-            background: #f9fafb !important;
-        }
+    :deep(.cell) {
+      padding: 0 10px;
+    }
 
-        :deep(.task-review__selected-row > td) {
-            background: #f9fafb !important;
-        }
+    :deep(th .cell) {
+      white-space: nowrap;
+    }
+  }
 
-        :deep(.el-table__cell) {
-            font-size: var(--fs-body);
-            color: var(--text-strong);
-            border-color: var(--border-color);
-        }
+  .task-review__readonly-tip {
+    margin: var(--sp-3) 0 0;
+    color: var(--text-muted);
+    font-size: var(--fs-body);
+  }
 
-        :deep(.cell) {
-            padding: 0 10px;
-        }
+  /* ===== 右侧预览区 ===== */
+  .task-review__content {
+    min-width: 0;
+    padding: var(--sp-5);
+  }
 
-        :deep(th .cell) {
-            white-space: nowrap;
-        }
+  .task-review__student-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--sp-5);
+    padding: 0 0 var(--sp-5);
+    border-bottom: 1px solid var(--border-color);
+
+    h2 {
+      margin: 0;
+      color: var(--text-strong);
+      font-size: var(--fs-page);
+      line-height: 1.35;
     }
 
-    .task-review__readonly-tip {
-        margin: var(--sp-3) 0 0;
-        color: var(--text-muted);
-        font-size: var(--fs-body);
+    p {
+      margin: var(--sp-2) 0 0;
+      color: var(--text-body);
+      font-size: var(--fs-body);
     }
+  }
 
-    /* ===== 右侧预览区 ===== */
-    .task-review__content {
-        min-width: 0;
-        padding: var(--sp-5);
+  .task-review__head-actions {
+    display: flex;
+    gap: 8px;
+    flex: 0 0 auto;
+  }
+
+  .task-review__action-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    height: 36px;
+    padding: 0 14px;
+    border: 1px solid rgba(37, 99, 235, 0.45);
+    border-radius: 8px;
+    background: #ffffff;
+    color: #2563eb;
+    font-size: 13px;
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: all 0.16s ease;
+
+    .el-icon {
+      font-size: 14px;
     }
 
-    .task-review__student-head {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        gap: var(--sp-5);
-        padding: 0 0 var(--sp-5);
-        border-bottom: 1px solid var(--border-color);
-
-        h2 {
-            margin: 0;
-            color: var(--text-strong);
-            font-size: var(--fs-page);
-            line-height: 1.35;
-        }
+    &:hover {
+      border-color: #2563eb;
+      background: #eff6ff;
+      color: #2563eb;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
+    }
 
-        p {
-            margin: var(--sp-2) 0 0;
-            color: var(--text-body);
-            font-size: var(--fs-body);
-        }
+    &:active {
+      transform: translateY(0);
     }
+  }
 
-    .task-review__scores {
-        display: flex;
-        gap: var(--sp-2);
-        color: var(--text-body);
-        font-size: var(--fs-body);
-        white-space: nowrap;
-
-        span {
-            padding: var(--sp-1) var(--sp-2);
-            border: 1px solid var(--border-color);
-            border-radius: 999px;
-        }
+  .task-review__action-btn--primary {
+    border-color: #2563eb;
+    background: #2563eb;
+    color: #ffffff;
+    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.28);
+
+    &:hover {
+      border-color: #1d4ed8;
+      background: #1d4ed8;
+      color: #ffffff;
+      box-shadow: 0 5px 14px rgba(29, 78, 216, 0.32);
+      transform: translateY(-1px);
+    }
+  }
+
+  .task-review__scores-section {
+    padding: var(--sp-4) 0 0;
+  }
 
-        strong {
-            margin-left: var(--sp-1);
-            color: var(--edu-primary);
-            font-size: var(--fs-num);
+  .task-review__scores {
+    display: flex;
+    gap: var(--sp-2);
+    color: var(--text-body);
+    font-size: var(--fs-body);
+    white-space: nowrap;
+
+    .task-review__score-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: var(--sp-1) var(--sp-2);
+      border: 1px solid var(--border-color);
+      border-radius: 999px;
+      background: #ffffff;
+      cursor: default;
+      transition: all 0.16s ease;
+
+      &:is(button) {
+        cursor: pointer;
+
+        &:hover {
+          border-color: #2563eb;
+          background: #eff6ff;
+          transform: translateY(-1px);
+          box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
+
+          .task-review__score-label {
+            color: #2563eb;
+          }
+
+          .task-review__score-value {
+            color: #2563eb;
+          }
         }
+      }
     }
 
-    .task-review__student-preview-scroll {
-        height: calc(100vh - 260px);
-        min-height: 580px;
-        margin-top: var(--sp-5);
-        overflow: auto;
-        scrollbar-gutter: stable;
-        border: 1px solid var(--border-color);
-        border-radius: var(--r-card);
+    .task-review__score-label {
+      color: var(--text-body);
+      font-size: var(--fs-body);
+      transition: color 0.16s ease;
     }
 
-    .task-review__student-preview {
-        display: block;
-        width: 100%;
-        min-height: 580px;
-        border: 0;
+    .task-review__score-value {
+      color: var(--edu-primary);
+      font-size: var(--fs-num);
+      font-weight: 700;
+      transition: color 0.16s ease;
     }
+  }
+
+  .task-review__student-preview-scroll {
+    height: calc(100vh - 260px);
+    min-height: 580px;
+    margin-top: var(--sp-5);
+    overflow: auto;
+    scrollbar-gutter: stable;
+    border: 1px solid var(--border-color);
+    border-radius: var(--r-card);
+  }
+
+  .task-review__student-preview {
+    display: block;
+    width: 100%;
+    min-height: 580px;
+    border: 0;
+  }
 }
 
 /* 批量打分弹窗（append-to-body，取不到根类令牌时按令牌值兜底） */
 .task-review__batch-copy {
-    margin: 0 0 var(--sp-4, 16px);
-    color: var(--text-body);
+  margin: 0 0 var(--sp-4, 16px);
+  color: var(--text-body);
 }
 
 .task-review__batch-input {
-    width: 100%;
+  width: 100%;
 }
 
-@media (max-width: 1180px) {
-    .task-review {
-        grid-template-columns: 1fr;
-    }
+.task-review__form-item-readonly {
+  :deep(.el-form-item__content) {
+    color: var(--text-strong);
+    font-weight: 500;
+  }
+}
+
+/* ============================================================
+ * 评阅对话框 - 教育蓝极简风格（append-to-body）
+ * ============================================================ */
+:deep(.score-review-dialog) {
+  border-radius: 16px;
+  overflow: hidden;
+
+  .el-dialog__header {
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .el-dialog__body {
+    padding: 24px;
+  }
 
-    .task-review .task-review__sidebar {
-        border-right: 0;
-        border-bottom: 1px solid var(--border-color);
+  .el-dialog__footer {
+    padding: 0;
+  }
+}
+
+.dialog-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.dialog-header-main {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+}
+
+.dialog-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border: 1px solid rgba(37, 99, 235, 0.2);
+  border-radius: 999px;
+  color: #2563eb;
+  background: #eff6ff;
+  font-size: 12px;
+  font-weight: 700;
+  width: fit-content;
+
+  .el-icon {
+    font-size: 13px;
+  }
+}
+
+.dialog-title {
+  margin: 0;
+  color: #1f2937;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.dialog-close {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.16s ease;
+
+  &:hover {
+    border-color: #2563eb;
+    background: #eff6ff;
+    color: #2563eb;
+  }
+
+  .el-icon {
+    font-size: 16px;
+  }
+}
+
+.score-review-form {
+  .el-form-item {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
     }
+  }
+
+  :deep(.el-form-item__label) {
+    margin-bottom: 8px;
+    color: #374151;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.5;
+  }
 }
 
-@media (max-width: 720px) {
-    .task-review .task-review__filters {
-        grid-template-columns: 1fr;
+.score-review-form__score {
+  .score-input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .score-number-input {
+    flex: 1;
+    width: auto;
+
+    :deep(.el-input__wrapper) {
+      padding: 12px 16px;
+      border-radius: 10px;
+      background: #fafbfc;
+      border: 1px solid #e5e7eb;
+      box-shadow: none;
+      transition: all 0.16s ease;
+
+      &:hover {
+        border-color: #3b82f6;
+        background: #ffffff;
+      }
+
+      &.is-focus {
+        border-color: #2563eb;
+        background: #ffffff;
+        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+      }
     }
 
-    .task-review .task-review__content {
-        padding: var(--sp-5);
+    :deep(.el-input__inner) {
+      color: #1f2937;
+      font-size: 20px;
+      font-weight: 700;
+      font-family: var(--el-font-family), ui-monospace, "SF Mono", Consolas, monospace;
+      text-align: left;
+
+      &::placeholder {
+        color: #9ca3af;
+        font-weight: 600;
+      }
     }
+  }
+
+  .score-unit {
+    flex: 0 0 auto;
+    color: #6b7280;
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+
+.score-review-form__comment {
+  .score-comment-textarea {
+    :deep(.el-textarea__inner) {
+      padding: 12px 14px;
+      border-radius: 10px;
+      border: 1px solid #e5e7eb;
+      background: #fafbfc;
+      color: #1f2937;
+      font-size: 13px;
+      line-height: 1.6;
+      resize: vertical;
+      min-height: 100px;
+      transition: all 0.16s ease;
 
-    .task-review .task-review__student-head {
-        flex-direction: column;
+      &:hover {
+        border-color: #3b82f6;
+        background: #ffffff;
+      }
+
+      &:focus {
+        border-color: #2563eb;
+        background: #ffffff;
+        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+      }
+
+      &::placeholder {
+        color: #9ca3af;
+      }
     }
 
-    .task-review .task-review__scores {
-        flex-wrap: wrap;
-        white-space: normal;
+    :deep(.el-input__count) {
+      color: #9ca3af;
+      background: transparent;
+      font-size: 11px;
+      line-height: 1;
     }
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 24px;
+  border-top: 1px solid #e5e7eb;
+  background: #fafbfc;
+}
+
+.dialog-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 40px;
+  padding: 0 20px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.16s ease;
+  white-space: nowrap;
+
+  .el-icon {
+    font-size: 14px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none !important;
+  }
+}
+
+.dialog-btn--cancel {
+  border-color: #e5e7eb;
+  color: #6b7280;
+  background: #ffffff;
+
+  &:hover:not(:disabled) {
+    border-color: #d1d5db;
+    color: #374151;
+    background: #f9fafb;
+  }
+}
+
+.dialog-btn--primary {
+  border-color: #2563eb;
+  color: #ffffff;
+  background: #2563eb;
+  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.28);
+
+  &:hover:not(:disabled) {
+    border-color: #1d4ed8;
+    background: #1d4ed8;
+    box-shadow: 0 5px 14px rgba(29, 78, 216, 0.32);
+    transform: translateY(-1px);
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(0);
+  }
+}
+
+/* ============================================================
+ * AI评分详情对话框 - 教育蓝极简风格
+ * ============================================================ */
+:deep(.ai-score-detail-dialog) {
+  border-radius: 16px;
+  overflow: hidden;
+
+  .el-dialog__header {
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .el-dialog__body {
+    padding: 24px;
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+}
+
+.ai-score-detail {
+  display: grid;
+  gap: 24px;
+}
+
+.ai-score-summary {
+  padding: 20px;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
+  border-left: 4px solid #2563eb;
+}
+
+.ai-score-summary__main {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(37, 99, 235, 0.15);
+}
+
+.ai-score-summary__label {
+  color: #374151;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.ai-score-summary__score {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.ai-score-summary__number {
+  color: #2563eb;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1;
+  font-family: ui-monospace, "SF Mono", Consolas, monospace;
+}
+
+.ai-score-summary__total {
+  color: #6b7280;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.ai-score-summary__comment {
+  margin: 0;
+  color: #374151;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.ai-score-dimensions {
+  display: grid;
+  gap: 16px;
+}
+
+.ai-score-dimension {
+  padding: 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  background: #fafbfc;
+  border-left: 3px solid #3b82f6;
+}
+
+.ai-score-dimension__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.ai-score-dimension__title {
+  margin: 0;
+  color: #1f2937;
+  font-size: 14px;
+  font-weight: 600;
+  flex: 1;
+}
+
+.ai-score-dimension__score {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  white-space: nowrap;
+
+  strong {
+    color: #2563eb;
+    font-size: 16px;
+    font-weight: 700;
+    font-family: ui-monospace, "SF Mono", Consolas, monospace;
+  }
+
+  span {
+    color: #9ca3af;
+    font-size: 12px;
+    font-weight: 600;
+  }
+}
+
+.ai-score-dimension__analysis {
+  margin: 0;
+  color: #6b7280;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.ai-score-improvements {
+  padding: 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  background: #fafbfc;
+  border-left: 3px solid #ef4444;
+}
+
+.ai-score-improvements__title {
+  margin: 0 0 12px;
+  color: #1f2937;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.ai-score-improvements__list {
+  margin: 0;
+  padding-left: 20px;
+  list-style: disc;
+
+  li {
+    margin-bottom: 8px;
+    color: #6b7280;
+    font-size: 12px;
+    line-height: 1.6;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@media (max-width: 1180px) {
+  .task-review {
+    grid-template-columns: 1fr;
+  }
+
+  .task-review .task-review__sidebar {
+    border-right: 0;
+    border-bottom: 1px solid var(--border-color);
+  }
+}
+
+@media (max-width: 720px) {
+  .task-review .task-review__filters {
+    grid-template-columns: 1fr;
+  }
+
+  .task-review .task-review__content {
+    padding: var(--sp-5);
+  }
+
+  .task-review .task-review__student-head {
+    flex-direction: column;
+  }
+
+  .task-review .task-review__scores {
+    flex-wrap: wrap;
+    white-space: normal;
+  }
 }
 </style>