vite-uni-dev-tool 0.0.20 → 0.0.21

package/README.md

@@ -146,6 +146,7 @@ optimizeDeps: {
 ![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/network2.jpg)
 ![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/network3.jpg)
 ![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/network4.jpg)
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/network5.jpg)
 
 - 支持 upload 监控
 
@@ -197,6 +198,11 @@ optimizeDeps: {
 
 ## 更新日志
 
+### 0.0.21
+
+- 增加 source code 部分语法高亮
+- 补充 network detail 字段
+
 ### 0.0.20
 
 - 修复 storage 调用异常

package/dist/v3/DevToolWindow/index.vue

@@ -1230,6 +1230,16 @@ function onOpenCode(value?: string) {
   --dev-tool-symbol-color: bisque;
   --dev-tool-active-bg-color: #f0f0f0;
   --dev-tool-time-line-color: #9254de;
+
+  --dev-tool-note-color: #9c9c9c;
+
+  --dev-tool-keyword-color: #9254de;
+  --dev-tool-bracket-color: #ffa940;
+  --dev-tool-quotation-color: #91e76a;
+  --dev-tool-string-color: #91e76a;
+  --dev-tool-function-color: #1d8ce0;
+  --dev-tool-attribute-color: #ef66ba;
+  --dev-tool-operator-color: #50d3eb;
 }
 .dev-tool-window-dark {
   --dev-tool-bg-color: rgba(0, 0, 0, 0.8);
@@ -1243,6 +1253,16 @@ function onOpenCode(value?: string) {
   --dev-tool-active-bg-color: #3d3d3d;
 
   --dev-tool-time-line-color: #f9f9f9;
+
+  --dev-tool-note-color: #9c9c9c;
+
+  --dev-tool-keyword-color: #9254de;
+  --dev-tool-bracket-color: #ffa940;
+  --dev-tool-quotation-color: #91e76a;
+  --dev-tool-string-color: #91e76a;
+  --dev-tool-function-color: #1d8ce0;
+  --dev-tool-attribute-color: #ef66ba;
+  --dev-tool-operator-color: #50d3eb;
 }
 
 .dev-tool-window-bg {

package/dist/v3/NetworkList/NetworkDetail.vue

@@ -16,7 +16,7 @@
     <view class="network-detail-header" v-if="currentSelect === 'header'">
       <DevToolTitle>常规</DevToolTitle>
       <view class="net-detail-item">
-        <view>请求url:</view>
+        <view>请求地址:</view>
         <view>{{ network.url }}</view>
       </view>
       <view class="net-detail-item">
@@ -27,31 +27,65 @@
         <view>状态代码:</view>
         {{ network.status }}
       </view>
+      <view class="net-detail-item">
+        <view>开始时间:</view>
+        {{
+          network.startTime
+            ? formatDate(network.startTime, 'HH:mm:ss:SS')
+            : '--:--:--'
+        }}
+      </view>
+      <view class="net-detail-item">
+        <view>结束时间:</view>
+        {{
+          network.endTime
+            ? formatDate(network.endTime, 'HH:mm:ss:SS')
+            : '--:--:--'
+        }}
+      </view>
+      <view class="net-detail-item">
+        <view>请求耗时:</view>
+        {{ network.time ?? '--' }}
+      </view>
+      <view class="net-detail-item">
+        <view>请求大小:</view>
+        {{ network.size ?? '--' }}
+      </view>
 
       <DevToolTitle>请求头</DevToolTitle>
-      <view
-        class="net-detail-item"
-        v-for="item in network.headers.requestHeader"
-        :key="item.key"
-      >
-        <view>{{ item.key }}:</view>
-        {{ item.value }}
+      <template v-if="network.headers.requestHeader.length > 0">
+        <view
+          class="net-detail-item"
+          v-for="item in network.headers.requestHeader"
+          :key="item.key"
+        >
+          <view>{{ item.key }}:</view>
+          {{ item.value }}
+        </view>
+      </template>
+      <view v-else>
+        <Empty text="暂无请求头" />
       </view>
 
       <DevToolTitle>响应头</DevToolTitle>
-      <view
-        class="net-detail-item"
-        v-for="item in network.headers.responseHeader"
-        :key="item.key"
-      >
-        <view>{{ item.key }}:</view>
-        {{ item.value }}
+      <template v-if="network.headers.responseHeader.length > 0">
+        <view
+          class="net-detail-item"
+          v-for="item in network.headers.responseHeader"
+          :key="item.key"
+        >
+          <view>{{ item.key }}:</view>
+          {{ item.value }}
+        </view>
+      </template>
+      <view v-else>
+        <Empty text="暂无响应头" />
       </view>
     </view>
 
     <template v-if="currentSelect === 'payload'">
       <template v-if="payload?.type === 'object'">
-        <JsonPretty :data="payload.value" />
+        <JsonPretty :data="payload.value" virtual :height="height" />
       </template>
       <view
         v-else-if="payload?.type === 'string'"
@@ -64,7 +98,7 @@
 
     <template v-if="currentSelect === 'response'">
       <template v-if="response?.type === 'object'">
-        <JsonPretty :data="response.value" virtual />
+        <JsonPretty :data="response.value" virtual :height="height" />
       </template>
       <view
         v-else-if="response?.type === 'string'"
@@ -77,13 +111,14 @@
   </view>
 </template>
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import JsonPretty from '../JsonPretty/index.vue';
 import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
 import CircularButton from '../CircularButton/index.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
 import type { DevTool } from '../../type';
+import { formatDate } from '../../utils';
 const props = defineProps<{ network: DevTool.NetworkItem; zIndex?: number }>();
 const emit = defineEmits<{ (e: 'close'): void }>();
 const selectItems = [
@@ -100,6 +135,9 @@ const selectItems = [
     value: 'response',
   },
 ];
+
+const height = ref(0);
+
 const currentSelect = ref('header');
 
 const payload = computed(() => {
@@ -148,6 +186,12 @@ function onSelect(item: { label: string; value: string }) {
 function onClose() {
   emit('close');
 }
+
+onMounted(() => {
+  const { windowHeight } = uni.getWindowInfo();
+
+  height.value = windowHeight - 32 - 32 - 2;
+});
 </script>
 <style scoped>
 .network-detail {
@@ -166,7 +210,7 @@ function onClose() {
 .network-detail .network-detail-control {
   display: flex;
   align-items: center;
-  margin-bottom: 4px;
+  /* margin-bottom: 4px; */
   gap: 12px;
   height: 32px;
   border-bottom: 1px solid transparent;

package/dist/v3/SettingList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="setting-content">
     <view class="setting-item">
-      <DevToolTitle>DevTool(v0.0.20-vue3)</DevToolTitle>
+      <DevToolTitle>DevTool(v0.0.21-vue3)</DevToolTitle>
       <view class="setting-item-content">
         <view class="setting-row">
           <view>显示调试按钮：</view>

package/dist/v3/SourceCode/Line.vue

@@ -0,0 +1,101 @@
+<template>
+  <view
+    :class="['source-code-line', active ? 'source-code-line-active' : '']"
+    :id="id"
+  >
+    <view class="source-code-line-num" v-if="showNum">{{ num }}</view>
+    <view :class="['source-code-line-content', line.class]">
+      <view
+        v-for="item in line.words"
+        :class="['source-code-line-word', item.class]"
+      >
+        {{ item.word }}
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import type { LineInfo } from './parseCode';
+
+const props = withDefaults(
+  defineProps<{
+    line: LineInfo;
+
+    id: string;
+    active?: boolean;
+    num?: number;
+    showNum?: boolean;
+  }>(),
+  {
+    showNum: true,
+  },
+);
+</script>
+<style lang="scss" scoped>
+.source-code-line {
+  display: flex;
+  align-items: center;
+  height: 24px;
+}
+
+.source-code-line-active {
+  color: #fff;
+  background-color: var(--dev-tool-main-color);
+}
+
+.source-code-line-num {
+  flex-shrink: 0;
+  width: 30px;
+  padding: 0 6px;
+  margin-right: 6px;
+  text-align: right;
+  height: 24px;
+  border-right: 1px solid var(--dev-tool-border-color);
+}
+
+.source-code-line-content {
+  display: flex;
+  white-space: nowrap;
+  height: 24px;
+}
+
+.source-code-line-word {
+  white-space: nowrap;
+}
+
+.source-code-pre-note {
+  color: var(--dev-tool-note-color);
+}
+
+.source-code-pre-space {
+  width: 8px;
+}
+
+.source-code-pre-keyword {
+  color: var(--dev-tool-keyword-color);
+}
+
+.source-code-pre-bracket {
+  color: var(--dev-tool-bracket-color);
+}
+
+.source-code-pre-quotation {
+  color: var(--dev-tool-quotation-color);
+}
+
+.source-code-pre-string {
+  color: var(--dev-tool-string-color);
+}
+
+.source-code-pre-function {
+  color: var(--dev-tool-function-color);
+}
+
+.source-code-pre-attribute {
+  color: var(--dev-tool-attribute-color);
+}
+
+.source-code-pre-operator {
+  color: var(--dev-tool-operator-color);
+}
+</style>

package/dist/v3/SourceCode/index.vue

@@ -1,14 +1,14 @@
 <template>
   <view class="dev-tool-code" :style="{ zIndex: zIndex }">
     <view class="dev-tool-code-control">
-      <FilterInput
+      <!-- <FilterInput
         v-model="modelValue"
         style="width: 100%"
         @search="onSearch"
-      />
+      /> -->
+      <view class="dev-tool-code-title">{{ fileName }}</view>
       <CircularButton style="margin-left: auto" text="×" @click="onClose" />
     </view>
-    <view class="dev-tool-code-title">{{ fileName }}</view>
 
     <VirtualListPro
       v-if="codes.length > 0"
@@ -17,8 +17,6 @@
       :height="height"
       :data="codes"
       :scrollWithAnimation="true"
-      :defaultCurrent="defaultCurrent"
-      :scrollIntoView="scrollIntoView"
     >
       <template #default="{ list, current, start }">
         <AutoSize
@@ -26,18 +24,12 @@
           :key="start + index"
           :index="start + index"
         >
-          <view
+          <Line
+            :line="code"
             :id="`dev-code-${start + index}`"
-            :class="`dev-tool-code-item ${start + index === activeRowCol.row ? 'dev-tool-code-item-active' : ''}`"
-          >
-            <view class="dev-tool-code-item-index">
-              {{ start + index + 1 }}
-            </view>
-
-            <view class="dev-tool-code-item-content">
-              {{ code }}
-            </view>
-          </view>
+            :num="start + index + 1"
+            :active="start + index === activeRowCol.row"
+          />
         </AutoSize>
       </template>
     </VirtualListPro>
@@ -46,13 +38,14 @@
 </template>
 <script lang="ts" setup>
 import { computed, ref, onMounted } from 'vue';
-import FilterInput from '../FilterInput/index.vue';
+// import FilterInput from '../FilterInput/index.vue';
 import CircularButton from '../CircularButton/index.vue';
 import VirtualListPro from '../VirtualListPro/index.vue';
 import Empty from '../Empty/index.vue';
 import AutoSize from '../VirtualListPro/AutoSize.vue';
-import { hightLight, isAndroid, parseStock } from '../../utils';
-
+import Line from './Line.vue';
+import { isAndroid, parseStock } from '../../utils';
+import { parseCode, type LineInfo } from './parseCode';
 const props = defineProps<{
   url: string;
   sourceFileServers?: string[];
@@ -62,7 +55,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{ (e: 'close'): void }>();
 
-const modelValue = ref('');
+// const modelValue = ref('');
 const height = ref(0);
 const fileName = computed(() => {
   const name =
@@ -73,20 +66,20 @@ const fileName = computed(() => {
 const activeRowCol = ref({ row: -1, col: -1, activeRow: -1 });
 const scrollIntoView = ref('');
 
-let backupCodes: string[] = [];
+// let backupCodes: string[] = [];
 
-const codes = ref<string[]>([]);
-const defaultCurrent = ref(1);
-const pageSize = 25;
+const codes = ref<LineInfo[]>([]);
+// const defaultCurrent = ref(1);
+const pageSize = 50;
 
 function onClose() {
   emit('close');
 }
 
 function onSearch(value: string) {
-  codes.value = backupCodes.map((code) => {
-    return hightLight(code, value);
-  });
+  // codes.value = backupCodes.map((code) => {
+  //   return hightLight(code, value);
+  // });
 }
 
 let timer: number;
@@ -139,24 +132,26 @@ function getCode(url: string, i: number = 0) {
     url: allUrl,
     success: (res) => {
       if (typeof res.data === 'string') {
-        codes.value = res.data?.split('\n') ?? [];
+        codes.value = parseCode(res.data ?? '');
+
+        // res.data?.split('\n') ?? [];
 
         // 缓慢显示
         const row = activeRowCol.value.row;
         // defaultCurrent.value = Math.ceil(activeRowCol.value.row / pageSize);
         const targetCurrent = Math.ceil(row / pageSize);
 
-        startCounter({
-          start: 1,
-          target: targetCurrent,
-          duration: 500,
-          onExecute(current) {
-            scrollIntoView.value = `dev-code-${current * pageSize - 1}`;
-          },
-          onSuccess() {
-            // scrollIntoView.value = `dev-code-${row}`;
-          },
-        });
+        // startCounter({
+        //   start: 1,
+        //   target: targetCurrent,
+        //   duration: 500,
+        //   onExecute(current) {
+        //     scrollIntoView.value = `dev-code-${current * pageSize - 1}`;
+        //   },
+        //   onSuccess() {
+        //     // scrollIntoView.value = `dev-code-${row}`;
+        //   },
+        // });
       }
     },
     fail: (err) => {
@@ -185,7 +180,7 @@ function getSourceCodeDev(url: string) {
 onMounted(() => {
   const { windowHeight } = uni.getWindowInfo();
 
-  height.value = windowHeight - 32 - 32 - 32;
+  height.value = windowHeight - 32 - 32;
 
   let url = props?.url;
 
@@ -253,25 +248,4 @@ onMounted(() => {
 .dev-tool-code-list {
   height: calc(100% - 68px);
 }
-
-.dev-tool-code-item {
-  display: flex;
-  align-items: center;
-  height: 28px;
-}
-.dev-tool-code-item-active {
-  color: #fff;
-  background-color: var(--dev-tool-main-color);
-}
-
-.dev-tool-code-item-index {
-  flex-shrink: 0;
-  width: 20px;
-  margin-right: 8px;
-  text-align: right;
-}
-
-.dev-tool-code-item-content {
-  white-space: pre;
-}
 </style>

package/dist/v3/SourceCode/parseCode.d.ts

@@ -0,0 +1,27 @@
+type Word = {
+    /** 字符 */
+    word: string;
+    /** css 样式 */
+    class: string;
+    /** 分类
+     * - space: 空格
+     * - bracket: 括号
+     * - quotation: 引号
+     * - string: 字符串
+     * - function: 函数
+     * - attribute: 属性
+     * - operator: 操作符
+     * - symbol: 符号
+     * - keyword: 关键字
+     * - other: 其他
+     */
+    type: 'space' | 'bracket' | 'quotation' | 'string' | 'function' | 'attribute' | 'operator' | 'symbol' | 'keyword' | 'other';
+};
+export type LineInfo = {
+    type: 'empty' | 'tag' | 'script' | 'style' | 'note';
+    class: string;
+    words: Word[];
+};
+export declare function parseCode(code: string): LineInfo[];
+export {};
+//# sourceMappingURL=parseCode.d.ts.map

package/dist/v3/SourceCode/parseCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseCode.d.ts","sourceRoot":"","sources":["../../../dev/v3/SourceCode/parseCode.ts"],"names":[],"mappings":"AA0IA,KAAK,IAAI,GAAG;IACV,SAAS;IACT,IAAI,EAAE,MAAM,CAAC;IACb,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;OAWG;IACH,IAAI,EACA,OAAO,GACP,SAAS,GACT,WAAW,GACX,QAAQ,GACR,UAAU,GACV,WAAW,GACX,UAAU,GACV,QAAQ,GACR,SAAS,GACT,OAAO,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,CAAC;AAobF,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,CAkClD"}

package/dist/v3/SourceCode/parseCode.ts

@@ -0,0 +1,643 @@
+/** 行前空格匹配 */
+const startSpaceReg = /^(\s*)/;
+
+/** 括号 */
+const bracketList = ['<', '>', '(', ')', '{', '}', '[', ']'];
+
+/** 引号 */
+const quotationList = ["'", '"', '‘', '’', '`'];
+
+/** 操作符 */
+const operatorList = ['+', '-', '*', '/', '%', '=', '!', '&'];
+
+/** 符号 */
+const symbolList = [
+  ' ',
+  '<',
+  '>',
+  '(',
+  ')',
+  '{',
+  '}',
+  '[',
+  ']',
+  ';',
+  ':',
+  ',',
+  '.',
+  '=',
+  '?',
+  '+',
+  '-',
+  '*',
+  '/',
+  '\\',
+  "'",
+  '"',
+  '@',
+  '#',
+  '$',
+];
+
+/** 关键字 */
+const keywordList = [
+  // JavaScript 关键字
+  'var',
+  'let',
+  'const',
+  'function',
+  'class',
+  'import',
+  'export',
+  'from',
+  'as',
+  'this',
+  'super',
+  'console',
+  'window',
+  'document',
+  'if',
+  'else',
+  'for',
+  'while',
+  'do',
+  'switch',
+  'case',
+  'default',
+  'break',
+  'continue',
+  'return',
+  'try',
+  'catch',
+  'finally',
+  'throw',
+  'new',
+  'delete',
+  'typeof',
+  'instanceof',
+  'in',
+  'of',
+  'void',
+  'yield',
+  'await',
+  'async',
+  'extends',
+  'implements',
+  'interface',
+  'package',
+  'private',
+  'protected',
+  'public',
+  'static',
+  'yield',
+  'null',
+  'undefined',
+  'true',
+  'false',
+  'get',
+
+  // 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',
+];
+
+type Word = {
+  /** 字符 */
+  word: string;
+  /** css 样式 */
+  class: string;
+  /** 分类
+   * - space: 空格
+   * - bracket: 括号
+   * - quotation: 引号
+   * - string: 字符串
+   * - function: 函数
+   * - attribute: 属性
+   * - operator: 操作符
+   * - symbol: 符号
+   * - keyword: 关键字
+   * - other: 其他
+   */
+  type:
+    | 'space'
+    | 'bracket'
+    | 'quotation'
+    | 'string'
+    | 'function'
+    | 'attribute'
+    | 'operator'
+    | 'symbol'
+    | 'keyword'
+    | 'other';
+};
+
+export type LineInfo = {
+  type: 'empty' | 'tag' | 'script' | 'style' | 'note';
+  class: string;
+  words: Word[];
+};
+
+const scriptStartReg = /<script(\s[^>]*)?>/i;
+const scriptEndReg = /<\/script>/i;
+
+const styleStartReg = /<style(\s[^>]*)?>/i;
+const styleEndReg = /<\/style>/i;
+
+const preClass = 'source-code-pre';
+
+/**
+ * 获取代码中所有 <script> 块的起止行号（不包含标签本身）
+ * @param lines 源码按行分割后的字符串数组
+ * @returns 起止行号组成的二维数组，每个子数组为 [startRow, endRow]
+ */
+function getScriptStartAndEndRow(lines: string[]): number[][] {
+  // 如果没有找到任何<script>标签，则认为整段代码都是script代码
+  let hasScriptTags = false;
+  const groups: number[][] = [];
+  let currentStart: number | null = null; // 记录当前 <script> 开始行号
+
+  lines.forEach((line, index) => {
+    if (scriptStartReg.test(line)) {
+      hasScriptTags = true;
+      // 遇到开始标签，记录下一行作为内容开始位置
+      currentStart = index + 1;
+    } else if (scriptEndReg.test(line) && currentStart !== null) {
+      // 遇到结束标签且已有开始位置，则记录为一个有效块
+      // 如果开始行大于等于结束行（即<script></script>在同一行或相邻行），则不构成有效内容区间
+      if (currentStart <= index - 1) {
+        groups.push([currentStart, index - 1]); // 结束行为上一行（排除 </script>）
+      }
+      currentStart = null; // 重置等待下一个 <script>
+    }
+  });
+
+  // 如果完全没有<script>标签，则整段代码都算作script内容
+  if (!hasScriptTags && lines.length > 0) {
+    // 整个文件都是script代码
+    groups.push([0, lines.length - 1]);
+  }
+
+  return groups;
+}
+
+/**
+ * 获取代码中所有 <style> 块的起止行号（不包含标签本身）
+ * @param lines 源码按行分割后的字符串数组
+ * @returns 起止行号组成的二维数组，每个子数组为 [startRow, endRow]
+ */
+
+function getStyleStartAndEndRow(lines: string[]): number[][] {
+  const groups: number[][] = [];
+  let currentStart: number | null = null; // 记录当前 <style> 开始行号
+
+  lines.forEach((line, index) => {
+    if (styleStartReg.test(line)) {
+      // 遇到开始标签，记录下一行作为内容开始位置
+      currentStart = index + 1;
+    } else if (styleEndReg.test(line) && currentStart !== null) {
+      // 遇到结束标签且已有开始位置，则记录为一个有效块
+      // 如果开始行大于等于结束行（即<style></style>在同一行或相邻行），则不构成有效内容区间
+      if (currentStart <= index - 1) {
+        groups.push([currentStart, index - 1]); // 结束行为上一行（排除 </style>）
+      }
+      currentStart = null; // 重置等待下一个 <style>
+    }
+  });
+
+  return groups;
+}
+
+/**
+ * 获取代码中所有注释块的起止行号
+ * @param lines 源码按行分割后的字符串数组
+ * @returns 起止行号组成的二维数组，每个子数组为 [startRow, endRow]
+ */
+function getNoteStartAndEndRow(lines: string[]): number[][] {
+  const groups: number[][] = [];
+  let currentStart: number | null = null; // 记录当前注释块开始行号
+  let inMultiLineComment = false; // 是否在多行注释 /* */ 中
+  let inHtmlComment = false; // 是否在HTML注释 <!-- --> 中
+
+  lines.forEach((line, index) => {
+    const trimLine = line.trim();
+
+    // 处理 /* */ 多行注释
+    if (!inMultiLineComment && !inHtmlComment && trimLine.startsWith('/*')) {
+      inMultiLineComment = true;
+      currentStart = index;
+
+      // 检查是否在同一行内结束多行注释
+      if (
+        trimLine.includes('*/') &&
+        trimLine.indexOf('*/') > trimLine.indexOf('/*')
+      ) {
+        groups.push([currentStart, index]);
+        inMultiLineComment = false;
+        currentStart = null;
+      }
+    } else if (inMultiLineComment && trimLine.includes('*/')) {
+      // 结束多行注释
+      groups.push([currentStart!, index]);
+      inMultiLineComment = false;
+      currentStart = null;
+    }
+    // 处理 <!-- --> HTML注释
+    else if (
+      !inMultiLineComment &&
+      !inHtmlComment &&
+      trimLine.startsWith('<!--')
+    ) {
+      inHtmlComment = true;
+      currentStart = index;
+
+      // 检查是否在同一行内结束HTML注释
+      if (
+        trimLine.includes('-->') &&
+        trimLine.indexOf('-->') > trimLine.indexOf('<!--')
+      ) {
+        groups.push([currentStart, index]);
+        inHtmlComment = false;
+        currentStart = null;
+      }
+    } else if (inHtmlComment && trimLine.includes('-->')) {
+      // 结束HTML注释
+      groups.push([currentStart!, index]);
+      inHtmlComment = false;
+      currentStart = null;
+    }
+    // 处理单行注释 // 或 /** */
+    else if (
+      !inMultiLineComment &&
+      !inHtmlComment &&
+      trimLine.startsWith('//')
+    ) {
+      groups.push([index, index]);
+    }
+  });
+
+  return groups;
+}
+
+/**
+ * 获取代码中的 标签起始行，不包含script 中的内容，不包含style中的内容
+ * @param lines 源码按行分割后的字符串数组
+ * @returns 包含标签、脚本、样式和注释范围的对象
+ */
+function getTagStartAndEndRow(lines: string[]): {
+  tagRanges: number[][];
+  scriptRanges: number[][];
+  styleRanges: number[][];
+  noteRanges: number[][];
+} {
+  // 先找出 script 和 style 的内容区域
+  const scriptRanges = getScriptStartAndEndRow(lines);
+  const styleRanges = getStyleStartAndEndRow(lines);
+  const noteRanges = getNoteStartAndEndRow(lines);
+
+  // 合并并排序所有需要排除的区间
+  const excludeRanges = [...scriptRanges, ...styleRanges, ...noteRanges].sort(
+    (a, b) => a[0] - b[0],
+  );
+
+  const tagRanges: number[][] = [];
+
+  if (excludeRanges.length === 0) {
+    // 如果没有 script 或 style 块，则整个文件都是 html 区域
+    if (lines.length > 0) {
+      tagRanges.push([0, lines.length - 1]);
+    }
+  } else {
+    let currentStart = 0;
+
+    for (let i = 0; i < excludeRanges.length; i++) {
+      const [start, end] = excludeRanges[i];
+
+      // 检查当前起始点到这个排除区间的开始是否有内容
+      if (currentStart <= start - 1) {
+        tagRanges.push([currentStart, start - 1]);
+      }
+
+      // 更新下一个可能的起始点为排除区间之后
+      currentStart = end + 1;
+    }
+
+    // 检查最后一个排除区间结束后是否还有剩余内容
+    if (currentStart < lines.length) {
+      tagRanges.push([currentStart, lines.length - 1]);
+    }
+  }
+
+  return {
+    tagRanges,
+    scriptRanges,
+    styleRanges,
+    noteRanges,
+  };
+}
+
+/**
+ * 获取指定行号对应的代码块类型
+ *
+ * @param {number} index
+ * @param {{
+ *     tagRanges: number[][];
+ *     scriptRanges: number[][];
+ *     styleRanges: number[][];
+ *   }} {
+ *     tagRanges,
+ *     scriptRanges,
+ *     styleRanges,
+ *   }
+ * @return {*}
+ */
+function getLineIndexType(
+  index: number,
+  {
+    tagRanges,
+    scriptRanges,
+    styleRanges,
+    noteRanges,
+  }: {
+    tagRanges: number[][];
+    scriptRanges: number[][];
+    styleRanges: number[][];
+    noteRanges: number[][];
+  },
+) {
+  // 检查是否在注释区间内
+  for (const [start, end] of noteRanges) {
+    if (index >= start && index <= end) {
+      return 'note';
+    }
+  }
+
+  // 检查是否在 script 区间内
+  for (const [start, end] of scriptRanges) {
+    if (index >= start && index <= end) {
+      return 'script';
+    }
+  }
+
+  // 检查是否在 style 区间内
+  for (const [start, end] of styleRanges) {
+    if (index >= start && index <= end) {
+      return 'style';
+    }
+  }
+
+  // 检查是否在 tag 区间内
+  for (const [start, end] of tagRanges) {
+    if (index >= start && index <= end) {
+      return 'tag';
+    }
+  }
+
+  return 'empty';
+}
+
+/**
+ * 获取代码中的单词信息
+ *
+ * TODO: 属性 ， 方法
+ *
+ * @param {string[]} words
+ * @return {*}  {Word[]}
+ */
+function getWordsInfo(words: string[]): Word[] {
+  let quotation = '';
+  return words.map((w, index) => {
+    // 空格
+    const isSpace = w === ' ';
+    if (isSpace) {
+      return {
+        word: w,
+        type: 'space',
+        class: `${preClass}-space`,
+      };
+    }
+
+    // 箭头函数
+    const isArrow =
+      (w === '=' && words?.[index + 1] === '>') ||
+      (w === '>' && words?.[index - 1] === '=');
+    if (isArrow) {
+      return {
+        word: w,
+        type: 'keyword',
+        class: `${preClass}-keyword`,
+      };
+    }
+
+    // 括号
+    const isBracket = bracketList.includes(w);
+    if (isBracket) {
+      return {
+        word: w,
+        type: 'bracket',
+        class: `${preClass}-bracket`,
+      };
+    }
+
+    // 引号
+    const isQuotation = quotationList.includes(w);
+    if (isQuotation) {
+      quotation = quotation !== '' && quotation === w ? '' : w;
+      return {
+        word: w,
+        type: 'quotation',
+        class: `${preClass}-quotation`,
+      };
+    }
+
+    if (quotation != '') {
+      return {
+        word: w,
+        type: 'string',
+        class: `${preClass}-string`,
+      };
+    }
+
+    // 字符串
+    const isStr = quotationList.includes(words?.[index - 1]);
+    if (isStr) {
+      return {
+        word: w,
+        type: 'string',
+        class: `${preClass}-string`,
+      };
+    }
+
+    // 函数
+    const isFunction =
+      (words?.[index - 1] === ' ' && words?.[index - 2] === 'function') ||
+      words?.[index + 1] === '(';
+    if (isFunction) {
+      return {
+        word: w,
+        type: 'function',
+        class: `${preClass}-function`,
+      };
+    }
+
+    const preW = symbolList.includes(words?.[index - 1]);
+    const isAttribute = words?.[index + 1] === '.' && !preW;
+    if (isAttribute) {
+      return {
+        word: w,
+        type: 'attribute',
+        class: `${preClass}-attribute`,
+      };
+    }
+
+    // 操作符
+    const isOperator = operatorList.includes(w);
+    if (isOperator) {
+      return {
+        word: w,
+        type: 'operator',
+        class: `${preClass}-operator`,
+      };
+    }
+
+    // 符号
+    const isSymbol = symbolList.includes(w);
+    if (isSymbol) {
+      return {
+        word: w,
+        type: 'symbol',
+        class: `${preClass}-symbol`,
+      };
+    }
+
+    // 关键字
+    const isKeyword =
+      keywordList.includes(w) &&
+      (words?.[index + 1] === ' ' || words?.[index + 1] === ';');
+    if (isKeyword) {
+      return {
+        word: w,
+        type: 'keyword',
+        class: `${preClass}-keyword`,
+      };
+    }
+
+    // 其他
+    return {
+      word: w,
+      type: 'other',
+      class: `${preClass}-other`,
+    };
+  });
+}
+
+/**
+ * 按符号列表分割字符串
+ * @param lineTrim 需要分割的字符串
+ * @param symbols 符号列表
+ * @returns 分割后的词元数组
+/**
+ *
+ *
+ * @param {string} lineTrim
+ * @param {string[]} symbols
+ * @return {*}  {string[]}
+ */
+function splitBySymbols(lineTrim: string, symbols: string[]): string[] {
+  if (!lineTrim) return [];
+
+  // 跳过注释行的处理
+  if (
+    lineTrim.startsWith('/*') ||
+    lineTrim.startsWith('*') ||
+    lineTrim.startsWith('//') ||
+    lineTrim.startsWith('<!--') ||
+    lineTrim.startsWith('-->') ||
+    lineTrim.length > 5000
+  ) {
+    return [lineTrim];
+  }
+
+  // 转义特殊字符并构建正则表达式
+  const escapedSymbols = symbols.map((s) =>
+    s.replace(/[.*+?^${}()|[\]\\@\$]/g, '\\$&'),
+  );
+  const regexPattern = `(${escapedSymbols.join('|')})`;
+  const regex = new RegExp(regexPattern, 'g');
+
+  // 使用正则表达式分割字符串并保留分隔符
+  const parts = lineTrim.split(regex);
+
+  // 过滤掉空字符串并返回结果
+  return parts.filter((part) => part !== '');
+}
+
+export function parseCode(code: string): LineInfo[] {
+  // 按行进行重新解析
+  const lines = code.split('\n');
+
+  const { tagRanges, scriptRanges, styleRanges, noteRanges } =
+    getTagStartAndEndRow(lines);
+
+  const parseLine = lines.map((line, index) => {
+    // 解析行之前的空格
+    const space =
+      line?.length < 500
+        ? (line.match(startSpaceReg)?.[1] || '')?.split('')
+        : [];
+    // 获取行类型
+
+    const type = getLineIndexType(index, {
+      tagRanges,
+      scriptRanges,
+      styleRanges,
+      noteRanges,
+    });
+
+    const lineTrim = line.trim();
+
+    // 按符号分割行内容
+    const segments = splitBySymbols(lineTrim, symbolList);
+
+    const words = getWordsInfo([...space, ...segments]);
+
+    const lineInfo: LineInfo = { type, words, class: `${preClass}-${type}` };
+    return lineInfo;
+  });
+
+  return parseLine;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-uni-dev-tool",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试",
   "keywords": [
     "vite",