添加 段落标记和页码标记

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

@@ -5,8 +5,9 @@ import WbwFactorMeaning from "./WbwFactorMeaning";
 import WbwFactors from "./WbwFactors";
 import WbwMeaning from "./WbwMeaning";
 import WbwPali from "./WbwPali";
-import WbwWord from "./WbwWord";
 import "./wbw.css";
+import WbwPara from "./WbwPara";
+import WbwPage from "./WbwPage";
 
 export type TFieldName =
   | "word"
@@ -71,9 +72,10 @@ export interface IWbwFields {
   factorMeaning?: boolean;
   case?: boolean;
 }
+export type TWbwDisplayMode = "block" | "inline";
 interface IWidget {
   data: IWbw;
-  display?: "block" | "inline";
+  display?: TWbwDisplayMode;
   fields?: IWbwFields;
   onChange?: Function;
   onSplit?: Function;
@@ -86,69 +88,111 @@ const Widget = ({
   onSplit,
 }: IWidget) => {
   const [wordData, setWordData] = useState(data);
+  const [fieldDisplay, setFieldDisplay] = useState(fields);
   useEffect(() => {
     setWordData(data);
-  }, [data]);
-  const styleWbw: React.CSSProperties = {
-    display: display === "block" ? "block" : "flex",
-  };
+    setFieldDisplay(fields);
+    console.log("display change", fields);
+  }, [data, fields]);
+
   const color = wordData.bookMarkColor
     ? bookMarkColor[wordData.bookMarkColor.value]
     : "unset";
   const wbwCtl = wordData.type?.value === ".ctl." ? "wbw_ctl" : "";
   const wbwAnchor = wordData.grammar?.value === ".a." ? "wbw_anchor" : "";
 
-  return (
-    <div
-      className={`wbw_word ${display} ${wbwCtl} ${wbwAnchor} `}
-      style={styleWbw}
-    >
-      <WbwPali
-        data={wordData}
-        onSave={(e: IWbw) => {
-          console.log("save", e);
-          const newData: IWbw = JSON.parse(JSON.stringify(e));
-          setWordData(newData);
-          if (typeof onChange !== "undefined") {
-            onChange(e);
-          }
-        }}
-      />
+  const styleWbw: React.CSSProperties = {
+    display: display === "block" ? "block" : "flex",
+  };
+
+  if (wordData.type?.value === ".ctl.") {
+    if (wordData.word.value.includes("para")) {
+      return <WbwPara data={wordData} />;
+    } else {
+      return <WbwPage data={wordData} />;
+    }
+  } else {
+    return (
       <div
-        className="wbw_body"
-        style={{
-          background: `linear-gradient(90deg, rgba(255, 255, 255, 0), ${color})`,
-        }}
+        className={`wbw_word ${display} ${wbwCtl} ${wbwAnchor} `}
+        style={styleWbw}
       >
-        {fields?.meaning ? (
-          <WbwMeaning
-            data={wordData}
-            onChange={(e: string) => {
-              console.log("meaning change", e);
-              const newData: IWbw = JSON.parse(JSON.stringify(wordData));
-              newData.meaning = { value: [e], status: 5 };
-              setWordData(newData);
-            }}
-          />
-        ) : undefined}
-        {fields?.factors ? <WbwFactors data={wordData} /> : undefined}
-        {fields?.factorMeaning ? (
-          <WbwFactorMeaning data={wordData} />
-        ) : undefined}
-        {fields?.case ? (
-          <WbwCase
-            data={wordData}
-            onSplit={(e: boolean) => {
-              console.log("onSplit", wordData.factors?.value);
-              if (typeof onSplit !== "undefined") {
-                onSplit(e);
-              }
-            }}
-          />
-        ) : undefined}
+        <WbwPali
+          data={wordData}
+          onSave={(e: IWbw) => {
+            console.log("save", e);
+            const newData: IWbw = JSON.parse(JSON.stringify(e));
+            setWordData(newData);
+            if (typeof onChange !== "undefined") {
+              onChange(e);
+            }
+          }}
+        />
+        <div
+          className="wbw_body"
+          style={{
+            background: `linear-gradient(90deg, rgba(255, 255, 255, 0), ${color})`,
+          }}
+        >
+          {fieldDisplay?.meaning ? (
+            <WbwMeaning
+              data={wordData}
+              display={display}
+              onChange={(e: string) => {
+                console.log("meaning change", e);
+                const newData: IWbw = JSON.parse(JSON.stringify(wordData));
+                newData.meaning = { value: [e], status: 5 };
+                setWordData(newData);
+                if (typeof onChange !== "undefined") {
+                  onChange(newData);
+                }
+              }}
+            />
+          ) : undefined}
+          {fieldDisplay?.factors ? (
+            <WbwFactors
+              data={wordData}
+              display={display}
+              onChange={(e: string) => {
+                console.log("factor change", e);
+                const newData: IWbw = JSON.parse(JSON.stringify(wordData));
+                newData.factors = { value: e, status: 5 };
+                setWordData(newData);
+              }}
+            />
+          ) : undefined}
+          {fieldDisplay?.factorMeaning ? (
+            <WbwFactorMeaning
+              data={wordData}
+              display={display}
+              onChange={(e: string) => {
+                const newData: IWbw = JSON.parse(JSON.stringify(wordData));
+                newData.factorMeaning = { value: e, status: 5 };
+                setWordData(newData);
+              }}
+            />
+          ) : undefined}
+          {fieldDisplay?.case ? (
+            <WbwCase
+              data={wordData}
+              display={display}
+              onSplit={(e: boolean) => {
+                console.log("onSplit", wordData.factors?.value);
+                if (typeof onSplit !== "undefined") {
+                  onSplit(e);
+                }
+              }}
+              onChange={(e: string) => {
+                const newData: IWbw = JSON.parse(JSON.stringify(wordData));
+                newData.case = { value: e.split("+"), status: 5 };
+                setWordData(newData);
+              }}
+            />
+          ) : undefined}
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 };
 
 export default Widget;