vite-uni-dev-tool 0.0.10 → 0.0.12

package/README.md

@@ -27,6 +27,10 @@ import * as path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  optimizeDeps: {
+    // 预构建排除 vite-uni-dev-tool 模块，防止 eventBus 冲突
+    exclude: ['vite-uni-dev-tool'],
+  },
   plugins: [
     // 一定要在 uni() 之前调用 否则微信小程序将无法正常编译组件
     uniDevTool({
@@ -46,6 +50,28 @@ export default defineConfig({
 });
 ```
 
+### uniDevTool 配置项
+
+| 参数                         | 说明                                                                                           | 类型     | 默认值                 |
+| ---------------------------- | ---------------------------------------------------------------------------------------------- | -------- | ---------------------- |
+| pages                        | 配置pages.json                                                                                 | object   | {}                     |
+| enableInterceptPromiseReject | 是否拦截Promise.reject 最好不要拦截 默认禁用                                                   | boolean  | false                  |
+| consoleMaxSize               | 最大的console条数                                                                              | number   | 1000                   |
+| networkMaxSize               | 最大的网络请求条数                                                                             | number   | 1000                   |
+| uploadMaxSize                | 最大的上传文件条数                                                                             | number   | 1000                   |
+| wsDataMaxSize                | 最大的套接字消息条数                                                                           | number   | 1000                   |
+| captureScreenMaxSize         | 最大的截图记录条数                                                                             | number   | 1000                   |
+| cacheMaxSize                 | 最大占用缓存空间 bytes                                                                         | number   | 8\*1024\*1024\*10      |
+| buttonSize                   | 按钮大小                                                                                       | number   | 50                     |
+| buttonText                   | 按钮文本                                                                                       | string   | 🐜                     |
+| buttonFontSize               | 按钮字体大小                                                                                   | string   | 16px                   |
+| buttonBackgroundColor        | 按钮背景颜色                                                                                   | string   | rgba(255, 255, 255, 0) |
+| initShowDevTool              | 初始化时是否显示调试按钮,默认显示                                                              | boolean  | true                   |
+| zIndex                       | 调试按钮的zIndex,默认1000                                                                      | number   | 1000                   |
+| useDevSource                 | 该属性处于实验当中，谨慎使用,读取开发环境 source file,source map,默认 禁用                     | boolean  | false                  |
+| sourceFileServers            | 该属性处于实验当中，谨慎使用,开发环境 source file 服务器地址，默认 [] ，配合 useDevSource 使用 | string[] | []                     |
+| importConsole                | 是否导入 console 默认不导入， 只会捕获error 和 warn                                            | boolean  | false                  |
+
 ### 为什么不用 subPackages?
 
 - 从当前页跳转到subPackages页面时，会触发 uni-app 页面生命周期，有时是不希望如此的，比如在开发过程中，希望可以直接在当前页面进行调试。
@@ -53,7 +79,6 @@ export default defineConfig({
 ### 如何将 console 日志输出到控制台
 
 - 0.0.5版本之后为了在生产环境中移除插件，开发环境中插件将会自动导入 `console`，无需手动导入
-
 - 0.0.5版本之后不推荐使用 `uni.__dev__console` , 在未来版本中可能会进行移除
 
 ```ts
@@ -67,6 +92,24 @@ console.log('hello vite-uni-dev-tool');
 uni.__dev__console.log('hello vite-uni-dev-tool');
 ```
 
+### 0.0.12 版本在插件中增加了 `importConsole` 属性，默认不导入，只捕获`error`, `warn`, 用户手动调用的`console` 将不再进行捕获，如需捕获传入`true`即可
+
+```ts
+uniDevTool({
+  pages,
+  importConsole: true
+}),
+```
+
+### vite 预加载导致的 `eventBus` 事件冲突 , 预加载排除 `vite-uni-dev-tool` 即可
+
+```ts
+optimizeDeps: {
+  // 预构建排除 vite-uni-dev-tool 模块，防止 eventBus 冲突
+  exclude: ['vite-uni-dev-tool'],
+}
+```
+
 ### 注意事项
 
 ### 兼容性说明
@@ -151,6 +194,27 @@ uni.__dev__console.log('hello vite-uni-dev-tool');
 
 ## 更新日志
 
+### 0.0.12
+
+- 修复 network url显示长度
+- 修复部分样式
+- 修复列表高度异常
+- 修复销毁之后操作
+- 刷新之后隐藏调试弹窗
+- 列表返回到顶部
+- 增加层级属性，默认层级1000
+- 构建导致的 eventBus 冲突
+
+### 0.0.11
+
+- 新增 console run 简易提示
+- 新增 appInfo
+- 新增 captureScreen(h5端不支持)
+- 新增滑动切换
+- 修复 console 滚动到指定位置
+- 修复调用栈起始行
+- 修复 json pretty 折叠icon
+
 ### 0.0.10
 
 - 修复 console 过滤异常

package/dev/components/AppInfo/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <view class="app-info-content">
+    <JsonPretty v-if="showJson" :data="appInfo" />
+    <Empty v-else />
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import JsonPretty from '../JsonPretty/index.vue';
+
+import Empty from '../Empty/index.vue';
+const props = defineProps<{
+  appInfo: Record<string, any>;
+}>();
+
+const showJson = computed(() => {
+  try {
+    const str = JSON.stringify(props.appInfo);
+    if (typeof props.appInfo === 'object' && (str === '' || str === '{}')) {
+      return false;
+    }
+    return true;
+  } catch (error) {
+    return false;
+  }
+});
+</script>
+<style scoped>
+.app-info-content {
+  padding: 16px;
+  font-size: var(--dev-tool-base-font-size);
+
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+</style>

package/dev/components/CaptureScreen/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <view class="capture-screen-content">
+    <view class="capture-screen-control">
+      <Tag style="margin-left: auto" mode="clear" @click="emit('clear')">
+        清空
+      </Tag>
+    </view>
+
+    <view class="capture-screen-list">
+      <view class="capture-screen-item" v-for="item in captureScreenList">
+        <view class="info-row">时间：{{ item.timer }} </view>
+        <view class="info-row">页面：{{ item.position }}</view>
+      </view>
+
+      <Empty v-if="!captureScreenList || captureScreenList.length === 0" />
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import type { DevTool } from '../../type';
+import Empty from '../Empty/index.vue';
+import Tag from '../Tag/index.vue';
+
+defineProps<{
+  captureScreenList: DevTool.CaptureScreenItem[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'clear'): void;
+}>();
+</script>
+<style scoped>
+.capture-screen-content {
+  height: 100%;
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.capture-screen-list {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+
+.capture-screen-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;
+}
+
+.capture-screen-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+}
+.info-row {
+  height: 28px;
+  line-height: 28px;
+}
+</style>

package/dev/components/Code/index.vue

@@ -23,7 +23,9 @@
         :key="index"
         :class="`dev-tool-code-item ${index === activeRowCol.activeRow ? 'dev-tool-code-item-active' : ''}`"
       >
-        <view class="dev-tool-code-item-index"> {{ index + 1 }}</view>
+        <view class="dev-tool-code-item-index">
+          {{ start + index + 1 }}
+        </view>
 
         <view class="dev-tool-code-item-content" v-html="code"></view>
       </view>
@@ -62,6 +64,10 @@ 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');
 }
@@ -172,9 +178,6 @@ onMounted(() => {
   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/ConsoleList/ConsoleItem.vue

@@ -5,7 +5,7 @@
         <template v-for="(item, index) in consoleItem.args">
           <view
             v-if="item.type !== 'array' && item.type !== 'object'"
-            class="console-arg"
+            :class="`console-arg console-arg-${item.type}`"
             :key="index"
             v-html="item.value"
           >
@@ -46,11 +46,12 @@
       </view>
     </view>
     <!-- <view class="console-copy">C</view> -->
-    <Code
+    <SourceCode
       v-if="openCode && consoleItem.stack"
       :url="consoleItem.stack"
       :sourceFileServers="sourceFileServers"
       :mode="mode"
+      :zIndex="zIndex"
       @close="onCloseCode"
     />
   </view>
@@ -59,7 +60,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import Tag from '../Tag/index.vue';
-import Code from '../Code/index.vue';
+import SourceCode from '../SourceCode/index.vue';
 import type { DevTool } from '../../type';
 import { isAndroid, isMockWX } from '../../utils';
 import JsonPretty from '../JsonPretty/index.vue';
@@ -68,6 +69,7 @@ const props = defineProps<{
   sourceFileServers?: string[];
   mode?: string;
   useDevSource?: boolean;
+  zIndex?: number;
   id: string;
 }>();
 
@@ -183,4 +185,23 @@ function onCloseCode() {
 .console-item-log {
   color: #f9f9f9;
 }
+
+.console-arg-null {
+  color: #020201;
+}
+.console-arg-undefined {
+  color: #020201;
+}
+.console-arg-string {
+  color: #888888;
+}
+.console-arg-number {
+  color: #1d8ce0;
+}
+.console-arg-boolean {
+  color: #1d8ce0;
+}
+.console-arg-symbol {
+  color: bisque;
+}
 </style>

package/dev/components/ConsoleList/RunJSInput.vue

@@ -6,11 +6,28 @@
       class="run-js-input"
       placeholder="run..."
       @confirm="onConfirm"
+      @input="onChange"
     />
+    <view class="run-js-tips">
+      <view
+        class="run-js-tips-item"
+        v-for="(item, index) in tips"
+        @click="onChoose(item.name)"
+      >
+        {{ item.name }}{{ item.description ? ': ' : ' ' }}{{ item.description }}
+      </view>
+    </view>
   </view>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
+import {
+  staticTips,
+  singleTips,
+  flatStaticTips,
+  baseSymbols,
+  type Tip,
+} from './staticTips';
 
 const emit = defineEmits<{
   (e: 'run', value: string): void;
@@ -18,7 +35,10 @@ const emit = defineEmits<{
 
 const code = ref('');
 
+const tips = ref<Tip[]>([]);
+
 function onConfirm() {
+  tips.value = [];
   const value = code.value;
   if (!value) return;
   code.value = '';
@@ -26,16 +46,146 @@ function onConfirm() {
     emit('run', value);
   }, 100);
 }
+
+/**
+ * 1.对象，方法，变量 在 ; ( , =,==,=== , + , - , * , / , && , || ??  之后 开始提示
+ *
+ * Math
+ * console
+ *
+ * 2.在 . 之后 提示
+ *
+ * Math.a
+ * console.a
+ *
+ *
+ * 3.对方法，属性返回值进行提示
+ *
+ * Math.abc().
+ *
+ *
+ * any, void 不进行提示
+ *
+ * 4. [] 数组提示
+ *
+ * [1,2].concat([2,3].map(parseInt))
+ *
+ * 5. (值) 推断提示
+ * ({}).valueOf()
+ *
+ *
+ * @param e 输入框内容
+ */
+function onChange(e: any) {
+  const { value, cursor } = e.detail as { value: string; cursor: number };
+  // 光标之前的内容
+  const content = value.slice(0, cursor);
+
+  // 获取符号之后的内容
+  const lastIndex = getBaseSymbolLastIndex(content);
+
+  const con = lastIndex > -1 ? value.substring(lastIndex + 1) : value;
+
+  if (!con) {
+    // 不存在内容
+    tips.value = [];
+  } else {
+    // 存在内容
+
+    // 一级点之后的内容
+    const [main, sub] = con.split('.');
+
+    if (singleTips.includes(main) && con.includes('.')) {
+      const list = [
+        ...(staticTips[main]?.attr ?? []),
+        ...(staticTips[main]?.fun ?? []),
+      ];
+
+      if (sub) {
+        tips.value = list.filter((item) => item.name.startsWith(sub));
+      } else {
+        tips.value = list;
+      }
+    } else {
+      if (main.includes(')') && con.includes('.')) {
+        // 方法调用之后的提示
+
+        // 获取方法名称 倒数第二个 . 到最后一个 ( 之间为方法名称
+        const s = getSecondLastDotPosition(content);
+        const e = content.lastIndexOf('(');
+        const methodName = content.substring(s + 1, e);
+
+        const fn = findFunction(methodName);
+        // 获取方法返回值
+        const result = fn?.[0]?.result?.[0];
+        if (result && result !== 'any' && result !== 'void') {
+          tips.value = Object.values(staticTips?.[result] ?? {}).flat(2);
+        } else {
+          tips.value = [];
+        }
+      } else {
+        // 基础提示
+        tips.value = singleTips
+          .filter((item) => item.startsWith(con))
+          .map((item) => ({
+            name: item,
+            description: '',
+            result: ['any'],
+          }));
+      }
+    }
+  }
+}
+function onChoose(name: string) {
+  // TODO 选择提示
+  // const lastIndex = code.value.lastIndexOf(';');
+  // const con =
+  //   lastIndex > -1 ? code.value?.substring(lastIndex + 1) : code.value;
+  // const lastCon = con.lastIndexOf('.');
+  // if (lastCon > -1) {
+  //   code.value = con.substring(0, lastCon + 1) + name;
+  // } else {
+  //   code.value = name;
+  // }
+  // tips.value = [];
+}
+
+function getBaseSymbolLastIndex(code: string) {
+  for (let i = code.length - 1; i >= 0; i--) {
+    if (baseSymbols.includes(code[i])) {
+      return i; // 找到最后一个符号的位置
+    }
+  }
+  return -1; // 未找到任何符号
+}
+
+function getSecondLastDotPosition(str: string) {
+  let dotCount = 0;
+  for (let i = str.length - 1; i >= 0; i--) {
+    if (str[i] === '.') {
+      dotCount++;
+      if (dotCount === 2) {
+        return i;
+      }
+    }
+  }
+  return -1; // 未找到足够的点号
+}
+
+function findFunction(fn: string) {
+  return flatStaticTips.filter((item) => item.name.startsWith(fn));
+}
 </script>
 <style scoped>
 .run-js-input-wrapper {
   position: relative;
   display: flex;
+  align-items: center;
   padding: 0 16px;
-  min-height: 28px;
+  height: 32px;
   border-top: 1px solid var(--dev-tool-border-color);
   border-bottom: 1px solid var(--dev-tool-border-color);
-  overflow: hidden;
+  box-sizing: border-box;
 }
 
 .run-js-input-icon {
@@ -56,4 +206,32 @@ function onConfirm() {
   border: 1px solid transparent;
   font-size: var(--dev-tool-base-font-size);
 }
+
+.run-js-tips {
+  position: absolute;
+  bottom: 31px;
+  left: 0;
+  background-color: #fff;
+  width: 100%;
+  max-height: 200px;
+  padding: 0 16px 0 36px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+}
+.run-js-tips-item {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  width: 100%;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.run-js-tips-item-active {
+  border: 1px solid var(--dev-tool-main-color);
+}
 </style>

package/dev/components/ConsoleList/index.vue

@@ -17,7 +17,14 @@
       </Tag>
     </view>
 
-    <VirtualListPro :data="consoleList" :pageSize="10" className="console-list">
+    <VirtualListPro
+      :data="consoleList"
+      :pageSize="15"
+      :scrollIntoView="scrollIntoView"
+      :scrollWithAnimation="true"
+      :height="height"
+      className="console-list"
+    >
       <template v-slot="{ list, start }">
         <AutoSize
           v-for="(item, index) in list"
@@ -30,6 +37,7 @@
             :mode="mode"
             :useDevSource="useDevSource"
             :id="`dev-console-${index}`"
+            :zIndex="zIndex"
           />
         </AutoSize>
         <Empty v-if="!consoleList || consoleList.length === 0" />
@@ -45,7 +53,7 @@ import Empty from '../Empty/index.vue';
 import FilterInput from '../FilterInput/index.vue';
 import RunJSInput from './RunJSInput.vue';
 import type { DevTool } from '../../type';
-import { ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { debounce } from '../../utils';
 import VirtualListPro from '../VirtualListPro/index.vue';
 import AutoSize from '../VirtualListPro/AutoSize.vue';
@@ -58,6 +66,7 @@ const props = defineProps<{
   sourceFileServers?: string[];
   mode?: string;
   useDevSource?: boolean;
+  zIndex?: number;
 }>();
 const emit = defineEmits<{
   (e: 'choose', type: ConsoleType): void;
@@ -102,6 +111,12 @@ const debounceWatch = debounce(() => {
 }, 200);
 
 watch(() => props.consoleList, debounceWatch);
+
+const height = ref(0);
+onMounted(() => {
+  const { windowHeight } = uni.getWindowInfo();
+  height.value = windowHeight - 32 - 32 - 32;
+});
 </script>
 <style scoped>
 .console-content {