⚡ feat(custom): 图片详情添加跳转到动态页功能

src/routers/photo/item/index.tsx

@@ -15,7 +15,7 @@ export default function PhotoCard(props: CardType) {
   const { images, dynamic_id, ...resPorps } = props.data;
   const [open, set] = useState(false),
     handlerChangeOpen = () => set((open) => !open);
-  const modalPorps = { open, images, onClose: handlerChangeOpen };
+  const modalPorps = { open, images, onClose: handlerChangeOpen, dynamic_id };
   return (
     <div className={style["card"]}>
       <ImageBasic

src/routers/photo/item/modal.tsx

@@ -2,16 +2,20 @@ import { basicImageType } from "../phototype";
 import { PhotoSlider } from "react-photo-view";
 import "react-photo-view/dist/react-photo-view.css";
 import { useEffect } from "react";
+import CallMadeIcon from "@mui/icons-material/CallMade";
+import ShortcutIcon from "@mui/icons-material/Shortcut";
 import { useLocation } from "react-router-dom";
 import { useBodyScrollHide } from "@utils/hooks/match";
+import { Link, styled } from "@mui/material";
 type ModalType = {
   images: basicImageType[];
   open: boolean;
   onClose: () => void;
+  dynamic_id: number | string;
 };
 
 export default function ImgModals(props: ModalType) {
-  const { open, onClose, images } = props;
+  const { open, onClose, images, dynamic_id } = props;
   const location = useLocation();
   useEffect(() => {
     let flag = false;
@@ -36,6 +40,21 @@ export default function ImgModals(props: ModalType) {
       images={images.map((item, index) => ({ src: item.src, key: index }))}
       visible={open}
       onClose={onClose}
+      toolbarRender={() => (
+        <Link
+          href={`https://t.bilibili.com/${dynamic_id}`}
+          target='_blank'
+          underline='hover'
+          sx={{
+            marginRight: "auto",
+            marginLeft: "1rem",
+          }}
+        >
+          <ShortcutIcon fontSize='inherit' />
+          去对应动态
+        </Link>
+      )}
+      // overlayRender={() => <PhotoSliderLink />}
     />
   );
 }

src/routers/photo/item/photo.module.less

@@ -5,4 +5,15 @@
     .show-img {
         min-height: 150px;
     }
+}
+
+:global {
+    .PhotoView-Slider__BannerRight {
+        flex: 1;
+        justify-content: end;
+    }
+
+    .PhotoView-Slider__BannerWrap {
+        align-items: baseline;
+    }
 }