差错线不同颜色

dashboard/src/components/template/Wbw/WbwCase.tsx

@@ -183,7 +183,8 @@ const WbwCaseWidget = ({
     return (
       <div
         className={
-          "wbw_word_item" + errorClass(data.case?.value, answer?.case?.value)
+          "wbw_word_item" +
+          errorClass("case", data.case?.value, answer?.case?.value)
         }
         style={{ display: "flex" }}
       >

dashboard/src/components/template/Wbw/WbwFactorMeaning.tsx

@@ -101,7 +101,11 @@ const WbwFactorMeaningWidget = ({
       <div
         className={
           "wbw_word_item" +
-          errorClass(data.factorMeaning?.value, answer?.factorMeaning?.value)
+          errorClass(
+            "factorMeaning",
+            data.factorMeaning?.value,
+            answer?.factorMeaning?.value
+          )
         }
       >
         <Text type="secondary">

dashboard/src/components/template/Wbw/WbwFactors.tsx

@@ -129,7 +129,7 @@ const WbwFactorsWidget = ({ data, answer, display, onChange }: IWidget) => {
       <div
         className={
           "wbw_word_item" +
-          errorClass(data.factors?.value, answer?.factors?.value)
+          errorClass("factors", data.factors?.value, answer?.factors?.value)
         }
       >
         <Text type="secondary">

dashboard/src/components/template/Wbw/WbwMeaning.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useIntl } from "react-intl";
 import { Input, Popover, Typography } from "antd";
 
-import { IWbw, TWbwDisplayMode } from "./WbwWord";
+import { IWbw, TFieldName, TWbwDisplayMode } from "./WbwWord";
 import WbwMeaningSelect from "./WbwMeaningSelect";
 import { ArticleMode } from "../../article/Article";
 import CaseFormula from "./CaseFormula";
@@ -11,13 +11,28 @@ import EditableLabel from "../../general/EditableLabel";
 const { Text } = Typography;
 
 export const errorClass = (
+  field: TFieldName,
   data?: string | null,
   answer?: string | null
 ): string => {
   let classError = "";
   if (data && answer) {
     if (answer !== data) {
-      classError = " wbw_error";
+      classError = " wbw_check";
+      switch (field) {
+        case "case":
+          classError += " wbw_error";
+          break;
+        case "factors":
+          classError += " wbw_warning";
+          break;
+        case "factorMeaning":
+          classError += " wbw_info";
+          break;
+        case "meaning":
+          classError += " wbw_info";
+          break;
+      }
     }
   }
   return classError;
@@ -165,7 +180,7 @@ const WbwMeaningWidget = ({
       <div
         className={
           "wbw_word_item" +
-          errorClass(data.meaning?.value, answer?.meaning?.value)
+          errorClass("meaning", data.meaning?.value, answer?.meaning?.value)
         }
       >
         {editable || display === "list" ? (

dashboard/src/components/template/Wbw/wbw.css

@@ -81,11 +81,22 @@
   padding: 0;
   cursor: pointer;
 }
-.wbw_error {
+
+.wbw_check {
   text-decoration: underline wavy;
-  text-decoration-color: red;
   text-underline-offset: 2px;
 }
+.wbw_error {
+  text-decoration-color: red;
+}
+
+.wbw_warning {
+  text-decoration-color: orange;
+}
+
+.wbw_info {
+  text-decoration-color: blue;
+}
 
 .layout-v .wbw_word_item {
   margin-right: 8px;