diff --git a/.github/workflows/dev-cloudflare-pages.yml b/.github/workflows/dev-cloudflare-pages.yml index 544a544..acc3a71 100644 --- a/.github/workflows/dev-cloudflare-pages.yml +++ b/.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 diff --git a/CHANGELOG.md b/CHANGELOG.md index ed39bce..1e5285e 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/config/vite.master.config.ts b/config/vite.master.config.ts index a9fbbe8..56938d5 100644 --- a/config/vite.master.config.ts +++ b/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, diff --git a/package.json b/package.json index 5788496..1c405f3 100644 --- a/package.json +++ b/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": { diff --git a/src/routers/photo/item/index.tsx b/src/routers/photo/item/index.tsx index d535e40..b507919 100644 --- a/src/routers/photo/item/index.tsx +++ b/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 (
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 ( ({ src: item.src, key: index }))} visible={open} onClose={onClose} + toolbarRender={() => ( + + + 去对应动态 + + )} + // overlayRender={() => } /> ); } diff --git a/src/routers/photo/item/photo.module.less b/src/routers/photo/item/photo.module.less index 06a560e..eaddacc 100644 --- a/src/routers/photo/item/photo.module.less +++ b/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; + } } \ No newline at end of file diff --git a/src/utils/dom/index.ts b/src/utils/dom/index.ts new file mode 100644 index 0000000..286c412 --- /dev/null +++ b/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; +} diff --git a/src/utils/hooks/match.ts b/src/utils/hooks/match.ts index aade130..252268d 100644 --- a/src/utils/hooks/match.ts +++ b/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]); +};