支持上方和下方弹窗切换

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

@@ -1,7 +1,20 @@
 import { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
-import { Dropdown, Tabs, Divider, Button, Switch, Rate } from "antd";
-import { SaveOutlined } from "@ant-design/icons";
+import {
+  Dropdown,
+  Tabs,
+  Divider,
+  Button,
+  Switch,
+  Rate,
+  Space,
+  Tooltip,
+} from "antd";
+import {
+  SaveOutlined,
+  VerticalAlignBottomOutlined,
+  VerticalAlignTopOutlined,
+} from "@ant-design/icons";
 
 import { IWbw, IWbwAttachment, IWbwField, TFieldName } from "./WbwWord";
 import WbwDetailBasic from "./WbwDetailBasic";
@@ -19,16 +32,20 @@ import { courseUser } from "../../../reducers/course-user";
 interface IWidget {
   data: IWbw;
   visible?: boolean;
+  popIsTop?: boolean;
   onClose?: Function;
   onSave?: Function;
   onAttachmentSelectOpen?: Function;
+  onPopTopChange?: Function;
 }
 const WbwDetailWidget = ({
   data,
   visible = true,
+  popIsTop = false,
   onClose,
   onSave,
   onAttachmentSelectOpen,
+  onPopTopChange,
 }: IWidget) => {
   const intl = useIntl();
   const [currWbwData, setCurrWbwData] = useState<IWbw>(
@@ -108,6 +125,7 @@ const WbwDetailWidget = ({
   }
   return (
     <div
+      className="wbw_detail"
       style={{
         minWidth: 450,
       }}
@@ -116,12 +134,36 @@ const WbwDetailWidget = ({
         size="small"
         type="card"
         tabBarExtraContent={
-          <DiscussionButton
-            initCount={data.hasComment ? 1 : 0}
-            hideCount
-            resId={data.uid}
-            resType="wbw"
-          />
+          <Space>
+            <Tooltip
+              title={popIsTop ? "底端弹窗" : "顶端弹窗"}
+              getTooltipContainer={(node: HTMLElement) =>
+                document.getElementsByClassName("wbw_detail")[0] as HTMLElement
+              }
+            >
+              <Button
+                type="text"
+                icon={
+                  popIsTop ? (
+                    <VerticalAlignBottomOutlined />
+                  ) : (
+                    <VerticalAlignTopOutlined />
+                  )
+                }
+                onClick={() => {
+                  if (typeof onPopTopChange !== "undefined") {
+                    onPopTopChange(popIsTop);
+                  }
+                }}
+              />
+            </Tooltip>
+            <DiscussionButton
+              initCount={data.hasComment ? 1 : 0}
+              hideCount
+              resId={data.uid}
+              resType="wbw"
+            />
+          </Space>
         }
         onChange={(activeKey: string) => {
           setTabKey(activeKey);

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

@@ -31,6 +31,9 @@ const WbwDetailOrderWidget = ({
     <Tooltip
       open={show}
       placement="right"
+      getTooltipContainer={(node: HTMLElement) =>
+        document.getElementsByClassName("wbw_detail")[0] as HTMLElement
+      }
       title={
         <Button
           type="link"

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

@@ -23,6 +23,7 @@ import { anchor, showWbw } from "../../../reducers/wbw";
 import { ParaLinkCtl } from "../ParaLink";
 import { IStudio } from "../../auth/Studio";
 import WbwPaliDiscussionIcon from "./WbwPaliDiscussionIcon";
+import { TooltipPlacement } from "antd/lib/tooltip";
 
 //生成视频播放按钮
 interface IVideoIcon {
@@ -65,11 +66,14 @@ const WbwPaliWidget = ({
   onSave,
 }: IWidget) => {
   const [popOpen, setPopOpen] = useState(false);
+  const [popOnTop, setPopOnTop] = useState(false);
+
   const [paliColor, setPaliColor] = useState("unset");
   const divShell = useRef<HTMLDivElement>(null);
   const wbwAnchor = useAppSelector(anchor);
   const addParam = useAppSelector(relationAddParam);
   const wordSn = `${data.book}-${data.para}-${data.sn.join("-")}`;
+
   useEffect(() => {
     if (wbwAnchor) {
       if (wbwAnchor.id !== wordSn || wbwAnchor.channel !== channelId) {
@@ -177,6 +181,7 @@ const WbwPaliWidget = ({
     <WbwDetail
       data={data}
       visible={popOpen}
+      popIsTop={popOnTop}
       onClose={() => {
         setPaliColor("unset");
         setPopOpen(false);
@@ -191,6 +196,7 @@ const WbwPaliWidget = ({
       onAttachmentSelectOpen={(open: boolean) => {
         setPopOpen(!open);
       }}
+      onPopTopChange={(value: boolean) => setPopOnTop(!value)}
     />
   );
 
@@ -304,6 +310,12 @@ const WbwPaliWidget = ({
     const divRight = divShell.current?.getBoundingClientRect().right;
     const toDivRight = divRight ? containerWidth - divRight : 0;
 
+    let popPlacement: TooltipPlacement;
+    if (popOnTop) {
+      popPlacement = toDivRight > 200 ? "top" : "topRight";
+    } else {
+      popPlacement = toDivRight > 200 ? "bottom" : "bottomRight";
+    }
     return (
       <div className="pali_shell" ref={divShell}>
         <span className="pali_shell_spell">
@@ -323,7 +335,7 @@ const WbwPaliWidget = ({
 
           <Popover
             content={wbwDialog}
-            placement={toDivRight > 200 ? "bottom" : "bottomRight"}
+            placement={popPlacement}
             trigger="click"
             open={popOpen}
           >