vite-uni-dev-tool 0.0.13 → 0.0.14

package/dist/v2/UploadList/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <view class="upload-content">
+    <view class="upload-control">
+      <FilterInput
+        :modelValue="modelValue"
+        placeholder="查询url"
+        @search="handleSearch"
+        @update:modelValue="handleUpdateModelValue"
+      />
+      <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
+      :dataSource="uploadList"
+      :pageSize="15"
+      :height="height"
+      className="upload-list"
+    >
+      <template v-slot="{ list, start }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :index="start + index"
+          :key="start + index"
+        >
+          <UploadItem :upload="item" :zIndex="zIndex" />
+        </AutoSize>
+        <Empty v-if="!uploadList || uploadList.length === 0" />
+      </template>
+    </VirtualListPro>
+  </view>
+</template>
+
+<script>
+import Tag from '../Tag/index.vue';
+import UploadItem from './UploadItem.vue';
+import Empty from '../Empty/index.vue';
+import FilterInput from '../FilterInput/index.vue';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+
+export default {
+  components: {
+    Tag,
+    UploadItem,
+    Empty,
+    FilterInput,
+    VirtualListPro,
+    AutoSize,
+  },
+  props: {
+    currentUploadType: {
+      type: String,
+      required: true,
+    },
+    uploadList: {
+      type: Array,
+      default: () => [],
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    zIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      height: 0,
+      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',
+        },
+      ],
+    };
+  },
+  mounted() {
+    const { windowHeight } = uni.getWindowInfo();
+    this.height = windowHeight - 32 - 32;
+  },
+  methods: {
+    onChoose(type) {
+      this.$emit('choose', type);
+    },
+    handleSearch(value) {
+      this.$emit('search', value);
+    },
+    handleUpdateModelValue(value) {
+      this.$emit('update:modelValue', value);
+    },
+  },
+};
+</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/dist/v2/VirtualList/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <scroll-view
+    v-if="autoVirtual"
+    scroll-y
+    class="virtual-list"
+    :style="{
+      height: `${height}px`,
+    }"
+    @scroll="onVirtualScroll"
+  >
+    <view
+      class="virtual-list-holder"
+      :style="{
+        height: `${data.length * itemHeight}px`,
+      }"
+    >
+      <view
+        class="virtual-list-holder-inner"
+        :style="{
+          transform: `translateY(${translateY}px)`,
+        }"
+      >
+        <slot :list="visibleData"></slot>
+      </view>
+    </view>
+  </scroll-view>
+  <view
+    v-else
+    class="normal-list"
+    :style="{
+      height: `${height}px`,
+    }"
+  >
+    <slot :list="visibleData"></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    /** 虚拟列表高度 */
+    height: {
+      type: Number,
+      required: true,
+    },
+    /** 每一项高度 */
+    itemHeight: {
+      type: Number,
+      required: true,
+    },
+    /** 渲染的数据列表 */
+    dataSource: {
+      type: Array,
+      default: () => [],
+    },
+    /** 虚拟列表自动开启行数 */
+    autoVirtualRow: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      translateY: 0,
+      visibleData: [],
+      scrollTop: 0,
+    };
+  },
+  computed: {
+    autoVirtual() {
+      if (typeof this.autoVirtualRow === 'number') {
+        return this.data.length > this.autoVirtualRow;
+      }
+      return true;
+    },
+  },
+  watch: {
+    data: {
+      handler() {
+        this.updateVisibleData(this.scrollTop);
+      },
+      deep: true,
+    },
+    height() {
+      this.updateVisibleData(this.scrollTop);
+    },
+    itemHeight() {
+      this.updateVisibleData(this.scrollTop);
+    },
+  },
+  mounted() {
+    this.updateVisibleData();
+  },
+  methods: {
+    onVirtualScroll(e) {
+      const scrollTop = e?.detail?.scrollTop ?? 0;
+      this.scrollTop = scrollTop;
+      this.updateVisibleData(scrollTop);
+    },
+    updateVisibleData(scrollTop = 0) {
+      const flatDataValue = this.data || [];
+      if (this.autoVirtual) {
+        const visibleCount = Math.ceil(this.height / this.itemHeight);
+        const scrollCount = Math.floor(scrollTop / this.itemHeight);
+        // 计算可视区域的起始索引
+        let start = Math.max(0, scrollCount);
+        // 确保结束索引不超过数据总长度
+        let end = Math.min(start + visibleCount, flatDataValue.length);
+        // 修正可视区域数据
+        this.visibleData = flatDataValue.slice(start, end);
+        // 计算偏移量
+        this.translateY = start * this.itemHeight;
+      } else {
+        // 非虚拟列表模式显示全部数据
+        this.visibleData = flatDataValue;
+        this.translateY = 0;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.normal-list,
+.virtual-list {
+  position: relative;
+  width: 100%;
+  overflow: auto;
+}
+
+.virtual-list-holder {
+  position: relative;
+}
+
+.virtual-list-holder-inner {
+  position: absolute;
+  width: 100%;
+  transition: transform 0.1s ease-out;
+}
+</style>

package/dist/v2/VirtualListPro/AutoSize.vue

@@ -0,0 +1,50 @@
+<template>
+  <view :class="className">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+import { uniqueId } from '../../utils';
+
+export default {
+  props: {
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      className: uniqueId('virtual-'),
+    };
+  },
+  inject: ['itemsHeight', 'onSizeChange'],
+  mounted() {
+    // 获取父组件注入的方法和数据（Vue2 通过 $parent 或 provide/inject 兼容实现）
+    const onSizeChange = this?.onSizeChange;
+    const itemsHeight = this?.itemsHeight;
+
+    // 如果已有高度则不重复计算
+    if (Array.isArray(itemsHeight) && itemsHeight[this.index] !== undefined) {
+      return;
+    }
+
+    this.$nextTick(() => {
+      // Vue2 中的选择器查询
+      const query = uni.createSelectorQuery().in(this);
+      query
+        .select('.' + this.className)
+        .boundingClientRect((rect) => {
+          if (Array.isArray(rect)) return;
+          if (typeof onSizeChange === 'function') {
+            onSizeChange(this.index, rect?.height ?? 0);
+          }
+        })
+        .exec();
+    });
+  },
+};
+</script>
+
+<style scoped></style>

package/dist/v2/VirtualListPro/index.vue

@@ -0,0 +1,255 @@
+<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: `${currentHeight}px` }"></view>
+    <view>
+      <!-- 将可视数据传入到slot -->
+      <slot :list="visitableData" :current="current" :start="start"></slot>
+    </view>
+
+    <view
+      v-if="currentHeight > height && showBackTop"
+      class="virtual-back-top"
+      @click="onBackTop"
+    >
+      ↑
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+import { uniqueId } from '../../utils';
+
+export default {
+  props: {
+    /** 渲染数据  */
+    dataSource: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    /** 虚拟列表高度 */
+    height: {
+      type: Number,
+      default: 400,
+    },
+    /** 分页大小 */
+    pageSize: {
+      type: Number,
+      default: 10,
+    },
+    /** 预加载高度 */
+    preLodeHeight: {
+      type: Number,
+      default: 50,
+    },
+    /** 类名 */
+    className: {
+      type: String,
+      default: '',
+    },
+    /** 滚动到指定元素 */
+    scrollIntoView: {
+      type: String,
+      default: '',
+    },
+    /** 滚动动画 */
+    scrollWithAnimation: {
+      type: Boolean,
+      default: false,
+    },
+    /** 显示返回顶部按钮 */
+    showBackTop: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      // 生成唯一占位符ID
+      placeholderId: uniqueId('virtual-placeholder-'),
+      // 子项高度数组
+      itemsHeight: [],
+      // 响应式状态
+      current: 1, // 当前页码
+      visitableData: [], // 可视区域数据
+      currentHeight: 0, // 当前总高度
+      scrollTop: 0, // 滚动位置
+
+      toView: '', // 内部滚动目标
+      start: 0,
+    };
+  },
+  computed: {
+    // 计算列表样式
+    style() {
+      return {
+        height:
+          typeof this.height === 'string' ? this.height : `${this.height}px`,
+      };
+    },
+    // 内部滚动目标
+    innerScrollIntoView() {
+      return this.toView || this.scrollIntoView;
+    },
+  },
+  watch: {
+    // 监听数据和分页大小变化，重置列表
+    dataSource: {
+      handler(val) {
+        this.resetList();
+      },
+      deep: true,
+    },
+    pageSize() {
+      this.resetList();
+    },
+  },
+  created() {
+    // 初始渲染数据（前两页）
+    this.visitableData = this.dataSource.slice(0, this.pageSize * 2);
+  },
+  provide() {
+    return {
+      itemsHeight: this.itemsHeight,
+      onSizeChange: this.onSizeChange,
+    };
+  },
+  methods: {
+    // 重置列表数据
+    resetList() {
+      this.current = 1;
+      this.start = 0;
+      this.visitableData = this.dataSource.slice(0, this.pageSize * 2);
+      this.itemsHeight = [];
+      this.currentHeight = 0;
+    },
+    // 滚动事件处理
+    onScroll(e) {
+      const scrollTop = e.detail.scrollTop;
+      this.scrollTop = scrollTop;
+
+      // 向上滚动时加载前面的数据
+      if (
+        this.current > 1 &&
+        this.currentHeight > 0 &&
+        scrollTop - this.preLodeHeight < this.currentHeight
+      ) {
+        this.start = this.current * this.pageSize;
+        this.current--;
+
+        this.updateVisitableData('up');
+        this.updateCurrentHeight();
+      }
+    },
+    // 滚动到底部加载更多
+    onScrollToLower() {
+      if ((this.current + 1) * this.pageSize < this.dataSource.length) {
+        this.start = this.current * this.pageSize;
+        this.current++;
+
+        this.updateCurrentHeight();
+        this.$nextTick(() => {
+          this.updateVisitableData('down');
+        });
+      }
+    },
+    // 更新可视区域数据
+    updateVisitableData(direction) {
+      let tempList = [...this.visitableData];
+      const pageSize = this.pageSize;
+      const current = this.current;
+
+      if (direction === 'down') {
+        // 向下滚动：移除最前面的一页，添加新的一页
+        tempList.splice(0, pageSize);
+        const start = pageSize * current;
+        let end = pageSize * (current + 1);
+        end = end > this.dataSource.length ? this.dataSource.length : end;
+        const newData = this.dataSource.slice(start, end);
+        tempList.push(...newData);
+      } else {
+        // 向上滚动：移除最后面的多余数据，添加前面的一页
+        // 将最末尾的部分进行隐藏
+        const delCount =
+          tempList.length - pageSize > 0
+            ? pageSize
+            : tempList.length - pageSize;
+
+        tempList.splice(pageSize, delCount);
+
+        // 处理上一页内容
+        let start = pageSize * (current - 1);
+
+        start = start < 0 ? 0 : start;
+
+        const end = pageSize * current;
+
+        if (end < 0) return;
+
+        const newData = this.dataSource.slice(start, end);
+        tempList.unshift(...newData);
+      }
+
+      this.visitableData = tempList;
+    },
+    // 更新总高度（累加已加载项的高度）
+    updateCurrentHeight() {
+      const total = this.itemsHeight
+        .slice(0, (this.current - 1) * this.pageSize)
+        .reduce((acc, height) => acc + (height || 0), 0);
+      this.currentHeight = total;
+    },
+    // 接收子组件的高度更新
+    onSizeChange(index, height) {
+      const list = [...this.itemsHeight];
+      list[index] = height;
+      this.itemsHeight = [...list];
+    },
+    // 返回顶部
+    onBackTop() {
+      this.toView = this.placeholderId;
+      this.$nextTick(() => {
+        this.current = 1;
+        this.start = 0;
+        this.currentHeight = 0;
+        this.updateVisitableData('up');
+        // 重置滚动目标，避免下次滚动冲突
+        this.toView = '';
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.virtual-list {
+  position: relative;
+  overflow: auto;
+}
+
+.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);
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+  z-index: 10;
+}
+</style>

package/dist/v2/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/v2/VuexList/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <view class="vuex-content">
+    <JsonPretty
+      :data="vuexList"
+      showLength
+      editable
+      v-if="showJson"
+      @update:data="onUpdateData"
+      @nodeClick="onNodeClick"
+    />
+    <Empty v-else />
+  </view>
+</template>
+
+<script>
+import JsonPretty from '../JsonPretty/index.vue';
+import Empty from '../Empty/index.vue';
+
+export default {
+  components: {
+    JsonPretty,
+    Empty,
+  },
+  props: {
+    vuexList: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      currentSelect: null, // 记录当前点击的节点
+    };
+  },
+  computed: {
+    // 判断是否显示JSON视图
+    showJson() {
+      try {
+        const str = JSON.stringify(this.vuexList);
+        // 当数据为对象且不为空时显示
+        return (
+          typeof this.vuexList === 'object' &&
+          this.vuexList !== null &&
+          str !== '{}' &&
+          str !== ''
+        );
+      } catch (error) {
+        return false;
+      }
+    },
+  },
+  methods: {
+    // 更新数据时触发
+    onUpdateData(data) {
+      // 解析当前选中节点的第一个键名
+      const firstKey = this.currentSelect?.path?.split('.')?.slice(1)?.[0];
+      // 触发更新事件
+      this.$emit('update:vuexList', data);
+      // 触发差异值事件
+      if (firstKey) {
+        this.$emit('diffValue', {
+          [firstKey]: data[firstKey],
+        });
+      }
+    },
+    // 节点点击事件
+    onNodeClick(node) {
+      this.currentSelect = node;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.vuex-content {
+  padding: 16px;
+  font-size: var(--dev-tool-base-font-size);
+}
+</style>