vite-uni-dev-tool 0.0.12 → 0.0.13

package/dev/components/UploadList/UploadDetail.vue

@@ -1,204 +0,0 @@
-<template>
-  <view class="upload-detail" :style="{ zIndex: zIndex }">
-    <view class="upload-detail-control">
-      <Tag
-        v-for="item in selectItems"
-        :active="currentSelect === item.value"
-        :mode="item.mode"
-        :key="item.value"
-        @click="onSelect(item)"
-      >
-        {{ item.label }}
-      </Tag>
-
-      <CloseButton style="margin-left: auto" @click="onClose" />
-    </view>
-
-    <view class="upload-detail-header" v-if="currentSelect === 'header'">
-      <view class="upload-detail-title">常规</view>
-      <view class="net-detail-item">
-        <view>请求url:</view>
-        <view>{{ upload.url }}</view>
-      </view>
-      <view class="net-detail-item">
-        <view>请求方法:</view>
-        <Tag mode="info">{{ upload.method ?? 'POST' }}</Tag>
-      </view>
-      <view class="net-detail-item">
-        <view>状态代码:</view>
-        <Tag mode="info">{{ upload.status }}</Tag>
-      </view>
-      <view class="upload-detail-title">请求头</view>
-      <view
-        class="net-detail-item"
-        v-for="item in upload?.headers?.requestHeader"
-        :key="item.key"
-      >
-        <view>{{ item.key }}:</view>
-        {{ item.value }}
-      </view>
-      <!-- <view class="upload-detail-title">响应头</view>
-      <view
-        class="net-detail-item"
-        v-for="item in upload?.headers?.responseHeader"
-        :key="item.key"
-      >
-        <view>{{ item.key }}:</view>
-        {{ item.value }}
-      </view> -->
-    </view>
-
-    <template v-if="currentSelect === 'formdata'">
-      <template v-if="formData?.type === 'object'">
-        <JsonPretty :data="formData.value" />
-      </template>
-      <view
-        v-else-if="formData?.type === 'string'"
-        class="upload-detail-payload"
-      >
-        {{ formData.value }}
-      </view>
-      <Empty v-else />
-    </template>
-
-    <template v-if="currentSelect === 'response'">
-      <template v-if="response?.type === 'object'">
-        <JsonPretty :data="response.value" virtual />
-      </template>
-      <view
-        v-else-if="response?.type === 'string'"
-        class="upload-detail-payload"
-      >
-        {{ response.value }}
-      </view>
-      <Empty v-else />
-    </template>
-  </view>
-</template>
-<script lang="ts" setup>
-import { ref, computed } from 'vue';
-import JsonPretty from '../JsonPretty/index.vue';
-import Tag from '../Tag/index.vue';
-import Empty from '../Empty/index.vue';
-import CloseButton from '../CloseButton/index.vue';
-import type { DevTool } from '../../type';
-const props = defineProps<{ upload: DevTool.UploadItem; zIndex?: number }>();
-const emit = defineEmits<{ (e: 'close'): void }>();
-const selectItems = [
-  {
-    label: 'header',
-    value: 'header',
-    mode: 'info',
-  },
-  {
-    label: 'formdata',
-    value: 'formdata',
-    mode: 'info',
-  },
-  {
-    label: 'response',
-    value: 'response',
-    mode: 'info',
-  },
-];
-const currentSelect = ref('header');
-
-const formData = computed(() => {
-  try {
-    if (props.upload.formData) {
-      return {
-        value: JSON.parse(JSON.stringify(props.upload.formData)),
-        type: 'object',
-      };
-    }
-    return {
-      value: {},
-      type: 'empty',
-    };
-  } catch (error) {
-    return {
-      value: JSON.parse(JSON.stringify(props.upload.formData)),
-      type: 'object',
-    };
-  }
-});
-
-const response = computed(() => {
-  try {
-    if (props.upload.response) {
-      return {
-        value: JSON.parse(JSON.stringify(props.upload.response)),
-        type: 'object',
-      };
-    }
-    return {
-      value: {},
-      type: 'empty',
-    };
-  } catch (error) {
-    return {
-      value: props.upload.response,
-      type: props.upload.response ? 'string' : 'empty',
-    };
-  }
-});
-
-function onSelect(item: { label: string; value: string }) {
-  currentSelect.value = item.value;
-}
-
-function onClose() {
-  emit('close');
-}
-</script>
-<style>
-.upload-detail {
-  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;
-}
-.upload-detail .upload-detail-control {
-  display: flex;
-  align-items: center;
-  margin-bottom: 4px;
-  gap: 12px;
-  height: 32px;
-  border-bottom: 1px solid transparent;
-  box-sizing: border-box;
-}
-
-.upload-detail .upload-detail-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;
-}
-
-.upload-detail .upload-detail-header .net-detail-item {
-  display: flex;
-  align-items: center;
-  min-height: 28px;
-  word-break: break-all;
-}
-.upload-detail .upload-detail-header .net-detail-item > view:first-child {
-  white-space: nowrap;
-  margin-right: 8px;
-  color: #616161;
-}
-.upload-detail .upload-detail-payload {
-  word-break: break-all;
-  max-width: 100%;
-}
-</style>

package/dev/components/UploadList/UploadItem.vue

@@ -1,117 +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"
-    :zIndex="zIndex"
-    @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;
-  zIndex?: number;
-}>();
-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,117 +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="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 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';
-import { onMounted, ref } from 'vue';
-
-defineProps<{
-  currentUploadType: string;
-  uploadList: DevTool.UploadItem[];
-  modelValue: string;
-  zIndex: number;
-}>();
-
-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);
-}
-
-const height = ref(0);
-onMounted(() => {
-  const { windowHeight } = uni.getWindowInfo();
-  height.value = windowHeight - 32 - 32;
-});
-</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>