添加下拉菜单

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

@@ -1,10 +1,34 @@
+import type { MenuProps } from "antd";
+import { Dropdown } from "antd";
+
 import { IWbw } from "./WbwWord";
 
+const items: MenuProps["items"] = [
+  {
+    key: "1",
+    label: "factors",
+  },
+  {
+    key: "2",
+    label: "factors",
+  },
+  {
+    key: "3",
+    label: "factors",
+  },
+];
+
 interface IWidget {
   data: IWbw;
 }
 const Widget = ({ data }: IWidget) => {
-  return <div>{data.factors?.value}</div>;
+  return (
+    <div>
+      <Dropdown menu={{ items }} placement="bottomLeft">
+        <span>{data.factors ? data.factors?.value : "拆分"}</span>
+      </Dropdown>
+    </div>
+  );
 };
 
 export default Widget;

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

@@ -1,10 +1,34 @@
+import { Popover } from "antd";
 import { IWbw } from "./WbwWord";
+import WbwMeaningSelect from "./WbwMeaningSelect";
 
 interface IWidget {
   data: IWbw;
+  onChange?: Function;
 }
-const Widget = ({ data }: IWidget) => {
-  return <div>{data.meaning?.value}</div>;
+const Widget = ({ data, onChange }: IWidget) => {
+  return (
+    <div>
+      <Popover
+        content={
+          <div style={{ width: 500 }}>
+            <WbwMeaningSelect
+              data={data}
+              onSelect={(e: string) => {
+                if (typeof onChange !== "undefined") {
+                  onChange(e);
+                }
+              }}
+            />
+          </div>
+        }
+        placement="bottomLeft"
+        trigger="hover"
+      >
+        {data.meaning?.value}
+      </Popover>
+    </div>
+  );
 };
 
 export default Widget;

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

@@ -93,12 +93,22 @@ const Widget = ({
           const newData: IWbw = JSON.parse(JSON.stringify(e));
           setWordData(newData);
           if (typeof onChange !== "undefined") {
-            //onChange(e);
+            onChange(e);
           }
         }}
       />
       <div style={{ backgroundColor: wordData.bookMarkColor?.value }}>
-        {fields?.meaning ? <WbwMeaning data={wordData} /> : undefined}
+        {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} />