vite-uni-dev-tool 0.0.10 → 0.0.12

package/dev/components/VirtualListPro/index.vue

@@ -1,13 +1,19 @@
 <template>
   <scroll-view
     :lower-threshold="preLodeHeight"
+    :scroll-with-animation="scrollWithAnimation"
     :class="['virtual-list', className]"
+    :style="style"
+    :scroll-into-view="innerScrollIntoView"
     scroll-y
     @scroll="onScroll"
     @scrolltolower="onScrollToLower"
   >
     <!-- 阈值判断 -->
-    <view :style="{ height: `${state.currentHeight}px` }"></view>
+    <view
+      :id="placeholderId"
+      :style="{ height: `${state.currentHeight}px` }"
+    ></view>
     <view>
       <!-- 将可视数据传入到slot -->
       <slot
@@ -16,10 +22,20 @@
         :start="(state.current - 1) * props.pageSize"
       ></slot>
     </view>
+
+    <view
+      v-if="state.currentHeight > props.height && showBackTop"
+      class="virtual-back-top"
+      @click="onBackTop"
+    >
+      ↑
+    </view>
   </scroll-view>
 </template>
 <script lang="ts" setup>
-import { reactive, watch, onBeforeMount, provide } from 'vue';
+import { nextTick } from 'vue';
+import { uniqueId } from '../../utils';
+import { reactive, watch, onBeforeMount, provide, computed, ref } from 'vue';
 
 const props = withDefaults(
   defineProps<{
@@ -37,6 +53,12 @@ const props = withDefaults(
     preLodeHeight?: number;
     /** 类名 */
     className?: string;
+    /** 滚动到指定元素 */
+    scrollIntoView?: string;
+    /** 滚动动画 */
+    scrollWithAnimation?: boolean;
+    /** 返回顶部 */
+    showBackTop?: boolean;
   }>(),
   {
     height: 400,
@@ -51,12 +73,17 @@ const state = reactive<{
   visitableData: any[];
   currentHeight: number;
   height: number;
+  scrollTop: number;
 }>({
   height: 0,
   current: 1,
   visitableData: [],
   currentHeight: 0,
+  scrollTop: 0,
 });
+
+const placeholderId = uniqueId('virtual-placeholder-');
+
 /**
  * 每一项的高度
  */
@@ -64,6 +91,19 @@ const itemsHeight: number[] = [];
 
 provide('itemsHeight', itemsHeight);
 
+const style = computed(() => {
+  return {
+    height:
+      typeof props.height === 'string' ? props.height : props.height + 'px',
+  };
+});
+
+const toView = ref('');
+
+const innerScrollIntoView = computed(() => {
+  return toView.value || props.scrollIntoView;
+});
+
 onBeforeMount(() => {
   // 初始渲染数据
   state.visitableData = props.data.slice(0, props.pageSize * 2);
@@ -165,5 +205,34 @@ function onSizeChange(index: number, height: number) {
   itemsHeight[index] = height;
 }
 provide('onSizeChange', onSizeChange);
+
+/** 返回顶部 */
+function onBackTop() {
+  toView.value = placeholderId;
+
+  nextTick(() => {
+    state.current = 1;
+    state.currentHeight = 0;
+    updateVisitableData('up');
+
+    toView.value = '';
+  });
+}
 </script>
-<style scoped></style>
+<style scoped>
+.virtual-list {
+  position: relative;
+}
+
+.virtual-back-top {
+  position: sticky;
+  bottom: 20px;
+  left: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
+</style>

package/dev/components/VuexList/index.vue

@@ -12,7 +12,7 @@
   </view>
 </template>
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import JsonPretty from '../JsonPretty/index.vue';
 import Empty from '../Empty/index.vue';
 const props = defineProps<{
@@ -39,7 +39,7 @@ function onUpdateData(data: Record<string, any>) {
   const firstKey = currentSelect?.path.split('.')?.slice(1)?.[0];
   emit('update:vuexList', data);
   emit('diffValue', {
-    [firstKey]: data[firstKey]
+    [firstKey]: data[firstKey],
   });
 }
 function onNodeClick(node: any) {

package/dev/components/WebSocket/WebSocketItem.vue

@@ -34,7 +34,12 @@
       }}</view>
     </view>
 
-    <WebSocketList v-if="showDetail" :ws="ws" @close="onClose" />
+    <WebSocketList
+      v-if="showDetail"
+      :ws="ws"
+      :zIndex="zIndex"
+      @close="onClose"
+    />
   </view>
 </template>
 <script lang="ts" setup>
@@ -45,7 +50,7 @@ import WebSocketList from './WebSocketList.vue';
 import { formatDate } from '../../utils';
 import type { DevTool } from '../../type';
 
-defineProps<{ ws: DevTool.WS }>();
+defineProps<{ ws: DevTool.WS; zIndex?: number }>();
 const showDetail = ref(false);
 
 function onClose() {

package/dev/components/WebSocket/WebSocketList.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="web-socket-list-container">
+  <view class="web-socket-list-container" :style="{ zIndex: zIndex }">
     <view class="web-socket-top">
       请求url:
 
@@ -48,7 +48,7 @@ import CloseButton from '../CloseButton/index.vue';
 import { formatDate } from '../../utils/index';
 import type { DevTool } from '../../type';
 
-defineProps<{ ws: DevTool.WS }>();
+defineProps<{ ws: DevTool.WS; zIndex?: number }>();
 const emit = defineEmits<{ (e: 'close'): void }>();
 
 function onClose() {
@@ -82,13 +82,10 @@ function onClick(item: {
   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/WebSocket/index.vue

@@ -18,14 +18,19 @@
       </Tag>
     </view>
 
-    <VirtualListPro :data="wsList" :pageSize="10" className="websocket-list">
+    <VirtualListPro
+      :data="wsList"
+      :pageSize="10"
+      :height="height"
+      className="websocket-list"
+    >
       <template v-slot="{ list, start }">
         <AutoSize
           v-for="(item, index) in list"
           :index="start + index"
           :key="start + index"
         >
-          <WebSocketItem :ws="item" />
+          <WebSocketItem :ws="item" :zIndex="zIndex" />
         </AutoSize>
         <Empty v-if="!wsList || wsList.length === 0" />
       </template>
@@ -40,11 +45,13 @@ import FilterInput from '../FilterInput/index.vue';
 import type { DevTool } from '../../type';
 import VirtualListPro from '../VirtualListPro/index.vue';
 import AutoSize from '../VirtualListPro/AutoSize.vue';
+import { onMounted, ref } from 'vue';
 
 defineProps<{
   wsList: DevTool.WS[];
   currentWebSocketType: string;
   modelValue: string;
+  zIndex?: number;
 }>();
 const emit = defineEmits<{
   (e: 'choose', type: string): void;
@@ -87,6 +94,12 @@ const webSocketFilter = [
 function onChoose(type: string) {
   emit('choose', type);
 }
+
+const height = ref(0);
+onMounted(() => {
+  const { windowHeight } = uni.getWindowInfo();
+  height.value = windowHeight - 32 - 32;
+});
 </script>
 <style scoped>
 .websocket-content {

package/dev/const.ts

@@ -1,14 +1,12 @@
 /**
  * 调试按钮事件
- * 缓存调试按钮显示隐藏
  */
-export const EVENT_DEV_BUTTON = 'event-dev-button';
+export const DEV_BUTTON_VISIBLE = 'dev-button-visible';
 
 /**
  * 调试弹窗事件
- * 缓存调试弹窗显示隐藏
  */
-export const EVENT_DEV_WINDOW = 'event-dev-window';
+export const DEV_WINDOW_VISIBLE = 'dev-window-visible';
 
 /**
  * app 发出的信息
@@ -21,15 +19,8 @@ export const DEV_APP_MESSAGE = 'dev-app-message';
 export const DEV_WINDOW_MESSAGE = 'dev-window-message';
 
 /**
- * 缓存调试按钮信息
+ * 调试器销毁
  */
-export const DEV_BUTTON_INFO = 'dev-button-info';
-
-/**
- * 缓存调试弹窗信息
- */
-export const DEV_WINDOW_INFO = ' dev-window-info';
-
 export const DEV_IS_DESTROY = 'dev-is-destroy';
 
 /**
@@ -163,6 +154,11 @@ export const DEV_UNI_EVENT_CLEAR = 'dev-uni-event-clear';
 export const DEV_RUN_JS = 'dev-uni-run-js';
 
 /**
- * 清空运行的js
+ * 清空截屏列表
+ */
+export const DEV_CAPTURE_SCREEN_CLEAR = 'dev-capture-screen-clear';
+
+/**
+ * 存储的dev-tool 信息
  */
-export const DEV_RUN_JS_CLEAR = 'dev-uni-run-js-clear';
+export const DEV_TOOL_INFO = 'dev-tool-info';

package/dev/devEvent/index.ts

@@ -22,14 +22,15 @@ import {
   DEV_WEBSOCKET_CLEAR,
   DEV_WINDOW_OPEN,
   DEV_APP_MESSAGE,
-  EVENT_DEV_BUTTON,
-  EVENT_DEV_WINDOW,
+  DEV_BUTTON_VISIBLE,
+  DEV_WINDOW_VISIBLE,
   DEV_WINDOW_MESSAGE,
   DEV_WINDOW_CLOSE,
   DEV_OPTION_GET,
   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';
@@ -71,6 +72,10 @@ export class DevEvent {
    * @memberof DevEvent
    */
   async postMessageFn() {
+    if (this.getDevToolDestroy()) {
+      return;
+    }
+
     const data = await this.store.getDevData();
     const size = calculateObjectSize(data);
     const sizeFormat = formatStorageSize(size);
@@ -98,7 +103,7 @@ export class DevEvent {
    * @memberof DevEvent
    */
   createDevTool() {
-    if (!this.store.getDevToolDestroy()) {
+    if (!this.getDevToolDestroy()) {
       console.warn('[DevTool] 调试器已存在，不在重新创建');
       return;
     }
@@ -114,8 +119,8 @@ export class DevEvent {
    * @memberof DevEvent
    */
   destroyDevTool() {
-    if (this.store.getDevToolDestroy()) {
-      console.warn('[DevTool] 调试器已存在，不在重新创建');
+    if (this.getDevToolDestroy()) {
+      console.warn('[DevTool] 调试器已经销毁了，不在重新销毁');
       return;
     }
     this.store.setRequestIndex(-1);
@@ -150,7 +155,7 @@ export class DevEvent {
 
     this.store.setDevToolDestroy(true);
 
-    this.eventBus.clear();
+    // this.eventBus.clear();
 
     console.warn('[DevTool] 调试器已销毁');
   }
@@ -174,10 +179,11 @@ export class DevEvent {
    * @memberof DevEvent
    */
   openDevToolWindow() {
+    if (this.getDevToolDestroy()) return;
     setTimeout(async () => {
       this.postMessage();
     }, 100);
-    this.eventBus.emit(EVENT_DEV_WINDOW, true);
+    this.eventBus.emit(DEV_WINDOW_VISIBLE, true);
   }
 
   /**
@@ -186,7 +192,8 @@ export class DevEvent {
    * @memberof DevEvent
    */
   closeDevToolWindow() {
-    this.eventBus.emit(EVENT_DEV_WINDOW, false);
+    if (this.getDevToolDestroy()) return;
+    this.eventBus.emit(DEV_WINDOW_VISIBLE, false);
   }
 
   /**
@@ -195,10 +202,10 @@ export class DevEvent {
    * @export
    */
   showDevToolButton() {
-    const isDestroy = uni.getStorageSync(DEV_IS_DESTROY) ?? false;
-    if (isDestroy) return;
-    this.eventBus.emit(EVENT_DEV_BUTTON, true);
-    uni.setStorageSync(EVENT_DEV_BUTTON, true);
+    if (this.getDevToolDestroy()) return;
+
+    this.eventBus.emit(DEV_BUTTON_VISIBLE, true);
+
     this.store.setDevToolVisible(true);
   }
 
@@ -208,10 +215,8 @@ export class DevEvent {
    * @return {*}
    */
   hideDevToolButton() {
-    const isDestroy = uni.getStorageSync(DEV_IS_DESTROY) ?? false;
-    if (isDestroy) return;
-    this.eventBus.emit(EVENT_DEV_BUTTON, false);
-    uni.setStorageSync(EVENT_DEV_BUTTON, false);
+    if (this.getDevToolDestroy()) return;
+    this.eventBus.emit(DEV_BUTTON_VISIBLE, false);
     this.store.setDevToolVisible(false);
   }
 
@@ -247,7 +252,8 @@ export class DevEvent {
    * @memberof DevEvent
    */
   switchTo(path: string) {
-    this.showDevToolButton();
+    // this.showDevToolButton();
+    this.closeDevToolWindow();
     uni.switchTab({
       url: path,
     });
@@ -260,7 +266,8 @@ export class DevEvent {
    * @memberof DevEvent
    */
   navigateTo(path: string) {
-    this.showDevToolButton();
+    // this.showDevToolButton();
+    this.closeDevToolWindow();
     uni.navigateTo({
       url: path,
     });
@@ -430,6 +437,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 +787,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(),
+          },
+        ]);
+      }
+    });
+  }
 }

package/dev/devStore/index.ts

@@ -1,6 +1,6 @@
 import type { DevTool } from '../type';
 
-import { DEV_IS_DESTROY, EVENT_DEV_BUTTON } from '../const';
+import { DEV_TOOL_INFO } from '../const';
 
 import {
   isNil,
@@ -12,6 +12,7 @@ import {
   isBoolean,
 } from '../utils/index';
 import { backup } from '../core';
+import { getDevToolInfo, setDevToolInfo } from '../devToolInfo';
 
 /** 数据存储中心  */
 export class DevStore {
@@ -26,6 +27,7 @@ export class DevStore {
     deviceInfo: {},
     windowInfo: {},
     systemInfo: {},
+    appInfo: {},
     wsList: [],
     netWorkStatus: {},
     uploadList: [],
@@ -36,6 +38,7 @@ export class DevStore {
       emit: 0,
       off: 0,
     },
+    captureScreenList: [],
   };
 
   /** 调试配置 */
@@ -50,8 +53,8 @@ export class DevStore {
   private wsDataMaxSize = 1000;
   /** 事件列表最大值 */
   private eventListMaxSize = 1000;
-  /** js 最大运行条数 */
-  private runJsMaxSize = 1000;
+  /** 截屏最大值 */
+  private captureScreenMaxSize = 1000;
 
   /** 缓存最大值 */
   cacheMaxSize = 8 * 1024 * 1024 * 10;
@@ -75,14 +78,22 @@ export class DevStore {
   /** 是否开启拦截Promise reject错误 */
   enableInterceptPromiseReject = false;
 
+  private zIndex = 1000;
+
   constructor() {
-    this.devToolDestroy = uni.getStorageSync(DEV_IS_DESTROY) ?? false;
-    this.devToolVisible = uni.getStorageSync(EVENT_DEV_BUTTON) ?? false;
+    const { devToolDestroy = false, devToolButtonVisible = false } =
+      uni.getStorageSync(DEV_TOOL_INFO);
+
+    this.devToolDestroy = devToolDestroy;
+    this.devToolVisible = devToolButtonVisible;
   }
 
   setDevToolVisible(visible: boolean) {
     this.devToolVisible = visible;
-    uni.setStorageSync(EVENT_DEV_BUTTON, visible);
+
+    setDevToolInfo({
+      devToolButtonVisible: visible,
+    });
   }
 
   getDevToolVisible() {
@@ -146,10 +157,13 @@ export class DevStore {
     this.wsDataMaxSize = options.wsDataMaxSize || 1000;
     this.cacheMaxSize = options.cacheMaxSize || 8 * 1024 * 1024 * 10;
     this.eventListMaxSize = options.eventListMaxSize || 1000;
+    this.captureScreenMaxSize = options.captureScreenMaxSize || 1000;
+    this.zIndex = options.zIndex || 1000;
+
+    const { devToolButtonVisible } = getDevToolInfo();
 
-    const devToolVisible = uni.getStorageSync(EVENT_DEV_BUTTON);
-    this.devToolVisible = isBoolean(devToolVisible)
-      ? devToolVisible
+    this.devToolVisible = isBoolean(devToolButtonVisible)
+      ? devToolButtonVisible
       : (options.initShowDevTool ?? true);
 
     this.setDevToolVisible(this.devToolVisible);
@@ -185,6 +199,14 @@ export class DevStore {
     const systemInfo = uni.getSystemInfoSync();
     const deviceInfo = uni.getDeviceInfo();
     const windowInfo = uni.getWindowInfo();
+
+    const appInfo = {
+      ...(await uni.getAppBaseInfo()),
+
+      // #ifndef H5
+      ...(await uni.getAppAuthorizeSetting()),
+      // #endif
+    };
     const ip = getWifiIp() || getLanIp() || (await getMicroAppIp());
     return {
       ...this.state,
@@ -192,6 +214,7 @@ export class DevStore {
       deviceInfo,
       windowInfo,
       devToolVisible: this.getDevToolVisible(),
+      appInfo,
       netWorkStatus: {
         ip,
         ...networkType,
@@ -254,8 +277,6 @@ export class DevStore {
 
       setValueByPath(this.piniaStore.state.value, key, value);
 
-      console.log('this.piniaStore.state.value: ', this.piniaStore.state.value);
-
       this.setPiniaList({
         ...(this.piniaStore.state.value ?? {}),
       });
@@ -336,6 +357,7 @@ export class DevStore {
     this.state.windowInfo = {};
     this.state.systemInfo = {};
     this.state.netWorkStatus = {};
+    this.state.appInfo = {};
 
     this.state.eventList = [];
     this.state.eventCount = {
@@ -344,6 +366,8 @@ export class DevStore {
       emit: 0,
       off: 0,
     };
+
+    this.state.captureScreenList = [];
   }
 
   addUploadTask(index: number | string, task: UniApp.UploadTask) {
@@ -613,12 +637,17 @@ export class DevStore {
   }
 
   setDevToolDestroy(destroy: boolean) {
-    uni.setStorageSync(DEV_IS_DESTROY, destroy);
     this.devToolDestroy = destroy;
+
+    setDevToolInfo({
+      devToolDestroy: destroy,
+    });
   }
 
   getDevToolDestroy() {
-    return this.devToolDestroy ?? (uni.getStorageSync(DEV_IS_DESTROY) || false);
+    const { devToolDestroy = false } = uni.getStorageSync(DEV_TOOL_INFO);
+
+    return this.devToolDestroy ?? devToolDestroy;
   }
 
   getCurrentPagePath() {
@@ -682,4 +711,22 @@ export class DevStore {
     };
     this.state.eventList = [];
   }
+
+  updateCaptureScreenList(captureScreenList: DevTool.CaptureScreenItem[]) {
+    const len = this.state.captureScreenList?.length ?? 0;
+    const max = this.captureScreenMaxSize;
+    if (len + captureScreenList.length > max) {
+      this.state.captureScreenList?.splice(
+        0,
+        len - max - captureScreenList.length,
+      );
+    }
+    this.state.captureScreenList?.push(...captureScreenList);
+
+    return this.state.captureScreenList;
+  }
+
+  clearCaptureScreenList() {
+    this.state.captureScreenList = [];
+  }
 }

package/dev/devToolInfo/index.ts

@@ -0,0 +1,26 @@
+import { DEV_TOOL_INFO } from '../const';
+import type { DevTool } from '../type';
+
+/**
+ * 缓存调试工具信息到本地
+ *
+ * @export
+ * @param {DevTool.DevToolInfo} info
+ */
+export function setDevToolInfo(info: DevTool.DevToolInfo) {
+  const devInfo = uni.getStorageSync(DEV_TOOL_INFO);
+  uni.setStorageSync(DEV_TOOL_INFO, {
+    ...devInfo,
+    ...info,
+  });
+}
+
+/**
+ * 获取本地缓存信息
+ *
+ * @export
+ * @return {*}
+ */
+export function getDevToolInfo() {
+  return uni.getStorageSync(DEV_TOOL_INFO) as DevTool.DevToolInfo;
+}