From a20b6235ff2c8a36931133e0b1fe6ca5c2f12cb4 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 3 Dec 2025 14:46:59 +0800
Subject: [PATCH] =?UTF-8?q?chore(=E5=88=A0=E9=99=A4=E6=97=A0=E7=94=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6):=20=E6=8A=BD=E5=A5=96=E6=B4=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Lottery/Barrage.vue | 291 -----------------------------
 1 file changed, 291 deletions(-)
 delete mode 100644 src/components/Lottery/Barrage.vue

diff --git a/src/components/Lottery/Barrage.vue b/src/components/Lottery/Barrage.vue
deleted file mode 100644
index cc730fb..0000000
--- a/src/components/Lottery/Barrage.vue
+++ /dev/null
@@ -1,291 +0,0 @@
-<!-- Barrage.vue 优化版 -->
-<template>
-  <div
-    style="position: relative; width: 100%; height: 32vw; overflow: hidden; pointer-events: none"
-  >
-    <!-- 双行弹幕轨道 -->
-    <div
-      v-for="(track, index) in visibleTracks"
-      :key="index"
-      style="position: absolute; width: 100%; height: 50px"
-      :style="{ top: `calc(${index} * 16vw)` }"
-    >
-      <div
-        v-for="item in track"
-        :key="item.id"
-        class="barrage-item"
-        style="
-          position: absolute;
-          border-radius: 48px;
-          padding: 4px;
-          display: flex;
-          align-items: center;
-          gap: 4px;
-        "
-        :style="getBarrageStyle(item)"
-        @animationend="handleAnimationEnd(item.id)"
-      >
-        <img
-          :src="item.avatar"
-          alt=""
-          @error="defaultAvatarUrl"
-          style="
-            width: 10vw;
-            border-radius: 50%;
-            display: block;
-            aspect-ratio: 1/1;
-            object-fit: cover;
-          "
-        />
-        <div
-          style="
-            font-weight: 700;
-            background-clip: text;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-          "
-          :style="{
-            backgroundImage:
-              item.type != ''
-                ? '-webkit-linear-gradient(180deg, #FFF9A9 26.92%, #ED7D0A 52.08%, #FFFAB5 73.08%)'
-                : '-webkit-linear-gradient(180deg, #A9FFA9 26.92%, #0AED47 52.08%, #B5FFC5 73.08%)',
-          }"
-        >
-          {{ barrageText(item) }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { locale } = useI18n()
-
-const props = defineProps({
-  barrageList: {
-    type: Array,
-    required: true,
-    default: () => [],
-  },
-
-  speed: {
-    type: Number,
-    default: 80, // 基础速度系数
-  },
-
-  maxItems: {
-    type: Number,
-    default: 6, // 每行最大弹幕数
-  },
-
-  loopInterval: {
-    type: Number,
-    default: 2000, // 弹幕生成间隔(ms)
-  },
-})
-
-// 弹幕轨道数据
-const tracks = ref([[], []])
-// 弹幕ID计数器
-const idCounter = ref(0)
-// 当前播放索引（用于循环）
-const currentIndex = ref(0)
-
-// 计算实际显示的轨道（过滤空轨道）
-const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
-
-// 显示的文本
-const barrageText = (item) => {
-  return item.prizeType == 'GOLD' || item.prizeType == 'MONEY'
-    ? `${item.nickname} won ${item.prizeName}`
-    : `${item.nickname} won the ${item.prizeName}`
-}
-
-const defaultAvatarUrl = (e) => {
-  console.log('头像资源出错')
-  e.target.onerror = null //防止循环
-  e.target.src = new URL('/src/assets/icon/defaultAvatar.png', import.meta.url).href
-}
-
-// 获取弹幕样式
-const getBarrageStyle = (item) => {
-  const isRTL = locale.value === 'ar'
-
-  return {
-    animationDuration: `${item.duration}s`,
-    animationDelay: `${item.delay}s`,
-    '--start-pos': `${item.startPos}px`,
-    border: item.type != '' ? '0.667px solid #FFF677' : '0.667px solid #77FF87',
-    background:
-      item.type != ''
-        ? 'linear-gradient(270deg, rgba(218, 103, 2, 0.60) -16.85%, rgba(124, 41, 0, 0.60) 82.7%)'
-        : 'linear-gradient(270deg, rgba(2, 218, 60, 0.60) -16.85%, rgba(0, 124, 54, 0.60) 82.7%)',
-    // RTL布局支持
-    ...(isRTL
-      ? {
-          right: '0',
-          left: 'auto',
-          transform: 'translateX(-100vw)',
-        }
-      : {
-          left: '0',
-          right: 'auto',
-          transform: 'translateX(100vw)',
-        }),
-  }
-}
-
-// 生成随机弹幕属性
-const generateBarrageProps = (item) => {
-  const textLength = barrageText(item).length
-  return {
-    duration: Math.max(8 - textLength * 0.2, 5) * (100 / props.speed),
-    startPos: Math.floor(Math.random() * 21) - 10,
-  }
-}
-
-// 添加弹幕到轨道
-const addToTrack = (item) => {
-  // 寻找最短的轨道
-  const trackIndex = tracks.value.reduce(
-    (minIndex, track, index) => (track.length < tracks.value[minIndex].length ? index : minIndex),
-    0
-  )
-
-  if (tracks.value[trackIndex].length < props.maxItems) {
-    tracks.value[trackIndex].push({
-      ...item,
-      id: idCounter.value++,
-      delay: Math.random() * 4, // 随机延迟（0-4秒）
-      ...generateBarrageProps(item),
-    })
-  }
-}
-
-// 清理完成动画的弹幕
-const cleanCompleted = () => {
-  tracks.value.forEach((track) => {
-    for (let i = track.length - 1; i >= 0; i--) {
-      if (track[i].completed) {
-        track.splice(i, 1)
-      }
-    }
-  })
-}
-
-// 弹幕动画结束处理
-const handleAnimationEnd = (id) => {
-  tracks.value.forEach((track) => {
-    const item = track.find((item) => item.id === id)
-    if (item) item.completed = true
-  })
-}
-
-// 获取下一项弹幕（循环逻辑）
-const getNextBarrage = () => {
-  if (props.barrageList.length === 0) return null
-
-  // 循环获取弹幕
-  const item = props.barrageList[currentIndex.value]
-  currentIndex.value = (currentIndex.value + 1) % props.barrageList.length
-
-  return { ...item } // 返回副本避免污染原始数据
-}
-
-// 弹幕循环逻辑
-let barrageInterval = null
-const startBarrage = () => {
-  barrageInterval = setInterval(() => {
-    cleanCompleted()
-
-    const nextBarrage = getNextBarrage()
-    if (nextBarrage) {
-      addToTrack(nextBarrage)
-    }
-  }, props.loopInterval)
-}
-
-onMounted(startBarrage)
-onUnmounted(() => clearInterval(barrageInterval))
-
-// 监听数据源变化
-watch(
-  () => props.barrageList,
-  (newList) => {
-    // 重置索引，确保重新开始循环
-    currentIndex.value = 0
-
-    // 如果列表为空，停止生成新弹幕
-    if (newList.length === 0) {
-      clearInterval(barrageInterval)
-    } else {
-      // 重启弹幕循环
-      clearInterval(barrageInterval)
-      startBarrage()
-    }
-  },
-  { deep: true }
-)
-</script>
-
-<style scoped>
-* {
-  font-family: 'SF Pro Text';
-}
-
-/* 样式保持不变（同之前版本） */
-.barrage-item {
-  will-change: transform;
-  animation: moveLeft linear forwards;
-}
-
-@keyframes moveLeft {
-  0% {
-    transform: translateX(100vw);
-  }
-  100% {
-    transform: translateX(-100%);
-  }
-}
-
-/* RTL支持 - 镜像弹幕动画 */
-[dir='rtl'] .barrage-item {
-  animation: moveRight linear forwards;
-}
-
-@keyframes moveRight {
-  0% {
-    transform: translateX(-100vw);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-@media screen and (max-width: 360px) {
-  * {
-    font-size: 10px;
-  }
-}
-
-@media screen and (min-width: 360px) {
-  * {
-    font-size: 16px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  * {
-    font-size: 24px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  * {
-    font-size: 32px;
-  }
-}
-</style>