visuddhinanda 3 лет назад
Родитель
Сommit
91e57a5983

+ 21 - 4
dashboard/src/components/dict/DictComponent.tsx

@@ -1,19 +1,35 @@
-import { Layout, Affix, Col, Row } from "antd";
+import { useState, useEffect } from "react";
+import { Affix, Col, Row } from "antd";
 import { Input } from "antd";
 
-import { useState } from "react";
 import DictSearch from "./DictSearch";
+
+import { useAppSelector } from "../../hooks";
+import { message } from "../../reducers/command";
+
 const { Search } = Input;
 
-const Widget = () => {
+export interface IWidgetDict {
+  word?: string;
+}
+const Widget = ({ word }: IWidgetDict) => {
   const [container, setContainer] = useState<HTMLDivElement | null>(null);
-  const [wordSearch, setWordSearch] = useState("");
+  const [wordSearch, setWordSearch] = useState(word);
 
   const onSearch = (value: string) => {
     console.log("onSearch", value);
     setWordSearch(value);
   };
 
+  //接收查字典消息
+  const commandMsg = useAppSelector(message);
+  useEffect(() => {
+    console.log("get command", commandMsg);
+    if (commandMsg?.type === "dict") {
+      setWordSearch(commandMsg.prop?.word);
+    }
+  }, [commandMsg]);
+
   return (
     <div ref={setContainer}>
       <Affix offsetTop={0} target={() => container}>
@@ -24,6 +40,7 @@ const Widget = () => {
               <Search
                 placeholder="input search text"
                 onSearch={onSearch}
+                value={wordSearch}
                 style={{ width: "100%" }}
               />
             </Col>

+ 27 - 5
dashboard/src/components/template/Wd.tsx

@@ -1,14 +1,36 @@
-import { Popover } from "antd";
+import { useState } from "react";
+import { command } from "../../reducers/command";
+import store from "../../store";
+import { IWidgetDict } from "../dict/DictComponent";
 
 interface IWidgetWdCtl {
   text?: string;
 }
-const WdCtl = ({ text }: IWidgetWdCtl) => {
-  const noteCard = "note";
+export const WdCtl = ({ text }: IWidgetWdCtl) => {
+  const [isHover, setIsHover] = useState(false);
   return (
-    <Popover content={noteCard} placement="bottom">
+    <span
+      onMouseEnter={() => {
+        setIsHover(true);
+      }}
+      onMouseLeave={() => {
+        setIsHover(false);
+      }}
+      onClick={() => {
+        //发送点词查询消息
+        const it: IWidgetDict = {
+          word: text,
+        };
+        store.dispatch(command({ prop: it, type: "dict" }));
+      }}
+      style={{
+        textDecoration: isHover ? "underline dotted" : "none",
+        textUnderlineOffset: 4,
+        cursor: "pointer",
+      }}
+    >
       {text}{" "}
-    </Popover>
+    </span>
   );
 };