:sparkles: 气泡显示

dashboard/src/components/general/NissayaCard.tsx

@@ -1,15 +1,24 @@
 import { useEffect, useState } from "react";
-import { Modal } from "antd";
+import { Modal, Popover, Typography } from "antd";
 
 import { get } from "../../request";
 import { get as getLang } from "../../locales";
 import { IGuideResponse } from "../api/Guide";
 import Marked from "../general/Marked";
+const { Link } = Typography;
 
 interface INissayaCardModal {
   text?: string;
-  trigger?: JSX.Element;
+  trigger?: JSX.Element | string;
 }
+export const NissayaCardPop = ({ text, trigger }: INissayaCardModal) => {
+  return (
+    <Popover content={<Widget text={text} cache={true} />} placement="bottom">
+      <Link>{trigger}</Link>
+    </Popover>
+  );
+};
+
 export const NissayaCardModal = ({ text, trigger }: INissayaCardModal) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -43,19 +52,31 @@ export const NissayaCardModal = ({ text, trigger }: INissayaCardModal) => {
 
 interface IWidget {
   text?: string;
+  cache?: boolean;
 }
-const Widget = ({ text }: IWidget) => {
+const Widget = ({ text, cache = false }: IWidget) => {
   const [guide, setGuide] = useState("Loading");
 
   useEffect(() => {
     const uiLang = getLang();
+    if (cache) {
+      const value = sessionStorage.getItem(`nissaya-ending/${uiLang}/${text}`);
+      if (value !== null) {
+        setGuide(value);
+        return;
+      }
+    }
+
     const url = `/v2/nissaya-ending-card?lang=${uiLang}&ending=${text}`;
     get<IGuideResponse>(url).then((json) => {
       if (json.ok) {
         setGuide(json.data);
+        if (cache) {
+          sessionStorage.setItem(`nissaya-ending/${uiLang}/${text}`, json.data);
+        }
       }
     });
-  }, [text]);
+  }, [cache, text]);
 
   return <Marked text={guide} />;
 };