// generate-preview.js
const fs = require('fs');
const path = require('path');

function generateIconfontPreview(cssPath, outputPath) {
    const cssContent = fs.readFileSync(cssPath, 'utf8');
    
    // 解析图标
    const iconRegex = /\.(icon-[^:]+):before\s*{\s*content:\s*["']\\([^"']+)["']/g;
    const icons = [];
    let match;
    
    while ((match = iconRegex.exec(cssContent)) !== null) {
        icons.push({
            className: match[1],
            unicode: '\\' + match[2]
        });
    }

    // 计算引入css文件相对于 outputPath的路径
    const relativeCssPath = path.relative(path.dirname(outputPath), cssPath);
    
    // 生成 HTML
    const html = `<!DOCTYPE html>
<html>
<head>
    <title>Iconfont Preview</title>
    <link rel="stylesheet" href="${relativeCssPath}">
    <style>
        body { font-family: Arial; padding: 20px; }
        .grid { font-family: iconfont; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
        .icon { text-align: center; padding: 10px; border: 1px solid #ddd; }
        .char { font-size: 24px; }
        .name { font-size: 12px; margin-top: 5px; }
    </style>
</head>
<body>
    <h1>Iconfont Preview (${icons.length} icons)</h1>
    <div class="grid">
        ${icons.map(icon => `
            <div class="icon">
                <div class="char ${icon.className}"></div>
                <div class="name">${icon.className}</div>
            </div>
        `).join('')}
    </div>
</body>
</html>`;
    
    fs.writeFileSync(outputPath, html);
    console.log(`预览已生成: ${outputPath}`);
}

// 使用
const cssPath = path.join(__dirname, '../common/css/iconfont.css');
const outputPath = path.join(__dirname, '../iconfont-preview.html');
generateIconfontPreview(cssPath, outputPath);