看板字体缩放问题

src/views/pms/stat/rhkb.vue

@@ -27,11 +27,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('rhKbScale', scale)
+provide('rhBrowserZoom', browserZoom)
 
 const targetWrapperStyle = computed(() => ({
   width: `${DESIGN_WIDTH * scale.value}px`,
@@ -65,13 +68,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, () => {
@@ -83,6 +92,7 @@ watch(activePage, () => {
 onUnmounted(() => {
   resizeObserver?.disconnect()
   window.removeEventListener('resize', updateScale)
+  window.removeEventListener('resize', updateBrowserZoom)
   cancelAnimationFrame(resizeRaf)
 })
 </script>

src/views/pms/stat/rhkb/deviceList.vue

@@ -50,6 +50,7 @@ const teamLoading = ref(false)
 const currentProjectDeptName = ref('')
 const teamList = ref<RhTeamRateRow[]>([])
 const kbScale = inject<Ref<number>>('rhKbScale', ref(1))
+const browserZoom = inject<Ref<number>>('rhBrowserZoom', ref(1))
 
 const tableData = computed(() => list.value)
 const createTime = computed(() => [
@@ -134,6 +135,7 @@ onMounted(() => {
 <template>
   <div
     class="panel device-list-panel w-full min-h-0 flex flex-col"
+    :style="{ '--rh-device-list-browser-zoom': browserZoom }"
     :class="{ 'device-list-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">
@@ -272,7 +274,7 @@ onMounted(() => {
 
 .device-list-table {
   :deep(.el-table__header-wrapper th.el-table__cell) {
-    font-size: calc(16px * var(--kb-scale, 1));
+    font-size: calc(16px * var(--rh-device-list-browser-zoom, 1));
     line-height: 1.2;
     color: #0e3f8a;
     background: #7fb5ff;
@@ -280,6 +282,10 @@ onMounted(() => {
     font-weight: 600;
   }
 
+  :deep(.el-table__body td.el-table__cell) {
+    font-size: calc(16px * var(--rh-device-list-browser-zoom, 1));
+  }
+
   // :deep(.el-table__body td.el-table__cell) {
   //   color: #07192c;
   //   background: rgba(137, 179, 222);
@@ -299,10 +305,12 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   gap: calc(4px * var(--kb-scale, 1));
+  font-size: calc(16px * var(--rh-device-list-browser-zoom, 1));
   line-height: 1.35;
 }
 
 .device-list-table__summary {
+  font-size: calc(16px * var(--rh-device-list-browser-zoom, 1));
   line-height: 1.5;
   white-space: pre-wrap;
   overflow-wrap: anywhere;