添加单句变逐词解析模式

dashboard/src/components/template/SentEdit.tsx

@@ -9,6 +9,7 @@ import { ITocPathNode } from "../corpus/TocPath";
 import SentContent from "./SentEdit/SentContent";
 import SentTab from "./SentEdit/SentTab";
 import { IWbw } from "./Wbw/WbwWord";
+import { ArticleMode } from "../article/Article";
 
 export interface ISuggestionCount {
   suggestion?: number;
@@ -57,6 +58,7 @@ export interface IWidgetSentEditInner {
   originNum: number;
   simNum?: number;
   compact?: boolean;
+  mode?: ArticleMode;
 }
 export const SentEditInner = ({
   id,
@@ -75,11 +77,13 @@ export const SentEditInner = ({
   originNum,
   simNum,
   compact = false,
+  mode,
 }: IWidgetSentEditInner) => {
   const [wbwData, setWbwData] = useState<IWbw[]>();
   const [magicDict, setMagicDict] = useState<string>();
   const [magicDictLoading, setMagicDictLoading] = useState(false);
   const [isCompact, setIsCompact] = useState(compact);
+  const [articleMode, setArticleMode] = useState<ArticleMode | undefined>(mode);
 
   useEffect(() => {
     const content = origin?.find(
@@ -109,6 +113,7 @@ export const SentEditInner = ({
         layout={layout}
         magicDict={magicDict}
         compact={isCompact}
+        mode={articleMode}
         onWbwChange={(data: IWbw[]) => {
           setWbwData(data);
         }}
@@ -133,11 +138,13 @@ export const SentEditInner = ({
         wbwData={wbwData}
         magicDictLoading={magicDictLoading}
         compact={isCompact}
+        mode={articleMode}
         onMagicDict={(type: string) => {
           setMagicDict(type);
           setMagicDictLoading(true);
         }}
         onCompact={(value: boolean) => setIsCompact(value)}
+        onModeChange={(value: ArticleMode | undefined) => setArticleMode(value)}
       />
     </Card>
   );

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

@@ -5,8 +5,9 @@ import { useAppSelector } from "../../../hooks";
 import { settingInfo } from "../../../reducers/setting";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { GetUserSetting } from "../../auth/setting/default";
-import { mode } from "../../../reducers/article-mode";
+import { mode as _mode } from "../../../reducers/article-mode";
 import { IWbw } from "../Wbw/WbwWord";
+import { ArticleMode } from "../../article/Article";
 
 interface ILayoutFlex {
   left: number;
@@ -24,6 +25,7 @@ interface IWidgetSentContent {
   layout?: TDirection;
   magicDict?: string;
   compact?: boolean;
+  mode?: ArticleMode;
   onWbwChange?: Function;
   onMagicDictDone?: Function;
 }
@@ -37,6 +39,7 @@ const SentContentWidget = ({
   translation,
   layout = "column",
   compact = false,
+  mode,
   magicDict,
   onWbwChange,
   onMagicDictDone,
@@ -66,9 +69,19 @@ const SentContentWidget = ({
     }
   }, [settings]);
 
-  const newMode = useAppSelector(mode);
+  const newMode = useAppSelector(_mode);
+
   useEffect(() => {
-    switch (newMode) {
+    console.log("mode", mode);
+    let currMode: ArticleMode;
+    if (typeof mode !== "undefined") {
+      currMode = mode;
+    } else if (typeof newMode !== "undefined") {
+      currMode = newMode;
+    } else {
+      return;
+    }
+    switch (currMode) {
       case "edit":
         setLayoutFlex({
           left: 5,
@@ -82,7 +95,7 @@ const SentContentWidget = ({
         });
         break;
     }
-  }, [newMode]);
+  }, [mode, newMode]);
 
   useLayoutEffect(() => {
     const width = divShell.current?.offsetWidth;
@@ -120,6 +133,7 @@ const SentContentWidget = ({
                 magicDict={magicDict}
                 channelId={item.channel.id}
                 data={JSON.parse(item.content)}
+                mode={mode}
                 onChange={(data: IWbw[]) => {
                   if (typeof onWbwChange !== "undefined") {
                     onWbwChange(data);

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

@@ -1,26 +1,31 @@
+import { useIntl } from "react-intl";
 import { Badge, Button, Dropdown, Space } from "antd";
-import { MoreOutlined } from "@ant-design/icons";
+import { MoreOutlined, CheckOutlined } from "@ant-design/icons";
 import type { MenuProps } from "antd";
 import RelatedPara from "../../corpus/RelatedPara";
+import { ArticleMode } from "../../article/Article";
 
 interface ISentMenu {
   book?: number;
   para?: number;
   loading?: boolean;
+  mode?: ArticleMode;
   onMagicDict?: Function;
   onMenuClick?: Function;
 }
 const SentMenuWidget = ({
   book,
   para,
+  mode,
   loading = false,
   onMagicDict,
   onMenuClick,
 }: ISentMenu) => {
+  const intl = useIntl();
   const items: MenuProps["items"] = [
     {
       key: "magic-dict-current",
-      label: "神奇字典",
+      label: intl.formatMessage({ id: "buttons.magic-dict" }),
     },
     {
       key: "show-commentary",
@@ -32,20 +37,53 @@ const SentMenuWidget = ({
     },
     {
       key: "copy-id",
-      label: "复制句子编号",
+      label: intl.formatMessage({ id: "buttons.copy.id" }),
     },
     {
       key: "copy-link",
-      label: "复制句子链接",
+      label: intl.formatMessage({ id: "buttons.copy.link" }),
     },
     {
       type: "divider",
     },
+    {
+      key: "origin",
+      label: "原文模式",
+      children: [
+        {
+          key: "origin-auto",
+          label: "自动",
+          icon: (
+            <CheckOutlined
+              style={{ visibility: mode === undefined ? "visible" : "hidden" }}
+            />
+          ),
+        },
+        {
+          key: "origin-edit",
+          label: "翻译",
+          icon: (
+            <CheckOutlined
+              style={{ visibility: mode === "edit" ? "visible" : "hidden" }}
+            />
+          ),
+        },
+        {
+          key: "origin-wbw",
+          label: "逐词",
+          icon: (
+            <CheckOutlined
+              style={{ visibility: mode === "wbw" ? "visible" : "hidden" }}
+            />
+          ),
+        },
+      ],
+    },
     {
       key: "compact",
       label: (
         <Space>
-          {"紧凑"}
+          {intl.formatMessage({ id: "buttons.compact" })}
           <Badge count="Beta" showZero color="#faad14" />
         </Space>
       ),

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

@@ -14,6 +14,7 @@ import TocPath, { ITocPathNode } from "../../corpus/TocPath";
 import { IWbw } from "../Wbw/WbwWord";
 import RelaGraphic from "../Wbw/RelaGraphic";
 import SentMenu from "./SentMenu";
+import { ArticleMode } from "../../article/Article";
 
 const { Text } = Typography;
 
@@ -34,8 +35,10 @@ interface IWidget {
   wbwData?: IWbw[];
   magicDictLoading?: boolean;
   compact?: boolean;
+  mode?: ArticleMode;
   onMagicDict?: Function;
   onCompact?: Function;
+  onModeChange?: Function;
 }
 const SentTabWidget = ({
   id,
@@ -53,8 +56,10 @@ const SentTabWidget = ({
   wbwData,
   magicDictLoading = false,
   compact = false,
+  mode,
   onMagicDict,
   onCompact,
+  onModeChange,
 }: IWidget) => {
   const intl = useIntl();
   const [isCompact, setIsCompact] = useState(compact);
@@ -110,6 +115,7 @@ const SentTabWidget = ({
             book={book}
             para={para}
             loading={magicDictLoading}
+            mode={mode}
             onMagicDict={(type: string) => {
               if (typeof onMagicDict !== "undefined") {
                 onMagicDict(type);
@@ -129,6 +135,16 @@ const SentTabWidget = ({
                     onCompact(false);
                   }
                   break;
+                case "origin-edit":
+                  if (typeof onModeChange !== "undefined") {
+                    onModeChange("edit");
+                  }
+                  break;
+                case "origin-wbw":
+                  if (typeof onModeChange !== "undefined") {
+                    onModeChange("wbw");
+                  }
+                  break;
                 default:
                   break;
               }

dashboard/src/components/template/WbwSent.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { MoreOutlined } from "@ant-design/icons";
 
 import { useAppSelector } from "../../hooks";
-import { mode } from "../../reducers/article-mode";
+import { mode as _mode } from "../../reducers/article-mode";
 import { post } from "../../request";
 import { ArticleMode } from "../article/Article";
 import WbwWord, {
@@ -84,6 +84,7 @@ interface IWidget {
   layoutDirection?: "h" | "v";
   magicDict?: string;
   refreshable?: boolean;
+  mode?: ArticleMode;
   onMagicDictDone?: Function;
   onChange?: Function;
 }
@@ -98,6 +99,7 @@ export const WbwSentCtl = ({
   display = "block",
   fields,
   layoutDirection = "h",
+  mode,
   magicDict,
   refreshable = false,
   onChange,
@@ -111,12 +113,14 @@ export const WbwSentCtl = ({
   const [magic, setMagic] = useState<string>();
   const [loading, setLoading] = useState(false);
   const settings = useAppSelector(settingInfo);
+  const [articleMode, setArticleMode] = useState<ArticleMode | undefined>(mode);
 
   useEffect(() => {
     setMagic(magicDict);
   }, [magicDict]);
 
-  const newMode = useAppSelector(mode);
+  const newMode = useAppSelector(_mode);
+
   const update = (data: IWbw[]) => {
     setWordData(data);
     if (typeof onChange !== "undefined") {
@@ -154,8 +158,17 @@ export const WbwSentCtl = ({
   }, [book, para, wordData, wordEnd, wordStart]);
 
   useEffect(() => {
-    setDisplayMode(newMode);
-    switch (newMode) {
+    console.log("mode", mode);
+    let currMode: ArticleMode | undefined;
+    if (typeof mode !== "undefined") {
+      currMode = mode;
+    } else if (typeof newMode !== "undefined") {
+      currMode = newMode;
+    } else {
+      currMode = undefined;
+    }
+    setDisplayMode(currMode);
+    switch (currMode) {
       case "edit":
         if (typeof display === "undefined") {
           setWbwMode("block");
@@ -185,7 +198,7 @@ export const WbwSentCtl = ({
         }
         break;
     }
-  }, [newMode]);
+  }, [newMode, mode]);
 
   useEffect(() => {
     if (typeof magic === "undefined") {