vite-uni-dev-tool 0.0.12 → 0.0.13

package/dev/components/VirtualListPro/index.vue

@@ -1,238 +0,0 @@
-<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/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 } 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/dev/components/WebSocket/WebSocketItem.vue

@@ -1,103 +0,0 @@
-<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: #616161;
-}
-
-.websocket-item .websocket-info .websocket-info-last {
-  white-space: nowrap;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-</style>

package/dev/components/WebSocket/WebSocketList.vue

@@ -1,173 +0,0 @@
-<template>
-  <view class="web-socket-list-container" :style="{ zIndex: zIndex }">
-    <view class="web-socket-top">
-      请求url:
-
-      <CloseButton style="margin-left: auto" @click="onClose" />
-    </view>
-    <view class="web-socket-url">
-      {{ ws.url }}
-    </view>
-
-    <view class="web-socket-data">
-      <view class="web-socket-title"
-        >请求方式：<Tag mode="info"> {{ ws.method }} </Tag></view
-      >
-      <view class="web-socket-title">请求头：</view>
-      <view
-        class="header-detail-item"
-        v-for="item in ws.headers"
-        :key="item.key"
-      >
-        <view>{{ item.key }}: </view>
-        {{ item.value }}
-      </view>
-
-      <view class="web-socket-title">消息列表：</view>
-      <view class="web-socket-data-list">
-        <view
-          v-for="item in ws.message"
-          :key="item.time"
-          :class="`web-socket-data-item web-socket-data-item-${item.type}`"
-          @click="onClick(item)"
-        >
-          <view class="web-socket-data-time"
-            >{{ formatDate(item.time, 'HH:mm:ss') }}
-          </view>
-          <view class="web-socket-data-content">
-            {{ item.data }}
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-<script setup lang="ts">
-import Tag from '../Tag/index.vue';
-import CloseButton from '../CloseButton/index.vue';
-import { formatDate } from '../../utils/index';
-import type { DevTool } from '../../type';
-
-defineProps<{ ws: DevTool.WS; zIndex?: number }>();
-const emit = defineEmits<{ (e: 'close'): void }>();
-
-function onClose() {
-  emit('close');
-}
-
-function onClick(item: {
-  type: 'success' | 'error';
-  data: string;
-  time: number;
-}) {
-  uni.setClipboardData({
-    data: JSON.stringify(item),
-    success() {
-      uni.showToast({
-        title: '复制成功',
-        icon: 'none',
-      });
-    },
-    fail() {
-      uni.showToast({
-        title: '复制失败',
-        icon: 'none',
-      });
-    },
-  });
-}
-</script>
-<style>
-.web-socket-list-container {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  z-index: 1001;
-  top: 0;
-  left: 0;
-  padding: 0 16px;
-
-  background-color: rgba(255, 255, 255, 0.95);
-  box-sizing: border-box;
-}
-.web-socket-list-title {
-  min-height: 32px;
-  display: flex;
-  align-items: center;
-}
-
-.web-socket-data {
-  height: calc(100% - 32px);
-  overflow: auto;
-}
-
-.web-socket-url {
-  display: flex;
-  align-items: center;
-  min-height: 28px;
-
-  white-space: wrap;
-  word-break: break-all;
-}
-
-.web-socket-close {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin-left: auto;
-  border-radius: 50%;
-  border: 1px solid #000;
-  box-sizing: border-box;
-}
-.web-socket-top {
-  display: flex;
-  align-items: center;
-  height: 32px;
-
-  border-bottom: 1px solid transparent;
-  box-sizing: border-box;
-}
-.web-socket-title {
-  display: flex;
-  align-items: center;
-}
-.header-detail-item {
-  display: flex;
-  align-items: center;
-  min-height: 28px;
-  word-break: break-all;
-}
-.header-detail-item > view:first-child {
-  white-space: nowrap;
-  margin-right: 8px;
-  color: #616161;
-}
-
-.web-socket-data-item {
-  display: flex;
-  align-items: center;
-  min-height: 28px;
-}
-.web-socket-data-item-error {
-  background-color: var(--dev-tool-error-bg-color);
-}
-.web-socket-data-item-success {
-  background-color: var(--dev-tool-success-bg-color);
-}
-.web-socket-data-time {
-  /* margin-right: 16px; */
-  padding: 0 6px;
-  flex-shrink: 0;
-  color: #616161;
-}
-.web-socket-data-content {
-  padding: 6px;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-all;
-}
-</style>