pug-site-core 2.0.22 → 3.0.1

package/lib/generate.js

@@ -1,5 +1,8 @@
 import fse from "fs-extra";
 import pug from "pug";
+import pugLexer from "pug-lexer";
+import pugParser from "pug-parser";
+import pugWalk from "pug-walk";
 import {
   getPagesPugFilePathArr,
   getCompilePugFilter,
@@ -13,8 +16,10 @@ import _ from "lodash";
 import async from "async";
 import UglifyJS from "uglify-js";
 import { paths } from "./paths.js";
+import path from "path";
 
 const { config } = await import(paths.config);
+
 /**
  * 将pages目录下的pug模板编译为JS函数
  * @param {string} pugPath - 指定编译的pug文件路径(相对于/template/pages)
@@ -51,7 +56,11 @@ export async function compilePagesPugToFn(pugPath) {
       10, // 限制并发数为10
       async (fileName) => {
         const filePath = paths.resolveRoot(paths.template.pages, fileName);
-        const funName = fileName.split(pathSymbol).join("_").slice(0, -4).replace(/[-]/g, "_");
+        const funName = fileName
+          .split(pathSymbol)
+          .join("_")
+          .slice(0, -4)
+          .replace(/[-]/g, "_");
 
         // 读取并编译pug文件
         const pugValue = await fse.readFile(filePath, "utf8");
@@ -141,7 +150,9 @@ export async function generateGetDataFn() {
     // 为每个页面注入数据获取函数
     await async.each(pagesPugFilePathArr, async (fileName) => {
       const funName =
-        "get_" + fileName.split(pathSymbol).join("_").slice(0, -4).replace(/[-]/g, "_") + "_data";
+        "get_" +
+        fileName.split(pathSymbol).join("_").slice(0, -4).replace(/[-]/g, "_") +
+        "_data";
 
       // 使用正则表达式检查特定的数据获取函数是否存在
       const dataFnRegex = new RegExp(
@@ -241,7 +252,7 @@ export async function fetchDataToJsonFile(args) {
     // 创建一个全局任务队列控制整体并发数
     const queue = async.queue(async (task) => {
       await task();
-    }, fetchDataConcurrencyLimit || 12);
+    }, fetchDataConcurrencyLimit || 3);
 
     // 收集所有需要执行的任务
     const allTasks = [];
@@ -263,6 +274,8 @@ export async function fetchDataToJsonFile(args) {
         allTasks.push(async () => {
           console.log(language, commonFuncName, "开始写入json文件");
           const commonData = await getData[commonFuncName](language);
+          let languageData = (await import(paths.languageData)).default[language];
+          commonData.lang = _.merge(commonData.lang, languageData);
           await fse.outputJSON(
             paths.resolveRoot("jsonData", language, "_common.json"),
             commonData
@@ -327,7 +340,9 @@ export async function fetchDataToJsonFile(args) {
       // 处理模板页面数据
       for (const fileName of pugFilePathList) {
         let funName =
-          "get_" + fileName.split(pathSymbol).join("_").slice(0, -4).replace(/[-]/g, "_") + "_data";
+          "get_" +
+          fileName.split(pathSymbol).join("_").slice(0, -4).replace(/[-]/g, "_") +
+          "_data";
 
         let jsonFilePath = fileName.slice(0, -4).split(pathSymbol);
         if (!getData[funName] || typeof getData[funName] !== "function") {
@@ -474,244 +489,758 @@ export async function buildFn() {
   console.log("打包完成花费:", (Date.now() - starTime) / 1000, "s");
 }
 
-//html文件打包 不维护了
+//html文件打包
 export async function buildStatic() {
   let jsonDataPath = paths.resolveRoot("jsonData");
 
-  if (!fse.pathExistsSync(jsonDataPath)) {
-    return Promise.reject(
-      new Error(jsonDataPath + "目录不存在请先执行npm run getData生成数据!")
-    );
-  }
   console.log("开始打包...");
   let starTime = Date.now();
   let distOutputPath = paths.resolveRoot(config.staticOutput);
-  await fse.remove(distOutputPath);
-  await sleep(0);
-  await fse.copy(paths.public, distOutputPath);
 
-  await fse.copy(
-    paths.template.static,
-    paths.resolveRoot(distOutputPath, "static"),
-    {
-      filter: (src, dest) => {
-        //根目录必须要返回true
-        if (src.endsWith("static")) {
-          return true;
+  /**
+   * 构建HTML文件路径
+   * @param {string} lang - 语言代码
+   * @param {string} outputPath - 输出路径
+   * @param {string} fileName - 文件名（可选）
+   * @returns {string} 完整的HTML文件路径
+   */
+  function buildHtmlPath(lang, outputPath, fileName = null) {
+    let htmlPath
+    try {
+      if (fileName) {
+        htmlPath = paths.resolveRoot(
+          distOutputPath,
+          lang,
+          outputPath.replace(
+            outputPath.split("/").pop().replace(/\..*$/, ""),
+            fileName.replace(/\..*$/, "")
+          )
+        );
+      } else {
+        htmlPath = paths.resolveRoot(distOutputPath, lang, outputPath);
+      }
+      console.log(htmlPath);
+      return htmlPath;
+    } catch (error) {
+      throw new Error(`构建HTML路径失败 [lang: ${lang}, outputPath: ${outputPath}, fileName: ${fileName}]: ${error.message}`);
+    }
+  }
+
+  /**
+   * 生成HTML内容
+   */
+  function generateHtml(pagesPugToFn, funName, data, pagePath, commonData) {
+    try {
+      if (!pagesPugToFn[funName]) {
+        throw new Error(`模板函数 ${funName} 不存在`);
+      }
+      
+      return pagesPugToFn[funName]({
+        data,
+        _pagePath: pagePath,
+        common: commonData,
+      });
+    } catch (error) {
+      throw new Error(`生成HTML失败 [funName: ${funName}, pagePath: ${pagePath}]: ${error.message}`);
+    }
+  }
+
+  /**
+   * 处理数组数据的HTML输出
+   */
+  async function processArrayData(pagesPugToFn, data, obj, funName, pagePath, commonData, lang) {
+    try {
+      const name = obj.outPutHtmlPath.split("/").pop().replace(/\..*$/, "");
+      const regex = /^\[.+\]$/;
+      
+      if (regex.test(name)) {
+        const property = name.slice(1, -1);
+        
+        await async.eachLimit(data, 12, async (dataItem, index) => {
+          try {
+            const fileName = dataItem[property];
+            if (!fileName) {
+              throw new Error(
+                `数据项索引 ${index} 中缺少属性 ${property} 或值为空`
+              );
+            }
+            
+            const htmlPath = buildHtmlPath(lang, obj.outPutHtmlPath, fileName);
+            const html = generateHtml(pagesPugToFn, funName, dataItem, pagePath, commonData);
+            await fse.outputFile(htmlPath, html);
+          } catch (error) {
+            throw new Error(`处理数组数据项失败 [index: ${index}, property: ${property}]: ${error.message}`);
+          }
+        });
+      } else {
+        const htmlPath = buildHtmlPath(lang, obj.outPutHtmlPath);
+        const html = generateHtml(pagesPugToFn, funName, data, pagePath, commonData);
+        await fse.outputFile(htmlPath, html);
+      }
+    } catch (error) {
+      throw new Error(`处理数组数据失败 [lang: ${lang}, getDataFn: ${obj.getDataFn}]: ${error.message}`);
+    }
+  }
+
+  /**
+   * 处理对象数据的HTML输出
+   */
+  async function processObjectData(pagesPugToFn, data, obj, funName, pagePath, commonData, lang) {
+    try {
+      const htmlPath = buildHtmlPath(lang, obj.outPutHtmlPath);
+      const html = generateHtml(pagesPugToFn, funName, data, pagePath, commonData);
+      await fse.outputFile(htmlPath, html);
+    } catch (error) {
+      throw new Error(`处理对象数据失败 [lang: ${lang}, getDataFn: ${obj.getDataFn}]: ${error.message}`);
+    }
+  }
+
+  /**
+   * 处理自定义HTML构建
+   */
+  async function processCustomBuildHtml(pagesPugToFn, lang, getData, commonData, dealWithEndFunName) {
+    if (!config.customBuildHtml?.length) return;
+
+    for (const obj of config.customBuildHtml) {
+      try {
+        // 检查语言过滤
+        if (obj.includeLang?.length > 0 && !obj.includeLang.includes(lang)) {
+          continue;
         }
-        if (config.buildStaticDirArr && config.buildStaticDirArr.length > 0) {
-          return !!config.buildStaticDirArr.find((item) => {
-            return src.startsWith(paths.resolveRoot(paths.template.static, item));
-          });
+
+        // 获取数据
+        if (!getData[obj.getDataFn] || typeof getData[obj.getDataFn] !== 'function') {
+          throw new Error(`数据获取函数 ${obj.getDataFn} 不存在或不是函数`);
         }
-        return true;
-      },
-    }
-  );
 
-  await compilePagesPugToFn();
-  let PagesPugToFn = await import(paths.pagesPugFn);
-  const getData = await import(paths.getData);
+        const data = await getData[obj.getDataFn](lang);
+        
+        // 处理路径和函数名
+        obj.inputPugPath = obj.inputPugPath.replace(/^\//, "");
+        const funName = obj.inputPugPath.split("/").join("_").slice(0, -4);
+        dealWithEndFunName.set(funName, 1);
+        const pagePath = obj.inputPugPath.replaceAll("/", pathSymbol);
 
-  const fileMapTable = config.fileMapTable;
-  await async.each(config.languageList, async (lang) => {
-    let langDataPath = paths.resolveRoot(jsonDataPath, lang);
-    if (!fse.pathExistsSync(langDataPath)) {
-      console.log(
-        `注意配置了${lang}语言但${langDataPath}中没有生成${lang}语言的数据!`
-      );
-      return;
+        // 根据数据类型处理
+        if (Array.isArray(data)) {
+          await processArrayData(pagesPugToFn, data, obj, funName, pagePath, commonData, lang);
+        } else if (typeof data === "object" && data !== null) {
+          await processObjectData(pagesPugToFn, data, obj, funName, pagePath, commonData, lang);
+        } else {
+          throw new Error(`数据类型不支持: ${typeof data}`);
+        }
+      } catch (error) {
+        throw new Error(`处理自定义HTML构建失败 [lang: ${lang}, config: ${JSON.stringify(obj)}]: ${error.message}`);
+      }
     }
-    let commonData = await fse.readJSON(
-      paths.resolveRoot("jsonData", lang, "_common.json")
-    );
-    commonData = _.merge(commonData, config.commonData);
-
-    if (fileMapTable && Array.isArray(fileMapTable)) {
-      await async.each(fileMapTable, async (obj) => {
-        if (
-          obj.pugPath &&
-          obj.getDataFn &&
-          obj.outPutPath &&
-          obj.outPutPath.endsWith(".html")
-        ) {
-          if (
-            obj.languageList &&
-            obj.languageList.length > 0 &&
-            !obj.languageList.includes(lang)
-          ) {
+  }
+
+  /**
+   * 处理页面JSON文件
+   */
+  async function processPageJsonFiles(pagesPugToFn, lang, langDataPath, commonData, dealWithEndFunName) {
+    try {
+      const pagesAllJsonFileName = (
+        await fse.readdir(langDataPath, { recursive: true })
+      ).filter((fileName) => fileName.endsWith(".json"));
+
+      await async.eachLimit(pagesAllJsonFileName, 12, async (jsonFileName) => {
+        try {
+          const data = await fse.readJSON(paths.resolveRoot(langDataPath, jsonFileName));
+          const pugTemplate = data._template;
+          
+          if (!pugTemplate) {
+            return;
+          }
+
+          const funName = pugTemplate.split(pathSymbol).join("_").slice(0, -4);
+          
+          if (dealWithEndFunName.has(funName)) {
             return;
           }
-          let langPrefix =
-            obj.languageList && obj.languageList.length > 0 ? lang : "";
-          let pugPathPreArr = [""];
-          if (obj.deviceList && obj.deviceList.length > 0) {
-            pugPathPreArr = obj.deviceList;
+
+          const html = generateHtml(pagesPugToFn, funName, data, pugTemplate, commonData);
+
+          // 构建输出路径
+          let finalPugTemplate = pugTemplate;
+          if (data.page_name) {
+            finalPugTemplate =
+              pugTemplate.split(pathSymbol).slice(0, -1).join(pathSymbol) +
+              pathSymbol +
+              data.page_name;
           }
-          await async.each(pugPathPreArr, async (devicePrefix) => {
-            let pugPath = paths.resolveRoot(
-              paths.template.pages,
-              langPrefix,
-              devicePrefix,
-              obj.pugPath.split("/").join(pathSymbol)
-            );
-            if (!fse.pathExistsSync(pugPath)) {
-              return Promise.reject(new Error(pugPath + "模版路径不存在"));
+
+          const htmlPath = paths.resolveRoot(
+            distOutputPath,
+            lang,
+            finalPugTemplate.replace(/\..*$/, ".html")
+          );
+          
+          await fse.outputFile(htmlPath, html);
+        } catch (error) {
+          throw new Error(`处理JSON文件失败 [file: ${jsonFileName}]: ${error.message}`);
+        }
+      });
+    } catch (error) {
+      throw new Error(`处理页面JSON文件失败 [lang: ${lang}]: ${error.message}`);
+    }
+  }
+
+  try {
+    const getData = await import(paths.getData);
+
+    // 清理并准备输出目录
+    await fse.remove(distOutputPath);
+    await sleep(0);
+    await fse.copy(paths.public, distOutputPath);
+
+    // 复制静态资源
+    await fse.copy(
+      paths.template.static,
+      paths.resolveRoot(distOutputPath, "static"),
+      {
+        filter: (src, dest) => {
+          //根目录必须要返回true
+          if (src.endsWith("static")) {
+            return true;
+          }
+          if (config.buildStaticDirArr && config.buildStaticDirArr.length > 0) {
+            return !!config.buildStaticDirArr.find((item) => {
+              return src.startsWith(paths.resolveRoot(paths.template.static, item));
+            });
+          }
+          return true;
+        },
+      }
+    );
+
+    // 编译PUG模板
+    await compilePagesPugToFn();
+    const PagesPugToFn = await import(paths.pagesPugFn);
+
+    // 处理每种语言
+    await async.each(config.languageList, async (lang) => {
+      try {
+        console.log("开始处理语言:", lang);
+        const langDataPath = paths.resolveRoot(jsonDataPath, lang);
+        
+        // 读取公共数据
+        let commonData;
+        try {
+          commonData = await fse.readJSON(
+            paths.resolveRoot("jsonData", lang, "_common.json")
+          );
+          commonData = _.merge(commonData, config.commonData);
+        } catch (error) {
+          throw new Error(`读取公共数据失败: ${error.message}`);
+        }
+
+        const dealWithEndFunName = new Map();
+
+        // 处理自定义HTML构建
+        await processCustomBuildHtml(PagesPugToFn, lang, getData, commonData, dealWithEndFunName);
+
+        // 处理页面JSON文件
+        await processPageJsonFiles(PagesPugToFn, lang, langDataPath, commonData, dealWithEndFunName);
+
+      } catch (error) {
+        throw new Error(`处理语言 ${lang} 失败: ${error.message}`);
+      }
+    });
+
+    // 混淆JavaScript文件（如果配置了）
+    if (config.obfuscateJavaScript) {
+      console.log("开始混淆js文件...");
+      const startTime = Date.now();
+      try {
+        await obfuscateJavaScript(paths.resolveRoot(distOutputPath, "static"));
+        const costTime = (Date.now() - startTime) / 1000;
+        console.log("混淆js文件耗时:", costTime, "s");
+      } catch (error) {
+        throw new Error(`混淆JavaScript文件失败: ${error.message}`);
+      }
+    }
+
+    console.log("打包完成花费:", (Date.now() - starTime) / 1000, "s");
+    
+  } catch (error) {
+    console.error("HTML文件打包失败:", error);
+    throw error;
+  }
+}
+
+/**
+ * 创建调试模板目录
+ * 复制template目录到template-debug并为所有pug文件添加调试属性
+ * @returns {Promise<void>}
+ */
+export async function createDebugTemplate() {
+  try {
+    console.log("开始创建调试模板目录...");
+
+    const sourceDir = paths.template.root;
+    const targetDir = paths.template.debug;
+
+    // 删除已存在的调试目录
+    if (await fse.pathExists(targetDir)) {
+      await fse.remove(targetDir);
+      console.log("已删除现有的调试目录");
+    }
+
+    // 复制整个 template 目录到 template-debug
+    await fse.copy(sourceDir, targetDir);
+    console.log(`已复制 ${sourceDir} 到 ${targetDir}`);
+
+    let languageData = (await import(paths.languageData)).default.us;
+
+    // 缓存语言路径检查结果，避免重复计算
+    const langPathCache = new Map();
+
+    /**
+     * 检查属性路径是否在languageData的us对象中存在
+     * @param {string} langPath - 属性路径，例如 "Store.about"
+     * @returns {boolean} 是否存在该属性
+     */
+    function checkLangPathExists(langPath) {
+      // 使用缓存提升性能
+      if (langPathCache.has(langPath)) {
+        return langPathCache.get(langPath);
+      }
+
+      try {
+        const keys = langPath.split(".");
+        let current = languageData;
+
+        for (const key of keys) {
+          if (current && typeof current === "object" && key in current) {
+            current = current[key];
+          } else {
+            langPathCache.set(langPath, false);
+            return false;
+          }
+        }
+
+        const isValid = typeof current === "string";
+        langPathCache.set(langPath, isValid);
+        return isValid;
+      } catch (error) {
+        langPathCache.set(langPath, false);
+        return false;
+      }
+    }
+
+    /**
+     * 检查是否是动态内容
+     * @param {string} code - 代码内容
+     * @returns {boolean} 是否包含动态数据
+     */
+    function isDynamicContent(code) {
+      // 更精确的动态内容检测
+      const dynamicPatterns = [
+        /\b(Math|Date|JSON|parseInt|parseFloat|Number|String|Array|Object)\b/,
+        /\b(data|item|index|info|common\.siteConfig)\b/,
+        /[+\-*/%]/,
+        /\brandom\b|\bfloor\b|\bceil\b|\bround\b/,
+        /\.\w+\(/, // 方法调用
+        /\$\{[^}]*[+\-*/%.][^}]*\}/, // 模板字符串中的计算
+      ];
+
+      return dynamicPatterns.some((pattern) => pattern.test(code));
+    }
+
+    /**
+     * 提取Pug节点中的common.lang引用
+     * @param {string} code - 代码内容
+     * @returns {string|null} 语言路径，如果不是common.lang引用则返回null
+     */
+    function extractLangPath(code) {
+      // 匹配 common.lang.xxx
+      const langMatch = code.match(/common\.lang\.(.+)/);
+      if (langMatch) {
+        return langMatch[1];
+      }
+
+      // 匹配 ${common.lang.xxx}
+      const templateLangMatch = code.match(/\$\{common\.lang\.([^}]+)\}/);
+      if (templateLangMatch) {
+        return templateLangMatch[1];
+      }
+
+      // 匹配带反引号的模板字符串 `${common.lang.xxx}`
+      const backquoteLangMatch = code.match(/`.*\$\{common\.lang\.([^}]+)\}.*`/);
+      if (backquoteLangMatch) {
+        return backquoteLangMatch[1];
+      }
+
+      return null;
+    }
+
+    /**
+     * 使用 pug-parser 和 pug-walk 分析 pug 文件中的标签
+     * @param {string} pugContent - pug 文件内容
+     * @param {string} filename - 文件名
+     * @returns {Map} 行号到标签信息的映射
+     */
+    function analyzeTagsFromPug(pugContent, filename) {
+      try {
+        const tokens = pugLexer(pugContent, { filename });
+        const ast = pugParser(tokens, { filename, src: pugContent });
+
+        const lineTagMap = new Map();
+
+        pugWalk(ast, function before(node) {
+          if (node.type === "Tag" && node.line) {
+            const tagInfo = {
+              tagName: node.name,
+              line: node.line,
+              isEditable: false,
+              editableValue: "true",
+              textContent: "",
+              langPath: "",
+              hasStaticText: false,
+              hasLangText: false,
+            };
+
+            // 分析标签的子节点来确定文本内容
+            if (node.block && node.block.nodes) {
+              for (const child of node.block.nodes) {
+                // 处理Text节点（静态文本）
+                if (child.type === "Text" && child.val && child.val.trim()) {
+                  // 检查是否在同一行还有其他动态内容
+                  const hasOtherDynamicNodes = node.block.nodes.some(
+                    (sibling) =>
+                      sibling !== child &&
+                      sibling.line === child.line &&
+                      (sibling.type === "Code" ||
+                        sibling.type === "InterpolatedTag") &&
+                      sibling.val &&
+                      isDynamicContent(sibling.val)
+                  );
+
+                  if (!hasOtherDynamicNodes) {
+                    tagInfo.hasStaticText = true;
+                    tagInfo.textContent = child.val.trim();
+                    tagInfo.isEditable = true;
+                  }
+                }
+
+                // 处理Code节点（插值表达式和代码块）
+                if (child.type === "Code" && child.val) {
+                  const langPath = extractLangPath(child.val);
+                  if (langPath && !isDynamicContent(child.val)) {
+                    if (checkLangPathExists(langPath)) {
+                      tagInfo.hasLangText = true;
+                      tagInfo.langPath = langPath;
+                      tagInfo.isEditable = true;
+                      // 转换为 [us][key1][key2] 格式
+                      const pathParts = langPath.split(".");
+                      tagInfo.editableValue = `us,${pathParts.join(",")}`;
+                    }
+                  }
+                }
+              }
             }
-            let dataFn = getData[obj.getDataFn];
-            if (!dataFn || typeof dataFn !== "function") {
-              return Promise.reject(new Error(obj.getDataFn + "获取数据函数不存在"));
+
+            // 检查节点本身是否有代码内容（对于!=语法）
+            if (node.code && node.code.val) {
+              const langPath = extractLangPath(node.code.val);
+              if (langPath && !isDynamicContent(node.code.val)) {
+                if (checkLangPathExists(langPath)) {
+                  tagInfo.hasLangText = true;
+                  tagInfo.langPath = langPath;
+                  tagInfo.isEditable = true;
+                  // 转换为 us,key1,key2 格式
+                  const pathParts = langPath.split(".");
+                  tagInfo.editableValue = `us,${pathParts.join(",")}`;
+                }
+              }
             }
-            let data = await dataFn(lang);
-            if (!data) {
-              return Promise.reject(new Error(dataFn + "获取的数据为null!"));
+
+            // 将标签信息添加到行映射中
+            if (!lineTagMap.has(node.line)) {
+              lineTagMap.set(node.line, []);
             }
-            let outPutPath = obj.outPutPath.split("/").join(pathSymbol);
-            let htmlPath;
-            let html;
-            if (Array.isArray(data)) {
-              let name = outPutPath.split(pathSymbol).pop().replace(/\..*$/, "");
-              const regex = /^\[.+\]$/;
-              if (regex.test(name)) {
-                let property = name.slice(1, -1);
-                for (let index = 0; index < data.length; index++) {
-                  const dataItem = data[index];
-                  let fileName = dataItem[property];
-                  if (
-                    fileName === null ||
-                    fileName === undefined ||
-                    fileName === ""
-                  ) {
-                    return Promise.reject(
-                      new Error(
-                        dataFn +
-                          "获取的数据中期望以" +
-                          property +
-                          `命名但是${index}下标中对象${property}属性为:${fileName}`
-                      )
-                    );
-                  }
-                  htmlPath = paths.resolveRoot.join(
-                    distOutputPath,
-                    lang,
-                    devicePrefix,
-                    outPutPath.replace(name, fileName)
+            lineTagMap.get(node.line).push(tagInfo);
+          }
+        });
+
+        return lineTagMap;
+      } catch (error) {
+        console.error(`分析 pug 文件 ${filename} 时出错:`, error);
+        return new Map();
+      }
+    }
+
+    /**
+     * 为 pug 文件内容添加调试属性
+     * @param {string} pugContent - pug 文件内容
+     * @param {string} relativePath - 文件相对路径
+     * @param {string} filename - 文件名
+     * @returns {string} 处理后的 pug 内容
+     */
+    function addDebugAttributesToPug(pugContent, relativePath, filename) {
+      try {
+        const lines = pugContent.split("\n");
+        const lineTagMap = analyzeTagsFromPug(pugContent, filename);
+
+        // 定义不需要添加调试属性的标签
+        const excludeTags = new Set([
+          "head",
+          "title",
+          "meta",
+          "link",
+          "html",
+          "style",
+          "script",
+          "base",
+          "noscript",
+          "template",
+        ]);
+
+        // 处理每一行
+        const processedLines = lines.map((line, index) => {
+          const lineNumber = index + 1;
+          const tagsInLine = lineTagMap.get(lineNumber);
+
+          if (!tagsInLine || tagsInLine.length === 0) {
+            return line;
+          }
+
+          // 过滤掉不需要处理的标签
+          const visibleTags = tagsInLine.filter(
+            (tag) => !excludeTags.has(tag.tagName.toLowerCase())
+          );
+
+          if (visibleTags.length === 0) {
+            return line;
+          }
+
+          // 对于每个标签，添加调试属性
+          let processedLine = line;
+
+          // 只处理第一个标签，避免处理插值表达式中的内容
+          const mainTag = visibleTags[0];
+
+          if (mainTag) {
+            // 构建调试属性
+            const debugAttrs = [
+              `data-debug-file="${relativePath}"`,
+              `data-debug-line="${lineNumber}"`,
+            ];
+
+            // 只有可编辑的元素才添加 data-debug-editable 属性
+            if (mainTag.isEditable) {
+              debugAttrs.push(`data-debug-editable="${mainTag.editableValue}"`);
+            }
+
+            const debugAttrsString = debugAttrs.join(", ");
+
+            // 简化的标签处理逻辑
+            const trimmedLine = line.trim();
+
+            // 处理隐式 div（.class 或 #id 语法）
+            if (trimmedLine.startsWith(".") || trimmedLine.startsWith("#")) {
+              const indent = line.match(/^\s*/)[0];
+
+              // 找到选择器结束的位置
+              let selectorEndIndex = 1;
+              while (
+                selectorEndIndex < trimmedLine.length &&
+                /[\w-]/.test(trimmedLine[selectorEndIndex])
+              ) {
+                selectorEndIndex++;
+              }
+
+              // 检查是否已经有属性括号
+              const afterSelector = trimmedLine.substring(selectorEndIndex);
+              const parenIndex = afterSelector.indexOf("(");
+
+              if (parenIndex !== -1) {
+                // 已经有属性括号
+                const beforeParen = trimmedLine.substring(
+                  0,
+                  selectorEndIndex + parenIndex + 1
+                );
+                const afterFirstParen = trimmedLine.substring(
+                  selectorEndIndex + parenIndex + 1
+                );
+                const lastParenIndex = afterFirstParen.lastIndexOf(")");
+
+                if (lastParenIndex !== -1) {
+                  const existingAttrs = afterFirstParen.substring(0, lastParenIndex);
+                  const afterLastParen = afterFirstParen.substring(lastParenIndex);
+
+                  const separator = existingAttrs.trim() ? ", " : "";
+                  processedLine = `${indent}${beforeParen}${existingAttrs}${separator}${debugAttrsString}${afterLastParen}`;
+                }
+              } else {
+                // 没有属性括号，在选择器后添加
+                const selector = trimmedLine.substring(0, selectorEndIndex);
+                const afterAttrs = trimmedLine.substring(selectorEndIndex);
+
+                processedLine = `${indent}${selector}(${debugAttrsString})${afterAttrs}`;
+              }
+            }
+            // 处理普通标签
+            else if (trimmedLine.startsWith(mainTag.tagName)) {
+              const indent = line.match(/^\s*/)[0];
+
+              // 找到标签名和修饰符的结束位置
+              const tagEndIndex = findTagEnd(mainTag.tagName, trimmedLine);
+              const afterTag = trimmedLine.substring(tagEndIndex);
+
+              if (afterTag.startsWith("(")) {
+                // 已经有属性括号，需要找到正确的结束位置
+                const parenEnd = findMatchingParen(trimmedLine, tagEndIndex);
+
+                if (parenEnd !== -1) {
+                  const tagWithModifiers = trimmedLine.substring(0, tagEndIndex);
+                  const existingAttrs = trimmedLine.substring(
+                    tagEndIndex + 1,
+                    parenEnd
                   );
-                  html = pug.compileFile(pugPath, {
-                    basedir: paths.template.root,
-                    compileDebug: true,
-                    filters: getCompilePugFilter(),
-                  })({
-                    data: dataItem,
-                    _pagePath: obj.pugPath,
-                    common: commonData,
-                  });
-                  fse.ensureFileSync(htmlPath);
-                  await fse.writeFile(htmlPath, html);
+                  const remaining = trimmedLine.substring(parenEnd + 1);
+
+                  const separator = existingAttrs.trim() ? ", " : "";
+                  processedLine = `${indent}${tagWithModifiers}(${existingAttrs}${separator}${debugAttrsString})${remaining}`;
                 }
               } else {
-                htmlPath = paths.resolveRoot(
-                  paths.template.root,
-                  lang,
-                  devicePrefix,
-                  outPutPath
-                );
-                html = pug.compileFile(pugPath, {
-                  basedir: paths.template.root,
-                  compileDebug: true,
-                  filters: getCompilePugFilter(),
-                })({
-                  data,
-                  _pagePath: obj.pugPath,
-                  common: commonData,
-                });
-                fse.ensureFileSync(htmlPath);
-                await fse.writeFile(htmlPath, html);
+                // 没有属性括号，添加新的属性括号
+                const tagWithModifiers = trimmedLine.substring(0, tagEndIndex);
+                const remaining = trimmedLine.substring(tagEndIndex);
+
+                processedLine = `${indent}${tagWithModifiers}(${debugAttrsString})${remaining}`;
               }
-            } else if (typeof data === "object") {
-              htmlPath = paths.resolveRoot(
-                distOutputPath,
-                lang,
-                devicePrefix,
-                outPutPath
-              );
-              html = pug.compileFile(pugPath, {
-                basedir: paths.template.root,
-                compileDebug: true,
-                filters: getCompilePugFilter(),
-              })({
-                data,
-                _pagePath: obj.pugPath,
-                common: commonData,
-              });
-              fse.ensureFileSync(htmlPath);
-              await fse.writeFile(htmlPath, html);
             }
-          });
-        }
-      });
-    }
+          }
+
+          return processedLine;
+        });
 
-    let pagesAllJsonFileName = (
-      await fse.readdir(langDataPath, {
-        recursive: true,
-      })
-    ).filter((fileName) => fileName.endsWith(".json"));
-    await async.eachLimit(pagesAllJsonFileName, 64, async (jsonFileName) => {
-      let data = await fse.readJSON(paths.resolveRoot(langDataPath, jsonFileName));
-      let pugTemplateArr = data._template;
-      if (!pugTemplateArr) {
-        return;
+        return processedLines.join("\n");
+      } catch (error) {
+        console.error(`处理 pug 文件 ${filename} 时出错:`, error);
+        return pugContent;
       }
-      let flag = false;
+    }
 
-      let curLangPugTem = data._template.find((item) => {
-        let lang2 = item.split(pathSymbol)[0];
-        if (config.languageList.includes(lang2) && lang === lang2) {
-          return true;
-        }
-      });
-      if (curLangPugTem) {
-        flag = true;
-        pugTemplateArr = [curLangPugTem];
-      } else {
-        //没有特殊模版的语言排除其他语言的特殊模版
-        pugTemplateArr = data._template.filter((item) => {
-          let lang2 = item.split(pathSymbol)[0];
-          if (config.languageList.includes(lang2)) {
-            return false;
+    /**
+     * 找到标签名和修饰符的结束位置
+     * @param {string} tagName - 标签名
+     * @param {string} line - 行内容
+     * @returns {number} 结束位置索引
+     */
+    function findTagEnd(tagName, line) {
+      let index = tagName.length;
+
+      // 跳过类名和ID修饰符
+      while (index < line.length) {
+        const char = line[index];
+        if (char === "." || char === "#") {
+          index++;
+          while (index < line.length && /[\w-]/.test(line[index])) {
+            index++;
           }
-          return true;
-        });
+        } else {
+          break;
+        }
       }
 
-      await async.each(pugTemplateArr, (pugTemplate, callback) => {
-        let funName = pugTemplate.split(pathSymbol).join("_").slice(0, -4);
-        if (flag) {
-          pugTemplate = pugTemplate.split(pathSymbol).slice(1).join(pathSymbol);
+      return index;
+    }
+
+    /**
+     * 找到匹配的右括号
+     * @param {string} str - 字符串
+     * @param {number} start - 开始位置
+     * @returns {number} 匹配括号的位置，-1表示未找到
+     */
+    function findMatchingParen(str, start) {
+      let depth = 0;
+      let i = start;
+      let inString = false;
+      let stringChar = "";
+
+      while (i < str.length) {
+        const char = str[i];
+
+        // 处理字符串内容，避免字符串中的括号影响匹配
+        if (!inString && (char === '"' || char === "'" || char === "`")) {
+          inString = true;
+          stringChar = char;
+        } else if (inString && char === stringChar && str[i - 1] !== "\\") {
+          inString = false;
+          stringChar = "";
+        } else if (!inString) {
+          if (char === "(") {
+            depth++;
+          } else if (char === ")") {
+            depth--;
+            if (depth === 0) {
+              return i;
+            }
+          }
         }
-        let html = PagesPugToFn[funName]({
-          data,
-          _pagePath: pugTemplate,
-          common: commonData,
-        });
-        if (data.page_name) {
-          pugTemplate =
-            pugTemplate.split(pathSymbol).slice(0, -1).join(pathSymbol) +
-            pathSymbol +
-            data.page_name;
+        i++;
+      }
+
+      return -1; // 没有找到匹配的括号
+    }
+
+    /**
+     * 递归处理目录中的所有 pug 文件
+     * @param {string} dir - 目录路径
+     * @param {string} baseDir - 基础目录路径（用于计算相对路径）
+     */
+    async function processPugFilesInDirectory(dir, baseDir) {
+      try {
+        const files = await fse.readdir(dir);
+
+        for (const file of files) {
+          const fullPath = path.join(dir, file);
+          const stats = await fse.stat(fullPath);
+
+          if (stats.isDirectory()) {
+            // 递归处理子目录
+            await processPugFilesInDirectory(fullPath, baseDir);
+          } else if (file.endsWith(".pug")) {
+            // 处理 pug 文件
+            try {
+              const relativePath = path
+                .relative(baseDir, fullPath)
+                .replace(/\\/g, "/");
+              const pugContent = await fse.readFile(fullPath, "utf8");
+
+              console.log(`正在处理: ${relativePath}`);
+
+              const processedContent = addDebugAttributesToPug(
+                pugContent,
+                relativePath,
+                file
+              );
+
+              // 写回处理后的内容
+              await fse.writeFile(fullPath, processedContent, "utf8");
+
+              console.log(`已处理: ${relativePath}`);
+            } catch (error) {
+              console.error(`处理文件 ${fullPath} 时出错:`, error);
+            }
+          }
         }
-        let htmlPath = paths.resolveRoot(
-          distOutputPath,
-          lang,
-          pugTemplate.replace(/\..*$/, ".html")
-        );
-        fse.ensureFileSync(htmlPath);
-        const writeStream = fse.createWriteStream(htmlPath);
-        writeStream.write(html);
-        writeStream.end(callback);
-      });
-    });
-  });
-  console.log("打包完成花费:", (Date.now() - starTime) / 1000, "s");
+      } catch (error) {
+        console.error(`处理目录 ${dir} 时出错:`, error);
+      }
+    }
+
+    // 开始处理调试目录中的所有 pug 文件
+    console.log("开始为 pug 文件添加调试属性...");
+    await processPugFilesInDirectory(targetDir, targetDir);
+
+    console.log("调试模板目录创建完成！");
+    console.log(`调试模板位置: ${targetDir}`);
+  } catch (error) {
+    console.error("创建调试模板时出错:", error);
+    throw error;
+  }
 }