切换wbw 翻译模式和逐词解析模式

dashboard/src/components/article/Article.tsx

@@ -4,7 +4,7 @@ import { get } from "../../request";
 import { IArticleDataResponse, IArticleResponse } from "../api/Article";
 import ArticleView from "./ArticleView";
 
-export type ArticleMode = "read" | "edit";
+export type ArticleMode = "read" | "edit" | "wbw";
 export type ArticleType =
   | "article"
   | "chapter"
@@ -26,6 +26,7 @@ const Widget = ({
   active = false,
 }: IWidgetArticle) => {
   const [articleData, setArticleData] = useState<IArticleDataResponse>();
+  const [articleMode, setArticleMode] = useState<ArticleMode>(mode);
   let channels: string[] = [];
   if (typeof articleId !== "undefined") {
     const aId = articleId.split("_");
@@ -38,6 +39,11 @@ const Widget = ({
     if (!active) {
       return;
     }
+    if (mode !== "read" && articleMode !== "read") {
+      setArticleMode(mode);
+      return;
+    }
+    setArticleMode(mode);
     if (typeof type !== "undefined" && typeof articleId !== "undefined") {
       get<IArticleResponse>(`/v2/${type}/${articleId}/${mode}`).then((json) => {
         if (json.ok) {

dashboard/src/components/article/ArticleCard.tsx

@@ -5,6 +5,9 @@ import { IWidgetArticleData } from "./ArticleView";
 import { useIntl } from "react-intl";
 import { useState } from "react";
 import ArticleCardMainMenu from "./ArticleCardMainMenu";
+import store from "../../store";
+import { modeChange } from "../../reducers/article-mode";
+import { ArticleMode } from "./Article";
 
 interface IWidgetArticleCard {
   type?: string;
@@ -58,6 +61,10 @@ const Widget = ({
           label: intl.formatMessage({ id: "buttons.edit" }),
           value: "edit",
         },
+        {
+          label: intl.formatMessage({ id: "buttons.wbw" }),
+          value: "wbw",
+        },
       ]}
       value={mode}
       onChange={(value) => {
@@ -65,6 +72,8 @@ const Widget = ({
           onModeChange(value.toString());
         }
         setMode(value.toString());
+        //发布mode变更
+        store.dispatch(modeChange(value.toString() as ArticleMode));
       }}
     />
   );

dashboard/src/components/template/Wbw/wbw.css

@@ -32,6 +32,9 @@
 .wbw_note {
   color: blue;
 }
+.block .wbw_note {
+  font-weight: 500;
+}
 .block .wbw_body {
   padding-right: 0.5em;
   padding-top: 0.2em;

dashboard/src/components/template/WbwSent.tsx

@@ -1,4 +1,6 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useAppSelector } from "../../hooks";
+import { mode } from "../../reducers/article-mode";
 import WbwWord, { IWbw, IWbwFields } from "./Wbw/WbwWord";
 
 interface IWidget {
@@ -8,7 +10,31 @@ interface IWidget {
 }
 export const WbwSentCtl = ({ data, display = "inline", fields }: IWidget) => {
   const [wordData, setWordData] = useState(data);
-
+  const [wbwMode, setWbwMode] = useState(display);
+  const [fieldDisplay, setFieldDisplay] = useState(fields);
+  const newMode = useAppSelector(mode);
+  useEffect(() => {
+    switch (newMode) {
+      case "edit":
+        setWbwMode("inline");
+        setFieldDisplay({
+          meaning: true,
+          factors: false,
+          factorMeaning: false,
+          case: false,
+        });
+        break;
+      case "wbw":
+        setWbwMode("block");
+        setFieldDisplay({
+          meaning: true,
+          factors: true,
+          factorMeaning: true,
+          case: true,
+        });
+        break;
+    }
+  }, [newMode]);
   return (
     <div style={{ display: "flex", flexWrap: "wrap" }}>
       {wordData.map((item, id) => {
@@ -16,8 +42,8 @@ export const WbwSentCtl = ({ data, display = "inline", fields }: IWidget) => {
           <WbwWord
             data={item}
             key={id}
-            display={display}
-            fields={fields}
+            display={wbwMode}
+            fields={fieldDisplay}
             onChange={(e: IWbw) => {
               console.log("word changed", e);
               console.log("word id", id);

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

@@ -3,6 +3,7 @@ const items = {
   "buttons.create": "新建",
   "buttons.edit": "编辑",
   "buttons.read": "阅读",
+  "buttons.wbw": "逐词解析",
   "buttons.delete": "删除",
   "buttons.delete.all": "批量删除",
   "buttons.selected": "已经选择",

dashboard/src/reducers/article-mode.ts

@@ -0,0 +1,32 @@
+/**
+ * 查字典，添加术语命令
+ */
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { ArticleMode } from "../components/article/Article";
+
+import type { RootState } from "../store";
+
+interface IState {
+  id?: string;
+  mode?: ArticleMode;
+}
+
+const initialState: IState = {};
+
+export const slice = createSlice({
+  name: "articleMode",
+  initialState,
+  reducers: {
+    modeChange: (state, action: PayloadAction<ArticleMode>) => {
+      state.mode = action.payload;
+      console.log("mode", action.payload);
+    },
+  },
+});
+
+export const { modeChange } = slice.actions;
+
+export const mode = (state: RootState): ArticleMode | undefined =>
+  state.articleMode.mode;
+
+export default slice.reducer;

dashboard/src/store.ts

@@ -6,6 +6,7 @@ import openArticleReducer from "./reducers/open-article";
 import settingReducer from "./reducers/setting";
 import commandReducer from "./reducers/command";
 import suggestionReducer from "./reducers/suggestion";
+import articleModeReducer from "./reducers/article-mode";
 
 const store = configureStore({
   reducer: {
@@ -15,6 +16,7 @@ const store = configureStore({
     setting: settingReducer,
     command: commandReducer,
     suggestion: suggestionReducer,
+    articleMode: articleModeReducer,
   },
 });