@playcraft/build 0.0.8 → 0.0.11

package/dist/analyzers/enhanced-report-template.js

@@ -0,0 +1,957 @@
+/**
+ * 获取压缩率颜色类名
+ */
+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>`;
+};