vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{VuexList → DevTool/components/VuexList}/index.vue

@@ -1,84 +1,84 @@
-<template>
-  <view class="vuex-content">
-    <view class="vuex-control">
-      <DevToolTitle>{{ t('vuex.title') }}</DevToolTitle>
-    </view>
-    <view class="vuex-json-wrapper">
-      <JsonPretty
-        editable
-        showLength
-        virtual
-        v-if="showJson"
-        :data="vuexList"
-        :theme="theme"
-        :height="contentHeight - 32 - 32"
-        :nodeSelectable="() => false"
-        :pathCollapsible="() => false"
-        @update:data="onUpdateData"
-        @nodeClick="onNodeClick"
-      />
-      <Empty v-else />
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import { computed } from 'vue';
-import JsonPretty from '../JsonPretty/index.vue';
-import Empty from '../Empty/index.vue';
-import DevToolTitle from '../DevToolTitle/index.vue';
-import { useI18n } from '../../i18n';
-
-const { t } = useI18n();
-const props = defineProps<{
-  vuexList: Record<string, any>;
-  theme?: string;
-  contentHeight: number;
-}>();
-const emit = defineEmits<{
-  (e: 'update:vuexList', data: Record<string, any>): void;
-  (e: 'change', value: any): void;
-}>();
-const showJson = computed(() => {
-  try {
-    const str = JSON.stringify(props.vuexList);
-    if (typeof props.vuexList === 'object' && (str === '' || str === '{}')) {
-      return false;
-    }
-    return true;
-  } catch (_error) {
-    return false;
-  }
-});
-
-let currentSelect: any;
-function onUpdateData(data: Record<string, any>) {
-  const firstKey = currentSelect?.path?.split('.')?.slice(1)?.[0];
-  emit('change', {
-    [firstKey]: data[firstKey],
-  });
-}
-function onNodeClick(node: any) {
-  currentSelect = node;
-}
-</script>
-<style scoped>
-.vuex-content {
-  font-size: var(--dev-tool-base-font-size);
-  height: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.vuex-control {
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  height: 32px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-}
-
-.vuex-json-wrapper {
-  padding: 0 16px;
-}
-</style>
+<template>
+  <view class="vuex-content">
+    <view class="vuex-control">
+      <DevToolTitle>{{ t('vuex.title') }}</DevToolTitle>
+    </view>
+    <view class="vuex-json-wrapper">
+      <JsonPretty
+        editable
+        showLength
+        virtual
+        v-if="showJson"
+        :data="vuexList"
+        :theme="theme"
+        :height="contentHeight - 32 - 32"
+        :nodeSelectable="() => false"
+        :pathCollapsible="() => false"
+        @update:data="onUpdateData"
+        @nodeClick="onNodeClick"
+      />
+      <Empty v-else />
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import JsonPretty from '../../../components/JsonPretty/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import { useI18n } from '../../../../i18n';
+
+const { t } = useI18n();
+const props = defineProps<{
+  vuexList: Record<string, any>;
+  theme?: string;
+  contentHeight: number;
+}>();
+const emit = defineEmits<{
+  (e: 'update:vuexList', data: Record<string, any>): void;
+  (e: 'change', value: any): void;
+}>();
+const showJson = computed(() => {
+  try {
+    const str = JSON.stringify(props.vuexList);
+    if (typeof props.vuexList === 'object' && (str === '' || str === '{}')) {
+      return false;
+    }
+    return true;
+  } catch (_error) {
+    return false;
+  }
+});
+
+let currentSelect: any;
+function onUpdateData(data: Record<string, any>) {
+  const firstKey = currentSelect?.path?.split('.')?.slice(1)?.[0];
+  emit('change', {
+    [firstKey]: data[firstKey],
+  });
+}
+function onNodeClick(node: any) {
+  currentSelect = node;
+}
+</script>
+<style scoped>
+.vuex-content {
+  font-size: var(--dev-tool-base-font-size);
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.vuex-control {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.vuex-json-wrapper {
+  padding: 0 16px;
+}
+</style>

package/dist/v3/{WebSocket → DevTool/components/WebSocket}/WebSocketDetail.vue

@@ -114,16 +114,16 @@
 </template>
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
-import Tag from '../Tag/index.vue';
-import CircularButton from '../CircularButton/index.vue';
+import Tag from '../../../components/Tag/index.vue';
+import CircularButton from '../../../components/CircularButton/index.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
-import Empty from '../Empty/index.vue';
-import { formatDate } from '../../utils/index';
-import type { DevTool } from '../../type';
-import { useI18n } from '../../i18n';
+import Empty from '../../../components/Empty/index.vue';
+import { formatDate } from '../../../../utils/index';
+import type { DevTool } from '../../../../type';
+import { useI18n } from '../../../../i18n';
 import SettingButton from '../SettingButton/index.vue';
-import VirtualList from '../VirtualList/index.vue';
-import AutoSize from '../VirtualList/AutoSize.vue';
+import VirtualList from '../../../components/VirtualList/index.vue';
+import AutoSize from '../../../components/VirtualList/AutoSize.vue';
 
 const { t } = useI18n();
 

package/dist/v3/{WebSocket → DevTool/components/WebSocket}/WebSocketItem.vue

@@ -37,10 +37,10 @@
   </view>
 </template>
 <script lang="ts" setup>
-import Tag from '../Tag/index.vue';
-import { formatDate } from '../../utils';
-import type { DevTool } from '../../type';
-import { useI18n } from '../../i18n';
+import Tag from '../../../components/Tag/index.vue';
+import { formatDate } from '../../../../utils';
+import type { DevTool } from '../../../../type';
+import { useI18n } from '../../../../i18n';
 
 const { t } = useI18n();
 

package/dist/v3/{WebSocket → DevTool/components/WebSocket}/index.vue

@@ -43,15 +43,15 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import WebSocketItem from './WebSocketItem.vue';
-import Tag from '../Tag/index.vue';
-import Empty from '../Empty/index.vue';
-import FilterInput from '../FilterInput/index.vue';
-import Pick from '../Pick/index.vue'; // Changed from FilterSelect to Pick
-import type { DevTool } from '../../type';
-import VirtualList from '../VirtualList/index.vue';
-import AutoSize from '../VirtualList/AutoSize.vue';
+import Tag from '../../../components/Tag/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import FilterInput from '../../../components/FilterInput/index.vue';
+import Pick from '../../../components/Pick/index.vue'; // Changed from FilterSelect to Pick
+import type { DevTool } from '../../../../type';
+import VirtualList from '../../../components/VirtualList/index.vue';
+import AutoSize from '../../../components/VirtualList/AutoSize.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
-import { useI18n } from '../../i18n';
+import { useI18n } from '../../../../i18n';
 
 const { t } = useI18n();
 

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,56 @@ function handleCoreMessage(msg: any) {
     case MSG_TYPE.PERF_VISIBLE:
       performanceVisible.value = data;
       break;
-    case MSG_TYPE.OPTION_UPDATE:
+    case MSG_TYPE.DATA_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 +391,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 +416,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 +430,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 +461,7 @@ onBeforeMount(() => {
 onUnmounted(() => {
   sendCommand(CMD_TYPE.WINDOW_CLOSE, {});
   uni.$off(DEV_CORE_MESSAGE, handleCoreMessage);
+  uni.$off(DEV_UI_MESSAGE, handleUIMessage);
 });
 
 onShow(() => {
@@ -342,4 +509,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>