vite-uni-dev-tool 1.0.0 → 1.1.0

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

@@ -0,0 +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>

package/dist/v3/{CircularButton → components/CircularButton}/index.vue

@@ -1,84 +1,84 @@
-<template>
-  <view
-    class="circular-button"
-    :style="[computedStyle, customStyle]"
-    @click="onClick">
-    <slot>{{ text }}</slot>
-  </view>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-const props = withDefaults(
-  defineProps<{
-    text?: string;
-    customStyle?: string | Record<string, any>;
-    size?: string | number;
-    type?: 'default' | 'primary' | 'warn' | 'error';
-  }>(),
-  {
-    text: '',
-    size: '22px',
-    type: 'default',
-  },
-);
-
-const emit = defineEmits<{
-  (e: 'click', event: MouseEvent | TouchEvent): void;
-}>();
-
-const computedStyle = computed(() => {
-  const sizeValue =
-    typeof props.size === 'number' ? `${props.size}px` : props.size;
-  return {
-    width: sizeValue,
-    height: sizeValue,
-    fontSize: `calc(${sizeValue} * 0.6)`,
-  };
-});
-
-function onClick(e: MouseEvent | TouchEvent) {
-  emit('click', e);
-}
-</script>
-
-<style scoped>
-.circular-button {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  border: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-  color: var(--dev-tool-text-color);
-  cursor: pointer;
-  user-select: none;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  pointer-events: auto;
-  background-color: transparent;
-  line-height: 1;
-}
-
-/* Hover state - using active bg color for consistency */
-@media (hover: hover) {
-  .circular-button:hover {
-    background-color: var(--dev-tool-active-bg-color);
-    border-color: var(--dev-tool-text-color);
-    opacity: 0.9;
-  }
-}
-
-.circular-button:active {
-  transform: scale(0.85);
-  background-color: var(--dev-tool-active-bg-color);
-  opacity: 1;
-}
-
-/* Different types if needed */
-.circular-button-primary {
-  color: var(--dev-tool-main-color);
-  border-color: var(--dev-tool-main-color);
-}
-</style>
+<template>
+  <view
+    class="circular-button"
+    :style="[computedStyle, customStyle]"
+    @click="onClick">
+    <slot>{{ text }}</slot>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    text?: string;
+    customStyle?: string | Record<string, any>;
+    size?: string | number;
+    type?: 'default' | 'primary' | 'warn' | 'error';
+  }>(),
+  {
+    text: '',
+    size: '22px',
+    type: 'default',
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent | TouchEvent): void;
+}>();
+
+const computedStyle = computed(() => {
+  const sizeValue =
+    typeof props.size === 'number' ? `${props.size}px` : props.size;
+  return {
+    width: sizeValue,
+    height: sizeValue,
+    fontSize: `calc(${sizeValue} * 0.6)`,
+  };
+});
+
+function onClick(e: MouseEvent | TouchEvent) {
+  emit('click', e);
+}
+</script>
+
+<style scoped>
+.circular-button {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+  color: var(--dev-tool-text-color);
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: auto;
+  background-color: transparent;
+  line-height: 1;
+}
+
+/* Hover state - using active bg color for consistency */
+@media (hover: hover) {
+  .circular-button:hover {
+    background-color: var(--dev-tool-active-bg-color);
+    border-color: var(--dev-tool-text-color);
+    opacity: 0.9;
+  }
+}
+
+.circular-button:active {
+  transform: scale(0.85);
+  background-color: var(--dev-tool-active-bg-color);
+  opacity: 1;
+}
+
+/* Different types if needed */
+.circular-button-primary {
+  color: var(--dev-tool-main-color);
+  border-color: var(--dev-tool-main-color);
+}
+</style>

package/dist/v3/{CustomSwiper → components/CustomSwiper}/CustomSwiperItem.vue

@@ -1,49 +1,49 @@
-<template>
-  <view class="custom-swiper-item" :style="customStyle">
-    <slot></slot>
-  </view>
-</template>
-
-<script lang="ts">
-export default {
-  options: {
-    virtualHost: true, // 开启虚拟节点，使组件标签不渲染，属性直接透传
-  },
-};
-</script>
-
-<script setup lang="ts">
-defineProps<{
-  customStyle?: string | Record<string, any>;
-}>();
-</script>
-
-<style scoped>
-.custom-swiper-item {
-  flex-shrink: 0;
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  box-sizing: border-box;
-
-  /* 解决模糊问题 */
-  backface-visibility: hidden;
-  transform: translateZ(0);
-}
-
-/* #ifdef H5 || APP-PLUS */
-.custom-swiper-item::-webkit-scrollbar {
-  display: none;
-  width: 0;
-  height: 0;
-  background-color: transparent;
-}
-
-.custom-swiper-item::-webkit-scrollbar-thumb {
-  width: 0;
-  height: 0;
-  background-color: transparent;
-}
-
-/* #endif */
-</style>
+<template>
+  <view class="custom-swiper-item" :style="customStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true, // 开启虚拟节点，使组件标签不渲染，属性直接透传
+  },
+};
+</script>
+
+<script setup lang="ts">
+defineProps<{
+  customStyle?: string | Record<string, any>;
+}>();
+</script>
+
+<style scoped>
+.custom-swiper-item {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+
+  /* 解决模糊问题 */
+  backface-visibility: hidden;
+  transform: translateZ(0);
+}
+
+/* #ifdef H5 || APP-PLUS */
+.custom-swiper-item::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+
+.custom-swiper-item::-webkit-scrollbar-thumb {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+
+/* #endif */
+</style>

package/dist/v3/{CustomSwiper → components/CustomSwiper}/index.vue

@@ -1,104 +1,104 @@
-<template>
-  <view
-    class="custom-swiper"
-    @touchstart="onTouchStart"
-    @touchend="onTouchEnd"
-    @mousedown="onMouseDown"
-    @mouseup="onMouseUp"
-    @mouseleave="onMouseLeave">
-    <view class="custom-swiper-wrapper" :style="wrapperStyle">
-      <slot></slot>
-    </view>
-  </view>
-</template>
-<script lang="ts">
-export default {
-  options: {
-    virtualHost: true, // 开启虚拟节点，使组件标签不渲染，属性直接透传
-  },
-};
-</script>
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
-const props = defineProps<{
-  modelValue: number;
-  itemCount: number;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: number): void;
-  (e: 'change', value: number): void;
-}>();
-
-const touchStart = ref({ x: 0, y: 0 });
-
-const isDragging = ref(false);
-
-const wrapperStyle = computed(() => ({
-  transform: `translateX(-${props.modelValue * 100}%)`,
-}));
-
-// 统一处理滑动逻辑
-function handleSwipe(deltaX: number, deltaY: number) {
-  if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
-    if (deltaX > 0 && props.modelValue > 0) {
-      const next = props.modelValue - 1;
-      emit('update:modelValue', next);
-      emit('change', next);
-    } else if (deltaX < 0 && props.modelValue < props.itemCount - 1) {
-      const next = props.modelValue + 1;
-      emit('update:modelValue', next);
-      emit('change', next);
-    }
-  }
-}
-
-// 触摸事件处理
-function onTouchStart(e: TouchEvent) {
-  const touch = e.touches[0];
-  touchStart.value = { x: touch.clientX, y: touch.clientY };
-}
-
-function onTouchEnd(e: TouchEvent) {
-  const touch = e.changedTouches[0];
-  const deltaX = touch.clientX - touchStart.value.x;
-  const deltaY = touch.clientY - touchStart.value.y;
-  handleSwipe(deltaX, deltaY);
-}
-
-// 鼠标事件处理
-function onMouseDown(e: MouseEvent) {
-  isDragging.value = true;
-  touchStart.value = { x: e.clientX, y: e.clientY };
-}
-
-function onMouseUp(e: MouseEvent) {
-  if (!isDragging.value) return;
-  isDragging.value = false;
-  const deltaX = e.clientX - touchStart.value.x;
-  const deltaY = e.clientY - touchStart.value.y;
-  handleSwipe(deltaX, deltaY);
-}
-
-function onMouseLeave() {
-  isDragging.value = false;
-}
-</script>
-
-<style scoped>
-.custom-swiper {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-}
-
-.custom-swiper-wrapper {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  will-change: transform;
-}
-</style>
+<template>
+  <view
+    class="custom-swiper"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd"
+    @mousedown="onMouseDown"
+    @mouseup="onMouseUp"
+    @mouseleave="onMouseLeave">
+    <view class="custom-swiper-wrapper" :style="wrapperStyle">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true, // 开启虚拟节点，使组件标签不渲染，属性直接透传
+  },
+};
+</script>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+const props = defineProps<{
+  modelValue: number;
+  itemCount: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void;
+  (e: 'change', value: number): void;
+}>();
+
+const touchStart = ref({ x: 0, y: 0 });
+
+const isDragging = ref(false);
+
+const wrapperStyle = computed(() => ({
+  transform: `translateX(-${props.modelValue * 100}%)`,
+}));
+
+// 统一处理滑动逻辑
+function handleSwipe(deltaX: number, deltaY: number) {
+  if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
+    if (deltaX > 0 && props.modelValue > 0) {
+      const next = props.modelValue - 1;
+      emit('update:modelValue', next);
+      emit('change', next);
+    } else if (deltaX < 0 && props.modelValue < props.itemCount - 1) {
+      const next = props.modelValue + 1;
+      emit('update:modelValue', next);
+      emit('change', next);
+    }
+  }
+}
+
+// 触摸事件处理
+function onTouchStart(e: TouchEvent) {
+  const touch = e.touches[0];
+  touchStart.value = { x: touch.clientX, y: touch.clientY };
+}
+
+function onTouchEnd(e: TouchEvent) {
+  const touch = e.changedTouches[0];
+  const deltaX = touch.clientX - touchStart.value.x;
+  const deltaY = touch.clientY - touchStart.value.y;
+  handleSwipe(deltaX, deltaY);
+}
+
+// 鼠标事件处理
+function onMouseDown(e: MouseEvent) {
+  isDragging.value = true;
+  touchStart.value = { x: e.clientX, y: e.clientY };
+}
+
+function onMouseUp(e: MouseEvent) {
+  if (!isDragging.value) return;
+  isDragging.value = false;
+  const deltaX = e.clientX - touchStart.value.x;
+  const deltaY = e.clientY - touchStart.value.y;
+  handleSwipe(deltaX, deltaY);
+}
+
+function onMouseLeave() {
+  isDragging.value = false;
+}
+</script>
+
+<style scoped>
+.custom-swiper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.custom-swiper-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+}
+</style>

package/dist/v3/{DraggableContainer → components/DraggableContainer}/index.vue

@@ -33,7 +33,7 @@ export default {
  * 适用于 DevTool 窗口化及悬浮窗展示
  */
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
-import { debounce } from '../../utils';
+import { debounce } from '../../../utils';
 
 const props = withDefaults(
   defineProps<{