vite-uni-dev-tool 1.1.0 → 1.2.0

package/dist/v3/DevTool/components/DevToolWindow/hooks/useDevToolOverlay.ts

@@ -1,197 +1,201 @@
-import { ref, reactive, shallowRef, nextTick } from 'vue';
-import type { DevTool } from '../../../../../type';
-import { isMockWX, isAndroid } from '../../../../../utils/index';
-import { emptyNetwork } from '../const';
-
-export function useDevToolOverlay(props: any) {
-  const openCode = ref(false);
-  const stack = ref('');
-  const showNetworkSend = ref(false);
-  const showNetworkDetail = ref(false);
-  const showNetworkIntercept = ref(false);
-  const showInterceptConfig = ref(false);
-  const showJsonDetail = ref(false);
-  const jsonData = shallowRef<
-    { title?: string; data: Record<string, any> } | undefined
-  >();
-  const showNfcTool = ref(false);
-  const showTransferDetail = ref(false);
-  const showWebSocketDetail = ref(false);
-  const showBluetoothTool = ref(false);
-  const bluetoothDevice = shallowRef<DevTool.BluetoothItem | null>(null);
-
-  const network = reactive<DevTool.NetworkItem>({ ...emptyNetwork });
-  const transfer = reactive<DevTool.TransferItem>({
-    index: 0,
-    status: '',
-    type: 'upload',
-  });
-  const webSocket = reactive<DevTool.WS>({ url: '', message: [] });
-
-  function onCloseCode() {
-    openCode.value = false;
-    stack.value = '';
-  }
-
-  function onOpenCode(value?: string) {
-    if (!value) return;
-    stack.value = value;
-    const isWXLink = isMockWX(value ?? '') || props.mode !== 'development';
-    const isUseDevSource = !isWXLink && props.useDevSource;
-
-    if (isWXLink) {
-      uni.showToast({
-        icon: 'none',
-        title: '[DevTool] 请在小程序真机调试模式下查看源码',
-      });
-      return;
-    }
-    if (!isUseDevSource) return;
-
-    if (isAndroid()) {
-      if (props.sourceFileServers && props.sourceFileServers?.length > 0) {
-        openCode.value = true;
-      } else {
-        uni.showToast({
-          icon: 'none',
-          title: '[DevTool] sourceFileServers 配置异常',
-        });
-      }
-    } else {
-      openCode.value = true;
-    }
-  }
-
-  function onOpenJson(data?: { title?: string; data: Record<string, any> }) {
-    showJsonDetail.value = true;
-    jsonData.value = data;
-  }
-  function onCloseJson() {
-    showJsonDetail.value = false;
-    jsonData.value = undefined;
-  }
-
-  function onOpenNfcTool() {
-    showNfcTool.value = true;
-  }
-  function onCloseNfcTool() {
-    showNfcTool.value = false;
-  }
-
-  function onOpenBluetoothTool(device: DevTool.BluetoothItem) {
-    bluetoothDevice.value = device;
-    showBluetoothTool.value = true;
-  }
-  function onCloseBluetoothTool() {
-    showBluetoothTool.value = false;
-    bluetoothDevice.value = null;
-  }
-
-  function onOpenNetworkDetail(ni?: DevTool.NetworkItem) {
-    Object.assign(network, emptyNetwork);
-    Object.assign(network, ni);
-    showNetworkDetail.value = true;
-  }
-  function onCloseNetworkDetail() {
-    showNetworkDetail.value = false;
-  }
-
-  function onOpenNetworkSend(ni?: DevTool.NetworkItem) {
-    Object.assign(network, emptyNetwork);
-    Object.assign(network, ni);
-    showNetworkSend.value = true;
-  }
-  function onCloseNetworkSend() {
-    showNetworkSend.value = false;
-  }
-
-  function onOpenNetworkIntercept() {
-    showNetworkIntercept.value = true;
-  }
-  function onCloseNetworkIntercept() {
-    showNetworkIntercept.value = false;
-  }
-
-  function onOpenInterceptConfig(ni?: DevTool.NetworkItem) {
-    Object.assign(network, emptyNetwork);
-    if (ni) Object.assign(network, ni);
-    showInterceptConfig.value = true;
-  }
-  function onCloseInterceptConfig() {
-    showInterceptConfig.value = false;
-  }
-
-  function onOpenTransferDetail(item?: DevTool.TransferItem) {
-    if ((item as any).formData) {
-      delete (transfer as any).formData;
-    }
-    if ((item as any).filePath) {
-      delete (transfer as any).filePath;
-    }
-    Object.assign(transfer, item);
-    showTransferDetail.value = true;
-  }
-  function onCloseTransferDetail() {
-    showTransferDetail.value = false;
-  }
-
-  function onOpenWebSocketDetail(ws?: DevTool.WS, currentWebSocket?: any) {
-    Object.assign(webSocket, ws);
-    nextTick(() => {
-      // 兼容直接传入对象或传入 Ref 的情况
-      if (
-        currentWebSocket === undefined ||
-        currentWebSocket?.value ||
-        currentWebSocket
-      ) {
-        showWebSocketDetail.value = true;
-      }
-    });
-  }
-  function onCloseWebSocketDetail() {
-    showWebSocketDetail.value = false;
-  }
-
-  return {
-    state: reactive({
-      openCode,
-      stack,
-      showNetworkSend,
-      showNetworkDetail,
-      showNetworkIntercept,
-      showInterceptConfig,
-      showJsonDetail,
-      jsonData,
-      showNfcTool,
-      showTransferDetail,
-      showWebSocketDetail,
-      showBluetoothTool,
-      bluetoothDevice,
-    }),
-    network,
-    transfer,
-    webSocket,
-    handlers: {
-      onCloseCode,
-      onOpenCode,
-      onOpenJson,
-      onCloseJson,
-      onOpenNfcTool,
-      onCloseNfcTool,
-      onOpenNetworkDetail,
-      onCloseNetworkDetail,
-      onOpenNetworkSend,
-      onCloseNetworkSend,
-      onOpenNetworkIntercept,
-      onCloseNetworkIntercept,
-      onOpenInterceptConfig,
-      onCloseInterceptConfig,
-      onOpenTransferDetail,
-      onCloseTransferDetail,
-      onOpenWebSocketDetail,
-      onCloseWebSocketDetail,
-      onOpenBluetoothTool,
-      onCloseBluetoothTool,
-    },
-  };
-}
+import { ref, reactive, shallowRef, nextTick } from 'vue';
+import type { DevTool } from '../../../../../type';
+import { isMockWX, isAndroid } from '../../../../../utils/index';
+import { emptyNetwork } from '../const';
+
+export function useDevToolOverlay(props: any) {
+  const openCode = ref(false);
+  const stack = ref('');
+  const showNetworkSend = ref(false);
+  const showNetworkDetail = ref(false);
+  const showNetworkIntercept = ref(false);
+  const showInterceptConfig = ref(false);
+  const showJsonDetail = ref(false);
+  const jsonData = shallowRef<
+    { title?: string; data: Record<string, any> } | undefined
+  >();
+  const showNfcTool = ref(false);
+  const showTransferDetail = ref(false);
+  const showWebSocketDetail = ref(false);
+  const showBluetoothTool = ref(false);
+  const bluetoothDevice = shallowRef<DevTool.BluetoothItem | null>(null);
+
+  const network = reactive<DevTool.NetworkItem>({ ...emptyNetwork });
+  const transfer = reactive<DevTool.TransferItem>({
+    index: 0,
+    status: '',
+    type: 'upload',
+  });
+  const webSocket = reactive<DevTool.WS>({ url: '', message: [] });
+
+  function onCloseCode() {
+    openCode.value = false;
+    stack.value = '';
+  }
+
+  function onOpenCode(value?: string) {
+    if (!value) return;
+    stack.value = value;
+
+    // 微信小程序下的虚拟路径，只能在小程序真机调试下打开
+    if (isMockWX(value)) {
+      uni.showToast({
+        icon: 'none',
+        title: '[DevTool] 请在小程序真机调试模式下查看源码',
+      });
+      return;
+    }
+
+    const isDev = props.mode === 'development';
+    const isUseDevSource = props.useDevSource;
+
+    // 非开发环境且未显式开启 useDevSource，不打开源码面板
+    if (!isDev && !isUseDevSource) return;
+
+    if (isAndroid()) {
+      if (props.sourceFileServers && props.sourceFileServers?.length > 0) {
+        openCode.value = true;
+      } else {
+        uni.showToast({
+          icon: 'none',
+          title: '[DevTool] sourceFileServers 配置异常',
+        });
+      }
+    } else {
+      openCode.value = true;
+    }
+  }
+
+  function onOpenJson(data?: { title?: string; data: Record<string, any> }) {
+    showJsonDetail.value = true;
+    jsonData.value = data;
+  }
+  function onCloseJson() {
+    showJsonDetail.value = false;
+    jsonData.value = undefined;
+  }
+
+  function onOpenNfcTool() {
+    showNfcTool.value = true;
+  }
+  function onCloseNfcTool() {
+    showNfcTool.value = false;
+  }
+
+  function onOpenBluetoothTool(device: DevTool.BluetoothItem) {
+    bluetoothDevice.value = device;
+    showBluetoothTool.value = true;
+  }
+  function onCloseBluetoothTool() {
+    showBluetoothTool.value = false;
+    bluetoothDevice.value = null;
+  }
+
+  function onOpenNetworkDetail(ni?: DevTool.NetworkItem) {
+    Object.assign(network, emptyNetwork);
+    Object.assign(network, ni);
+    showNetworkDetail.value = true;
+  }
+  function onCloseNetworkDetail() {
+    showNetworkDetail.value = false;
+  }
+
+  function onOpenNetworkSend(ni?: DevTool.NetworkItem) {
+    Object.assign(network, emptyNetwork);
+    Object.assign(network, ni);
+    showNetworkSend.value = true;
+  }
+  function onCloseNetworkSend() {
+    showNetworkSend.value = false;
+  }
+
+  function onOpenNetworkIntercept() {
+    showNetworkIntercept.value = true;
+  }
+  function onCloseNetworkIntercept() {
+    showNetworkIntercept.value = false;
+  }
+
+  function onOpenInterceptConfig(ni?: DevTool.NetworkItem) {
+    Object.assign(network, emptyNetwork);
+    if (ni) Object.assign(network, ni);
+    showInterceptConfig.value = true;
+  }
+  function onCloseInterceptConfig() {
+    showInterceptConfig.value = false;
+  }
+
+  function onOpenTransferDetail(item?: DevTool.TransferItem) {
+    if ((item as any).formData) {
+      delete (transfer as any).formData;
+    }
+    if ((item as any).filePath) {
+      delete (transfer as any).filePath;
+    }
+    Object.assign(transfer, item);
+    showTransferDetail.value = true;
+  }
+  function onCloseTransferDetail() {
+    showTransferDetail.value = false;
+  }
+
+  function onOpenWebSocketDetail(ws?: DevTool.WS, currentWebSocket?: any) {
+    Object.assign(webSocket, ws);
+    nextTick(() => {
+      // 兼容直接传入对象或传入 Ref 的情况
+      if (
+        currentWebSocket === undefined ||
+        currentWebSocket?.value ||
+        currentWebSocket
+      ) {
+        showWebSocketDetail.value = true;
+      }
+    });
+  }
+  function onCloseWebSocketDetail() {
+    showWebSocketDetail.value = false;
+  }
+
+  return {
+    state: reactive({
+      openCode,
+      stack,
+      showNetworkSend,
+      showNetworkDetail,
+      showNetworkIntercept,
+      showInterceptConfig,
+      showJsonDetail,
+      jsonData,
+      showNfcTool,
+      showTransferDetail,
+      showWebSocketDetail,
+      showBluetoothTool,
+      bluetoothDevice,
+    }),
+    network,
+    transfer,
+    webSocket,
+    handlers: {
+      onCloseCode,
+      onOpenCode,
+      onOpenJson,
+      onCloseJson,
+      onOpenNfcTool,
+      onCloseNfcTool,
+      onOpenNetworkDetail,
+      onCloseNetworkDetail,
+      onOpenNetworkSend,
+      onCloseNetworkSend,
+      onOpenNetworkIntercept,
+      onCloseNetworkIntercept,
+      onOpenInterceptConfig,
+      onCloseInterceptConfig,
+      onOpenTransferDetail,
+      onCloseTransferDetail,
+      onOpenWebSocketDetail,
+      onCloseWebSocketDetail,
+      onOpenBluetoothTool,
+      onCloseBluetoothTool,
+    },
+  };
+}

package/dist/v3/DevTool/components/ElEvent/ElEventItem.vue

@@ -1,105 +1,105 @@
-<template>
-  <view class="el-event-item" @click.stop="onOpenJSon">
-    <!-- <view class="el-event-item-row"> {{ eventItem.eventName }} </view> -->
-    <view class="el-event-item-row">
-      <Tag mode="main" v-if="eventItem.type == 'click'">
-        {{ eventItem.type }}
-      </Tag>
-      <Tag mode="main" v-else-if="eventItem.type == 'tap'">
-        {{ eventItem.type }}
-      </Tag>
-      <Tag mode="success" v-else-if="eventItem.type == 'touchstart'">
-        {{ eventItem.type }}
-      </Tag>
-      <Tag mode="warn" v-else-if="eventItem.type == 'touchmove'">
-        {{ eventItem.type }}
-      </Tag>
-      <Tag mode="error" v-else-if="eventItem.type == 'touchend'">
-        {{ eventItem.type }}
-      </Tag>
-      <Tag mode="main" v-else>
-        {{ eventItem.type }}
-      </Tag>
-
-      <view class="el-event-item-right">
-        {{
-          eventItem.timer
-            ? formatDate(eventItem.timer, 'YYYY-MM-DD HH:mm:SS')
-            : ''
-        }}
-      </view>
-    </view>
-
-    <view class="el-event-item-page">{{ eventItem?.path }}</view>
-
-    <view
-      class="el-event-item-position"
-      v-for="(point, index) in eventItem.touches"
-      :key="index">
-      <view>cx:{{ point.clientX }}</view>
-      <view>cy:{{ point.clientY }}</view>
-      <view>px:{{ point.pageX }}</view>
-      <view>py:{{ point.pageY }}</view>
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import Tag from '../../../components/Tag/index.vue';
-import type { DevTool } from '../../../../type';
-import { formatDate } from '../../../../utils';
-
-const props = defineProps<{
-  eventItem: DevTool.ElEventItem;
-}>();
-
-const emit = defineEmits<{
-  (e: 'openJson', value?: { title?: string; data: Record<string, any> }): void;
-}>();
-
-function onOpenJSon() {
-  emit('openJson', {
-    title: '事件详情',
-    data: props.eventItem,
-  });
-}
-</script>
-
-<style scoped>
-.el-event-item {
-  padding: 16px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-}
-
-.el-event-item-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 28px;
-  word-break: break-all;
-}
-
-.el-event-item-right {
-  text-align: right;
-  word-break: break-all;
-}
-
-.link {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.el-event-item-page {
-  text-align: right;
-}
-
-.el-event-item-position {
-  display: flex;
-  align-items: center;
-  min-height: 24px;
-}
-
-.el-event-item-position > view {
-  width: 25%;
-}
-</style>
+<template>
+  <view class="el-event-item" @click.stop="onOpenJSon">
+    <!-- <view class="el-event-item-row"> {{ eventItem.eventName }} </view> -->
+    <view class="el-event-item-row">
+      <Tag mode="main" v-if="eventItem.type == 'click'">
+        {{ eventItem.type }}
+      </Tag>
+      <Tag mode="main" v-else-if="eventItem.type == 'tap'">
+        {{ eventItem.type }}
+      </Tag>
+      <Tag mode="success" v-else-if="eventItem.type == 'touchstart'">
+        {{ eventItem.type }}
+      </Tag>
+      <Tag mode="warn" v-else-if="eventItem.type == 'touchmove'">
+        {{ eventItem.type }}
+      </Tag>
+      <Tag mode="error" v-else-if="eventItem.type == 'touchend'">
+        {{ eventItem.type }}
+      </Tag>
+      <Tag mode="main" v-else>
+        {{ eventItem.type }}
+      </Tag>
+
+      <view class="el-event-item-right">
+        {{
+          eventItem.timer
+            ? formatDate(eventItem.timer, 'YYYY-MM-DD HH:mm:SS')
+            : ''
+        }}
+      </view>
+    </view>
+
+    <view class="el-event-item-page">{{ eventItem?.path }}</view>
+
+    <view
+      class="el-event-item-position"
+      v-for="(point, index) in eventItem.touches"
+      :key="index">
+      <view>cx:{{ point.clientX }}</view>
+      <view>cy:{{ point.clientY }}</view>
+      <view>px:{{ point.pageX }}</view>
+      <view>py:{{ point.pageY }}</view>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import Tag from '../../../components/Tag/index.vue';
+import type { DevTool } from '../../../../type';
+import { formatDate } from '../../../../utils';
+
+const props = defineProps<{
+  eventItem: DevTool.ElEventItem;
+}>();
+
+const emit = defineEmits<{
+  (e: 'openJson', value?: { title?: string; data: Record<string, any> }): void;
+}>();
+
+function onOpenJSon() {
+  emit('openJson', {
+    title: '事件详情',
+    data: props.eventItem,
+  });
+}
+</script>
+
+<style scoped>
+.el-event-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.el-event-item-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 28px;
+  word-break: break-all;
+}
+
+.el-event-item-right {
+  text-align: right;
+  word-break: break-all;
+}
+
+.link {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.el-event-item-page {
+  text-align: right;
+}
+
+.el-event-item-position {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+}
+
+.el-event-item-position > view {
+  width: 25%;
+}
+</style>