@kyfe/ks-query-table 0.0.21 → 0.0.22

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

@@ -0,0 +1,141 @@
+.pe-table-header_cell {
+  position: absolute;
+  left: 0;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  font-size: 12PX;
+  padding: 0 8PX;
+  height: 100%;
+  overflow: hidden;
+  background-color: #f7f8fa;
+  color: #575555;
+  // border-bottom: 1PX solid #D9DEE2;
+  // border-right: 0.5PX solid #DEDEDE;
+}
+.ks-multi-screen .pe-table-header_cell {
+  font-size: 13PX !important;
+}
+.pe-table-header_cell::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  background-color: #DEDEDE;
+  transform-origin: right;
+  transform: scaleX(0.5);
+}
+.pe-table-header_cell.center {
+  justify-content: center;
+}
+.pe-table-header_cell.right {
+  justify-content: flex-end
+}
+.pe-table-header_cell.left {
+  justify-content: flex-start
+}
+// .pe-table-header_cell::before {
+//   position: absolute;
+//   content: '';
+//   display: block;
+//   padding: 8px 0;
+//   right: 0;
+//   width: 1px;
+//   background: #d9dee2;
+// }
+.pe-table-header_cell.overflow span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.pe-table-header_cell-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.pe-table-header_cell-sort {
+  margin-left: 3PX;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 8PX;
+  height: 14PX;
+}
+.pe-table-header_cell-sort .sort-caret {
+  background: url('../images/sort.svg');
+  background-repeat: no-repeat;
+  background-size: 8PX 4PX;
+  width: 8PX;
+  height: 4PX;
+}
+.pe-table-header_cell-sort .descending {
+  margin-top: 2PX;
+  transform: rotate(180deg);
+}
+.pe-table-header_cell-sort.ascending .sort-caret.ascending {
+  background: url('../images/sorting.svg');
+  background-repeat: no-repeat;
+  background-size: 8PX 4PX;
+}
+.pe-table-header_cell-sort.descending .sort-caret.descending {
+  background: url('../images/sorting.svg');
+  background-repeat: no-repeat;
+  background-size: 8PX 4PX;
+}
+.pe-table-header_cell-collapse {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 12PX;
+  height: 20PX;
+  margin-left: 6PX;
+  margin-right: -2PX;
+  padding: 4PX 0;
+}
+.pe-table-header_cell-collapse::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -8PX;
+  width: 8PX;
+  height: 100%;
+  background-color: transparent;
+}
+.pe-table-header_cell-collapse::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -8PX;
+  width: 8PX;
+  height: 100%;
+  background-color: transparent;
+}
+.pe-table-header_cell-collapse.unfold {
+  background: url('../images/unfold.svg');
+  background-size: 12PX 12PX;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-clip: content-box;
+}
+.pe-table-header_cell-collapse.fold {
+  background: url('../images/fold.svg');
+  background-size: 12PX 12PX;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-clip: content-box;
+}
+.pe-table-header_cell.collapse-bg {
+  background-color: #F0F3F8 !important;
+}
+
+.pe-table-scrolling__x {
+  .pe-table-header_cell__last-fixed {
+    box-shadow: 4px 0 6px -4px rgba(28, 32, 35, 0.1);
+  }
+  .pe-table-header_cell__last-fixed.pe-table-header_cell::after {
+    display: none;
+  }
+}

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

@@ -0,0 +1,88 @@
+.pe-table-wrap {
+  height: 100%;
+  overflow: hidden;
+}
+.pe-table-container {
+  position: relative;
+  height: 100%;
+}
+
+.pe-table-scrollbar_horizontal-track {
+  position: absolute;
+  bottom: 0;
+  z-index: 10;
+  // height: 4PX;
+  height: var(--peHScrollbarSize);
+  width: 100%;
+  // cursor: pointer;
+}
+.pe-table-scrollbar_horizontal-thumb {
+  background-color: transparent;
+  height: 100%;
+  // cursor: pointer;
+  border-radius: 0.25rem;
+}
+
+.pe-table-scrollbar_vertical-track {
+  position: absolute;
+  right: 0;
+  height: 100%;
+  // width: 4PX;
+  width: var(--peVScrollbarSize);
+  z-index: 10;
+  // cursor: pointer;
+}
+
+.pe-table-scrollbar_vertical-thumb {
+  border-radius: 0.25rem;
+  width: 100%;
+  // cursor: pointer;
+  background-color: transparent;
+}
+
+.pe-table-wrap .hidden {
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+}
+.pe-table-wrap .visible {
+  transition: opacity 0.3s ease-in-out;
+  opacity: 1;
+}
+
+.pe-table-resize_line {
+  position: absolute;
+  top: 0;
+  width: 2PX;
+  height: 100%;
+  z-index: 10;
+  background-color: #e66868;
+  display: none;
+}
+.pe-table-resize_line-thumb {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 4PX;
+  background-color: #e66868;
+}
+
+.load-more {
+  position: relative;
+  will-change: transform;
+  transform: translateY(-9999px);
+  height: 180PX;
+  width: 100%;
+  // opacity: 0;
+  // z-index: -1;
+}
+.stretch {
+  position: relative;
+  will-change: transform;
+  transform: translateY(-9999px);
+  height: 44PX;
+  line-height: 44PX;
+  font-size: 13PX;
+  color: #7B7878;
+  width: 100%;
+  text-align: center;
+}

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

@@ -0,0 +1,61 @@
+.pe-table-load-more {
+  display: flex;
+  width: 100%;
+  height: 44PX;
+  justify-content: center;
+  align-items: center;
+  .loading {
+    width: 14PX;
+    height: 14PX;
+    border: 1PX solid transparent;
+    border-top-color: #03050D;
+    border-left-color: #03050D;
+    border-bottom-color: #03050D;
+    border-radius: 50%;
+    animation: spin 1s ease-in-out infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .loading-container {
+    display: inline-block;
+    font-size: 13PX;
+    color: #C2C0C0;
+  }
+  .loading-color {
+    padding-left: 8PX;
+    color: #03050D !important;
+  }
+
+  .dots {
+    display: inline-block;
+    width: 0;
+    overflow: hidden;
+    vertical-align: bottom;
+    animation: dotAnimation 2s infinite;
+  }
+
+  @keyframes dotAnimation {
+    0% {
+      width: 0;
+    }
+    20% {
+      width: 0.4em;
+    }
+    40% {
+      width: 0.8em;
+    }
+    60% {
+      width: 1.2em;
+    }
+    80% {
+      width: 1.2em;
+    }
+    100% {
+      width: 0;
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+.pe-table-row {
+  position: absolute;
+  top: 0px;
+  transform: translateZ(0);
+  will-change: transform;
+}

package/src/view/home/query-table/components/pe-table/table-loading.vue

@@ -0,0 +1,120 @@
+<script>
+function sleep(timestamp) {
+  return new Promise(resolve => setTimeout(resolve, timestamp))
+}
+
+export default {
+  props: {
+    delayLoading: { type: Number, default: 0 },
+
+    top: {
+      type: [Number, String],
+      default: 0,
+    },
+    headerTotalHeight: {
+      type: [Number, String],
+      default: 0,
+    },
+  },
+  data() {
+    return { endDelay: false }
+  },
+  mounted() {
+    this.delayLoading && sleep(this.delayLoading).finally(() => (this.endDelay = true))
+  },
+  render() {
+    const $props = this.$props
+    const top = $props.top ? $props.top : $props.headerTotalHeight + 30
+    const style = {
+      top: top + 'PX',
+    }
+
+    if (this.delayLoading && !this.endDelay) return null
+
+    return (
+      <div class="table-loading">
+        <div class="loading-wrap" style={style}>
+          <div class="loading"></div>
+        </div>
+      </div>
+    )
+  },
+  methods: {
+    handleMaskClick(event) {
+      event.stopPropagation()
+      event.preventDefault()
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.table-loading {
+  z-index: 999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  .loading-wrap {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #03050d;
+    display: flex;
+    width: 16px;
+    height: 30px;
+    align-items: center;
+    .loading {
+      width: 14px;
+      height: 14px;
+      border: 1px solid transparent;
+      border-top-color: #03050d;
+      border-left-color: #03050d;
+      border-bottom-color: #03050d;
+      border-radius: 50%;
+      animation: spin 1s ease-in-out infinite;
+      box-sizing: content-box;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    // .loading-container {
+    //   padding-left: 8PX;
+    //   display: inline-block;
+    //   font-size: 14PX;
+    // }
+
+    // .dots {
+    //   display: inline-block;
+    //   width: 0;
+    //   overflow: hidden;
+    //   vertical-align: bottom;
+    //   animation: dotAnimation 2s infinite;
+    // }
+
+    @keyframes dotAnimation {
+      0% {
+        width: 0;
+      }
+      20% {
+        width: 0.4em;
+      }
+      40% {
+        width: 0.8em;
+      }
+      60% {
+        width: 1.2em;
+      }
+      80% {
+        width: 1.2em;
+      }
+      100% {
+        width: 0;
+      }
+    }
+  }
+}
+</style>

package/src/view/home/query-table/components/pe-table/table-total.vue

@@ -0,0 +1,57 @@
+<script>
+  export default {
+    props: {
+      show: {
+        type: Boolean,
+        default: false
+      },
+      endRow: {
+        type: [Number, String],
+        default: 0
+      },
+      total: {
+        type: [Number, String],
+        default: 0
+      },
+      totalOffset: {
+        type: [Number, String],
+        default: 0
+      }
+    },
+    render () {
+      const style = {
+        display: this.show ? 'block' : 'none',
+      }
+      return (
+        <div class="table-total" style={style}>
+          <span class="total-end">{ `${this.endRow - this.totalOffset}` }</span><span>/</span><span>{ `${this.total - this.totalOffset}` }</span>
+        </div>
+      )
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .table-total {
+    z-index: 999;
+    position: absolute;
+    bottom: 16PX;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 64PX;
+    height: 20PX;
+    line-height: 20PX;
+    font-size: 12PX;
+    color: #1D1919;
+    text-align: center;
+    border-radius: 100PX;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0px 0px 6px 0px rgba(28, 32, 35, 0.12);
+    .total-end {
+      color: #F2412F;
+    }
+    .popup-content {
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom)
+    }
+  }
+</style>

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

@@ -0,0 +1,80 @@
+export function smoothEaseOut(t) {
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+
+/**
+ * 平滑滚动到指定位置
+ * @param {Object} options 滚动配置
+ * @param {Number} options.from 起始位置
+ * @param {Number} options.to 目标位置
+ * @param {Number} options.duration 动画持续时间(毫秒)
+ * @param {Function} options.onUpdate 位置更新回调
+ * @param {Function} [options.onComplete] 动画完成回调
+ * @param {Function} [options.easing=easeOutCubic] 缓动函数
+ */
+export function animateScroll(options) {
+  const {
+    from,
+    to,
+    duration,
+    onUpdate,
+    onComplete,
+    easing = smoothEaseOut
+  } = options
+
+  const startTime = performance.now()
+  const distance = to - from
+  let animationId = null
+  let lastPos = from
+
+  const animate = (currentTime = performance.now()) => {
+    const elapsed = currentTime - startTime
+    const progress = Math.min(elapsed / duration, 1)
+    
+    // 时间补偿
+    if (progress < 1) {
+      animationId = requestAnimationFrame(animate)
+      const nextFrameTime = performance.now()
+      const frameDuration = nextFrameTime - currentTime
+      
+      if (frameDuration > 16.7) {
+        const compensation = frameDuration / 16.7
+        const compensatedProgress = Math.min(progress * compensation, 1)
+        const easedProgress = easing(compensatedProgress)
+        const currentPos = from + (distance * easedProgress)
+        if (Math.abs(currentPos - lastPos) >= 1) {
+          onUpdate(currentPos)
+          lastPos = currentPos
+        }
+        return
+      }
+    }
+    
+    // 正常计算
+    const easedProgress = easing(progress)
+    const currentPos = from + (distance * easedProgress)
+    
+    if (Math.abs(currentPos - lastPos) >= 1) {
+      onUpdate(currentPos)
+      lastPos = currentPos
+    }
+    
+    if (progress >= 1) {
+      onUpdate(to) // 确保到达终点
+      if (onComplete) onComplete()
+      animationId = null
+    }
+  }
+
+  animationId = requestAnimationFrame(animate)
+
+  // 返回取消函数
+  return {
+    cancel: () => {
+      if (animationId) {
+        cancelAnimationFrame(animationId)
+        animationId = null
+      }
+    }
+  }
+}