自动查词按钮支持loading

dashboard/src/components/template/SentEdit.tsx

@@ -71,6 +71,7 @@ export const SentEditInner = ({
 }: IWidgetSentEditInner) => {
   const [wbwData, setWbwData] = useState<IWbw[]>();
   const [magicDict, setMagicDict] = useState<string>();
+  const [magicDictLoading, setMagicDictLoading] = useState(false);
 
   useEffect(() => {
     const content = origin?.find(
@@ -96,6 +97,9 @@ export const SentEditInner = ({
         onWbwChange={(data: IWbw[]) => {
           setWbwData(data);
         }}
+        onMagicDictDone={() => {
+          setMagicDictLoading(false);
+        }}
       />
       <SentTab
         id={id}
@@ -110,8 +114,10 @@ export const SentEditInner = ({
         originNum={originNum}
         simNum={simNum}
         wbwData={wbwData}
+        magicDictLoading={magicDictLoading}
         onMagicDict={(type: string) => {
           setMagicDict(type);
+          setMagicDictLoading(true);
         }}
       />
     </Card>

dashboard/src/components/template/SentEdit/SentContent.tsx

@@ -24,6 +24,7 @@ interface IWidgetSentContent {
   layout?: TDirection;
   magicDict?: string;
   onWbwChange?: Function;
+  onMagicDictDone?: Function;
 }
 const SentContentWidget = ({
   sid,
@@ -36,6 +37,7 @@ const SentContentWidget = ({
   layout = "column",
   magicDict,
   onWbwChange,
+  onMagicDictDone,
 }: IWidgetSentContent) => {
   const [layoutDirection, setLayoutDirection] = useState<TDirection>(layout);
   const [layoutFlex, setLayoutFlex] = useState<ILayoutFlex>({
@@ -101,6 +103,11 @@ const SentContentWidget = ({
                     onWbwChange(data);
                   }
                 }}
+                onMagicDictDone={() => {
+                  if (typeof onMagicDictDone !== "undefined") {
+                    onMagicDictDone();
+                  }
+                }}
               />
             );
           } else {

dashboard/src/components/template/SentEdit/SentMenu.tsx

@@ -2,15 +2,19 @@ import { Button, Dropdown } from "antd";
 import { MoreOutlined } from "@ant-design/icons";
 import type { MenuProps } from "antd";
 import RelatedPara from "../../corpus/RelatedPara";
-import { useState } from "react";
 
 interface ISentMenu {
   book?: number;
   para?: number;
+  loading?: boolean;
   onMagicDict?: Function;
 }
-const SentMenuWidget = ({ book, para, onMagicDict }: ISentMenu) => {
-  const [loading, setLoading] = useState(false);
+const SentMenuWidget = ({
+  book,
+  para,
+  loading = false,
+  onMagicDict,
+}: ISentMenu) => {
   const items: MenuProps["items"] = [
     {
       key: "magic-dict-current",
@@ -38,7 +42,6 @@ const SentMenuWidget = ({ book, para, onMagicDict }: ISentMenu) => {
     switch (key) {
       case "magic-dict-current":
         if (typeof onMagicDict !== "undefined") {
-          setLoading(true);
           onMagicDict("current");
         }
         break;

dashboard/src/components/template/SentEdit/SentTab.tsx

@@ -30,6 +30,7 @@ interface IWidget {
   originNum: number;
   simNum?: number;
   wbwData?: IWbw[];
+  magicDictLoading?: boolean;
   onMagicDict?: Function;
 }
 const SentTabWidget = ({
@@ -45,6 +46,7 @@ const SentTabWidget = ({
   originNum,
   simNum = 0,
   wbwData,
+  magicDictLoading = false,
   onMagicDict,
 }: IWidget) => {
   const intl = useIntl();
@@ -73,6 +75,7 @@ const SentTabWidget = ({
             <SentMenu
               book={book}
               para={para}
+              loading={magicDictLoading}
               onMagicDict={(type: string) => {
                 if (typeof onMagicDict !== "undefined") {
                   onMagicDict(type);

dashboard/src/components/template/WbwSent.tsx

@@ -62,7 +62,7 @@ interface IWidget {
   display?: "block" | "inline";
   fields?: IWbwFields;
   magicDict?: string;
-
+  onMagicDictDone?: Function;
   onChange?: Function;
 }
 export const WbwSentCtl = ({
@@ -76,6 +76,7 @@ export const WbwSentCtl = ({
   fields,
   magicDict,
   onChange,
+  onMagicDictDone,
 }: IWidget) => {
   const [wordData, setWordData] = useState<IWbw[]>(data);
   const [wbwMode, setWbwMode] = useState(display);
@@ -121,14 +122,20 @@ export const WbwSentCtl = ({
       word_end: wordEnd,
       data: wordData,
       channel_id: channelId,
-    }).then((json) => {
-      if (json.ok) {
-        console.log("magic dict result", json.data);
-        setWordData(json.data);
-      } else {
-        console.error(json.message);
-      }
-    });
+    })
+      .then((json) => {
+        if (json.ok) {
+          console.log("magic dict result", json.data);
+          setWordData(json.data);
+        } else {
+          console.error(json.message);
+        }
+      })
+      .finally(() => {
+        if (typeof onMagicDictDone !== "undefined") {
+          onMagicDictDone();
+        }
+      });
   }, [magicDict]);
   return (
     <div style={{ display: "flex", flexWrap: "wrap" }}>