vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{ConsoleList → DevTool/components/ConsoleList}/RunJSInput.vue

@@ -1,249 +1,247 @@
-<template>
-  <view class="run-js-input-wrapper">
-    <view class="run-js-input-icon"></view>
-    <input
-      :value="code"
-      class="run-js-input"
-      :placeholder="t('common.runPlaceholder')"
-      @confirm="debounceConfirm"
-      @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 lang="ts" setup>
-import { ref } from 'vue';
-import {
-  staticTips,
-  singleTips,
-  flatStaticTips,
-  baseSymbols,
-  type Tip,
-} from './staticTips';
-import { debounce } from '../../utils';
-import { useI18n } from '../../i18n';
-
-const { t } = useI18n();
-
-const emit = defineEmits<{
-  (e: 'run', value: string): void;
-}>();
-
-const code = ref('');
-
-const tips = ref<Tip[]>([]);
-
-// 微信真机调试为什么触发两次 confirm ???
-function onConfirm() {
-  tips.value = [];
-  const value = code.value;
-  if (!value) return;
-  code.value = '';
-
-  emit('run', value);
-}
-const debounceConfirm = debounce(onConfirm, 500, { leading: true });
-
-/**
- * 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 };
-
-  code.value = value;
-  // 光标之前的内容
-  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: hidden auto;
-  box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
-}
-
-.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>
+<template>
+  <view class="run-js-input-wrapper">
+    <view class="run-js-input-icon"></view>
+    <input
+      :value="code"
+      class="run-js-input"
+      :placeholder="t('common.runPlaceholder')"
+      @confirm="debounceConfirm"
+      @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 lang="ts" setup>
+import { ref } from 'vue';
+import {
+  staticTips,
+  singleTips,
+  flatStaticTips,
+  baseSymbols,
+  type Tip,
+} from './staticTips';
+import { debounce } from '../../../../utils';
+import { useI18n } from '../../../../i18n';
+
+const { t } = useI18n();
+
+const emit = defineEmits<{
+  (e: 'run', value: string): void;
+}>();
+
+const code = ref('');
+
+const tips = ref<Tip[]>([]);
+
+// 微信真机调试为什么触发两次 confirm ???
+function onConfirm() {
+  tips.value = [];
+  const value = code.value;
+  if (!value) return;
+  code.value = '';
+
+  emit('run', value);
+}
+const debounceConfirm = debounce(onConfirm, 500, { leading: true });
+
+/**
+ * 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 };
+
+  code.value = value;
+  // 光标之前的内容
+  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: hidden auto;
+  box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
+}
+
+.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>