vite-uni-dev-tool 0.0.7 → 0.0.8

package/dev/components/JsonPretty/components/CheckController/index.vue

@@ -3,18 +3,34 @@
     :class="`json-pretty-check-controller ${model ? 'is-checked' : ''}`"
     @click="onClick"
   >
-    <view :class="`json-pretty-check-controller-inner is-${uiType}`" />
+    <!-- <view
+      :class="`json-pretty-check-controller-inner is-${uiType}`"
+      @click="onChange"
+    >
+    </view>
     <input
       :checked="model"
       :class="`json-pretty-check-controller-original is-${uiType}`"
       :type="uiType"
       @change="onChange"
+    /> -->
+
+    <checkbox
+      v-if="uiType === 'checkbox'"
+      :checked="model"
+      style="transform: scale(0.6)"
+      @change="onChange"
+    />
+    <radio
+      v-if="uiType === 'radio'"
+      :checked="model"
+      style="transform: scale(0.6)"
+      @change="onChange"
     />
   </view>
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue';
-// import "./style.less";
 const props = defineProps<{ checked: boolean; isMultiple: boolean }>();
 const emit = defineEmits<{
   (e: 'change', value: boolean): void;
@@ -24,11 +40,11 @@ const emit = defineEmits<{
 const uiType = computed(() => (props.isMultiple ? 'checkbox' : 'radio'));
 const model = computed({
   get: (): boolean => props.checked,
-  set: (val) => emit('update:modelValue', val)
+  set: (val) => emit('update:modelValue', val),
 });
 
 function onChange() {
-  emit('change', model.value);
+  emit('change', !model.value);
 }
 
 function onClick(e: MouseEvent) {
@@ -65,7 +81,8 @@ function onClick(e: MouseEvent) {
   background-color: #fff;
   z-index: 1;
   cursor: pointer;
-  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+  transition:
+    border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
     background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
 }
 .json-pretty-check-controller .json-pretty-check-controller-inner:after {

package/dev/components/JsonPretty/components/TreeNode/index.vue

@@ -12,9 +12,9 @@
     @mouseover="handleNodeMouseover"
     :style="style"
   >
-    <view v-if="showLineNumber" class="json-pretty-node-index">{{
-      node.id + 1
-    }}</view>
+    <view v-if="showLineNumber" class="json-pretty-node-index">
+      {{ node.id + 1 }}
+    </view>
 
     <CheckController
       v-if="
@@ -46,9 +46,9 @@
       <slot name="render-node-key" :node="props.node" :default-key="prettyKey">
         {{ prettyKey }}
       </slot>
-      <view class="json-pretty-colon">{{
-        `:${showKeyValueSpace ? ' ' : ''}`
-      }}</view>
+      <view class="json-pretty-colon">
+        {{ `:${showKeyValueSpace ? ' ' : ''}` }}
+      </view>
     </view>
 
     <view class="json-pretty-value-wrapper">
@@ -74,20 +74,19 @@
           >
             {{ defaultValue }}
           </slot>
+          <text v-if="node.showComma">,</text>
         </view>
       </view>
 
-      <view v-if="node.showComma">,</view>
-
       <view v-if="showLength && collapsed" class="json-pretty-comment">
         // {{ node.length }} items
       </view>
     </view>
     <view class="json-pretty-tree-node-actions" v-if="showNodeActions">
       <slot name="render-node-actions" :copy="handleCopy">
-        <view @click="handleCopy" class="json-pretty-tree-node-actions-item"
-          >copy</view
-        >
+        <view @click="handleCopy" class="json-pretty-tree-node-actions-item">
+          copy
+        </view>
       </slot>
     </view>
   </view>
@@ -165,7 +164,7 @@ const defaultValue = computed(() => {
   } else if (value === undefined) {
     value = 'undefined';
   }
-  return dataType.value === 'string' ? `"${value}"` : value + '';
+  return dataType.value === 'string' ? `"${value}"` : value?.toString();
 });
 
 const handleBracketsClick = () => {
@@ -231,7 +230,7 @@ const handleCopy = () => {
 <style scoped>
 .json-pretty-tree-node {
   display: flex;
-  align-items: center;
+  /* align-items: center; */
   position: relative;
   line-height: 20px;
 }
@@ -314,8 +313,10 @@ const handleCopy = () => {
   align-items: center;
 }
 .json-pretty-value {
-  /* word-break: break-word; */
-  white-space: nowrap;
+  word-break: break-all;
+  white-space: normal;
+  /* white-space: pre-line; */
+  /* white-space: nowrap; */
 }
 .json-pretty-value-null {
   color: var(--json-pretty-color-null);

package/dev/components/JsonPretty/index.vue

@@ -16,62 +16,51 @@
         : style
     "
   >
-    <scroll-view
-      v-if="virtual"
-      class="json-pretty-tree-list"
-      scroll-y
-      scroll-x
-      :style="{ height: `${height}px` }"
-      @scroll="handleTreeScroll"
-      ref="treeRef"
+    <VirtualList
+      v-if="autoVirtual"
+      :height="state.height"
+      :itemHeight="itemHeight"
+      :data="flatData"
     >
-      <view
-        class="json-pretty-tree-list-holder"
-        :style="{ height: `${flatData.length * itemHeight}px` }"
-      >
-        <view
-          class="json-pretty-tree-list-holder-inner"
-          :style="{ transform: `translateY(${state.translateY}px)` }"
-        >
-          <TreeNode
-            v-for="item in state?.visibleData"
-            :key="item.id"
-            :data="data"
-            :rootPath="rootPath"
-            :indent="indent"
-            :node="item"
-            :collapsed="!!state.hiddenPaths[item.path]"
-            :theme="theme"
-            :showDoubleQuotes="showDoubleQuotes"
-            :showLength="showLength"
-            :checked="selectedPaths.includes(item.path)"
-            :selectableType="selectableType"
-            :showLine="showLine"
-            :showLineNumber="showLineNumber"
-            :showSelectController="showSelectController"
-            :selectOnClickNode="selectOnClickNode"
-            :nodeSelectable="nodeSelectable"
-            :highlightSelectedNode="highlightSelectedNode"
-            :editable="editable"
-            :editableTrigger="editableTrigger"
-            :showIcon="showIcon"
-            :showKeyValueSpace="showKeyValueSpace"
-            :showNodeActions="showNodeActions"
-            @nodeClick="handleNodeClick"
-            @nodeMouseover="handleNodeMouseover"
-            @bracketsClick="handleBracketsClick"
-            @iconClick="handleIconClick"
-            @selectedChange="handleSelectedChange"
-            @valueChange="handleValueChange"
-            :style="
-              itemHeight && itemHeight !== 20
-                ? { lineHeight: `${itemHeight}px` }
-                : {}
-            "
-          />
-        </view>
-      </view>
-    </scroll-view>
+      <template v-slot="{ list }">
+        <TreeNode
+          v-for="item in list"
+          :key="item.id"
+          :data="data"
+          :rootPath="rootPath"
+          :indent="indent"
+          :node="item"
+          :collapsed="!!state.hiddenPaths[item.path]"
+          :theme="theme"
+          :showDoubleQuotes="showDoubleQuotes"
+          :showLength="showLength"
+          :checked="selectedPaths.includes(item.path)"
+          :selectableType="selectableType"
+          :showLine="showLine"
+          :showLineNumber="showLineNumber"
+          :showSelectController="showSelectController"
+          :selectOnClickNode="selectOnClickNode"
+          :nodeSelectable="nodeSelectable"
+          :highlightSelectedNode="highlightSelectedNode"
+          :editable="editable"
+          :editableTrigger="editableTrigger"
+          :showIcon="showIcon"
+          :showKeyValueSpace="showKeyValueSpace"
+          :showNodeActions="showNodeActions"
+          @nodeClick="handleNodeClick"
+          @nodeMouseover="handleNodeMouseover"
+          @bracketsClick="handleBracketsClick"
+          @iconClick="handleIconClick"
+          @selectedChange="handleSelectedChange"
+          @valueChange="handleValueChange"
+          :style="
+            itemHeight && itemHeight !== 20
+              ? { lineHeight: `${itemHeight}px` }
+              : {}
+          "
+        />
+      </template>
+    </VirtualList>
     <template v-else>
       <TreeNode
         v-for="item in state?.visibleData"
@@ -115,7 +104,6 @@
 
 <script setup lang="ts">
 import {
-  ref,
   reactive,
   computed,
   watchEffect,
@@ -127,6 +115,8 @@ import {
 } from 'vue';
 import TreeNode from './components/TreeNode/index.vue';
 
+import VirtualList from '../VirtualList/index.vue';
+
 import { emitError, jsonFlatten, cloneDeep, isFunction } from './utils';
 
 import type { NodeDataType, ScrollEvent, Tree } from './type';
@@ -170,9 +160,6 @@ const props = withDefaults(defineProps<Tree>(), {
 });
 const emits = defineEmits<Emits>();
 
-// 初始化数据
-const treeRef = ref<HTMLElement | null>(null);
-
 const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath));
 
 // 初始化折叠路径
@@ -203,12 +190,14 @@ interface State {
   translateY: number;
   visibleData: NodeDataType[] | null;
   hiddenPaths: Record<string, 1>;
+  height: number;
 }
 
 const state = reactive<State>({
   translateY: 0,
   visibleData: [],
   hiddenPaths: initHiddenPaths(props.deep, props.collapsedNodeLength),
+  height: props.height ?? 400,
 });
 
 // 计算属性
@@ -263,12 +252,22 @@ const propsErrorMessage = computed(() => {
     : '';
 });
 
+const autoVirtual = computed(() => {
+  if (props.virtual) return true;
+  if (typeof props.autoVirtualRow === 'number') {
+    if (flatData.value.length > props.autoVirtualRow) {
+      return true;
+    }
+  }
+  return false;
+});
+
 // 更新可见数据
+// 优化 虚拟列表，每项高度自适应
 const updateVisibleData = (scrollTop: number = 0) => {
   const flatDataValue = flatData.value ?? [];
-  if (props.virtual) {
+  if (autoVirtual.value) {
     const visibleCount = props.height / props.itemHeight;
-    // const scrollTop = treeRef.value?.scrollTop || 0;
     const scrollCount = Math.floor(scrollTop / props.itemHeight);
     let start =
       scrollCount < 0
@@ -336,6 +335,10 @@ const updateCollapsedPaths = (collapsed: boolean, path: string) => {
     delete newPaths[path];
     state.hiddenPaths = newPaths;
   }
+
+  if (path === props.rootPath) {
+    state.height = collapsed ? props.itemHeight : props.height;
+  }
 };
 
 const handleBracketsClick = (collapsed: boolean, node: NodeDataType) => {
@@ -386,6 +389,19 @@ watch(
   },
 );
 
+// 监听是否折叠，默认不折叠
+watch(
+  () => props.collapsed,
+  (val) => {
+    if (val) {
+      updateCollapsedPaths(true, props.rootPath);
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
 // 生命周期钩子
 onMounted(() => {
   updateVisibleData();
@@ -443,20 +459,6 @@ onUnmounted(() => {
   white-space: nowrap;
 }
 
-.json-pretty-tree-list {
-  overflow: auto;
-  position: relative;
-}
-
-.json-pretty-tree-list-holder {
-  position: relative;
-}
-
-.json-pretty-tree-list-holder-inner {
-  position: absolute;
-  width: 100%;
-}
-
 .dark {
   /* 深色主题样式 */
 }

package/dev/components/JsonPretty/type.ts

@@ -104,6 +104,8 @@ export type Tree = Partial<TreeNodeProps> &
       collapsedOnClickBrackets: boolean;
       style: CSSProperties;
       pathCollapsible: (node: NodeDataType) => boolean;
+      /** 超过行数将会自动启用虚拟列表 */
+      autoVirtualRow: number;
     } & TreeRequired
   >;
 

package/dev/components/NetworkList/NetworkDetail.vue

@@ -151,7 +151,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/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

@@ -44,7 +44,7 @@
         </view>
         <view class="setting-tips">
           当前所有信息占用的存储空间,只会清除 Console, Network, Upload,
-          Websocket
+          Websocket, UniEvent
         </view>
         <DButton class="setting-button" @click="onClearCache">
           清除缓存

package/dev/components/UniEvent/UniEventItem.vue

@@ -17,16 +17,85 @@
       <view class="uni-event-item-right"> {{ eventItem.timer }}</view>
     </view>
 
-    <view class="uni-event-item-right link">
-      {{ eventItem.stock }}
+    <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'
+  );
+});
 
-defineProps<{ eventItem: DevTool.EventItem }>();
+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>

package/dev/components/UniEvent/index.vue

@@ -35,7 +35,13 @@
       </Tag>
     </DevToolTitle>
     <view class="uni-event-list">
-      <UniEventItem v-for="item in eventList" :eventItem="item" />
+      <UniEventItem
+        v-for="item in eventList"
+        :eventItem="item"
+        :mode="mode"
+        :useDevSource="useDevSource"
+        :sourceFileServers="sourceFileServers"
+      />
     </view>
   </view>
 </template>
@@ -48,6 +54,9 @@ import type { DevTool } from '@/dev/type';
 defineProps<{
   eventList?: DevTool.EventItem[];
   eventCount?: DevTool.EventCount;
+  useDevSource?: boolean;
+  mode?: string;
+  sourceFileServers?: string[];
 }>();
 
 const emit = defineEmits<{

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;