vite-uni-dev-tool 1.0.0 → 1.2.0

package/dist/v3/DevTool/index.vue

@@ -33,13 +33,29 @@
       :active="isPageActive"
       :FPS="0"></view>
     <!-- #endif -->
+    <!-- SafeArea Preview Mask -->
+    <view
+      v-if="showingSafeArea"
+      class="dev-tool-safe-area-preview"
+      :style="safeAreaStyle"></view>
+    <!-- Barrage -->
+    <Barrage
+      ref="barrageRef"
+      :zIndex="zIndex + 100"
+      :maxTracks="windowData.barrageMaxTracks"
+      :trackHeight="windowData.barrageTrackHeight"
+      :startTop="windowData.barrageStartTop"
+      :duration="windowData.barrageDuration"
+      :maxLength="windowData.barrageMaxLength"
+      :visible="barrageFinalVisible" />
   </view>
 </template>
 
 <script lang="ts">
-import DevToolButton from '../DevToolButton/index.vue';
-import DevToolWindow from '../DevToolWindow/index.vue';
-import PerformanceWidget from '../Performance/modules/PerformanceWidget.vue';
+import DevToolButton from './components/DevToolButton/index.vue';
+import DevToolWindow from './components/DevToolWindow/index.vue';
+import PerformanceWidget from './components/Performance/modules/PerformanceWidget.vue';
+import Barrage from '../components/Barrage/index.vue';
 
 export default {
   __devTool: true,
@@ -47,6 +63,7 @@ export default {
     DevToolButton,
     DevToolWindow,
     PerformanceWidget,
+    Barrage,
   },
 };
 </script>
@@ -81,12 +98,17 @@ const sourceFileServers = ref<string[]>([]);
 
 const mode = ref<string>();
 
+const showingSafeArea = ref(false);
+const safeAreaStyle = ref('');
+
 const zIndex = ref(998);
 
 const useDevSource = ref(false);
 
 const windowOrigin = ref({ x: 0, y: 0 });
 
+const barrageRef = ref<any>(null);
+
 const theme = ref<string>('dark');
 
 const devToolVersion = ref<string>('v0.0.0');
@@ -106,6 +128,14 @@ const baseFontSizePx = computed(() => baseFontSize.value + 'px');
 const tagFontSizePx = computed(() => tagFontSize.value + 'px');
 const tipsFontSizePx = computed(() => tipsFontSize.value + 'px');
 
+const barrageFinalVisible = computed(() => {
+  if (!windowData.value.barrageVisible) return false;
+  // 如果主窗口打开了，且配置为“打开时不显示”，则隐藏
+  if (devToolWindowVisible.value && !windowData.value.barrageShowWhenOpen)
+    return false;
+  return true;
+});
+
 function updateWindowOrigin(pos?: { x: number; y: number }) {
   const { left = 300, top = 500 } = getDevToolInfo();
   let x = left + 50;
@@ -133,6 +163,36 @@ function sendCommand(type: string, data: any = {}) {
   uni.$emit(DEV_UI_MESSAGE, { type, data });
 }
 
+function handleUIMessage(msg: any) {
+  let type, data;
+  try {
+    const payload = typeof msg === 'string' ? JSON.parse(msg) : msg;
+    type = payload.type;
+    data = payload.data;
+  } catch (e) {
+    return;
+  }
+
+  if (type === 'TOGGLE_SAFE_AREA') {
+    renderSafeArea(data);
+  }
+}
+
+function renderSafeArea(show: boolean) {
+  showingSafeArea.value = show;
+  if (show) {
+    if (uni.getWindowInfo) {
+      const info = uni.getWindowInfo();
+      const safeArea = info.safeArea;
+      if (safeArea) {
+        safeAreaStyle.value = `top: ${safeArea.top}px; left: ${safeArea.left}px; width: ${safeArea.width}px; height: ${safeArea.height}px; border: 3px solid #00ff00; background: rgba(0, 255, 0, 0.15);`;
+        return;
+      }
+    }
+    safeAreaStyle.value = `top: env(safe-area-inset-top); bottom: env(safe-area-inset-bottom); left: env(safe-area-inset-left); right: env(safe-area-inset-right); border: 3px solid #00ff00; background: rgba(0, 255, 0, 0.15);`;
+  }
+}
+
 function onDevToolButtonClick(pos: { x: number; y: number }) {
   updateWindowOrigin(pos);
   onShowDevToolWindow(true);
@@ -173,7 +233,8 @@ function onSendMessage(param: { type: string; data: Record<string, any> }) {
 
 function onDevOptionSend(data: DevTool.WindowData) {
   if (data) {
-    windowData.value = data;
+    // 采用合并策略而不是直接替换，防止丢失部分本地状态
+    windowData.value = { ...windowData.value, ...data };
 
     if (data.devToolVersion !== undefined)
       devToolVersion.value = data.devToolVersion;
@@ -195,6 +256,33 @@ function onDevOptionSend(data: DevTool.WindowData) {
     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,
+        );
+      }
+    }
   }
 }
 
@@ -230,9 +318,57 @@ function handleCoreMessage(msg: any) {
     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;
     // ... 其他消息处理
   }
 }
@@ -256,6 +392,23 @@ onBeforeMount(() => {
     fontFamily: fontF = '',
     fontWeight: weightF = 'normal',
     theme: themeF = 'light',
+    showingSafeArea: safeAreaF = false,
+    barrageVisible: barrageVisibleF = true,
+    barrageShowWhenOpen: barrageShowWhenOpenF = false,
+    barrageMaxTracks: maxTracksF = 10,
+    barrageTrackHeight: trackHeightF = 36,
+    barrageStartTop: startTopF = 40,
+    barrageDuration: durationF = 6,
+    barrageMaxLength: maxLengthF = 100,
+    barrageTypes: typesF = [
+      'log',
+      'info',
+      'warn',
+      'error',
+      'network',
+      'transfer',
+      'websocket',
+    ],
   } = getDevToolInfo();
 
   isActive = true;
@@ -264,6 +417,10 @@ onBeforeMount(() => {
   devToolWindowVisible.value = false; // 始终从关闭状态开始
   performanceVisible.value = false; // 始终从关闭状态开始
   windowData.value.performanceVisible = false;
+
+  if (safeAreaF) {
+    renderSafeArea(safeAreaF);
+  }
   baseFontSize.value = baseF;
   tagFontSize.value = tagF;
   tipsFontSize.value = tipsF;
@@ -274,10 +431,20 @@ onBeforeMount(() => {
   windowData.value.tipsFontSize = tipsF;
   windowData.value.fontFamily = fontF;
   windowData.value.fontWeight = weightF;
+  windowData.value.barrageVisible = barrageVisibleF;
+  windowData.value.barrageShowWhenOpen = barrageShowWhenOpenF;
+  windowData.value.barrageMaxTracks = maxTracksF;
+  windowData.value.barrageTrackHeight = trackHeightF;
+  windowData.value.barrageStartTop = startTopF;
+  windowData.value.barrageDuration = durationF;
+  windowData.value.barrageMaxLength = maxLengthF;
+  windowData.value.barrageTypes = typesF;
   theme.value = themeF;
 
   // 监听核心模块消息
   uni.$on(DEV_CORE_MESSAGE, handleCoreMessage);
+  // 自己也监听部分内网通讯用于控制外边框等全局状态
+  uni.$on(DEV_UI_MESSAGE, handleUIMessage);
 
   // #ifdef H5
   setTimeout(() => {
@@ -295,6 +462,7 @@ onBeforeMount(() => {
 onUnmounted(() => {
   sendCommand(CMD_TYPE.WINDOW_CLOSE, {});
   uni.$off(DEV_CORE_MESSAGE, handleCoreMessage);
+  uni.$off(DEV_UI_MESSAGE, handleUIMessage);
 });
 
 onShow(() => {
@@ -342,4 +510,11 @@ onHide(() => {
   font-family: var(--dev-tool-font-family);
   font-weight: var(--dev-tool-font-weight);
 }
+
+.dev-tool-safe-area-preview {
+  position: fixed;
+  pointer-events: none;
+  z-index: 999999;
+  box-sizing: border-box;
+}
 </style>

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

@@ -1,6 +1,7 @@
 <template>
   <view
     v-if="renderShow"
+    class="transition-root"
     :class="[showContainer ? 'transition-fixed' : '']"
     :style="[showContainer ? { zIndex } : {}]">
     <view
@@ -140,6 +141,11 @@ watch(
 </script>
 
 <style scoped>
+.transition-root {
+  width: 100%;
+  height: 100%;
+}
+
 .transition-container {
   display: block;
   position: relative;

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

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

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>