vite-uni-dev-tool 0.0.9 → 0.0.10

package/README.md

@@ -151,6 +151,14 @@ uni.__dev__console.log('hello vite-uni-dev-tool');
 
 ## 更新日志
 
+### 0.0.10
+
+- 修复 console 过滤异常
+
+### 0.0.9
+
+- 修复 template 多节点造成的 createIntersectionObserver 异常
+
 ### 0.0.8
 
 - 修复多 template 注入调试工具异常

package/dev/components/AutoSizer/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <view class="auto-sizer">
+    <!-- 大小和slot 内容宽度一致 -->
+    <view class="listener-slot">
+      <slot></slot>
+    </view>
+
+    <!-- 变大监听固定在 listener-slot 右下角大1px位置 变大时 相交触发监听 -->
+    <view
+      class="anchor-height-add"
+      :style="{
+        top: listenerSlot.height + 1 + 'px',
+      }"
+    >
+    </view>
+
+    <!-- 变小监听固定在 listener-slot 右下角小1px位置 减小时 离开触发监听 -->
+    <view
+      class="anchor-height-sub"
+      :style="{
+        top: listenerSlot.height - 1 + 'px',
+      }"
+    >
+    </view>
+
+    <!-- 变大监听固定在 listener-slot 右下角大1px位置 变大时 相交触发监听 -->
+    <view
+      class="anchor-width-add"
+      :style="{
+        left: listenerSlot.width + 1 + 'px',
+        top: '0px',
+      }"
+    >
+    </view>
+
+    <!-- 变小监听固定在 listener-slot 右下角小1px位置 减小时 离开触发监听 -->
+    <view
+      class="anchor-width-sub"
+      :style="{
+        left: listenerSlot.width - 1 + 'px',
+        top: '0px',
+      }"
+    >
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import {
+  getCurrentInstance,
+  onMounted,
+  inject,
+  reactive,
+  onUnmounted,
+} from 'vue';
+import { debounce } from '../../utils';
+
+type Size = {
+  width: number;
+  height: number;
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+};
+
+const props = defineProps<{
+  index: number;
+  immediate?: boolean;
+}>();
+
+const emit = defineEmits<{ (e: 'resize', size: Size): void }>();
+
+let isMounted = false;
+
+const listenerSlot = reactive({
+  width: 0,
+  height: 0,
+});
+
+const size: Size = {
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+};
+
+const instance = getCurrentInstance();
+
+const query = uni.createSelectorQuery().in(instance);
+
+const onSizeChange =
+  inject<(index: number, height: number) => void>('onSizeChange');
+
+/** 外界记录的高度 */
+const itemsHeight = inject<number[]>('itemsHeight');
+
+const debounceReact = debounce(
+  (rect: UniApp.NodeInfo | UniApp.NodeInfo[]) => {
+    if (Array.isArray(rect)) return;
+
+    // 获取屏幕尺寸
+    const { windowWidth, windowHeight } = uni.getSystemInfoSync();
+
+    // 在尺寸更新时限制最大值
+    listenerSlot.height = Math.min(rect.height ?? 0, windowHeight);
+    listenerSlot.width = Math.min(rect.width ?? 0, windowWidth);
+
+    onSizeChange?.(props.index, rect.height ?? 0);
+
+    size.width = rect.width ?? 0;
+    size.height = rect.height ?? 0;
+    size.top = rect.top ?? 0;
+    size.left = rect.left ?? 0;
+    size.right = rect.right ?? 0;
+    size.bottom = rect.bottom ?? 0;
+
+    if (props.immediate && !isMounted) {
+      emit('resize', size);
+    }
+
+    if (isMounted) {
+      emit('resize', size);
+    }
+
+    isMounted = true;
+  },
+  100,
+  true,
+);
+function getSize() {
+  query.select('.listener-slot').boundingClientRect(debounceReact).exec();
+}
+
+const debounceGetSize = debounce(getSize, 100, true);
+
+let observer: UniNamespace.IntersectionObserver;
+onMounted(() => {
+  // 防止重复获取
+  // TODO
+  // if (itemsHeight && itemsHeight?.[props.index]) return;
+
+  // 初始大小
+  debounceGetSize();
+
+  // TODO 只有可视范围之内才获取大小
+  observer = uni.createIntersectionObserver(instance, { thresholds: [0, 1] });
+  // 变大监听
+  observer
+    .relativeTo('.auto-sizer')
+    .observe('.anchor-height-add', debounceGetSize);
+  // 变小监听
+  observer
+    .relativeTo('.auto-sizer')
+    .observe('.anchor-height-sub', debounceGetSize);
+
+  // 变大监听
+  observer
+    .relativeTo('.auto-sizer')
+    .observe('.anchor-width-add', debounceGetSize);
+  // 变小监听
+  observer
+    .relativeTo('.auto-sizer')
+    .observe('.anchor-width-sub', debounceGetSize);
+});
+
+onUnmounted(() => {
+  // 销毁监听
+  observer.disconnect();
+});
+</script>
+
+<style scoped>
+.auto-sizer {
+  position: relative;
+  overflow: hidden;
+  width: min-content;
+  height: min-content;
+}
+
+.anchor-height-add,
+.anchor-height-sub,
+.anchor-width-add,
+.anchor-width-sub {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+
+  background-color: skyblue;
+  visibility: hidden;
+}
+</style>

package/dev/components/AutoSizer/index1.vue

@@ -0,0 +1,186 @@
+<template>
+  <view
+    class="l-resize l-class"
+    :class="{ 'l-resize-target': hasNoDefaultSlot }"
+    :style="[styles, lStyle]"
+  >
+    <!--插槽需要脱离父容器文档流，防止父容器固宽固高，进而导致插槽大小被被父容器限制-->
+    <view
+      ref="l-resize__container"
+      class="l-resize__container l-container-class"
+      :style="[lStyle]"
+    >
+      <!--被监听的插槽-->
+      <slot></slot>
+      <!--监听插槽变大-->
+      <scroll-view
+        class="l-resize__wrapper"
+        :scroll-y="true"
+        :scroll-x="true"
+        :scroll-top="expandScrollTop"
+        :scroll-left="expandScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view
+          class="l-resize__wrapper--placeholder"
+          style="height: 100000px; width: 100000px"
+        ></view>
+      </scroll-view>
+      <!--监听插槽变小-->
+      <scroll-view
+        class="l-resize__wrapper"
+        :scroll-y="true"
+        :scroll-x="true"
+        :scroll-top="shrinkScrollTop"
+        :scroll-left="shrinkScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view
+          class="l-resize__wrapper--placeholder"
+          style="height: 250%; width: 250%"
+        ></view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, getCurrentInstance, computed } from 'vue';
+import { getRect, addUnit } from './utils';
+
+interface ResizeResult {
+  bottom?: number;
+  top?: number;
+  left?: number;
+  right?: number;
+  height?: number;
+  width?: number;
+}
+
+defineProps<{
+  lStyle?: any;
+}>();
+
+const emit = defineEmits(['resize']);
+
+const context = getCurrentInstance();
+const width = ref(0);
+const hasNoDefaultSlot = ref(false);
+const height = ref(0);
+const expandScrollTop = ref(0);
+const expandScrollLeft = ref(0);
+const shrinkScrollTop = ref(0);
+const shrinkScrollLeft = ref(0);
+
+let scrollEventCount = 0;
+let lastHeight = 0;
+let lastWidth = 0;
+const querySelector = '.l-resize__container';
+let onScrollHandlerClone = () => {
+  getRect(querySelector, context).then((res: ResizeResult) => {
+    // 前两次滚动事件被触发，说明 created 的修改已渲染，通知用户代码当前容器大小
+    if (scrollEventCount++ === 0) {
+      resizeEvent(res);
+    }
+    // 滚动条拉到底部会触发两次多余的事件，屏蔽掉。
+    if (scrollEventCount < 3) return;
+    // 手动设置父容器高宽，防止父容器坍塌
+    // 滚动完，重新获取容器新的高度
+    const newHeight = res.height;
+    const newWidth = res.width;
+    // 立即填充父容器高宽
+    height.value = newHeight ?? 0;
+    width.value = newWidth ?? 0;
+    // 宽高都改变时，只需要触发一次 size 事件
+    const emitStack = [];
+    if (newHeight !== lastHeight) {
+      lastHeight = newHeight ?? 0;
+      emitStack.push(1);
+    }
+    if (newWidth !== lastWidth) {
+      lastWidth = newWidth ?? 0;
+      emitStack.push(1);
+    }
+    if (emitStack.length !== 0) {
+      resizeEvent(res);
+    }
+    // 滚动条拉到底部（如果使用 nextTick 效果更佳）
+    scrollToBottom({ width: lastWidth, height: lastHeight });
+  });
+};
+let onScrollHandler = () => {
+  if (onScrollHandlerClone) {
+    onScrollHandlerClone();
+  }
+};
+const scrollToBottom = (res: Record<string, number>) => {
+  expandScrollTop.value = 100000 + res.height;
+  shrinkScrollTop.value = 3 * height.value + res.height;
+  expandScrollLeft.value = 100000 + res.width;
+  shrinkScrollLeft.value = 3 * width.value + res.width;
+};
+const resizeEvent = (res: ResizeResult) => {
+  const result: any = {};
+  ['bottom', 'top', 'left', 'right', 'height', 'width'].forEach((propName) => {
+    result[propName] = res[propName as keyof ResizeResult];
+  });
+  emit('resize', result);
+};
+const styles = computed(() => {
+  if (context && context.slots?.default && (width.value || height.value)) {
+    return {
+      width: addUnit(width.value),
+      height: addUnit(height.value),
+    };
+  }
+  return {};
+});
+onMounted(() => {
+  // const options = { context };
+  hasNoDefaultSlot.value = !context?.slots.default;
+  getRect(querySelector, context).then((res) => {
+    // 闭包记录容器高度
+    lastHeight = res.height ?? 0;
+    lastWidth = res.width ?? 0;
+    // 立即填充父容器高宽
+    width.value = lastWidth;
+    height.value = lastHeight;
+
+    scrollToBottom({ width: lastWidth, height: lastHeight });
+  });
+});
+</script>
+<style lang="scss" scoped>
+.l-resize {
+  &__container {
+    position: absolute;
+    min-width: 1px;
+    min-height: 1px;
+  }
+  &-target,
+  &__wrapper {
+    background-color: aqua;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -9999;
+    overflow: hidden;
+
+    visibility: hidden;
+  }
+  &-target {
+    .l-resize__container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &__wrapper {
+    &--placeholder {
+      transition: 0s;
+
+      animation: none;
+    }
+  }
+}
+</style>

package/dev/components/AutoSizer/utils.ts

@@ -0,0 +1,49 @@
+import type { ComponentInternalInstance, ComponentPublicInstance } from 'vue';
+
+export function getRect(
+  selector: string,
+  context: ComponentInternalInstance | null | any,
+  node: boolean = false,
+) {
+  // 之前是个对象，现在改成实例，防止旧版会报错
+  if (context == null) {
+    return Promise.reject('context is null');
+  }
+  if (context?.context) {
+    context = context.context;
+  }
+
+  return new Promise<UniNamespace.NodeInfo>((resolve, reject) => {
+    const dom = uni.createSelectorQuery().in(context).select(selector);
+    const result: any = (rect: UniNamespace.NodeInfo) => {
+      if (rect) {
+        resolve(rect);
+      } else {
+        reject('no rect');
+      }
+    };
+
+    if (!node) {
+      dom.boundingClientRect(result).exec();
+    } else {
+      dom
+        .fields(
+          {
+            node: true,
+            size: true,
+            rect: true,
+          },
+          result,
+        )
+        .exec();
+    }
+  });
+}
+
+export function addUnit(value?: string | number): string {
+  if (!value) {
+    return '0px';
+  }
+
+  return typeof value === 'number' ? `${value}px` : value;
+}

package/dev/components/ConsoleList/index.vue

@@ -12,26 +12,29 @@
         :key="item.value"
         :active="currentConsoleType === item.value"
         @click="emit('choose', item.value)"
-        >{{ item.label }}</Tag
       >
+        {{ item.label }}
+      </Tag>
     </view>
-    <scroll-view
-      class="console-list"
-      scroll-y
-      scroll-with-animation="true"
-      :scroll-into-view="scrollIntoView"
-    >
-      <ConsoleItem
-        v-for="(item, index) in consoleList"
-        :consoleItem="item"
-        :key="index"
-        :sourceFileServers="sourceFileServers"
-        :mode="mode"
-        :useDevSource="useDevSource"
-        :id="`dev-console-${index}`"
-      />
-      <Empty v-if="!consoleList || consoleList.length === 0" />
-    </scroll-view>
+
+    <VirtualListPro :data="consoleList" :pageSize="10" className="console-list">
+      <template v-slot="{ list, start }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :index="start + index"
+          :key="start + index"
+        >
+          <ConsoleItem
+            :consoleItem="item"
+            :sourceFileServers="sourceFileServers"
+            :mode="mode"
+            :useDevSource="useDevSource"
+            :id="`dev-console-${index}`"
+          />
+        </AutoSize>
+        <Empty v-if="!consoleList || consoleList.length === 0" />
+      </template>
+    </VirtualListPro>
     <RunJSInput @run="emit('run', $event)" />
   </view>
 </template>
@@ -44,6 +47,9 @@ import RunJSInput from './RunJSInput.vue';
 import type { DevTool } from '../../type';
 import { ref, watch } from 'vue';
 import { debounce } from '../../utils';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+
 type ConsoleType = 'all' | 'log' | 'info' | 'warn' | 'error' | 'clear';
 const props = defineProps<{
   consoleList: DevTool.ConsoleItem[];
@@ -93,7 +99,6 @@ const scrollIntoView = ref('');
 
 const debounceWatch = debounce(() => {
   scrollIntoView.value = `dev-console-${props.consoleList.length - 1}`;
-  console.log('props.consoleList: ', props.consoleList);
 }, 200);
 
 watch(() => props.consoleList, debounceWatch);
@@ -105,7 +110,6 @@ watch(() => props.consoleList, debounceWatch);
 }
 .console-list {
   height: calc(100% - 32px - 32px);
-  overflow: auto;
 }
 .console-control {
   display: flex;

package/dev/components/DevToolWindow/index.vue

@@ -319,7 +319,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 +333,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;
+          }),
         };
       });
 
@@ -556,7 +568,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 +580,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;
+        }),
       };
     });
 }

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,

package/dev/components/NetworkList/index.vue

@@ -17,14 +17,19 @@
         {{ item.label }}
       </Tag>
     </view>
-    <view class="network-list">
-      <NetworkItem
-        v-for="item in networkList"
-        :network="item"
-        :key="item.index"
-      />
-      <Empty v-if="!networkList || networkList.length === 0" />
-    </view>
+
+    <VirtualListPro :data="networkList" :pageSize="10" className="network-list">
+      <template v-slot="{ list, start }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :index="start + index"
+          :key="start + index"
+        >
+          <NetworkItem :network="item" />
+        </AutoSize>
+        <Empty v-if="!networkList || networkList.length === 0" />
+      </template>
+    </VirtualListPro>
   </view>
 </template>
 <script lang="ts" setup>
@@ -33,6 +38,9 @@ import NetworkItem from './NetworkItem.vue';
 import Empty from '../Empty/index.vue';
 import FilterInput from '../FilterInput/index.vue';
 import type { DevTool } from '../../type';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+
 defineProps<{
   currentNetworkType: string;
   networkList: DevTool.NetworkItem[];
@@ -93,7 +101,6 @@ function onChoose(type: string) {
 }
 .network-list {
   height: calc(100% - 32px);
-  overflow: auto;
 }
 .network-control {
   display: flex;

package/dev/components/RouteList/index.vue

@@ -10,25 +10,34 @@
       />
       <Tag mode="clear" @click="onRefresh">刷新</Tag>
     </view>
-    <view class="route-list">
-      <view class="route-item" v-for="item in routeList" :key="item.path">
-        <view class="route-item-name">
-          <view v-html="item.name" />
-          <Tag v-if="item.type" mode="info">{{ item.type }}</Tag>
-          <Tag mode="warn" v-if="item.index === 4 || item.index === 3">
-            当前页
-          </Tag>
-          <Tag mode="primary" v-if="item.index === 4 || item.index === 2">
-            启动页
-          </Tag>
-        </view>
-        <view class="route-item-path">
-          <view v-html="item.path" />
-          <Tag mode="main" @click="onGoTo(item)">跳转</Tag>
-        </view>
-      </view>
-      <Empty v-if="!routeList || routeList.length === 0" text="暂无路由信息" />
-    </view>
+
+    <VirtualListPro :data="routeList" :pageSize="10" className="route-list">
+      <template v-slot="{ list, start }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :index="start + index"
+          :key="start + index"
+        >
+          <view class="route-item">
+            <view class="route-item-name">
+              <view v-html="item.name" />
+              <Tag v-if="item.type" mode="info">{{ item.type }}</Tag>
+              <Tag mode="warn" v-if="item.index === 4 || item.index === 3">
+                当前页
+              </Tag>
+              <Tag mode="primary" v-if="item.index === 4 || item.index === 2">
+                启动页
+              </Tag>
+            </view>
+            <view class="route-item-path">
+              <view v-html="item.path" />
+              <Tag mode="main" @click="onGoTo(item)">跳转</Tag>
+            </view>
+          </view>
+        </AutoSize>
+        <Empty v-if="!routeList || routeList.length === 0" />
+      </template>
+    </VirtualListPro>
   </view>
 </template>
 <script lang="ts" setup>
@@ -36,6 +45,9 @@ import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
 import FilterInput from '../FilterInput/index.vue';
 import type { DevTool } from '../../type';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+
 defineProps<{ routeList: DevTool.Page[]; modelValue?: string }>();
 const emit = defineEmits<{
   (e: 'goTo', params: DevTool.Page): void;

package/dev/components/UploadList/index.vue

@@ -17,10 +17,18 @@
         {{ item.label }}
       </Tag>
     </view>
-    <view class="upload-list">
-      <UploadItem v-for="item in uploadList" :upload="item" :key="item.index" />
-      <Empty v-if="!uploadList || uploadList.length === 0" />
-    </view>
+    <VirtualListPro :data="uploadList" :pageSize="10" className="upload-list">
+      <template v-slot="{ list, start }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :index="start + index"
+          :key="start + index"
+        >
+          <UploadItem :upload="item" />
+        </AutoSize>
+        <Empty v-if="!uploadList || uploadList.length === 0" />
+      </template>
+    </VirtualListPro>
   </view>
 </template>
 <script lang="ts" setup>
@@ -29,6 +37,9 @@ import UploadItem from './UploadItem.vue';
 import Empty from '../Empty/index.vue';
 import FilterInput from '../FilterInput/index.vue';
 import type { DevTool } from '../../type';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+
 defineProps<{
   currentUploadType: string;
   uploadList: DevTool.UploadItem[];
@@ -79,7 +90,6 @@ function onChoose(type: string) {
 }
 .upload-list {
   height: calc(100% - 32px);
-  overflow: auto;
 }
 .upload-control {
   display: flex;

package/dev/components/VirtualListPro/AutoSize.vue

@@ -0,0 +1,43 @@
+<template>
+  <view :class="className">
+    <slot></slot>
+  </view>
+</template>
+<script lang="ts" setup>
+import { getCurrentInstance, onMounted, inject, nextTick } from 'vue';
+import { uniqueId } from '../../utils';
+
+const props = defineProps<{
+  index: number;
+}>();
+
+const className = uniqueId('virtual-');
+
+const instance = getCurrentInstance();
+
+const query = uni.createSelectorQuery().in(instance);
+
+const onSizeChange =
+  inject<(index: number, height: number) => void>('onSizeChange');
+
+const itemsHeight = inject<number[]>('itemsHeight');
+
+onMounted(() => {
+  // TODO 可能会存在异步高度的问题
+  // TODO image 加载完成之后获取高度
+
+  if (itemsHeight?.[props.index]) return;
+
+  nextTick(() => {
+    query
+      .select('.' + className)
+      .boundingClientRect((rect) => {
+        if (Array.isArray(rect)) return;
+        onSizeChange?.(props.index, rect.height ?? 0);
+      })
+      .exec();
+  });
+});
+</script>
+
+<style scoped></style>

package/dev/components/VirtualListPro/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <scroll-view
+    :lower-threshold="preLodeHeight"
+    :class="['virtual-list', className]"
+    scroll-y
+    @scroll="onScroll"
+    @scrolltolower="onScrollToLower"
+  >
+    <!-- 阈值判断 -->
+    <view :style="{ height: `${state.currentHeight}px` }"></view>
+    <view>
+      <!-- 将可视数据传入到slot -->
+      <slot
+        :list="state.visitableData"
+        :current="state.current"
+        :start="(state.current - 1) * props.pageSize"
+      ></slot>
+    </view>
+  </scroll-view>
+</template>
+<script lang="ts" setup>
+import { reactive, watch, onBeforeMount, provide } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    /** 渲染数据  */
+    data: any[];
+    /** 虚拟列表高度 */
+    height?: number;
+    /**
+     * 将对传入的data进行分页
+     * 如何获取pageSize?
+     *  虚拟列表高度 / 预估每条的最小高度 +
+     */
+    pageSize?: number;
+    /** 预加载高度 */
+    preLodeHeight?: number;
+    /** 类名 */
+    className?: string;
+  }>(),
+  {
+    height: 400,
+    pageSize: 10,
+    preLodeHeight: 50,
+  },
+);
+
+const state = reactive<{
+  /** 加载次数 */
+  current: number;
+  visitableData: any[];
+  currentHeight: number;
+  height: number;
+}>({
+  height: 0,
+  current: 1,
+  visitableData: [],
+  currentHeight: 0,
+});
+/**
+ * 每一项的高度
+ */
+const itemsHeight: number[] = [];
+
+provide('itemsHeight', itemsHeight);
+
+onBeforeMount(() => {
+  // 初始渲染数据
+  state.visitableData = props.data.slice(0, props.pageSize * 2);
+});
+
+// 数据更新时重置
+watch(
+  () => [props.data, props.pageSize],
+  () => {
+    state.visitableData = props.data.slice(0, props.pageSize * 2);
+  },
+);
+
+/** 向上滚动和向下滚动 */
+function updateVisitableData(direction: 'up' | 'down') {
+  let tempList = [...state.visitableData];
+
+  if (direction === 'down') {
+    // 将最前面的内容进行隐藏
+    tempList.splice(0, props.pageSize);
+
+    // 处理下一页内容
+    const start = props.pageSize * state.current;
+    let end = props.pageSize * (state.current + 1);
+
+    if (start >= props.data.length) {
+      return;
+    }
+
+    if (end > props.data.length) {
+      end = props.data.length;
+    }
+
+    const newData = props.data.slice(start, end);
+
+    tempList.push(...newData);
+  } else {
+    // 将最末尾的部分进行隐藏
+    const delCount =
+      tempList.length - props.pageSize > 0
+        ? props.pageSize
+        : tempList.length - props.pageSize;
+
+    tempList.splice(props.pageSize, delCount);
+
+    // 处理上一页内容
+    let start = props.pageSize * (state.current - 1);
+
+    const end = props.pageSize * state.current;
+
+    if (end < 0) return;
+
+    if (start < 0) {
+      start = 0;
+    }
+    const newData = props.data.slice(start, end);
+    tempList.unshift(...newData);
+  }
+  state.visitableData = tempList;
+}
+
+/** 计算合并的高度 */
+function updateCurrentHeight() {
+  const total = itemsHeight
+    .slice(0, state.current * props.pageSize)
+    ?.reduce((acc, cur) => acc + cur, 0);
+
+  state.currentHeight = total;
+}
+
+/** 滚动到底部 */
+function onScrollToLower() {
+  if ((state.current + 1) * props.pageSize < props.data.length) {
+    state.current++;
+
+    updateVisitableData('down');
+
+    updateCurrentHeight();
+  }
+}
+
+/** 滚动监听，是否小于合并高度 */
+function onScroll(e: { detail: { scrollTop: number } }) {
+  if (
+    state.current > 0 &&
+    state.currentHeight > 0 &&
+    e.detail.scrollTop - props.preLodeHeight < state.currentHeight
+  ) {
+    state.current--;
+
+    updateVisitableData('up');
+
+    updateCurrentHeight();
+  }
+}
+
+/** 暴露给子组件获取子组件容器的高度 */
+function onSizeChange(index: number, height: number) {
+  itemsHeight[index] = height;
+}
+provide('onSizeChange', onSizeChange);
+</script>
+<style scoped></style>

package/dev/components/VirtualListPro/readme.md

@@ -0,0 +1,40 @@
+# VirtualListAutoHeight
+
+自适应高度虚拟列表
+
+## 核心
+
+- 初始加载两页数据
+- 初始获取当前加载的渲染列表的数据 ，得到第一页高度
+- scroll-view
+  - 滚动到底部（顶部）current + 1
+- createIntersectionObserver
+  - 辅助反向监听节点是否出现再可视范围之内
+  - current - 1
+- 数据分页之后确定每页高度，采用合并高度支撑滚动条
+  - 合并高度计算逻辑： 第一页高度 = 第一页高度
+  - 后续页高度 = 前面所有高度 + 当前页高度.
+
+
+一页两条
+
+pageSize = 2
+current = 2
+visibleDate = [3,4,5,6]
+
+visibleDate.splice(1*2, visibleDate.length - 1*2)
+
+const start = cur
+
+
+1
+2
+
+3
+4
+
+5
+6
+
+current = 1
+visibleDate = [1,2,3,4]

package/dev/components/WebSocket/index.vue

@@ -17,10 +17,19 @@
         {{ item.label }}
       </Tag>
     </view>
-    <view class="websocket-list">
-      <WebSocketItem v-for="ws in wsList" :key="ws.url" :ws="ws" />
-      <Empty v-if="!wsList || wsList.length === 0" />
-    </view>
+
+    <VirtualListPro :data="wsList" :pageSize="10" className="websocket-list">
+      <template v-slot="{ list, start }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :index="start + index"
+          :key="start + index"
+        >
+          <WebSocketItem :ws="item" />
+        </AutoSize>
+        <Empty v-if="!wsList || wsList.length === 0" />
+      </template>
+    </VirtualListPro>
   </view>
 </template>
 <script lang="ts" setup>
@@ -29,6 +38,9 @@ import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
 import FilterInput from '../FilterInput/index.vue';
 import type { DevTool } from '../../type';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+
 defineProps<{
   wsList: DevTool.WS[];
   currentWebSocketType: string;

package/dev/plugins/uniDevTool/uniDevTool.js

@@ -1,36 +1,36 @@
-"use strict";const C=require("path"),I=require("fs"),u=require("../utils/index.js");function _(a){const v=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const l in a)if(l!=="default"){const e=Object.getOwnPropertyDescriptor(a,l);Object.defineProperty(v,l,e.get?e:{enumerable:!0,get:()=>a[l]})}}return v.default=a,Object.freeze(v)}const $=_(C),S=_(I),h=/<script[^>]*>([\s\S]*?)<\/script>/,g={isReady:!1,urls:[]};function D({pages:a,sourceFileServers:v,...l}){return{name:"vite-uni-dev-tool",enforce:"pre",configureServer(e){var p;e.middlewares.use((s,n,t)=>{const{originalUrl:r}=s;if(l.useDevSource&&(r!=null&&r.includes("__dev_sourcefile__"))){const i=r.replace("/__dev_sourcefile__","");try{const c=e.config.root,m=$.join(c,i),o=S.readFileSync(m,"utf-8");n.setHeader("Content-Type",u.getContentType(m)),n.end(o)}catch{t()}}else t()}),(p=e.httpServer)==null||p.once("listening",()=>{var t;const s=(t=e.httpServer)==null?void 0:t.address(),n=u.getLocalIPs();if(s&&!Array.isArray(s)&&typeof s!="string"){const r=n.map(i=>`http://${i}:${s.port}/__dev_sourcefile__`);g.isReady=!0,g.urls=r,console.warn(`
-⚡️  vite-uni-dev-tool source file server running at:
-${n.map(i=>`➜  Source File  Network:  http://${i}:${s==null?void 0:s.port}/__dev_sourcefile__`).join(`
-`)}
-            `)}})},transform(e,p){var s;if(p.endsWith("/src/main.ts"))try{const n=e.split(`
-`);let t=[...n];const r=u.findInsertionIndex(t,c=>c.trim().startsWith("import")||c.trim().startsWith("export"));r!==-1&&t.splice(r,0,"import DevTool from 'vite-uni-dev-tool/dev/components/DevTool/index.vue';");const i=u.findInsertionIndex(t,c=>c.includes(".mount(")||c.includes("createApp("));if(i!==-1&&t.splice(i+1,0,"  app.component('DevTool', DevTool);"),t.length!==n.length)return{code:t.join(`
-`),map:null}}catch(n){return console.error("[DevTool] 转换 main 文件时出错:",n),{code:e,map:null}}if(p.endsWith("/src/App.vue")){const n=e.match(h);if(n&&n[1]){const t=n[1].trim(),r=u.hasImportCurrentInstance(t),i=u.hasImportOnLaunch(t),c=r?"":"import { getCurrentInstance } from 'vue'",m=i?"":"import { onLaunch } from '@dcloudio/uni-app'",o=`
-import { initDevTool, console } from 'vite-uni-dev-tool/dev/core';
-import pagesJson from './pages.json';
-${t}
-onLaunch(() => {
-  const vue3instance = getCurrentInstance();
-  initDevTool({
-    pagesJson,
-    vue3instance,
-    mode: import.meta.env.MODE,
-    sourceFileServers: [
-      ${[...g.urls??[],...v??[]].map(d=>`'${d}'`)}
-    ],
-    useDevSource: ${l.useDevSource},
-    ...${JSON.stringify(l)},
-  });
-});`;return{code:e.replace(h,`
-<script lang="ts" setup>
-${c}
-${m}
-${o}
-<\/script>`),map:null}}return{code:e,map:null}}if(p.endsWith(".vue")){const n=e.includes("<template>"),t=a.pages.some(o=>p.includes(o.path)),r=(s=a.subPackages)==null?void 0:s.some(o=>o.pages.some(f=>p.includes(`${o.root}/${f.path}`))),i=["<DevTool />"],c=u.hasImportConsole(e),m=u.hasUseConsole(e);if(!c&&m&&!p.endsWith("/src/App.vue")){const o=e.match(h);if(o&&o[1]){const d=`
-import { console } from 'vite-uni-dev-tool/dev/core';
-${o[1]}
-            `;e=e.replace(h,`
-  <script lang="ts" setup>
-  ${d}
-  <\/script>`)}}if((t||r)&&n){const o=u.getTemplateContent(e);let f=e;if(o){const d=`<view>${o}
-${i.join(`
-`)}</view>`;f=e.replace(o,d)}return{code:f,map:null}}}return{code:e,map:null}}}}module.exports=D;
+"use strict";const C=require("path"),I=require("fs"),u=require("../utils/index.js");function _(a){const v=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const l in a)if(l!=="default"){const e=Object.getOwnPropertyDescriptor(a,l);Object.defineProperty(v,l,e.get?e:{enumerable:!0,get:()=>a[l]})}}return v.default=a,Object.freeze(v)}const $=_(C),S=_(I),h=/<script[^>]*>([\s\S]*?)<\/script>/,g={isReady:!1,urls:[]};function D({pages:a,sourceFileServers:v,...l}){return{name:"vite-uni-dev-tool",enforce:"pre",configureServer(e){var p;e.middlewares.use((s,n,t)=>{const{originalUrl:r}=s;if(l.useDevSource&&(r!=null&&r.includes("__dev_sourcefile__"))){const i=r.replace("/__dev_sourcefile__","");try{const c=e.config.root,m=$.join(c,i),o=S.readFileSync(m,"utf-8");n.setHeader("Content-Type",u.getContentType(m)),n.end(o)}catch{t()}}else t()}),(p=e.httpServer)==null||p.once("listening",()=>{var t;const s=(t=e.httpServer)==null?void 0:t.address(),n=u.getLocalIPs();if(s&&!Array.isArray(s)&&typeof s!="string"){const r=n.map(i=>`http://${i}:${s.port}/__dev_sourcefile__`);g.isReady=!0,g.urls=r,console.warn(`
+⚡️  vite-uni-dev-tool source file server running at:
+${n.map(i=>`➜  Source File  Network:  http://${i}:${s==null?void 0:s.port}/__dev_sourcefile__`).join(`
+`)}
+            `)}})},transform(e,p){var s;if(p.endsWith("/src/main.ts"))try{const n=e.split(`
+`);let t=[...n];const r=u.findInsertionIndex(t,c=>c.trim().startsWith("import")||c.trim().startsWith("export"));r!==-1&&t.splice(r,0,"import DevTool from 'vite-uni-dev-tool/dev/components/DevTool/index.vue';");const i=u.findInsertionIndex(t,c=>c.includes(".mount(")||c.includes("createApp("));if(i!==-1&&t.splice(i+1,0,"  app.component('DevTool', DevTool);"),t.length!==n.length)return{code:t.join(`
+`),map:null}}catch(n){return console.error("[DevTool] 转换 main 文件时出错:",n),{code:e,map:null}}if(p.endsWith("/src/App.vue")){const n=e.match(h);if(n&&n[1]){const t=n[1].trim(),r=u.hasImportCurrentInstance(t),i=u.hasImportOnLaunch(t),c=r?"":"import { getCurrentInstance } from 'vue'",m=i?"":"import { onLaunch } from '@dcloudio/uni-app'",o=`
+import { initDevTool, console } from 'vite-uni-dev-tool/dev/core';
+import pagesJson from './pages.json';
+${t}
+onLaunch(() => {
+  const vue3instance = getCurrentInstance();
+  initDevTool({
+    pagesJson,
+    vue3instance,
+    mode: import.meta.env.MODE,
+    sourceFileServers: [
+      ${[...g.urls??[],...v??[]].map(d=>`'${d}'`)}
+    ],
+    useDevSource: ${l.useDevSource},
+    ...${JSON.stringify(l)},
+  });
+});`;return{code:e.replace(h,`
+<script lang="ts" setup>
+${c}
+${m}
+${o}
+<\/script>`),map:null}}return{code:e,map:null}}if(p.endsWith(".vue")){const n=e.includes("<template>"),t=a.pages.some(o=>p.includes(o.path)),r=(s=a.subPackages)==null?void 0:s.some(o=>o.pages.some(f=>p.includes(`${o.root}/${f.path}`))),i=["<DevTool />"],c=u.hasImportConsole(e),m=u.hasUseConsole(e);if(!c&&m&&!p.endsWith("/src/App.vue")){const o=e.match(h);if(o&&o[1]){const d=`
+import { console } from 'vite-uni-dev-tool/dev/core';
+${o[1]}
+            `;e=e.replace(h,`
+  <script lang="ts" setup>
+  ${d}
+  <\/script>`)}}if((t||r)&&n){const o=u.getTemplateContent(e);let f=e;if(o){const d=`<view>${o}
+${i.join(`
+`)}</view>`;f=e.replace(o,d)}return{code:f,map:null}}}return{code:e,map:null}}}}module.exports=D;

package/dev/plugins/uniGlobalComponents/uniGlobalComponents.js

@@ -1,7 +1,7 @@
-"use strict";const d=require("path"),m=require("fs"),p=require("../utils/index.js");function f(s){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const e in s)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(s,e);Object.defineProperty(u,e,r.get?r:{enumerable:!0,get:()=>s[e]})}}return u.default=s,Object.freeze(u)}const g=f(d),h=f(m);function v({pages:s,components:u}){return{name:"uni-global-components",enforce:"pre",configureServer(e){var r;e.middlewares.use((t,c,i)=>{const{originalUrl:n}=t;if(n!=null&&n.includes("__dev_sourcefile__")){const o=n.replace("/__dev_sourcefile__","");try{const a=e.config.root,l=g.join(a,o),_=h.readFileSync(l,"utf-8");c.setHeader("Content-Type",p.getContentType(l)),c.end(_)}catch{i()}}else i()}),(r=e.httpServer)==null||r.once("listening",()=>{var i;const t=(i=e.httpServer)==null?void 0:i.address(),c=p.getLocalIPs();t&&!Array.isArray(t)&&typeof t!="string"&&(c.map(n=>`http://${n}:${t.port}/__dev_sourcefile__`),console.warn(`
-⚡️  vite-uni-dev-tool source file server running at:
-${c.map(n=>`➜  Source File  Network:  http://${n}:${t==null?void 0:t.port}/__dev_sourcefile__`).join(`
-`)}
-            `))})},transform(e,r){var t;if(r.endsWith(".vue")){const c=e.includes("<template>"),i=s.pages.some(o=>r.includes(o.path)),n=(t=s.subPackages)==null?void 0:t.some(o=>o.pages.some(a=>r.includes(`${o.root}/${a.path}`)));if((i||n)&&c){const o=p.getTemplateContent(e);if(o){const a=`<view>${o}
-${u.join(`
-`)}</view>`;return{code:e.replace(o,a),map:null}}}}return{code:e,map:null}}}}module.exports=v;
+"use strict";const d=require("path"),m=require("fs"),p=require("../utils/index.js");function f(s){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const e in s)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(s,e);Object.defineProperty(u,e,r.get?r:{enumerable:!0,get:()=>s[e]})}}return u.default=s,Object.freeze(u)}const g=f(d),h=f(m);function v({pages:s,components:u}){return{name:"uni-global-components",enforce:"pre",configureServer(e){var r;e.middlewares.use((t,c,i)=>{const{originalUrl:n}=t;if(n!=null&&n.includes("__dev_sourcefile__")){const o=n.replace("/__dev_sourcefile__","");try{const a=e.config.root,l=g.join(a,o),_=h.readFileSync(l,"utf-8");c.setHeader("Content-Type",p.getContentType(l)),c.end(_)}catch{i()}}else i()}),(r=e.httpServer)==null||r.once("listening",()=>{var i;const t=(i=e.httpServer)==null?void 0:i.address(),c=p.getLocalIPs();t&&!Array.isArray(t)&&typeof t!="string"&&(c.map(n=>`http://${n}:${t.port}/__dev_sourcefile__`),console.warn(`
+⚡️  vite-uni-dev-tool source file server running at:
+${c.map(n=>`➜  Source File  Network:  http://${n}:${t==null?void 0:t.port}/__dev_sourcefile__`).join(`
+`)}
+            `))})},transform(e,r){var t;if(r.endsWith(".vue")){const c=e.includes("<template>"),i=s.pages.some(o=>r.includes(o.path)),n=(t=s.subPackages)==null?void 0:t.some(o=>o.pages.some(a=>r.includes(`${o.root}/${a.path}`)));if((i||n)&&c){const o=p.getTemplateContent(e);if(o){const a=`<view>${o}
+${u.join(`
+`)}</view>`;return{code:e.replace(o,a),map:null}}}}return{code:e,map:null}}}}module.exports=v;

package/dev/utils/array.ts

@@ -0,0 +1,15 @@
+export function chunk<T>(array: T[], size = 1): T[][] {
+  if (!Array.isArray(array) || size <= 0) {
+    return [];
+  }
+
+  const result: T[][] = [];
+  let index = 0;
+
+  while (index < array.length) {
+    result.push(array.slice(index, index + size));
+    index += size;
+  }
+
+  return result;
+}

package/dev/utils/index.ts

@@ -36,8 +36,11 @@ export {
   extractRowAndCol,
   parseStock,
   isMockWX,
+  uniqueId,
 } from './string';
 
 export { getWifiIp, getDeviceMac, getLanIp, getMicroAppIp } from './ip';
 
 export { isAndroid, isH5, isWX } from './platform';
+
+export { chunk } from './array';

package/dev/utils/string.ts

@@ -119,3 +119,15 @@ const mockWXReg = /https?:\/\/usr/;
 export function isMockWX(stack: string) {
   return mockWXReg.test(stack);
 }
+
+export function uniqueId(
+  pre: string = '',
+  length = 16,
+  chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
+): string {
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return pre + result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-uni-dev-tool",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试",
   "keywords": [
     "vite",