isdata-customer-sdk 0.1.95 → 0.1.97

package/dist/index.umd.js

@@ -29615,6 +29615,7 @@ __webpack_require__.d(__webpack_exports__, {
   getUserID: function() { return /* reexport */ getUserID; },
   hasListener: function() { return /* reexport */ hasListener; },
   i18n: function() { return /* reexport */ i18n; },
+  initDomNodeI18NObserver: function() { return /* reexport */ initDomNodeI18NObserver; },
   initEventCenter: function() { return /* reexport */ initEventCenter; },
   initFrameWindowListener: function() { return /* reexport */ initFrameWindowListener; },
   loadi18nTexts: function() { return /* reexport */ loadi18nTexts; },
@@ -33097,6 +33098,10 @@ const dify_extractFilenameFromUrl = url => {
 };
 ;// ./src/api/i18n.js
 
+
+
+
+
 const getLanguages = async appID => {
   let queryData = {
     param: {
@@ -33124,6 +33129,265 @@ const loadi18nTexts = async appID => {
     window.customI18nObject.set(`${appID}-${item.key}-${item.lang}`, item.value);
   }
 };
+
+/**
+ * 检查元素是否有子DOM元素
+ * @param {HTMLElement} element - 要检查的DOM元素
+ * @returns {boolean} - 是否有子元素
+ */
+function hasChildElements(element) {
+  return element.children.length > 0;
+}
+
+/**
+ * 检查文本是否匹配$L{...}格式
+ * @param {string} text - 要检查的文本
+ * @returns {Object|null} - 匹配结果或null
+ */
+function checkTextFormat(text) {
+  if (!text) return null;
+  const regex = /\$L\{([^}]+)\}/;
+  const match = text.match(regex);
+  if (match) {
+    return {
+      fullMatch: match[0],
+      key: match[1]
+    };
+  }
+  return null;
+}
+function generateUniqueId() {
+  window.idCounter = window.idCounter || 0;
+  return `i18n_${Date.now()}_${window.idCounter++}`;
+}
+
+// 处理单个DOM元素的函数
+function processElement(element) {
+  if (element.nodeType != 1) {
+    return false;
+  }
+  // 如果元素有子元素，则不处理innerHTML
+  const hasChildren = hasChildElements(element);
+  if (hasChildren) {
+    let children = element.children;
+    for (let i = 0; i < children.length; i++) {
+      processElement(children[i]);
+    }
+    // 检查是否是input元素
+    const isButtonElement = element.tagName === "BUTTON";
+    if (!isButtonElement) {
+      return false;
+    }
+  }
+  // element.setAttribute("i18nProcessed", "true"); // 标记元素已被处理
+  // 检查是否是input元素
+  const isInputElement = element.tagName === "INPUT";
+  // 检查placeholder是否匹配
+  const placeholder = element.getAttribute("placeholder") || element.placeholder;
+  const placeholderMatch = isInputElement && placeholder ? checkTextFormat(placeholder) : null;
+
+  // 检查value是否匹配（仅对按钮类型的input）
+  const value = element.getAttribute("value") || element.value;
+  const valueMatch = isInputElement && value ? checkTextFormat(value) : null;
+
+  // 检查innerHTML是否匹配（仅对没有子元素的元素）
+  let innerHTMLMatch = null;
+  // if (!hasChildren) {
+  const innerHTML = element.innerHTML;
+  innerHTMLMatch = checkTextFormat(innerHTML);
+  // }
+
+  // 如果没有匹配的内容，则不处理
+  if (!placeholderMatch && !valueMatch && !innerHTMLMatch) {
+    return false;
+  }
+  const elementId = generateUniqueId();
+  element.setAttribute("localDomID", elementId);
+  console.log("处理元素:", element, {
+    placeholderMatch,
+    valueMatch,
+    innerHTMLMatch
+  });
+  // 处理placeholder
+  if (placeholderMatch) {
+    element.setAttribute("localPlaceholderKey", placeholderMatch.key);
+    element.setAttribute("oldPlaceholderValue", placeholder);
+  }
+
+  // 处理value
+  if (valueMatch) {
+    element.setAttribute("localValueKey", valueMatch.key);
+    element.setAttribute("oldValueValue", value);
+  }
+
+  // 处理innerHTML（仅对没有子元素的元素）
+  if (innerHTMLMatch) {
+    element.setAttribute("localKey", innerHTMLMatch.key);
+    element.setAttribute("oldValue", element.innerHTML);
+  }
+
+  // 添加到Map缓存
+  window.i18nElementsMap.set(elementId, {
+    dom: element,
+    id: elementId,
+    key: innerHTMLMatch ? innerHTMLMatch.key : null,
+    placeholderKey: placeholderMatch ? placeholderMatch.key : null,
+    valueKey: valueMatch ? valueMatch.key : null,
+    oldValue: innerHTMLMatch ? element.innerHTML : null,
+    oldPlaceholderValue: placeholderMatch ? placeholder : null,
+    oldValueValue: valueMatch ? value : null,
+    isInputElement: isInputElement
+    // hasChildren: hasChildren,
+  });
+  applyTranslation(element);
+  return true;
+}
+function unProcessElement(node) {
+  if (node.nodeType !== 1) {
+    return;
+  }
+  const hasChildren = hasChildElements(element);
+  if (hasChildren) {
+    let children = element.children;
+    for (let i = 0; i < children.length; i++) {
+      unProcessElement(children[i]);
+    }
+  }
+  const localDomID = node.getAttribute("localDomID");
+  if (localDomID && window.i18nElementsMap.has(localDomID)) {
+    window.i18nElementsMap.delete(localDomID);
+    console.log("移除元素缓存:", localDomID);
+  }
+}
+
+/**
+ * 应用翻译到单个元素
+ * @param {HTMLElement} element - 要更新的DOM元素
+ * @param {string} lang - 语言标识符
+ */
+const applyTranslation = async element => {
+  let lang = window.localStorage.getItem("iportal_localID") || "zh-CN";
+  let appID = getPoratlAppID();
+  const elementId = element.getAttribute("localDomID");
+  const cachedItem = window.i18nElementsMap.get(elementId);
+  if (!cachedItem) return;
+  // 处理placeholder（如果是input元素）
+  if (cachedItem.isInputElement && cachedItem.placeholderKey) {
+    const placeholderKey = element.getAttribute("localPlaceholderKey");
+    const oldPlaceholderValue = element.getAttribute("oldPlaceholderValue");
+    if (placeholderKey && oldPlaceholderValue) {
+      // 创建正则表达式匹配所有 $L{...} 格式
+      const regex = /\$L\{([^}]+)\}/g;
+      // 替换所有 $L{...} 占位符为翻译文本
+      let newPlaceholderValue = oldPlaceholderValue;
+      let match;
+      while ((match = regex.exec(oldPlaceholderValue)) !== null) {
+        const fullMatch = match[0];
+        const placeholderKey = match[1];
+        const translation = i18n(placeholderKey, appID, lang);
+        newPlaceholderValue = newPlaceholderValue.replace(fullMatch, translation);
+      }
+      // 更新元素的placeholder属性
+      element.setAttribute("placeholder", newPlaceholderValue);
+    }
+  }
+
+  // 处理value（如果是input元素）
+  if (cachedItem.isInputElement && cachedItem.valueKey) {
+    const valueKey = element.getAttribute("localValueKey");
+    const oldValueValue = element.getAttribute("oldValueValue");
+    if (valueKey && oldValueValue) {
+      // 创建正则表达式匹配所有 $L{...} 格式
+      const regex = /\$L\{([^}]+)\}/g;
+
+      // 替换所有 $L{...} 占位符为翻译文本
+      let newValueValue = oldValueValue;
+      let match;
+      while ((match = regex.exec(oldValueValue)) !== null) {
+        const fullMatch = match[0];
+        const valueKey = match[1];
+        const translation = i18n(valueKey, appID, lang);
+        newValueValue = newValueValue.replace(fullMatch, translation);
+      }
+
+      // 更新元素的value属性
+      element.setAttribute("value", newValueValue);
+    }
+  }
+
+  // 处理innerHTML
+  if (cachedItem.key) {
+    const key = element.getAttribute("localKey");
+    const oldValue = element.getAttribute("oldValue");
+    if (key && oldValue) {
+      // 创建正则表达式匹配所有 $L{...} 格式
+      const regex = /\$L\{([^}]+)\}/g;
+
+      // 替换所有 $L{...} 占位符为翻译文本
+      let newValue = oldValue;
+      let match;
+      while ((match = regex.exec(oldValue)) !== null) {
+        const fullMatch = match[0];
+        const placeholderKey = match[1];
+        const translation = i18n(placeholderKey, appID, lang);
+        newValue = newValue.replace(fullMatch, translation);
+      }
+
+      // 更新元素的innerHTML
+      element.innerHTML = newValue;
+    }
+  }
+};
+const initDomNodeI18NObserver = () => {
+  if (!window.i18nElementsMap) {
+    window.i18nElementsMap = new Map();
+  } else {
+    window.i18nElementsMap.clear();
+  }
+  registerEventListener("IPORTAL_LANGUAGE_CHANGE_EVENT", async lang => {
+    console.log("语言切换事件触发，更新已处理元素的翻译:", lang);
+    // 遍历Map，更新每个已处理元素的翻译
+    for (const [elementId, item] of window.i18nElementsMap.entries()) {
+      applyTranslation(item.dom);
+    }
+  });
+  // 创建观察器实例
+  const observer = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+      // 节点添加
+      if (mutation.addedNodes.length > 0) {
+        // console.log("检测到新增节点:", mutation.addedNodes);
+        for (let i = 0; i < mutation.addedNodes.length; i++) {
+          const node = mutation.addedNodes[i];
+          processElement(node);
+        }
+      }
+
+      // 节点移除
+      if (mutation.removedNodes.length > 0) {
+        for (let i = 0; i < mutation.removedNodes.length; i++) {
+          const node = mutation.removedNodes[i];
+          unProcessElement(node);
+        }
+      }
+    });
+  });
+
+  // 配置观察选项
+  const config = {
+    childList: true,
+    // 观察子节点变化
+    subtree: true,
+    // 观察所有后代节点
+    attributes: false,
+    // 不观察属性变化
+    characterData: false // 不观察文本内容变化
+  };
+  // 开始观察目标节点
+  const targetNode = document.body;
+  processElement(targetNode);
+  observer.observe(targetNode, config);
+};
 ;// ./src/main.js