vite-uni-dev-tool 1.1.0 → 1.2.1

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

@@ -1,202 +1,205 @@
-<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"
+      :allowDrag="props.allowDrag"
+      @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;
+    allowDrag?: boolean;
+  }>(),
+  {
+    maxTracks: 10,
+    trackHeight: 36,
+    startTop: 40,
+    duration: 6,
+    maxLength: 100,
+    visible: true,
+    zIndex: 10000,
+    allowDrag: true,
+  },
+);
+
+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/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/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>