vite-uni-dev-tool 0.0.11 → 0.0.13

package/dev/components/ConsoleList/ConsoleItem.vue

@@ -1,186 +0,0 @@
-<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"
-            :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> -->
-    <Code
-      v-if="openCode && consoleItem.stack"
-      :url="consoleItem.stack"
-      :sourceFileServers="sourceFileServers"
-      :mode="mode"
-      @close="onCloseCode"
-    />
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import Tag from '../Tag/index.vue';
-import Code from '../Code/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;
-  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;
-}
-.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: #9c9c9c;
-}
-.console-item-log {
-  color: #f9f9f9;
-}
-</style>

package/dev/components/ConsoleList/RunJSInput.vue

@@ -1,235 +0,0 @@
-<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;
-  padding: 0 16px;
-  min-height: 28px;
-  border-top: 1px solid var(--dev-tool-border-color);
-  border-bottom: 1px solid var(--dev-tool-border-color);
-}
-
-.run-js-input-icon {
-  margin: 10px 0 10px -4px;
-  width: 8px;
-  height: 8px;
-  border: 1px solid #000;
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  overflow: hidden;
-  transform: rotate(45deg);
-}
-
-.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-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

@@ -1,130 +0,0 @@
-<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="10"
-      :scrollIntoView="scrollIntoView"
-      :scrollWithAnimation="true"
-      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}`"
-          />
-        </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 { 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;
-}>();
-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);
-</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>