vite-uni-dev-tool 0.0.10 → 0.0.12

package/dev/components/DevToolWindow/index.vue

@@ -16,99 +16,143 @@
         <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"
+          :zIndex="zIndex + 1"
+          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"
+          :zIndex="zIndex + 1"
+          v-model="searchNetwork"
+          @choose="onNetworkChoose"
+          @search="onSearchNetwork"
+        />
+      </swiper-item>
+      <swiper-item>
+        <UploadList
+          v-if="swiperShow(3)"
+          :currentUploadType="currentUploadType"
+          :uploadList="uploadList"
+          :zIndex="zIndex + 1"
+          v-model="searchUpload"
+          @choose="onUploadChoose"
+          @search="onSearchUpload"
+        />
+      </swiper-item>
+      <swiper-item>
+        <WebSocket
+          v-if="swiperShow(4)"
+          :wsList="wsList"
+          :currentWebSocketType="currentWebSocketType"
+          :zIndex="zIndex + 1"
+          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"
+          :zIndex="zIndex + 1"
+          @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 +174,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,
@@ -151,87 +196,113 @@ import {
   DEV_UPLOAD_CLEAR,
   DEV_VUEX_CHANGE,
   DEV_WEBSOCKET_CLEAR,
-  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';
 import { eventBus } from '../../core';
+import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
 
 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 +338,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 +349,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');
@@ -290,19 +363,33 @@ const searchWs = ref('');
 const searchRoute = ref('');
 const searchStorage = ref('');
 
-const props = defineProps<{
-  open?: boolean;
-  data?: DevTool.WindowData;
-  sourceFileServers?: string[];
-  mode?: string;
-  useDevSource?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    open?: boolean;
+    data?: DevTool.WindowData;
+    sourceFileServers?: string[];
+    mode?: string;
+    useDevSource?: boolean;
+    zIndex?: number;
+  }>(),
+  {
+    zIndex: 1000,
+  },
+);
 
 const emits = defineEmits<{
   (e: 'close'): void;
   (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,16 +554,25 @@ 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';
-    currentConsoleType.value = windowInfo?.currentConsoleType || 'all';
-    currentNetworkType.value = windowInfo?.currentNetworkType || 'all';
-    tabScrollLeft.value = windowInfo?.tabScrollLeft || 0;
+  const devToolInfo = getDevToolInfo();
+
+  if (devToolInfo) {
+    activeTab.value = devToolInfo?.activeTab || 0;
+    currentConsoleType.value = devToolInfo?.currentConsoleType || 'all';
+    currentNetworkType.value = devToolInfo?.currentNetworkType || 'all';
+    tabScrollLeft.value = devToolInfo?.tabScrollLeft || 0;
   }
   if (props.data) {
     listenPostMessage(props.data);
@@ -497,6 +593,10 @@ onShow(() => {
 });
 onHide(() => {
   isActive = false;
+
+  setDevToolInfo({
+    devToolWindowVisible: false,
+  });
 });
 
 /** 发送消息给 uniapp */
@@ -508,7 +608,7 @@ function basicSendMessage(message: {
 }
 
 function setWindowInfo() {
-  uni.setStorageSync(DEV_WINDOW_INFO, {
+  setDevToolInfo({
     activeTab: activeTab.value,
     currentConsoleType: currentConsoleType.value,
     currentNetworkType: currentNetworkType.value,
@@ -527,6 +627,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 +892,14 @@ function onUniEventClear() {
   });
 }
 
+function onCaptureScreenClear() {
+  captureScreenList.value = [];
+  basicSendMessage({
+    type: DEV_CAPTURE_SCREEN_CLEAR,
+    data: {},
+  });
+}
+
 function onGoTo(page: DevTool.Page) {
   basicSendMessage({
     type: DEV_PAGE_JUMP,
@@ -889,7 +1006,7 @@ function onChangePinia(value: Record<string, any>) {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 1001;
   /* #ifdef H5 */
   padding: 50px 0;
   /* #endif */
@@ -929,6 +1046,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

@@ -21,6 +21,8 @@
       :height="state.height"
       :pageSize="pageSize"
       :data="flatData"
+      scroll-with-animation
+      showBackTop
     >
       <template v-slot="{ list, start }">
         <AutoSize

package/dev/components/NetworkList/NetworkDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="network-detail">
+  <view class="network-detail" :style="{ zIndex: zIndex }">
     <view class="network-detail-control">
       <Tag
         mode="info"
@@ -81,7 +81,7 @@ import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
 import CloseButton from '../CloseButton/index.vue';
 import type { DevTool } from '../../type';
-const props = defineProps<{ network: DevTool.NetworkItem }>();
+const props = defineProps<{ network: DevTool.NetworkItem; zIndex?: number }>();
 const emit = defineEmits<{ (e: 'close'): void }>();
 const selectItems = [
   {
@@ -151,13 +151,10 @@ function onClose() {
   position: fixed;
   width: 100vw;
   height: 100vh;
-  z-index: 1000;
+  z-index: 1001;
   top: 0;
   left: 0;
   padding: 0 16px;
-  /* #ifdef H5 */
-  padding: 50px 16px;
-  /* #endif */
 
   background-color: rgba(255, 255, 255, 0.95);
   box-sizing: border-box;

package/dev/components/NetworkList/NetworkItem.vue

@@ -3,7 +3,7 @@
     <view class="network-url-row">
       <Tag mode="info">{{ network.method }}</Tag>
 
-      <view class="network-url" v-html="network.url"> </view>
+      <view class="network-url" v-html="lastUrl"> </view>
 
       <Tag
         mode="main"
@@ -46,20 +46,32 @@
     </view>
   </view>
   <!-- <Transition name="slide-fade"> -->
-  <NetworkDetail v-if="showDetail" :network="network" @close="onClose" />
+  <NetworkDetail
+    v-if="showDetail"
+    :network="network"
+    :zIndex="zIndex"
+    @close="onClose"
+  />
   <!-- </Transition> -->
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import Tag from '../Tag/index.vue';
 import NetworkDetail from './NetworkDetail.vue';
 import { formatDate } from '../../utils';
 import type { DevTool } from '../../type';
-defineProps<{
+const props = defineProps<{
   network: DevTool.NetworkItem;
+  zIndex?: number;
 }>();
 const showDetail = ref(false);
+
+const lastUrl = computed(() => {
+  const start = props.network.url.lastIndexOf('/');
+  return props.network.url.slice(start + 1);
+});
+
 function onClose() {
   showDetail.value = false;
 }
@@ -70,22 +82,23 @@ function onClose() {
   border-bottom: 1px solid var(--dev-tool-border-color);
   font-size: var(--dev-tool-base-font-size);
 }
-.network-item .network-url-row {
+.network-url-row {
   display: flex;
   align-items: center;
 }
 
-.network-item .network-url-row .network-url {
+.network-url {
   margin-left: 4px;
   flex: 1;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.network-item .network-url-row .network-detail-icon {
+.network-detail-icon {
   margin-left: auto;
 }
 
-.network-item .network-info {
+.network-info {
   display: flex;
   align-items: center;
   justify-content: space-between;