Merge pull request #1403 from visuddhinanda/agile

wbw词头在最右侧时，弹窗向左移动

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

@@ -75,7 +75,6 @@ const WbwFactorMeaningItem = ({ pali, meaning, onChange }: IWFMI) => {
       const menu = meanings.map((item) => {
         return { key: item, label: item };
       });
-      console.log("menu", menu);
       setItems([...defaultMenu, ...menu]);
     }
   }, [pali, inlineDict]);

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

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import { Button, Popover, Space, Tag, Typography } from "antd";
+import { useEffect, useRef, useState } from "react";
+import { Button, Popover, Space, Typography } from "antd";
 import {
   TagTwoTone,
   InfoCircleOutlined,
@@ -32,6 +32,7 @@ const WbwPaliWidget = ({ data, mode, display, onSave }: IWidget) => {
   const [popOpen, setPopOpen] = useState(false);
   const [paliColor, setPaliColor] = useState("unset");
   const [hasComment, setHasComment] = useState(data.hasComment);
+  const divShell = useRef<HTMLDivElement>(null);
   /**
    * 处理 relation 链接事件
    * 高亮可能的单词
@@ -278,13 +279,20 @@ const WbwPaliWidget = ({ data, mode, display, onSave }: IWidget) => {
 
   if (typeof data.real !== "undefined" && data.real.value !== "") {
     //非标点符号
+    //单词在右侧时，为了不遮挡字典，Popover向左移动
+    const rightPanel = document.getElementById("article_right_panel");
+    const rightPanelWidth = rightPanel ? rightPanel.offsetWidth : 0;
+    const containerWidth = window.innerWidth - rightPanelWidth;
+    const divRight = divShell.current?.getBoundingClientRect().right;
+    const toDivRight = divRight ? containerWidth - divRight : 0;
+
     return (
-      <div className="pali_shell">
+      <div className="pali_shell" ref={divShell}>
         <span className="pali_shell_spell">
           {mode === "edit" ? paliWord : ""}
           <Popover
             content={wbwDetail}
-            placement="bottom"
+            placement={toDivRight > 200 ? "bottom" : "bottomRight"}
             trigger="click"
             open={popOpen}
             onOpenChange={handleClickChange}

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

@@ -332,7 +332,7 @@ const Widget = () => {
               }}
             />
           </div>
-          <div key="RightPanel">
+          <div key="RightPanel" id="article_right_panel">
             <AnchorNav open={anchorNavOpen} />
             <RightPanel
               curr={rightPanel}