看板字体缩放问题

src/views/pms/stat/rykb.vue

@@ -26,11 +26,14 @@ const pageTabs = [
 
 const wrapperRef = ref<HTMLDivElement>()
 const scale = ref(1)
+const initialDevicePixelRatio = window.devicePixelRatio || 1
+const browserZoom = ref(1)
 
 let resizeObserver: ResizeObserver | null = null
 let resizeRaf = 0
 
 provide('ryKbScale', scale)
+provide('ryBrowserZoom', browserZoom)
 
 const targetWrapperStyle = computed(() => ({
   width: `${DESIGN_WIDTH * scale.value}px`,
@@ -64,13 +67,19 @@ function updateScale() {
   })
 }
 
+function updateBrowserZoom() {
+  browserZoom.value = (window.devicePixelRatio || initialDevicePixelRatio) / initialDevicePixelRatio
+}
+
 onMounted(() => {
   nextTick(updateScale)
+  updateBrowserZoom()
   resizeObserver = new ResizeObserver(updateScale)
   if (wrapperRef.value) {
     resizeObserver.observe(wrapperRef.value)
   }
   window.addEventListener('resize', updateScale)
+  window.addEventListener('resize', updateBrowserZoom)
 })
 
 watch(activePage, () => {
@@ -82,6 +91,7 @@ watch(activePage, () => {
 onUnmounted(() => {
   resizeObserver?.disconnect()
   window.removeEventListener('resize', updateScale)
+  window.removeEventListener('resize', updateBrowserZoom)
   cancelAnimationFrame(resizeRaf)
 })
 </script>

src/views/pms/stat/rykb/ryProductionBriefs.vue

@@ -44,16 +44,11 @@ const selectedDate = ref(DEFAULT_DATE)
 const loading = ref(false)
 const list = ref<RyProductionBriefRow[]>([])
 const kbScale = inject<Ref<number>>('ryKbScale', ref(1))
-const initialDevicePixelRatio = window.devicePixelRatio || 1
-const browserZoom = ref(1)
+const browserZoom = inject<Ref<number>>('ryBrowserZoom', ref(1))
 const tableHeight = computed<number | string>(() =>
   props.pageMode === 'full' ? '100%' : Math.round(TABLE_HEIGHT * kbScale.value)
 )
 
-function updateBrowserZoom() {
-  browserZoom.value = (window.devicePixelRatio || initialDevicePixelRatio) / initialDevicePixelRatio
-}
-
 const tableData = computed(() => {
   return [...list.value].sort((a, b) => {
     const companySort =
@@ -178,14 +173,8 @@ async function getList() {
 }
 
 onMounted(() => {
-  updateBrowserZoom()
-  window.addEventListener('resize', updateBrowserZoom)
   getList()
 })
-
-onUnmounted(() => {
-  window.removeEventListener('resize', updateBrowserZoom)
-})
 </script>
 
 <template>