vite-uni-dev-tool 0.0.19 → 0.0.21

package/dist/devStore/index.d.ts

@@ -134,13 +134,13 @@ export declare class DevStore {
     clearWsList(): void;
     updateWsList(item: DevTool.WS): DevTool.WS[] | undefined;
     clearWsMessage(url: string): void;
-    clearStorageList(): DevTool.StorageItem[];
+    clearStorageList(local?: boolean): DevTool.StorageItem[];
     setStorageList(items: DevTool.StorageItem[]): DevTool.StorageItem[] | undefined;
-    removeStorage(key: string): DevTool.StorageItem[];
+    removeStorage(key: string, local?: boolean): DevTool.StorageItem[];
     addStorage(data: {
         key: string;
         value: any;
-    }): DevTool.StorageItem[] | undefined;
+    }, local?: boolean): DevTool.StorageItem[] | undefined;
     refreshStore(): DevTool.StorageItem[];
     updateStoreList(addItems: DevTool.StorageItem[]): DevTool.StorageItem[] | undefined;
     setRouteList(pages: DevTool.Page[], currentPath?: string): DevTool.Page[] | undefined;

package/dist/devStore/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../dev/devStore/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../dev/devStore/index.ts"],"names":[],"mappings":"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"}

package/dist/devStore/index.js

@@ -219,25 +219,25 @@ class V {
     const e = ((o = (s = this.state) == null ? void 0 : s.wsList) == null ? void 0 : o.findIndex((a) => a.url === t)) ?? -1;
     e !== -1 && (i = this.state.wsList) != null && i[e] && (this.state.wsList[e].message = []);
   }
-  clearStorageList() {
-    return this.state.storageList = [], uni.clearStorage(), this.state.storageList;
+  clearStorageList(t) {
+    return this.state.storageList = [], t && uni.clearStorage(), this.state.storageList;
   }
   setStorageList(t) {
     if (this.getDevToolVisible())
       return this.state.storageList = t, this.state.storageList;
   }
-  removeStorage(t) {
-    var e;
-    return this.state.storageList = ((e = this.state.storageList) == null ? void 0 : e.filter((s) => s.key !== t)) ?? [], uni.removeStorageSync(t), this.state.storageList;
+  removeStorage(t, e) {
+    var s;
+    return this.state.storageList = ((s = this.state.storageList) == null ? void 0 : s.filter((o) => o.key !== t)) ?? [], e && uni.removeStorageSync(t), this.state.storageList;
   }
-  addStorage(t) {
-    var o;
-    const { key: e, value: s } = t;
-    return (o = this.state.storageList) == null || o.unshift({
-      key: e,
-      _oldKey: e,
-      value: s
-    }), uni.setStorageSync(e, s), this.state.storageList;
+  addStorage(t, e) {
+    var i;
+    const { key: s, value: o } = t;
+    return (i = this.state.storageList) == null || i.unshift({
+      key: s,
+      _oldKey: s,
+      value: o
+    }), e && uni.setStorageSync(s, o), this.state.storageList;
   }
   refreshStore() {
     const { keys: t } = uni.getStorageInfoSync();

package/dist/v2/VirtualListPro/index.vue

@@ -140,14 +140,14 @@ export default {
 
       // 向上滚动时加载前面的数据
       if (
-        this.current > 1 &&
+        this.current > 0 &&
         this.currentHeight > 0 &&
         scrollTop - this.preLodeHeight < this.currentHeight
       ) {
         this.start = this.current * this.pageSize;
         this.current--;
 
-        this.updateVisitableData('up');
+        this.updateVisitableData();
         this.updateCurrentHeight();
       }
     },
@@ -159,7 +159,7 @@ export default {
 
         this.updateCurrentHeight();
         this.$nextTick(() => {
-          this.updateVisitableData('down');
+          this.updateVisitableData();
         });
       }
     },
@@ -183,8 +183,12 @@ export default {
     },
     // 更新总高度（累加已加载项的高度）
     updateCurrentHeight() {
+      const pageSize = this.pageSize;
+      const current = this.current;
+      const currentSub1 = current - 1 < 0 ? 0 : current - 1;
+
       const total = this.itemsHeight
-        .slice(0, (this.current - 1) * this.pageSize)
+        .slice(0, currentSub1 * pageSize)
         .reduce((acc, height) => acc + (height || 0), 0);
       this.currentHeight = total;
     },

package/dist/v3/DevToolWindow/index.vue

@@ -1230,6 +1230,16 @@ function onOpenCode(value?: string) {
   --dev-tool-symbol-color: bisque;
   --dev-tool-active-bg-color: #f0f0f0;
   --dev-tool-time-line-color: #9254de;
+
+  --dev-tool-note-color: #9c9c9c;
+
+  --dev-tool-keyword-color: #9254de;
+  --dev-tool-bracket-color: #ffa940;
+  --dev-tool-quotation-color: #91e76a;
+  --dev-tool-string-color: #91e76a;
+  --dev-tool-function-color: #1d8ce0;
+  --dev-tool-attribute-color: #ef66ba;
+  --dev-tool-operator-color: #50d3eb;
 }
 .dev-tool-window-dark {
   --dev-tool-bg-color: rgba(0, 0, 0, 0.8);
@@ -1243,6 +1253,16 @@ function onOpenCode(value?: string) {
   --dev-tool-active-bg-color: #3d3d3d;
 
   --dev-tool-time-line-color: #f9f9f9;
+
+  --dev-tool-note-color: #9c9c9c;
+
+  --dev-tool-keyword-color: #9254de;
+  --dev-tool-bracket-color: #ffa940;
+  --dev-tool-quotation-color: #91e76a;
+  --dev-tool-string-color: #91e76a;
+  --dev-tool-function-color: #1d8ce0;
+  --dev-tool-attribute-color: #ef66ba;
+  --dev-tool-operator-color: #50d3eb;
 }
 
 .dev-tool-window-bg {

package/dist/v3/NetworkList/NetworkDetail.vue

@@ -16,7 +16,7 @@
     <view class="network-detail-header" v-if="currentSelect === 'header'">
       <DevToolTitle>常规</DevToolTitle>
       <view class="net-detail-item">
-        <view>请求url:</view>
+        <view>请求地址:</view>
         <view>{{ network.url }}</view>
       </view>
       <view class="net-detail-item">
@@ -27,31 +27,65 @@
         <view>状态代码:</view>
         {{ network.status }}
       </view>
+      <view class="net-detail-item">
+        <view>开始时间:</view>
+        {{
+          network.startTime
+            ? formatDate(network.startTime, 'HH:mm:ss:SS')
+            : '--:--:--'
+        }}
+      </view>
+      <view class="net-detail-item">
+        <view>结束时间:</view>
+        {{
+          network.endTime
+            ? formatDate(network.endTime, 'HH:mm:ss:SS')
+            : '--:--:--'
+        }}
+      </view>
+      <view class="net-detail-item">
+        <view>请求耗时:</view>
+        {{ network.time ?? '--' }}
+      </view>
+      <view class="net-detail-item">
+        <view>请求大小:</view>
+        {{ network.size ?? '--' }}
+      </view>
 
       <DevToolTitle>请求头</DevToolTitle>
-      <view
-        class="net-detail-item"
-        v-for="item in network.headers.requestHeader"
-        :key="item.key"
-      >
-        <view>{{ item.key }}:</view>
-        {{ item.value }}
+      <template v-if="network.headers.requestHeader.length > 0">
+        <view
+          class="net-detail-item"
+          v-for="item in network.headers.requestHeader"
+          :key="item.key"
+        >
+          <view>{{ item.key }}:</view>
+          {{ item.value }}
+        </view>
+      </template>
+      <view v-else>
+        <Empty text="暂无请求头" />
       </view>
 
       <DevToolTitle>响应头</DevToolTitle>
-      <view
-        class="net-detail-item"
-        v-for="item in network.headers.responseHeader"
-        :key="item.key"
-      >
-        <view>{{ item.key }}:</view>
-        {{ item.value }}
+      <template v-if="network.headers.responseHeader.length > 0">
+        <view
+          class="net-detail-item"
+          v-for="item in network.headers.responseHeader"
+          :key="item.key"
+        >
+          <view>{{ item.key }}:</view>
+          {{ item.value }}
+        </view>
+      </template>
+      <view v-else>
+        <Empty text="暂无响应头" />
       </view>
     </view>
 
     <template v-if="currentSelect === 'payload'">
       <template v-if="payload?.type === 'object'">
-        <JsonPretty :data="payload.value" />
+        <JsonPretty :data="payload.value" virtual :height="height" />
       </template>
       <view
         v-else-if="payload?.type === 'string'"
@@ -64,7 +98,7 @@
 
     <template v-if="currentSelect === 'response'">
       <template v-if="response?.type === 'object'">
-        <JsonPretty :data="response.value" virtual />
+        <JsonPretty :data="response.value" virtual :height="height" />
       </template>
       <view
         v-else-if="response?.type === 'string'"
@@ -77,13 +111,14 @@
   </view>
 </template>
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import JsonPretty from '../JsonPretty/index.vue';
 import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
 import CircularButton from '../CircularButton/index.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
 import type { DevTool } from '../../type';
+import { formatDate } from '../../utils';
 const props = defineProps<{ network: DevTool.NetworkItem; zIndex?: number }>();
 const emit = defineEmits<{ (e: 'close'): void }>();
 const selectItems = [
@@ -100,6 +135,9 @@ const selectItems = [
     value: 'response',
   },
 ];
+
+const height = ref(0);
+
 const currentSelect = ref('header');
 
 const payload = computed(() => {
@@ -148,6 +186,12 @@ function onSelect(item: { label: string; value: string }) {
 function onClose() {
   emit('close');
 }
+
+onMounted(() => {
+  const { windowHeight } = uni.getWindowInfo();
+
+  height.value = windowHeight - 32 - 32 - 2;
+});
 </script>
 <style scoped>
 .network-detail {
@@ -166,7 +210,7 @@ function onClose() {
 .network-detail .network-detail-control {
   display: flex;
   align-items: center;
-  margin-bottom: 4px;
+  /* margin-bottom: 4px; */
   gap: 12px;
   height: 32px;
   border-bottom: 1px solid transparent;

package/dist/v3/SettingList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="setting-content">
     <view class="setting-item">
-      <DevToolTitle>DevTool(v0.0.19-vue3)</DevToolTitle>
+      <DevToolTitle>DevTool(v0.0.21-vue3)</DevToolTitle>
       <view class="setting-item-content">
         <view class="setting-row">
           <view>显示调试按钮：</view>

package/dist/v3/SourceCode/Line.vue

@@ -0,0 +1,101 @@
+<template>
+  <view
+    :class="['source-code-line', active ? 'source-code-line-active' : '']"
+    :id="id"
+  >
+    <view class="source-code-line-num" v-if="showNum">{{ num }}</view>
+    <view :class="['source-code-line-content', line.class]">
+      <view
+        v-for="item in line.words"
+        :class="['source-code-line-word', item.class]"
+      >
+        {{ item.word }}
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import type { LineInfo } from './parseCode';
+
+const props = withDefaults(
+  defineProps<{
+    line: LineInfo;
+
+    id: string;
+    active?: boolean;
+    num?: number;
+    showNum?: boolean;
+  }>(),
+  {
+    showNum: true,
+  },
+);
+</script>
+<style lang="scss" scoped>
+.source-code-line {
+  display: flex;
+  align-items: center;
+  height: 24px;
+}
+
+.source-code-line-active {
+  color: #fff;
+  background-color: var(--dev-tool-main-color);
+}
+
+.source-code-line-num {
+  flex-shrink: 0;
+  width: 30px;
+  padding: 0 6px;
+  margin-right: 6px;
+  text-align: right;
+  height: 24px;
+  border-right: 1px solid var(--dev-tool-border-color);
+}
+
+.source-code-line-content {
+  display: flex;
+  white-space: nowrap;
+  height: 24px;
+}
+
+.source-code-line-word {
+  white-space: nowrap;
+}
+
+.source-code-pre-note {
+  color: var(--dev-tool-note-color);
+}
+
+.source-code-pre-space {
+  width: 8px;
+}
+
+.source-code-pre-keyword {
+  color: var(--dev-tool-keyword-color);
+}
+
+.source-code-pre-bracket {
+  color: var(--dev-tool-bracket-color);
+}
+
+.source-code-pre-quotation {
+  color: var(--dev-tool-quotation-color);
+}
+
+.source-code-pre-string {
+  color: var(--dev-tool-string-color);
+}
+
+.source-code-pre-function {
+  color: var(--dev-tool-function-color);
+}
+
+.source-code-pre-attribute {
+  color: var(--dev-tool-attribute-color);
+}
+
+.source-code-pre-operator {
+  color: var(--dev-tool-operator-color);
+}
+</style>

package/dist/v3/SourceCode/index.vue

@@ -1,45 +1,51 @@
 <template>
   <view class="dev-tool-code" :style="{ zIndex: zIndex }">
     <view class="dev-tool-code-control">
-      <FilterInput
+      <!-- <FilterInput
         v-model="modelValue"
         style="width: 100%"
         @search="onSearch"
-      />
+      /> -->
+      <view class="dev-tool-code-title">{{ fileName }}</view>
       <CircularButton style="margin-left: auto" text="×" @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"
+
+    <VirtualListPro
+      v-if="codes.length > 0"
+      scrollX
+      :pageSize="pageSize"
+      :height="height"
+      :data="codes"
+      :scrollWithAnimation="true"
     >
-      <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>
+      <template #default="{ list, current, start }">
+        <AutoSize
+          v-for="(code, index) in list"
+          :key="start + index"
+          :index="start + index"
+        >
+          <Line
+            :line="code"
+            :id="`dev-code-${start + index}`"
+            :num="start + index + 1"
+            :active="start + index === activeRowCol.row"
+          />
+        </AutoSize>
+      </template>
+    </VirtualListPro>
+    <Empty v-if="!codes || codes.length === 0" />
   </view>
 </template>
 <script lang="ts" setup>
-import { computed, ref, nextTick, onMounted } from 'vue';
-import FilterInput from '../FilterInput/index.vue';
+import { computed, ref, onMounted } from 'vue';
+// import FilterInput from '../FilterInput/index.vue';
 import CircularButton from '../CircularButton/index.vue';
+import VirtualListPro from '../VirtualListPro/index.vue';
 import Empty from '../Empty/index.vue';
-import { escapeHTML, hightLight, isAndroid, parseStock } from '../../utils';
-
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+import Line from './Line.vue';
+import { isAndroid, parseStock } from '../../utils';
+import { parseCode, type LineInfo } from './parseCode';
 const props = defineProps<{
   url: string;
   sourceFileServers?: string[];
@@ -49,8 +55,8 @@ const props = defineProps<{
 
 const emit = defineEmits<{ (e: 'close'): void }>();
 
-const modelValue = ref('');
-const scrollTop = ref(0);
+// const modelValue = ref('');
+const height = ref(0);
 const fileName = computed(() => {
   const name =
     props?.url?.split('/')?.pop()?.replace(/\)|\(/, '') ?? '文件名称未知';
@@ -58,25 +64,51 @@ const fileName = computed(() => {
 });
 
 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;
-});
+// let backupCodes: string[] = [];
+
+const codes = ref<LineInfo[]>([]);
+// const defaultCurrent = ref(1);
+const pageSize = 50;
 
 function onClose() {
   emit('close');
 }
 
 function onSearch(value: string) {
-  codes.value = backupCodes.map((code) => {
-    return hightLight(code, value);
-  });
+  // codes.value = backupCodes.map((code) => {
+  //   return hightLight(code, value);
+  // });
+}
+
+let timer: number;
+function startCounter({
+  start,
+  target,
+  duration,
+  onExecute,
+  onSuccess,
+}: {
+  start: number;
+  target: number;
+  duration: number;
+  onExecute: (current: number) => void;
+  onSuccess: () => void;
+}) {
+  if (timer) return;
+
+  let s = start;
+  timer = setInterval(() => {
+    if (s >= target) {
+      clearInterval(timer);
+      console.log('停止');
+      onSuccess();
+      return;
+    }
+    s++;
+    onExecute(s);
+  }, duration);
 }
 
 let index = 0;
@@ -100,35 +132,26 @@ function getCode(url: string, i: number = 0) {
     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}`;
-        });
+        codes.value = parseCode(res.data ?? '');
+
+        // res.data?.split('\n') ?? [];
+
+        // 缓慢显示
+        const row = activeRowCol.value.row;
+        // defaultCurrent.value = Math.ceil(activeRowCol.value.row / pageSize);
+        const targetCurrent = Math.ceil(row / pageSize);
+
+        // startCounter({
+        //   start: 1,
+        //   target: targetCurrent,
+        //   duration: 500,
+        //   onExecute(current) {
+        //     scrollIntoView.value = `dev-code-${current * pageSize - 1}`;
+        //   },
+        //   onSuccess() {
+        //     // scrollIntoView.value = `dev-code-${row}`;
+        //   },
+        // });
       }
     },
     fail: (err) => {
@@ -155,6 +178,10 @@ function getSourceCodeDev(url: string) {
 }
 
 onMounted(() => {
+  const { windowHeight } = uni.getWindowInfo();
+
+  height.value = windowHeight - 32 - 32;
+
   let url = props?.url;
 
   const { path, col, row } = parseStock(props?.url ?? '');
@@ -221,25 +248,4 @@ onMounted(() => {
 .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/dist/v3/SourceCode/parseCode.d.ts

@@ -0,0 +1,27 @@
+type Word = {
+    /** 字符 */
+    word: string;
+    /** css 样式 */
+    class: string;
+    /** 分类
+     * - space: 空格
+     * - bracket: 括号
+     * - quotation: 引号
+     * - string: 字符串
+     * - function: 函数
+     * - attribute: 属性
+     * - operator: 操作符
+     * - symbol: 符号
+     * - keyword: 关键字
+     * - other: 其他
+     */
+    type: 'space' | 'bracket' | 'quotation' | 'string' | 'function' | 'attribute' | 'operator' | 'symbol' | 'keyword' | 'other';
+};
+export type LineInfo = {
+    type: 'empty' | 'tag' | 'script' | 'style' | 'note';
+    class: string;
+    words: Word[];
+};
+export declare function parseCode(code: string): LineInfo[];
+export {};
+//# sourceMappingURL=parseCode.d.ts.map