vite-uni-dev-tool 1.2.0 → 1.2.2

package/dist/v3/DevTool/index.vue

@@ -1,11 +1,12 @@
 <template>
   <view data-dev-tool :class="`dev-tool dev-tool-${theme}`">
+    <!-- are you ok ? -->
     <DevToolButton
-      v-if="devToolButtonVisible"
       :zIndex="zIndex"
       :customStyle="customStyle"
       :contentHeight="contentHeight"
       :devToolVersion="devToolVersion"
+      :devToolButtonVisible="devToolButtonVisible"
       @click="onDevToolButtonClick" />
 
     <DevToolWindow
@@ -41,6 +42,7 @@
     <!-- Barrage -->
     <Barrage
       ref="barrageRef"
+      :allowDrag="windowData.barrageAllowDrag"
       :zIndex="zIndex + 100"
       :maxTracks="windowData.barrageMaxTracks"
       :trackHeight="windowData.barrageTrackHeight"
@@ -231,147 +233,94 @@ function onSendMessage(param: { type: string; data: Record<string, any> }) {
   sendCommand(param.type, param.data);
 }
 
-function onDevOptionSend(data: DevTool.WindowData) {
-  if (data) {
-    // 采用合并策略而不是直接替换，防止丢失部分本地状态
-    windowData.value = { ...windowData.value, ...data };
-
-    if (data.devToolVersion !== undefined)
-      devToolVersion.value = data.devToolVersion;
-
-    if (data.sourceFileServers !== undefined)
-      sourceFileServers.value = data.sourceFileServers;
-
-    if (data.mode !== undefined) mode.value = data.mode;
-
-    if (data.useDevSource !== undefined) useDevSource.value = data.useDevSource;
-
-    if (data.zIndex !== undefined) zIndex.value = data.zIndex;
-
-    if (data.baseFontSize !== undefined) baseFontSize.value = data.baseFontSize;
-
-    if (data.tagFontSize !== undefined) tagFontSize.value = data.tagFontSize;
-    if (data.tipsFontSize !== undefined) tipsFontSize.value = data.tipsFontSize;
-    if (data.fontFamily !== undefined) fontFamily.value = data.fontFamily;
-    if (data.fontWeight !== undefined) fontWeight.value = data.fontWeight;
-    if (data.performanceVisible !== undefined)
-      performanceVisible.value = data.performanceVisible;
-
-    // 弹幕配置
-    if (data.barrageVisible !== undefined)
-      windowData.value.barrageVisible = data.barrageVisible;
-    if (data.barrageShowWhenOpen !== undefined)
-      windowData.value.barrageShowWhenOpen = data.barrageShowWhenOpen;
-    if (data.barrageMaxTracks !== undefined)
-      windowData.value.barrageMaxTracks = data.barrageMaxTracks;
-    if (data.barrageTrackHeight !== undefined)
-      windowData.value.barrageTrackHeight = data.barrageTrackHeight;
-    if (data.barrageStartTop !== undefined)
-      windowData.value.barrageStartTop = data.barrageStartTop;
-    if (data.barrageDuration !== undefined)
-      windowData.value.barrageDuration = data.barrageDuration;
-    if (data.barrageMaxLength !== undefined)
-      windowData.value.barrageMaxLength = data.barrageMaxLength;
-
-    if (data.barrageTypes !== undefined) {
-      if (Array.isArray(data.barrageTypes)) {
-        windowData.value.barrageTypes = data.barrageTypes;
-      } else {
-        console.warn(
-          '[DevTool] Received invalid barrageTypes in windowData:',
-          data.barrageTypes,
-        );
-      }
-    }
-  }
-}
-
-function onChangeTheme(t: string) {
+const onChangeTheme = (t: string) => {
   theme.value = t;
-}
+};
 
-/**
- * 处理来自核心模块的消息
- */
-// 处理消息
-function handleCoreMessage(msg: any) {
-  let type, data;
-  try {
-    const payload = typeof msg === 'string' ? JSON.parse(msg) : msg;
-    type = payload.type;
-    data = payload.data;
-  } catch (e) {
-    console.error('DevTool parse error', e);
-    return;
+const onDevOptionSend = (data: DevTool.WindowData) => {
+  if (!data) return;
+  windowData.value = { ...windowData.value, ...data };
+
+  if (data.devToolVersion !== undefined)
+    devToolVersion.value = data.devToolVersion;
+  if (data.sourceFileServers !== undefined)
+    sourceFileServers.value = data.sourceFileServers;
+  if (data.mode !== undefined) mode.value = data.mode;
+  if (data.useDevSource !== undefined) {
+    useDevSource.value =
+      (data.useDevSource as any) === 'undefined' ? false : !!data.useDevSource;
   }
+  if (data.zIndex !== undefined) zIndex.value = data.zIndex;
+  if (data.baseFontSize !== undefined) baseFontSize.value = data.baseFontSize;
+  if (data.tagFontSize !== undefined) tagFontSize.value = data.tagFontSize;
+  if (data.tipsFontSize !== undefined) tipsFontSize.value = data.tipsFontSize;
+  if (data.fontFamily !== undefined) fontFamily.value = data.fontFamily;
+  if (data.fontWeight !== undefined) fontWeight.value = data.fontWeight;
+  if (data.performanceVisible !== undefined)
+    performanceVisible.value = data.performanceVisible;
+
+  const barrageKeys: (keyof DevTool.WindowData)[] = [
+    'barrageVisible',
+    'barrageShowWhenOpen',
+    'barrageMaxTracks',
+    'barrageTrackHeight',
+    'barrageStartTop',
+    'barrageDuration',
+    'barrageMaxLength',
+    'barrageTypes',
+  ];
+  barrageKeys.forEach((k) => {
+    if (data[k] !== undefined) (windowData.value as any)[k] = data[k];
+  });
+};
 
-  // 避免 DevToolWindow 处理同样的数据消息（如果是广播的话）
-  // 注意：DevToolWindow 也会收到这个消息并在内部处理
-
-  switch (type) {
-    case MSG_TYPE.BUTTON_VISIBLE:
-      onShowDevToolButton(data);
-      break;
-    case MSG_TYPE.WINDOW_VISIBLE:
-      onShowDevToolWindow(data);
-      break;
-    case MSG_TYPE.PERF_VISIBLE:
-      performanceVisible.value = data;
-      break;
-    case MSG_TYPE.DATA_UPDATE:
-    case MSG_TYPE.OPTION_UPDATE:
-      onDevOptionSend(data);
-      break;
-    case MSG_TYPE.BARRAGE_VISIBLE:
-      windowData.value.barrageVisible = data;
-      break;
-    case MSG_TYPE.BARRAGE_SHOW_WHEN_OPEN:
-      windowData.value.barrageShowWhenOpen = data;
-      break;
-    case MSG_TYPE.BARRAGE_ADD:
-      if (barrageFinalVisible.value && barrageRef.value) {
-        const itemsList = data.items || [];
-        itemsList.forEach((item: any) => {
-          // 检查类型是否在允许列表中
-          if (!windowData.value.barrageTypes?.includes(item.type || 'log'))
-            return;
-
-          if (item.type === 'network') {
-            const status = item.status;
-            // 异常定义：已完成（非 pending）且 (状态码非 2xx 或 为 'ERR')
-            const isPending = status === 'pending';
-            const isSuccess =
-              typeof status === 'number'
-                ? status >= 200 && status < 300
-                : typeof status === 'string' && /^[2]\d{2}$/.test(status);
-
-            if (!isPending && !isSuccess) {
-              barrageRef.value.add(
-                `[${item.method || 'GET'}] ${status} - ${item.url}`,
-                'network',
-              );
-            }
-          } else if (item.type === 'transfer') {
-            barrageRef.value.add(`Transfer Failed: ${item.url}`, 'error');
-          } else if (item.type === 'websocket') {
-            barrageRef.value.add(`WS: ${item.data}`, 'info');
-          } else {
-            const args = item.args || [];
-            const text = args
-              .map((arg: any) =>
-                typeof arg?.value === 'string'
-                  ? arg.value
-                  : JSON.stringify(arg?.value ?? ''),
-              )
-              .join(' ');
-            barrageRef.value.add(text, item.type || 'log');
-          }
-        });
-      }
-      break;
-    // ... 其他消息处理
-  }
-}
+const handleCoreMessage = (msg: any) => {
+  const { type, data } = typeof msg === 'string' ? JSON.parse(msg) : msg;
+
+  const handlers: Record<string, () => void> = {
+    [MSG_TYPE.BUTTON_VISIBLE]: () => onShowDevToolButton(data),
+    [MSG_TYPE.WINDOW_VISIBLE]: () => onShowDevToolWindow(data),
+    [MSG_TYPE.PERF_VISIBLE]: () => (performanceVisible.value = data),
+    [MSG_TYPE.DATA_UPDATE]: () => onDevOptionSend(data),
+    [MSG_TYPE.OPTION_UPDATE]: () => onDevOptionSend(data),
+    [MSG_TYPE.BARRAGE_VISIBLE]: () => (windowData.value.barrageVisible = data),
+    [MSG_TYPE.BARRAGE_SHOW_WHEN_OPEN]: () =>
+      (windowData.value.barrageShowWhenOpen = data),
+    [MSG_TYPE.BARRAGE_ADD]: () => {
+      if (!barrageFinalVisible.value || !barrageRef.value) return;
+      (data.items || []).forEach((item: any) => {
+        if (!windowData.value.barrageTypes?.includes(item.type || 'log'))
+          return;
+        if (item.type === 'network') {
+          if (item.status === 'pending') return;
+          const ok =
+            typeof item.status === 'number'
+              ? item.status < 300
+              : !/ERR/.test(item.status);
+          if (!ok)
+            barrageRef.value.add(
+              `[${item.method || 'GET'}] ${item.status} - ${item.url}`,
+              'network',
+            );
+        } else if (item.type === 'transfer') {
+          barrageRef.value.add(`Transfer Failed: ${item.url}`, 'error');
+        } else if (item.type === 'websocket') {
+          barrageRef.value.add(`WS: ${item.data}`, 'info');
+        } else {
+          const text = (item.args || [])
+            .map((a: any) =>
+              typeof a?.value === 'string'
+                ? a.value
+                : JSON.stringify(a?.value ?? ''),
+            )
+            .join(' ');
+          barrageRef.value.add(text, item.type || 'log');
+        }
+      });
+    },
+  };
+  handlers[type]?.();
+};
 
 onBeforeMount(() => {
   const devToolInfo = getDevToolInfo();

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

@@ -64,76 +64,56 @@ const mergedStyle = computed(() => {
 });
 
 const transitionStyle = computed(() => {
-  const styles: Record<string, string> = {
+  const active = isActive.value && !isLeaving.value;
+  const { x = 0, y = 0 } = props.origin || {};
+  const s: Record<string, string> = {
     transition: props.animated
       ? 'transform var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing), clip-path var(--transition-duration) var(--transition-timing)'
       : 'none',
   };
 
-  const active = isActive.value && !isLeaving.value;
-  const x = props.origin?.x || 0;
-  const y = props.origin?.y || 0;
-
-  if (props.origin) {
-    styles.transformOrigin = `${x}px ${y}px`;
-  }
-
-  if (props.name === 'fade') {
-    styles.opacity = active ? '1' : '0';
-  } else if (props.name === 'slide-bottom') {
-    styles.transform = active ? 'translateY(0)' : 'translateY(100%)';
-  } else if (props.name === 'slide-top') {
-    styles.transform = active ? 'translateY(0)' : 'translateY(-100%)';
-  } else if (props.name === 'slide-left') {
-    styles.transform = active ? 'translateX(0)' : 'translateX(-100%)';
-  } else if (props.name === 'slide-right') {
-    styles.transform = active ? 'translateX(0)' : 'translateX(100%)';
-  } else if (props.name === 'zoom') {
-    styles.transform = active ? 'scale(1)' : 'scale(0)';
-    styles.opacity = active ? '1' : '0';
-  } else if (props.name === 'reveal') {
-    styles.clipPath = active
-      ? `circle(150% at ${x}px ${y}px)`
-      : `circle(0% at ${x}px ${y}px)`;
+  if (props.origin) s.transformOrigin = `${x}px ${y}px`;
+
+  const name = props.name || 'fade';
+  if (name === 'fade') s.opacity = active ? '1' : '0';
+  else if (name === 'zoom') {
+    s.transform = `scale(${active ? 1 : 0})`;
+    s.opacity = active ? '1' : '0';
+  } else if (name === 'reveal')
+    s.clipPath = `circle(${active ? '150%' : '0%'} at ${x}px ${y}px)`;
+  else if (name.startsWith('slide-')) {
+    const dir = name.replace('slide-', '');
+    const axis = dir === 'left' || dir === 'right' ? 'X' : 'Y';
+    const val = dir === 'left' || dir === 'top' ? '-100%' : '100%';
+    s.transform = `translate${axis}(${active ? 0 : val})`;
   }
-
-  return styles;
+  return s;
 });
 
 watch(
   () => props.show,
-  (val, oldVal) => {
+  (val, old) => {
     if (val) {
       renderShow.value = true;
       isLeaving.value = false;
-
-      if (!props.animated) {
-        isActive.value = true;
-        emit('after-enter');
-        return;
-      }
-
-      // 必须分两步：1. 插入DOM 2. 触发Transition
-      nextTick(() => {
+      if (!props.animated)
+        return ((isActive.value = true), emit('after-enter'));
+      nextTick(() =>
         setTimeout(() => {
           isActive.value = true;
-          const duration = props.animated ? props.duration : 0;
-          setTimeout(() => {
-            emit('after-enter');
-          }, duration);
-        }, 30);
-      });
-    } else if (oldVal !== undefined) {
+          setTimeout(() => emit('after-enter'), props.duration);
+        }, 30),
+      );
+    } else if (old !== undefined) {
       isLeaving.value = true;
       isActive.value = false;
-
-      const duration = props.animated ? props.duration : 0;
-
-      setTimeout(() => {
-        renderShow.value = false;
-        isLeaving.value = false;
-        emit('after-leave');
-      }, duration);
+      setTimeout(
+        () => {
+          renderShow.value = isLeaving.value = false;
+          emit('after-leave');
+        },
+        props.animated ? props.duration : 0,
+      );
     }
   },
   { immediate: true },

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

@@ -1,6 +1,17 @@
 <template>
   <view class="barrage-item" :style="itemStyle" @animationend="onAnimationEnd">
-    <view class="barrage-content" :class="type">
+    <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>
@@ -10,16 +21,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps<{
   text: string;
   type: string;
   top: number;
   duration: number;
-  delay?: number; // 新增延迟属性，毫秒单位
+  delay?: number; // 毫秒单位
   maxLength?: number;
   color?: string;
+  allowDrag?: boolean; // 是否允许拖动
 }>();
 
 const emit = defineEmits<{
@@ -38,11 +50,53 @@ const itemStyle = computed(() => ({
   '--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>
@@ -55,12 +109,15 @@ function onAnimationEnd() {
   z-index: 10001;
   display: flex;
   will-change: transform;
-  animation: barrage-move var(--barrage-duration) linear var(--barrage-delay)
-    forwards;
+  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;
+  animation-play-state: paused !important;
   z-index: 20000;
 }
 
@@ -127,11 +184,11 @@ function onAnimationEnd() {
   padding: 2px 4px;
   background: rgb(0 0 0 / 5%);
   border-radius: 4px;
+  flex-shrink: 0; /* 保证标签不被压缩 */
 }
 
+/* 移除截断，使其完整展示，通过滑动外面来查看 */
 .barrage-text {
-  max-width: var(--barrage-max-width, 300px);
-  overflow: hidden;
-  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>

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

@@ -12,6 +12,7 @@
       :duration="item.duration"
       :delay="item.delay"
       :maxLength="props.maxLength"
+      :allowDrag="props.allowDrag"
       @remove="removeItem(item.id)" />
   </view>
 </template>
@@ -30,6 +31,7 @@ const props = withDefaults(
     maxLength?: number;
     visible?: boolean;
     zIndex?: number;
+    allowDrag?: boolean;
   }>(),
   {
     maxTracks: 10,
@@ -39,6 +41,7 @@ const props = withDefaults(
     maxLength: 100,
     visible: true,
     zIndex: 10000,
+    allowDrag: true,
   },
 );
 

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

@@ -67,8 +67,8 @@ const handleError = (err: any, info?: string) => {
     err?.stack || err?.message || err?.toString() || 'Unknown Error';
 
   // 手动打印到控制台
-  console.error(`[ErrorBoundary]`, err);
-  if (info) console.warn(`[ErrorBoundary] Info: ${info}`);
+  console.error('[ErrorBoundary]', err);
+  if (info) console.warn('[ErrorBoundary] Info: ' + info);
 
   // 强制下一帧显示
   nextTick(() => {
@@ -77,8 +77,8 @@ const handleError = (err: any, info?: string) => {
 };
 
 onMounted(() => {
-  // #ifndef H5
   // 在非 H5 环境（小程序、APP），由于 onErrorCaptured 可能失效，启用全局监听作为核心捕获方案
+  // #ifndef H5
   const mountedPath = getCurrentPagePath();
   uni.$on(DEV_ERROR_BOUNDARY_TRIGGER, (data: any) => {
     const currentPath = getCurrentPagePath();
@@ -148,7 +148,11 @@ defineExpose({
   width: 400rpx;
   height: 400rpx;
   border-radius: 50%;
-  background: radial-gradient(circle, rgb(255 77 79 / 5%) 0%, transparent 70%);
+  background: radial-gradient(
+    circle,
+    rgb(255 77 79 / 5%) 0%,
+    transparent 70%
+  );
   top: -100rpx;
   right: -100rpx;
   z-index: 1;
@@ -159,7 +163,11 @@ defineExpose({
   width: 300rpx;
   height: 300rpx;
   border-radius: 50%;
-  background: radial-gradient(circle, rgb(24 144 255 / 5%) 0%, transparent 70%);
+  background: radial-gradient(
+    circle,
+    rgb(24 144 255 / 5%) 0%,
+    transparent 70%
+  );
   bottom: -50rpx;
   left: -50rpx;
   z-index: 1;