vite-uni-dev-tool 0.0.12 → 0.0.14

package/dist/v2/UniEvent/UniEventItem.vue

@@ -0,0 +1,157 @@
+<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>
+import Tag from '../Tag/index.vue';
+import SourceCode from '../SourceCode/index.vue';
+import { isAndroid, isMockWX } from '../../utils';
+
+export default {
+  components: {
+    Tag,
+    SourceCode,
+  },
+  props: {
+    eventItem: {
+      type: Object,
+      required: true,
+      validator: (value) => {
+        // 基础验证确保必要字段存在
+        return ['eventName', 'type', 'timer', 'stack'].every(
+          (key) => key in value,
+        );
+      },
+    },
+    mode: {
+      type: String,
+      default: '',
+    },
+    useDevSource: {
+      type: Boolean,
+      default: false,
+    },
+    sourceFileServers: {
+      type: Array,
+      default: () => [],
+    },
+    zIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      openCode: false,
+    };
+  },
+  computed: {
+    isUseDevSource() {
+      return (
+        !isMockWX(this.eventItem?.stack ?? '') &&
+        this.mode === 'development' &&
+        this.useDevSource
+      );
+    },
+    isWXLink() {
+      console.log('eventItem: ', this.eventItem);
+      console.log('mode: ', this.mode);
+      return (
+        isMockWX(this.eventItem?.stack ?? '') || this.mode !== 'development'
+      );
+    },
+  },
+  methods: {
+    onStackClick() {
+      if (this.isWXLink) {
+        uni.showToast({
+          icon: 'none',
+          title: '[DevTool] 请在小程序真机调试模式下查看源码',
+        });
+        return;
+      }
+
+      if (!this.isUseDevSource) {
+        return;
+      }
+
+      if (isAndroid()) {
+        if (this.sourceFileServers && this.sourceFileServers.length > 0) {
+          this.openCode = true;
+        } else {
+          uni.showToast({
+            icon: 'none',
+            title: '[DevTool] sourceFileServers 配置异常',
+          });
+          if (uni?.__dev__console?.log) {
+            uni.__dev__console.log('[DevTool] sourceFileServers 配置异常');
+          }
+        }
+      } else {
+        this.openCode = true;
+      }
+    },
+    onCloseCode() {
+      this.openCode = 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/v2/UniEvent/index.vue

@@ -0,0 +1,127 @@
+<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="handleClear">
+        清空
+      </Tag>
+    </DevToolTitle>
+    <view class="uni-event-list">
+      <UniEventItem
+        v-for="item in eventList"
+        :eventItem="item"
+        :mode="mode"
+        :useDevSource="useDevSource"
+        :sourceFileServers="sourceFileServers"
+        :zIndex="zIndex"
+        :key="item.id"
+      ></UniEventItem>
+      <Empty v-if="!eventList || eventList.length === 0"> </Empty>
+    </view>
+  </view>
+</template>
+
+<script>
+import DevToolTitle from '../DevToolTitle/index.vue';
+import UniEventItem from './UniEventItem.vue';
+import Tag from '../Tag/index.vue';
+import Empty from '../Empty/index.vue';
+
+export default {
+  components: {
+    DevToolTitle,
+    UniEventItem,
+    Tag,
+    Empty,
+  },
+  props: {
+    eventList: {
+      type: Array,
+      default: () => [],
+    },
+    eventCount: {
+      type: Object,
+      default: () => ({}),
+    },
+    useDevSource: {
+      type: Boolean,
+      default: false,
+    },
+    mode: {
+      type: String,
+      default: '',
+    },
+    sourceFileServers: {
+      type: Array,
+      default: () => [],
+    },
+    zIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  methods: {
+    handleClear() {
+      this.$emit('clear');
+    },
+  },
+};
+</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/v2/UploadList/UploadDetail.vue

@@ -0,0 +1,204 @@
+<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>
+
+    <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>
+import JsonPretty from '../JsonPretty/index.vue';
+import Tag from '../Tag/index.vue';
+import Empty from '../Empty/index.vue';
+import CloseButton from '../CloseButton/index.vue';
+
+export default {
+  components: {
+    JsonPretty,
+    Tag,
+    Empty,
+    CloseButton,
+  },
+  props: {
+    upload: {
+      type: Object,
+      required: true,
+    },
+    zIndex: {
+      type: Number,
+      default: 1001,
+    },
+  },
+  data() {
+    return {
+      currentSelect: 'header',
+      selectItems: [
+        {
+          label: 'header',
+          value: 'header',
+          mode: 'info',
+        },
+        {
+          label: 'formdata',
+          value: 'formdata',
+          mode: 'info',
+        },
+        {
+          label: 'response',
+          value: 'response',
+          mode: 'info',
+        },
+      ],
+    };
+  },
+  computed: {
+    formData() {
+      try {
+        if (this.upload.formData) {
+          return {
+            value: JSON.parse(JSON.stringify(this.upload.formData)),
+            type: 'object',
+          };
+        }
+        return {
+          value: {},
+          type: 'empty',
+        };
+      } catch (error) {
+        return {
+          value: JSON.parse(JSON.stringify(this.upload.formData)),
+          type: 'object',
+        };
+      }
+    },
+    response() {
+      try {
+        if (this.upload.response) {
+          return {
+            value: JSON.parse(JSON.stringify(this.upload.response)),
+            type: 'object',
+          };
+        }
+        return {
+          value: {},
+          type: 'empty',
+        };
+      } catch (error) {
+        return {
+          value: this.upload.response,
+          type: this.upload.response ? 'string' : 'empty',
+        };
+      }
+    },
+  },
+  methods: {
+    onSelect(item) {
+      this.currentSelect = item.value;
+    },
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.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/v2/UploadList/UploadItem.vue

@@ -0,0 +1,134 @@
+<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>
+  <UploadDetail
+    v-if="showDetail"
+    :upload="upload"
+    :zIndex="zIndex"
+    @close="onClose"
+  />
+</template>
+
+<script>
+import Tag from '../Tag/index.vue';
+import UploadDetail from './UploadDetail.vue';
+import { formatDate } from '../../utils';
+
+export default {
+  components: {
+    Tag,
+    UploadDetail,
+  },
+  props: {
+    /** @type {{url: string; status: string; progress: string; startTime: string; endTime: string}} */
+    upload: {
+      type: Object,
+      required: true,
+    },
+    zIndex: {
+      type: Number,
+      default: 1000,
+    },
+  },
+  data() {
+    return {
+      showDetail: false,
+    };
+  },
+  methods: {
+    onClose() {
+      this.showDetail = false;
+    },
+    formatDate, // 引入工具函数
+  },
+};
+</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>