vite-uni-dev-tool 1.1.0 → 1.2.0

package/dist/v3/components/Barrage/BarrageItem.vue

@@ -1,137 +1,137 @@
-<template>
-  <view class="barrage-item" :style="itemStyle" @animationend="onAnimationEnd">
-    <view class="barrage-content" :class="type">
-      <view class="barrage-type-tag">
-        {{ typeTag }}
-      </view>
-      <view class="barrage-text">{{ text }}</view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps<{
-  text: string;
-  type: string;
-  top: number;
-  duration: number;
-  delay?: number; // 新增延迟属性，毫秒单位
-  maxLength?: number;
-  color?: string;
-}>();
-
-const emit = defineEmits<{
-  (e: 'remove'): void;
-}>();
-
-const typeTag = computed(() => {
-  const t = props.type.toLowerCase();
-  if (t === 'network') return 'NET';
-  return t.toUpperCase();
-});
-
-const itemStyle = computed(() => ({
-  top: `${props.top}px`,
-  '--barrage-duration': `${props.duration}s`,
-  '--barrage-delay': `${props.delay || 0}ms`,
-  '--barrage-max-width': props.maxLength ? 'none' : '300px',
-  color: props.color || 'inherit',
-}));
-
-function onAnimationEnd() {
-  emit('remove');
-}
-</script>
-
-<style scoped>
-.barrage-item {
-  position: fixed;
-  left: 100%;
-  top: 0;
-  white-space: nowrap;
-  pointer-events: none;
-  z-index: 10001;
-  display: flex;
-  will-change: transform;
-  animation: barrage-move var(--barrage-duration) linear var(--barrage-delay)
-    forwards;
-}
-
-.barrage-item:hover {
-  animation-play-state: paused;
-  z-index: 20000;
-}
-
-@keyframes barrage-move {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(calc(-100vw - 100%));
-  }
-}
-
-.barrage-content {
-  display: flex;
-  align-items: center;
-  padding: 4px 12px;
-  border-radius: 16px;
-  background: rgb(0 0 0 / 60%);
-  backdrop-filter: blur(4px);
-  color: #fff;
-  font-size: 12px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
-  pointer-events: auto;
-  cursor: pointer;
-}
-
-/* Log & Info: 白色/中性系 */
-.barrage-content.log,
-.barrage-content.info {
-  background: rgb(255 255 255 / 90%);
-  color: #333;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
-}
-
-.barrage-content.log .barrage-type-tag,
-.barrage-content.info .barrage-type-tag {
-  background: rgb(0 0 0 / 10%);
-}
-
-/* Warn: 黄橙色系 */
-.barrage-content.warn {
-  background: rgb(180 100 0 / 75%);
-  box-shadow: 0 0 10px rgb(255 149 0 / 30%);
-}
-
-/* Error & Network: 红色系 */
-.barrage-content.error,
-.barrage-content.network {
-  background: rgb(180 30 20 / 75%);
-  box-shadow: 0 0 10px rgb(255 59 48 / 30%);
-}
-
-/* Debug: 灰色系 */
-.barrage-content.debug {
-  background: rgb(80 80 80 / 75%);
-  box-shadow: 0 0 10px rgb(142 142 147 / 30%);
-}
-
-.barrage-type-tag {
-  font-weight: bold;
-  margin-right: 6px;
-  font-size: 10px;
-  padding: 2px 4px;
-  background: rgb(0 0 0 / 5%);
-  border-radius: 4px;
-}
-
-.barrage-text {
-  max-width: var(--barrage-max-width, 300px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-</style>
+<template>
+  <view class="barrage-item" :style="itemStyle" @animationend="onAnimationEnd">
+    <view class="barrage-content" :class="type">
+      <view class="barrage-type-tag">
+        {{ typeTag }}
+      </view>
+      <view class="barrage-text">{{ text }}</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  text: string;
+  type: string;
+  top: number;
+  duration: number;
+  delay?: number; // 新增延迟属性，毫秒单位
+  maxLength?: number;
+  color?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'remove'): void;
+}>();
+
+const typeTag = computed(() => {
+  const t = props.type.toLowerCase();
+  if (t === 'network') return 'NET';
+  return t.toUpperCase();
+});
+
+const itemStyle = computed(() => ({
+  top: `${props.top}px`,
+  '--barrage-duration': `${props.duration}s`,
+  '--barrage-delay': `${props.delay || 0}ms`,
+  '--barrage-max-width': props.maxLength ? 'none' : '300px',
+  color: props.color || 'inherit',
+}));
+
+function onAnimationEnd() {
+  emit('remove');
+}
+</script>
+
+<style scoped>
+.barrage-item {
+  position: fixed;
+  left: 100%;
+  top: 0;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10001;
+  display: flex;
+  will-change: transform;
+  animation: barrage-move var(--barrage-duration) linear var(--barrage-delay)
+    forwards;
+}
+
+.barrage-item:hover {
+  animation-play-state: paused;
+  z-index: 20000;
+}
+
+@keyframes barrage-move {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(calc(-100vw - 100%));
+  }
+}
+
+.barrage-content {
+  display: flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-radius: 16px;
+  background: rgb(0 0 0 / 60%);
+  backdrop-filter: blur(4px);
+  color: #fff;
+  font-size: 12px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+/* Log & Info: 白色/中性系 */
+.barrage-content.log,
+.barrage-content.info {
+  background: rgb(255 255 255 / 90%);
+  color: #333;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
+}
+
+.barrage-content.log .barrage-type-tag,
+.barrage-content.info .barrage-type-tag {
+  background: rgb(0 0 0 / 10%);
+}
+
+/* Warn: 黄橙色系 */
+.barrage-content.warn {
+  background: rgb(180 100 0 / 75%);
+  box-shadow: 0 0 10px rgb(255 149 0 / 30%);
+}
+
+/* Error & Network: 红色系 */
+.barrage-content.error,
+.barrage-content.network {
+  background: rgb(180 30 20 / 75%);
+  box-shadow: 0 0 10px rgb(255 59 48 / 30%);
+}
+
+/* Debug: 灰色系 */
+.barrage-content.debug {
+  background: rgb(80 80 80 / 75%);
+  box-shadow: 0 0 10px rgb(142 142 147 / 30%);
+}
+
+.barrage-type-tag {
+  font-weight: bold;
+  margin-right: 6px;
+  font-size: 10px;
+  padding: 2px 4px;
+  background: rgb(0 0 0 / 5%);
+  border-radius: 4px;
+}
+
+.barrage-text {
+  max-width: var(--barrage-max-width, 300px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/dist/v3/components/Barrage/index.vue

@@ -1,202 +1,202 @@
-<template>
-  <view
-    v-if="actualVisible"
-    class="barrage-container"
-    :style="{ zIndex: props.zIndex }">
-    <BarrageItem
-      v-for="item in items"
-      :key="item.id"
-      :text="item.text"
-      :type="item.type"
-      :top="item.top"
-      :duration="item.duration"
-      :delay="item.delay"
-      :maxLength="props.maxLength"
-      @remove="removeItem(item.id)" />
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, watch, computed } from 'vue';
-import { onShow, onHide } from '@dcloudio/uni-app';
-import BarrageItem from './BarrageItem.vue';
-
-const props = withDefaults(
-  defineProps<{
-    maxTracks?: number;
-    trackHeight?: number;
-    startTop?: number;
-    duration?: number;
-    maxLength?: number;
-    visible?: boolean;
-    zIndex?: number;
-  }>(),
-  {
-    maxTracks: 10,
-    trackHeight: 36,
-    startTop: 40,
-    duration: 6,
-    maxLength: 100,
-    visible: true,
-    zIndex: 10000,
-  },
-);
-
-const actualVisible = computed(() => props.visible);
-
-const items = ref<
-  {
-    id: number;
-    text: string;
-    type: string;
-    top: number;
-    duration: number;
-    delay: number;
-  }[]
->([]);
-let nextId = 0;
-
-// 页面是否在前台（用于防止页面隐藏时弹幕堆积）
-let isPageActive = true;
-
-// 记录每个轨道的最后一条弹幕开始的时间 + 安全间隔
-const laneNextAvailableTime = ref<number[]>(new Array(props.maxTracks).fill(0));
-const laneLastWidth = ref<number[]>(new Array(props.maxTracks).fill(0));
-
-watch(
-  () => props.maxTracks,
-  (val: number) => {
-    laneNextAvailableTime.value = new Array(val).fill(0);
-    laneLastWidth.value = new Array(val).fill(0);
-  },
-);
-
-const screenWidth = ref(375);
-
-function getBestLane(
-  text: string,
-  duration: number,
-): { index: number; delay: number } {
-  const now = Date.now();
-  const chineseCount = (text.match(/[\u4e00-\u9fa5]/g) || []).length;
-  const emojiCount = (
-    text.match(/[\uD800-\uDBFF][\uDC00-\uDFFF]|\u2600-\u27BF/g) || []
-  ).length;
-  const otherCount = text.length - chineseCount - emojiCount;
-  const estimatedWidth =
-    chineseCount * 14 + emojiCount * 20 + otherCount * 8 + 80;
-
-  let bestLane = 0;
-  let minStartTime = Infinity;
-
-  for (let i = 0; i < props.maxTracks; i++) {
-    const nextCanStart = laneNextAvailableTime.value[i] || 0;
-    if (nextCanStart <= now) {
-      bestLane = i;
-      minStartTime = now;
-      break;
-    }
-    if (nextCanStart < minStartTime) {
-      minStartTime = nextCanStart;
-      bestLane = i;
-    }
-  }
-
-  const startTime = Math.max(now, minStartTime);
-  const delay = startTime - now;
-  const lastWidth = laneLastWidth.value[bestLane] || 0;
-  const s = screenWidth.value || 375;
-
-  const enterTimeNew =
-    (estimatedWidth / ((s + estimatedWidth) / duration)) * 1000;
-  const enterTimePrev = (lastWidth / ((s + lastWidth) / duration)) * 1000;
-  const safeInterval = Math.max(enterTimeNew, enterTimePrev) + 300;
-
-  laneNextAvailableTime.value[bestLane] = startTime + safeInterval;
-  laneLastWidth.value[bestLane] = estimatedWidth;
-
-  return { index: bestLane, delay };
-}
-
-/**
- * 添加一条弹幕 (通用接口)
- * @param text 文字内容
- * @param type 类型，用于区分颜色样式
- */
-function add(text: string, type: string = 'log') {
-  if (!isPageActive || !actualVisible.value) return;
-
-  const id = nextId++;
-  const duration = props.duration;
-
-  let finalText = text;
-  if (finalText.length > props.maxLength) {
-    finalText = finalText.slice(0, props.maxLength) + '...';
-  }
-
-  const { index: laneIndex, delay } = getBestLane(finalText, duration);
-  const top = props.startTop + laneIndex * props.trackHeight;
-
-  items.value.push({
-    id,
-    text: finalText,
-    type,
-    top,
-    duration,
-    delay,
-  });
-}
-
-function removeItem(id: number) {
-  const index = items.value.findIndex((item) => item.id === id);
-  if (index !== -1) {
-    items.value.splice(index, 1);
-  }
-}
-
-/**
- * 清空弹幕
- */
-function clear() {
-  items.value = [];
-  laneNextAvailableTime.value = new Array(props.maxTracks).fill(0);
-  laneLastWidth.value = new Array(props.maxTracks).fill(0);
-}
-
-onMounted(() => {
-  try {
-    const sys = uni.getSystemInfoSync();
-    if (sys.windowWidth) screenWidth.value = sys.windowWidth;
-  } catch (_err) {
-    // 降级使用 375 默认宽度
-  }
-});
-
-onShow(() => {
-  isPageActive = true;
-  clear();
-});
-
-onHide(() => {
-  isPageActive = false;
-  items.value = [];
-});
-
-defineExpose({
-  add,
-  clear,
-});
-</script>
-
-<style scoped>
-.barrage-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10000;
-  overflow: hidden;
-}
-</style>
+<template>
+  <view
+    v-if="actualVisible"
+    class="barrage-container"
+    :style="{ zIndex: props.zIndex }">
+    <BarrageItem
+      v-for="item in items"
+      :key="item.id"
+      :text="item.text"
+      :type="item.type"
+      :top="item.top"
+      :duration="item.duration"
+      :delay="item.delay"
+      :maxLength="props.maxLength"
+      @remove="removeItem(item.id)" />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from 'vue';
+import { onShow, onHide } from '@dcloudio/uni-app';
+import BarrageItem from './BarrageItem.vue';
+
+const props = withDefaults(
+  defineProps<{
+    maxTracks?: number;
+    trackHeight?: number;
+    startTop?: number;
+    duration?: number;
+    maxLength?: number;
+    visible?: boolean;
+    zIndex?: number;
+  }>(),
+  {
+    maxTracks: 10,
+    trackHeight: 36,
+    startTop: 40,
+    duration: 6,
+    maxLength: 100,
+    visible: true,
+    zIndex: 10000,
+  },
+);
+
+const actualVisible = computed(() => props.visible);
+
+const items = ref<
+  {
+    id: number;
+    text: string;
+    type: string;
+    top: number;
+    duration: number;
+    delay: number;
+  }[]
+>([]);
+let nextId = 0;
+
+// 页面是否在前台（用于防止页面隐藏时弹幕堆积）
+let isPageActive = true;
+
+// 记录每个轨道的最后一条弹幕开始的时间 + 安全间隔
+const laneNextAvailableTime = ref<number[]>(new Array(props.maxTracks).fill(0));
+const laneLastWidth = ref<number[]>(new Array(props.maxTracks).fill(0));
+
+watch(
+  () => props.maxTracks,
+  (val: number) => {
+    laneNextAvailableTime.value = new Array(val).fill(0);
+    laneLastWidth.value = new Array(val).fill(0);
+  },
+);
+
+const screenWidth = ref(375);
+
+function getBestLane(
+  text: string,
+  duration: number,
+): { index: number; delay: number } {
+  const now = Date.now();
+  const chineseCount = (text.match(/[\u4e00-\u9fa5]/g) || []).length;
+  const emojiCount = (
+    text.match(/[\uD800-\uDBFF][\uDC00-\uDFFF]|\u2600-\u27BF/g) || []
+  ).length;
+  const otherCount = text.length - chineseCount - emojiCount;
+  const estimatedWidth =
+    chineseCount * 14 + emojiCount * 20 + otherCount * 8 + 80;
+
+  let bestLane = 0;
+  let minStartTime = Infinity;
+
+  for (let i = 0; i < props.maxTracks; i++) {
+    const nextCanStart = laneNextAvailableTime.value[i] || 0;
+    if (nextCanStart <= now) {
+      bestLane = i;
+      minStartTime = now;
+      break;
+    }
+    if (nextCanStart < minStartTime) {
+      minStartTime = nextCanStart;
+      bestLane = i;
+    }
+  }
+
+  const startTime = Math.max(now, minStartTime);
+  const delay = startTime - now;
+  const lastWidth = laneLastWidth.value[bestLane] || 0;
+  const s = screenWidth.value || 375;
+
+  const enterTimeNew =
+    (estimatedWidth / ((s + estimatedWidth) / duration)) * 1000;
+  const enterTimePrev = (lastWidth / ((s + lastWidth) / duration)) * 1000;
+  const safeInterval = Math.max(enterTimeNew, enterTimePrev) + 300;
+
+  laneNextAvailableTime.value[bestLane] = startTime + safeInterval;
+  laneLastWidth.value[bestLane] = estimatedWidth;
+
+  return { index: bestLane, delay };
+}
+
+/**
+ * 添加一条弹幕 (通用接口)
+ * @param text 文字内容
+ * @param type 类型，用于区分颜色样式
+ */
+function add(text: string, type: string = 'log') {
+  if (!isPageActive || !actualVisible.value) return;
+
+  const id = nextId++;
+  const duration = props.duration;
+
+  let finalText = text;
+  if (finalText.length > props.maxLength) {
+    finalText = finalText.slice(0, props.maxLength) + '...';
+  }
+
+  const { index: laneIndex, delay } = getBestLane(finalText, duration);
+  const top = props.startTop + laneIndex * props.trackHeight;
+
+  items.value.push({
+    id,
+    text: finalText,
+    type,
+    top,
+    duration,
+    delay,
+  });
+}
+
+function removeItem(id: number) {
+  const index = items.value.findIndex((item) => item.id === id);
+  if (index !== -1) {
+    items.value.splice(index, 1);
+  }
+}
+
+/**
+ * 清空弹幕
+ */
+function clear() {
+  items.value = [];
+  laneNextAvailableTime.value = new Array(props.maxTracks).fill(0);
+  laneLastWidth.value = new Array(props.maxTracks).fill(0);
+}
+
+onMounted(() => {
+  try {
+    const sys = uni.getSystemInfoSync();
+    if (sys.windowWidth) screenWidth.value = sys.windowWidth;
+  } catch (_err) {
+    // 降级使用 375 默认宽度
+  }
+});
+
+onShow(() => {
+  isPageActive = true;
+  clear();
+});
+
+onHide(() => {
+  isPageActive = false;
+  items.value = [];
+});
+
+defineExpose({
+  add,
+  clear,
+});
+</script>
+
+<style scoped>
+.barrage-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10000;
+  overflow: hidden;
+}
+</style>