vite-uni-dev-tool 0.0.11 → 0.0.12

package/dev/components/NetworkList/index.vue

@@ -18,14 +18,19 @@
       </Tag>
     </view>
 
-    <VirtualListPro :data="networkList" :pageSize="10" className="network-list">
+    <VirtualListPro
+      :data="networkList"
+      :pageSize="15"
+      :height="height"
+      className="network-list"
+    >
       <template v-slot="{ list, start }">
         <AutoSize
           v-for="(item, index) in list"
           :index="start + index"
           :key="start + index"
         >
-          <NetworkItem :network="item" />
+          <NetworkItem :network="item" :zIndex="zIndex" />
         </AutoSize>
         <Empty v-if="!networkList || networkList.length === 0" />
       </template>
@@ -40,11 +45,13 @@ 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<{
   currentNetworkType: string;
   networkList: DevTool.NetworkItem[];
   modelValue: string;
+  zIndex?: number;
 }>();
 
 const emit = defineEmits<{
@@ -93,6 +100,12 @@ const networkFilterItems = [
 function onChoose(type: string) {
   emit('choose', type);
 }
+
+const height = ref(0);
+onMounted(() => {
+  const { windowHeight } = uni.getWindowInfo();
+  height.value = windowHeight - 32 - 32;
+});
 </script>
 <style scoped>
 .network-content {

package/dev/components/RouteList/index.vue

@@ -11,7 +11,12 @@
       <Tag mode="clear" @click="onRefresh">刷新</Tag>
     </view>
 
-    <VirtualListPro :data="routeList" :pageSize="10" className="route-list">
+    <VirtualListPro
+      :data="routeList"
+      :pageSize="15"
+      :height="height"
+      className="route-list"
+    >
       <template v-slot="{ list, start }">
         <AutoSize
           v-for="(item, index) in list"
@@ -47,6 +52,7 @@ 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<{ routeList: DevTool.Page[]; modelValue?: string }>();
 const emit = defineEmits<{
@@ -62,6 +68,11 @@ function onGoTo(page: DevTool.Page) {
 function onRefresh() {
   emit('routeRefresh');
 }
+const height = ref(0);
+onMounted(() => {
+  const { windowHeight } = uni.getWindowInfo();
+  height.value = windowHeight - 32 - 32;
+});
 </script>
 <style scoped>
 .route-content {

package/dev/components/SettingList/index.vue

@@ -6,7 +6,7 @@
         <view class="setting-row">
           <view>显示调试按钮：</view>
           <Checkbox
-            v-model="setting.showDevButton"
+            :modelValue="devToolVisible"
             @change="onChangeShowDevButton"
           />
         </view>
@@ -122,13 +122,11 @@ 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<{
+defineProps<{
   devToolVisible?: boolean;
   sizeFormat?: string;
 }>();
 const setting = reactive({
-  showDevButton: props.devToolVisible,
-
   restartDevTool: false,
   restartApp: false,
   exportLog: false,
@@ -166,7 +164,6 @@ function onChangeShowDevButton(show: boolean) {
   emit('showDevButton', show);
 }
 function onRestartDevTool(restart: boolean) {
-  console.log('restart: ', restart);
   restart && emit('restartDevTool');
 }
 

package/dev/components/SourceCode/index.vue

@@ -0,0 +1,231 @@
+<template>
+  <view class="dev-tool-code" :style="{ zIndex: zIndex }">
+    <view class="dev-tool-code-control">
+      <FilterInput
+        v-model="modelValue"
+        style="width: 100%"
+        @search="onSearch"
+      />
+      <CloseButton style="margin-left: auto" @click="onClose" />
+    </view>
+    <view class="dev-tool-code-title">{{ fileName }}</view>
+    <scroll-view
+      scroll-y="true"
+      scroll-x="true"
+      class="dev-tool-code-list"
+      scroll-with-animation="true"
+      :scroll-top="scrollTop"
+      :scroll-into-view="scrollIntoView"
+    >
+      <view
+        v-for="(code, index) in codes"
+        :id="`dev-tool-code-item-${index}`"
+        :key="index"
+        :class="`dev-tool-code-item ${index === activeRowCol.activeRow ? 'dev-tool-code-item-active' : ''}`"
+      >
+        <view class="dev-tool-code-item-index">
+          {{ start + index + 1 }}
+        </view>
+
+        <view class="dev-tool-code-item-content" v-html="code"></view>
+      </view>
+      <Empty v-if="!codes || codes.length === 0" />
+    </scroll-view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed, ref, nextTick, onMounted } from 'vue';
+import FilterInput from '../FilterInput/index.vue';
+import CloseButton from '../CloseButton/index.vue';
+import Empty from '../Empty/index.vue';
+import { escapeHTML, hightLight, isAndroid, parseStock } from '../../utils';
+
+const props = defineProps<{
+  url: string;
+  sourceFileServers?: string[];
+  mode?: string;
+  zIndex?: number;
+}>();
+
+const emit = defineEmits<{ (e: 'close'): void }>();
+
+const modelValue = ref('');
+const scrollTop = ref(0);
+const fileName = computed(() => {
+  const name =
+    props?.url?.split('/')?.pop()?.replace(/\)|\(/, '') ?? '文件名称未知';
+  return name;
+});
+
+const activeRowCol = ref({ row: -1, col: -1, activeRow: -1 });
+
+let backupCodes: string[] = [];
+
+const codes = ref<string[]>([]);
+
+const scrollIntoView = ref('');
+
+const start = computed(() => {
+  return activeRowCol.value.row - 20 > 0 ? activeRowCol.value.row - 20 : 0;
+});
+
+function onClose() {
+  emit('close');
+}
+
+function onSearch(value: string) {
+  codes.value = backupCodes.map((code) => {
+    return hightLight(code, value);
+  });
+}
+
+let index = 0;
+function getCode(url: string, i: number = 0) {
+  let allUrl = url;
+  // 平台判断
+  if (isAndroid()) {
+    if (!props.sourceFileServers?.[i]) {
+      index = 0;
+      return;
+    }
+
+    allUrl = props.sourceFileServers?.[i] + '/src/' + url;
+  }
+
+  uni.showLoading({ mask: true });
+  uni.request({
+    url: allUrl,
+    success: (res) => {
+      if (typeof res.data === 'string') {
+        // 为什么要注释掉？
+        // 在 Android 识别到标签后会进行重启，导致代码无法显示
+        // TODO: 还有其它原因导致重启
+        const str = res.data
+          ?.replace(/<jscript/, '// [DevTool] 注释 <javascript')
+          ?.replace(/<\/script>/, '// [DevTool] 注释 </javascript>')
+          ?.replace(/<style/, '// [DevTool] 注释 <style')
+          ?.replace(/<\/style>/, '// [DevTool] 注释 </style>');
+        backupCodes = escapeHTML(str ?? '')
+          .toString()
+          .split('\n');
+
+        const start =
+          activeRowCol.value.row - 20 > 0 ? activeRowCol.value.row - 20 : 0;
+
+        const end =
+          activeRowCol.value.row + 20 > backupCodes.length
+            ? backupCodes.length
+            : activeRowCol.value.row + 20;
+
+        // backupCodes.slice(start, end);
+
+        codes.value = backupCodes.slice(start, end);
+
+        activeRowCol.value.activeRow = activeRowCol.value.row - start;
+
+        nextTick(() => {
+          scrollIntoView.value = `dev-tool-code-item-${activeRowCol.value.activeRow}`;
+        });
+      }
+    },
+    fail: (err) => {
+      index++;
+      getCode(url, index);
+      uni.showToast({ icon: 'none', title: '正在重新尝试中...' });
+    },
+    complete: () => {
+      uni.hideLoading();
+    },
+  });
+}
+
+/** 开发环境获取源代码 */
+function getSourceCodeDev(url: string) {
+  if (!url) {
+    uni.showToast({ icon: 'none', title: '[DevTool] url 处理异常' });
+    uni?.__dev__console?.log('[DevTool] url 处理异常');
+    return;
+  }
+
+  getCode(url, index);
+}
+
+onMounted(() => {
+  let url = props?.url;
+
+  const { path, col, row } = parseStock(props?.url ?? '');
+
+  if (path) {
+    url = path;
+  }
+
+  activeRowCol.value.col = col;
+  activeRowCol.value.row = row;
+
+  if (props.mode === 'development') {
+    // 开发环境查看源码
+    getSourceCodeDev(url);
+  } else if (props.mode === 'production') {
+    // TODO 生产环境查看源码
+  }
+});
+</script>
+<style scoped>
+.dev-tool-code {
+  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;
+  color: #000;
+}
+
+.dev-tool-code-control {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.dev-tool-code-title {
+  height: 32px;
+  line-height: 32px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: auto;
+}
+
+.dev-tool-code-list {
+  height: calc(100% - 68px);
+}
+
+.dev-tool-code-item {
+  display: flex;
+  align-items: center;
+  height: 28px;
+}
+.dev-tool-code-item-active {
+  color: #fff;
+  background-color: var(--dev-tool-main-color);
+}
+
+.dev-tool-code-item-index {
+  flex-shrink: 0;
+  width: 20px;
+  margin-right: 8px;
+  text-align: right;
+}
+
+.dev-tool-code-item-content {
+  white-space: pre;
+}
+</style>

package/dev/components/UniEvent/UniEventItem.vue

@@ -24,18 +24,19 @@
       {{ eventItem.stack }}
     </view>
 
-    <Code
+    <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 Code from '../Code/index.vue';
+import SourceCode from '../SourceCode/index.vue';
 import type { DevTool } from '../../type';
 import { computed, ref } from 'vue';
 import { isAndroid, isMockWX } from '../../utils';
@@ -45,6 +46,7 @@ const props = defineProps<{
   mode?: string;
   useDevSource?: boolean;
   sourceFileServers?: string[];
+  zIndex?: number;
 }>();
 
 const openCode = ref(false);

package/dev/components/UniEvent/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="uni-event-content">
-    <DevToolTitle style="padding: 0 16px">事件触发统计</DevToolTitle>
+    <DevToolTitle innerStyle="padding: 0 16px">事件触发统计</DevToolTitle>
     <view class="uni-event-statistics">
       <view class="uni-event-statistics-item">
         <view>on: </view>
@@ -27,8 +27,8 @@
         </Tag>
       </view>
     </view>
-    <DevToolTitle style="padding: 0 16px"
-      >事件触发列表
+    <DevToolTitle innerStyle="padding: 0 16px">
+      事件触发列表
 
       <Tag mode="clear" style="margin-left: auto" @click="emit('clear')">
         清空
@@ -41,7 +41,9 @@
         :mode="mode"
         :useDevSource="useDevSource"
         :sourceFileServers="sourceFileServers"
+        :zIndex="zIndex"
       />
+      <Empty v-if="!eventList || eventList.length === 0"> </Empty>
     </view>
   </view>
 </template>
@@ -49,6 +51,7 @@
 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<{
@@ -57,6 +60,7 @@ defineProps<{
   useDevSource?: boolean;
   mode?: string;
   sourceFileServers?: string[];
+  zIndex?: number;
 }>();
 
 const emit = defineEmits<{

package/dev/components/UploadList/UploadDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="upload-detail">
+  <view class="upload-detail" :style="{ zIndex: zIndex }">
     <view class="upload-detail-control">
       <Tag
         v-for="item in selectItems"
@@ -82,7 +82,7 @@ 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 props = defineProps<{ upload: DevTool.UploadItem; zIndex?: number }>();
 const emit = defineEmits<{ (e: 'close'): void }>();
 const selectItems = [
   {
@@ -156,14 +156,10 @@ function onClose() {
   position: fixed;
   width: 100vw;
   height: 100vh;
-  z-index: 1000;
+  z-index: 1001;
   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;
 }

package/dev/components/UploadList/UploadItem.vue

@@ -37,7 +37,12 @@
     </view>
   </view>
   <!-- <Transition name="slide-fade"> -->
-  <UploadDetail v-if="showDetail" :upload="upload" @close="onClose" />
+  <UploadDetail
+    v-if="showDetail"
+    :upload="upload"
+    :zIndex="zIndex"
+    @close="onClose"
+  />
   <!-- </Transition> -->
 </template>
 
@@ -49,6 +54,7 @@ import { formatDate } from '../../utils';
 import type { DevTool } from '../../type';
 defineProps<{
   upload: DevTool.UploadItem;
+  zIndex?: number;
 }>();
 const showDetail = ref(false);
 

package/dev/components/UploadList/index.vue

@@ -17,14 +17,19 @@
         {{ item.label }}
       </Tag>
     </view>
-    <VirtualListPro :data="uploadList" :pageSize="10" className="upload-list">
+    <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" />
+          <UploadItem :upload="item" :zIndex="zIndex" />
         </AutoSize>
         <Empty v-if="!uploadList || uploadList.length === 0" />
       </template>
@@ -39,11 +44,13 @@ 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<{
@@ -82,6 +89,12 @@ const uploadFilterItems = [
 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 {

package/dev/components/VirtualListPro/index.vue

@@ -1,15 +1,19 @@
 <template>
   <scroll-view
     :lower-threshold="preLodeHeight"
-    :scroll-into-view="scrollIntoView"
     :scroll-with-animation="scrollWithAnimation"
     :class="['virtual-list', className]"
+    :style="style"
+    :scroll-into-view="innerScrollIntoView"
     scroll-y
     @scroll="onScroll"
     @scrolltolower="onScrollToLower"
   >
     <!-- 阈值判断 -->
-    <view :style="{ height: `${state.currentHeight}px` }"></view>
+    <view
+      :id="placeholderId"
+      :style="{ height: `${state.currentHeight}px` }"
+    ></view>
     <view>
       <!-- 将可视数据传入到slot -->
       <slot
@@ -18,10 +22,20 @@
         :start="(state.current - 1) * props.pageSize"
       ></slot>
     </view>
+
+    <view
+      v-if="state.currentHeight > props.height && showBackTop"
+      class="virtual-back-top"
+      @click="onBackTop"
+    >
+      ↑
+    </view>
   </scroll-view>
 </template>
 <script lang="ts" setup>
-import { reactive, watch, onBeforeMount, provide } from 'vue';
+import { nextTick } from 'vue';
+import { uniqueId } from '../../utils';
+import { reactive, watch, onBeforeMount, provide, computed, ref } from 'vue';
 
 const props = withDefaults(
   defineProps<{
@@ -43,6 +57,8 @@ const props = withDefaults(
     scrollIntoView?: string;
     /** 滚动动画 */
     scrollWithAnimation?: boolean;
+    /** 返回顶部 */
+    showBackTop?: boolean;
   }>(),
   {
     height: 400,
@@ -57,12 +73,17 @@ const state = reactive<{
   visitableData: any[];
   currentHeight: number;
   height: number;
+  scrollTop: number;
 }>({
   height: 0,
   current: 1,
   visitableData: [],
   currentHeight: 0,
+  scrollTop: 0,
 });
+
+const placeholderId = uniqueId('virtual-placeholder-');
+
 /**
  * 每一项的高度
  */
@@ -70,6 +91,19 @@ const itemsHeight: number[] = [];
 
 provide('itemsHeight', itemsHeight);
 
+const style = computed(() => {
+  return {
+    height:
+      typeof props.height === 'string' ? props.height : props.height + 'px',
+  };
+});
+
+const toView = ref('');
+
+const innerScrollIntoView = computed(() => {
+  return toView.value || props.scrollIntoView;
+});
+
 onBeforeMount(() => {
   // 初始渲染数据
   state.visitableData = props.data.slice(0, props.pageSize * 2);
@@ -171,5 +205,34 @@ function onSizeChange(index: number, height: number) {
   itemsHeight[index] = height;
 }
 provide('onSizeChange', onSizeChange);
+
+/** 返回顶部 */
+function onBackTop() {
+  toView.value = placeholderId;
+
+  nextTick(() => {
+    state.current = 1;
+    state.currentHeight = 0;
+    updateVisitableData('up');
+
+    toView.value = '';
+  });
+}
 </script>
-<style scoped></style>
+<style scoped>
+.virtual-list {
+  position: relative;
+}
+
+.virtual-back-top {
+  position: sticky;
+  bottom: 20px;
+  left: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
+</style>

package/dev/components/VuexList/index.vue

@@ -12,7 +12,7 @@
   </view>
 </template>
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import JsonPretty from '../JsonPretty/index.vue';
 import Empty from '../Empty/index.vue';
 const props = defineProps<{
@@ -39,7 +39,7 @@ function onUpdateData(data: Record<string, any>) {
   const firstKey = currentSelect?.path.split('.')?.slice(1)?.[0];
   emit('update:vuexList', data);
   emit('diffValue', {
-    [firstKey]: data[firstKey]
+    [firstKey]: data[firstKey],
   });
 }
 function onNodeClick(node: any) {

package/dev/components/WebSocket/WebSocketItem.vue

@@ -34,7 +34,12 @@
       }}</view>
     </view>
 
-    <WebSocketList v-if="showDetail" :ws="ws" @close="onClose" />
+    <WebSocketList
+      v-if="showDetail"
+      :ws="ws"
+      :zIndex="zIndex"
+      @close="onClose"
+    />
   </view>
 </template>
 <script lang="ts" setup>
@@ -45,7 +50,7 @@ import WebSocketList from './WebSocketList.vue';
 import { formatDate } from '../../utils';
 import type { DevTool } from '../../type';
 
-defineProps<{ ws: DevTool.WS }>();
+defineProps<{ ws: DevTool.WS; zIndex?: number }>();
 const showDetail = ref(false);
 
 function onClose() {