vite-uni-dev-tool 0.0.10 → 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/Tabs/index.vue

@@ -5,15 +5,18 @@
       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.key === modelValue ? 'tabs-item-active' : ''
+          item.index === modelValue ? 'tabs-item-active' : ''
         } `"
+        :id="`tabs-item-${item.index}`"
         @click="onChangeTabs(item)"
       >
         {{ item.label }}
@@ -27,12 +30,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import CloseButton from '../CloseButton/index.vue';
 // const activeKey = ref("Console");
-defineProps<{
-  modelValue: string;
-  items: { label: string; key: string; value: any }[];
+const props = defineProps<{
+  modelValue: number;
+  items: { label: string; key: string; value: any; index: number }[];
   scrollLeft?: number;
 }>();
 
@@ -40,14 +43,24 @@ const tabsRef = ref();
 
 const emit = defineEmits<{
   (e: 'close'): void;
-  (e: 'update:modelValue', value: string): void;
-  (e: 'change', value: string): void;
+  (e: 'update:modelValue', value: number): void;
+  (e: 'change', value: number): void;
   (e: 'scroll', value: any): void;
 }>();
-function onChangeTabs(item: { label: string; key: string; value: any }) {
+
+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.key);
-  emit('change', item.key);
+  emit('update:modelValue', item.index);
+  emit('change', item.index);
 }
 function onClose() {
   emit('close');

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 {