vite-uni-dev-tool 0.0.9 → 0.0.11

package/dev/components/DevToolWindow/index.vue

@@ -16,99 +16,138 @@
         <view style="margin-left: 6px">{{ sizeFormat }}</view>
       </template> -->
     </Tabs>
-    <view class="dev-tool-window-container">
-      <ConsoleList
-        :currentConsoleType="currentConsoleType"
-        :consoleList="consoleList"
-        :sourceFileServers="sourceFileServers"
-        :mode="mode"
-        :useDevSource="useDevSource"
-        v-if="activeTab === 'Console'"
-        v-model="searchConsole"
-        @choose="onConsoleChoose"
-        @search="onSearchConsole"
-        @run="onRunJS"
-      />
-      <NetworkList
-        :currentNetworkType="currentNetworkType"
-        :networkList="networkList"
-        v-model="searchNetwork"
-        v-if="activeTab === 'Network'"
-        @choose="onNetworkChoose"
-        @search="onSearchNetwork"
-      />
-      <UploadList
-        :currentUploadType="currentUploadType"
-        :uploadList="uploadList"
-        v-model="searchUpload"
-        v-if="activeTab === 'Upload'"
-        @choose="onUploadChoose"
-        @search="onSearchUpload"
-      />
-      <WebSocket
-        :wsList="wsList"
-        :currentWebSocketType="currentWebSocketType"
-        v-model="searchWs"
-        v-if="activeTab === 'WebSocket'"
-        @choose="onWebSocketChoose"
-        @search="onSearchWs"
-      />
-      <Connection
-        v-if="activeTab === 'Connection'"
-        :netWorkStatus="netWorkStatus"
-      />
-      <RouteList
-        v-if="activeTab === 'Route'"
-        :routeList="routeList"
-        v-model="searchRoute"
-        @goTo="onGoTo"
-        @search="onSearchRoute"
-        @routeRefresh="onRouteRefresh"
-      />
-      <UniEvent
-        v-if="activeTab === 'UniEvent'"
-        :eventList="eventList"
-        :eventCount="eventCount"
-        :mode="mode"
-        :useDevSource="useDevSource"
-        :sourceFileServers="sourceFileServers"
-        @clear="onUniEventClear"
-      />
-      <SettingList
-        v-if="activeTab === 'Setting'"
-        :devToolVisible="devToolVisible"
-        :sizeFormat="sizeFormat"
-        @showDevButton="onShowDevButton"
-        @restartDevTool="onRestartDevTool"
-        @restartApp="onRestartApp"
-        @exportLog="onExportLog"
-        @screenshot="onScreenshot"
-        @clearCache="onClearCache"
-        @destroyDevTool="onDestroyDevTool"
-      />
-      <StorageList
-        v-if="activeTab === 'Storage'"
-        v-model:storage-list="storageList"
-        v-model="searchStorage"
-        @choose="onStorageChoose"
-        @remove="onStorageRemove"
-        @diff-value="onChangeStorage"
-        @search="onSearchStorage"
-      />
-      <VuexList
-        v-if="activeTab === 'Vuex'"
-        v-model:vuexList="vuexList"
-        @diff-value="onChangeVuex"
-      />
-      <PiniaList
-        v-if="activeTab === 'Pinia'"
-        v-model:pinia-list="piniaList"
-        @diff-value="onChangePinia"
-      />
-      <SystemInfo v-if="activeTab === 'System'" :systemInfo="systemInfo" />
-      <DeviceInfo v-if="activeTab === 'Device'" :deviceInfo="deviceInfo" />
-      <WindowInfo v-if="activeTab === 'Window'" :windowInfo="windowInfo" />
-    </view>
+    <swiper
+      class="dev-tool-window-container"
+      :current="activeTab"
+      @change="onChangeSwiper"
+    >
+      <swiper-item>
+        <ConsoleList
+          v-if="swiperShow(0)"
+          :currentConsoleType="currentConsoleType"
+          :consoleList="consoleList"
+          :sourceFileServers="sourceFileServers"
+          :mode="mode"
+          :useDevSource="useDevSource"
+          v-model="searchConsole"
+          @choose="onConsoleChoose"
+          @search="onSearchConsole"
+          @run="onRunJS"
+        />
+      </swiper-item>
+      <swiper-item>
+        <Connection v-if="swiperShow(1)" :netWorkStatus="netWorkStatus" />
+      </swiper-item>
+      <swiper-item>
+        <NetworkList
+          v-if="swiperShow(2)"
+          :currentNetworkType="currentNetworkType"
+          :networkList="networkList"
+          v-model="searchNetwork"
+          @choose="onNetworkChoose"
+          @search="onSearchNetwork"
+        />
+      </swiper-item>
+      <swiper-item>
+        <UploadList
+          v-if="swiperShow(3)"
+          :currentUploadType="currentUploadType"
+          :uploadList="uploadList"
+          v-model="searchUpload"
+          @choose="onUploadChoose"
+          @search="onSearchUpload"
+        />
+      </swiper-item>
+      <swiper-item>
+        <WebSocket
+          v-if="swiperShow(4)"
+          :wsList="wsList"
+          :currentWebSocketType="currentWebSocketType"
+          v-model="searchWs"
+          @choose="onWebSocketChoose"
+          @search="onSearchWs"
+        />
+      </swiper-item>
+      <swiper-item>
+        <RouteList
+          v-if="swiperShow(5)"
+          :routeList="routeList"
+          v-model="searchRoute"
+          @goTo="onGoTo"
+          @search="onSearchRoute"
+          @routeRefresh="onRouteRefresh"
+        />
+      </swiper-item>
+      <swiper-item>
+        <UniEvent
+          v-if="swiperShow(6)"
+          :eventList="eventList"
+          :eventCount="eventCount"
+          :mode="mode"
+          :useDevSource="useDevSource"
+          :sourceFileServers="sourceFileServers"
+          @clear="onUniEventClear"
+        />
+      </swiper-item>
+      <swiper-item>
+        <CaptureScreen
+          v-if="swiperShow(7)"
+          :captureScreenList="captureScreenList"
+          @clear="onCaptureScreenClear"
+        />
+      </swiper-item>
+      <swiper-item>
+        <StorageList
+          v-if="swiperShow(8)"
+          v-model:storage-list="storageList"
+          v-model="searchStorage"
+          @choose="onStorageChoose"
+          @remove="onStorageRemove"
+          @diff-value="onChangeStorage"
+          @search="onSearchStorage"
+        />
+      </swiper-item>
+      <swiper-item>
+        <VuexList
+          v-if="swiperShow(9)"
+          v-model:vuexList="vuexList"
+          @diff-value="onChangeVuex"
+        />
+      </swiper-item>
+      <swiper-item>
+        <PiniaList
+          v-if="swiperShow(10)"
+          v-model:pinia-list="piniaList"
+          @diff-value="onChangePinia"
+        />
+      </swiper-item>
+      <swiper-item>
+        <WindowInfo v-if="swiperShow(11)" :windowInfo="windowInfo" />
+      </swiper-item>
+      <swiper-item>
+        <DeviceInfo v-if="swiperShow(12)" :deviceInfo="deviceInfo" />
+      </swiper-item>
+      <swiper-item>
+        <SystemInfo v-if="swiperShow(13)" :systemInfo="systemInfo" />
+      </swiper-item>
+      <swiper-item>
+        <AppInfo v-if="swiperShow(14)" :appInfo="appInfo" />
+      </swiper-item>
+      <swiper-item>
+        <SettingList
+          v-if="swiperShow(15)"
+          :devToolVisible="devToolVisible"
+          :sizeFormat="sizeFormat"
+          @showDevButton="onShowDevButton"
+          @restartDevTool="onRestartDevTool"
+          @restartApp="onRestartApp"
+          @exportLog="onExportLog"
+          @screenshot="onScreenshot"
+          @clearCache="onClearCache"
+          @destroyDevTool="onDestroyDevTool"
+        />
+      </swiper-item>
+    </swiper>
   </view>
 </template>
 
@@ -130,7 +169,8 @@ import WindowInfo from '../WindowInfo/index.vue';
 import WebSocket from '../WebSocket/index.vue';
 import UploadList from '../UploadList/index.vue';
 import UniEvent from '../UniEvent/index.vue';
-import RunJS from '../RunJS/index.vue';
+import AppInfo from '../AppInfo/index.vue';
+import CaptureScreen from '../CaptureScreen/index.vue';
 import {
   DEV_BUTTON_SHOW_OR_HIDE,
   DEV_CONSOLE_CLEAR,
@@ -154,8 +194,8 @@ import {
   DEV_WINDOW_INFO,
   DEV_APP_MESSAGE,
   DEV_UNI_EVENT_CLEAR,
-  DEV_RUN_JS_CLEAR,
   DEV_RUN_JS,
+  DEV_CAPTURE_SCREEN_CLEAR,
 } from '../../const';
 import { debounce, hightLight } from '../../utils/index';
 import type { DevTool } from '../../type';
@@ -166,72 +206,98 @@ const items = [
     key: 'Console',
     label: 'Console',
     value: 'Console',
+    index: 0,
   },
   {
     key: 'Connection',
     label: 'Connection',
     value: 'Connection',
+    index: 1,
   },
   {
     key: 'Network',
     label: 'Network',
     value: 'NetWork',
+    index: 2,
   },
   {
     key: 'Upload',
     label: 'Upload',
     value: 'Upload',
+    index: 3,
   },
   {
     key: 'WebSocket',
     label: 'WebSocket',
     value: 'WebSocket',
+    index: 4,
   },
   {
     key: 'Route',
     label: 'Route',
     value: 'Route',
+    index: 5,
   },
   {
     key: 'UniEvent',
     label: 'UniEvent',
     value: 'UniEvent',
+    index: 6,
+  },
+  {
+    key: 'CaptureScreen',
+    label: 'CaptureScreen',
+    value: 'CaptureScreen',
+    index: 7,
   },
   {
     key: 'Storage',
     label: 'Storage',
     value: 'Storage',
+    index: 8,
   },
 
   {
     key: 'Vuex',
     label: 'Vuex',
     value: 'Vuex',
+    index: 9,
   },
   {
     key: 'Pinia',
     label: 'Pinia',
     value: 'Pinia',
+    index: 10,
   },
   {
     key: 'Window',
     label: 'Window',
     value: 'Window',
+    index: 11,
   },
   {
     key: 'Device',
     label: 'Device',
     value: 'Device',
+    index: 12,
   },
   {
     key: 'System',
     label: 'System',
     value: 'System',
+    index: 13,
+  },
+  {
+    key: 'AppInfo',
+    label: 'AppInfo',
+    value: 'AppInfo',
+    index: 14,
   },
   {
     key: 'Setting',
     label: 'Setting',
     value: 'Setting',
+    index: 15,
   },
 ];
 
@@ -267,6 +333,8 @@ const deviceInfo = ref<Record<string, any>>({});
 const windowInfo = ref<Record<string, any>>({});
 const eventList = ref<DevTool.EventItem[]>([]);
 const eventCount = ref<DevTool.EventCount>();
+const appInfo = ref<Record<string, any>>({});
+const captureScreenList = ref<DevTool.CaptureScreenItem[]>([]);
 
 const netWorkStatus = ref<{
   isConnected?: boolean;
@@ -276,7 +344,7 @@ const sizeFormat = ref('');
 
 const devToolVisible = ref(true);
 
-const activeTab = ref('Console');
+const activeTab = ref(0);
 const tabScrollLeft = ref(0);
 const currentConsoleType = ref('all');
 const currentNetworkType = ref('all');
@@ -303,6 +371,14 @@ const emits = defineEmits<{
   (e: 'sendMessage', data: { type: string; data: Record<string, any> }): void;
 }>();
 
+function swiperShow(index: number) {
+  const show =
+    index == activeTab.value - 1 ||
+    index == activeTab.value ||
+    index == activeTab.value + 1;
+  return show;
+}
+
 const listenPostMessage = (data: DevTool.WindowData) => {
   if (!props.open) return;
   if (!isActive) return;
@@ -319,7 +395,11 @@ const listenPostMessage = (data: DevTool.WindowData) => {
       })
       .filter((item) => {
         return (
-          item.args?.some((arg) => arg?.includes?.(searchConsole.value)) ||
+          item.args?.some(
+            (arg) =>
+              arg.type === 'string' &&
+              arg.value?.includes?.(searchConsole.value),
+          ) ||
           item.position.includes(searchConsole.value) ||
           item?.stack?.includes(searchConsole.value)
         );
@@ -329,7 +409,15 @@ const listenPostMessage = (data: DevTool.WindowData) => {
           ...item,
           position: hightLight(item.position, searchConsole.value),
           stack: hightLight(item.stack, searchConsole.value),
-          args: item.args.map((arg) => hightLight(arg, searchConsole.value)),
+          args: item.args.map((arg) => {
+            if (arg.type === 'string') {
+              return {
+                type: 'string',
+                value: hightLight(arg.value, searchConsole.value),
+              };
+            }
+            return arg;
+          }),
         };
       });
 
@@ -455,13 +543,21 @@ const listenPostMessage = (data: DevTool.WindowData) => {
   if (data.sizeFormat) {
     sizeFormat.value = data.sizeFormat;
   }
+
+  if (data.appInfo) {
+    appInfo.value = data.appInfo;
+  }
+
+  if (data.captureScreenList) {
+    captureScreenList.value = data.captureScreenList;
+  }
 };
 
 let isActive = false;
 onMounted(() => {
   const windowInfo = uni.getStorageSync(DEV_WINDOW_INFO);
   if (windowInfo) {
-    activeTab.value = windowInfo?.activeTab || 'Console';
+    activeTab.value = windowInfo?.activeTab || 0;
     currentConsoleType.value = windowInfo?.currentConsoleType || 'all';
     currentNetworkType.value = windowInfo?.currentNetworkType || 'all';
     tabScrollLeft.value = windowInfo?.tabScrollLeft || 0;
@@ -515,6 +611,15 @@ function onChangeTabs() {
   setWindowInfo();
 }
 
+function onChangeSwiper({
+  detail,
+}: {
+  detail: { current: number; source: any };
+}) {
+  activeTab.value = detail.current;
+  setWindowInfo();
+}
+
 function onScrollTabs(e: any) {
   tabScrollLeft.value = e.detail.scrollLeft;
   debounceSetWindowInfo();
@@ -556,7 +661,9 @@ function onSearchConsole(value: string) {
   consoleList.value = backup.consoleList
     .filter((item) => {
       return (
-        item.args.some((arg) => arg.includes(value)) ||
+        item.args.some(
+          (arg) => arg.type === 'string' && arg.value.includes(value),
+        ) ||
         item.position.includes(value) ||
         item?.stack?.includes(value)
       );
@@ -566,7 +673,15 @@ function onSearchConsole(value: string) {
         ...item,
         position: hightLight(item.position, searchConsole.value),
         stack: hightLight(item.stack, searchConsole.value),
-        args: item.args.map((arg) => hightLight(arg, value)),
+        args: item.args.map((arg) => {
+          if (arg.type === 'string') {
+            return {
+              type: 'string',
+              value: hightLight(arg.value, value),
+            };
+          }
+          return arg;
+        }),
       };
     });
 }
@@ -761,6 +876,14 @@ function onUniEventClear() {
   });
 }
 
+function onCaptureScreenClear() {
+  captureScreenList.value = [];
+  basicSendMessage({
+    type: DEV_CAPTURE_SCREEN_CLEAR,
+    data: {},
+  });
+}
+
 function onGoTo(page: DevTool.Page) {
   basicSendMessage({
     type: DEV_PAGE_JUMP,
@@ -907,6 +1030,7 @@ function onChangePinia(value: Record<string, any>) {
   height: 0;
   background-color: transparent;
 }
+
 .dev-tool-window::after {
   content: '';
 }

package/dev/components/JsonPretty/components/Carets/index.vue

@@ -1,24 +1,12 @@
 <template>
   <view
-    v-if="isOpen && isClose"
+    v-if="isOpen || isClose"
     :class="`json-pretty-carets json-pretty-carets-${
       isOpen ? 'open' : 'close'
     }`"
     @click="onClick"
   >
-    <svg
-      viewBox="0 0 1024 1024"
-      focusable="false"
-      data-icon="caret-down"
-      width="1em"
-      height="1em"
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path
-        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-      ></path>
-    </svg>
+    <view class="json-pretty-caret-down"></view>
   </view>
 </template>
 <script lang="ts" setup>
@@ -60,4 +48,12 @@ function onClick(e: MouseEvent) {
 .json-pretty-carets-close {
   transform: rotate(-90deg);
 }
+
+.json-pretty-caret-down {
+  margin: 7px 4px;
+  border: 3px solid #000;
+  border-top-color: transparent;
+  border-left-color: transparent;
+  transform: rotate(45deg);
+}
 </style>

package/dev/components/JsonPretty/index.vue

@@ -16,51 +16,55 @@
         : style
     "
   >
-    <VirtualList
+    <VirtualListPro
       v-if="autoVirtual"
       :height="state.height"
-      :itemHeight="itemHeight"
+      :pageSize="pageSize"
       :data="flatData"
     >
-      <template v-slot="{ list }">
-        <TreeNode
-          v-for="item in list"
-          :key="item.id"
-          :data="data"
-          :rootPath="rootPath"
-          :indent="indent"
-          :node="item"
-          :collapsed="!!state.hiddenPaths[item.path]"
-          :theme="theme"
-          :showDoubleQuotes="showDoubleQuotes"
-          :showLength="showLength"
-          :checked="selectedPaths.includes(item.path)"
-          :selectableType="selectableType"
-          :showLine="showLine"
-          :showLineNumber="showLineNumber"
-          :showSelectController="showSelectController"
-          :selectOnClickNode="selectOnClickNode"
-          :nodeSelectable="nodeSelectable"
-          :highlightSelectedNode="highlightSelectedNode"
-          :editable="editable"
-          :editableTrigger="editableTrigger"
-          :showIcon="showIcon"
-          :showKeyValueSpace="showKeyValueSpace"
-          :showNodeActions="showNodeActions"
-          @nodeClick="handleNodeClick"
-          @nodeMouseover="handleNodeMouseover"
-          @bracketsClick="handleBracketsClick"
-          @iconClick="handleIconClick"
-          @selectedChange="handleSelectedChange"
-          @valueChange="handleValueChange"
-          :style="
-            itemHeight && itemHeight !== 20
-              ? { lineHeight: `${itemHeight}px` }
-              : {}
-          "
-        />
+      <template v-slot="{ list, start }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :index="start + index"
+          :key="start + index"
+        >
+          <TreeNode
+            :data="data"
+            :rootPath="rootPath"
+            :indent="indent"
+            :node="item"
+            :collapsed="!!state.hiddenPaths[item.path]"
+            :theme="theme"
+            :showDoubleQuotes="showDoubleQuotes"
+            :showLength="showLength"
+            :checked="selectedPaths.includes(item.path)"
+            :selectableType="selectableType"
+            :showLine="showLine"
+            :showLineNumber="showLineNumber"
+            :showSelectController="showSelectController"
+            :selectOnClickNode="selectOnClickNode"
+            :nodeSelectable="nodeSelectable"
+            :highlightSelectedNode="highlightSelectedNode"
+            :editable="editable"
+            :editableTrigger="editableTrigger"
+            :showIcon="showIcon"
+            :showKeyValueSpace="showKeyValueSpace"
+            :showNodeActions="showNodeActions"
+            @nodeClick="handleNodeClick"
+            @nodeMouseover="handleNodeMouseover"
+            @bracketsClick="handleBracketsClick"
+            @iconClick="handleIconClick"
+            @selectedChange="handleSelectedChange"
+            @valueChange="handleValueChange"
+            :style="
+              itemHeight && itemHeight !== 20
+                ? { lineHeight: `${itemHeight}px` }
+                : {}
+            "
+          />
+        </AutoSize>
       </template>
-    </VirtualList>
+    </VirtualListPro>
     <template v-else>
       <TreeNode
         v-for="item in state?.visibleData"
@@ -115,7 +119,8 @@ import {
 } from 'vue';
 import TreeNode from './components/TreeNode/index.vue';
 
-import VirtualList from '../VirtualList/index.vue';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
 
 import { emitError, jsonFlatten, cloneDeep, isFunction } from './utils';
 
@@ -162,6 +167,10 @@ const emits = defineEmits<Emits>();
 
 const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath));
 
+const pageSize = computed(() => {
+  return Math.ceil(props.height / props.itemHeight) + 5;
+});
+
 // 初始化折叠路径
 const initHiddenPaths = (
   deep: number,