@travel-screen/l-module-components 1.0.0

package/src/l-rank-list/index.vue

@@ -0,0 +1,610 @@
+<template>
+  <div
+    class="l-rank-list"
+    :class="{
+      'l-rank-list--manual-scroll': !autoScroll,
+      'l-rank-list--auto-scroll': autoScroll
+    }"
+    :style="containerStyle"
+    ref="rankListContainer"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @wheel="handleWheel"
+  >
+    <div v-if="autoScroll && shouldScroll" class="l-rank-list__scroll-wrapper" :style="scrollWrapperStyle" ref="scrollWrapper">
+      <!-- 自动滚动模式 -->
+      <div v-for="(item, index) in scrollDataList" :key="'scroll_' + index" class="l-rank-list__item" :style="listItemStyle">
+        <div :class="['l-rank-list__rank-icon', `l-rank-list__rank-icon--${getRankClass(index + 1)}`]" :style="getRankIconStyle(getRealRank(index))">
+          {{ getRealRank(index) }}
+        </div>
+        <div class="l-rank-list__right">
+          <!-- 布局类型：value-top（数值在标题右侧） -->
+          <template v-if="layoutType === 'value-top'">
+            <div class="l-rank-list__title" :style="titleStyle">
+              <span>{{ item.name }}</span>
+              <div class="l-rank-list__value" :style="topValueStyle">{{ item.value }}<span :style="unitStyle">{{ unit }}</span></div>
+            </div>
+            <div class="l-rank-list__bottom" :style="bottomStyle">
+              <div class="l-rank-list__progress" :style="progressStyle">
+                <div
+                  :style="{
+                    background: progressBarBg,
+                    boxShadow: progressBarBoxShadow,
+                    borderRadius: typeof progressBarBorderRadius === 'number' ? `${progressBarBorderRadius}px` : progressBarBorderRadius
+                  }"
+                  class="l-rank-list__progress-bar">
+                  <div
+                    :style="{
+                      width: item.value / maxValue * 100 + '%',
+                      background: (getRealRank(index) - 1) > 1 ? progressBarActiveBg : getRankColor(getRealRank(index) - 1),
+                      borderRadius: typeof progressBarBorderRadius === 'number' ? `${progressBarBorderRadius}px` : progressBarBorderRadius
+                    }"
+                    class="l-rank-list__progress-bar-active"></div>
+                  <img
+                    :style="{
+                      position: 'absolute',
+                      left: `calc(${item.value / maxValue * 100}% - ${sliderIconWidth / 2}px)`,
+                      width: typeof sliderIconWidth === 'number' ? `${sliderIconWidth}px` : sliderIconWidth,
+                      height: typeof sliderIconHeight === 'number' ? `${sliderIconHeight}px` : sliderIconHeight,
+                      top: typeof sliderIconTop === 'number' ? `${sliderIconTop}px` : sliderIconTop
+                    }"
+                    :src="computedSliderIcon"
+                    alt=""
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <!-- 布局类型：value-bottom（数值在进度条右侧，默认） -->
+          <template v-else>
+            <div class="l-rank-list__title" :style="titleStyle">
+              <span>{{ item.name }}</span>
+            </div>
+            <div class="l-rank-list__bottom" :style="bottomStyle">
+              <div class="l-rank-list__progress" :style="progressStyle">
+                <div
+                  :style="{
+                    background: progressBarBg,
+                    boxShadow: progressBarBoxShadow,
+                    borderRadius: typeof progressBarBorderRadius === 'number' ? `${progressBarBorderRadius}px` : progressBarBorderRadius
+                  }"
+                  class="l-rank-list__progress-bar">
+                  <div
+                    :style="{
+                      width: item.value / maxValue * 100 + '%',
+                      background: (getRealRank(index) - 1) > 1 ? progressBarActiveBg : getRankColor(getRealRank(index) - 1),
+                      borderRadius: typeof progressBarBorderRadius === 'number' ? `${progressBarBorderRadius}px` : progressBarBorderRadius
+                    }"
+                    class="l-rank-list__progress-bar-active"></div>
+                  <img
+                    :style="{
+                      position: 'absolute',
+                      left: `calc(${item.value / maxValue * 100}% - ${sliderIconWidth / 2}px)`,
+                      width: typeof sliderIconWidth === 'number' ? `${sliderIconWidth}px` : sliderIconWidth,
+                      height: typeof sliderIconHeight === 'number' ? `${sliderIconHeight}px` : sliderIconHeight,
+                      top: typeof sliderIconTop === 'number' ? `${sliderIconTop}px` : sliderIconTop
+                    }"
+                    :src="computedSliderIcon"
+                    alt=""
+                  />
+                </div>
+              </div>
+              <div class="l-rank-list__value" :style="[{...valueStyle}, {...valueContainerStyle}]">{{ item.value }}<span :style="unitStyle">{{ unit }}</span></div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+    <template v-else>
+      <!-- 非自动滚动模式：显示所有数据，支持原生滚动 -->
+      <div v-for="(item, index) in dataList" :key="'line_' + index" class="l-rank-list__item" :style="listItemStyle">
+        <div :class="['l-rank-list__rank-icon', `l-rank-list__rank-icon--${getRankClass(index + 1)}`]" :style="getRankIconStyle(index + 1)">
+          {{ index + 1 }}
+        </div>
+        <div class="l-rank-list__right">
+          <!-- 布局类型：value-top（数值在标题右侧） -->
+          <template v-if="layoutType === 'value-top'">
+            <div class="l-rank-list__title" :style="titleStyle">
+              <span>{{ item.name }}</span>
+              <div class="l-rank-list__value" :style="topValueStyle">{{ item.value }}<span :style="unitStyle">{{ unit }}</span></div>
+            </div>
+            <div class="l-rank-list__bottom" :style="bottomStyle">
+              <div class="l-rank-list__progress" :style="progressStyle">
+                <div
+                  :style="{
+                    background: progressBarBg,
+                    boxShadow: progressBarBoxShadow,
+                    borderRadius: typeof progressBarBorderRadius === 'number' ? `${progressBarBorderRadius}px` : progressBarBorderRadius
+                  }"
+                  class="l-rank-list__progress-bar">
+                  <div
+                    :style="{
+                      width: item.value / maxValue * 100 + '%',
+                      background: index > 1 ? progressBarActiveBg : getRankColor(index),
+                      borderRadius: typeof progressBarBorderRadius === 'number' ? `${progressBarBorderRadius}px` : progressBarBorderRadius
+                    }"
+                    class="l-rank-list__progress-bar-active"></div>
+                  <img
+                    :style="{
+                      position: 'absolute',
+                      left: `calc(${item.value / maxValue * 100}% - ${sliderIconWidth / 2}px)`,
+                      width: typeof sliderIconWidth === 'number' ? `${sliderIconWidth}px` : sliderIconWidth,
+                      height: typeof sliderIconHeight === 'number' ? `${sliderIconHeight}px` : sliderIconHeight,
+                      top: typeof sliderIconTop === 'number' ? `${sliderIconTop}px` : sliderIconTop
+                    }"
+                    :src="computedSliderIcon"
+                    alt=""
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <!-- 布局类型：value-bottom（数值在进度条右侧，默认） -->
+          <template v-else>
+            <div class="l-rank-list__title" :style="titleStyle">
+              <span>{{ item.name }}</span>
+            </div>
+            <div class="l-rank-list__bottom" :style="bottomStyle">
+              <div class="l-rank-list__progress" :style="progressStyle">
+                <div
+                  :style="{
+                    background: progressBarBg,
+                    boxShadow: progressBarBoxShadow,
+                    borderRadius: typeof progressBarBorderRadius === 'number' ? `${progressBarBorderRadius}px` : progressBarBorderRadius
+                  }"
+                  class="l-rank-list__progress-bar">
+                  <div
+                    :style="{
+                      width: item.value / maxValue * 100 + '%',
+                      background: index > 1 ? progressBarActiveBg : getRankColor(index),
+                      borderRadius: typeof progressBarBorderRadius === 'number' ? `${progressBarBorderRadius}px` : progressBarBorderRadius
+                    }"
+                    class="l-rank-list__progress-bar-active"></div>
+                  <img
+                    :style="{
+                      position: 'absolute',
+                      left: `calc(${item.value / maxValue * 100}% - ${sliderIconWidth / 2}px)`,
+                      width: typeof sliderIconWidth === 'number' ? `${sliderIconWidth}px` : sliderIconWidth,
+                      height: typeof sliderIconHeight === 'number' ? `${sliderIconHeight}px` : sliderIconHeight,
+                      top: typeof sliderIconTop === 'number' ? `${sliderIconTop}px` : sliderIconTop
+                    }"
+                    :src="computedSliderIcon"
+                    alt=""
+                  />
+                </div>
+              </div>
+              <div class="l-rank-list__value" :style="[{...valueStyle}, {...valueContainerStyle}]">{{ item.value }}<span :style="unitStyle">{{ unit }}</span></div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import interfaceObj from './interface/index'
+import { getLineIconPath, getRankIconPath } from './img/images'
+
+export default {
+  name: 'LRankList',
+  props: interfaceObj,
+  components: {},
+  data() {
+    return {
+      maxValue: 0,
+      scrollPosition: 0,
+      animationFrameId: null,
+      isMouseInside: false, // 鼠标是否在容器内
+      manualScrollOffset: 0 // 手动滚动的偏移量
+    }
+  },
+  computed: {
+    // 是否应该滚动（数据量超过显示限制且开启了自动滚动）
+    shouldScroll() {
+      return this.dataList.length > this.displayLimit
+    },
+
+    // 滚动数据列表（复制一份数据以实现无缝滚动）
+    scrollDataList() {
+      if (!this.shouldScroll) return this.dataList.slice(0, this.displayLimit)
+      // 复制数据以实现无缝滚动
+      return [...this.dataList, ...this.dataList.slice(0, this.displayLimit)]
+    },
+
+    // 获取真实排名（处理复制数据后的排名）
+    getRealRank() {
+      return (index) => {
+        if (index < this.dataList.length) {
+          return index + 1
+        }
+        return index - this.dataList.length + 1
+      }
+    },
+
+    // 滚动容器样式
+    scrollWrapperStyle() {
+      // 自动滚动模式下，根据鼠标位置和手动滚动偏移计算最终位置
+      const finalPosition = this.isMouseInside
+        ? this.scrollPosition + this.manualScrollOffset
+        : this.scrollPosition
+
+      return {
+        transform: `translateY(-${finalPosition}px)`,
+        transition: 'none'
+      }
+    },
+
+    // 滑块图标（外部传入优先，否则使用默认）
+    computedSliderIcon() {
+      if (this.sliderIcon) {
+        return this.sliderIcon
+      }
+      return getLineIconPath()
+    },
+
+    // 容器样式
+    containerStyle() {
+      return {
+        width: this.containerWidth,
+        height: this.containerHeight,
+        left: typeof this.containerLeft === 'number' ? `${this.containerLeft}px` : this.containerLeft
+      }
+    },
+
+    // 列表项样式
+    listItemStyle() {
+      return {
+        width: this.listItemWidth,
+        gap: typeof this.listItemGap === 'number' ? `${this.listItemGap}px` : this.listItemGap
+      }
+    },
+
+    // 排名图标样式
+    rankIconStyle() {
+      return {
+        width: typeof this.rankIconWidth === 'number' ? `${this.rankIconWidth}px` : this.rankIconWidth,
+        height: typeof this.rankIconHeight === 'number' ? `${this.rankIconHeight}px` : this.rankIconHeight,
+        fontSize: typeof this.rankIconFontSize === 'number' ? `${this.rankIconFontSize}px` : this.rankIconFontSize,
+        fontFamily: this.rankIconFontFamily,
+        fontWeight: this.rankIconFontWeight,
+        color: this.rankIconColor
+      }
+    },
+
+    // 标题样式
+    titleStyle() {
+      return {
+        fontFamily: this.titleFontFamily,
+        fontWeight: this.titleFontWeight,
+        fontSize: typeof this.titleFontSize === 'number' ? `${this.titleFontSize}px` : this.titleFontSize,
+        color: this.titleColor,
+        marginBottom: this.layoutType === 'value-top' ? (typeof this.titleMarginBottom === 'number' ? `${this.titleMarginBottom}px` : this.titleMarginBottom) : '0'
+      }
+    },
+
+    // 底部容器样式
+    bottomStyle() {
+      return {
+        gap: typeof this.listItemGap === 'number' ? `${this.listItemGap}px` : this.listItemGap
+      }
+    },
+
+    // 进度条容器样式
+    progressStyle() {
+      return {
+        width: typeof this.progressBarWidth === 'number' ? `${this.progressBarWidth}%` : this.progressBarWidth,
+        height: typeof this.progressBarHeight === 'number' ? `${this.progressBarHeight}px` : this.progressBarHeight
+      }
+    },
+
+    // 数值容器样式
+    valueContainerStyle() {
+      return {
+        width: typeof this.valueWidth === 'number' ? `${this.valueWidth}%` : this.valueWidth
+      }
+    },
+
+    // 数值样式
+    valueStyle() {
+      return {
+        minWidth: typeof this.valueMinWidth === 'number' ? `${this.valueMinWidth}px` : this.valueMinWidth,
+        fontFamily: this.valueFontFamily,
+        fontWeight: this.valueFontWeight,
+        fontSize: typeof this.valueFontSize === 'number' ? `${this.valueFontSize}px` : this.valueFontSize,
+        color: this.valueColor,
+        background: this.valueBackground,
+        WebkitBackgroundClip: this.valueBackgroundClip,
+        backgroundClip: this.valueBackgroundClip,
+        lineHeight: typeof this.valueLineHeight === 'number' ? `${this.valueLineHeight}px` : this.valueLineHeight,
+        fontStyle: this.valueFontStyle,
+        textShadow: this.valueTextShadow,
+        textAlign: this.valueTextAlign
+      }
+    },
+
+    // 顶部数值样式（value-top 布局专用）
+    topValueStyle() {
+      return {
+        fontFamily: this.valueFontFamily,
+        fontWeight: this.valueFontWeight,
+        fontSize: typeof this.topValueFontSize === 'number' ? `${this.topValueFontSize}px` : this.topValueFontSize,
+        color: this.topValueColor,
+        background: this.topValueBackground,
+        WebkitBackgroundClip: this.topValueBackgroundClip,
+        backgroundClip: this.topValueBackgroundClip,
+        lineHeight: typeof this.topValueLineHeight === 'number' ? `${this.topValueLineHeight}px` : this.topValueLineHeight,
+        fontStyle: this.topValueFontStyle,
+        textShadow: this.topValueTextShadow
+      }
+    },
+
+    // 单位样式
+    unitStyle() {
+      return {
+        fontFamily: this.unitFontFamily,
+        fontWeight: this.unitFontWeight,
+        fontSize: typeof this.unitFontSize === 'number' ? `${this.unitFontSize}px` : this.unitFontSize,
+        marginLeft: typeof this.unitMarginLeft === 'number' ? `${this.unitMarginLeft}px` : this.unitMarginLeft
+      }
+    }
+  },
+  watch: {
+    dataList: {
+      handler() {
+        this.maxValue = this.dataList.reduce((max, item) => Math.max(max, item.value), -Infinity)
+        this.manualScrollOffset = 0 // 数据变化时重置手动滚动偏移
+      },
+      deep: true,
+      immediate: true
+    },
+    // 监听 autoScroll 变化，关闭时立即停止滚动
+    autoScroll(newVal) {
+      if (!newVal) {
+        this.stopScroll()
+        this.manualScrollOffset = 0
+      } else if (this.shouldScroll) {
+        this.startScroll()
+      }
+    }
+  },
+  mounted() {
+    console.log('[LRankList] mounted', {
+      autoScroll: this.autoScroll,
+      shouldScroll: this.shouldScroll,
+      dataListLength: this.dataList.length,
+      displayLimit: this.displayLimit
+    })
+
+    if (this.autoScroll && this.shouldScroll) {
+      console.log('[LRankList] 启动自动滚动')
+      this.startScroll()
+    } else {
+      console.log('[LRankList] 不启动自动滚动')
+    }
+  },
+  beforeDestroy() {
+    this.stopScroll()
+  },
+  created() {},
+  methods: {
+    // 获取排名样式类名
+    getRankClass(rank) {
+      return `rank-${rank}`
+    },
+
+    // 获取排名图标路径
+    getRankIcon(rank) {
+      if (rank === 1 && this.rankIcon1) return this.rankIcon1
+      if (rank === 2 && this.rankIcon2) return this.rankIcon2
+      if (rank > 2 && this.rankIconOther) return this.rankIconOther
+      return getRankIconPath(rank)
+    },
+
+    // 获取排名图标样式
+    getRankIconStyle(rank) {
+      return {
+        ...this.rankIconStyle,
+        background: `url(${this.getRankIcon(rank)}) 0 0 no-repeat`,
+        backgroundSize: '100% 100%'
+      }
+    },
+
+    // 获取排名颜色
+    getRankColor(index) {
+      if (index === 0) return this.rank1Color
+      if (index === 1) return this.rank2Color
+      return this.progressBarActiveBg
+    },
+
+    handleClick() {},
+
+    // 鼠标进入容器
+    handleMouseEnter() {
+      this.isMouseInside = true
+      // 鼠标移入时停止自动滚动
+      if (this.animationFrameId) {
+        cancelAnimationFrame(this.animationFrameId)
+        this.animationFrameId = null
+      }
+    },
+
+    // 鼠标离开容器
+    handleMouseLeave() {
+      this.isMouseInside = false
+      // 鼠标离开时，重置手动滚动偏移
+      this.manualScrollOffset = 0
+      // 恢复自动滚动
+      if (this.autoScroll && this.shouldScroll) {
+        this.startScroll()
+      }
+    },
+
+    // 处理鼠标滚轮事件
+    handleWheel(event) {
+      // 自动滚动模式下才拦截滚轮事件
+      if (!this.autoScroll || !this.shouldScroll) return
+
+      // 阻止默认滚动行为
+      event.preventDefault()
+
+      // 根据滚轮方向调整手动滚动偏移
+      // deltaY > 0 表示向下滚动，deltaY < 0 表示向上滚动
+      this.manualScrollOffset += event.deltaY
+
+      // 计算单份数据的高度，用于实现无缝循环
+      const container = this.$refs.rankListContainer
+      const wrapper = this.$refs.scrollWrapper
+      if (!container || !wrapper) return
+
+      const itemHeight = wrapper.querySelector('.l-rank-list__item')?.clientHeight || 30
+      const singleListHeight = this.dataList.length * itemHeight
+
+      // 实现无缝循环滚动：允许向任意方向无限滚动
+      // 当向上滚动超过顶部时，循环到底部
+      if (this.manualScrollOffset < 0) {
+        this.manualScrollOffset += singleListHeight
+      }
+      // 当向下滚动超过底部时，循环到顶部
+      const containerHeight = container.clientHeight
+      const maxScroll = singleListHeight - containerHeight
+      if (this.manualScrollOffset > maxScroll) {
+        this.manualScrollOffset -= singleListHeight
+      }
+    },
+
+    // 开始自动滚动
+    startScroll() {
+      if (this.animationFrameId) return
+
+      const container = this.$refs.rankListContainer
+      const wrapper = this.$refs.scrollWrapper
+      if (!container || !wrapper) return
+
+      const itemHeight = wrapper.querySelector('.l-rank-list__item')?.clientHeight || 30
+
+      let lastTime = 0
+      const animate = (currentTime) => {
+        if (!lastTime) lastTime = currentTime
+        const deltaTime = (currentTime - lastTime) / 1000 // 转换为秒
+
+        this.scrollPosition += this.scrollSpeed * deltaTime
+
+        // 当滚动到复制数据的位置时，重置到开头实现无缝循环
+        const singleListHeight = this.dataList.length * itemHeight
+        if (this.scrollPosition >= singleListHeight) {
+          this.scrollPosition -= singleListHeight
+        }
+
+        lastTime = currentTime
+        this.animationFrameId = requestAnimationFrame(animate)
+      }
+
+      this.animationFrameId = requestAnimationFrame(animate)
+    },
+
+    // 停止自动滚动
+    stopScroll() {
+      if (this.animationFrameId) {
+        cancelAnimationFrame(this.animationFrameId)
+        this.animationFrameId = null
+      }
+      this.scrollPosition = 0
+    },
+
+    // 暂停滚动（鼠标悬停时调用）
+    pauseScroll() {
+      if (this.animationFrameId) {
+        cancelAnimationFrame(this.animationFrameId)
+        this.animationFrameId = null
+      }
+    },
+
+    // 恢复滚动（鼠标离开时调用）
+    resumeScroll() {
+      if (this.autoScroll && this.shouldScroll && !this.animationFrameId) {
+        this.startScroll()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.l-rank-list {
+  overflow: hidden;
+  position: relative;
+
+  // 未开启自动滚动时使用原生滚动
+  &--manual-scroll {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  // 开启自动滚动时，允许鼠标滚轮事件
+  &--auto-scroll {
+    overflow: hidden;
+  }
+
+  &__scroll-wrapper {
+    will-change: transform;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+  }
+
+  &__rank-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__right {
+    flex: 1;
+  }
+
+  &__title {
+    font-style: normal;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__bottom {
+    display: flex;
+    align-items: center;
+  }
+
+  &__progress {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    min-width: 0; /* 防止 flex 子元素溢出 */
+  }
+
+  &__progress-bar {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  &__progress-bar-active {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &__value {
+    flex-shrink: 0;
+
+    span {
+      font-style: normal;
+    }
+  }
+}
+</style>