课时补助核算两个tab页

2026-08-23 16:20:07 +08:00
parent 97562579dc
commit 370cb615d0
3 changed files with 277 additions and 226 deletions
@@ -1,21 +1,27 @@
 /**
- * 全局视口等比缩放 —— 让整个系统在不同大小屏幕（桌面 1280~1920）下布局不崩塌。
+ * 全局视口等比缩放 —— 让整个系统在不同大小屏幕（桌面 1280~4K）下布局不崩塌。
 *
 * 原理：
- *   以 DESIGN_WIDTH 为设计基准宽度（视觉稿基准）。当视口宽度小于该值时，
- *   对整个文档根节点 <html> 应用 zoom = 视口宽度 / DESIGN_WIDTH（不超过 1），
- *   使页面内部所有元素（含 Element UI 挂载到 body 的弹窗/提示/下拉等）等比缩小，
- *   从而在保持原有表格/表单固定布局不塌陷的前提下，整体适配到当前屏幕。
+ *   以 DESIGN_WIDTH（1920）为设计基准宽度。将视口宽度与设计宽的比值作为缩放倍数，
+ *   作用到文档根节点 <html> 的 zoom 上：
+ *     - 视口 < 设计宽（如 1280）：zoom < 1，整体等比缩小，避免窄屏布局被撑破；
+ *     - 视口 = 设计宽（1920）：zoom = 1，原生 1:1 显示；
+ *     - 视口 > 设计宽（如 4K 3840）：zoom = 2，整体等比放大，大屏不再留白/字小。
+ *   缩放倍数被限制在 MIN_SCALE ~ MAX_SCALE 之间，MAX_SCALE=2 恰好覆盖 4K（3840/1920）。
 *
- * 说明：
- *   1. 仅在“需要缩小”时写入 zoom，宽度 ≥ 设计宽时清除，保证大屏原生 1:1 显示；
- *   2. zoom 挂在 documentElement 上，能覆盖包括 Element 弹层在内的所有内容；
- *   3. modern Chromium / Edge / Safari 及 Firefox(≥126) 均支持 zoom。
+ *   采用 zoom 挂在 documentElement 上，可覆盖包括 Element UI 挂载到 body 的
+ *   弹窗/提示/下拉选择在内的所有内容，保证整套界面一致缩放、不塌陷。
+ *
+ * 兼容性：modern Chromium / Edge / Safari 以及 Firefox(≥126) 均支持 zoom。
 */

 let initialized = false

 export const DEFAULT_DESIGN_WIDTH = 1920
+// 最小缩放倍数：极窄视口的安全下限，避免文字过小/布局异常
+export const MIN_SCALE = 0.5
+// 最大缩放倍数：2 对应 4K（3840/1920=2），更高分辨率也封顶在此，避免过度放大
+export const MAX_SCALE = 2

 /**
 * 初始化全局自适应。可在任意入口调用，重复调用幂等。
@@ -31,12 +37,14 @@ export function initAdaptive(designWidth = DEFAULT_DESIGN_WIDTH) {

  const applyScale = () => {
    const root = document.documentElement
-    const width = (root && root.clientWidth) || window.innerWidth
-    const scale = Math.min(1, width / designWidth)
-    // 小于设计宽才缩放，否则清除，避免触发整页缩放动画/重置
-    if (root) {
-      root.style.zoom = scale < 1 ? String(scale) : ''
+    if (!root) {
+      return
    }
+    const width = root.clientWidth || window.innerWidth
+    const ratio = width / designWidth
+    // 收敛到 [MIN_SCALE, MAX_SCALE]，规避极端宽高的异常比例
+    const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, ratio))
+    root.style.zoom = scale === 1 ? '' : String(scale)
  }

  const onResize = () => {