全局自适应以及表格横向拖动优化

2026-08-23 15:36:11 +08:00
parent 14d4fa7c7c
commit 61ef0c1214
5 changed files with 113 additions and 4 deletions
@@ -1,4 +1,4 @@
-@import './variables.scss';
+@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@@ -41,6 +41,37 @@ html {
  height: 100%;
 }

+/* ================= 全局自适应加固 =================
+   与 src/utils/adaptive.js 的视口等比缩放配合，
+   兜底避免极端情况下出现页面级横向溢出与内容崩塌。 */
+html,
+body {
+  width: 100%;
+}
+
+body {
+  /* 禁止页面级横向滚动，防止因个别固定宽度元素把整页撑破；
+     表格自身的横向滚动由 el-table 内部滚动容器承担，不受影响 */
+  overflow-x: hidden;
+}
+
+/* 弹性布局子项允许收缩，避免 flex 容器被子项固有宽度撑破 */
+#app,
+.app-wrapper,
+.main-container,
+.lower-container {
+  min-width: 0;
+}
+
+/* 通用长文本换行，避免 url/数字/英文长串将布局撑破 */
+a,
+.el-button,
+.el-table .cell,
+.el-form-item__content,
+.el-form-item__label {
+  word-break: break-word;
+}
+
 *,
 *:before,
 *:after {
@@ -1,4 +1,4 @@
-/**
+/**
 * 通用css样式布局处理
 * Copyright (c) 2019 roomroot
 */
@@ -93,6 +93,11 @@
 }

 .el-table {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
  .el-table__header-wrapper, .el-table__fixed-header-wrapper {
    th {
      word-break: break-word;
@@ -108,6 +113,20 @@
      margin-left: 1px;
    }
  }
+
+  // 表格横向拖拽滚动：拖拽过程中光标切换为“抓手”
+  .el-table__body-wrapper.is-dragging,
+  .el-table__fixed-body-wrapper.is-dragging {
+    cursor: grabbing;
+  }
+}
+
+/* 原生表格同样禁止选中文本，避免横向滑动/滚动时误触发复制前的文本选中 */
+table {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }

 /** 表单布局 **/
@@ -1,9 +1,10 @@
-import hasRole from './permission/hasRole'
+import hasRole from './permission/hasRole'
 import hasPermi from './permission/hasPermi'
 import dialogDrag from './dialog/drag'
 import dialogDragWidth from './dialog/dragWidth'
 import dialogDragHeight from './dialog/dragHeight'
 import clipboard from './module/clipboard'
+import tableDrag from './tableDrag'

 const install = function(Vue) {
  Vue.directive('hasRole', hasRole)
@@ -12,6 +13,8 @@ const install = function(Vue) {
  Vue.directive('dialogDrag', dialogDrag)
  Vue.directive('dialogDragWidth', dialogDragWidth)
  Vue.directive('dialogDragHeight', dialogDragHeight)
+  // 全局表格横向拖拽滚动：通过 document 事件委托自动作用于所有 el-table
+  tableDrag()
 }

 if (window.Vue) {
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import Vue from 'vue'

 import Cookies from 'js-cookie'

@@ -13,6 +13,10 @@ import router from './router'
 import directive from './directive' // directive
 import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
+import { initAdaptive } from '@/utils/adaptive' // 全局视口等比缩放自适应
+
+// 初始化全局自适应，保障不同大小屏幕下页面布局不崩塌
+initAdaptive()

 import './assets/icons' // icon
 import './permission' // permission control
@@ -0,0 +1,52 @@
+/**
+ * 全局视口等比缩放 —— 让整个系统在不同大小屏幕（桌面 1280~1920）下布局不崩塌。
+ *
+ * 原理：
+ *   以 DESIGN_WIDTH 为设计基准宽度（视觉稿基准）。当视口宽度小于该值时，
+ *   对整个文档根节点 <html> 应用 zoom = 视口宽度 / DESIGN_WIDTH（不超过 1），
+ *   使页面内部所有元素（含 Element UI 挂载到 body 的弹窗/提示/下拉等）等比缩小，
+ *   从而在保持原有表格/表单固定布局不塌陷的前提下，整体适配到当前屏幕。
+ *
+ * 说明：
+ *   1. 仅在“需要缩小”时写入 zoom，宽度 ≥ 设计宽时清除，保证大屏原生 1:1 显示；
+ *   2. zoom 挂在 documentElement 上，能覆盖包括 Element 弹层在内的所有内容；
+ *   3. modern Chromium / Edge / Safari 及 Firefox(≥126) 均支持 zoom。
+ */
+
+let initialized = false
+
+export const DEFAULT_DESIGN_WIDTH = 1920
+
+/**
+ * 初始化全局自适应。可在任意入口调用，重复调用幂等。
+ * @param {number} [designWidth] 设计基准宽度，默认 1920
+ */
+export function initAdaptive(designWidth = DEFAULT_DESIGN_WIDTH) {
+  if (initialized) {
+    return
+  }
+  initialized = true
+
+  let timer = null
+
+  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) : ''
+    }
+  }
+
+  const onResize = () => {
+    // 简单防抖，避免 resize 高频触发引起抖动
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(applyScale, 100)
+  }
+
+  applyScale()
+  window.addEventListener('resize', onResize)
+}