From 81c5aaccfdd3f6ca3756ad81b33fca474baf8c01 Mon Sep 17 00:00:00 2001
From: minecraft1024a <wwwww95915@qq.com>
Date: Thu, 13 Nov 2025 10:56:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(report):=20=E4=B8=BA=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E6=8A=A5=E5=91=8A=E5=BC=95=E5=85=A5=E5=9B=BE=E5=BD=A2=E5=8C=96?=
 =?UTF-8?q?=E8=B4=B9=E7=94=A8=E5=88=86=E6=9E=90=E8=A7=86=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为增强 HTML 报告的可读性和洞察力，此变更集成了 Chart.js 来将关键的成本数据进行可视化。

现在，报告的每个标签页都会包含一个“数据总览”部分，其中有两个核心图表：
1.  **供应商成本构成图 (饼图)**: 直观展示不同供应商的费用占比，帮助快速定位主要开销来源。
2.  **模型成本排行榜 (条形图)**: 按费用降序排列各个模型，清晰地识别出成本最高的模型。

这些图表是动态生成的，如果统计周期内数据不足，将显示提示信息，避免用户面对空白图表。
---
 src/chat/utils/report_generator.py | 83 +++++++++++++++++++++++++++++-
 1 file changed, 81 insertions(+), 2 deletions(-)

diff --git a/src/chat/utils/report_generator.py b/src/chat/utils/report_generator.py
index 5be2fd19a..5526781fa 100644
--- a/src/chat/utils/report_generator.py
+++ b/src/chat/utils/report_generator.py
@@ -154,8 +154,7 @@ class HTMLReportGenerator:
         """
 
         # 增加饼图和条形图
-        # static_charts = self._generate_static_charts_div(stat_data, div_id) # 该功能尚未实现
-        static_charts = ""
+        static_charts = self._generate_static_charts_div(stat_data, div_id) # 该功能尚未实现
         return f"""
         <div id="{div_id}" class="tab-content">
             <p class="info-item">
@@ -365,3 +364,83 @@ class HTMLReportGenerator:
         """
         async with aiofiles.open(output_path, "w", encoding="utf-8") as f:
             await f.write(html_template)
+    def _generate_static_charts_div(self, stat_data: dict[str, Any], period_id: str) -> str:
+        """生成静态图表（饼图、条形图）的HTML和JS。"""
+        provider_cost_data = stat_data.get(PIE_CHART_COST_BY_PROVIDER, {})
+        model_cost_data = stat_data.get(BAR_CHART_COST_BY_MODEL, {})
+
+        if not provider_cost_data and not model_cost_data:
+            return "<h2>数据总览</h2><p>当前时段暂无足够数据生成图表。</p>"
+
+        provider_labels = provider_cost_data.get('labels', [])
+        provider_data = provider_cost_data.get('data', [])
+        model_labels = model_cost_data.get('labels', [])
+        model_data = model_cost_data.get('data', [])
+
+        return f"""
+        <h2>数据总览</h2>
+        <div class="chart-grid">
+            <div class="chart-container">
+                <canvas id="providerCostPieChart_{period_id}"></canvas>
+            </div>
+            <div class="chart-container">
+                <canvas id="modelCostBarChart_{period_id}"></canvas>
+            </div>
+        </div>
+        <script>
+        document.addEventListener('DOMContentLoaded', function() {{
+            const colors = ['#3498db', '#2ecc71', '#f1c40f', '#e74c3c', '#9b59b6', '#1abc9c', '#34495e', '#e67e22'];
+
+            // Provider Cost Pie Chart
+            const providerCtx = document.getElementById('providerCostPieChart_{period_id}');
+            if (providerCtx && {provider_data}) {{
+                new Chart(providerCtx, {{
+                    type: 'pie',
+                    data: {{
+                        labels: {provider_labels},
+                        datasets: [{{
+                            label: '按供应商花费',
+                            data: {provider_data},
+                            backgroundColor: colors,
+                        }}]
+                    }},
+                    options: {{
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {{
+                            title: {{ display: true, text: '按供应商花费分布', font: {{ size: 16 }} }},
+                            legend: {{ position: 'top' }}
+                        }}
+                    }}
+                }});
+            }}
+
+            // Model Cost Bar Chart
+            const modelCtx = document.getElementById('modelCostBarChart_{period_id}');
+            if (modelCtx && {model_data}) {{
+                new Chart(modelCtx, {{
+                    type: 'bar',
+                    data: {{
+                        labels: {model_labels},
+                        datasets: [{{
+                            label: '按模型花费',
+                            data: {model_data},
+                            backgroundColor: colors,
+                        }}]
+                    }},
+                    options: {{
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {{
+                            title: {{ display: true, text: '按模型花费排行', font: {{ size: 16 }} }},
+                            legend: {{ display: false }}
+                        }},
+                        scales: {{
+                            y: {{ beginAtZero: true, title: {{ display: true, text: '花费 (¥)' }} }}
+                        }}
+                    }}
+                }});
+            }}
+        }});
+        </script>
+        """