vite-uni-dev-tool 0.0.11 → 0.0.13

package/dev/components/Tabs/index.vue

@@ -1,123 +0,0 @@
-<template>
-  <view class="tabs">
-    <scroll-view
-      class="tabs-list"
-      ref="tabsRef"
-      scroll-x="true"
-      enable-flex="true"
-      scroll-with-animation
-      :scrollLeft="scrollLeft"
-      :scroll-into-view="scrollIntoView"
-      @scroll="onScroll"
-    >
-      <view
-        v-for="item in items"
-        :key="item.key"
-        :class="`tabs-item ${
-          item.index === modelValue ? 'tabs-item-active' : ''
-        } `"
-        :id="`tabs-item-${item.index}`"
-        @click="onChangeTabs(item)"
-      >
-        {{ item.label }}
-      </view>
-    </scroll-view>
-    <view class="tabs-extra">
-      <slot name="extra"></slot>
-      <CloseButton style="margin: 0 16px" @click="onClose" />
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import CloseButton from '../CloseButton/index.vue';
-// const activeKey = ref("Console");
-const props = defineProps<{
-  modelValue: number;
-  items: { label: string; key: string; value: any; index: number }[];
-  scrollLeft?: number;
-}>();
-
-const tabsRef = ref();
-
-const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'update:modelValue', value: number): void;
-  (e: 'change', value: number): void;
-  (e: 'scroll', value: any): void;
-}>();
-
-const scrollIntoView = computed(() => {
-  return `tabs-item-${props.modelValue}`;
-});
-
-function onChangeTabs(item: {
-  label: string;
-  key: string;
-  value: any;
-  index: number;
-}) {
-  // activeKey.value = item.key;
-  emit('update:modelValue', item.index);
-  emit('change', item.index);
-}
-function onClose() {
-  emit('close');
-}
-
-function onScroll(e: any) {
-  emit('scroll', e);
-}
-</script>
-
-<style scoped>
-.tabs {
-  display: flex;
-  align-items: center;
-  height: 32px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-  font-size: var(--dev-tool-base-font-size);
-}
-.tabs .tabs-list {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  overflow: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  white-space: nowrap;
-  width: 100%;
-}
-.tabs-list ::-webkit-scrollbar {
-  display: none;
-  width: 0;
-  height: 0;
-  background-color: transparent;
-}
-.tabs-list ::-webkit-scrollbar-thumb {
-  width: 0;
-  height: 0;
-  background-color: transparent;
-}
-.tabs .tabs-item {
-  display: inline-block;
-  padding: 0 16px;
-  height: 32px;
-  line-height: 32px;
-  border-bottom: 1px solid transparent;
-  box-sizing: border-box;
-  transition: all 0.3s;
-  cursor: pointer;
-}
-.tabs .tabs-item-active {
-  color: var(--dev-tool-main-color);
-  border-color: var(--dev-tool-main-color);
-}
-
-.tabs-extra {
-  display: flex;
-  align-items: center;
-}
-</style>

package/dev/components/Tag/index.vue

@@ -1,89 +0,0 @@
-<template>
-  <view
-    :class="`tag tag-${mode} ${active ? 'tag-active' : ''}`"
-    @click="onClick"
-  >
-    <slot></slot>
-  </view>
-</template>
-<script setup lang="ts">
-defineProps<{
-  mode:
-    | 'primary'
-    | 'warn'
-    | 'success'
-    | 'error'
-    | 'info'
-    | 'log'
-    | 'main'
-    | 'clear'
-    | string;
-  active?: boolean;
-}>();
-const emit = defineEmits<{ (e: 'click', event: MouseEvent): void }>();
-function onClick(event: MouseEvent) {
-  emit('click', event);
-}
-</script>
-<style scoped>
-.tag {
-  display: flex;
-  align-items: center;
-  padding: 0 4px;
-  width: min-content;
-  height: 24px;
-  color: #fff;
-  border-radius: 4px;
-  white-space: nowrap;
-  box-sizing: border-box;
-  font-size: var(--dev-tool-tag-font-size);
-  cursor: pointer;
-  transition: all 0.3s;
-}
-.tag-log {
-  color: #000;
-  background-color: var(--dev-tool-border-color);
-  border: 1px solid var(--dev-tool-border-color);
-}
-.tag-info {
-  color: #000;
-  background-color: var(--dev-tool-normal-bg-color);
-  border: 1px solid var(--dev-tool-normal-bg-color);
-}
-.tag-warn {
-  background-color: var(--dev-tool-warn-color);
-  border: 1px solid var(--dev-tool-warn-color);
-}
-.tag-success {
-  background-color: var(--dev-tool-success-color);
-  border: 1px solid var(--dev-tool-success-color);
-}
-.tag-error {
-  background-color: var(--dev-tool-error-color);
-  border: 1px solid var(--dev-tool-error-color);
-}
-.tag-main {
-  background-color: var(--dev-tool-main-color);
-  color: #fff;
-  border: 1px solid var(--dev-tool-main-color);
-}
-
-.tag-primary {
-  color: #fff;
-  background-color: #0958d9;
-  border: 1px solid #0958d9;
-}
-.tag-clear {
-  color: #0958d9;
-  border: 1px solid #0958d9;
-}
-.tag-all {
-  color: #000;
-  border: 1px solid #000;
-}
-
-.tag-active {
-  border-color: var(--dev-tool-main-color);
-  color: var(--dev-tool-main-color);
-}
-</style>

package/dev/components/UniEvent/UniEventItem.vue

@@ -1,124 +0,0 @@
-<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>
-
-    <Code
-      v-if="openCode && eventItem.stack"
-      :url="eventItem.stack"
-      :sourceFileServers="sourceFileServers"
-      :mode="mode"
-      @close="onCloseCode"
-    />
-  </view>
-</template>
-<script lang="ts" setup>
-import Tag from '../Tag/index.vue';
-import Code from '../Code/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[];
-}>();
-
-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/dev/components/UniEvent/index.vue

@@ -1,94 +0,0 @@
-<template>
-  <view class="uni-event-content">
-    <DevToolTitle style="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 style="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"
-      />
-    </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 type { DevTool } from '@/dev/type';
-
-defineProps<{
-  eventList?: DevTool.EventItem[];
-  eventCount?: DevTool.EventCount;
-  useDevSource?: boolean;
-  mode?: string;
-  sourceFileServers?: string[];
-}>();
-
-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/dev/components/UploadList/UploadDetail.vue

@@ -1,208 +0,0 @@
-<template>
-  <view class="upload-detail">
-    <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 }>();
-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: 1000;
-  top: 0;
-  left: 0;
-  padding: 0 16px;
-  /* #ifdef H5 */
-  padding: 50px 16px;
-  /* #endif */
-
-  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>