添加总在最顶端支持

dashboard/src/components/template/SentEdit.tsx

@@ -1,4 +1,4 @@
-import { Card } from "antd";
+import { Affix, Card } from "antd";
 import { useEffect, useRef, useState } from "react";
 import { IStudio } from "../auth/Studio";
 
@@ -127,6 +127,7 @@ export const SentEditInner = ({
   const [isFocus, setIsFocus] = useState(false);
   const focus = useAppSelector(currFocus);
   const divRef = useRef<HTMLDivElement>(null);
+  const [affix, setAffix] = useState<boolean>(false);
 
   useEffect(() => {
     if (focus) {
@@ -177,6 +178,32 @@ export const SentEditInner = ({
 
   const channelsId = translation?.map((item) => item.channel.id);
 
+  const content = (
+    <SentContent
+      sid={id}
+      book={book}
+      para={para}
+      wordStart={wordStart}
+      wordEnd={wordEnd}
+      origin={origin}
+      translation={translation}
+      answer={answer}
+      layout={layout}
+      magicDict={magicDict}
+      compact={isCompact}
+      mode={articleMode}
+      wbwProgress={wbwProgress}
+      readonly={readonly}
+      onWbwChange={(data: IWbw[]) => {
+        setWbwData(data);
+      }}
+      onMagicDictDone={() => {
+        setMagicDictLoading(false);
+        setMagicDict(undefined);
+      }}
+    />
+  );
+
   return (
     <Card
       ref={divRef}
@@ -192,29 +219,15 @@ export const SentEditInner = ({
       }}
       size="small"
     >
-      <SentContent
-        sid={id}
-        book={book}
-        para={para}
-        wordStart={wordStart}
-        wordEnd={wordEnd}
-        origin={origin}
-        translation={translation}
-        answer={answer}
-        layout={layout}
-        magicDict={magicDict}
-        compact={isCompact}
-        mode={articleMode}
-        wbwProgress={wbwProgress}
-        readonly={readonly}
-        onWbwChange={(data: IWbw[]) => {
-          setWbwData(data);
-        }}
-        onMagicDictDone={() => {
-          setMagicDictLoading(false);
-          setMagicDict(undefined);
-        }}
-      />
+      {affix ? (
+        <Affix offsetTop={44}>
+          <div style={{ backgroundColor: affix ? "white" : "unset" }}>
+            {content}
+          </div>
+        </Affix>
+      ) : (
+        content
+      )}
       <SentTab
         id={id}
         book={book}
@@ -239,6 +252,7 @@ export const SentEditInner = ({
         }}
         onCompact={(value: boolean) => setIsCompact(value)}
         onModeChange={(value: ArticleMode | undefined) => setArticleMode(value)}
+        onAffix={() => setAffix(!affix)}
       />
     </Card>
   );

dashboard/src/components/template/SentEdit/SentMenu.tsx

@@ -43,6 +43,10 @@ const SentMenuWidget = ({
       key: "copy-link",
       label: intl.formatMessage({ id: "buttons.copy.link" }),
     },
+    {
+      key: "affix",
+      label: "总在最顶端开/关",
+    },
     {
       type: "divider",
     },

dashboard/src/components/template/SentEdit/SentTab.tsx

@@ -45,6 +45,7 @@ interface IWidget {
   onMagicDict?: Function;
   onCompact?: Function;
   onModeChange?: Function;
+  onAffix?: Function;
 }
 const SentTabWidget = ({
   id,
@@ -67,6 +68,7 @@ const SentTabWidget = ({
   onMagicDict,
   onCompact,
   onModeChange,
+  onAffix,
 }: IWidget) => {
   const intl = useIntl();
   const [isCompact, setIsCompact] = useState(compact);
@@ -184,6 +186,11 @@ const SentTabWidget = ({
                     message.success("链接地址已经拷贝到剪贴板");
                   });
                   break;
+                case "affix":
+                  if (typeof onAffix !== "undefined") {
+                    onAffix();
+                  }
+                  break;
                 default:
                   break;
               }