vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{SourceCode → DevTool/components/SourceCode}/parseCode.ts

@@ -1,701 +1,609 @@
-/** 行前空格匹配 */
-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',
-  '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';
-}
-
-/**
- * 获取代码中的单词信息
- *
- * 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 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 isFunc =
-      (words?.[index - 1] === ' ' && words?.[index - 2] === 'function') ||
-      words?.[index + 1] === '(' ||
-      (words?.[index + 1] === ' ' && words?.[index + 2] === '(');
-    if (isFunc && !keywordList.includes(w)) {
-      return {
-        word: w,
-        type: 'function',
-        class: `${preClass}-function`,
-      };
-    }
-
-    // 属性提取
-    const preW = symbolList.includes(words?.[index - 1]);
-    const isAttribute =
-      (words?.[index + 1] === '.' || (words?.[index - 1] === '.' && !preW)) &&
-      !isNumber;
-    if (isAttribute) {
-      return {
-        word: w,
-        type: 'attribute',
-        class: `${preClass}-attribute`,
-      };
-    }
-
-    // 关键字
-    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) {
-      return {
-        word: w,
-        type: 'operator',
-        class: `${preClass}-operator`,
-      };
-    }
-
-    // 符号
-    const isSymbol = symbolList.includes(w);
-    if (isSymbol) {
-      return {
-        word: w,
-        type: 'symbol',
-        class: `${preClass}-symbol`,
-      };
-    }
-
-    // 其他
-    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;
-}
+/** 操作符 */
+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;
+}