增加图片详情页跳转功能

.github/workflows/dev-cloudflare-pages.yml

@@ -72,7 +72,7 @@ jobs:
 
       - name: Use pnpm to build
         run: pnpm run build
-
+        
 #      - name: post-build test
 #        run: pnpm test
 

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+# [0.1.0](/compare/v0.0.3...v0.1.0) (2023-02-19)
+
+
+### ✨ Features
+
+* **custom**: 图片详情添加跳转到动态页功能 9349712
+
+
+### 🐛 Bug Fixes
+
+* **custom**: 修复查看图片页面闪动问题 26f8a26
+* **custom**: 修复生产环境下clarity未生效问题 6f4788a
+
+
+
 ## [0.0.3](/compare/v0.0.2...v0.0.3) (2023-02-19)
 
 

config/vite.master.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from "vite";
+import { defineConfig, UserConfigExport } from "vite";
 // 可视化打包文件
 import { visualizer } from "rollup-plugin-visualizer";
 
@@ -35,9 +35,28 @@ import { createHtmlPlugin } from "vite-plugin-html";
 import { mergeConfig } from "vite";
 import vitedevConfig from "./vite.dev.config";
 // https://vitejs.dev/config/
-//@ts-ignore
+
+export const commonBuildConfig: UserConfigExport = mergeConfig(
+  defineConfig({
+    plugins: [
+      createHtmlPlugin({
+        entry: "src/main.tsx",
+        template: "index.html",
+        inject: {
+          data: {
+            injectScript: ProdinjectScript,
+          },
+        },
+      }),
+      //@ts-ignore
+      getBulidTime(),
+    ],
+  }),
+  vitedevConfig
+);
+
 export default mergeConfig(
-  vitedevConfig,
+  commonBuildConfig,
   defineConfig({
     define: {
       isdev: false,
@@ -50,19 +69,7 @@ export default mergeConfig(
           "iOS >= 9, Android >= 4.4, last 2 versions, > 0.2%, not dead",
         ],
       }),
-      { ...visualizer(), apply: "build" },
       { ...viteCompression(), apply: "build" },
-      createHtmlPlugin({
-        entry: "src/main.tsx",
-        template: "index.html",
-        inject: {
-          data: {
-            injectScript: ProdinjectScript,
-          },
-        },
-      }),
-      //@ts-ignore
-      getBulidTime(),
     ],
     build: {
       sourcemap: true,

package.json

@@ -1,14 +1,14 @@
 {
   "name": "eoefans-web",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite --config ./config/vite.dev.config.ts",
     "build": "tsc && vite build --config ./config/vite.master.config.ts && node build.js",
-    "preview": "vite preview",
-    "commit": "cz",
     "build:release": "vite build --config ./config/vite.release.config.ts && node build.js",
-    "release:changelog": "standard-version --preset gitmoji-config"
+    "release:changelog": "standard-version --preset gitmoji-config",
+    "preview": "vite preview",
+    "commit": "cz"
   },
   "config": {
     "commitizen": {

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,15 +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;
@@ -29,11 +34,27 @@ export default function ImgModals(props: ModalType) {
       };
     }
   }, [open]);
+  useBodyScrollHide(open);
   return (
     <PhotoSlider
       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;
+    }
 }

src/utils/dom/index.ts

@@ -0,0 +1,71 @@
+/**
+ * 给元素style添加属性。
+ */
+export const ObjectToHtmlStyle = (
+  obj: React.CSSProperties,
+  ele: HTMLElement
+) => {
+  Object.entries(obj).forEach(([key, value]) => {
+    if (value) {
+      //@ts-ignore
+      ele.style[key] = value;
+    }
+  });
+};
+
+let _ScrollBarWidthCached: number | null = null;
+
+function hasScrollbar(): boolean {
+  return (
+    document.body.scrollHeight >
+    (window.innerHeight || document.documentElement.clientHeight)
+  );
+}
+export function getScrollBarSize(): number {
+  if (!hasScrollbar()) {
+    _ScrollBarWidthCached = 0;
+  }
+  if (typeof _ScrollBarWidthCached === "number") {
+    return _ScrollBarWidthCached;
+  }
+  const inner = document.createElement("div");
+  ObjectToHtmlStyle(
+    {
+      width: "100%",
+      height: "200px",
+    },
+    inner
+  );
+  const outer = document.createElement("div");
+  ObjectToHtmlStyle(
+    {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      pointerEvents: "none",
+      visibility: "hidden",
+      width: "200px",
+      height: "150px",
+      overflow: "hidden",
+    },
+    outer
+  );
+  outer.appendChild(inner);
+  document.body.appendChild(outer);
+  const widthContained = inner.offsetWidth;
+  ObjectToHtmlStyle(
+    {
+      overflow: "scroll",
+    },
+    outer
+  );
+  let widthScroll = inner.offsetWidth;
+
+  if (widthContained === widthScroll) {
+    widthScroll = outer.clientWidth;
+  }
+
+  document.body.removeChild(outer);
+  _ScrollBarWidthCached = widthContained - widthScroll;
+  return _ScrollBarWidthCached;
+}

src/utils/hooks/match.ts

@@ -1,4 +1,6 @@
 import { Breakpoint, useMediaQuery, useTheme } from "@mui/material";
+import { getScrollBarSize } from "@utils/dom";
+import { useEffect } from "react";
 
 /**
  * @description 获知当前屏幕处于哪种大小
@@ -16,3 +18,18 @@ export const useScreenMatchSize = (size: Breakpoint) => {
 `@672w_378h_1c_!web-search-common-cover`;
 //首页up头像大小
 `@96w_96h_1s.webp`;
+
+export const useBodyScrollHide = (hidden: boolean) => {
+  useEffect(() => {
+    const ScrollSize = getScrollBarSize(),
+      bodyStyle = document.body.style;
+    if (hidden) {
+      bodyStyle.overflow = "hidden";
+      bodyStyle.paddingRight = `${ScrollSize}px`;
+    }
+    return () => {
+      bodyStyle.overflow = "";
+      bodyStyle.paddingRight = "";
+    };
+  }, [hidden]);
+};