vite-uni-dev-tool 0.0.13 → 0.0.14

package/dist/v3/UniEvent/UniEventItem.vue

@@ -0,0 +1,126 @@
+<template>
+  <view class="uni-event-item">
+    <view class="uni-event-item-row"> {{ eventItem.eventName }} </view>
+    <view class="uni-event-item-row">
+      <Tag mode="info" v-if="eventItem.type == 'on'">
+        {{ eventItem.type }}
+      </Tag>
+      <Tag mode="warn" v-if="eventItem.type == 'once'">
+        {{ eventItem.type }}
+      </Tag>
+      <Tag mode="main" v-if="eventItem.type == 'emit'">
+        {{ eventItem.type }}
+      </Tag>
+      <Tag mode="error" v-if="eventItem.type == 'off'">
+        {{ eventItem.type }}
+      </Tag>
+      <view class="uni-event-item-right"> {{ eventItem.timer }}</view>
+    </view>
+
+    <view
+      :class="`uni-event-item-right ${isUseDevSource ? 'link' : ''}`"
+      @click="onStackClick"
+    >
+      {{ eventItem.stack }}
+    </view>
+
+    <SourceCode
+      v-if="openCode && eventItem.stack"
+      :url="eventItem.stack"
+      :sourceFileServers="sourceFileServers"
+      :mode="mode"
+      :zIndex="zIndex"
+      @close="onCloseCode"
+    />
+  </view>
+</template>
+<script lang="ts" setup>
+import Tag from '../Tag/index.vue';
+import SourceCode from '../SourceCode/index.vue';
+import type { DevTool } from '../../type';
+import { computed, ref } from 'vue';
+import { isAndroid, isMockWX } from '../../utils';
+
+const props = defineProps<{
+  eventItem: DevTool.EventItem;
+  mode?: string;
+  useDevSource?: boolean;
+  sourceFileServers?: string[];
+  zIndex?: number;
+}>();
+
+const openCode = ref(false);
+
+const isUseDevSource = computed(() => {
+  return (
+    !isMockWX(props?.eventItem?.stack ?? '') &&
+    props.mode === 'development' &&
+    props.useDevSource
+  );
+});
+
+const isWXLink = computed(() => {
+  console.log('props?.eventItem: ', props?.eventItem);
+  console.log('props.mode: ', props.mode);
+  return (
+    isMockWX(props?.eventItem?.stack ?? '') || props.mode !== 'development'
+  );
+});
+
+function onStackClick() {
+  if (isWXLink.value) {
+    uni.showToast({
+      icon: 'none',
+      title: '[DevTool] 请在小程序真机调试模式下查看源码',
+    });
+    return;
+  }
+
+  if (!isUseDevSource.value) {
+    return;
+  }
+
+  if (isAndroid()) {
+    if (props.sourceFileServers && props.sourceFileServers.length > 0) {
+      openCode.value = true;
+    } else {
+      uni.showToast({
+        icon: 'none',
+        title: '[DevTool] sourceFileServers 配置异常',
+      });
+      uni?.__dev__console?.log('[DevTool] sourceFileServers 配置异常');
+    }
+  } else {
+    openCode.value = true;
+  }
+}
+
+function onCloseCode() {
+  openCode.value = false;
+}
+</script>
+
+<style scoped>
+.uni-event-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.uni-event-item-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 28px;
+  word-break: break-all;
+}
+
+.uni-event-item-right {
+  text-align: right;
+  word-break: break-all;
+}
+.link {
+  cursor: pointer;
+  text-decoration: underline;
+}
+</style>

package/dist/v3/UniEvent/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <view class="uni-event-content">
+    <DevToolTitle innerStyle="padding: 0 16px">事件触发统计</DevToolTitle>
+    <view class="uni-event-statistics">
+      <view class="uni-event-statistics-item">
+        <view>on: </view>
+        <Tag mode="log" style="flex: 1; justify-content: center">
+          {{ eventCount?.on ?? 0 }}
+        </Tag>
+      </view>
+      <view class="uni-event-statistics-item">
+        <view>once: </view>
+        <Tag mode="warn" style="flex: 1; justify-content: center">
+          {{ eventCount?.once ?? 0 }}
+        </Tag>
+      </view>
+      <view class="uni-event-statistics-item">
+        <view>emit: </view>
+        <Tag mode="main" style="flex: 1; justify-content: center">
+          {{ eventCount?.emit ?? 0 }}
+        </Tag>
+      </view>
+      <view class="uni-event-statistics-item">
+        <view>off: </view>
+        <Tag mode="error" style="flex: 1; justify-content: center">
+          {{ eventCount?.off ?? 0 }}
+        </Tag>
+      </view>
+    </view>
+    <DevToolTitle innerStyle="padding: 0 16px">
+      事件触发列表
+
+      <Tag mode="clear" style="margin-left: auto" @click="emit('clear')">
+        清空
+      </Tag>
+    </DevToolTitle>
+    <view class="uni-event-list">
+      <UniEventItem
+        v-for="item in eventList"
+        :eventItem="item"
+        :mode="mode"
+        :useDevSource="useDevSource"
+        :sourceFileServers="sourceFileServers"
+        :zIndex="zIndex"
+      />
+      <Empty v-if="!eventList || eventList.length === 0"> </Empty>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import DevToolTitle from '../DevToolTitle/index.vue';
+import UniEventItem from './UniEventItem.vue';
+import Tag from '../Tag/index.vue';
+import Empty from '../Empty/index.vue';
+import type { DevTool } from '@/dev/type';
+
+defineProps<{
+  eventList?: DevTool.EventItem[];
+  eventCount?: DevTool.EventCount;
+  useDevSource?: boolean;
+  mode?: string;
+  sourceFileServers?: string[];
+  zIndex?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'clear'): void;
+}>();
+</script>
+<style scoped>
+.uni-event-content {
+  height: 100%;
+  overflow: auto;
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.uni-event-statistics {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 0 16px;
+  height: 32px;
+  box-sizing: border-box;
+  gap: 12px;
+}
+.uni-event-statistics-item {
+  display: flex;
+  align-items: center;
+  width: 25%;
+}
+.uni-event-statistics-item view:first-child {
+  margin-right: 8px;
+}
+.uni-event-list {
+  height: calc(100% - 32px * 3);
+  overflow: auto;
+}
+</style>

package/dist/v3/UploadList/UploadDetail.vue

@@ -0,0 +1,192 @@
+<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: var(--dev-tool-bg2-color);
+  box-sizing: border-box;
+  transform: background-color 0.3s;
+}
+.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-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: var(--dev-tool-info-color);
+}
+.upload-detail .upload-detail-payload {
+  word-break: break-all;
+  max-width: 100%;
+}
+</style>

package/dist/v3/UploadList/UploadItem.vue

@@ -0,0 +1,117 @@
+<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: var(--dev-tool-text-color);
+}
+
+.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/dist/v3/UploadList/index.vue

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