vite-uni-dev-tool 1.1.0 → 1.2.1

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

@@ -1,137 +1,194 @@
-<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"
+      :style="contentStyle"
+      @mousedown.stop="onTouchStart"
+      @mousemove.stop="onTouchMove"
+      @mouseup.stop="onTouchEnd"
+      @mouseleave.stop="onTouchEnd"
+      @touchstart.stop="onTouchStart"
+      @touchmove.stop.prevent="onTouchMove"
+      @touchend.stop="onTouchEnd"
+      @touchcancel.stop="onTouchEnd">
+      <view class="barrage-type-tag">
+        {{ typeTag }}
+      </view>
+      <view class="barrage-text">{{ text }}</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+const props = defineProps<{
+  text: string;
+  type: string;
+  top: number;
+  duration: number;
+  delay?: number; // 毫秒单位
+  maxLength?: number;
+  color?: string;
+  allowDrag?: boolean; // 是否允许拖动
+}>();
+
+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',
+  'animation-play-state': isPaused.value ? 'paused' : 'running', // 支持触控暂停
+}));
+
+function onAnimationEnd() {
+  emit('remove');
+}
+
+// 触屏滑动/鼠标拖拽时暂停动画并支持拖拽
+const isPaused = ref(false);
+const transformOffset = ref(0);
+let startX = 0;
+let lastOffset = 0;
+
+function getClientX(e: TouchEvent | MouseEvent) {
+  if (
+    typeof (e as TouchEvent).touches !== 'undefined' &&
+    (e as TouchEvent).touches.length > 0
+  ) {
+    return (
+      (e as TouchEvent).touches[0].pageX || (e as TouchEvent).touches[0].clientX
+    );
+  }
+  return (e as MouseEvent).pageX || (e as MouseEvent).clientX || 0;
+}
+
+function onTouchStart(e: TouchEvent | MouseEvent) {
+  isPaused.value = true;
+  if (props.allowDrag === false) return; // 不允许拖动时直接返回
+  startX = getClientX(e);
+  lastOffset = transformOffset.value;
+}
+
+function onTouchMove(e: TouchEvent | MouseEvent) {
+  if (props.allowDrag === false || !isPaused.value) return;
+  const currentX = getClientX(e);
+  if (currentX === 0) return; // 防止无效的移动触发跳动
+  const deltaX = currentX - startX;
+  transformOffset.value = lastOffset + deltaX;
+}
+
+function onTouchEnd() {
+  isPaused.value = false;
+}
+
+const contentStyle = computed(() => ({
+  transform: `translateX(${transformOffset.value}px)`,
+}));
+</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-name: barrage-move;
+  animation-duration: var(--barrage-duration);
+  animation-timing-function: linear;
+  animation-delay: var(--barrage-delay);
+  animation-fill-mode: forwards;
+}
+
+.barrage-item:hover {
+  animation-play-state: paused !important;
+  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;
+  flex-shrink: 0; /* 保证标签不被压缩 */
+}
+
+/* 移除截断，使其完整展示，通过滑动外面来查看 */
+.barrage-text {
+  white-space: nowrap;
+}
+</style>