vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/DevToolButton/index.vue

@@ -1,99 +1,79 @@
 <template>
-  <movable-area class="movable-area" :style="style">
-    <movable-view
-      class="movable-view"
-      :x="x"
-      :y="y"
-      direction="all"
-      @change="onDebounceChange"
-    >
-      <view
-        class="dev-tool-button"
-        :style="{
-          zIndex: zIndex,
-        }"
-        @click="emit('click')"
-      >
-        devtool
-        <view class="dev-tool-version">{{ devToolVersion }}</view>
-      </view>
-    </movable-view>
-  </movable-area>
+  <MovableContainer
+    width="100px"
+    height="32px"
+    :x="x"
+    :y="y"
+    :zIndex="zIndex"
+    :customStyle="customStyle"
+    :contentHeight="contentHeight"
+    @change="onDebounceChange">
+    <view class="dev-tool-button" @click="onClick">
+      devtool
+      <view class="dev-tool-version">{{ devToolVersion }}</view>
+    </view>
+  </MovableContainer>
 </template>
 <script lang="ts" setup>
 import { onShow } from '@dcloudio/uni-app';
-import { ref, computed } from 'vue';
-import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
-import { debounce } from '../../utils';
+import { ref } from 'vue';
+import { getDevToolInfo, setDevToolInfo } from '../../modules/devToolInfo';
+import MovableContainer from '../MovableContainer/index.vue';
 
 const x = ref(300);
 const y = ref(500);
 
-const emit = defineEmits<{ (e: 'click'): void }>();
-const props = withDefaults(
+const emit = defineEmits<{
+  (e: 'click', pos: { x: number; y: number }): void;
+}>();
+withDefaults(
   defineProps<{
     zIndex?: number;
     customStyle?: Record<string, any>;
     contentHeight: number;
     devToolVersion?: string;
   }>(),
-  { buttonSize: 50, zIndex: 1000 },
+  { zIndex: 1000 },
 );
 
-const style = computed(() => {
-  const { paddingBottom, paddingTop, ...rest } = props.customStyle as any;
-  return {
-    ...rest,
-    top: paddingTop,
-    height: props.contentHeight + 'px',
-    // bottom: paddingBottom,
-  };
-});
-
-const onDebounceChange = debounce((e: any) => {
+const onDebounceChange = (e: any) => {
   setDevToolInfo({
     left: e.detail.x,
     top: e.detail.y,
   });
-}, 500);
+};
+
+const onClick = () => {
+  emit('click', { x: x.value + 50, y: y.value + 16 });
+};
 
 onShow(() => {
-  const { left = 500, top = 500 } = getDevToolInfo();
+  const { left = 300, top = 500 } = getDevToolInfo();
   x.value = left;
   y.value = top;
 });
 </script>
 <style scoped>
-.movable-area {
-  height: 100vh;
-  width: 100vw;
-  top: 0;
-  position: fixed;
-  pointer-events: none;
-  z-index: 998;
-}
-.movable-view {
-  width: 100px;
-  height: 32px;
-  pointer-events: auto;
-}
 .dev-tool-button {
-  position: fixed;
-  z-index: 999;
-
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-
   width: 100px;
   height: 32px;
   border-radius: 6px;
   font-size: 14px;
-
   color: #fff;
-  background-color: #9254de;
+  background-color: var(--dev-tool-main-color);
   cursor: pointer;
   overflow: hidden;
+  transition: all 0.3s;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+}
+
+.dev-tool-button:active {
+  opacity: 0.8;
+  transform: scale(0.95);
 }
 
 .dev-tool-version {
@@ -104,7 +84,8 @@ onShow(() => {
   line-height: 14px;
   text-align: center;
   font-size: 8px;
-  background-color: #ef66ba;
+  background-color: var(--dev-tool-error-color);
   transform: rotate(45deg);
+  transition: background-color 0.3s;
 }
 </style>

package/dist/v3/DevToolTitle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="dev-tool-title" :style="customStyle"> <slot /> </view>
+  <view class="dev-tool-title" :style="customStyle"><slot /></view>
 </template>
 <script lang="ts" setup>
 defineProps<{ customStyle?: any }>();
@@ -9,7 +9,10 @@ defineProps<{ customStyle?: any }>();
   display: flex;
   align-items: center;
   height: 32px;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
+
 .dev-tool-title::before {
   content: '';
   margin-right: 8px;

package/dist/v3/DevToolWindow/DevToolOverlay.vue

@@ -0,0 +1,182 @@
+<template>
+  <!-- 源码查看 -->
+  <AppTransition
+    :show="overlayState?.openCode"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <SourceCode
+      v-if="overlayState?.openCode"
+      :url="overlayState?.stack"
+      :mode="mode"
+      :zIndex="zIndex"
+      :sourceFileServers="sourceFileServers"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseCode" />
+  </AppTransition>
+
+  <!-- 发起请求 -->
+  <AppTransition
+    :show="overlayState?.showNetworkSend"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <NetworkSend
+      v-if="overlayState?.showNetworkSend"
+      :zIndex="zIndex"
+      :network="network"
+      :interceptNetworkList="interceptNetworkList"
+      :customStyle="customStyle"
+      :theme="theme"
+      @close="overlayHandlers.onCloseNetworkSend"
+      @openDetail="overlayHandlers.onOpenNetworkDetail" />
+  </AppTransition>
+
+  <!-- 拦截请求 -->
+  <AppTransition
+    :show="overlayState?.showNetworkIntercept"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <NetworkIntercept
+      v-if="overlayState?.showNetworkIntercept"
+      :zIndex="zIndex"
+      :network="network"
+      :interceptNetworkList="interceptNetworkList"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseNetworkIntercept"
+      @remove="onRemoveInterceptConfig"
+      @openConfig="overlayHandlers.onOpenInterceptConfig" />
+  </AppTransition>
+
+  <!-- 拦截配置 -->
+  <AppTransition
+    :show="overlayState?.showInterceptConfig"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <InterceptConfig
+      v-if="overlayState?.showInterceptConfig"
+      :zIndex="zIndex"
+      :network="network"
+      :customStyle="customStyle"
+      :theme="theme"
+      @close="overlayHandlers.onCloseInterceptConfig"
+      @confirm="onConfirmInterceptConfig" />
+  </AppTransition>
+
+  <!-- 请求详情 -->
+  <AppTransition
+    :show="overlayState?.showNetworkDetail"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <NetworkDetail
+      v-if="overlayState?.showNetworkDetail"
+      :zIndex="zIndex"
+      :network="network"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseNetworkDetail" />
+  </AppTransition>
+
+  <!-- 上传详情 -->
+  <!-- 传输详情 -->
+  <AppTransition
+    :show="overlayState?.showTransferDetail"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <TransferDetail
+      v-if="overlayState?.showTransferDetail"
+      :item="overlay.transfer"
+      :type="overlay.transfer.type"
+      :zIndex="zIndex"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseTransferDetail" />
+  </AppTransition>
+
+  <!-- WebSocket详情 -->
+  <AppTransition
+    :show="overlayState?.showWebSocketDetail"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <WebSocketDetail
+      v-if="overlayState?.showWebSocketDetail"
+      :ws="currentWebSocket"
+      :zIndex="zIndex"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseWebSocketDetail"
+      @clear="onClearWebSocketMessage"
+      @send="onSendWebSocket"
+      @openJson="onOpenJson" />
+  </AppTransition>
+
+  <!-- Json详情 -->
+  <AppTransition
+    :show="overlayState?.showJsonDetail"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <JsonDetail
+      v-if="overlayState?.showJsonDetail"
+      :data="overlayState?.jsonData"
+      :theme="theme"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseJson" />
+  </AppTransition>
+
+  <!-- NFC 工具 -->
+  <AppTransition
+    :show="overlayState?.showNfcTool"
+    name="slide-left"
+    :zIndex="zIndex"
+    :animated="useTransition">
+    <NFCTool
+      v-if="overlayState?.showNfcTool"
+      :contentHeight="contentHeight"
+      :customStyle="customStyle"
+      @close="overlayHandlers.onCloseNfcTool" />
+  </AppTransition>
+</template>
+
+<script setup lang="ts">
+import SourceCode from '../SourceCode/index.vue';
+import NetworkSend from '../NetworkList/NetworkSend.vue';
+import NetworkDetail from '../NetworkList/NetworkDetail.vue';
+import NetworkIntercept from '../NetworkList/NetworkIntercept.vue';
+import InterceptConfig from '../NetworkList/InterceptConfig.vue';
+import TransferDetail from '../TransferList/TransferDetail.vue';
+import WebSocketDetail from '../WebSocket/WebSocketDetail.vue';
+import JsonDetail from '../JsonDetail/index.vue';
+import NFCTool from '../NFCList/NFCTool.vue';
+import AppTransition from '../AppTransition/index.vue';
+import type { DevTool } from '../../type';
+
+defineProps<{
+  overlayState: any;
+  overlayHandlers: any;
+  mode?: string;
+  zIndex: number;
+  sourceFileServers?: string[];
+  contentHeight: number;
+  customStyle?: Record<string, any>;
+  overlay: any;
+  currentWebSocket?: DevTool.WS;
+  interceptNetworkList: DevTool.NetworkItem[];
+  onRemoveInterceptConfig: (ni: DevTool.NetworkItem) => void;
+  onConfirmInterceptConfig: (ni: DevTool.NetworkItem) => void;
+  onClearWebSocketMessage: (ws: DevTool.WS) => void;
+  onSendWebSocket: (data: { url: string; message: any }) => void;
+  onOpenJson: (data?: any) => void;
+  useTransition: boolean;
+  network: DevTool.NetworkItem;
+  theme?: string;
+}>();
+</script>

package/dist/v3/DevToolWindow/const.ts

@@ -2,143 +2,121 @@ export const tabIndex = {
   Console: 0,
   // Connection: 1,
   Network: 1,
-  Upload: 2,
+  Transfer: 2,
   WebSocket: 3,
   Route: 4,
-  ElEvent: 5,
-  UniEvent: 6,
-  CaptureScreen: 7,
-  ScanCode: 8,
-  NFC: 9,
-  Storage: 10,
-  Vuex: 11,
-  Pinia: 12,
-  // Window: 14,
-  // Device: 15,
-  // System: 16,
-  // AppInfo: 17,
-  Setting: 13,
+  Instance: 5,
+  ElEvent: 6,
+  UniEvent: 7,
+  Performance: 8,
+  CaptureScreen: 9,
+  ScanCode: 10,
+  NFC: 11,
+  Storage: 12,
+  Vuex: 13,
+  Pinia: 14,
+  Setting: 15,
 };
 
-export const tabItems = [
-  // {
-  //   key: 'Instance',
-  //   label: 'Instance',
-  //   value: 'Instance',
-  //   index: tabIndex.Instance,
-  // },
+/**
+ * 获取标签页列表（国际化）
+ * @param t 翻译函数
+ */
+export const getTabItems = (t: (key: string) => string) => [
   {
     key: 'Console',
-    label: 'Console',
+    label: t('tabs.console'),
     value: 'Console',
     index: tabIndex.Console,
   },
-  // {
-  //   key: 'Connection',
-  //   label: 'Connection',
-  //   value: 'Connection',
-  //   index: tabIndex.Connection,
-  // },
   {
     key: 'Network',
-    label: 'Network',
+    label: t('tabs.network'),
     value: 'NetWork',
     index: tabIndex.Network,
   },
   {
-    key: 'Upload',
-    label: 'Upload',
-    value: 'Upload',
-    index: tabIndex.Upload,
+    key: 'Transfer',
+    label: t('tabs.transfer'),
+    value: 'Transfer',
+    index: tabIndex.Transfer,
   },
   {
     key: 'WebSocket',
-    label: 'WebSocket',
+    label: t('tabs.websocket'),
     value: 'WebSocket',
     index: tabIndex.WebSocket,
   },
   {
     key: 'Route',
-    label: 'Route',
+    label: t('tabs.route'),
     value: 'Route',
     index: tabIndex.Route,
   },
+  {
+    key: 'Instance',
+    label: t('tabs.instance'),
+    value: 'Instance',
+    index: tabIndex.Instance,
+  },
   {
     key: 'ElEvent',
-    label: 'ElEvent',
+    label: t('tabs.elEvent'),
     value: 'ElEvent',
     index: tabIndex.ElEvent,
   },
   {
     key: 'UniEvent',
-    label: 'UniEvent',
+    label: t('tabs.uniEvent'),
     value: 'UniEvent',
     index: tabIndex.UniEvent,
   },
+  {
+    key: 'Performance',
+    label: t('tabs.performance'),
+    value: 'Performance',
+    index: tabIndex.Performance,
+  },
   {
     key: 'CaptureScreen',
-    label: 'CaptureScreen',
+    label: t('tabs.captureScreen'),
     value: 'CaptureScreen',
     index: tabIndex.CaptureScreen,
   },
   {
     key: 'ScanCode',
-    label: 'ScanCode',
+    label: t('tabs.scanCode'),
     value: 'ScanCode',
     index: tabIndex.ScanCode,
   },
   {
     key: 'NFC',
-    label: 'NFC',
+    label: t('tabs.nfc'),
     value: 'NFC',
     index: tabIndex.NFC,
   },
   {
     key: 'Storage',
-    label: 'Storage',
+    label: t('tabs.storage'),
     value: 'Storage',
     index: tabIndex.Storage,
   },
-
   {
     key: 'Vuex',
-    label: 'Vuex',
+    label: t('tabs.vuex'),
     value: 'Vuex',
     index: tabIndex.Vuex,
   },
   {
     key: 'Pinia',
-    label: 'Pinia',
+    label: t('tabs.pinia'),
     value: 'Pinia',
     index: tabIndex.Pinia,
   },
-  // {
-  //   key: 'Window',
-  //   label: 'Window',
-  //   value: 'Window',
-  //   index: tabIndex.Window,
-  // },
-  // {
-  //   key: 'Device',
-  //   label: 'Device',
-  //   value: 'Device',
-  //   index: tabIndex.Device,
-  // },
-  // {
-  //   key: 'System',
-  //   label: 'System',
-  //   value: 'System',
-  //   index: tabIndex.System,
-  // },
-  // {
-  //   key: 'AppInfo',
-  //   label: 'AppInfo',
-  //   value: 'AppInfo',
-  //   index: tabIndex.AppInfo,
-  // },
+
   {
     key: 'Setting',
-    label: 'Setting',
+    label: t('tabs.setting'),
     value: 'Setting',
     index: tabIndex.Setting,
   },

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

@@ -0,0 +1,48 @@
+import type { DevTool } from '../../../type';
+
+export const calcLineStartAndEnd = (
+  list: DevTool.NetworkItem[],
+): {
+  startTime: number;
+  endTime: number;
+} => {
+  if (!list.length) return { startTime: 0, endTime: 0 };
+  const startTime = Math.min(...list.map((item) => item.startTime));
+  const endTime = Math.max(...list.map((item) => item?.endTime ?? Date.now()));
+
+  return { startTime, endTime };
+};
+
+/**
+ * 计算 时间轴
+ * @param list
+ * @param startTime
+ * @param endTime
+ */
+export const calcNetworkTimeline = (
+  list: DevTool.NetworkItem[],
+  startTime: number,
+  endTime: number,
+): DevTool.NetworkItem[] => {
+  const total = endTime - startTime;
+  if (total <= 0) return list;
+
+  return (
+    list?.map((item) => {
+      const width =
+        (
+          (((item.endTime ?? Date.now()) - item.startTime) / total) *
+          100
+        ).toFixed(2) + '%';
+
+      const left =
+        (((item.startTime - startTime) / total) * 100).toFixed(2) + '%';
+
+      return {
+        ...item,
+        width,
+        left,
+      };
+    }) ?? []
+  );
+};