vite-uni-dev-tool 1.1.0 → 1.2.0

package/dist/v3/DevTool/components/SourceCode/parseCode.ts

@@ -1,609 +1,609 @@
-/** 操作符 */
-const operatorList = ['+', '-', '*', '/', '%', '=', '!', '&'];
-
-/** 关键字 */
-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',
-  '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',
-];
-
-/** 内置全局对象/类型 */
-const builtInList = [
-  'Object',
-  'Array',
-  'String',
-  'Number',
-  'Boolean',
-  'Promise',
-  'Math',
-  'JSON',
-  'Date',
-  'RegExp',
-  'Set',
-  'Map',
-  'Error',
-  'Symbol',
-];
-
-type Word = {
-  /** 字符 */
-  word: string;
-  /** css 样式 */
-  class: string;
-  /** 分类
-   * - space: 空格
-   * - bracket: 括号
-   * - quotation: 引号
-   * - string: 字符串
-   * - function: 函数
-   * - attribute: 属性
-   * - operator: 操作符
-   * - symbol: 符号
-   * - keyword: 关键字
-   * - number: 数字
-   * - builtin: 内置对象
-   * - other: 其他
-   */
-  type:
-    | 'space'
-    | 'bracket'
-    | 'quotation'
-    | 'string'
-    | 'function'
-    | 'attribute'
-    | 'operator'
-    | 'symbol'
-    | 'keyword'
-    | 'number'
-    | 'builtin'
-    | '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';
-}
-
-/**
- * 将整行代码字符串分词，带有更精细的词法分析，大大减少DOM元素数量
- */
-function tokenizeLine(lineStr: string): Word[] {
-  let remain = lineStr;
-  const words: Word[] = [];
-  let prevWord = '';
-
-  while (remain.length > 0) {
-    let match;
-
-    // Space
-    match = remain.match(/^(\s+)/);
-    if (match) {
-      // Use different class for inline spaces to prevent indent lines appearing in middle of code
-      words.push({
-        word: match[0],
-        type: 'space',
-        class: `${preClass}-space-inline`,
-      });
-      remain = remain.slice(match[0].length);
-      continue;
-    }
-
-    // Comment (inline)
-    match = remain.match(/^(\/\/.*)/);
-    if (match) {
-      words.push({ word: match[0], type: 'symbol', class: `${preClass}-note` });
-      remain = remain.slice(match[0].length);
-      continue;
-    }
-
-    // HTML Comment
-    match = remain.match(/^(<!--.*?-->|<!--.*|.*-->)/);
-    if (match) {
-      words.push({ word: match[0], type: 'symbol', class: `${preClass}-note` });
-      remain = remain.slice(match[0].length);
-      continue;
-    }
-
-    // Strings (with escapes)
-    match = remain.match(
-      /^("[^"\\]*(\\.[^"\\]*)*"|'[^'\\]*(\\.[^'\\]*)*'|`[^`\\]*(\\.[^`\\]*)*`)/,
-    );
-    if (match) {
-      words.push({
-        word: match[0],
-        type: 'string',
-        class: `${preClass}-string`,
-      });
-      remain = remain.slice(match[0].length);
-      prevWord = '""';
-      continue;
-    }
-
-    // Identifiers & Keywords
-    match = remain.match(/^[a-zA-Z_$@][a-zA-Z0-9_$-]*/);
-    if (match) {
-      const word = match[0];
-      let type: Word['type'] = 'other';
-      let cls = `${preClass}-other`;
-
-      const nextCharMatch = remain.slice(word.length).match(/^\s*(.)/);
-      const nextChar = nextCharMatch ? nextCharMatch[1] : '';
-
-      if (keywordList.includes(word)) {
-        type = 'keyword';
-        cls = `${preClass}-keyword`;
-      } else if (builtInList.includes(word)) {
-        type = 'builtin';
-        cls = `${preClass}-builtin`;
-      } else if (prevWord === '.') {
-        type = 'attribute';
-        cls = `${preClass}-attribute`;
-      } else if (prevWord === '<' || prevWord === '</') {
-        type = 'keyword';
-        cls = `${preClass}-keyword`; // Tag name
-      } else if (nextChar === '(') {
-        type = 'function';
-        cls = `${preClass}-function`;
-      } else if (word.startsWith('v-') || word.startsWith('@')) {
-        type = 'keyword';
-        cls = `${preClass}-keyword`; // Vue directives
-      }
-
-      words.push({ word, type, class: cls });
-      prevWord = word;
-      remain = remain.slice(word.length);
-      continue;
-    }
-
-    // Numbers
-    match = remain.match(
-      /^(0[xX][0-9a-fA-F]+|\d*\.\d+([eE][+-]?\d+)?|\d+([eE][+-]?\d+)?|\d+n)/,
-    );
-    if (match) {
-      words.push({
-        word: match[0],
-        type: 'number',
-        class: `${preClass}-number`,
-      });
-      remain = remain.slice(match[0].length);
-      prevWord = '0';
-      continue;
-    }
-
-    // Multi-char symbols and Operators
-    match = remain.match(
-      /^(===|!==|==|!=|>=|<=|=>|\+\+|--|\+=|-=|\*=|\/=|\|\||&&|\?\.|<\/?|\/>|[{}()[\].,;:?+*/%&|^!=<>~#\\@])/,
-    );
-    if (match) {
-      const word = match[0];
-      let cls = `${preClass}-symbol`;
-      if (['<', '>', '(', ')', '{', '}', '[', ']'].includes(word[0])) {
-        cls = `${preClass}-bracket`;
-      } else if (operatorList.includes(word[0]) || word.length > 1) {
-        cls = `${preClass}-operator`;
-      }
-
-      words.push({ word, type: 'symbol', class: cls });
-      prevWord = word;
-      remain = remain.slice(word.length);
-      continue;
-    }
-
-    // Fallback one char
-    const word = remain[0];
-    words.push({ word, type: 'other', class: `${preClass}-other` });
-    prevWord = word;
-    remain = remain.slice(1);
-  }
-  return words;
-}
-
-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 type = getLineIndexType(index, {
-      tagRanges,
-      scriptRanges,
-      styleRanges,
-      noteRanges,
-    });
-
-    // 解析行之前的空格，为了保证准确的缩进格式
-    const spaceMatch = line.match(/^(\s*)/);
-    const spacePrefix = spaceMatch ? spaceMatch[0] : '';
-    const lineTrim = line.slice(spacePrefix.length);
-
-    const words: Word[] = [];
-    if (spacePrefix) {
-      // Chunk spaces by 2 to add indentation guide lines
-      for (let i = 0; i < spacePrefix.length; i += 2) {
-        words.push({
-          word: spacePrefix.slice(i, i + 2),
-          type: 'space',
-          class: `${preClass}-space`,
-        });
-      }
-    }
-
-    if (type === 'note') {
-      if (lineTrim) {
-        words.push({
-          word: lineTrim,
-          type: 'symbol',
-          class: `${preClass}-note`,
-        });
-      }
-    } else {
-      words.push(...tokenizeLine(lineTrim));
-    }
-
-    const lineInfo: LineInfo = { type, words, class: `${preClass}-${type}` };
-    return lineInfo;
-  });
-
-  return parseLine;
-}
+/** 操作符 */
+const operatorList = ['+', '-', '*', '/', '%', '=', '!', '&'];
+
+/** 关键字 */
+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',
+  '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',
+];
+
+/** 内置全局对象/类型 */
+const builtInList = [
+  'Object',
+  'Array',
+  'String',
+  'Number',
+  'Boolean',
+  'Promise',
+  'Math',
+  'JSON',
+  'Date',
+  'RegExp',
+  'Set',
+  'Map',
+  'Error',
+  'Symbol',
+];
+
+type Word = {
+  /** 字符 */
+  word: string;
+  /** css 样式 */
+  class: string;
+  /** 分类
+   * - space: 空格
+   * - bracket: 括号
+   * - quotation: 引号
+   * - string: 字符串
+   * - function: 函数
+   * - attribute: 属性
+   * - operator: 操作符
+   * - symbol: 符号
+   * - keyword: 关键字
+   * - number: 数字
+   * - builtin: 内置对象
+   * - other: 其他
+   */
+  type:
+    | 'space'
+    | 'bracket'
+    | 'quotation'
+    | 'string'
+    | 'function'
+    | 'attribute'
+    | 'operator'
+    | 'symbol'
+    | 'keyword'
+    | 'number'
+    | 'builtin'
+    | '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';
+}
+
+/**
+ * 将整行代码字符串分词，带有更精细的词法分析，大大减少DOM元素数量
+ */
+function tokenizeLine(lineStr: string): Word[] {
+  let remain = lineStr;
+  const words: Word[] = [];
+  let prevWord = '';
+
+  while (remain.length > 0) {
+    let match;
+
+    // Space
+    match = remain.match(/^(\s+)/);
+    if (match) {
+      // Use different class for inline spaces to prevent indent lines appearing in middle of code
+      words.push({
+        word: match[0],
+        type: 'space',
+        class: `${preClass}-space-inline`,
+      });
+      remain = remain.slice(match[0].length);
+      continue;
+    }
+
+    // Comment (inline)
+    match = remain.match(/^(\/\/.*)/);
+    if (match) {
+      words.push({ word: match[0], type: 'symbol', class: `${preClass}-note` });
+      remain = remain.slice(match[0].length);
+      continue;
+    }
+
+    // HTML Comment
+    match = remain.match(/^(<!--.*?-->|<!--.*|.*-->)/);
+    if (match) {
+      words.push({ word: match[0], type: 'symbol', class: `${preClass}-note` });
+      remain = remain.slice(match[0].length);
+      continue;
+    }
+
+    // Strings (with escapes)
+    match = remain.match(
+      /^("[^"\\]*(\\.[^"\\]*)*"|'[^'\\]*(\\.[^'\\]*)*'|`[^`\\]*(\\.[^`\\]*)*`)/,
+    );
+    if (match) {
+      words.push({
+        word: match[0],
+        type: 'string',
+        class: `${preClass}-string`,
+      });
+      remain = remain.slice(match[0].length);
+      prevWord = '""';
+      continue;
+    }
+
+    // Identifiers & Keywords
+    match = remain.match(/^[a-zA-Z_$@][a-zA-Z0-9_$-]*/);
+    if (match) {
+      const word = match[0];
+      let type: Word['type'] = 'other';
+      let cls = `${preClass}-other`;
+
+      const nextCharMatch = remain.slice(word.length).match(/^\s*(.)/);
+      const nextChar = nextCharMatch ? nextCharMatch[1] : '';
+
+      if (keywordList.includes(word)) {
+        type = 'keyword';
+        cls = `${preClass}-keyword`;
+      } else if (builtInList.includes(word)) {
+        type = 'builtin';
+        cls = `${preClass}-builtin`;
+      } else if (prevWord === '.') {
+        type = 'attribute';
+        cls = `${preClass}-attribute`;
+      } else if (prevWord === '<' || prevWord === '</') {
+        type = 'keyword';
+        cls = `${preClass}-keyword`; // Tag name
+      } else if (nextChar === '(') {
+        type = 'function';
+        cls = `${preClass}-function`;
+      } else if (word.startsWith('v-') || word.startsWith('@')) {
+        type = 'keyword';
+        cls = `${preClass}-keyword`; // Vue directives
+      }
+
+      words.push({ word, type, class: cls });
+      prevWord = word;
+      remain = remain.slice(word.length);
+      continue;
+    }
+
+    // Numbers
+    match = remain.match(
+      /^(0[xX][0-9a-fA-F]+|\d*\.\d+([eE][+-]?\d+)?|\d+([eE][+-]?\d+)?|\d+n)/,
+    );
+    if (match) {
+      words.push({
+        word: match[0],
+        type: 'number',
+        class: `${preClass}-number`,
+      });
+      remain = remain.slice(match[0].length);
+      prevWord = '0';
+      continue;
+    }
+
+    // Multi-char symbols and Operators
+    match = remain.match(
+      /^(===|!==|==|!=|>=|<=|=>|\+\+|--|\+=|-=|\*=|\/=|\|\||&&|\?\.|<\/?|\/>|[{}()[\].,;:?+*/%&|^!=<>~#\\@])/,
+    );
+    if (match) {
+      const word = match[0];
+      let cls = `${preClass}-symbol`;
+      if (['<', '>', '(', ')', '{', '}', '[', ']'].includes(word[0])) {
+        cls = `${preClass}-bracket`;
+      } else if (operatorList.includes(word[0]) || word.length > 1) {
+        cls = `${preClass}-operator`;
+      }
+
+      words.push({ word, type: 'symbol', class: cls });
+      prevWord = word;
+      remain = remain.slice(word.length);
+      continue;
+    }
+
+    // Fallback one char
+    const word = remain[0];
+    words.push({ word, type: 'other', class: `${preClass}-other` });
+    prevWord = word;
+    remain = remain.slice(1);
+  }
+  return words;
+}
+
+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 type = getLineIndexType(index, {
+      tagRanges,
+      scriptRanges,
+      styleRanges,
+      noteRanges,
+    });
+
+    // 解析行之前的空格，为了保证准确的缩进格式
+    const spaceMatch = line.match(/^(\s*)/);
+    const spacePrefix = spaceMatch ? spaceMatch[0] : '';
+    const lineTrim = line.slice(spacePrefix.length);
+
+    const words: Word[] = [];
+    if (spacePrefix) {
+      // Chunk spaces by 2 to add indentation guide lines
+      for (let i = 0; i < spacePrefix.length; i += 2) {
+        words.push({
+          word: spacePrefix.slice(i, i + 2),
+          type: 'space',
+          class: `${preClass}-space`,
+        });
+      }
+    }
+
+    if (type === 'note') {
+      if (lineTrim) {
+        words.push({
+          word: lineTrim,
+          type: 'symbol',
+          class: `${preClass}-note`,
+        });
+      }
+    } else {
+      words.push(...tokenizeLine(lineTrim));
+    }
+
+    const lineInfo: LineInfo = { type, words, class: `${preClass}-${type}` };
+    return lineInfo;
+  });
+
+  return parseLine;
+}