vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/SourceCode/parseCode.ts

@@ -37,6 +37,11 @@ const symbolList = [
   '@',
   '#',
   '$',
+  '!',
+  '&',
+  '|',
+  '^',
+  '%',
 ];
 
 /** 关键字 */
@@ -89,51 +94,77 @@ const keywordList = [
   'protected',
   'public',
   'static',
-  'yield',
+  'type',
+  'enum',
+  'declare',
+  'readonly',
+  'any',
+  'number',
+  'string',
+  'boolean',
   'null',
   'undefined',
   'true',
   'false',
   'get',
+  'set',
 
   // Vue 特定关键字
-  // 'ref',
-  // 'reactive',
-  // 'computed',
-  // 'watch',
-  // 'watchEffect',
-  // 'provide',
-  // 'inject',
-  // 'setup',
-  // 'onMounted',
-  // 'onUnmounted',
-  // 'onUpdated',
-  // 'onBeforeMount',
-  // 'onBeforeUpdate',
-  // 'onBeforeUnmount',
-  // 'nextTick',
-  // 'defineComponent',
-  // 'defineProps',
-  // 'defineEmits',
-  // 'defineExpose',
-  // 'withDefaults',
-
-  // // UniApp 特定关键字
-  // 'uni',
-  // 'getCurrentInstance',
-  // 'onLoad',
-  // 'onShow',
-  // 'onReady',
-  // 'onHide',
-  // 'onUnload',
-  // 'onPullDownRefresh',
-  // 'onReachBottom',
-  // 'onShareAppMessage',
-  // 'onShareTimeline',
-  // 'onAddToFavorites',
-  // 'onPageScroll',
-  // 'onResize',
-  // 'onTabItemTap',
+  'ref',
+  'reactive',
+  'computed',
+  'watch',
+  'watchEffect',
+  'provide',
+  'inject',
+  'setup',
+  'onMounted',
+  'onUnmounted',
+  'onUpdated',
+  'onBeforeMount',
+  'onBeforeUpdate',
+  'onBeforeUnmount',
+  'nextTick',
+  'defineComponent',
+  'defineProps',
+  'defineEmits',
+  'defineExpose',
+  'withDefaults',
+
+  // UniApp 特定关键字
+  'uni',
+  'getCurrentInstance',
+  'onLoad',
+  'onShow',
+  'onReady',
+  'onHide',
+  'onUnload',
+  'onPullDownRefresh',
+  'onReachBottom',
+  'onShareAppMessage',
+  'onShareTimeline',
+  'onAddToFavorites',
+  'onPageScroll',
+  'onResize',
+  'onTabItemTap',
+];
+
+/** 内置全局对象/类型 */
+const builtInList = [
+  'Object',
+  'Array',
+  'String',
+  'Number',
+  'Boolean',
+  'Promise',
+  'Math',
+  'JSON',
+  'Date',
+  'RegExp',
+  'Set',
+  'Map',
+  'Error',
+  'Symbol',
 ];
 
 type Word = {
@@ -151,6 +182,8 @@ type Word = {
    * - operator: 操作符
    * - symbol: 符号
    * - keyword: 关键字
+   * - number: 数字
+   * - builtin: 内置对象
    * - other: 其他
    */
   type:
@@ -163,6 +196,8 @@ type Word = {
     | 'operator'
     | 'symbol'
     | 'keyword'
+    | 'number'
+    | 'builtin'
     | 'other';
 };
 
@@ -492,7 +527,7 @@ function getWordsInfo(words: string[]): Word[] {
       };
     }
 
-    // 字符串
+    // 字符串 (处理引号后的第一个词)
     const isStr = quotationList.includes(words?.[index - 1]);
     if (isStr) {
       return {
@@ -502,11 +537,23 @@ function getWordsInfo(words: string[]): Word[] {
       };
     }
 
+    // 数字
+    const isNumber =
+      /^\d+(\.\d+)?(e\d+)?$/i.test(w) || /^0x[0-9a-f]+$/i.test(w);
+    if (isNumber) {
+      return {
+        word: w,
+        type: 'number',
+        class: `${preClass}-number`,
+      };
+    }
+
     // 函数
-    const isFunction =
+    const isFunc =
       (words?.[index - 1] === ' ' && words?.[index - 2] === 'function') ||
-      words?.[index + 1] === '(';
-    if (isFunction) {
+      words?.[index + 1] === '(' ||
+      (words?.[index + 1] === ' ' && words?.[index + 2] === '(');
+    if (isFunc && !keywordList.includes(w)) {
       return {
         word: w,
         type: 'function',
@@ -514,8 +561,11 @@ function getWordsInfo(words: string[]): Word[] {
       };
     }
 
+    // 属性提取
     const preW = symbolList.includes(words?.[index - 1]);
-    const isAttribute = words?.[index + 1] === '.' && !preW;
+    const isAttribute =
+      (words?.[index + 1] === '.' || (words?.[index - 1] === '.' && !preW)) &&
+      !isNumber;
     if (isAttribute) {
       return {
         word: w,
@@ -524,6 +574,26 @@ function getWordsInfo(words: string[]): Word[] {
       };
     }
 
+    // 关键字
+    const isKeyword = keywordList.includes(w);
+    if (isKeyword) {
+      return {
+        word: w,
+        type: 'keyword',
+        class: `${preClass}-keyword`,
+      };
+    }
+
+    // 内置对象
+    const isBuiltin = builtInList.includes(w);
+    if (isBuiltin) {
+      return {
+        word: w,
+        type: 'builtin',
+        class: `${preClass}-builtin`,
+      };
+    }
+
     // 操作符
     const isOperator = operatorList.includes(w);
     if (isOperator) {
@@ -544,18 +614,6 @@ function getWordsInfo(words: string[]): Word[] {
       };
     }
 
-    // 关键字
-    const isKeyword =
-      keywordList.includes(w) &&
-      (words?.[index + 1] === ' ' || words?.[index + 1] === ';');
-    if (isKeyword) {
-      return {
-        word: w,
-        type: 'keyword',
-        class: `${preClass}-keyword`,
-      };
-    }
-
     // 其他
     return {
       word: w,
@@ -594,7 +652,7 @@ function splitBySymbols(lineTrim: string, symbols: string[]): string[] {
 
   // 转义特殊字符并构建正则表达式
   const escapedSymbols = symbols.map((s) =>
-    s.replace(/[.*+?^${}()|[\]\\@\$]/g, '\\$&'),
+    s.replace(/[.*+?^${}()|[\]\\@$]/g, '\\$&'),
   );
   const regexPattern = `(${escapedSymbols.join('|')})`;
   const regex = new RegExp(regexPattern, 'g');

package/dist/v3/StorageList/index.vue

@@ -1,19 +1,18 @@
 <template>
+  <!-- eslint-disable vue/no-v-html, vue/no-v-text-v-html-on-component -->
   <view class="storage-content">
     <view class="storage-control">
+      <DevToolTitle>{{ t('storage.title') }}</DevToolTitle>
       <FilterInput
-        :modelValue="modelValue"
         style="width: 100%"
-        placeholder="查询key"
-        @search="emit('search', $event)"
-        @update:modelValue="emit('update:modelValue', $event)"
-      />
+        v-model="modelValue"
+        placeholder="查询"
+        @search="emit('search', $event)" />
       <Tag
         v-for="item in storageFilerItem"
         mode="clear"
         :key="item.label"
-        @click="onChoose(item.value)"
-      >
+        @click="onChoose(item.value)">
         {{ item.label }}
       </Tag>
     </view>
@@ -21,14 +20,13 @@
       <view class="storage-item" v-for="item in storageList" :key="item.key">
         <view class="storage-key">
           <view class="storage-key-label">
-            <view>key: </view>
+            <view>key:</view>
             <view v-html="item._oldKey" />
           </view>
           <CircularButton
             style="margin-left: auto"
             text="×"
-            @click="onRemove(item.key)"
-          />
+            @click="onRemove(item.key)" />
         </view>
 
         <JsonPretty
@@ -41,8 +39,7 @@
           :theme="theme"
           :nodeSelectable="() => false"
           :pathCollapsible="() => false"
-          @update:data="onUpdateData($event, item)"
-        />
+          @update:data="onUpdateData($event, item)" />
       </view>
       <Empty v-if="!storageList || storageList.length === 0" />
     </scroll-view>
@@ -55,18 +52,24 @@ import Empty from '../Empty/index.vue';
 import CircularButton from '../CircularButton/index.vue';
 import FilterInput from '../FilterInput/index.vue';
 import type { DevTool } from '../../type';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import { useI18n } from '../../i18n';
+import { computed } from 'vue';
+
+const { t } = useI18n();
+
 const props = defineProps<{
   storageList: DevTool.StorageItem[];
-  modelValue: string;
   theme?: string;
 }>();
 
+const modelValue = defineModel<string>('modelValue', { required: true });
+
 const emit = defineEmits<{
   (e: 'choose', type: string): void;
   (e: 'remove', key: string): void;
-  (e: 'update:storageList', data: Record<string, any>): void;
+  (e: 'update:storageList', data: DevTool.StorageItem[]): void;
   (e: 'change', value: any): void;
-  (e: 'update:modelValue', value: string): void;
   (e: 'search', value: string): void;
 }>();
 
@@ -82,6 +85,8 @@ function onUpdateData(data: DevTool.StorageItem, item: DevTool.StorageItem) {
     value: data.value,
   };
 
+  emit('update:storageList', tempList);
+
   emit('change', {
     ...data,
     _oldKey: tempList[index]._oldKey,
@@ -89,33 +94,21 @@ function onUpdateData(data: DevTool.StorageItem, item: DevTool.StorageItem) {
   });
 }
 
-const storageFilerItem = [
+const storageFilerItem = computed(() => [
   {
-    label: '新增',
+    label: t('common.add'),
     value: 'add',
   },
   {
-    label: '刷新',
+    label: t('common.refresh'),
     value: 'refresh',
   },
   {
-    label: '清除',
+    label: t('common.clear'),
     value: 'clear',
   },
-];
-function calcValue(value: string) {
-  try {
-    return {
-      value: JSON.parse(value),
-      type: 'object',
-    };
-  } catch (error) {
-    return {
-      value,
-      type: 'string',
-    };
-  }
-}
+]);
+// function calcValue(value: string) { ... }
 function onChoose(type: string) {
   emit('choose', type);
 }
@@ -128,27 +121,33 @@ function onRemove(key: string) {
   height: 100%;
   font-size: var(--dev-tool-base-font-size);
 }
+
 .storage-content .storage-list {
   height: calc(100% - 32px);
   overflow: auto;
 }
+
 .storage-content .storage-list .storage-item {
   padding: 16px;
   border-bottom: 1px solid var(--dev-tool-border-color);
 }
+
 .storage-content .storage-list .storage-item .storage-key {
   display: flex;
   align-items: center;
   justify-content: space-between;
   word-break: break-all;
 }
+
 .storage-key-label {
   display: flex;
   align-items: center;
 }
+
 .storage-content .storage-list .storage-item .storage-value {
   word-break: break-all;
 }
+
 .storage-content .storage-list .storage-item .storage-remove {
   flex-shrink: 0;
   display: flex;
@@ -161,6 +160,7 @@ function onRemove(key: string) {
   border: 1px solid #000;
   box-sizing: border-box;
 }
+
 .storage-control {
   display: flex;
   align-items: center;

package/dist/v3/Tabs/index.vue

@@ -5,22 +5,17 @@
       ref="tabsRef"
       scroll-x="true"
       enable-flex="true"
-      scroll-with-animation
+      :scroll-with-animation="isAnimated"
       :show-scrollbar="false"
-      :scrollLeft="scrollLeft"
+      :scroll-left="scrollLeft"
       :scroll-into-view="scrollIntoView"
-      @scroll="onScroll"
-      @touchmove.stop
-    >
+      @scroll="onScroll">
       <view
-        v-for="item in items"
+        v-for="(item, idx) in items"
         :key="item.key"
-        :class="`tabs-item ${
-          item.index === modelValue ? 'tabs-item-active' : ''
-        } `"
-        :id="`tabs-item-${item.index}`"
-        @click="onChangeTabs(item)"
-      >
+        :class="`tabs-item ${idx === modelValue ? 'tabs-item-active' : ''} `"
+        :id="`tabs-item-${idx}`"
+        @click="onChangeTabs(idx)">
         {{ item.label }}
       </view>
     </scroll-view>
@@ -32,37 +27,43 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import CircularButton from '../CircularButton/index.vue';
-// const activeKey = ref("Console");
-const props = defineProps<{
-  modelValue: number;
+
+defineProps<{
   items: { label: string; key: string; value: any; index: number }[];
   scrollLeft?: number;
 }>();
 
-const tabsRef = ref();
+const modelValue = defineModel<number>('modelValue', { required: true });
+
+const isMounted = ref(false);
 
 const emit = defineEmits<{
   (e: 'close'): void;
-  (e: 'update:modelValue', value: number): void;
   (e: 'change', value: number): void;
   (e: 'scroll', value: any): void;
 }>();
 
 const scrollIntoView = computed(() => {
-  return `tabs-item-${props.modelValue}`;
+  if (!isMounted.value) return '';
+  return `tabs-item-${modelValue.value}`;
 });
 
-function onChangeTabs(item: {
-  label: string;
-  key: string;
-  value: any;
-  index: number;
-}) {
-  // activeKey.value = item.key;
-  emit('update:modelValue', item.index);
-  emit('change', item.index);
+const isAnimated = ref(false);
+
+onMounted(() => {
+  setTimeout(() => {
+    isMounted.value = true;
+    setTimeout(() => {
+      isAnimated.value = true;
+    }, 300);
+  }, 100);
+});
+
+function onChangeTabs(idx: number) {
+  modelValue.value = idx;
+  emit('change', idx);
 }
 function onClose() {
   emit('close');
@@ -89,6 +90,7 @@ function onScroll(e: any) {
   height: 0;
   color: transparent;
 }
+
 .tabs-list {
   display: flex;
   align-items: center;
@@ -110,6 +112,7 @@ function onScroll(e: any) {
   transition: all 0.3s;
   cursor: pointer;
 }
+
 .tabs-item-active {
   color: var(--dev-tool-main-color);
   border-color: var(--dev-tool-main-color);

package/dist/v3/Tag/index.vue

@@ -2,8 +2,7 @@
   <view
     :class="['tag', `tag-${mode}`, active ? 'tag-active' : '']"
     :style="customStyle"
-    @click="onClick"
-  >
+    @click="onClick">
     <slot></slot>
   </view>
 </template>
@@ -31,64 +30,84 @@ function onClick(event: MouseEvent) {
 .tag {
   display: flex;
   align-items: center;
-  padding: 0 4px;
+  padding: 0 6px;
   width: min-content;
-  height: 24px;
+  height: 22px;
   color: var(--dev-tool-text-color);
   border-radius: 4px;
   white-space: nowrap;
   box-sizing: border-box;
   font-size: var(--dev-tool-tag-font-size);
   cursor: pointer;
-  transition: all 0.3s;
+  user-select: none;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid transparent;
 }
+
+.tag:hover {
+  opacity: 0.85;
+  filter: brightness(1.1);
+}
+
+.tag:active {
+  transform: scale(0.92);
+}
+
 .tag-log {
-  color: #000;
-  background-color: var(--dev-tool-log-color);
-  border: 1px solid var(--dev-tool-log-color);
+  background-color: var(--dev-tool-active-bg-color);
+  border-color: var(--dev-tool-border-color);
 }
+
 .tag-info {
-  color: #000;
-  background-color: var(--dev-tool-normal-bg-color);
-  border: 1px solid var(--dev-tool-normal-bg-color);
+  background-color: var(--dev-tool-active-bg-color);
+  border-color: var(--dev-tool-border-color);
 }
+
 .tag-warn {
   color: #fff;
   background-color: var(--dev-tool-warn-color);
-  border: 1px solid var(--dev-tool-warn-color);
+  border-color: var(--dev-tool-warn-color);
 }
+
 .tag-success {
   color: #fff;
   background-color: var(--dev-tool-success-color);
-  border: 1px solid var(--dev-tool-success-color);
+  border-color: var(--dev-tool-success-color);
 }
+
 .tag-error {
   color: #fff;
   background-color: var(--dev-tool-error-color);
-  border: 1px solid var(--dev-tool-error-color);
+  border-color: var(--dev-tool-error-color);
 }
+
 .tag-main {
   background-color: var(--dev-tool-main-color);
   color: #fff;
-  border: 1px solid var(--dev-tool-main-color);
+  border-color: var(--dev-tool-main-color);
 }
 
 .tag-primary {
+  background-color: var(--dev-tool-main-color);
   color: #fff;
-  background-color: #0958d9;
-  border: 1px solid #0958d9;
+  border-color: var(--dev-tool-main-color);
 }
+
 .tag-clear {
-  color: #0958d9;
-  border: 1px solid #0958d9;
+  color: var(--dev-tool-main-color);
+  border-color: var(--dev-tool-main-color);
+  background-color: transparent;
 }
+
 .tag-all {
   color: var(--dev-tool-text-color);
-  border: 1px solid #000;
+  border-color: var(--dev-tool-border-color);
+  background-color: var(--dev-tool-active-bg-color);
 }
 
 .tag-active {
   border-color: var(--dev-tool-main-color);
   color: var(--dev-tool-main-color);
+  background-color: var(--dev-tool-active-bg-color);
 }
 </style>