gypsy-crm-frontend-vu/utils/emailAdapter.js

/**
 * UniApp APP 邮件模板适配器
 * 适用于 cwg-rich-text 组件展示邮件内容
 * rich-text组件对HTML支持有限，需要简化处理
 * @param {string} html - 原始邮件HTML字符串
 * @returns {string} - 适配后的HTML字符串
 */
export function adaptCWGEmailForUniApp(html) {
  if (!html || typeof html !== 'string') return '';

  let result = html;

  // ==============================================
  // 1. 【修复HTML语法错误】处理不规范的标签
  // ==============================================
  // 修复 <img ... / style="..."> 的问题 - 移除斜杠后的空格
  result = result.replace(/<img([^>]*?)\s*\/\s*style=/gi, '<img$1 style=');

  // ==============================================
  // 2. 【宽度适配】修复640px固定宽度导致的横向滚动问题
  // ==============================================
  // 将最外层的width:640px改为100%
  result = result.replace(/<div\s+style="([^"]*?)width:\s*640px([^"]*?)"/gi, function (_, before, after) {
    return `<div style="${before}width:100%;max-width:640px;margin:0 auto;${after}"`;
  });

  // 处理内联样式中的width:640px
  result = result.replace(/width:\s*640px/gi, 'width:100%;max-width:640px');

  // ==============================================
  // 3. 【图片响应式】确保所有图片自适应
  // ==============================================
  result = result.replace(/<img([^>]*?)>/gi, function (match, attrs) {
    // 提取现有样式
    const styleMatch = attrs.match(/style=["']([^"']*)["']/i);
    let existingStyle = styleMatch ? styleMatch[1] : '';

    // 添加响应式样式
    let newStyle = existingStyle;

    // 确保样式末尾有分号
    if (newStyle && !newStyle.endsWith(';')) {
      newStyle += ';';
    }

    // 添加缺失的样式
    if (!existingStyle.includes('max-width')) {
      newStyle += 'max-width:100%;';
    }
    if (!existingStyle.includes('height:')) {
      newStyle += 'height:auto;';
    }
    if (!existingStyle.includes('display:')) {
      newStyle += 'display:block;';
    }

    // 移除多余的分号
    newStyle = newStyle.replace(/;;+/g, ';');

    if (styleMatch) {
      return match.replace(/style=["']([^"']*)["']/i, `style="${newStyle}"`);
    } else {
      // 确保标签正确闭合
      if (attrs.trim().endsWith('/')) {
        return `<img${attrs.replace(/\s*\/$/, '')} style="${newStyle}" />`;
      } else {
        return `<img${attrs} style="${newStyle}" />`;
      }
    }
  });

  // ==============================================
  // 4. 【容器适配】移除大尺寸固定宽度限制
  // ==============================================
  result = result.replace(/style="([^"]*?)width:\s*(\d+)px([^"]*?)"/gi, function (match, before, width, after) {
    // 保留小尺寸的宽度（如logo等），只处理大尺寸
    if (parseInt(width) > 200) {
      let newStyle = `${before}width:100%;max-width:${width}px;${after}`;
      newStyle = newStyle.replace(/;;+/g, ';');
      return `style="${newStyle}"`;
    }
    return match;
  });

  // ==============================================
  // 5. 【清理多余分号】修复样式中的双分号问题
  // ==============================================
  result = result.replace(/style="([^"]*)"/gi, function (_, style) {
    return `style="${style.replace(/;;+/g, ';').replace(/;$/, '')}"`;
  });

  // ==============================================
  // 6. 【修复特殊字符】处理HTML实体
  // ==============================================
  result = result.replace(/&rsquo;/g, "'");
  result = result.replace(/&nbsp;/g, ' ');
  result = result.replace(/&amp;/g, '&');

  // ==============================================
  // 7. 【移除script/style标签】rich-text不支持
  // ==============================================
  result = result.replace(/<script[\s\S]*?<\/script>/gi, '');
  result = result.replace(/<style[\s\S]*?<\/style>/gi, '');

  // ==============================================
  // 8. 【简化标签】移除rich-text不支持的标签
  // ==============================================
  // 移除HTML文档结构标签
  result = result.replace(/<\/?html[^>]*>/gi, '');
  result = result.replace(/<\/?head[^>]*>/gi, '');
  result = result.replace(/<\/?body[^>]*>/gi, '');
  result = result.replace(/<meta[^>]*>/gi, '');
  result = result.replace(/<!DOCTYPE[^>]*>/gi, '');

  // ==============================================
  // 9. 【添加内联样式包装】确保容器不溢出
  // ==============================================
  result = `
    <div style="width:100%;max-width:640px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;">
      <div style="padding:8px;">
        ${result}
      </div>
    </div>
  `;

  return result;
}