feat:完成智能批改页面的最终效果

src/types/evaluation.ts

@@ -27,4 +27,5 @@ interface SentenceEvaluation {
     evaluation?: string; // 使用可选属性，根据需求可能在创建时不指定
     version?: number; // 使用可选属性，根据需求可能在创建时不指定
     type?: string; // 使用可选属性，根据需求可能在创建时不指定
+    category?: string;
 }

src/views/AIEvaluationPage/AIEvaluationPage.vue

@@ -19,13 +19,18 @@
             <template v-if="data.sentenceEvaluationList?.length != 0">
               <span v-for="sentenceEvaluation in data.sentenceEvaluationList"
                     :key="sentenceEvaluation.id"
-                    :style="{ 'text-decoration': 'underline', 'text-decoration-color': 'pink', 'text-decoration-thickness': '3px', 'text-decoration-style': 'dashed', 'background-color': sentenceEvaluation.id === highlightSentenceId? 'rgba(255, 192, 203, 0.3)' : 'transparent' }">
+                    :style="{
+                      textDecoration: 'underline',
+                      textDecorationColor: getTextDecorationColor(sentenceEvaluation),
+                      textDecorationThickness: '3px',
+                      textDecorationStyle: 'dashed',
+                      backgroundColor: getBackgroundColor(sentenceEvaluation)
+                    }">
                 {{ sentenceEvaluation.sentence }}
               </span>
             </template>
             <template v-else>
-              <span
-                  :style="{ 'text-decoration': 'underline', 'text-decoration-color': 'pink', 'text-decoration-thickness': '3px', 'text-decoration-style': 'dashed'}">
+              <span>
                 {{ data.overallEvaluation?.content }}
               </span>
             </template>
@@ -89,11 +94,12 @@
                            :key="sentenceEvaluation.id"
                            style="cursor: pointer; margin-bottom: 10px; position: relative;" shadow="hover"
                            @mouseenter="highlightSentenceId = sentenceEvaluation.id"
-                           @mouseleave="highlightSentenceId = sentenceEvaluation.id"
+                           @mouseleave="highlightSentenceId = -1"
                   >
-                    <div style="display: flex;justify-content: center;align-items: center;width: 20px; height: 100%; background-color: pink; position: absolute; top: 0; left: calc(100% - 20px)">
+                    <div :style="{display: 'flex',justifyContent: 'center',alignItems: 'center',width: '20px', height: '100%', backgroundColor: getTextDecorationColor(sentenceEvaluation), position: 'absolute', top: '0', left: 'calc(100% - 20px)'}">
                     </div>
                     <div style="padding-right: 30px">
+                      <div style="font-weight: bold; line-height: 30px">{{ sentenceEvaluation.category }}</div>
                       {{ sentenceEvaluation.evaluation }}
                     </div>
                   </el-card>
@@ -183,16 +189,22 @@
   import {useStore} from "@/store";
   import { ArrowRight } from "@element-plus/icons-vue";
 
+  interface recordVersion {
+    id: number,
+    version: number,
+    time: string
+  }
+
   const apis = useApis()
   const store = useStore()
   const highlightSentenceId = ref(-1)
-  const selected = ref('trapezoid');
+  const selected = ref('trapezoid'); //选择整体还是逐句
   const route = useRoute()
   const assignmentId = Number(route.params.assignmentId)
   const data = reactive<{
     overallEvaluation: OverallEvaluation | null;
     sentenceEvaluationList: SentenceEvaluation[];
-    versionList: []
+    versionList: recordVersion[]
   }>({
     overallEvaluation: null,
     sentenceEvaluationList: [],
@@ -267,6 +279,38 @@
         })
   }
 
+  const getBackgroundColor = (sentenceEvaluation: SentenceEvaluation) => {
+    if (sentenceEvaluation.id === highlightSentenceId.value) {
+      switch (sentenceEvaluation.type) {
+        case '合理':
+          return 'rgb(120,156,84,0.3)';
+        case '词汇':
+          return 'rgb(243,154,179,0.3)';
+        case '句法':
+          return 'rgb(144,180,218,0.3)';
+        case '内容结构':
+          return 'rgb(251,225,92,0.3)';
+        default:
+          return 'rgb(204, 153, 168, 0)';
+      }
+    }
+  };
+
+  const getTextDecorationColor = (sentenceEvaluation: SentenceEvaluation) => {
+    switch (sentenceEvaluation.type) {
+      case '合理':
+        return 'rgb(120,156,84)';
+      case '词汇':
+        return 'rgb(243,154,179)';
+      case '句法':
+        return 'rgb(144,180,218)';
+      case '内容结构':
+        return 'rgb(251,225,92)';
+      default:
+        return 'rgb(204, 153, 168)';
+    }
+  };
+
   onMounted(() => {
     // toEvaluation()
     // getEvaluation()