单段改变显示模式

dashboard/src/components/template/ParaHandle.tsx

@@ -4,6 +4,8 @@ import { fullUrl } from "../../utils";
 import { useIntl } from "react-intl";
 import { addToCart } from "./SentEdit/SentCart";
 import { scrollToTop } from "../../pages/library/article/show";
+import store from "../../store";
+import { modeChange } from "../../reducers/article-mode";
 
 interface IWidgetParaHandleCtl {
   book: number;
@@ -39,6 +41,29 @@ export const ParaHandleCtl = ({
     {
       type: "divider",
     },
+    {
+      key: "mode",
+      label: intl.formatMessage({
+        id: "buttons.set.display.mode",
+      }),
+      children: [
+        {
+          key: "mode-translate",
+          label: intl.formatMessage({
+            id: "buttons.translate",
+          }),
+        },
+        {
+          key: "mode-wbw",
+          label: intl.formatMessage({
+            id: "buttons.wbw",
+          }),
+        },
+      ],
+    },
+    {
+      type: "divider",
+    },
     {
       key: "copy-sent",
       label: intl.formatMessage({
@@ -112,6 +137,12 @@ export const ParaHandleCtl = ({
       case "solo-in-tab":
         window.open(fullUrl(url), "_blank");
         break;
+      case "mode-translate":
+        store.dispatch(modeChange({ mode: "edit", id: `${book}-${para}` }));
+        break;
+      case "mode-wbw":
+        store.dispatch(modeChange({ mode: "wbw", id: `${book}-${para}` }));
+        break;
       case "copy-sent":
         copyToClipboard(sentences.map((item) => `{{${item}}}`).join(""));
         break;
@@ -136,6 +167,7 @@ export const ParaHandleCtl = ({
       case "quote-link-tpl-t":
         copyToClipboard(`{{ql|type=t|book=${book}|para=${para}}}`);
         break;
+
       default:
         break;
     }

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

@@ -75,11 +75,20 @@ const SentContentWidget = ({
   const newMode = useAppSelector(_mode);
 
   useEffect(() => {
-    let currMode: ArticleMode;
+    let currMode: ArticleMode | undefined;
     if (typeof mode !== "undefined") {
       currMode = mode;
     } else if (typeof newMode !== "undefined") {
-      currMode = newMode;
+      if (typeof newMode.id === "undefined") {
+        currMode = newMode.mode;
+      } else {
+        const sentId = newMode.id.split("-");
+        if (sentId.length === 2) {
+          if (book === parseInt(sentId[0]) && para === parseInt(sentId[1])) {
+            currMode = newMode.mode;
+          }
+        }
+      }
     } else {
       return;
     }
@@ -97,7 +106,7 @@ const SentContentWidget = ({
         });
         break;
     }
-  }, [mode, newMode]);
+  }, [book, mode, newMode, para]);
 
   useLayoutEffect(() => {
     const width = divShell.current?.offsetWidth;

dashboard/src/components/template/WbwSent.tsx

@@ -264,7 +264,16 @@ export const WbwSentCtl = ({
     if (typeof mode !== "undefined") {
       currMode = mode;
     } else if (typeof newMode !== "undefined") {
-      currMode = newMode;
+      if (typeof newMode.id === "undefined") {
+        currMode = newMode.mode;
+      } else {
+        const sentId = newMode.id.split("-");
+        if (sentId.length === 2) {
+          if (book === parseInt(sentId[0]) && para === parseInt(sentId[1])) {
+            currMode = newMode.mode;
+          }
+        }
+      }
     } else {
       currMode = undefined;
     }
@@ -299,7 +308,7 @@ export const WbwSentCtl = ({
         }
         break;
     }
-  }, [newMode, mode]);
+  }, [newMode, mode, book, para, display, fields]);
 
   const magicDictLookup = () => {
     let _lang = GetUserSetting("setting.dict.lang", settings);