fix: 修复大屏rem设置影响全局bug

apps/web-antd/src/utils/flexible.ts

@@ -1,12 +0,0 @@
-function setRootFontSize(): void {
-  const baseWidth = 1920 // 设计稿宽度
-  const baseFontSize = 16 // 设计稿根字体
-  const screenWidth = window.innerWidth
-  const fontSize = (screenWidth / baseWidth) * baseFontSize
-  document.documentElement.style.fontSize = fontSize + 'px'
-}
-
-setRootFontSize()
-window.addEventListener('resize', setRootFontSize)
-
-export default setRootFontSize 

apps/web-antd/src/utils/useFlexibleRem.ts

@@ -0,0 +1,29 @@
+//在需要的页面单独引入，不然会影响全局
+import { onMounted, onBeforeUnmount } from 'vue'
+
+export function useFlexibleRem() {
+  let originFontSize = ''
+  let resizeHandler: (() => void) | null = null
+
+  const setRemBase = () => {
+    const html = document.documentElement
+    const width = window.innerWidth
+    html.style.fontSize = (width / 1920) * 16 + 'px'
+  }
+
+  onMounted(() => {
+    // 记录原始 font-size
+    originFontSize = document.documentElement.style.fontSize
+    setRemBase()
+    resizeHandler = setRemBase
+    window.addEventListener('resize', resizeHandler)
+  })
+
+  onBeforeUnmount(() => {
+    // 离开页面时恢复原始 font-size
+    document.documentElement.style.fontSize = originFontSize
+    if (resizeHandler) {
+      window.removeEventListener('resize', resizeHandler)
+    }
+  })
+}