vue2-client 1.20.48 → 1.20.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.20.48",
+  "version": "1.20.50",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XTable/XTable.vue

@@ -489,8 +489,6 @@ export default {
       // 行选择模式
       selectRowMode: 'default',
       tableSize: 'default',
-      /** 是否启用 tbody 虚拟滚动（配置 virtualScroll: true） */
-      virtualScroll: true,
       clearSelectRowAfterQuery: false,
       selectedRowModalVisible: false,
       // 是否禁用右侧操作行为
@@ -888,7 +886,6 @@ export default {
         printTemplate = 'DEFAULT_CRUD_PRINT_TEMPLATE',
         selectRowMode = 'default',
         tableSize = 'default',
-        virtualScroll = true,
         clearSelectRowAfterQuery = false,
         disableAction = false,
         extraData,
@@ -955,7 +952,6 @@ export default {
       this.chartsConfigArray = chartsConfigArray
       this.selectRowMode = selectRowMode
       this.tableSize = tableSize
-      this.virtualScroll = virtualScroll
       this.clearSelectRowAfterQuery = clearSelectRowAfterQuery
       this.disableAction = disableAction
       this.extraData = extraData
@@ -1883,12 +1879,6 @@ export default {
   color: @primary-color;
 }
 
-.innerTable {
-  :deep(.ant-form-item) {
-    margin: 0;
-  }
-}
-
 .hiddenFunctionalArea {
   display: none;
 }

package/src/base-client/components/common/XTable/XTableWrapper.vue

@@ -374,7 +374,12 @@ export default {
       }),
       virtualScrollContainers: null,
       virtualScrollResizeObserver: null,
-      virtualScrollRafId: null
+      /** 滚动：每帧最多一次 RAF，合并同帧内多次 scroll */
+      virtualScrollRafId: null,
+      /** 滚动时待处理的容器（与 RAF 配合，避免漏读 scrollTop） */
+      virtualScrollPendingTarget: null,
+      /** ResizeObserver 防抖定时器（窗口/侧栏拖拽时连续触发） */
+      virtualScrollResizeDebounceTimer: null
     }
   },
   computed: {
@@ -416,9 +421,9 @@ export default {
       // 3. 按顺序合并：左固定 + 普通 + 右固定
       return [...leftFixedColumns, ...normalColumns, ...rightFixedColumns]
     },
-    /** 有行展开栅格时行高不可预测，关闭虚拟滚动 */
+    /** 默认开启虚拟滚动；有行展开栅格时行高不可预测，关闭虚拟滚动 */
     enableVirtualScroll () {
-      return !!this.tableContext.virtualScroll && !this.tableContext.expandedGrid
+      return !this.tableContext.expandedGrid
     },
     components () {
       const headerCell = (h, props, children) => {
@@ -692,21 +697,60 @@ export default {
     },
     handleVirtualScroll (e) {
       if (!this.enableVirtualScroll) return
-      if (this.virtualScrollRafId) return
+      this.virtualScrollPendingTarget = e.target
+      this.scheduleVirtualScrollRaf()
+    },
+    /** 将多次 scroll 合并到同一帧 RAF；若 flush 后又产生 pending 则再排一帧 */
+    scheduleVirtualScrollRaf () {
+      if (this.virtualScrollRafId != null) return
       this.virtualScrollRafId = requestAnimationFrame(() => {
         this.virtualScrollRafId = null
-        this.applyVirtualWindowFromScroll(e.target)
+        this.flushVirtualScrollPending()
       })
     },
+    flushVirtualScrollPending () {
+      const container = this.virtualScrollPendingTarget
+      this.virtualScrollPendingTarget = null
+      if (container && this.enableVirtualScroll) {
+        this.applyVirtualWindowFromScroll(container)
+      }
+      if (this.virtualScrollPendingTarget) {
+        this.scheduleVirtualScrollRaf()
+      }
+    },
+    /** ResizeObserver 防抖 + 下一帧再测行高，避免拖拽窗口时连续重算 */
+    scheduleVirtualScrollResizeFlush () {
+      if (this.virtualScrollResizeDebounceTimer != null) {
+        clearTimeout(this.virtualScrollResizeDebounceTimer)
+      }
+      this.virtualScrollResizeDebounceTimer = setTimeout(() => {
+        this.virtualScrollResizeDebounceTimer = null
+        if (!this.enableVirtualScroll) return
+        requestAnimationFrame(() => {
+          if (!this.enableVirtualScroll) return
+          this.measureRowHeight()
+          const c = this.getScrollContainers()[0]
+          if (c) {
+            this.applyVirtualWindowFromScroll(c)
+          }
+        })
+      }, 80)
+    },
+    /** 可视区上下多渲染的行数：缓解行高误差与快速滚动时的白屏 */
+    getVirtualOverscanRows (clientH, rh) {
+      const base = Math.max(1, rh || 54)
+      // 约 2.5 倍视口行数，至少 12 行，避免快速滑动时空窗
+      return Math.ceil(Math.max((clientH / base) * 2.5, 12))
+    },
     applyVirtualWindowFromScroll (container) {
       if (!container || !this.enableVirtualScroll) return
       const vs = this.virtualState
-      const rh = vs.rowHeight || 54
+      const rh = Math.max(32, vs.rowHeight || 54)
       const scrollTop = container.scrollTop
       const clientH = container.clientHeight || 400
       const total = vs.total
       if (total <= 0) return
-      const overscan = Math.ceil(Math.max((clientH / rh) * 1.5, 5))
+      const overscan = this.getVirtualOverscanRows(clientH, rh)
       const start = Math.max(0, Math.floor(scrollTop / rh) - overscan)
       const viewportRows = Math.ceil(clientH / rh) + overscan * 2
       const end = Math.min(total, start + viewportRows)
@@ -731,11 +775,25 @@ export default {
     measureRowHeight () {
       if (!this.enableVirtualScroll || !this.$el) return
       this.$nextTick(() => {
-        const row = this.$el.querySelector('.ant-table-tbody .ant-table-row:not(.x-table-virt-spacer)')
-        if (!row) return
-        const h = row.getBoundingClientRect().height
-        if (h > 0 && Math.abs(h - this.virtualState.rowHeight) > 0.5) {
-          this.virtualState.rowHeight = h
+        const rows = this.$el.querySelectorAll('.ant-table-tbody tr.ant-table-row')
+        if (!rows || !rows.length) return
+        let maxH = 0
+        const n = Math.min(rows.length, 5)
+        for (let i = 0; i < n; i++) {
+          if (rows[i].classList.contains('x-table-virt-spacer')) continue
+          const h = rows[i].getBoundingClientRect().height
+          if (h > maxH) maxH = h
+        }
+        if (maxH > 0) {
+          // 取前若干行最大高度并向上取整，略低估行高会导致 start 偏大、底部留白
+          const next = Math.ceil(maxH)
+          if (Math.abs(next - this.virtualState.rowHeight) > 0.5) {
+            this.virtualState.rowHeight = next
+            const c = this.getScrollContainers()[0]
+            if (c) {
+              this.applyVirtualWindowFromScroll(c)
+            }
+          }
         }
       })
     },
@@ -747,8 +805,8 @@ export default {
       vs.start = 0
       const containers = this.getScrollContainers()
       const ch = containers[0]?.clientHeight || 400
-      const rh = vs.rowHeight || 54
-      const overscan = Math.ceil(Math.max((ch / rh) * 1.5, 5))
+      const rh = Math.max(32, vs.rowHeight || 54)
+      const overscan = this.getVirtualOverscanRows(ch, rh)
       const viewportRows = Math.ceil(ch / rh) + overscan * 2
       vs.end = Math.min(total, Math.max(viewportRows, 1))
       this.$nextTick(() => {
@@ -774,11 +832,7 @@ export default {
         this.virtualScrollContainers = containers
         if (typeof ResizeObserver !== 'undefined' && containers[0]) {
           this.virtualScrollResizeObserver = new ResizeObserver(() => {
-            this.measureRowHeight()
-            const c = this.getScrollContainers()[0]
-            if (c) {
-              this.applyVirtualWindowFromScroll(c)
-            }
+            this.scheduleVirtualScrollResizeFlush()
           })
           this.virtualScrollResizeObserver.observe(containers[0])
         }
@@ -796,10 +850,15 @@ export default {
         this.virtualScrollResizeObserver.disconnect()
         this.virtualScrollResizeObserver = null
       }
-      if (this.virtualScrollRafId) {
+      if (this.virtualScrollRafId != null) {
         cancelAnimationFrame(this.virtualScrollRafId)
         this.virtualScrollRafId = null
       }
+      if (this.virtualScrollResizeDebounceTimer != null) {
+        clearTimeout(this.virtualScrollResizeDebounceTimer)
+        this.virtualScrollResizeDebounceTimer = null
+      }
+      this.virtualScrollPendingTarget = null
     },
     handleRowClick (record) {
       this.$emit('rowClick', record)
@@ -824,11 +883,6 @@ export default {
       }
     },
     loadSelectedDataGen (requestParameters) {
-      console.log('loadSelectedDataGen', {
-        pageNo: requestParameters?.pageNo,
-        pageSize: requestParameters?.pageSize
-      })
-
       const { pageNo = 1, pageSize = 10 } = requestParameters || {}
       const startIndex = (pageNo - 1) * pageSize
       const endIndex = startIndex + pageSize
@@ -988,6 +1042,18 @@ export default {
 :deep(.ant-pagination > li) {
   white-space: nowrap;
 }
+.innerTable {
+  // 行编辑表格输入项样式
+  :deep(.ant-form-item) {
+    margin: 0;
+    .ant-form-item-control-wrapper {
+      width: 100%;
+    }
+    .ant-select {
+      width: 100%;
+    }
+  }
+}
 </style>
 <style>
 /* 多操作下拉菜单边框与阴影 */