:art: 完成两种模式的wbw 显示

dashboard/src/components/nut/Home.tsx

@@ -38,12 +38,12 @@ const Widget = () => {
       <div style={{ width: 700 }}>
         <WbwSent
           data={wbwData}
-          display="block"
+          display="inline"
           fields={{
             meaning: true,
-            factors: true,
-            factorMeaning: true,
-            case: true,
+            factors: false,
+            factorMeaning: false,
+            case: false,
           }}
         />
       </div>

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

@@ -1,62 +1,68 @@
 import { useState } from "react";
 import { useIntl } from "react-intl";
-import { Dropdown, Tabs, Divider, Button } from "antd";
+import { Dropdown, Tabs, Divider, Button, Switch, Rate } from "antd";
 import type { MenuProps } from "antd";
 import { SaveOutlined } from "@ant-design/icons";
 
-import { IWbw, IWbwField } from "./WbwWord";
+import { IWbw, IWbwField, TFieldName } from "./WbwWord";
 import WbwDetailBasic from "./WbwDetailBasic";
 import WbwDetailBookMark from "./WbwDetailBookMark";
 import WbwDetailNote from "./WbwDetailNote";
 import WbwDetailAdvance from "./WbwDetailAdvance";
+import { LockIcon, UnLockIcon } from "../../../assets/icon";
 
 interface IWidget {
   data: IWbw;
   onClose?: Function;
-  onChange?: Function;
   onSave?: Function;
 }
-const Widget = ({ data, onClose, onChange, onSave }: IWidget) => {
+const Widget = ({ data, onClose, onSave }: IWidget) => {
   const intl = useIntl();
   const [currWbwData, setCurrWbwData] = useState(data);
-  const fieldChanged = (value: IWbwField) => {
+  function fieldChanged(field: TFieldName, value: string) {
     let mData = currWbwData;
-    switch (value.field) {
+    switch (field) {
       case "note":
-        mData.note = { value: value.value, status: 5 };
+        mData.note = { value: value, status: 5 };
         break;
       case "bookMarkColor":
-        mData.bookMarkColor = { value: value.value, status: 5 };
+        mData.bookMarkColor = { value: parseInt(value), status: 5 };
         break;
       case "bookMarkText":
-        mData.bookMarkText = { value: value.value, status: 5 };
+        mData.bookMarkText = { value: value, status: 5 };
         break;
       case "word":
-        mData.word = { value: value.value, status: 5 };
+        mData.word = { value: value, status: 5 };
         break;
       case "real":
-        mData.real = { value: value.value, status: 5 };
+        mData.real = { value: value, status: 5 };
         break;
       case "meaning":
-        mData.meaning = { value: value.value.split("$"), status: 5 };
+        mData.meaning = { value: value.split("$"), status: 5 };
         break;
       case "factors":
-        mData.factors = { value: value.value, status: 5 };
+        mData.factors = { value: value, status: 5 };
         break;
       case "factorMeaning":
-        mData.factorMeaning = { value: value.value, status: 5 };
+        mData.factorMeaning = { value: value, status: 5 };
         break;
       case "parent":
-        mData.parent = { value: value.value, status: 5 };
+        mData.parent = { value: value, status: 5 };
         break;
       case "case":
-        mData.case = { value: value.value.split("$"), status: 5 };
+        mData.case = { value: value.split("$"), status: 5 };
+        break;
+      case "confidence":
+        mData.confidence = parseFloat(value);
+        break;
+      case "locked":
+        mData.locked = JSON.parse(value);
         break;
       default:
         break;
     }
     setCurrWbwData(mData);
-  };
+  }
   const onMenuClick: MenuProps["onClick"] = (e) => {
     console.log("click", e);
   };
@@ -86,7 +92,7 @@ const Widget = ({ data, onClose, onChange, onSave }: IWidget) => {
                   data={data}
                   onChange={(e: IWbwField) => {
                     console.log(e);
-                    fieldChanged(e);
+                    fieldChanged(e.field, e.value);
                   }}
                 />
               </div>
@@ -99,7 +105,7 @@ const Widget = ({ data, onClose, onChange, onSave }: IWidget) => {
               <WbwDetailBookMark
                 data={data}
                 onChange={(e: IWbwField) => {
-                  fieldChanged(e);
+                  fieldChanged(e.field, e.value);
                 }}
               />
             ),
@@ -111,7 +117,7 @@ const Widget = ({ data, onClose, onChange, onSave }: IWidget) => {
               <WbwDetailNote
                 data={data}
                 onChange={(e: IWbwField) => {
-                  fieldChanged(e);
+                  fieldChanged(e.field, e.value);
                 }}
               />
             ),
@@ -124,7 +130,7 @@ const Widget = ({ data, onClose, onChange, onSave }: IWidget) => {
                 <WbwDetailAdvance
                   data={currWbwData}
                   onChange={(e: IWbwField) => {
-                    fieldChanged(e);
+                    fieldChanged(e.field, e.value);
                   }}
                 />
               </div>
@@ -132,7 +138,21 @@ const Widget = ({ data, onClose, onChange, onSave }: IWidget) => {
           },
         ]}
       />
-      <Divider style={{ margin: "8px 0" }}></Divider>
+      <Divider style={{ margin: "4px 0" }}></Divider>
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <Switch
+          checkedChildren={<LockIcon />}
+          unCheckedChildren={<UnLockIcon />}
+        />
+        <Rate
+          allowHalf
+          defaultValue={5}
+          onChange={(value: number) => {
+            fieldChanged("confidence", (value / 5).toString());
+          }}
+        />
+      </div>
+      <Divider style={{ margin: "4px 0" }}></Divider>
       <div style={{ display: "flex", justifyContent: "space-between" }}>
         <div>
           <Button

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

@@ -7,6 +7,8 @@ import { IWbw } from "./WbwWord";
 
 const { TextArea } = Input;
 
+export const bookMarkColor = ["#fff", "#f99", "#ff9", "#9f9", "#9ff", "#99f"];
+
 interface IWidget {
   data: IWbw;
   onChange?: Function;
@@ -19,43 +21,21 @@ const Widget = ({ data, onChange }: IWidget) => {
     width: 28,
     height: 18,
   };
-  const options = [
-    {
-      label: (
-        <span
-          style={{
-            ...styleColor,
-            backgroundColor: "white",
-          }}
-        >
-          none
-        </span>
-      ),
-      value: "unset",
-    },
-    {
-      label: (
-        <span
-          style={{
-            ...styleColor,
-            backgroundColor: "blue",
-          }}
-        ></span>
-      ),
-      value: "blue",
-    },
-    {
+
+  const options = bookMarkColor.map((item, id) => {
+    return {
       label: (
         <span
           style={{
             ...styleColor,
-            backgroundColor: "yellow",
+            backgroundColor: item,
           }}
         ></span>
       ),
-      value: "yellow",
-    },
-  ];
+      value: id,
+    };
+  });
+
   const onColorChange = ({ target: { value } }: RadioChangeEvent) => {
     console.log("radio3 checked", value);
     setValue(value);

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

@@ -1,16 +1,17 @@
 import { useState } from "react";
 import { Popover } from "antd";
-import { TagFilled, InfoCircleOutlined } from "@ant-design/icons";
+import { TagTwoTone, InfoCircleOutlined } from "@ant-design/icons";
 
 import WbwDetail from "./WbwDetail";
 import { IWbw } from "./WbwWord";
+import { bookMarkColor } from "./WbwDetailBookMark";
+import "./wbw.css";
 
 interface IWidget {
   data: IWbw;
-  onChange?: Function;
   onSave?: Function;
 }
-const Widget = ({ data, onChange, onSave }: IWidget) => {
+const Widget = ({ data, onSave }: IWidget) => {
   const [open, setOpen] = useState(false);
   const [paliColor, setPaliColor] = useState("unset");
   const wbwDetail = (
@@ -20,11 +21,6 @@ const Widget = ({ data, onChange, onSave }: IWidget) => {
         setPaliColor("unset");
         setOpen(false);
       }}
-      onChange={(e: IWbw) => {
-        if (typeof onChange !== "undefined") {
-          onChange(e);
-        }
-      }}
       onSave={(e: IWbw) => {
         if (typeof onSave !== "undefined") {
           onSave(e);
@@ -49,15 +45,19 @@ const Widget = ({ data, onChange, onSave }: IWidget) => {
   ) : (
     <></>
   );
+  const color = data.bookMarkColor
+    ? bookMarkColor[data.bookMarkColor.value]
+    : "white";
+
   const bookMarkIcon = data.bookMarkText ? (
     <Popover content={data.bookMarkText.value} placement="bottom">
-      <TagFilled style={{ color: data.bookMarkColor?.value }} />
+      <TagTwoTone twoToneColor={color} />
     </Popover>
   ) : (
     <></>
   );
   return (
-    <div style={{ borderBottom: "1px solid gray" }}>
+    <div className="pali_shell">
       <Popover
         content={wbwDetail}
         placement="bottom"
@@ -66,6 +66,7 @@ const Widget = ({ data, onChange, onSave }: IWidget) => {
         onOpenChange={handleClickChange}
       >
         <span
+          className="pali"
           style={{ backgroundColor: paliColor, padding: 4, borderRadius: 5 }}
         >
           {data.word.value}

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

@@ -1,11 +1,13 @@
 import { useState } from "react";
 import WbwCase from "./WbwCase";
+import { bookMarkColor } from "./WbwDetailBookMark";
 import WbwFactorMeaning from "./WbwFactorMeaning";
 import WbwFactors from "./WbwFactors";
 import WbwMeaning from "./WbwMeaning";
 import WbwPali from "./WbwPali";
+import "./wbw.css";
 
-type FieldName =
+export type TFieldName =
   | "word"
   | "real"
   | "meaning"
@@ -19,10 +21,11 @@ type FieldName =
   | "note"
   | "bookMarkColor"
   | "bookMarkText"
+  | "locked"
   | "confidence";
 
 export interface IWbwField {
-  field: FieldName;
+  field: TFieldName;
   value: string;
 }
 
@@ -39,6 +42,10 @@ interface WbwElement2 {
   value: string[];
   status: WbwStatus;
 }
+interface WbwElement3 {
+  value: number;
+  status: WbwStatus;
+}
 export interface IWbw {
   word: WbwElement;
   real?: WbwElement;
@@ -51,8 +58,9 @@ export interface IWbw {
   factorMeaning?: WbwElement;
   relation?: WbwElement;
   note?: WbwElement;
-  bookMarkColor?: WbwElement;
+  bookMarkColor?: WbwElement3;
   bookMarkText?: WbwElement;
+  locked?: boolean;
   confidence: number;
 }
 export interface IWbwFields {
@@ -78,16 +86,13 @@ const Widget = ({
   const styleWbw: React.CSSProperties = {
     display: display === "block" ? "block" : "flex",
   };
+  const color = wordData.bookMarkColor
+    ? bookMarkColor[wordData.bookMarkColor.value]
+    : "unset";
   return (
-    <div style={styleWbw}>
+    <div className={`wbw_word ${display}`} style={styleWbw}>
       <WbwPali
         data={wordData}
-        onChange={(e: IWbw) => {
-          //setWordData(e);
-          if (typeof onChange !== "undefined") {
-            // onChange(e);
-          }
-        }}
         onSave={(e: IWbw) => {
           console.log("save", e);
           const newData: IWbw = JSON.parse(JSON.stringify(e));
@@ -98,8 +103,9 @@ const Widget = ({
         }}
       />
       <div
+        className="wbw_body"
         style={{
-          background: `linear-gradient(90deg, rgba(255, 255, 255, 0), ${wordData.bookMarkColor?.value})`,
+          background: `linear-gradient(90deg, rgba(255, 255, 255, 0), ${color})`,
         }}
       >
         {fields?.meaning ? (

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

@@ -1,3 +1,25 @@
+.wbw_word {
+  margin: 0 0 0.2em 0;
+  padding-right: 0;
+  max-width: 60vw;
+}
+.block .pali {
+  font-weight: 500;
+  font-size: 110%;
+  padding: 0px 2px;
+  margin: 0px;
+  line-height: 1.5em;
+}
+.block .pali_shell {
+  border-bottom: 1px solid gray;
+}
+.inline .pali {
+  color: brown;
+}
+.block .wbw_body {
+  padding-right: 0.5em;
+  padding-top: 0.2em;
+}
 .wbw_word_item {
   min-width: 3em;
   padding: 0;