Merge pull request #1862 from visuddhinanda/agile

:bug: 点 factor 搜索框单词改变

dashboard/src/components/dict/DictComponent.tsx

@@ -19,15 +19,7 @@ const DictComponentWidget = ({ word }: IWidgetDict) => {
     }
   }, [searchWord]);
 
-  return (
-    <Dictionary
-      word={wordSearch}
-      compact={true}
-      onSearch={(value: string, isFactor?: boolean) => {
-        store.dispatch(lookup(value));
-      }}
-    />
-  );
+  return <Dictionary word={wordSearch} compact={true} />;
 };
 
 export default DictComponentWidget;

dashboard/src/components/dict/DictSearch.tsx

@@ -4,6 +4,7 @@ import type { IDictContentData, IApiDictContentData } from "./DictContent";
 import { get } from "../../request";
 
 import DictContent from "./DictContent";
+import { Skeleton } from "antd";
 
 interface IWidget {
   word: string | undefined;
@@ -11,6 +12,7 @@ interface IWidget {
 }
 
 const DictSearchWidget = ({ word, compact = false }: IWidget) => {
+  const [loading, setLoading] = useState(false);
   const defaultData: IDictContentData = {
     dictlist: [],
     words: [],
@@ -23,10 +25,13 @@ const DictSearchWidget = ({ word, compact = false }: IWidget) => {
       return;
     }
     const url = `/v2/dict?word=${word}`;
+    console.info("url", url);
+    setLoading(true);
     get<IApiDictContentData>(url)
       .then((json) => {
         setTableData(json.data);
       })
+      .finally(() => setLoading(false))
       .catch((error) => {
         console.error(error);
       });
@@ -34,7 +39,14 @@ const DictSearchWidget = ({ word, compact = false }: IWidget) => {
 
   return (
     <>
-      <DictContent word={word} data={tableData} compact={compact} />
+      {loading ? (
+        <div>
+          <div>searching {word}</div>
+          <Skeleton active />
+        </div>
+      ) : (
+        <DictContent word={word} data={tableData} compact={compact} />
+      )}
     </>
   );
 };

dashboard/src/components/dict/Dictionary.tsx

@@ -26,11 +26,16 @@ const DictionaryWidget = ({ word, compact = false, onSearch }: IWidget) => {
 
   const dictSearch = (value: string, isFactor?: boolean) => {
     console.log("onSearch", value);
-    const word = value.toLowerCase();
-    setWordSearch(word);
+    const currWord = value.toLowerCase();
     document.getElementById("pcd_dict_top")?.scrollIntoView();
     if (typeof onSearch !== "undefined") {
-      onSearch(value, isFactor);
+      if (!isFactor) {
+        onSearch(currWord);
+      } else {
+        setWordSearch(currWord);
+      }
+    } else {
+      setWordSearch(currWord);
     }
   };
   return (
@@ -63,7 +68,7 @@ const DictionaryWidget = ({ word, compact = false, onSearch }: IWidget) => {
         <Row>
           {compact ? <></> : <Col flex="auto"></Col>}
           <Col flex="1260px">
-            <Compound word={wordSearch} add={split} onSearch={dictSearch} />
+            <Compound word={word} add={split} onSearch={dictSearch} />
             <DictSearch word={wordSearch} compact={compact} />
           </Col>
           {compact ? <></> : <Col flex="auto"></Col>}

dashboard/src/components/dict/SearchVocabulary.tsx

@@ -31,8 +31,9 @@ const SearchVocabularyWidget = ({
   const intervalRef = useRef<number | null>(null); //防抖计时器句柄
 
   useEffect(() => {
-    setInput(value);
     console.log("dict input", value);
+    setInput(value);
+    factorChange(value);
   }, [value]);
 
   const renderItem = (title: string, count: number, meaning?: string) => ({
@@ -70,6 +71,24 @@ const SearchVocabularyWidget = ({
     }
   };
 
+  const factorChange = (word?: string) => {
+    if (typeof word === "undefined") {
+      setFactors([]);
+      return;
+    }
+    const strFactors = word.replaceAll("+", "-");
+    if (strFactors.indexOf("-") >= 0) {
+      setFactors(strFactors.split("-"));
+      if (typeof onSplit !== "undefined") {
+        onSplit(strFactors.replaceAll("-", "+"));
+      }
+    } else {
+      setFactors([]);
+      if (typeof onSplit !== "undefined") {
+        onSplit();
+      }
+    }
+  };
   const search = (value: string) => {
     console.log("search", value);
     stopLookup();
@@ -103,22 +122,10 @@ const SearchVocabularyWidget = ({
         popupClassName="certain-category-search-dropdown"
         dropdownMatchSelectWidth={400}
         options={options}
-        onChange={(value: string, option: ValueType | ValueType[]) => {
+        onChange={(value: string) => {
           console.log("input", value);
           setInput(value);
-
-          const strFactors = value.replaceAll("+", "-");
-          if (strFactors.indexOf("-") >= 0) {
-            setFactors(strFactors.split("-"));
-            if (typeof onSplit !== "undefined") {
-              onSplit(strFactors.replaceAll("-", "+"));
-            }
-          } else {
-            setFactors([]);
-            if (typeof onSplit !== "undefined") {
-              onSplit();
-            }
-          }
+          factorChange(value);
         }}
         onSearch={(value: string) => {
           console.log("auto complete on search", value);

dashboard/src/pages/library/dict/recent.tsx

@@ -10,10 +10,8 @@ const Widget = () => {
   return (
     <div>
       <Dictionary
-        onSearch={(value: string, isFactor?: boolean) => {
-          if (!isFactor) {
-            navigate("/dict/" + value);
-          }
+        onSearch={(value: string) => {
+          navigate("/dict/" + value);
         }}
       />
       <Content>

dashboard/src/pages/library/dict/show.tsx

@@ -8,10 +8,8 @@ const Widget = () => {
   return (
     <Dictionary
       word={word}
-      onSearch={(value: string, isFactor?: boolean) => {
-        if (!isFactor) {
-          navigate("/dict/" + value);
-        }
+      onSearch={(value: string) => {
+        navigate("/dict/" + value);
       }}
     />
   );