编辑模式意思放巴利下面

dashboard/src/components/template/Wbw/WbwPali.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Popover, Typography } from "antd";
+import { Popover, Space, Typography } from "antd";
 import {
   TagTwoTone,
   InfoCircleOutlined,
@@ -86,6 +86,13 @@ const WbwPaliWidget = ({ data, display, onSave }: IWidget) => {
           setPaliColor("unset");
         }
       }}
+      onCommentCountChange={(count: number) => {
+        if (count > 0) {
+          setHasComment(true);
+        } else {
+          setHasComment(false);
+        }
+      }}
     />
   );
 
@@ -165,37 +172,19 @@ const WbwPaliWidget = ({ data, display, onSave }: IWidget) => {
   let commentShellStyle: React.CSSProperties = {
     display: "inline-block",
   };
-  let commentIconStyle: React.CSSProperties = {
-    cursor: "pointer",
-  };
-
-  if (display === "block") {
-    commentIconStyle = {
-      cursor: "pointer",
-      visibility: isHover || hasComment ? "visible" : "hidden",
-    };
-  } else {
-    if (!hasComment) {
-      commentShellStyle = {
-        display: "inline-block",
-        position: "absolute",
-        padding: 8,
-        marginTop: "-1.5em",
-        marginLeft: "-2em",
-      };
-      commentIconStyle = {
-        visibility: "hidden",
-        cursor: "pointer",
-      };
-    }
-  }
 
-  const discussionIcon = (
+  const discussionIcon = hasComment ? (
     <div style={commentShellStyle}>
       <CommentBox
         resId={data.uid}
         resType="wbw"
-        trigger={<CommentOutlined style={commentIconStyle} />}
+        trigger={
+          <CommentOutlined
+            style={{
+              cursor: "pointer",
+            }}
+          />
+        }
         onCommentCountChange={(count: number) => {
           if (count > 0) {
             setHasComment(true);
@@ -205,7 +194,7 @@ const WbwPaliWidget = ({ data, display, onSave }: IWidget) => {
         }}
       />
     </div>
-  );
+  ) : undefined;
 
   if (typeof data.real !== "undefined" && PaliReal(data.real.value) !== "") {
     //非标点符号
@@ -228,11 +217,13 @@ const WbwPaliWidget = ({ data, display, onSave }: IWidget) => {
         >
           {paliWord}
         </Popover>
-        {videoIcon}
-        {noteIcon}
-        {bookMarkIcon}
-        {relationIcon}
-        {discussionIcon}
+        <Space>
+          {videoIcon}
+          {noteIcon}
+          {bookMarkIcon}
+          {relationIcon}
+          {discussionIcon}
+        </Space>
       </div>
     );
   } else {

dashboard/src/components/template/Wbw/WbwWord.tsx

@@ -17,6 +17,7 @@ import "./wbw.css";
 import WbwPara from "./WbwPara";
 import WbwPage from "./WbwPage";
 import WbwRelationAdd from "./WbwRelationAdd";
+import { ArticleMode } from "../../article/Article";
 
 export type TFieldName =
   | "word"
@@ -89,12 +90,14 @@ interface IWidget {
   data: IWbw;
   display?: TWbwDisplayMode;
   fields?: IWbwFields;
+  mode?: ArticleMode;
   onChange?: Function;
   onSplit?: Function;
 }
 const WbwWordWidget = ({
   data,
   display = "block",
+  mode = "edit",
   fields = { meaning: true, factors: true, factorMeaning: true, case: true },
   onChange,
   onSplit,
@@ -162,7 +165,7 @@ const WbwWordWidget = ({
   } else {
     return (
       <div
-        className={`wbw_word ${display} ${wbwCtl} ${wbwAnchor} `}
+        className={`wbw_word ${display}_${mode} ${wbwCtl} ${wbwAnchor} `}
         style={styleWbw}
         onMouseEnter={() => {
           setShowRelationTool(true);
@@ -203,6 +206,7 @@ const WbwWordWidget = ({
           {fieldDisplay?.meaning ? (
             <WbwMeaning
               key="meaning"
+              mode={mode}
               data={wordData}
               display={display}
               onChange={(e: string) => {

dashboard/src/components/template/WbwSent.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { useAppSelector } from "../../hooks";
 import { mode } from "../../reducers/article-mode";
 import { post } from "../../request";
+import { ArticleMode } from "../article/Article";
 import WbwWord, { IWbw, IWbwFields, WbwElement } from "./Wbw/WbwWord";
 
 interface IWbwXml {
@@ -44,6 +45,7 @@ interface IWidget {
   channelId: string;
   display?: "block" | "inline";
   fields?: IWbwFields;
+  onChange?: Function;
 }
 export const WbwSentCtl = ({
   data,
@@ -52,15 +54,19 @@ export const WbwSentCtl = ({
   para,
   display = "inline",
   fields,
+  onChange,
 }: IWidget) => {
   const [wordData, setWordData] = useState<IWbw[]>(data);
   const [wbwMode, setWbwMode] = useState(display);
   const [fieldDisplay, setFieldDisplay] = useState(fields);
+  const [displayMode, setDisplayMode] = useState<ArticleMode>();
   const newMode = useAppSelector(mode);
   useEffect(() => {
+    setDisplayMode(newMode);
     switch (newMode) {
       case "edit":
-        setWbwMode("inline");
+        setWbwMode("block");
+
         setFieldDisplay({
           meaning: true,
           factors: false,
@@ -79,6 +85,7 @@ export const WbwSentCtl = ({
         break;
     }
   }, [newMode]);
+
   return (
     <div style={{ display: "flex", flexWrap: "wrap" }}>
       {wordData.map((item, id) => {
@@ -86,6 +93,7 @@ export const WbwSentCtl = ({
           <WbwWord
             data={item}
             key={id}
+            mode={displayMode}
             display={wbwMode}
             fields={fieldDisplay}
             onChange={(e: IWbw) => {
@@ -99,6 +107,7 @@ export const WbwSentCtl = ({
               });
               console.log("new data", newData);
               setWordData(newData);
+
               const data = newData.filter((value) => value.sn[0] === e.sn[0]);
               const postParam: IWbwRequest = {
                 book: book,
@@ -142,6 +151,10 @@ export const WbwSentCtl = ({
                   }
                 }
               );
+
+              if (typeof onChange !== "undefined") {
+                onChange(newData);
+              }
             }}
             onSplit={(isSplit: boolean) => {
               if (isSplit) {