Merge pull request #2031 from visuddhinanda/agile

单段改变显示模式

dashboard/src/components/dict/DictComponent.tsx

@@ -17,11 +17,14 @@ const DictComponentWidget = ({ word }: IWidgetDict) => {
 
   useEffect(() => {
     console.log("get command", searchWord);
-    if (myDictDirty) {
-      notification.warning({ message: "用户词典有未保存内容，请保存后再查词" });
-      return;
-    }
+
     if (typeof searchWord === "string" && searchWord !== wordSearch) {
+      if (myDictDirty) {
+        notification.warning({
+          message: "用户词典有未保存内容，请保存后再查词",
+        });
+        return;
+      }
       setWordSearch(searchWord);
     }
   }, [searchWord, myDictDirty, wordSearch]);

dashboard/src/components/discussion/AnchorCard.tsx

@@ -42,7 +42,7 @@ const AnchorCardWidget = ({
         }
         setMode(newMode);
         //发布mode变更
-        store.dispatch(modeChange(newMode as ArticleMode));
+        store.dispatch(modeChange({ mode: newMode as ArticleMode }));
       }}
     />
   );

dashboard/src/components/template/ParaHandle.tsx

@@ -3,6 +3,9 @@ import { useNavigate, useSearchParams } from "react-router-dom";
 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;
@@ -38,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({
@@ -106,10 +132,17 @@ export const ParaHandleCtl = ({
     switch (e.key) {
       case "solo":
         navigate(url);
+        scrollToTop();
         break;
       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;
@@ -134,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/SentCell.tsx

@@ -304,27 +304,35 @@ const SentCellWidget = ({
               setIsEditMode(true);
               break;
             case "markdown":
-              setSentData((origin) => {
-                if (origin) {
-                  const wbwData: IWbw[] = origin.content
-                    ? JSON.parse(origin.content)
-                    : [];
-                  const newContent = wbwData
-                    .map((item) => {
-                      return [
-                        item.word.value,
-                        item.real.value,
-                        item.meaning?.value,
-                      ].join("=");
-                    })
-                    .join("\n");
-                  origin.content = newContent;
-                  origin.contentType = "markdown";
-                  sentSave(origin, intl);
-                  return origin;
-                }
+              Modal.confirm({
+                title: "格式转换",
+                content:
+                  "转换为markdown格式后，拆分意思数据会丢失。确定要转换吗？",
+                onOk() {
+                  if (sentData) {
+                    let newData = JSON.parse(JSON.stringify(sentData));
+                    const wbwData: IWbw[] = newData.content
+                      ? JSON.parse(newData.content)
+                      : [];
+                    const newContent = wbwData
+                      .filter((value) => value.sn.length === 1)
+                      .map((item) => {
+                        return [
+                          item.word.value,
+                          item.real.value,
+                          item.meaning?.value,
+                        ].join("=");
+                      })
+                      .join("\n");
+                    newData.content = newContent;
+                    newData["contentType"] = "markdown";
+                    sentSave(newData, intl);
+                    setSentData(newData);
+                  }
+                  setIsEditMode(true);
+                },
               });
-              setIsEditMode(true);
+
               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);

dashboard/src/locales/en-US/buttons.ts

@@ -90,6 +90,7 @@ const items = {
   "buttons.reset.password": "reset password",
   "buttons.forgot.password": "forgot password",
   "buttons.select.channel": "Select Channel",
+  "buttons.set.display.mode": "Display Mode",
 };
 
 export default items;

dashboard/src/locales/zh-Hans/buttons.ts

@@ -90,6 +90,7 @@ const items = {
   "buttons.reset.password": "重置密码",
   "buttons.forgot.password": "忘记密码",
   "buttons.select.channel": "选择版本风格",
+  "buttons.set.display.mode": "显示模式",
 };
 
 export default items;

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

@@ -54,6 +54,10 @@ import PrPull from "../../../components/corpus/PrPull";
 import NotificationIcon from "../../../components/notification/NotificationIcon";
 import SentCart from "../../../components/template/SentEdit/SentCart";
 
+export const scrollToTop = () => {
+  document.getElementById("article-root")?.scrollIntoView();
+};
+
 export interface ISearchParams {
   key: string;
   value: string;
@@ -137,13 +141,11 @@ const Widget = () => {
   useEffect(() => {
     //发布mode变更
     console.log("发布mode变更", currMode);
-    store.dispatch(modeChange(currMode as ArticleMode));
+    store.dispatch(modeChange({ mode: currMode as ArticleMode }));
   }, [currMode]);
 
   console.log(anchorNavOpen, anchorNavShow);
-  const scrollToTop = () => {
-    document.getElementById("article-root")?.scrollIntoView();
-  };
+
   return (
     <div id="article-root">
       <Affix offsetTop={0}>

dashboard/src/reducers/article-mode.ts

@@ -6,18 +6,23 @@ import { ArticleMode } from "../components/article/Article";
 
 import type { RootState } from "../store";
 
-interface IState {
+interface IMode {
   id?: string;
   mode?: ArticleMode;
 }
 
+interface IState {
+  id?: string;
+  mode?: IMode;
+}
+
 const initialState: IState = {};
 
 export const slice = createSlice({
   name: "articleMode",
   initialState,
   reducers: {
-    modeChange: (state, action: PayloadAction<ArticleMode>) => {
+    modeChange: (state, action: PayloadAction<IMode>) => {
       state.mode = action.payload;
       console.log("mode", action.payload);
     },
@@ -26,7 +31,7 @@ export const slice = createSlice({
 
 export const { modeChange } = slice.actions;
 
-export const mode = (state: RootState): ArticleMode | undefined =>
+export const mode = (state: RootState): IMode | undefined =>
   state.articleMode.mode;
 
 export default slice.reducer;