vite-uni-dev-tool 0.0.9 → 0.0.11

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/Tabs/index.vue

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

package/dev/components/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,175 @@
+<template>
+  <scroll-view
+    :lower-threshold="preLodeHeight"
+    :scroll-into-view="scrollIntoView"
+    :scroll-with-animation="scrollWithAnimation"
+    :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;
+    /** 滚动到指定元素 */
+    scrollIntoView?: string;
+    /** 滚动动画 */
+    scrollWithAnimation?: boolean;
+  }>(),
+  {
+    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/const.ts

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

package/dev/devEvent/index.ts

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

package/dev/devIntercept/index.ts

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

package/dev/devStore/index.ts

@@ -26,6 +26,7 @@ export class DevStore {
     deviceInfo: {},
     windowInfo: {},
     systemInfo: {},
+    appInfo: {},
     wsList: [],
     netWorkStatus: {},
     uploadList: [],
@@ -36,6 +37,7 @@ export class DevStore {
       emit: 0,
       off: 0,
     },
+    captureScreenList: [],
   };
 
   /** 调试配置 */
@@ -52,6 +54,8 @@ export class DevStore {
   private eventListMaxSize = 1000;
   /** js 最大运行条数 */
   private runJsMaxSize = 1000;
+  /** 截屏最大值 */
+  private captureScreenMaxSize = 1000;
 
   /** 缓存最大值 */
   cacheMaxSize = 8 * 1024 * 1024 * 10;
@@ -185,6 +189,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 +204,7 @@ export class DevStore {
       deviceInfo,
       windowInfo,
       devToolVisible: this.getDevToolVisible(),
+      appInfo,
       netWorkStatus: {
         ip,
         ...networkType,
@@ -344,6 +357,8 @@ export class DevStore {
       emit: 0,
       off: 0,
     };
+
+    this.state.captureScreenList = [];
   }
 
   addUploadTask(index: number | string, task: UniApp.UploadTask) {
@@ -682,4 +697,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 = [];
+  }
 }