vite-uni-dev-tool 0.0.10 → 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;
@@ -467,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;
@@ -527,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();
@@ -783,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,
@@ -929,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/Tabs/index.vue

@@ -5,15 +5,18 @@
       ref="tabsRef"
       scroll-x="true"
       enable-flex="true"
+      scroll-with-animation
       :scrollLeft="scrollLeft"
+      :scroll-into-view="scrollIntoView"
       @scroll="onScroll"
     >
       <view
         v-for="item in items"
         :key="item.key"
         :class="`tabs-item ${
-          item.key === modelValue ? 'tabs-item-active' : ''
+          item.index === modelValue ? 'tabs-item-active' : ''
         } `"
+        :id="`tabs-item-${item.index}`"
         @click="onChangeTabs(item)"
       >
         {{ item.label }}
@@ -27,12 +30,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import CloseButton from '../CloseButton/index.vue';
 // const activeKey = ref("Console");
-defineProps<{
-  modelValue: string;
-  items: { label: string; key: string; value: any }[];
+const props = defineProps<{
+  modelValue: number;
+  items: { label: string; key: string; value: any; index: number }[];
   scrollLeft?: number;
 }>();
 
@@ -40,14 +43,24 @@ const tabsRef = ref();
 
 const emit = defineEmits<{
   (e: 'close'): void;
-  (e: 'update:modelValue', value: string): void;
-  (e: 'change', value: string): void;
+  (e: 'update:modelValue', value: number): void;
+  (e: 'change', value: number): void;
   (e: 'scroll', value: any): void;
 }>();
-function onChangeTabs(item: { label: string; key: string; value: any }) {
+
+const scrollIntoView = computed(() => {
+  return `tabs-item-${props.modelValue}`;
+});
+
+function onChangeTabs(item: {
+  label: string;
+  key: string;
+  value: any;
+  index: number;
+}) {
   // activeKey.value = item.key;
-  emit('update:modelValue', item.key);
-  emit('change', item.key);
+  emit('update:modelValue', item.index);
+  emit('change', item.index);
 }
 function onClose() {
   emit('close');

package/dev/components/VirtualListPro/index.vue

@@ -1,6 +1,8 @@
 <template>
   <scroll-view
     :lower-threshold="preLodeHeight"
+    :scroll-into-view="scrollIntoView"
+    :scroll-with-animation="scrollWithAnimation"
     :class="['virtual-list', className]"
     scroll-y
     @scroll="onScroll"
@@ -37,6 +39,10 @@ const props = withDefaults(
     preLodeHeight?: number;
     /** 类名 */
     className?: string;
+    /** 滚动到指定元素 */
+    scrollIntoView?: string;
+    /** 滚动动画 */
+    scrollWithAnimation?: boolean;
   }>(),
   {
     height: 400,

package/dev/const.ts

@@ -162,7 +162,5 @@ export const DEV_UNI_EVENT_CLEAR = 'dev-uni-event-clear';
  */
 export const DEV_RUN_JS = 'dev-uni-run-js';
 
-/**
- * 清空运行的js
- */
-export const DEV_RUN_JS_CLEAR = 'dev-uni-run-js-clear';
+/** 清空截屏列表 */
+export const DEV_CAPTURE_SCREEN_CLEAR = 'dev-capture-screen-clear';

package/dev/devEvent/index.ts

@@ -30,6 +30,7 @@ import {
   DEV_OPTION_SEND,
   DEV_UNI_EVENT_CLEAR,
   DEV_RUN_JS,
+  DEV_CAPTURE_SCREEN_CLEAR,
 } from '../const';
 import { DevStore } from '../devStore';
 import type { DevTool } from '../type';
@@ -247,7 +248,8 @@ export class DevEvent {
    * @memberof DevEvent
    */
   switchTo(path: string) {
-    this.showDevToolButton();
+    // this.showDevToolButton();
+    this.closeDevToolWindow();
     uni.switchTab({
       url: path,
     });
@@ -260,7 +262,8 @@ export class DevEvent {
    * @memberof DevEvent
    */
   navigateTo(path: string) {
-    this.showDevToolButton();
+    // this.showDevToolButton();
+    this.closeDevToolWindow();
     uni.navigateTo({
       url: path,
     });
@@ -430,6 +433,10 @@ export class DevEvent {
         else if (data.type === DEV_RUN_JS) {
           this.devRunJS(data.data.code);
         }
+        // 清空截屏列表
+        else if (data.type === DEV_CAPTURE_SCREEN_CLEAR) {
+          this.store.clearCaptureScreenList();
+        }
       },
     );
   }
@@ -776,4 +783,24 @@ export class DevEvent {
         this.postMessageFn();
       });
   }
+
+  /**
+   * 更新截屏列表
+   *
+   * @param {DevTool.CaptureScreenItem[]} list
+   * @memberof DevEvent
+   */
+  updateCaptureScreenList(list: DevTool.CaptureScreenItem[]) {
+    this.store.updateCaptureScreenList(list);
+    this.postMessage();
+  }
+
+  /**
+   * 清空截屏列表
+   *
+   * @memberof DevEvent
+   */
+  clearCaptureScreenList() {
+    this.store.clearCaptureScreenList();
+  }
 }

package/dev/devIntercept/index.ts

@@ -724,4 +724,22 @@ export class DevIntercept {
     this.interceptUniEventFactory('emit');
     this.interceptUniEventFactory('off');
   }
+
+  /**
+   * 监听截屏
+   *
+   * @memberof DevIntercept
+   */
+  interceptCaptureScreen() {
+    uni.onUserCaptureScreen(() => {
+      if (!this.event.getDevToolDestroy()) {
+        this.event.updateCaptureScreenList([
+          {
+            position: getCurrentPagePath(),
+            timer: getCurrentDate(),
+          },
+        ]);
+      }
+    });
+  }
 }