:sparkles: 支持对答案下划线

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

@@ -12,6 +12,7 @@ import { useAppSelector } from "../../../hooks";
 import { inlineDict as _inlineDict } from "../../../reducers/inline-dict";
 import WbwParent2 from "./WbwParent2";
 import { IApiResponseDictData } from "../../api/Dict";
+import { errorClass } from "./WbwMeaning";
 
 export interface ValueType {
   key: string;
@@ -94,11 +95,18 @@ export const caseInDict = (
 
 interface IWidget {
   data: IWbw;
+  answer?: IWbw;
   display?: TWbwDisplayMode;
   onSplit?: Function;
   onChange?: Function;
 }
-const WbwCaseWidget = ({ data, display, onSplit, onChange }: IWidget) => {
+const WbwCaseWidget = ({
+  data,
+  answer,
+  display,
+  onSplit,
+  onChange,
+}: IWidget) => {
   const intl = useIntl();
   const defaultMenu: MenuProps["items"] = [
     {
@@ -173,7 +181,12 @@ const WbwCaseWidget = ({ data, display, onSplit, onChange }: IWidget) => {
   ) {
     //非标点符号
     return (
-      <div className="wbw_word_item" style={{ display: "flex" }}>
+      <div
+        className={
+          "wbw_word_item" + errorClass(data.case?.value, answer?.case?.value)
+        }
+        style={{ display: "flex" }}
+      >
         <Text type="secondary">
           <div>
             <Dropdown

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

@@ -9,17 +9,20 @@ import { PaliReal } from "../../../utils";
 import { useAppSelector } from "../../../hooks";
 import { inlineDict as _inlineDict } from "../../../reducers/inline-dict";
 import { ItemType } from "antd/lib/menu/hooks/useItems";
+import { errorClass } from "./WbwMeaning";
 
 const { Text } = Typography;
 
 interface IWidget {
   data: IWbw;
+  answer?: IWbw;
   factors?: string;
   display?: TWbwDisplayMode;
   onChange?: Function;
 }
 const WbwFactorMeaningWidget = ({
   data,
+  answer,
   display,
   onChange,
   factors,
@@ -95,7 +98,12 @@ const WbwFactorMeaningWidget = ({
 
   if (typeof data.real !== "undefined" && PaliReal(data.real.value) !== "") {
     return (
-      <div>
+      <div
+        className={
+          "wbw_word_item" +
+          errorClass(data.factorMeaning?.value, answer?.factorMeaning?.value)
+        }
+      >
         <Text type="secondary">
           <Dropdown
             menu={{

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

@@ -8,6 +8,7 @@ import { IWbw, TWbwDisplayMode } from "./WbwWord";
 import { useAppSelector } from "../../../hooks";
 import { inlineDict as _inlineDict } from "../../../reducers/inline-dict";
 import { IApiResponseDictData } from "../../api/Dict";
+import { errorClass } from "./WbwMeaning";
 
 const { Text } = Typography;
 
@@ -38,11 +39,12 @@ export const getFactorsInDict = (
 
 interface IWidget {
   data: IWbw;
+  answer?: IWbw;
   display?: TWbwDisplayMode;
   onChange?: Function;
 }
 
-const WbwFactorsWidget = ({ data, display, onChange }: IWidget) => {
+const WbwFactorsWidget = ({ data, answer, display, onChange }: IWidget) => {
   const intl = useIntl();
   const defaultMenu: MenuProps["items"] = [
     {
@@ -124,7 +126,12 @@ const WbwFactorsWidget = ({ data, display, onChange }: IWidget) => {
       }
     }
     return (
-      <div>
+      <div
+        className={
+          "wbw_word_item" +
+          errorClass(data.factors?.value, answer?.factors?.value)
+        }
+      >
         <Text type="secondary">
           <Dropdown menu={{ items, onClick }} placement="bottomLeft">
             {factors}

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

@@ -10,14 +10,29 @@ import EditableLabel from "../../general/EditableLabel";
 
 const { Text } = Typography;
 
+export const errorClass = (
+  data?: string | null,
+  answer?: string | null
+): string => {
+  let classError = "";
+  if (data && answer) {
+    if (answer !== data) {
+      classError = " wbw_error";
+    }
+  }
+  return classError;
+};
+
 interface IWidget {
   data: IWbw;
+  answer?: IWbw;
   display?: TWbwDisplayMode;
   mode?: ArticleMode;
   onChange?: Function;
 }
 const WbwMeaningWidget = ({
   data,
+  answer,
   display = "block",
   mode = "edit",
   onChange,
@@ -145,8 +160,14 @@ const WbwMeaningWidget = ({
     data.real.value.trim().length > 0
   ) {
     //非标点符号
+
     return (
-      <div className="wbw_word_item">
+      <div
+        className={
+          "wbw_word_item" +
+          errorClass(data.meaning?.value, answer?.meaning?.value)
+        }
+      >
         {editable || display === "list" ? (
           meaningInner
         ) : (