vite-uni-dev-tool 0.0.6 → 0.0.8

package/dev/components/RunJS/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <view class="run-js">
+    <view class="run-js-control">
+      <FilterInput
+        :modelValue="modelValue"
+        placeholder="查询"
+        @search="emit('search', $event)"
+        @update:modelValue="emit('update:modelValue', $event)"
+      />
+      <Tag mode="clear" @click="emit('clear')">清空</Tag>
+    </view>
+    <view class="run-js-list">
+      <view class="run-js-item" v-for="item in runJSList">
+        <view :class="`run-js-item-icon run-js-item-${item.mode}`"></view>
+        <view class="run-js-item-duration" v-if="item.mode === 'output'">
+          {{ item.duration }}ms
+        </view>
+        <view
+          class="run-js-item-content"
+          v-html="item.mode === 'input' ? item.code : item.result"
+        >
+        </view>
+      </view>
+      <view class="run-js-item">
+        <view class="run-js-item-icon run-js-item-input"> </view>
+
+        <input v-model="code" class="run-js-input" @confirm="onConfirm" />
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { DevTool } from '../../type';
+import FilterInput from '../FilterInput/index.vue';
+import Tag from '../Tag/index.vue';
+
+defineProps<{ runJSList: DevTool.RunJSItem[]; modelValue: string }>();
+
+const emit = defineEmits<{
+  (e: 'search', value: string): void;
+  (e: 'update:modelValue', value: string): void;
+  (e: 'clear'): void;
+  (e: 'run', value: string): void;
+}>();
+const code = ref('');
+function onConfirm() {
+  const value = code.value;
+  if (!value) return;
+  code.value = '';
+  setTimeout(() => {
+    emit('run', value);
+  }, 100);
+}
+</script>
+<style scoped>
+.run-js {
+  height: 100%;
+  font-size: var(--dev-tool-base-font-size);
+}
+.run-js-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;
+}
+
+.run-js-list {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+
+.run-js-item {
+  position: relative;
+  display: flex;
+  padding: 0 16px;
+  min-height: 28px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  overflow: hidden;
+}
+
+.run-js-item-icon {
+  width: 8px;
+  height: 8px;
+  border: 1px solid #000;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  overflow: hidden;
+}
+
+.run-js-item-input {
+  margin: 10px 0 10px -4px;
+  transform: rotate(45deg);
+}
+
+.run-js-item-output {
+  margin: 10px -4px 10px 0px;
+  transform: rotate(-135deg);
+}
+
+.run-js-item-content {
+  margin-left: 16px;
+  min-height: 28px;
+  line-height: 28px;
+  white-space: pre-line;
+  word-break: break-all;
+}
+
+.run-js-input {
+  margin: 1px 0 1px 16px;
+  min-height: 26px;
+  width: 100%;
+  border: 1px solid transparent;
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.run-js-item-duration {
+  position: absolute;
+  top: 2px;
+  right: 16px;
+  height: 24px;
+  line-height: 24px;
+}
+</style>

package/dev/components/SettingList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="setting-content">
     <view class="setting-item">
-      <view class="setting-item-title">DevTool</view>
+      <DevToolTitle>DevTool</DevToolTitle>
       <view class="setting-item-content">
         <view class="setting-row">
           <view>显示调试按钮：</view>
@@ -25,8 +25,8 @@
         </view>
 
         <view class="setting-tips">
-          点击后将会销毁调试器，销毁后不再接收调试信息，需要通过
-          createDevTool() 重新创建
+          点击后将会销毁调试器，销毁后不再接收调试信息，需要通过 createDevTool()
+          重新创建
         </view>
         <DButton class="setting-button" @click="onDestructionDevTool">
           销毁调试器
@@ -44,7 +44,7 @@
         </view>
         <view class="setting-tips">
           当前所有信息占用的存储空间,只会清除 Console, Network, Upload,
-          Websocket
+          Websocket, UniEvent
         </view>
         <DButton class="setting-button" @click="onClearCache">
           清除缓存
@@ -52,7 +52,7 @@
       </view>
     </view>
     <view class="setting-item">
-      <view class="setting-item-title">Log</view>
+      <DevToolTitle>Log</DevToolTitle>
       <view class="setting-item-content">
         <view class="setting-row">
           <view>导出当前日志信息：</view>
@@ -121,6 +121,7 @@
 import { reactive } from 'vue';
 import Checkbox from '../Checkbox/index.vue';
 import DButton from '../Button/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
 const props = defineProps<{
   devToolVisible?: boolean;
   sizeFormat?: string;
@@ -204,30 +205,19 @@ function onClearCache() {
   overflow: auto;
   font-size: var(--dev-tool-base-font-size);
 }
-.setting-content .setting-item {
+.setting-item {
   padding: 16px 16px 0 16px;
   box-sizing: border-box;
 }
-.setting-content .setting-item .setting-item-title {
-  display: flex;
-  align-items: center;
-}
-.setting-content .setting-item .setting-item-title::before {
-  content: '';
-  margin-right: 8px;
-  width: 2px;
-  height: 18px;
-  border-radius: 2px;
-  background-color: var(--dev-tool-main-color);
-}
-.setting-content .setting-item .setting-item-content .setting-row {
+
+.setting-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 8px 0;
   min-height: 18px;
 }
-.setting-content .setting-tips {
+.setting-tips {
   color: #616161;
   font-size: var(--dev-tool-tips-font-size);
   margin-bottom: 8px;

package/dev/components/UniEvent/UniEventItem.vue

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

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

@@ -156,7 +156,7 @@ function onClose() {
   position: fixed;
   width: 100vw;
   height: 100vh;
-  z-index: 10000;
+  z-index: 1000;
   top: 0;
   left: 0;
   padding: 0 16px;

package/dev/components/VirtualList/index.vue

@@ -0,0 +1,112 @@
+<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/WebSocket/WebSocketList.vue

@@ -82,7 +82,7 @@ function onClick(item: {
   position: fixed;
   width: 100vw;
   height: 100vh;
-  z-index: 10000;
+  z-index: 1000;
   top: 0;
   left: 0;
   padding: 0 16px;