vite-uni-dev-tool 1.1.0 → 1.2.1

package/dist/v3/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 '../../../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>
+<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/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,146 +233,91 @@ 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;
+  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:
-      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();