@kyfe/ks-query-table 0.0.21 → 0.0.22

package/src/view/home/query-table/components/pe-table/scrollbar.js

@@ -0,0 +1,424 @@
+/** @format */
+import { animateScroll } from './utils/animate'
+
+export default {
+  data() {
+    return {
+      isScrolling: false,
+      transientScrollOffsetY: 0,
+      transientScrollOffsetX: 0,
+    }
+  },
+  mounted() {
+    // 添加滚动条到网格容器
+    this.refreshThumb()
+
+    // 绑定事件
+    // this.$refs.trackX.addEventListener('mousemove', this.onTrackMouseMoveX)
+    // this.$refs.trackX.addEventListener('mousedown', this.onTrackMouseDownX)
+    // this.$refs.trackY.addEventListener('mousemove', this.onTrackMouseMoveY)
+    // this.$refs.trackY.addEventListener('mousedown', this.onTrackMouseDownY)
+    // this.$refs.thumbX.addEventListener('mousedown', this.onThumbMouseDownX)
+    // this.$refs.thumbY.addEventListener('mousedown', this.onThumbMouseDownY)
+    this.$refs.container.addEventListener('wheel', this.onContainerWheel)
+  },
+  beforeDestroy() {
+    // 移除事件监听器
+    this.$refs.trackX.removeEventListener('mousemove', this.onTrackMouseMoveX)
+    this.$refs.trackX.removeEventListener('mousedown', this.onTrackMouseDownX)
+    this.$refs.trackY.removeEventListener('mousemove', this.onTrackMouseMoveY)
+    this.$refs.trackY.removeEventListener('mousedown', this.onTrackMouseDownY)
+    this.$refs.thumbX.removeEventListener('mousedown', this.onThumbMouseDownX)
+    this.$refs.thumbY.removeEventListener('mousedown', this.onThumbMouseDownY)
+    this.$refs.container.removeEventListener('wheel', this.onContainerWheel)
+  },
+  methods: {
+    renderViewportCellsColumns() {
+      return [...this.renderCellsColumns.filter(col => col.fixed), ...this.renderCellsColumns.slice(this.state.startCell, this.state.endCell + 1)]
+    },
+    renderScollXTable(x) {
+      this.setScrollOffsetX(x);
+      this.createHeader();
+      this.renderViewportCells();
+      this.emitScroll()
+    },
+    renderScrollYTable(y) {
+      this.setScrollOffsetY(y)
+      this.renderViewportRows()
+      this.emitScroll()
+    },
+    /**
+     * 垂直滚动到指定行
+     * @param {Number} rowKey 数据源中的行Key（从0开始）
+     * @param {Number} [offset=0] 额外偏移量（像素）
+     * @param {Number} [duration] 动画持续时间（毫秒）
+     */
+    scrollToColumn(key, offset = 0, duration) {
+      const state = this.getState();
+      const maxScrollLeft = state.scrollableWidth;
+      const column = this.mainColumns.find(col => col.key === key);
+
+      if (!column) return;
+
+      const fixedList = this.mainColumns.filter(col => col.fixed === 'left' || col.fixed);
+
+      const fixedWidth = fixedList.reduce((acc, col) => acc + col.width, 0);
+
+      const targetScrollLeft = Math.min(
+        Math.max(0, column.offsetX - fixedWidth - offset),
+        maxScrollLeft
+      );
+
+      if (duration) {
+        animateScroll({
+          from: this.offsetX,
+          to: targetScrollLeft,
+          duration,
+          onUpdate: (currentPos) => {
+            this.renderScollXTable(currentPos)
+          },
+        })
+      } else {
+        this.renderScollXTable(targetScrollLeft)
+      }
+    },
+    /**
+     * 垂直滚动到指定行
+     * @param {Number} rowIndex 数据源中的行索引（从0开始）
+     * @param {Number} [offset=0] 额外偏移量（像素）
+     * @param {Number} [duration] 动画持续时间（毫秒）
+     */
+    scrollToRow(targetIndex, offset = 0, duration) {
+      const targetScrollTop = this.getTargetScrollTop(targetIndex, offset)
+      if (duration) {
+        animateScroll({
+          from: this.offsetY,
+          to: targetScrollTop,
+          duration,
+          onUpdate: (currentPos) => {
+            this.renderScrollYTable(currentPos)
+          },
+        })
+      } else {
+        this.renderScrollYTable(targetScrollTop)
+      }
+    },
+    // 获取Y轴滚动距离
+    getTargetScrollTop(targetIndex, offset = 0) {
+      // 边界处理（确保索引在有效范围内）
+      const maxIndex = this.tableData.length - 1
+      const safeIndex = Math.max(0, Math.min(targetIndex, maxIndex))
+
+      // 核心计算参数
+      const rowHeight = this.$props.rowHeight
+      const availableHeight = this.viewportHeight - this.headerTotalHeight // 实际可用高度
+      const totalRowHeight = this.tableData.length * rowHeight // 总行高（不含表头）
+
+      // 计算基础偏移量
+      let baseOffset = safeIndex * rowHeight
+
+      // 最终偏移量计算（包含边界限制）
+      const maxScrollTop = Math.max(0, totalRowHeight - availableHeight)
+      return Math.max(0, Math.min(baseOffset + offset, maxScrollTop))
+
+    },
+    resetStretch(timeout = 100) {
+      setTimeout(() => {
+        const maxScrollTop = this.getTargetScrollTop(this.tableData.length - 1, 0)
+        if (this.offsetY >= maxScrollTop) {
+          animateScroll({
+            from: this.offsetY,
+            to: maxScrollTop,
+            duration: 10,
+            onUpdate: (currentPos) => {
+              this.renderScrollYTable(currentPos)
+            },
+          })
+        }
+      }, timeout);
+
+    },
+    refreshThumb() {
+      const state = this.getState()
+      this.translateThumbY(state.thumbOffsetY)
+      this.setThumbSizeY(state.thumbSizeY - this.headerTotalHeight)
+      this.translateThumbX(state.thumbOffsetX)
+      this.setThumbSizeX(state.thumbSizeX)
+    },
+    clampThumbIfNeeded() {
+      const state = this.getState()
+      let shouldTranslateThumb = false
+      if (this.offsetY != null && (this.offsetY < 0 || this.offsetY > state.scrollableHeight)) {
+        const clampedOffsetY = Math.max(0, Math.min(this.offsetY, state.scrollableHeight))
+        this.offsetY = clampedOffsetY
+        shouldTranslateThumb = true
+      }
+      if (this.offsetX != null && (this.offsetX < 0 || this.offsetX > state.scrollableWidth)) {
+        const clampedOffsetX = Math.max(0, Math.min(this.offsetX, state.scrollableWidth))
+        this.offsetX = clampedOffsetX
+        shouldTranslateThumb = true
+      }
+      if (shouldTranslateThumb) {
+        const state2 = this.getState()
+        this.translateThumbX(state2.thumbOffsetX)
+        this.translateThumbY(state2.thumbOffsetY)
+      }
+    },
+    setScrollOffsetX(x) {
+      const state = this.getState()
+      const clampedOffsetX = Math.max(0, Math.min(x, state.scrollableWidth))
+      this.offsetX = clampedOffsetX
+
+      const state2 = this.getState()
+      this.translateThumbX(state2.thumbOffsetX)
+    },
+    ease(currentScroll, distance) {
+      // 最大距离
+      const maxScrollY = this.state.tableHeight - this.viewportHeight + this.loadMoreHeight
+      let damping = 1
+      // 剩余距离
+      const remainingDistance = maxScrollY - currentScroll
+      damping = remainingDistance / maxScrollY
+
+      let newDistance = distance * damping * 10
+
+      return newDistance
+    },
+    setScrollOffsetY(y) {
+      const state = this.getState()
+      let scrollableHeight = state.scrollableHeight
+      // 如果开启了上拉加载更多,这里最大滚动高度加上上拉加载更多的高度
+      if (this.enableLoadMore) {
+        const loadMoreHeight = this.loadMoreHeight || 0
+        // const dyc = (this.isHasOffsetY && this.isLoadFinished) ? 0 : loadMoreHeight
+        const dyc = loadMoreHeight
+        // 表格条数加上加载更多的距离够才需要加可滚动距离
+        if ((state.tableHeight + dyc) > this.viewportHeight) {
+          scrollableHeight += dyc
+        }
+      }
+      const clampedOffsetY = Math.max(0, Math.min(y, scrollableHeight))
+      this.offsetY = clampedOffsetY
+      const state2 = this.getState()
+      this.translateThumbY(state2.thumbOffsetY)
+    },
+    emitScroll() {
+      // const renderViewportCellsColumns = [...this.renderCellsColumns.filter(col => col.fixed), ...this.renderCellsColumns.slice(this.state.startCell, this.state.endCell + 1)]
+      const params = {
+        direction: this.scrollDirection,
+        scrollLeft: this.offsetX,
+        scrollTop: this.offsetY,
+        startRow: this.state.startRow,
+        endRow: this.state.endRow,
+        startCell: this.state.startCell,
+        endCell: this.state.endCell,
+        rowsPerViewport: this.state.rowsPerViewport,
+        viewportEndRowIndex: this.getViewportEndRowIndex(),
+        // renderViewportCellsColumns
+      }
+      this.$emit('scroll', params)
+      if (this.isScrollShowTotal) {
+        this.showTotalView()
+      }
+    },
+    scrollBy(x, y) {
+      // console.log(x, y, 'scrollBy')
+
+      let renderRows = false
+      let renderCells = false
+
+      // 仅处理垂直滚动
+      if (y != null && y !== 0) {
+        if (!this.$props.scrollY && this.scrollDirection === 'Y' && !this.isShowHorizontal) {
+          return
+        }
+        if (this.offsetY + y > (this.state.tableHeight - this.viewportHeight + 100)) {
+          y = this.ease(this.offsetY + y, y)
+        }
+        this.setScrollOffsetY(this.offsetY + y)
+        renderRows = true
+      }
+      // 仅处理水平滚动
+      if (x != null && x !== 0) {
+        if (!this.$props.scrollX && this.scrollDirection === 'X') {
+          return
+        }
+        this.setScrollOffsetX(this.offsetX + x)
+        renderCells = true
+      }
+
+      // 根据滚动方向渲染对应的部分
+      if (renderRows) {
+        this.renderViewportRows()
+      }
+      if (renderCells) {
+        this.renderViewportCells()
+      }
+
+      this.emitScroll()
+    },
+    getViewportEndRowIndex() {
+      if (this.state.endRow === this.tableData.length) {
+        return this.state.endRow
+      }
+      return this.state.endRow - Math.floor(this.headerTotalHeight / this.$props.rowHeight)
+    },
+    onContainerWheel(e) {
+      e.preventDefault()
+      e.stopPropagation()
+
+      let deltaY = e.deltaY
+      let deltaX = e.deltaX
+      if (Math.abs(deltaY) > 30 && Math.abs(deltaX) < 15) {
+        deltaX = 0
+      } else if (Math.abs(deltaX) > 30 && Math.abs(deltaY) < 15) {
+        deltaY = 0
+      }
+
+      // 判断滚动方向
+      const isHorizontal = Math.abs(deltaX) > Math.abs(deltaY) // 水平滚动
+      const isVertical = Math.abs(deltaY) > Math.abs(deltaX) // 垂直滚动
+
+      // 如果是水平滚动，则忽略垂直滚动
+      if (isHorizontal) {
+        this.scrollDirection = 'X'
+        deltaY = 0
+      }
+      // 如果是垂直滚动，则忽略水平滚动
+      if (isVertical) {
+        this.scrollDirection = 'Y'
+        deltaX = 0
+      }
+
+      this.transientScrollOffsetX += deltaX
+      this.transientScrollOffsetY += deltaY
+      if (this.isScrolling) {
+        return
+      }
+
+      this.isScrolling = true
+      window.requestAnimationFrame(() => {
+        const scrollX = this.transientScrollOffsetX !== 0 ? this.transientScrollOffsetX : undefined
+        const scrollY = this.transientScrollOffsetY !== 0 ? this.transientScrollOffsetY : undefined
+        this.scrollBy(scrollX, scrollY)
+        this.isScrolling = false
+        this.transientScrollOffsetX = 0
+        this.transientScrollOffsetY = 0
+      })
+    },
+    onThumbMouseDownY(e) {
+      e.preventDefault()
+      e.stopPropagation()
+      document.body.style.setProperty('cursor', 'grabbing', 'important')
+      document.addEventListener('mousemove', this.onThumbDragY)
+      document.addEventListener('mouseup', this.onThumbMouseUpY)
+    },
+    onThumbDragY(e) {
+      e.preventDefault()
+      e.stopPropagation()
+      const state = this.getState()
+
+      // 仅处理垂直滚动
+      this.transientScrollOffsetY += (e.movementY / this.viewportHeight) * state.tableHeight
+      if (this.isScrolling) {
+        return
+      }
+
+      this.isScrolling = true
+      window.requestAnimationFrame(() => {
+        this.scrollBy(undefined, this.transientScrollOffsetY) // 仅滚动垂直方向
+        this.isScrolling = false
+        this.transientScrollOffsetY = 0
+      })
+    },
+    onThumbMouseUpY() {
+      document.body.style.removeProperty('cursor')
+      document.removeEventListener('mousemove', this.onThumbDragY)
+      document.removeEventListener('mouseup', this.onThumbMouseUpY)
+      this.isScrolling = false
+      if (this.transientScrollOffsetY > 0) {
+        this.scrollBy(undefined, this.transientScrollOffsetY)
+      }
+      this.transientScrollOffsetY = 0
+    },
+    onThumbMouseDownX(e) {
+      e.preventDefault()
+      e.stopPropagation()
+      document.body.style.setProperty('cursor', 'grabbing', 'important')
+      document.addEventListener('mousemove', this.onThumbDragX)
+      document.addEventListener('mouseup', this.onThumbMouseUpX)
+    },
+    onThumbDragX(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      const state = this.getState()
+      // 仅处理垂直滚动
+      this.transientScrollOffsetX += (e.movementX / this.viewportWidth) * state.tableWidth
+      if (this.isScrolling) {
+        return
+      }
+
+      this.isScrolling = true
+      window.requestAnimationFrame(() => {
+        this.scrollBy(this.transientScrollOffsetX, undefined) // 仅滚动水平方向
+        this.isScrolling = false
+        this.transientScrollOffsetX = 0
+      })
+    },
+    onThumbMouseUpX() {
+      document.body.style.removeProperty('cursor')
+      document.removeEventListener('mousemove', this.onThumbDragX)
+      document.removeEventListener('mouseup', this.onThumbMouseUpX)
+      this.isScrolling = false
+      if (this.transientScrollOffsetX > 0) {
+        this.scrollBy(this.transientScrollOffsetX, undefined)
+      }
+      this.transientScrollOffsetX = 0
+    },
+    onTrackMouseMoveY(e) {
+      e.preventDefault()
+    },
+    onTrackMouseMoveX(e) {
+      e.preventDefault()
+    },
+    // 滚动到指定的top值
+    scrollToTop(scrollTop = 0) {
+      const state = this.getState()
+      const relativeOffset = (scrollTop / this.viewportHeight) * state.tableHeight
+      this.setScrollOffsetY(relativeOffset)
+      this.renderViewportRows()
+    },
+    onTrackMouseDownY(e) {
+      e.preventDefault()
+      this.scrollToTop(e.offsetY - this.headerTotalHeight) // 仅滚动垂直方向
+    },
+    onTrackMouseDownX(e) {
+      e.preventDefault()
+      this.scrollToLeft(e.offsetX, false) // 仅滚动水平方向
+    },
+    // 滚动到指定的left值
+    scrollToLeft(scrollLeft = 0, createHeader = true) {
+      const state = this.getState()
+      const relativeOffset = (scrollLeft / this.viewportWidth) * state.tableWidth
+      createHeader && this.createHeader()
+      this.setScrollOffsetX(relativeOffset)
+      this.renderViewportCells()
+    },
+    translateThumbY(offset) {
+      this.$refs.thumbY.style.transform = `translateY(${offset + this.headerTotalHeight}px)`
+    },
+    translateThumbX(offset) {
+      if (this.$refs.thumbX) {
+        this.$refs.thumbX.style.transform = `translateX(${offset}px)`
+      }
+    },
+    setThumbSizeY(height) {
+      // const _height = height < 0 ? 60 : height
+      // TODO 数据超出太多时，此时的滑块高度为负数，需要处理极致情况。
+      this.$refs.thumbY.style.height = `${height}px`
+    },
+    setThumbSizeX(width) {
+      this.$refs.thumbX.style.width = `${width}px`
+    },
+  },
+}

package/src/view/home/query-table/components/pe-table/stretch-damping.js

@@ -0,0 +1,112 @@
+/**
+ * 获取元素的 transform 属性值
+ * @param {HTMLElement} element - 需要获取 transform 的元素
+ * @param {*} element
+ * @returns
+ */
+function getMatrixTransform (element) {
+  const computedStyle = window.getComputedStyle(element)
+  const transformValue = computedStyle.transform
+
+  if (transformValue && transformValue!== 'none') {
+    const matrix = new DOMMatrix(transformValue)
+    return matrix.m42
+  }
+  return 0
+}
+
+export default {
+  computed: {
+    useStretchFeature() {
+      return this.$props.stretchEnabled && !!this.$props.scrollY && this.isHasOffsetY
+    },
+  },
+  data() {
+    return {
+      // 是否正在拖动
+      isDragging: false,
+      // 记录手指开始触摸时的Y坐标
+      startY: 0,
+      startTime: 0,
+      // 当前的translateY值
+      currentTranslateY: 0,
+      maxTranslateY: 120,
+      isMoving: false
+    }
+  },
+  methods: {
+    /**
+     * 触摸开始事件处理
+     * @param {*} event
+     */
+    containerHandleTouchStart(event) {
+      if (!this.useStretchFeature) return
+      // const touch = event.changedTouches[0]
+      this.startY = event.touches[0].clientY
+      this.startTime = Date.now()
+      this.isMoving = true
+    },
+    /**
+     * 仅 y 轴滚动执行
+     * @param {*} event
+    */
+   containerHandleTouchMove(event) {
+      if (!this.useStretchFeature || !this.isMoving) return
+
+      //  const touch = event.changedTouches[0]
+      const currentY = event.touches[0].clientY
+      const distance = this.startY - currentY
+
+      // 滚动到底部执行（滚动偏移量 = 表格高度 - 可视口高度）
+      if (this.offsetY === (this.state.tableHeight - this.viewportHeight) && distance > 0) {
+
+        const currentTime = Date.now()
+        const duration = currentTime - this.startTime
+
+        // 计算速度(距离差/时间差)
+        const speed = distance / duration
+
+        // 计算阻尼系数，越接近最大偏移距离阻尼越大
+        let damping = 1
+        const container = this.$refs.container
+        const currentTranslateY = getMatrixTransform(container)
+        const remainingDistance = this.maxTranslateY - currentTranslateY
+        damping = remainingDistance / this.maxTranslateY
+
+        // 计算新的 translateY
+        let newTranslateY = currentTranslateY + (distance * speed * damping)
+        newTranslateY = Math.min(newTranslateY, this.maxTranslateY)
+        newTranslateY = Math.max(newTranslateY, 0)
+
+        container.style.transform = `translateY(${-newTranslateY}px)`
+        container.style.transition = 'transform 0.2s ease'
+      } else {
+        // 如果没有到达底部，重置 translateY
+        this.resetStretch()
+      }
+    },
+    /**
+     * 松开手势时 清空动画数据
+     * @param {*} event
+     */
+    containerHandleTouchEnd(event) {
+
+      if (!this.useStretchFeature) return
+
+      this.resetStretch()
+    },
+    /**
+     * 重置各种参数
+     */
+    resetStretch () {
+
+      this.isMoving = false
+      this.startY = 0
+      this.startTime = 0
+
+      const container = this.$refs.container
+      container.style.transform = 'translateY(0px)'
+      container.style.transition = 'transform 0.3s ease'
+    }
+  },
+}

package/src/view/home/query-table/components/pe-table/style/cell.less

@@ -0,0 +1,89 @@
+.pe-table-cell {
+  position: absolute;
+  left: 0;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  font-size: 13PX;
+  padding: 0 8PX;
+  height: 100%;
+  overflow: hidden;
+  background-color: transparent;
+  // transform: translateZ(0);
+  // will-change: transform; 单元格会发生偏移
+}
+.ks-multi-screen .pe-table-cell {
+  font-size: 14PX !important;
+}
+.pe-table-cell::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #F1F1F1;
+  transform-origin: bottom;
+  transform: scaleY(0.5);
+}
+
+.pe-table-cell.overflow span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.pe-table-cell_label {
+  width: 100%;
+}
+.pe-table-cell.right .pe-table-cell_label {
+  text-align: right;
+}
+.pe-table-cell.left .pe-table-cell_label {
+  text-align: left;
+}
+.pe-table-cell.center .pe-table-cell_label {
+  text-align: center;
+}
+
+.pe-table-cell.collapse-bg {
+  // background: rgba(21, 88, 202, 0.04);
+  background-color: #F8FAFD;
+}
+
+.pe-table-scrolling__x {
+  .pe-table-cell__last-fixed {
+    // border-right: none;
+    box-shadow: 4px 0 6px -4px rgba(28, 32, 35, 0.1);
+    // background-color: #fff;
+  }
+  .pe-table-cell__fixed {
+    background-color: #fff;
+  }
+}
+
+.pe-table-header_cell[data-cellkey="$index"] {
+  padding-right: 4PX;
+  white-space: nowrap;
+}
+.pe-table-cell[data-cellkey="$index"] {
+  padding-right: 4PX;
+  white-space: nowrap;
+  font-size: 12PX;
+}
+.ks-multi-screen {
+  .pe-table-cell[data-cellkey="$index"] {
+    font-size: 13PX;
+  }
+}
+.pe-table-show-index {
+  .pe-table-cell[data-cellkey="name"] {
+    padding-left: 0;
+    padding-right: 2PX;
+    .collect-icon-area {
+      margin-left: -12PX;
+      .collect-icon-wrap {
+        padding-left: 8PX;
+      }
+    }
+  }
+}

package/src/view/home/query-table/components/pe-table/style/empty.less

@@ -0,0 +1,48 @@
+.pe-table-empty {
+  display: flex;
+  width: 100PX;
+  // height: 118PX;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  // top: 40PX;
+  left: 50%;
+  transform: translateX(-50%)
+}
+.pe-table-empty_label {
+  margin-top: 12PX;
+  color: #888B92;
+  font-size: 13PX;
+  line-height: 1;
+}
+.pe-table-empty_bg {
+  width: 100PX;
+  height: 80PX;
+  background: url('../images/empty.png');
+  background-size: contain;
+}
+.abnormal {
+  width: 130PX;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .abnormal-img {
+    width: 108PX;
+    height: 69PX;
+    margin-bottom: 10PX;
+    font-size: 0;
+    background: url('../images/abnormal.png');
+    background-size: 108PX 69PX;
+    background-repeat: no-repeat;
+  }
+  .abnormal-desc {
+    margin-bottom: 8PX;
+    font-size: 12PX;
+    font-weight: normal;
+    line-height: 18PX;
+    text-align: center;
+    letter-spacing: 0em;
+    color: #888B92;
+  }
+}