vite-uni-dev-tool 0.0.13 → 0.0.14

package/dist/v3/ConsoleList/ConsoleItem.vue

@@ -0,0 +1,208 @@
+<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>
+    <!-- <view class="console-copy">C</view> -->
+    <SourceCode
+      v-if="openCode && consoleItem.stack"
+      :url="consoleItem.stack"
+      :sourceFileServers="sourceFileServers"
+      :mode="mode"
+      :zIndex="zIndex"
+      @close="onCloseCode"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import Tag from '../Tag/index.vue';
+import SourceCode from '../SourceCode/index.vue';
+import type { DevTool } from '../../type';
+import { isAndroid, isMockWX } from '../../utils';
+import JsonPretty from '../JsonPretty/index.vue';
+const props = defineProps<{
+  consoleItem: DevTool.ConsoleItem;
+  sourceFileServers?: string[];
+  mode?: string;
+  useDevSource?: boolean;
+  zIndex?: number;
+  id: string;
+}>();
+
+const openCode = ref(false);
+
+const isUseDevSource = computed(() => {
+  return (
+    !isMockWX(props?.consoleItem?.stack ?? '') &&
+    props.mode === 'development' &&
+    props.useDevSource
+  );
+});
+
+const isWXLink = computed(() => {
+  return (
+    isMockWX(props?.consoleItem?.stack ?? '') || props.mode !== 'development'
+  );
+});
+
+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>
+.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/v3/ConsoleList/RunJSInput.vue

@@ -0,0 +1,240 @@
+<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"
+        @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;
+}>();
+
+const code = ref('');
+
+const tips = ref<Tip[]>([]);
+
+function onConfirm() {
+  tips.value = [];
+  const value = code.value;
+  if (!value) return;
+  code.value = '';
+  setTimeout(() => {
+    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;
+  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/v3/ConsoleList/index.vue

@@ -0,0 +1,139 @@
+<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
+      :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"
+          :index="start + index"
+          :key="start + index"
+        >
+          <ConsoleItem
+            :consoleItem="item"
+            :sourceFileServers="sourceFileServers"
+            :mode="mode"
+            :useDevSource="useDevSource"
+            :id="`dev-console-${index}`"
+            :zIndex="zIndex"
+          />
+        </AutoSize>
+        <Empty v-if="!consoleList || consoleList.length === 0" />
+      </template>
+    </VirtualListPro>
+    <RunJSInput @run="emit('run', $event)" />
+  </view>
+</template>
+<script setup lang="ts">
+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 type { DevTool } from '../../type';
+import { onMounted, ref, watch } from 'vue';
+import { debounce } from '../../utils';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+
+type ConsoleType = 'all' | 'log' | 'info' | 'warn' | 'error' | 'clear';
+const props = defineProps<{
+  consoleList: DevTool.ConsoleItem[];
+  currentConsoleType: string;
+  modelValue: string;
+  sourceFileServers?: string[];
+  mode?: string;
+  useDevSource?: boolean;
+  zIndex?: number;
+}>();
+const emit = defineEmits<{
+  (e: 'choose', type: ConsoleType): void;
+  (e: 'search', value: string): void;
+  (e: 'update:modelValue', value: string): void;
+  (e: 'run', value: string): void;
+}>();
+const consoleFilterItems: {
+  label: string;
+  value: ConsoleType;
+}[] = [
+  {
+    label: '全部',
+    value: 'all',
+  },
+  {
+    label: 'info',
+    value: 'info',
+  },
+  {
+    label: 'log',
+    value: 'log',
+  },
+  {
+    label: 'warn',
+    value: 'warn',
+  },
+  {
+    label: 'error',
+    value: 'error',
+  },
+  {
+    label: '清除',
+    value: 'clear',
+  },
+];
+
+const scrollIntoView = ref('');
+
+const debounceWatch = debounce(() => {
+  scrollIntoView.value = `dev-console-${props.consoleList.length - 1}`;
+}, 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 {
+  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>