:sparkles: 添加复合词拆分功能

dashboard/src/components/dict/Compound.tsx

@@ -0,0 +1,81 @@
+import { List, Select, Space, Typography } from "antd";
+import { useEffect, useState } from "react";
+import { get } from "../../request";
+import {
+  IApiResponseDictList,
+  IDictFirstMeaningResponse,
+  IFirstMeaning,
+} from "../api/Dict";
+
+const { Text } = Typography;
+
+interface IOptions {
+  value: string;
+  label: string;
+}
+interface IWidget {
+  word?: string;
+  add?: string;
+  split?: string;
+}
+const Widget = ({ word, add, split }: IWidget) => {
+  const [compound, setCompound] = useState<IOptions[]>([]);
+  const [factors, setFactors] = useState<IOptions[]>([]);
+  const [meaningData, setMeaningData] = useState<IFirstMeaning[]>();
+  const [currValue, setCurrValue] = useState<string>();
+  const onSelectChange = (value: string) => {
+    console.log("selected", value);
+    get<IDictFirstMeaningResponse>(
+      `/v2/dict-meaning?lang=zh-Hans&word=` + value.replaceAll("+", "-")
+    ).then((json) => {
+      if (json.ok) {
+        setMeaningData(json.data);
+      }
+    });
+  };
+  useEffect(() => {
+    if (typeof add === "undefined") {
+      setFactors(compound);
+    } else {
+      setFactors([{ value: add, label: add }, ...compound]);
+      setCurrValue(add);
+      onSelectChange(add);
+    }
+  }, [add, compound]);
+  useEffect(() => {
+    get<IApiResponseDictList>(`/v2/userdict?view=compound&word=${word}`).then(
+      (json) => {
+        if (json.ok) {
+          const data = json.data.rows.map((item) => {
+            return { value: item.factors, label: item.factors };
+          });
+          setCompound(data);
+        }
+      }
+    );
+  }, [word]);
+  return (
+    <div>
+      <Select
+        value={currValue}
+        style={{ width: "100%" }}
+        onChange={onSelectChange}
+        options={factors}
+      />
+      <List
+        size="small"
+        dataSource={meaningData}
+        renderItem={(item) => (
+          <List.Item>
+            <div>
+              <Text strong>{item.word}</Text>{" "}
+              <Text type="secondary">{item.meaning}</Text>
+            </div>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+};
+
+export default Widget;

dashboard/src/components/dict/Dictionary.tsx

@@ -4,6 +4,7 @@ import { Layout, Affix, Col, Row } from "antd";
 
 import DictSearch from "./DictSearch";
 import SearchVocabulary from "./SearchVocabulary";
+import Compound from "./Compound";
 
 const { Content } = Layout;
 
@@ -14,6 +15,7 @@ interface IWidget {
 }
 const Widget = ({ word, compact = false, onSearch }: IWidget) => {
   const navigate = useNavigate();
+  const [split, setSplit] = useState<string>();
   const [wordSearch, setWordSearch] = useState<string>();
   const [container, setContainer] = useState<HTMLDivElement | null>(null);
 
@@ -43,6 +45,9 @@ const Widget = ({ word, compact = false, onSearch }: IWidget) => {
                     onSearch(value, isFactor);
                   }
                 }}
+                onSplit={(word: string | undefined) => {
+                  setSplit(word);
+                }}
               />
             </Col>
             {compact ? <></> : <Col flex="auto"></Col>}
@@ -53,6 +58,7 @@ const Widget = ({ word, compact = false, onSearch }: IWidget) => {
         <Row>
           {compact ? <></> : <Col flex="auto"></Col>}
           <Col flex="1260px">
+            <Compound word={wordSearch} add={split} />
             <DictSearch word={wordSearch} compact={compact} />
           </Col>
           {compact ? <></> : <Col flex="auto"></Col>}

dashboard/src/components/dict/SearchVocabulary.tsx

@@ -12,10 +12,11 @@ interface ValueType {
   value: string | number;
 }
 interface IWidget {
-  onSearch?: Function;
   value?: string;
+  onSearch?: Function;
+  onSplit?: Function;
 }
-const Widget = ({ value, onSearch }: IWidget) => {
+const Widget = ({ value, onSplit, onSearch }: IWidget) => {
   const [options, setOptions] = useState<ValueType[]>([]);
   const [fetching, setFetching] = useState(false);
 
@@ -103,6 +104,9 @@ const Widget = ({ value, onSearch }: IWidget) => {
           const strFactors = value.replaceAll("+", "-");
           if (strFactors.indexOf("-") >= 0) {
             setFactors(strFactors.split("-"));
+            if (typeof onSplit !== "undefined") {
+              onSplit(strFactors.replaceAll("-", "+"));
+            }
           } else {
             setFactors([]);
           }