yss-project/fix-placeholder-images.js

const fs = require('fs');
const path = require('path');

// 定义要替换的目录
const srcDir = path.join(__dirname, 'src');

// 定义要搜索的文件扩展名
const fileExtensions = ['.ts', '.html'];

// 修复HTML文件中的placeholder链接
function fixHtmlPlaceholders(fileContent) {
  let modifiedContent = fileContent;
  let replacementCount = 0;

  // 正则表达式匹配img标签中的via.placeholder.com链接
  const imgPlaceholderRegex = /<img\s+src="https:\/\/via\.placeholder\.com\/(\d+)x(\d+)\/([0-9A-Fa-f]+)\/([0-9A-Fa-f]+)\?text=([^"']*)"\s+alt="([^"]*)"\s+class="([^"]*)"\s*\/?>/g;

  // 替换匹配的img标签为div元素
  modifiedContent = modifiedContent.replace(imgPlaceholderRegex, (match, width, height, bgColor, textColor, text, alt, className) => {
    replacementCount++;
    
    // 返回一个带有内联样式的div元素，保留原有的类名
    return `<div style="width: ${width}px; height: ${height}px; background-color: #${bgColor}; color: #${textColor}; display: flex; align-items: center; justify-content: center; font-size: ${Math.min(parseInt(width), parseInt(height)) / 3}px; font-weight: bold;" class="${className}" title="${alt}">${text}</div>`;
  });

  return { modifiedContent, replacementCount };
}

// 修复TypeScript文件中的placeholder链接
function fixTsPlaceholders(fileContent) {
  let modifiedContent = fileContent;
  let replacementCount = 0;

  // 正则表达式匹配TypeScript中的via.placeholder.com链接
  const tsPlaceholderRegex = /'https:\/\/via\.placeholder\.com\/(\d+)x(\d+)\/([0-9A-Fa-f]+)\/([0-9A-Fa-f]+)\?text=([^']*)'/g;

  // 替换匹配的链接为一个简单的base64编码的data URL
  modifiedContent = modifiedContent.replace(tsPlaceholderRegex, (match, width, height, bgColor, textColor, text) => {
    replacementCount++;
    
    // 生成一个简单的SVG data URL，避免对外部服务的依赖
    // 这是一个简化的SVG，包含背景色和文本
    const svg = `data:image/svg+xml,%3Csvg width='${width}' height='${height}' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23${bgColor}'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='${Math.min(parseInt(width), parseInt(height)) / 3}' font-weight='bold' text-anchor='middle' fill='%23${textColor}' dy='0.3em'%3E${encodeURIComponent(text)}%3C/text%3E%3C/svg%3E`;
    
    return `'${svg}'`;
  });

  return { modifiedContent, replacementCount };
}

// 遍历目录中的文件
function traverseDirectory(dir) {
  const files = fs.readdirSync(dir);
  let totalReplacements = 0;

  files.forEach(file => {
    const filePath = path.join(dir, file);
    const stat = fs.statSync(filePath);

    if (stat.isDirectory()) {
      const subDirReplacements = traverseDirectory(filePath);
      totalReplacements += subDirReplacements;
    } else if (file.endsWith('.html')) {
      // 读取文件内容
      const fileContent = fs.readFileSync(filePath, 'utf8');
      
      // 修复HTML中的placeholder链接
      const { modifiedContent, replacementCount } = fixHtmlPlaceholders(fileContent);
      
      // 如果有替换，写入文件
      if (replacementCount > 0) {
        fs.writeFileSync(filePath, modifiedContent, 'utf8');
        console.log(`已修复 ${filePath} 中的 ${replacementCount} 个HTML placeholder链接`);
        totalReplacements += replacementCount;
      }
    } else if (file.endsWith('.ts')) {
      // 读取文件内容
      const fileContent = fs.readFileSync(filePath, 'utf8');
      
      // 修复TypeScript中的placeholder链接
      const { modifiedContent, replacementCount } = fixTsPlaceholders(fileContent);
      
      // 如果有替换，写入文件
      if (replacementCount > 0) {
        fs.writeFileSync(filePath, modifiedContent, 'utf8');
        console.log(`已修复 ${filePath} 中的 ${replacementCount} 个TypeScript placeholder链接`);
        totalReplacements += replacementCount;
      }
    }
  });

  return totalReplacements;
}

// 执行修复操作
console.log('开始修复placeholder链接...');
const totalReplacements = traverseDirectory(srcDir);
console.log(`修复完成！总共修复了 ${totalReplacements} 个placeholder链接。`);