vite-uni-dev-tool 0.0.13 → 0.0.15

package/dist/v3/VirtualList/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <scroll-view
+    v-if="autoVirtual"
+    scroll-y
+    class="virtual-list"
+    :style="{
+      height: `${props.height}px`,
+    }"
+    @scroll="onVirtualScroll"
+  >
+    <view
+      class="virtual-list-holder"
+      :style="{
+        height: `${props.data.length * props.itemHeight}px`,
+      }"
+    >
+      <view
+        class="virtual-list-holder-inner"
+        :style="{
+          transform: `translateY(${state.translateY}px)`,
+        }"
+      >
+        <slot :list="state.visibleData"></slot>
+      </view>
+    </view>
+  </scroll-view>
+  <view
+    v-else
+    class="normal-list"
+    :style="{
+      height: `${props.height}px`,
+    }"
+  >
+    <slot :list="state.visibleData"></slot>
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, reactive, watchEffect } from 'vue';
+const props = defineProps<{
+  /** 虚拟列表高度 */
+  height: number;
+  /** 每一项高度 */
+  itemHeight: number;
+  /** 渲染的数据列表 */
+  data: any[];
+  /** 虚拟列表自动开启行数 */
+  autoVirtualRow?: number;
+}>();
+
+const state = reactive<{ translateY: number; visibleData: any[] }>({
+  translateY: 0,
+  visibleData: [],
+});
+
+const autoVirtual = computed(() => {
+  if (typeof props.autoVirtualRow === 'number') {
+    if (props.data.length > props.autoVirtualRow) {
+      return true;
+    }
+    return false;
+  }
+  return true;
+});
+
+function updateVisibleData(scrollTop: number = 0) {
+  const flatDataValue = props.data ?? [];
+  if (autoVirtual.value) {
+    const visibleCount = props.height / props.itemHeight;
+    const scrollCount = Math.floor(scrollTop / props.itemHeight);
+    let start =
+      scrollCount < 0
+        ? 0
+        : scrollCount + visibleCount > flatDataValue.length
+          ? flatDataValue.length - visibleCount
+          : scrollCount;
+    if (start < 0) {
+      start = 0;
+    }
+    const end = start + visibleCount;
+    state.translateY = start * props.itemHeight;
+    state.visibleData = state.visibleData = props.data.slice(start, end);
+  } else {
+    state.visibleData = flatDataValue;
+  }
+}
+
+function onVirtualScroll(e: { detail: { scrollTop: number } }) {
+  updateVisibleData(e?.detail?.scrollTop ?? 0);
+}
+
+watchEffect(() => {
+  if (props.data) {
+    updateVisibleData();
+  }
+});
+
+onMounted(() => {
+  updateVisibleData();
+});
+</script>
+<style scoped>
+.normal-list,
+.virtual-list {
+  position: relative;
+  width: 100%;
+  overflow: auto;
+}
+
+.virtual-list-holder {
+  position: relative;
+}
+</style>

package/dist/v3/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/dist/v3/VirtualListPro/index.vue

@@ -0,0 +1,238 @@
+<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
+      :id="placeholderId"
+      :style="{ height: `${state.currentHeight}px` }"
+    ></view>
+    <view>
+      <!-- 将可视数据传入到slot -->
+      <slot
+        :list="state.visitableData"
+        :current="state.current"
+        :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 { nextTick } from 'vue';
+import { uniqueId } from '../../utils';
+import { reactive, watch, onBeforeMount, provide, computed, ref } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    /** 渲染数据  */
+    data: any[];
+    /** 虚拟列表高度 */
+    height?: number;
+    /**
+     * 将对传入的data进行分页
+     * 如何获取pageSize?
+     *  虚拟列表高度 / 预估每条的最小高度 +
+     */
+    pageSize?: number;
+    /** 预加载高度 */
+    preLodeHeight?: number;
+    /** 类名 */
+    className?: string;
+    /** 滚动到指定元素 */
+    scrollIntoView?: string;
+    /** 滚动动画 */
+    scrollWithAnimation?: boolean;
+    /** 返回顶部 */
+    showBackTop?: boolean;
+  }>(),
+  {
+    height: 400,
+    pageSize: 10,
+    preLodeHeight: 50,
+  },
+);
+
+const state = reactive<{
+  /** 加载次数 */
+  current: number;
+  visitableData: any[];
+  currentHeight: number;
+  height: number;
+  scrollTop: number;
+}>({
+  height: 0,
+  current: 1,
+  visitableData: [],
+  currentHeight: 0,
+  scrollTop: 0,
+});
+
+const placeholderId = uniqueId('virtual-placeholder-');
+
+/**
+ * 每一项的高度
+ */
+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);
+});
+
+// 数据更新时重置
+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);
+
+/** 返回顶部 */
+function onBackTop() {
+  toView.value = placeholderId;
+
+  nextTick(() => {
+    state.current = 1;
+    state.currentHeight = 0;
+    updateVisitableData('up');
+
+    toView.value = '';
+  });
+}
+</script>
+<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/dist/v3/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/dist/v3/VuexList/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <view class="vuex-content">
+    <JsonPretty
+      :data="vuexList"
+      showLength
+      editable
+      v-if="showJson"
+      @update:data="onUpdateData"
+      @nodeClick="onNodeClick"
+    />
+    <Empty v-else />
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import JsonPretty from '../JsonPretty/index.vue';
+import Empty from '../Empty/index.vue';
+const props = defineProps<{
+  vuexList: Record<string, any>;
+}>();
+const emit = defineEmits<{
+  (e: 'update:vuexList', data: Record<string, any>): void;
+  (e: 'diffValue', value: any): void;
+}>();
+const showJson = computed(() => {
+  try {
+    const str = JSON.stringify(props.vuexList);
+    if (typeof props.vuexList === 'object' && (str === '' || str === '{}')) {
+      return false;
+    }
+    return true;
+  } catch (error) {
+    return false;
+  }
+});
+
+let currentSelect: any;
+function onUpdateData(data: Record<string, any>) {
+  const firstKey = currentSelect?.path.split('.')?.slice(1)?.[0];
+  emit('update:vuexList', data);
+  emit('diffValue', {
+    [firstKey]: data[firstKey],
+  });
+}
+function onNodeClick(node: any) {
+  currentSelect = node;
+}
+</script>
+<style scoped>
+.vuex-content {
+  padding: 16px;
+  font-size: var(--dev-tool-base-font-size);
+}
+</style>

package/dist/v3/WebSocket/WebSocketItem.vue

@@ -0,0 +1,103 @@
+<template>
+  <view class="websocket-item">
+    <view class="websocket-url-row">
+      <Tag mode="info" v-if="ws.readyState === 'connection'">con</Tag>
+      <Tag mode="success" v-if="ws.readyState === 'open'">open</Tag>
+      <Tag
+        mode="warn"
+        v-if="ws.readyState === 'closing' || ws.readyState === 'closed'"
+      >
+        close
+      </Tag>
+
+      <Tag mode="error" v-if="ws.readyState === 'error'">error</Tag>
+
+      <view class="websocket-url" v-html="ws.url" />
+
+      <Tag
+        mode="main"
+        class="websocket-detail-icon"
+        @click="showDetail = !showDetail"
+      >
+        详情
+      </Tag>
+    </view>
+    <view class="websocket-info">
+      <view class="websocket-info-last">
+        {{ ws?.message?.[ws.message.length - 1]?.data }}
+      </view>
+
+      <view>{{
+        ws?.message?.[ws.message.length - 1].time
+          ? formatDate(ws?.message?.[ws.message.length - 1].time, 'HH:mm:ss')
+          : '-'
+      }}</view>
+    </view>
+
+    <WebSocketList
+      v-if="showDetail"
+      :ws="ws"
+      :zIndex="zIndex"
+      @close="onClose"
+    />
+  </view>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import Tag from '../Tag/index.vue';
+import WebSocketList from './WebSocketList.vue';
+import { formatDate } from '../../utils';
+import type { DevTool } from '../../type';
+
+defineProps<{ ws: DevTool.WS; zIndex?: number }>();
+const showDetail = ref(false);
+
+function onClose() {
+  showDetail.value = false;
+}
+</script>
+<style scoped>
+.websocket-item {
+  padding: 16px;
+
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  font-size: var(--dev-tool-base-font-size);
+}
+.websocket-item .websocket-url-row {
+  display: flex;
+  align-items: center;
+  word-break: break-all;
+}
+
+.websocket-item .websocket-url-row .websocket-url {
+  margin-left: 4px;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.websocket-item .websocket-url-row .websocket-detail-icon {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.websocket-item .websocket-url-row .websocket-detail-active {
+  transform: rotate(135deg);
+}
+.websocket-item .websocket-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+  color: var(--dev-tool-info-color);
+}
+
+.websocket-item .websocket-info .websocket-info-last {
+  white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>