vite-uni-dev-tool 0.0.12 → 0.0.14

package/dist/v2/ConsoleList/ConsoleItem.vue

@@ -0,0 +1,235 @@
+<template>
+  <view :id="id" :class="`console-item console-item-${consoleItem.type}`">
+    <view class="console-info">
+      <view class="console-args">
+        <template v-for="(item, index) in consoleItem.args">
+          <view
+            v-if="item.type !== 'array' && item.type !== 'object'"
+            :class="`console-arg console-arg-${item.type}`"
+            :key="index"
+            v-html="item.value"
+          >
+          </view>
+          <JsonPretty
+            v-else
+            :data="item.value"
+            collapsed
+            showLength
+            :autoVirtualRow="100"
+          />
+        </template>
+      </view>
+      <view class="console-position">
+        <view class="console-tags">
+          <Tag
+            v-if="consoleItem.mode"
+            mode="log"
+            style="margin-right: 6px; justify-content: center"
+          >
+            {{ consoleItem.mode }}
+          </Tag>
+          <Tag :mode="consoleItem.type">
+            {{ consoleItem.type }}
+          </Tag>
+        </view>
+
+        <view>
+          <view class="console-time">{{ consoleItem.time }}</view>
+          <view class="console-other" v-html="consoleItem.position"></view>
+          <view
+            :class="`console-other ${isUseDevSource ? 'console-stack' : ''}`"
+            v-if="consoleItem.stack"
+            v-html="consoleItem.stack"
+            @click="onStackClick"
+          ></view>
+        </view>
+      </view>
+    </view>
+    <SourceCode
+      v-if="openCode && consoleItem.stack"
+      :url="consoleItem.stack"
+      :sourceFileServers="sourceFileServers"
+      :mode="mode"
+      :zIndex="zIndex"
+      @close="onCloseCode"
+    />
+  </view>
+</template>
+
+<script>
+import Tag from '../Tag/index.vue';
+import SourceCode from '../SourceCode/index.vue';
+import JsonPretty from '../JsonPretty/index.vue';
+import { isAndroid, isMockWX } from '../../utils';
+
+export default {
+  components: {
+    Tag,
+    SourceCode,
+    JsonPretty,
+  },
+  props: {
+    consoleItem: {
+      type: Object,
+      required: true,
+    },
+    sourceFileServers: {
+      type: Array,
+      default: () => [],
+    },
+    mode: {
+      type: String,
+      default: '',
+    },
+    useDevSource: {
+      type: Boolean,
+      default: false,
+    },
+    zIndex: {
+      type: Number,
+      default: 0,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      openCode: false,
+    };
+  },
+  computed: {
+    isUseDevSource() {
+      return (
+        !isMockWX(this.consoleItem?.stack ?? '') &&
+        this.mode === 'development' &&
+        this.useDevSource
+      );
+    },
+    isWXLink() {
+      return (
+        isMockWX(this.consoleItem?.stack ?? '') || this.mode !== 'development'
+      );
+    },
+  },
+  methods: {
+    onStackClick() {
+      if (this.isWXLink) {
+        uni.showToast({
+          icon: 'none',
+          title: '[DevTool] 请在小程序真机调试模式下查看源码',
+        });
+        return;
+      }
+
+      if (!this.isUseDevSource) {
+        return;
+      }
+
+      if (isAndroid()) {
+        if (this.sourceFileServers && this.sourceFileServers.length > 0) {
+          this.openCode = true;
+        } else {
+          uni.showToast({
+            icon: 'none',
+            title: '[DevTool] sourceFileServers 配置异常',
+          });
+          uni?.__dev__console?.log('[DevTool] sourceFileServers 配置异常');
+        }
+      } else {
+        this.openCode = true;
+      }
+    },
+    onCloseCode() {
+      this.openCode = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.console-item {
+  display: flex;
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  font-size: var(--dev-tool-base-font-size);
+}
+.console-info {
+  flex: 1;
+}
+.console-args {
+  display: flex;
+  flex-wrap: wrap;
+  /* color: #000; */
+  /* color: var(--dev-tool-text-color); */
+}
+.console-arg {
+  margin-right: 4px;
+  white-space: pre-line;
+  word-break: break-all;
+}
+.console-position {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-top: 4px;
+  /* color: #616161; */
+  text-align: right;
+}
+
+.console-tags {
+  display: flex;
+  align-items: center;
+}
+.console-time {
+  margin-right: auto;
+  word-break: break-all;
+}
+.console-other {
+  word-break: break-all;
+}
+
+.console-stack {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.console-copy {
+  flex-shrink: 0;
+  margin-left: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: #fff;
+  border-radius: 50%;
+  background-color: var(--dev-tool-success-color);
+}
+.console-item-info {
+  color: var(--dev-tool-log-color);
+}
+.console-item-log {
+  color: #f9f9f9;
+}
+
+.console-arg-null {
+  color: var(--dev-tool-nil-color);
+}
+.console-arg-undefined {
+  color: var(--dev-tool-nil-color);
+}
+.console-arg-string {
+  color: var(--dev-tool-string-color);
+}
+.console-arg-number {
+  color: var(--dev-tool-number-color);
+}
+.console-arg-boolean {
+  color: var(--dev-tool-boolean-color);
+}
+.console-arg-symbol {
+  color: var(--dev-tool-symbol-color);
+}
+</style>

package/dist/v2/ConsoleList/RunJSInput.vue

@@ -0,0 +1,243 @@
+<template>
+  <view class="run-js-input-wrapper">
+    <view class="run-js-input-icon"></view>
+    <input
+      v-model="code"
+      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"
+        :key="index"
+        @click="onChoose(item.name)"
+      >
+        {{ item.name }}{{ item.description ? ': ' : ' ' }}{{ item.description }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  staticTips,
+  singleTips,
+  flatStaticTips,
+  baseSymbols,
+} from './staticTips.js';
+
+export default {
+  data() {
+    return {
+      code: '',
+      tips: [],
+    };
+  },
+  methods: {
+    onConfirm() {
+      this.tips = [];
+      const value = this.code;
+      if (!value) return;
+      this.code = '';
+      setTimeout(() => {
+        this.$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 输入框内容
+     */
+    onChange(e) {
+      const { value, cursor } = e.detail;
+      // 光标之前的内容
+      const content = value.slice(0, cursor);
+
+      // 获取符号之后的内容
+      const lastIndex = this.getBaseSymbolLastIndex(content);
+
+      const con = lastIndex > -1 ? value.substring(lastIndex + 1) : value;
+
+      if (!con) {
+        // 不存在内容
+        this.tips = [];
+      } else {
+        // 存在内容
+
+        // 一级点之后的内容
+        const [main, sub] = con.split('.');
+
+        if (singleTips.includes(main) && con.includes('.')) {
+          const list = [
+            ...(staticTips[main]?.attr ?? []),
+            ...(staticTips[main]?.fun ?? []),
+          ];
+
+          if (sub) {
+            this.tips = list.filter((item) => item.name.startsWith(sub));
+          } else {
+            this.tips = list;
+          }
+        } else {
+          if (main.includes(')') && con.includes('.')) {
+            // 方法调用之后的提示
+
+            // 获取方法名称 倒数第二个 . 到最后一个 ( 之间为方法名称
+            const s = this.getSecondLastDotPosition(content);
+            const e = content.lastIndexOf('(');
+            const methodName = content.substring(s + 1, e);
+
+            const fn = this.findFunction(methodName);
+            // 获取方法返回值
+            const result = fn?.[0]?.result?.[0];
+            if (result && result !== 'any' && result !== 'void') {
+              this.tips = Object.values(staticTips?.[result] ?? {}).flat(2);
+            } else {
+              this.tips = [];
+            }
+          } else {
+            // 基础提示
+            this.tips = singleTips
+              .filter((item) => item.startsWith(con))
+              .map((item) => ({
+                name: item,
+                description: '',
+                result: ['any'],
+              }));
+          }
+        }
+      }
+    },
+
+    onChoose(name) {
+      // 选择提示项的逻辑
+      // 原逻辑注释保留，可根据实际需求完善
+      // const lastIndex = this.code.lastIndexOf(';');
+      // const con = lastIndex > -1 ? this.code.substring(lastIndex + 1) : this.code;
+      // const lastCon = con.lastIndexOf('.');
+      // if (lastCon > -1) {
+      //   this.code = con.substring(0, lastCon + 1) + name;
+      // } else {
+      //   this.code = name;
+      // }
+      // this.tips = [];
+    },
+
+    getBaseSymbolLastIndex(code) {
+      for (let i = code.length - 1; i >= 0; i--) {
+        if (baseSymbols.includes(code[i])) {
+          return i; // 找到最后一个符号的位置
+        }
+      }
+      return -1; // 未找到任何符号
+    },
+
+    getSecondLastDotPosition(str) {
+      let dotCount = 0;
+      for (let i = str.length - 1; i >= 0; i--) {
+        if (str[i] === '.') {
+          dotCount++;
+          if (dotCount === 2) {
+            return i;
+          }
+        }
+      }
+      return -1; // 未找到足够的点号
+    },
+
+    findFunction(fn) {
+      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;
+  height: 32px;
+  border-top: 1px solid var(--dev-tool-border-color);
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.run-js-input-icon {
+  margin: 10px 0 10px -4px;
+  width: 8px;
+  height: 8px;
+  border: 1px solid var(--dev-tool-text-color);
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  overflow: hidden;
+  transform: rotate(45deg);
+  transition: border 0.3s;
+}
+
+.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);
+  color: var(--dev-tool-text-color);
+  transition: color 0.3s;
+}
+
+.run-js-tips {
+  position: absolute;
+  bottom: 31px;
+  left: 0;
+  background-color: var(--dev-tool-bg-color);
+  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/dist/v2/ConsoleList/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <view class="console-content">
+    <view class="console-control">
+      <FilterInput
+        :modelValue="modelValue"
+        @search="$emit('search', $event)"
+        @update:modelValue="$emit('update:modelValue', $event)"
+      />
+      <Tag
+        v-for="item in consoleFilterItems"
+        :mode="item.value"
+        :key="item.value"
+        :active="currentConsoleType === item.value"
+        @click="$emit('choose', item.value)"
+      >
+        {{ item.label }}
+      </Tag>
+    </view>
+
+    <VirtualListPro
+      :dataSource="consoleList"
+      :pageSize="15"
+      :scrollIntoView="scrollIntoView"
+      :scrollWithAnimation="true"
+      :height="height"
+      className="console-list"
+    >
+      <template #default="{ list, current, start }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :index="start + index"
+          :key="start + index"
+        >
+          <ConsoleItem
+            :consoleItem="item"
+            :sourceFileServers="sourceFileServers"
+            :mode="mode"
+            :useDevSource="useDevSource"
+            :id="`dev-console-${start + index}`"
+            :zIndex="zIndex"
+          />
+        </AutoSize>
+        <Empty v-if="!consoleList || consoleList.length === 0" />
+      </template>
+    </VirtualListPro>
+    <RunJSInput @run="$emit('run', $event)" />
+  </view>
+</template>
+
+<script>
+import ConsoleItem from './ConsoleItem.vue';
+import Tag from '../Tag/index.vue';
+import Empty from '../Empty/index.vue';
+import FilterInput from '../FilterInput/index.vue';
+import RunJSInput from './RunJSInput.vue';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+import { debounce } from '../../utils';
+
+export default {
+  components: {
+    ConsoleItem,
+    Tag,
+    Empty,
+    FilterInput,
+    RunJSInput,
+    VirtualListPro,
+    AutoSize,
+  },
+  props: {
+    consoleList: {
+      type: Array,
+      default: () => [],
+    },
+    currentConsoleType: {
+      type: String,
+      default: 'all',
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    sourceFileServers: {
+      type: Array,
+      default: () => [],
+    },
+    mode: {
+      type: String,
+      default: '',
+    },
+    useDevSource: {
+      type: Boolean,
+      default: false,
+    },
+    zIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      scrollIntoView: '',
+      height: 0,
+      consoleFilterItems: [
+        { label: '全部', value: 'all' },
+        { label: 'info', value: 'info' },
+        { label: 'log', value: 'log' },
+        { label: 'warn', value: 'warn' },
+        { label: 'error', value: 'error' },
+        { label: '清除', value: 'clear' },
+      ],
+    };
+  },
+  mounted() {
+    const { windowHeight } = uni.getWindowInfo();
+
+    this.height = windowHeight - 32 - 32 - 32;
+
+    // this.initWatch();
+  },
+  watch: {
+    consoleList: {
+      handler(val) {
+        // console.log('val: ', val);
+        // this.consoleList = val;
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    // initWatch() {
+    //   // Vue2 中使用 $watch 监听 props 变化
+    //   this.$watch(
+    //     'consoleList',
+    //     debounce(() => {
+    //       if (this.consoleList.length) {
+    //         this.scrollIntoView = `dev-console-${this.consoleList.length - 1}`;
+    //       }
+    //     }, 200),
+    //   );
+    // },
+  },
+};
+</script>
+
+<style scoped>
+.console-content {
+  height: 100%;
+  font-size: var(--dev-tool-base-font-size);
+}
+.console-list {
+  height: calc(100% - 32px - 32px);
+}
+.console-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;
+}
+</style>