vite-uni-dev-tool 0.0.9 → 0.0.11

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,6 +46,135 @@ 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 {
@@ -35,7 +184,6 @@ function onConfirm() {
   min-height: 28px;
   border-top: 1px solid var(--dev-tool-border-color);
   border-bottom: 1px solid var(--dev-tool-border-color);
-  overflow: hidden;
 }
 
 .run-js-input-icon {
@@ -56,4 +204,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

@@ -12,26 +12,35 @@
         :key="item.value"
         :active="currentConsoleType === item.value"
         @click="emit('choose', item.value)"
-        >{{ item.label }}</Tag
       >
+        {{ item.label }}
+      </Tag>
     </view>
-    <scroll-view
-      class="console-list"
-      scroll-y
-      scroll-with-animation="true"
-      :scroll-into-view="scrollIntoView"
+
+    <VirtualListPro
+      :data="consoleList"
+      :pageSize="10"
+      :scrollIntoView="scrollIntoView"
+      :scrollWithAnimation="true"
+      className="console-list"
     >
-      <ConsoleItem
-        v-for="(item, index) in consoleList"
-        :consoleItem="item"
-        :key="index"
-        :sourceFileServers="sourceFileServers"
-        :mode="mode"
-        :useDevSource="useDevSource"
-        :id="`dev-console-${index}`"
-      />
-      <Empty v-if="!consoleList || consoleList.length === 0" />
-    </scroll-view>
+      <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>
@@ -44,6 +53,9 @@ 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[];
@@ -93,7 +105,6 @@ const scrollIntoView = ref('');
 
 const debounceWatch = debounce(() => {
   scrollIntoView.value = `dev-console-${props.consoleList.length - 1}`;
-  console.log('props.consoleList: ', props.consoleList);
 }, 200);
 
 watch(() => props.consoleList, debounceWatch);
@@ -105,7 +116,6 @@ watch(() => props.consoleList, debounceWatch);
 }
 .console-list {
   height: calc(100% - 32px - 32px);
-  overflow: auto;
 }
 .console-control {
   display: flex;