@kyfe/ks-query-table 0.0.9 → 0.0.11

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

@@ -1,424 +0,0 @@
-/** @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

@@ -1,112 +0,0 @@
-/**
- * 获取元素的 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

@@ -1,89 +0,0 @@
-.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

@@ -1,48 +0,0 @@
-.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;
-  }
-}