vite-uni-dev-tool 0.0.13 → 0.0.15

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>