vite-uni-dev-tool 0.0.48 → 1.0.0

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

@@ -0,0 +1,184 @@
+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 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 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,
+    }),
+    network,
+    transfer,
+    webSocket,
+    handlers: {
+      onCloseCode,
+      onOpenCode,
+      onOpenJson,
+      onCloseJson,
+      onOpenNfcTool,
+      onCloseNfcTool,
+      onOpenNetworkDetail,
+      onCloseNetworkDetail,
+      onOpenNetworkSend,
+      onCloseNetworkSend,
+      onOpenNetworkIntercept,
+      onCloseNetworkIntercept,
+      onOpenInterceptConfig,
+      onCloseInterceptConfig,
+      onOpenTransferDetail,
+      onCloseTransferDetail,
+      onOpenWebSocketDetail,
+      onCloseWebSocketDetail,
+    },
+  };
+}
+
+import { emptyNetwork as _emptyNetwork } from '../const';

package/dist/v3/DevToolWindow/index.css

@@ -0,0 +1,89 @@
+.dev-tool-window {
+  --dev-tool-main-color: #9254de;
+  --dev-tool-warn-color: #ffa940;
+  --dev-tool-warn-bg-color: rgb(247 214 114 / 20%);
+  --dev-tool-error-color: #ff4d4f;
+  --dev-tool-error-bg-color: rgb(251 183 185 / 20%);
+  --dev-tool-success-color: #bae637;
+  --dev-tool-success-bg-color: #fcffe6;
+  --dev-tool-text-color-placeholder: #909090;
+  --dev-tool-active-bg-color: rgb(0 0 0 / 5%);
+
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  color: var(--dev-tool-text-color);
+  box-sizing: border-box;
+  transition: color 0.3s;
+}
+
+.dev-tool-window-light {
+  --dev-tool-bg-color: rgb(255 255 255 / 80%);
+  --dev-tool-bg2-color: rgb(255 255 255 / 95%);
+  --dev-tool-bg3-color: rgb(255 255 255 / 99.9%);
+  --dev-tool-text-color: #000;
+  --dev-tool-border-color: #f0f0f0;
+  --dev-tool-info-color: #9c9c9c;
+  --dev-tool-log-color: #f9f9f9;
+  --dev-tool-nil-color: #020201;
+  --dev-tool-number-color: #1d8ce0;
+  --dev-tool-boolean-color: #1d8ce0;
+  --dev-tool-symbol-color: bisque;
+  --dev-tool-active-bg-color: #f0f0f0;
+  --dev-tool-time-line-color: #9254de;
+  --dev-tool-note-color: #9c9c9c;
+  --dev-tool-keyword-color: #9254de;
+  --dev-tool-bracket-color: #9c9c9c;
+  --dev-tool-quotation-color: #91e76a;
+  --dev-tool-string-color: #91e76a;
+  --dev-tool-function-color: #1d8ce0;
+  --dev-tool-attribute-color: #ef66ba;
+  --dev-tool-operator-color: #50d3eb;
+}
+
+.dev-tool-window-dark {
+  --dev-tool-bg-color: rgb(0 0 0 / 90%);
+  --dev-tool-bg2-color: rgb(43 43 43 / 80%);
+  --dev-tool-bg3-color: rgb(43 43 43 / 99.9%);
+  --dev-tool-text-color: #fff;
+  --dev-tool-border-color: #3d3d3d;
+  --dev-tool-log-color: #f9f9f9;
+  --dev-tool-active-bg-color: #3d3d3d;
+  --dev-tool-time-line-color: #f9f9f9;
+  --dev-tool-note-color: #9c9c9c;
+  --dev-tool-keyword-color: #9254de;
+  --dev-tool-bracket-color: #9c9c9c;
+  --dev-tool-quotation-color: #91e76a;
+  --dev-tool-string-color: #91e76a;
+  --dev-tool-function-color: #1d8ce0;
+  --dev-tool-attribute-color: #ef66ba;
+  --dev-tool-operator-color: #50d3eb;
+}
+
+.dev-tool-window-bg {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--dev-tool-bg3-color);
+  backdrop-filter: blur(6px);
+  transition: background-color 0.3s;
+}
+
+.dev-tool-window-container {
+  height: calc(100% - 32px);
+  overflow: hidden;
+  position: relative;
+}
+
+
+.dev-tool-window::after {
+  content: '';
+}
+
+.dev-tool-window ::-webkit-scrollbar {
+  display: none;
+}