vite-uni-dev-tool 0.0.6 → 0.0.8

package/dev/components/DevToolTitle/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <view class="dev-tool-title" :style="style"> <slot /> </view>
+</template>
+<script lang="ts" setup>
+defineProps<{ style?: any }>();
+</script>
+<style scoped>
+.dev-tool-title {
+  display: flex;
+  align-items: center;
+  height: 32px;
+}
+.dev-tool-title::before {
+  content: '';
+  margin-right: 8px;
+  width: 2px;
+  height: 18px;
+  border-radius: 2px;
+  background-color: var(--dev-tool-main-color);
+}
+</style>

package/dev/components/DevToolWindow/index.vue

@@ -27,6 +27,7 @@
         v-model="searchConsole"
         @choose="onConsoleChoose"
         @search="onSearchConsole"
+        @run="onRunJS"
       />
       <NetworkList
         :currentNetworkType="currentNetworkType"
@@ -64,6 +65,15 @@
         @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"
@@ -119,6 +129,8 @@ import DeviceInfo from '../DeviceInfo/index.vue';
 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 {
   DEV_BUTTON_SHOW_OR_HIDE,
   DEV_CONSOLE_CLEAR,
@@ -141,9 +153,13 @@ import {
   DEV_WEBSOCKET_CLEAR,
   DEV_WINDOW_INFO,
   DEV_APP_MESSAGE,
+  DEV_UNI_EVENT_CLEAR,
+  DEV_RUN_JS_CLEAR,
+  DEV_RUN_JS,
 } from '../../const';
 import { debounce, hightLight } from '../../utils/index';
 import type { DevTool } from '../../type';
+import { eventBus } from '../../core';
 
 const items = [
   {
@@ -171,12 +187,16 @@ const items = [
     label: 'WebSocket',
     value: 'WebSocket',
   },
-
   {
     key: 'Route',
     label: 'Route',
     value: 'Route',
   },
+  {
+    key: 'UniEvent',
+    label: 'UniEvent',
+    value: 'UniEvent',
+  },
   {
     key: 'Storage',
     label: 'Storage',
@@ -222,6 +242,8 @@ const backup: {
   wsList: DevTool.WS[];
   uploadList: DevTool.UploadItem[];
   routeList: DevTool.Page[];
+  eventList: DevTool.EventItem[];
+  runJSList: DevTool.RunJSItem[];
 } = {
   consoleList: [],
   networkList: [],
@@ -229,6 +251,8 @@ const backup: {
   wsList: [],
   uploadList: [],
   routeList: [],
+  eventList: [],
+  runJSList: [],
 };
 const consoleList = ref<DevTool.ConsoleItem[]>([]);
 const networkList = ref<DevTool.NetworkItem[]>([]);
@@ -241,6 +265,9 @@ const piniaList = ref<Record<string, any>>({});
 const systemInfo = ref<Record<string, any>>({});
 const deviceInfo = ref<Record<string, any>>({});
 const windowInfo = ref<Record<string, any>>({});
+const eventList = ref<DevTool.EventItem[]>([]);
+const eventCount = ref<DevTool.EventCount>();
+
 const netWorkStatus = ref<{
   isConnected?: boolean;
   networkType?: string;
@@ -292,7 +319,7 @@ const listenPostMessage = (data: DevTool.WindowData) => {
       })
       .filter((item) => {
         return (
-          item.args.some((arg) => arg.includes(searchConsole.value)) ||
+          item.args?.some((arg) => arg?.includes?.(searchConsole.value)) ||
           item.position.includes(searchConsole.value) ||
           item?.stack?.includes(searchConsole.value)
         );
@@ -394,6 +421,13 @@ const listenPostMessage = (data: DevTool.WindowData) => {
       });
     backup.routeList = [...data.routeList];
   }
+  if (data.eventList) {
+    eventList.value = [...data.eventList];
+  }
+
+  if (data.eventCount) {
+    eventCount.value = { ...data.eventCount };
+  }
 
   if (data.vuexList) {
     vuexList.value = data.vuexList;
@@ -439,11 +473,11 @@ onMounted(() => {
 
 onLoad(() => {
   isActive = true;
-  uni.$on(DEV_APP_MESSAGE, listenPostMessage);
+  eventBus.on(DEV_APP_MESSAGE, listenPostMessage);
 });
 onUnload(() => {
   isActive = false;
-  uni.$off(DEV_APP_MESSAGE, listenPostMessage);
+  eventBus.off(DEV_APP_MESSAGE, listenPostMessage);
 });
 
 onShow(() => {
@@ -509,6 +543,15 @@ function onConsoleChoose(
   setWindowInfo();
 }
 
+function onRunJS(code: string) {
+  basicSendMessage({
+    type: DEV_RUN_JS,
+    data: {
+      code,
+    },
+  });
+}
+
 function onSearchConsole(value: string) {
   consoleList.value = backup.consoleList
     .filter((item) => {
@@ -704,6 +747,20 @@ function onSearchStorage(value: string) {
     });
 }
 
+function onUniEventClear() {
+  eventList.value = [];
+  eventCount.value = {
+    on: 0,
+    once: 0,
+    emit: 0,
+    off: 0,
+  };
+  basicSendMessage({
+    type: DEV_UNI_EVENT_CLEAR,
+    data: {},
+  });
+}
+
 function onGoTo(page: DevTool.Page) {
   basicSendMessage({
     type: DEV_PAGE_JUMP,
@@ -810,7 +867,7 @@ function onChangePinia(value: Record<string, any>) {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 10000;
+  z-index: 1000;
   /* #ifdef H5 */
   padding: 50px 0;
   /* #endif */

package/dev/components/FilterInput/index.vue

@@ -4,7 +4,7 @@
       :class="`filter-input`"
       :value="modelValue"
       :placeholder="placeholder || '请输入'"
-      @input="debounceInput"
+      @confirm="debounceInput"
     />
     <view class="filter-input-clear" @click="onClear"> × </view>
   </view>

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

@@ -3,18 +3,34 @@
     :class="`json-pretty-check-controller ${model ? 'is-checked' : ''}`"
     @click="onClick"
   >
-    <view :class="`json-pretty-check-controller-inner is-${uiType}`" />
+    <!-- <view
+      :class="`json-pretty-check-controller-inner is-${uiType}`"
+      @click="onChange"
+    >
+    </view>
     <input
       :checked="model"
       :class="`json-pretty-check-controller-original is-${uiType}`"
       :type="uiType"
       @change="onChange"
+    /> -->
+
+    <checkbox
+      v-if="uiType === 'checkbox'"
+      :checked="model"
+      style="transform: scale(0.6)"
+      @change="onChange"
+    />
+    <radio
+      v-if="uiType === 'radio'"
+      :checked="model"
+      style="transform: scale(0.6)"
+      @change="onChange"
     />
   </view>
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue';
-// import "./style.less";
 const props = defineProps<{ checked: boolean; isMultiple: boolean }>();
 const emit = defineEmits<{
   (e: 'change', value: boolean): void;
@@ -24,11 +40,11 @@ const emit = defineEmits<{
 const uiType = computed(() => (props.isMultiple ? 'checkbox' : 'radio'));
 const model = computed({
   get: (): boolean => props.checked,
-  set: (val) => emit('update:modelValue', val)
+  set: (val) => emit('update:modelValue', val),
 });
 
 function onChange() {
-  emit('change', model.value);
+  emit('change', !model.value);
 }
 
 function onClick(e: MouseEvent) {
@@ -65,7 +81,8 @@ function onClick(e: MouseEvent) {
   background-color: #fff;
   z-index: 1;
   cursor: pointer;
-  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+  transition:
+    border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
     background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
 }
 .json-pretty-check-controller .json-pretty-check-controller-inner:after {

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

@@ -12,9 +12,9 @@
     @mouseover="handleNodeMouseover"
     :style="style"
   >
-    <view v-if="showLineNumber" class="json-pretty-node-index">{{
-      node.id + 1
-    }}</view>
+    <view v-if="showLineNumber" class="json-pretty-node-index">
+      {{ node.id + 1 }}
+    </view>
 
     <CheckController
       v-if="
@@ -46,9 +46,9 @@
       <slot name="render-node-key" :node="props.node" :default-key="prettyKey">
         {{ prettyKey }}
       </slot>
-      <view class="json-pretty-colon">{{
-        `:${showKeyValueSpace ? ' ' : ''}`
-      }}</view>
+      <view class="json-pretty-colon">
+        {{ `:${showKeyValueSpace ? ' ' : ''}` }}
+      </view>
     </view>
 
     <view class="json-pretty-value-wrapper">
@@ -74,20 +74,19 @@
           >
             {{ defaultValue }}
           </slot>
+          <text v-if="node.showComma">,</text>
         </view>
       </view>
 
-      <view v-if="node.showComma">,</view>
-
       <view v-if="showLength && collapsed" class="json-pretty-comment">
         // {{ node.length }} items
       </view>
     </view>
     <view class="json-pretty-tree-node-actions" v-if="showNodeActions">
       <slot name="render-node-actions" :copy="handleCopy">
-        <view @click="handleCopy" class="json-pretty-tree-node-actions-item"
-          >copy</view
-        >
+        <view @click="handleCopy" class="json-pretty-tree-node-actions-item">
+          copy
+        </view>
       </slot>
     </view>
   </view>
@@ -165,7 +164,7 @@ const defaultValue = computed(() => {
   } else if (value === undefined) {
     value = 'undefined';
   }
-  return dataType.value === 'string' ? `"${value}"` : value + '';
+  return dataType.value === 'string' ? `"${value}"` : value?.toString();
 });
 
 const handleBracketsClick = () => {
@@ -231,7 +230,7 @@ const handleCopy = () => {
 <style scoped>
 .json-pretty-tree-node {
   display: flex;
-  align-items: center;
+  /* align-items: center; */
   position: relative;
   line-height: 20px;
 }
@@ -314,8 +313,10 @@ const handleCopy = () => {
   align-items: center;
 }
 .json-pretty-value {
-  /* word-break: break-word; */
-  white-space: nowrap;
+  word-break: break-all;
+  white-space: normal;
+  /* white-space: pre-line; */
+  /* white-space: nowrap; */
 }
 .json-pretty-value-null {
   color: var(--json-pretty-color-null);

package/dev/components/JsonPretty/index.vue

@@ -16,62 +16,51 @@
         : style
     "
   >
-    <scroll-view
-      v-if="virtual"
-      class="json-pretty-tree-list"
-      scroll-y
-      scroll-x
-      :style="{ height: `${height}px` }"
-      @scroll="handleTreeScroll"
-      ref="treeRef"
+    <VirtualList
+      v-if="autoVirtual"
+      :height="state.height"
+      :itemHeight="itemHeight"
+      :data="flatData"
     >
-      <view
-        class="json-pretty-tree-list-holder"
-        :style="{ height: `${flatData.length * itemHeight}px` }"
-      >
-        <view
-          class="json-pretty-tree-list-holder-inner"
-          :style="{ transform: `translateY(${state.translateY}px)` }"
-        >
-          <TreeNode
-            v-for="item in state?.visibleData"
-            :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` }
-                : {}
-            "
-          />
-        </view>
-      </view>
-    </scroll-view>
+      <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>
+    </VirtualList>
     <template v-else>
       <TreeNode
         v-for="item in state?.visibleData"
@@ -115,7 +104,6 @@
 
 <script setup lang="ts">
 import {
-  ref,
   reactive,
   computed,
   watchEffect,
@@ -127,6 +115,8 @@ import {
 } from 'vue';
 import TreeNode from './components/TreeNode/index.vue';
 
+import VirtualList from '../VirtualList/index.vue';
+
 import { emitError, jsonFlatten, cloneDeep, isFunction } from './utils';
 
 import type { NodeDataType, ScrollEvent, Tree } from './type';
@@ -170,9 +160,6 @@ const props = withDefaults(defineProps<Tree>(), {
 });
 const emits = defineEmits<Emits>();
 
-// 初始化数据
-const treeRef = ref<HTMLElement | null>(null);
-
 const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath));
 
 // 初始化折叠路径
@@ -203,12 +190,14 @@ interface State {
   translateY: number;
   visibleData: NodeDataType[] | null;
   hiddenPaths: Record<string, 1>;
+  height: number;
 }
 
 const state = reactive<State>({
   translateY: 0,
   visibleData: [],
   hiddenPaths: initHiddenPaths(props.deep, props.collapsedNodeLength),
+  height: props.height ?? 400,
 });
 
 // 计算属性
@@ -263,12 +252,22 @@ const propsErrorMessage = computed(() => {
     : '';
 });
 
+const autoVirtual = computed(() => {
+  if (props.virtual) return true;
+  if (typeof props.autoVirtualRow === 'number') {
+    if (flatData.value.length > props.autoVirtualRow) {
+      return true;
+    }
+  }
+  return false;
+});
+
 // 更新可见数据
+// 优化 虚拟列表，每项高度自适应
 const updateVisibleData = (scrollTop: number = 0) => {
   const flatDataValue = flatData.value ?? [];
-  if (props.virtual) {
+  if (autoVirtual.value) {
     const visibleCount = props.height / props.itemHeight;
-    // const scrollTop = treeRef.value?.scrollTop || 0;
     const scrollCount = Math.floor(scrollTop / props.itemHeight);
     let start =
       scrollCount < 0
@@ -336,6 +335,10 @@ const updateCollapsedPaths = (collapsed: boolean, path: string) => {
     delete newPaths[path];
     state.hiddenPaths = newPaths;
   }
+
+  if (path === props.rootPath) {
+    state.height = collapsed ? props.itemHeight : props.height;
+  }
 };
 
 const handleBracketsClick = (collapsed: boolean, node: NodeDataType) => {
@@ -386,6 +389,19 @@ watch(
   },
 );
 
+// 监听是否折叠，默认不折叠
+watch(
+  () => props.collapsed,
+  (val) => {
+    if (val) {
+      updateCollapsedPaths(true, props.rootPath);
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
 // 生命周期钩子
 onMounted(() => {
   updateVisibleData();
@@ -443,20 +459,6 @@ onUnmounted(() => {
   white-space: nowrap;
 }
 
-.json-pretty-tree-list {
-  overflow: auto;
-  position: relative;
-}
-
-.json-pretty-tree-list-holder {
-  position: relative;
-}
-
-.json-pretty-tree-list-holder-inner {
-  position: absolute;
-  width: 100%;
-}
-
 .dark {
   /* 深色主题样式 */
 }

package/dev/components/JsonPretty/type.ts

@@ -104,6 +104,8 @@ export type Tree = Partial<TreeNodeProps> &
       collapsedOnClickBrackets: boolean;
       style: CSSProperties;
       pathCollapsible: (node: NodeDataType) => boolean;
+      /** 超过行数将会自动启用虚拟列表 */
+      autoVirtualRow: number;
     } & TreeRequired
   >;
 

package/dev/components/NetworkList/NetworkDetail.vue

@@ -151,7 +151,7 @@ function onClose() {
   position: fixed;
   width: 100vw;
   height: 100vh;
-  z-index: 10000;
+  z-index: 1000;
   top: 0;
   left: 0;
   padding: 0 16px;