vite-uni-dev-tool 0.0.11 → 0.0.13

package/dev/components/UploadList/UploadItem.vue

@@ -1,111 +0,0 @@
-<template>
-  <view class="upload-item">
-    <view class="upload-url-row">
-      <Tag mode="info">POST</Tag>
-      <view class="upload-url" v-html="upload.url" />
-      <Tag
-        mode="main"
-        class="upload-detail-icon"
-        @click="showDetail = !showDetail"
-        >详情</Tag
-      >
-    </view>
-    <view class="upload-info">
-      <view>
-        <Tag v-if="upload.status === 'pending'" mode="info">
-          {{ upload.status }}
-        </Tag>
-        <Tag v-if="upload.status === 'uploading'" mode="warn">
-          {{ upload.status }}
-        </Tag>
-        <Tag v-if="upload.status === 'success'" mode="success">
-          {{ upload.status }}
-        </Tag>
-        <Tag v-if="upload.status === 'error'" mode="error">
-          {{ upload.status }}
-        </Tag>
-      </view>
-      <view>进度: {{ upload.progress }}%</view>
-      <view>
-        开始:
-        {{ upload.startTime ? formatDate(upload.startTime, ' HH:mm:ss') : '-' }}
-      </view>
-      <view>
-        结束:
-        {{ upload.endTime ? formatDate(upload.endTime, ' HH:mm:ss') : '-' }}
-      </view>
-    </view>
-  </view>
-  <!-- <Transition name="slide-fade"> -->
-  <UploadDetail v-if="showDetail" :upload="upload" @close="onClose" />
-  <!-- </Transition> -->
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import Tag from '../Tag/index.vue';
-import UploadDetail from './UploadDetail.vue';
-import { formatDate } from '../../utils';
-import type { DevTool } from '../../type';
-defineProps<{
-  upload: DevTool.UploadItem;
-}>();
-const showDetail = ref(false);
-
-function onClose() {
-  showDetail.value = false;
-}
-</script>
-<style scoped>
-.upload-item {
-  padding: 16px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  font-size: var(--dev-tool-base-font-size);
-}
-.upload-item .upload-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;
-}
-
-.upload-item .upload-url-row .upload-detail-icon {
-  flex-shrink: 0;
-  margin-left: auto;
-}
-.upload-url {
-  margin-left: 4px;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.upload-item .upload-url-row .upload-detail-active {
-  transform: rotate(135deg);
-}
-.upload-item .upload-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 4px;
-  color: #616161;
-}
-
-.slide-fade-enter-active {
-  transition: all 0.8s ease-out;
-}
-.slide-fade-leave-active {
-  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
-}
-.slide-fade-enter-from,
-.slide-fade-leave-to {
-  transform: translateY(20px);
-  opacity: 0;
-}
-</style>

package/dev/components/UploadList/index.vue

@@ -1,104 +0,0 @@
-<template>
-  <view class="upload-content">
-    <view class="upload-control">
-      <FilterInput
-        :modelValue="modelValue"
-        placeholder="查询url"
-        @search="emit('search', $event)"
-        @update:modelValue="emit('update:modelValue', $event)"
-      />
-      <Tag
-        v-for="item in uploadFilterItems"
-        :mode="item.mode"
-        :key="item.value"
-        :active="item.value === currentUploadType"
-        @click="onChoose(item.value)"
-      >
-        {{ item.label }}
-      </Tag>
-    </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>
-import Tag from '../Tag/index.vue';
-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[];
-  modelValue: string;
-}>();
-
-const emit = defineEmits<{
-  (e: 'choose', type: string): void;
-  (e: 'update:modelValue', value: string): void;
-  (e: 'search', value: string): void;
-}>();
-const uploadFilterItems = [
-  {
-    label: '全部',
-    value: 'all',
-    mode: 'all',
-  },
-  {
-    label: 'pending',
-    value: 'pending',
-    mode: 'info',
-  },
-  {
-    label: 'success',
-    value: 'success',
-    mode: 'success',
-  },
-  {
-    label: 'error',
-    value: 'error',
-    mode: 'error',
-  },
-  {
-    label: '清除',
-    value: 'clear',
-    mode: 'clear',
-  },
-];
-
-function onChoose(type: string) {
-  emit('choose', type);
-}
-</script>
-<style scoped>
-.upload-content {
-  height: 100%;
-  font-size: var(--dev-tool-base-font-size);
-}
-.upload-list {
-  height: calc(100% - 32px);
-}
-.upload-control {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 0 16px;
-  height: 32px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-}
-</style>

package/dev/components/VirtualList/index.vue

@@ -1,112 +0,0 @@
-<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/dev/components/VirtualListPro/AutoSize.vue

@@ -1,43 +0,0 @@
-<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

@@ -1,175 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-# 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/VuexList/index.vue

@@ -1,54 +0,0 @@
-<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, ref } 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>