看板字体缩放问题

src/views/pms/stat/rdkb.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('rdKbScale', scale)
+provide('rdBrowserZoom', browserZoom)
 
 const targetWrapperStyle = computed(() => ({
   width: `${DESIGN_WIDTH * scale.value}px`,
@@ -66,13 +69,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/rdkb/rdProductionBriefs.vue

@@ -42,6 +42,7 @@ const loading = ref(false)
 const list = ref<RdProductionBriefRow[]>([])
 const router = useRouter()
 const kbScale = inject<Ref<number>>('rdKbScale', ref(1))
+const browserZoom = inject<Ref<number>>('rdBrowserZoom', ref(1))
 const tableHeight = computed<number | string>(() =>
   props.pageMode === 'full' ? '100%' : Math.round(TABLE_HEIGHT * kbScale.value)
 )
@@ -167,6 +168,7 @@ onMounted(() => {
 <template>
   <div
     class="panel device-list-panel production-brief-panel w-full min-h-0 flex flex-col"
+    :style="{ '--rd-production-brief-browser-zoom': browserZoom }"
     :class="{ 'production-brief-panel--full': props.pageMode === 'full' }">
     <div class="panel-title device-list-panel__title flex items-center justify-between">
       <div class="kb-panel-title-text flex items-center">
@@ -216,12 +218,16 @@ onMounted(() => {
         </el-table-column>
         <el-table-column prop="taskName" label="井号" min-width="120" align="center">
           <template #default="{ row }">
-            {{ formatText(row.taskName) }}
+            <div class="production-brief-table__summary">
+              {{ formatText(row.taskName) }}
+            </div>
           </template>
         </el-table-column>
         <el-table-column prop="techniqueNames" label="工艺" min-width="130" align="center">
           <template #default="{ row }">
-            {{ formatText(row.techniqueNames) }}
+            <div class="production-brief-table__summary">
+              {{ formatText(row.techniqueNames) }}
+            </div>
           </template>
         </el-table-column>
         <el-table-column
@@ -304,7 +310,7 @@ onMounted(() => {
   width: 100%;
 
   :deep(.el-table__header-wrapper th.el-table__cell) {
-    font-size: calc(16px * var(--kb-scale, 1));
+    font-size: calc(16px * var(--rd-production-brief-browser-zoom, 1));
     line-height: 1.2;
     color: #0e3f8a;
     background: #7fb5ff;
@@ -312,6 +318,10 @@ onMounted(() => {
     font-weight: 600;
   }
 
+  :deep(.el-table__body td.el-table__cell) {
+    font-size: calc(16px * var(--rd-production-brief-browser-zoom, 1));
+  }
+
   // :deep(.el-table__body td.el-table__cell) {
   //   padding: calc(7px * var(--kb-scale, 1)) 0;
   //   font-size: calc(14px * var(--kb-scale, 1));
@@ -335,12 +345,14 @@ onMounted(() => {
 
 .production-brief-table__device-names {
   display: block;
+  font-size: calc(16px * var(--rd-production-brief-browser-zoom, 1));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .production-brief-table__summary {
+  font-size: calc(16px * var(--rd-production-brief-browser-zoom, 1));
   line-height: 1.5;
   white-space: pre-wrap;
   overflow-wrap: anywhere;