/**
 * 获取压缩率颜色类名
 */
const getCompressionColorClass = (ratio) => {
    if (ratio > 0.5)
        return 'compression-good';
    if (ratio > 0.2)
        return 'compression-medium';
    return 'compression-poor';
};
/**
 * 获取严重程度颜色类名
 */
const getSeverityColorClass = (severity) => {
    if (severity === 'high')
        return 'severity-high';
    if (severity === 'medium')
        return 'severity-medium';
    return 'severity-low';
};
/**
 * 格式化字节数
 */
const formatBytes = (bytes) => {
    if (bytes === 0)
        return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
};
/**
 * 生成增强的 HTML 报告模板
 */
export const generateEnhancedReportHTML = (data) => {
    // 生成资产列表表格
    const assetRows = data.assets
        .sort((a, b) => b.finalSize - a.finalSize)
        .slice(0, 50) // Top 50
        .map(asset => {
        const compressionClass = getCompressionColorClass(asset.compressionRatio);
        const compressionPercent = (asset.compressionRatio * 100).toFixed(1);
        const optimizationsText = asset.optimizations.join(', ') || '无';
        return `
        <tr class="asset-row" data-asset-id="${asset.id}">
          <td class="asset-name" title="${asset.originalName}">${asset.originalName}</td>
          <td>${asset.type}</td>
          <td class="size-cell">${formatBytes(asset.originalSize)}</td>
          <td class="size-cell">${formatBytes(asset.finalSize)}</td>
          <td class="compression-cell ${compressionClass}">
            <span class="compression-badge">${compressionPercent}%</span>
          </td>
          <td class="optimizations-cell" title="${optimizationsText}">${optimizationsText}</td>
          <td>${asset.inlined ? '✓ 内联' : '外部'}</td>
        </tr>
      `;
    }).join('');
    // 生成按类型统计表格
    const typeRows = Object.entries(data.byType)
        .sort((a, b) => b[1].finalSize - a[1].finalSize)
        .map(([type, stats]) => {
        const compressionClass = getCompressionColorClass(stats.avgCompressionRatio);
        const compressionPercent = (stats.avgCompressionRatio * 100).toFixed(1);
        return `
        <tr>
          <td>${type}</td>
          <td>${stats.count}</td>
          <td class="size-cell">${formatBytes(stats.originalSize)}</td>
          <td class="size-cell">${formatBytes(stats.finalSize)}</td>
          <td class="compression-cell ${compressionClass}">
            <span class="compression-badge">${compressionPercent}%</span>
          </td>
          <td>
            <div class="bar" style="width: ${(stats.finalSize / data.totalFinalSize * 100).toFixed(1)}%"></div>
          </td>
        </tr>
      `;
    }).join('');
    // 生成按分类统计表格
    const categoryRows = Object.entries(data.byCategory)
        .sort((a, b) => b[1].size - a[1].size)
        .map(([category, stats]) => {
        return `
        <tr>
          <td>${stats.name}</td>
          <td>${stats.count}</td>
          <td class="size-cell">${formatBytes(stats.size)}</td>
          <td>${stats.percentage.toFixed(2)}%</td>
          <td>
            <div class="bar" style="width: ${stats.percentage.toFixed(1)}%"></div>
          </td>
        </tr>
      `;
    }).join('');
    // 生成优化建议部分
    const optimizationSection = data.optimizationAnalysis ? `
    <div class="section optimization-suggestions">
      <h2>💡 优化建议</h2>
      
      <div class="optimization-summary">
        <div class="summary-card">
          <div class="summary-label">建议总数</div>
          <div class="summary-value">${data.optimizationAnalysis.totalSuggestions}</div>
        </div>
        <div class="summary-card">
          <div class="summary-label">预估节省</div>
          <div class="summary-value">${data.optimizationAnalysis.totalEstimatedSavingsFormatted}</div>
        </div>
        <div class="summary-card">
          <div class="summary-label">预估优化率</div>
          <div class="summary-value">${(data.optimizationAnalysis.estimatedOptimizationRate * 100).toFixed(1)}%</div>
        </div>
      </div>

      ${data.optimizationAnalysis.suggestions.length > 0 ? `
        <div class="suggestions-list">
          ${data.optimizationAnalysis.suggestions.map(suggestion => {
        const severityClass = getSeverityColorClass(suggestion.severity);
        return `
              <div class="suggestion-card ${severityClass}">
                <div class="suggestion-header">
                  <span class="suggestion-severity">${suggestion.severity === 'high' ? '🔴 高' : suggestion.severity === 'medium' ? '🟡 中' : '🟢 低'}</span>
                  <span class="suggestion-type">${suggestion.type}</span>
                  <span class="suggestion-savings">可节省: ${suggestion.estimatedSavingsFormatted}</span>
                </div>
                <div class="suggestion-description">${suggestion.description}</div>
                <div class="suggestion-recommendation">
                  <strong>建议：</strong>${suggestion.recommendation}
                </div>
                ${suggestion.affectedAssets.length > 0 ? `
                  <details class="suggestion-details">
                    <summary>受影响的资源 (${suggestion.affectedAssets.length})</summary>
                    <ul class="affected-assets">
                      ${suggestion.affectedAssets.slice(0, 10).map(asset => `<li>${asset}</li>`).join('')}
                      ${suggestion.affectedAssets.length > 10 ? `<li>... 还有 ${suggestion.affectedAssets.length - 10} 个</li>` : ''}
                    </ul>
                  </details>
                ` : ''}
                ${suggestion.configExample ? `
                  <details class="suggestion-details">
                    <summary>配置示例</summary>
                    <pre class="config-example"><code>${suggestion.configExample}</code></pre>
                  </details>
                ` : ''}
              </div>
            `;
    }).join('')}
        </div>
      ` : '<p class="no-suggestions">🎉 太棒了！没有发现明显的优化机会。</p>'}
    </div>
  ` : '';
    return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>构建分析报告 - 增强版</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: #1e1e1e;
      color: #e0e0e0;
      padding: 20px;
      line-height: 1.6;
    }

    .container {
      max-width: 1600px;
      margin: 0 auto;
    }

    .header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 40px;
      border-radius: 12px;
      margin-bottom: 30px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }

    .header h1 {
      font-size: 32px;
      font-weight: 700;
      color: white;
      margin-bottom: 20px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .header-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }

    .stat-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      padding: 20px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .stat-label {
      color: rgba(255, 255, 255, 0.8);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px;
    }

    .stat-value {
      color: white;
      font-weight: 700;
      font-size: 24px;
    }

    .section {
      background: #252526;
      padding: 30px;
      border-radius: 12px;
      margin-bottom: 30px;
      border: 1px solid #3e3e42;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }

    .section h2 {
      font-size: 22px;
      margin-bottom: 24px;
      color: #e0e0e0;
      font-weight: 600;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 14px 12px;
      text-align: left;
      border-bottom: 1px solid #3e3e42;
    }

    th {
      background: #1e1e1e;
      color: #888;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: 600;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    td {
      color: #e0e0e0;
      font-size: 13px;
    }

    tr:hover {
      background: #2a2a2a;
    }

    .asset-name {
      font-family: 'Monaco', 'Menlo', monospace;
      font-size: 12px;
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .size-cell {
      font-family: 'Monaco', 'Menlo', monospace;
      font-size: 12px;
      color: #4ec9b0;
    }

    .compression-cell {
      text-align: center;
    }

    .compression-badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 12px;
    }

    .compression-good .compression-badge {
      background: rgba(46, 204, 113, 0.2);
      color: #2ecc71;
      border: 1px solid #2ecc71;
    }

    .compression-medium .compression-badge {
      background: rgba(241, 196, 15, 0.2);
      color: #f1c40f;
      border: 1px solid #f1c40f;
    }

    .compression-poor .compression-badge {
      background: rgba(231, 76, 60, 0.2);
      color: #e74c3c;
      border: 1px solid #e74c3c;
    }

    .optimizations-cell {
      font-size: 11px;
      color: #888;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bar {
      height: 24px;
      background: linear-gradient(90deg, #667eea, #764ba2);
      border-radius: 4px;
      min-width: 2px;
      transition: all 0.3s;
    }

    .bar:hover {
      transform: scaleY(1.1);
    }

    /* 优化建议样式 */
    .optimization-suggestions {
      background: linear-gradient(135deg, #252526 0%, #2a2a2a 100%);
    }

    .optimization-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .summary-card {
      background: #1e1e1e;
      padding: 20px;
      border-radius: 8px;
      border: 1px solid #3e3e42;
      text-align: center;
    }

    .summary-label {
      color: #888;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 10px;
    }

    .summary-value {
      color: #4ec9b0;
      font-weight: 700;
      font-size: 28px;
    }

    .suggestions-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .suggestion-card {
      background: #1e1e1e;
      padding: 24px;
      border-radius: 8px;
      border-left: 4px solid;
      transition: all 0.3s;
    }

    .suggestion-card:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    }

    .suggestion-card.severity-high {
      border-left-color: #e74c3c;
    }

    .suggestion-card.severity-medium {
      border-left-color: #f1c40f;
    }

    .suggestion-card.severity-low {
      border-left-color: #2ecc71;
    }

    .suggestion-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .suggestion-severity {
      font-weight: 600;
      font-size: 13px;
    }

    .suggestion-type {
      background: #3e3e42;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 11px;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .suggestion-savings {
      margin-left: auto;
      color: #2ecc71;
      font-weight: 600;
      font-size: 13px;
    }

    .suggestion-description {
      color: #e0e0e0;
      margin-bottom: 12px;
      font-size: 14px;
    }

    .suggestion-recommendation {
      color: #888;
      font-size: 13px;
      margin-bottom: 12px;
      line-height: 1.6;
    }

    .suggestion-recommendation strong {
      color: #4ec9b0;
    }

    .suggestion-details {
      margin-top: 12px;
      cursor: pointer;
    }

    .suggestion-details summary {
      color: #4ec9b0;
      font-size: 12px;
      font-weight: 600;
      padding: 8px 0;
      user-select: none;
    }

    .suggestion-details summary:hover {
      color: #6ee7b7;
    }

    .affected-assets {
      list-style: none;
      padding: 12px;
      background: #252526;
      border-radius: 4px;
      margin-top: 8px;
    }

    .affected-assets li {
      padding: 4px 0;
      color: #888;
      font-size: 12px;
      font-family: 'Monaco', 'Menlo', monospace;
    }

    .config-example {
      background: #252526;
      padding: 16px;
      border-radius: 4px;
      margin-top: 8px;
      overflow-x: auto;
    }

    .config-example code {
      color: #4ec9b0;
      font-family: 'Monaco', 'Menlo', monospace;
      font-size: 12px;
      line-height: 1.6;
    }

    .no-suggestions {
      text-align: center;
      padding: 40px;
      color: #2ecc71;
      font-size: 18px;
    }

    /* 树状图样式 */
    .treemap-container {
      background: #252526;
      padding: 30px;
      border-radius: 12px;
      margin-bottom: 30px;
      border: 1px solid #3e3e42;
    }

    .treemap {
      width: 100%;
      min-height: 600px;
      position: relative;
      background: #1e1e1e;
      border-radius: 8px;
      overflow: hidden;
    }

    .treemap-block {
      position: absolute;
      border: 2px solid #1e1e1e;
      cursor: pointer;
      transition: all 0.2s;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 8px;
    }

    .treemap-block:hover {
      border-color: #fff;
      z-index: 10;
      transform: scale(1.02);
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    }

    .treemap-block-label {
      font-size: 11px;
      font-weight: 600;
      color: white;
      text-align: center;
      text-shadow: 0 1px 2px rgba(0,0,0,0.8);
      word-break: break-word;
      line-height: 1.3;
    }

    .treemap-block-size {
      font-size: 10px;
      color: rgba(255,255,255,0.8);
      text-shadow: 0 1px 2px rgba(0,0,0,0.8);
      margin-top: 4px;
    }

    .treemap-block-compression {
      font-size: 9px;
      color: rgba(255,255,255,0.7);
      text-shadow: 0 1px 2px rgba(0,0,0,0.8);
      margin-top: 2px;
    }

    /* Tooltip */
    .tooltip {
      position: fixed;
      background: rgba(0, 0, 0, 0.95);
      color: white;
      padding: 16px;
      border-radius: 8px;
      font-size: 12px;
      pointer-events: none;
      z-index: 1000;
      display: none;
      border: 1px solid #555;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
      max-width: 400px;
      backdrop-filter: blur(10px);
    }

    .tooltip-title {
      font-weight: 600;
      margin-bottom: 12px;
      color: #4ec9b0;
      font-size: 14px;
      border-bottom: 1px solid #3e3e42;
      padding-bottom: 8px;
    }

    .tooltip-row {
      display: flex;
      justify-content: space-between;
      margin: 6px 0;
      gap: 20px;
    }

    .tooltip-row span:first-child {
      color: #888;
    }

    .tooltip-row span:last-child {
      color: #e0e0e0;
      font-weight: 600;
    }

    .tooltip-section {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid #3e3e42;
    }

    .tooltip-section-title {
      color: #888;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }

    .tooltip-steps {
      list-style: none;
      padding-left: 0;
    }

    .tooltip-steps li {
      padding: 4px 0;
      color: #888;
      font-size: 11px;
    }

    /* 响应式 */
    @media (max-width: 768px) {
      .header-stats {
        grid-template-columns: 1fr;
      }

      .optimization-summary {
        grid-template-columns: 1fr;
      }

      table {
        font-size: 11px;
      }

      th, td {
        padding: 8px 6px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>📊 构建分析报告</h1>
      <div class="header-stats">
        <div class="stat-card">
          <div class="stat-label">资源总数</div>
          <div class="stat-value">${data.totalAssets}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">原始大小</div>
          <div class="stat-value">${formatBytes(data.totalOriginalSize)}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">最终大小</div>
          <div class="stat-value">${formatBytes(data.totalFinalSize)}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">总压缩率</div>
          <div class="stat-value">${(data.totalCompressionRatio * 100).toFixed(1)}%</div>
        </div>
      </div>
    </div>

    ${optimizationSection}

    <div class="treemap-container">
      <h2>🗺️ 资源分布图</h2>
      <div class="treemap" id="treemap"></div>
    </div>

    <div class="section">
      <h2>📦 按类型统计</h2>
      <table>
        <thead>
          <tr>
            <th>类型</th>
            <th>数量</th>
            <th>原始大小</th>
            <th>最终大小</th>
            <th>压缩率</th>
            <th>占比</th>
          </tr>
        </thead>
        <tbody>
          ${typeRows}
        </tbody>
      </table>
    </div>

    <div class="section">
      <h2>📂 按分类统计</h2>
      <table>
        <thead>
          <tr>
            <th>分类</th>
            <th>数量</th>
            <th>大小</th>
            <th>占比</th>
            <th>可视化</th>
          </tr>
        </thead>
        <tbody>
          ${categoryRows}
        </tbody>
      </table>
    </div>

    <div class="section">
      <h2>🔝 Top 50 资源</h2>
      <table>
        <thead>
          <tr>
            <th>资源名称</th>
            <th>类型</th>
            <th>原始大小</th>
            <th>最终大小</th>
            <th>压缩率</th>
            <th>优化</th>
            <th>位置</th>
          </tr>
        </thead>
        <tbody>
          ${assetRows}
        </tbody>
      </table>
    </div>
  </div>

  <div class="tooltip" id="tooltip"></div>

  <script>
    // 嵌入数据
    const reportData = ${JSON.stringify(data, null, 2)};

    // 压缩率颜色映射
    const getCompressionColor = (ratio) => {
      if (ratio > 0.5) return '#2ecc71';
      if (ratio > 0.2) return '#f1c40f';
      return '#e74c3c';
    };

    // 类型颜色映射
    const typeColors = {
      'script': '#f39c12',
      'texture': '#9b59b6',
      'audio': '#3498db',
      'model': '#e74c3c',
      'json': '#2ecc71',
      'html': '#1abc9c',
      'other': '#95a5a6'
    };

    // 树状图布局算法
    const layoutTreemap = (items, x, y, width, height) => {
      const sortedItems = [...items].sort((a, b) => b.value - a.value);
      const total = sortedItems.reduce((sum, item) => sum + item.value, 0);
      if (total === 0) return [];
      
      const blocks = [];
      let currentY = y;
      let rowItems = [];
      let rowSize = 0;
      
      sortedItems.forEach((item, index) => {
        rowItems.push(item);
        rowSize += item.value;
        
        const shouldBreak = rowItems.length >= 10 || index === sortedItems.length - 1;
        
        if (shouldBreak) {
          const rowRatio = rowSize / total;
          const rowHeight = height * rowRatio;
          
          let offsetX = x;
          rowItems.forEach(i => {
            const iWidth = (i.value / rowSize) * width;
            
            blocks.push({
              ...i,
              x: offsetX,
              y: currentY,
              width: Math.max(iWidth, 1),
              height: Math.max(rowHeight, 1)
            });
            
            offsetX += iWidth;
          });
          
          currentY += rowHeight;
          rowItems = [];
          rowSize = 0;
        }
      });
      
      return blocks;
    };

    // 渲染树状图
    const renderTreemap = () => {
      const container = document.getElementById('treemap');
      const width = container.clientWidth;
      const height = 600;
      
      container.innerHTML = '';
      container.style.height = height + 'px';

      const items = reportData.assets.map(asset => ({
        ...asset,
        value: asset.finalSize
      }));

      const blocks = layoutTreemap(items, 0, 0, width, height);

      blocks.forEach(block => {
        const div = document.createElement('div');
        div.className = 'treemap-block';
        div.style.left = block.x + 'px';
        div.style.top = block.y + 'px';
        div.style.width = block.width + 'px';
        div.style.height = block.height + 'px';
        
        // 根据压缩率设置颜色
        const baseColor = typeColors[block.type] || typeColors.other;
        const compressionAlpha = 0.5 + (block.compressionRatio * 0.5);
        div.style.background = baseColor;
        div.style.opacity = compressionAlpha;

        const showLabel = block.width > 80 && block.height > 50;

        if (showLabel) {
          const label = document.createElement('div');
          label.className = 'treemap-block-label';
          label.textContent = block.originalName;
          div.appendChild(label);

          const size = document.createElement('div');
          size.className = 'treemap-block-size';
          size.textContent = \`\${formatBytes(block.finalSize)}\`;
          div.appendChild(size);

          const compression = document.createElement('div');
          compression.className = 'treemap-block-compression';
          compression.textContent = \`压缩 \${(block.compressionRatio * 100).toFixed(0)}%\`;
          div.appendChild(compression);
        }

        // Tooltip
        div.addEventListener('mouseenter', (e) => {
          const tooltip = document.getElementById('tooltip');
          
          let stepsHtml = '';
          if (block.processingSteps && block.processingSteps.length > 0) {
            stepsHtml = \`
              <div class="tooltip-section">
                <div class="tooltip-section-title">处理流程</div>
                <ul class="tooltip-steps">
                  \${block.processingSteps.map(step => \`
                    <li>\${step.stage}: \${formatBytes(step.size)} \${step.compressionRatio ? '(-' + (step.compressionRatio * 100).toFixed(0) + '%)' : ''}</li>
                  \`).join('')}
                </ul>
              </div>
            \`;
          }
          
          tooltip.innerHTML = \`
            <div class="tooltip-title">\${block.originalName}</div>
            <div class="tooltip-row">
              <span>类型:</span>
              <span>\${block.type}</span>
            </div>
            <div class="tooltip-row">
              <span>原始大小:</span>
              <span>\${formatBytes(block.originalSize)}</span>
            </div>
            <div class="tooltip-row">
              <span>最终大小:</span>
              <span>\${formatBytes(block.finalSize)}</span>
            </div>
            <div class="tooltip-row">
              <span>压缩率:</span>
              <span style="color: \${getCompressionColor(block.compressionRatio)}">\${(block.compressionRatio * 100).toFixed(1)}%</span>
            </div>
            <div class="tooltip-row">
              <span>优化:</span>
              <span>\${block.optimizations.join(', ') || '无'}</span>
            </div>
            <div class="tooltip-row">
              <span>位置:</span>
              <span>\${block.inlined ? '内联' : '外部'}</span>
            </div>
            \${stepsHtml}
          \`;
          
          tooltip.style.display = 'block';
          tooltip.style.left = (e.clientX + 15) + 'px';
          tooltip.style.top = (e.clientY + 15) + 'px';
        });

        div.addEventListener('mousemove', (e) => {
          const tooltip = document.getElementById('tooltip');
          tooltip.style.left = (e.clientX + 15) + 'px';
          tooltip.style.top = (e.clientY + 15) + 'px';
        });

        div.addEventListener('mouseleave', () => {
          document.getElementById('tooltip').style.display = 'none';
        });

        container.appendChild(div);
      });
    };

    // 格式化字节数
    function formatBytes(bytes) {
      if (bytes === 0) return '0 B';
      const k = 1024;
      const sizes = ['B', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return \`\${(bytes / Math.pow(k, i)).toFixed(2)} \${sizes[i]}\`;
    }

    // 初始化
    renderTreemap();

    // 响应式调整
    let resizeTimeout;
    window.addEventListener('resize', () => {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(renderTreemap, 300);
    });

    // 资产行点击事件
    document.querySelectorAll('.asset-row').forEach(row => {
      row.addEventListener('click', () => {
        const assetId = row.dataset.assetId;
        const asset = reportData.assets.find(a => a.id === assetId);
        if (asset) {
          console.log('Asset details:', asset);
          // 可以在这里添加更多交互逻辑
        }
      });
    });
  </script>
</body>
</html>`;
};
