feat(report): 重构统计报告，增加效率分析并采用MD3设计

本次更新对统计报告进行了全面的重构和视觉升级，旨在提供更深入的数据洞察和更现代化的用户体验。

主要变更包括：
- **新增效率分析模块**: 引入了一系列关键的大模型效率指标，如单条消息成本、Token效率（输出/输入比）、每小时成本/请求数等，并通过新的表格进行详细展示。
- **全新UI设计**: 整体界面采用Material Design 3 (MD3) 风格重新设计，优化了色彩、字体、间距和卡片样式，提升了报告的专业性和可读性。
- **图表功能增强**: 动态图表和静态图表均进行了美化，更新了配色方案，增加了平滑的加载动画和交互效果。饼图升级为更易读的甜甜圈图，并优化了工具提示信息。
- **内容和布局优化**: 增加了更多的摘要卡片以快速概览核心数据。为各个板块标题添加了 Emoji 图标，使信息层次更清晰，并优化了整体布局。

src/chat/utils/report_generator.py

@@ -135,27 +135,123 @@ class HTMLReportGenerator:
                 for chat_id, count in sorted(stat_data[MSG_CNT_BY_CHAT].items())
             ]
         )
+        
+        # 先计算基础数据
+        total_tokens = sum(stat_data.get(TOTAL_TOK_BY_MODEL, {}).values())
+        total_requests = stat_data.get(TOTAL_REQ_CNT, 0)
+        total_cost = stat_data.get(TOTAL_COST, 0)
+        total_messages = stat_data.get(TOTAL_MSG_CNT, 0)
+        online_seconds = stat_data.get(ONLINE_TIME, 0)
+        online_hours = online_seconds / 3600 if online_seconds > 0 else 0
+        
+        # 大模型相关效率指标
+        avg_cost_per_req = (total_cost / total_requests) if total_requests > 0 else 0
+        avg_cost_per_msg = (total_cost / total_messages) if total_messages > 0 else 0
+        avg_tokens_per_msg = (total_tokens / total_messages) if total_messages > 0 else 0
+        avg_tokens_per_req = (total_tokens / total_requests) if total_requests > 0 else 0
+        msg_to_req_ratio = (total_messages / total_requests) if total_requests > 0 else 0
+        cost_per_hour = (total_cost / online_hours) if online_hours > 0 else 0
+        req_per_hour = (total_requests / online_hours) if online_hours > 0 else 0
+        
+        # Token效率 (输出/输入比率)
+        total_in_tokens = sum(stat_data.get(IN_TOK_BY_MODEL, {}).values())
+        total_out_tokens = sum(stat_data.get(OUT_TOK_BY_MODEL, {}).values())
+        token_efficiency = (total_out_tokens / total_in_tokens) if total_in_tokens > 0 else 0
+        
+        # 生成效率指标表格数据
+        efficiency_data = [
+            ("💸 平均每条消息成本", f"{avg_cost_per_msg:.6f} ¥", "处理每条用户消息的平均AI成本"),
+            ("🎯 平均每条消息Token", f"{avg_tokens_per_msg:.0f}", "每条消息平均消耗的Token数量"),
+            ("📊 平均每次请求Token", f"{avg_tokens_per_req:.0f}", "每次AI请求平均消耗的Token数"),
+            ("🔄 消息/请求比率", f"{msg_to_req_ratio:.2f}", "平均每个AI请求处理的消息数"),
+            ("⚡ Token效率(输出/输入)", f"{token_efficiency:.3f}x", "输出Token与输入Token的比率"),
+            ("💵 每小时运行成本", f"{cost_per_hour:.4f} ¥/h", "在线每小时的AI成本"),
+            ("🚀 每小时请求数", f"{req_per_hour:.1f} 次/h", "在线每小时的AI请求次数"),
+            ("💰 每千Token成本", f"{(total_cost / total_tokens * 1000) if total_tokens > 0 else 0:.4f} ¥", "平均每1000个Token的成本"),
+            ("📈 Token/在线小时", f"{(total_tokens / online_hours) if online_hours > 0 else 0:.0f}", "每在线小时处理的Token数"),
+            ("💬 消息/在线小时", f"{(total_messages / online_hours) if online_hours > 0 else 0:.1f}", "每在线小时处理的消息数"),
+        ]
+        
+        efficiency_rows = "\n".join(
+            [
+                f"<tr><td style='font-weight: 500;'>{metric}</td><td style='color: #1976D2; font-weight: 600; font-size: 1.1em;'>{value}</td><td style='color: #546E7A;'>{desc}</td></tr>"
+                for metric, value, desc in efficiency_data
+            ]
+        )
+        
+        # 计算活跃聊天数和最活跃聊天
+        msg_by_chat = stat_data.get(MSG_CNT_BY_CHAT, {})
+        active_chats = len(msg_by_chat)
+        most_active_chat = ""
+        if msg_by_chat:
+            most_active_id = max(msg_by_chat, key=msg_by_chat.get)
+            most_active_chat = self.name_mapping.get(most_active_id, (most_active_id, 0))[0]
+            most_active_count = msg_by_chat[most_active_id]
+            most_active_chat = f"{most_active_chat} ({most_active_count}条)"
+        
+        avg_msg_per_chat = (total_messages / active_chats) if active_chats > 0 else 0
+        
         summary_cards = f"""
             <div class="summary-cards">
                 <div class="card">
-                    <h3>总花费</h3>
+                    <h3>💰 总花费</h3>
-                    <p>{stat_data.get(TOTAL_COST, 0):.4f} ¥</p>
+                    <p>{total_cost:.4f} ¥</p>
                 </div>
                 <div class="card">
-                    <h3>总请求数</h3>
+                    <h3>📞 AI请求数</h3>
-                    <p>{stat_data.get(TOTAL_REQ_CNT, 0)}</p>
+                    <p>{total_requests:,}</p>
                 </div>
                 <div class="card">
-                    <h3>总Token数</h3>
+                    <h3>🎯 总Token数</h3>
-                    <p>{sum(stat_data.get(TOTAL_TOK_BY_MODEL, {}).values())}</p>
+                    <p>{total_tokens:,}</p>
-                </div>
-                 <div class="card">
-                    <h3>总消息数</h3>
-                    <p>{stat_data.get(TOTAL_MSG_CNT, 0)}</p>
                 </div>
                 <div class="card">
-                    <h3>总在线时间</h3>
+                    <h3>💬 总消息数</h3>
-                    <p>{format_online_time(int(stat_data.get(ONLINE_TIME, 0)))}</p>
+                    <p>{total_messages:,}</p>
+                </div>
+                <div class="card">
+                    <h3>⏱️ 在线时间</h3>
+                    <p>{format_online_time(int(online_seconds))}</p>
+                </div>
+                <div class="card">
+                    <h3>💸 每条消息成本</h3>
+                    <p>{avg_cost_per_msg:.4f} ¥</p>
+                </div>
+                <div class="card">
+                    <h3>📊 每请求Token</h3>
+                    <p>{avg_tokens_per_req:.0f}</p>
+                </div>
+                <div class="card">
+                    <h3><3E> 消息/请求比</h3>
+                    <p>{msg_to_req_ratio:.2f}</p>
+                </div>
+                <div class="card">
+                    <h3>⚡ Token效率</h3>
+                    <p>{token_efficiency:.2f}x</p>
+                </div>
+                <div class="card">
+                    <h3>💵 每小时成本</h3>
+                    <p>{cost_per_hour:.4f} ¥</p>
+                </div>
+                <div class="card">
+                    <h3>🚀 每小时请求</h3>
+                    <p>{req_per_hour:.1f}</p>
+                </div>
+                <div class="card">
+                    <h3>👥 活跃聊天数</h3>
+                    <p>{active_chats}</p>
+                </div>
+                <div class="card">
+                    <h3>🔥 最活跃聊天</h3>
+                    <p style="font-size: 1.2em;">{most_active_chat if most_active_chat else "无"}</p>
+                </div>
+                <div class="card">
+                    <h3>📈 平均消息/聊天</h3>
+                    <p>{avg_msg_per_chat:.1f}</p>
+                </div>
+                <div class="card">
+                    <h3>🎯 每消息Token</h3>
+                    <p>{avg_tokens_per_msg:.0f}</p>
                 </div>
             </div>
         """
@@ -173,6 +269,7 @@ class HTMLReportGenerator:
             module_rows=module_rows,
             type_rows=type_rows,
             chat_rows=chat_rows,
+            efficiency_rows=efficiency_rows,
         )
 
     def _generate_chart_tab(self, chart_data: dict) -> str:

src/chat/utils/statistic_keys.py

@@ -61,3 +61,18 @@ PIE_CHART_COST_BY_PROVIDER = "pie_chart_cost_by_provider"
 PIE_CHART_REQ_BY_PROVIDER = "pie_chart_req_by_provider"
 BAR_CHART_COST_BY_MODEL = "bar_chart_cost_by_model"
 BAR_CHART_REQ_BY_MODEL = "bar_chart_req_by_model"
+
+# 新增消息分析指标
+MSG_CNT_BY_USER = "messages_by_user"  # 按用户的消息数
+ACTIVE_CHATS_CNT = "active_chats_count"  # 活跃聊天数
+MOST_ACTIVE_CHAT = "most_active_chat"  # 最活跃的聊天
+AVG_MSG_PER_CHAT = "avg_messages_per_chat"  # 平均每个聊天的消息数
+
+# 新增大模型效率指标
+AVG_COST_PER_MSG = "avg_cost_per_message"  # 平均每条消息成本
+AVG_TOKENS_PER_MSG = "avg_tokens_per_message"  # 平均每条消息Token数
+AVG_TOKENS_PER_REQ = "avg_tokens_per_request"  # 平均每次请求Token数
+MSG_TO_REQ_RATIO = "message_to_request_ratio"  # 消息/请求比率
+COST_PER_ONLINE_HOUR = "cost_per_online_hour"  # 每小时在线成本
+REQ_PER_ONLINE_HOUR = "requests_per_online_hour"  # 每小时请求数
+TOKEN_EFFICIENCY = "token_efficiency"  # Token效率 (输出/输入比率)

src/chat/utils/templates/charts_tab.html

@@ -1,16 +1,27 @@
 <div id="charts" class="tab-content">
-    <h2>数据图表</h2>
+    <h2>📈 数据图表</h2>
-    <div style="margin: 20px 0; text-align: center;">
+    <p class="info-item">
-        <label style="margin-right: 10px; font-weight: bold;">时间范围:</label>
+        <strong>📊 动态图表:</strong> 选择不同的时间范围查看数据趋势变化
+    </p>
+    <div style="margin: 30px 0; text-align: center;">
+        <label style="margin-right: 15px; font-weight: 600; font-size: 16px; color: var(--md-sys-color-primary);">⏰ 时间范围:</label>
         <button class="time-range-btn" onclick="switchTimeRange('6h')">6小时</button>
         <button class="time-range-btn" onclick="switchTimeRange('12h')">12小时</button>
         <button class="time-range-btn" onclick="switchTimeRange('24h')">24小时</button>
         <button class="time-range-btn" onclick="switchTimeRange('48h')">48小时</button>
     </div>
-    <div style="margin-top: 20px;">
+    <div style="margin-top: 30px; display: flex; flex-direction: column; gap: 32px;">
-        <div style="margin-bottom: 40px;"><canvas id="totalCostChart" width="800" height="400"></canvas></div>
+        <div class="chart-wrapper">
-        <div style="margin-bottom: 40px;"><canvas id="costByModuleChart" width="800" height="400"></canvas></div>
+            <canvas id="totalCostChart" style="max-height: 350px;"></canvas>
-        <div style="margin-bottom: 40px;"><canvas id="costByModelChart" width="800" height="400"></canvas></div>
+        </div>
-        <div><canvas id="messageByChatChart" width="800" height="400"></canvas></div>
+        <div class="chart-wrapper">
+            <canvas id="costByModuleChart" style="max-height: 350px;"></canvas>
+        </div>
+        <div class="chart-wrapper">
+            <canvas id="costByModelChart" style="max-height: 350px;"></canvas>
+        </div>
+        <div class="chart-wrapper">
+            <canvas id="messageByChatChart" style="max-height: 350px;"></canvas>
+        </div>
     </div>
 </div>

src/chat/utils/templates/report.css

@@ -1,111 +1,164 @@
+/* Material Design 3 - Blue White Gray Theme */
+:root {
+    --md-sys-color-primary: #1976D2;
+    --md-sys-color-primary-container: #E3F2FD;
+    --md-sys-color-on-primary: #FFFFFF;
+    --md-sys-color-secondary: #546E7A;
+    --md-sys-color-secondary-container: #ECEFF1;
+    --md-sys-color-surface: #FFFFFF;
+    --md-sys-color-surface-variant: #F5F5F5;
+    --md-sys-color-background: #FAFAFA;
+    --md-sys-color-on-surface: #1C1B1F;
+    --md-sys-color-outline: #BDBDBD;
+    --md-sys-color-shadow: rgba(0, 0, 0, 0.1);
+}
+
 /* General Body Styles */
 body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
     margin: 0;
     padding: 20px;
-    background-color: #f0f4f8; /* Light blue-gray background */
+    background: var(--md-sys-color-background);
-    color: #333; /* Darker text for better contrast */
+    color: var(--md-sys-color-on-surface);
     line-height: 1.6;
+    min-height: 100vh;
 }
 
 /* Main Container */
 .container {
-    max-width: 95%; /* Make container almost full-width */
+    max-width: 95%;
     margin: 20px auto;
-    background-color: #FFFFFF; /* Pure white background */
+    background-color: var(--md-sys-color-surface);
-    padding: 30px;
+    padding: 40px;
-    border-radius: 12px; /* Slightly more rounded corners */
+    border-radius: 28px;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); /* Softer, deeper shadow */
+    box-shadow: 0 4px 16px var(--md-sys-color-shadow);
+    animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 /* Dashboard Layout */
 .dashboard-layout {
     display: flex;
-    gap: 30px;
+    flex-direction: column;
+    gap: 32px;
 }
 
 .main-content {
-    flex: 65%;
+    width: 100%;
     min-width: 0;
 }
 
 .sidebar-content {
-    flex: 35%;
+    width: 100%;
     min-width: 0;
 }
 
-/* Responsive Design for Mobile */
+/* Typography - Material Design 3 */
-@media (max-width: 992px) {
-    .dashboard-layout {
-        flex-direction: column;
-    }
-    .main-content, .sidebar-content {
-        flex: 1;
-    }
-}
-
-/* Typography */
 h1, h2 {
-    color: #212529;
+    color: var(--md-sys-color-on-surface);
     padding-bottom: 10px;
     margin-top: 0;
 }
 
 h1 {
     text-align: center;
-    font-size: 2.2em;
+    font-size: 2.5em;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
-    color: #2A6CB5; /* A deeper, more professional blue */
+    color: var(--md-sys-color-primary);
+    font-weight: 500;
+    letter-spacing: 0;
 }
 
 h2 {
     font-size: 1.5em;
     margin-top: 40px;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
-    border-bottom: 2px solid #DDE6ED; /* Lighter border color */
+    border-bottom: 2px solid var(--md-sys-color-primary);
+    padding-bottom: 12px;
+    color: var(--md-sys-color-on-surface);
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
 
-/* Info Banners */
+/* Info Banners - MD3 Style */
 .info-item {
-    background-color: #E9F2FA; /* Light blue background */
+    background: var(--md-sys-color-primary-container);
-    padding: 12px 18px;
+    padding: 16px 24px;
-    border-radius: 8px;
+    border-radius: 16px;
-    margin-bottom: 20px;
+    margin-bottom: 24px;
     font-size: 0.95em;
-    border: 1px solid #D1E3F4; /* Light blue border */
+    border-left: 4px solid var(--md-sys-color-primary);
+    box-shadow: 0 1px 3px var(--md-sys-color-shadow);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.info-item:hover {
+    box-shadow: 0 2px 6px var(--md-sys-color-shadow);
 }
 
 .info-item strong {
-    color: #2A6CB5; /* Deeper blue for emphasis */
+    color: var(--md-sys-color-primary);
+    font-weight: 500;
 }
 
-/* Tabs */
+/* Tabs - MD3 Style */
 .tabs {
-    border-bottom: 2px solid #DEE2E6;
+    border-bottom: 1px solid var(--md-sys-color-outline);
     display: flex;
-    margin-bottom: 20px;
+    margin-bottom: 32px;
+    flex-wrap: wrap;
+    gap: 8px;
 }
 
 .tabs button {
     background: none;
     border: none;
     outline: none;
-    padding: 14px 20px;
+    padding: 16px 24px;
     cursor: pointer;
-    transition: all 0.3s ease;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    font-size: 16px;
+    font-size: 14px;
-    color: #6C757D;
+    color: var(--md-sys-color-on-surface);
-    border-bottom: 3px solid transparent;
+    border-radius: 16px 16px 0 0;
-    margin-bottom: -2px; /* Align with container border */
+    margin-bottom: -1px;
+    font-weight: 500;
+    position: relative;
+}
+
+.tabs button::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--md-sys-color-primary);
+    transform: scaleX(0);
+    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .tabs button:hover {
-    color: #2A6CB5;
+    background: var(--md-sys-color-surface-variant);
-    background-color: #f0f4f8; /* Subtle hover background */
 }
 
 .tabs button.active {
-    color: #2A6CB5; /* Active tab color */
+    color: var(--md-sys-color-primary);
-    border-bottom-color: #2A6CB5; /* Active tab border color */
+    font-weight: 600;
+}
+
+.tabs button.active::after {
+    transform: scaleX(1);
 }
 
 .tab-content {
@@ -117,83 +170,277 @@ h2 {
     display: block;
 }
 
-/* Summary Cards */
+/* Summary Cards - MD3 Style */
 .summary-cards {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 20px;
+    gap: 16px;
-    margin: 20px 0;
+    margin: 32px 0;
 }
 
 .card {
-    background-color: #FFFFFF;
+    background: var(--md-sys-color-surface);
-    padding: 20px;
+    padding: 24px;
-    border-radius: 8px;
+    border-radius: 16px;
     text-align: center;
-    border: 1px solid #DDE6ED; /* Lighter border */
+    border: 1px solid var(--md-sys-color-outline);
-    transition: all 0.3s ease;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 3px var(--md-sys-color-shadow);
 }
 
 .card:hover {
-    transform: translateY(-5px);
+    box-shadow: 0 4px 12px var(--md-sys-color-shadow);
-    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
+    transform: translateY(-4px);
+    border-color: var(--md-sys-color-primary);
 }
 
 .card h3 {
-    margin: 0 0 10px;
+    margin: 0 0 16px;
-    font-size: 1em;
+    font-size: 0.875rem;
-    color: #6C757D;
+    color: var(--md-sys-color-secondary);
+    font-weight: 500;
+    letter-spacing: 0.1px;
 }
 
 .card p {
     margin: 0;
-    font-size: 1.8em;
+    font-size: 2rem;
-    font-weight: bold;
+    font-weight: 600;
-    color: #212529;
+    color: var(--md-sys-color-primary);
+    line-height: 1.2;
 }
 
-/* Tables */
+/* Tables - MD3 Style */
 table {
     width: 100%;
     border-collapse: collapse;
-    margin-top: 15px;
+    margin-top: 24px;
-    font-size: 0.9em;
+    font-size: 0.875rem;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 1px 3px var(--md-sys-color-shadow);
+    border: 1px solid var(--md-sys-color-outline);
 }
 
 th, td {
-    padding: 12px 15px;
+    padding: 16px;
     text-align: left;
-    border-bottom: 1px solid #EAEAEA;
+    border-bottom: 1px solid var(--md-sys-color-outline);
 }
+
 th {
-    background-color: #4A90E2; /* Main theme blue */
+    background: var(--md-sys-color-primary);
-    color: white;
+    color: var(--md-sys-color-on-primary);
-    font-weight: bold;
+    font-weight: 500;
-    font-size: 0.95em;
+    font-size: 0.875rem;
-    text-transform: uppercase;
+    letter-spacing: 0.1px;
-    letter-spacing: 0.5px;
+}
+
+tbody tr {
+    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 tr:nth-child(even) {
-    background-color: #F7FAFC; /* Very light blue for alternate rows */
+    background-color: var(--md-sys-color-surface-variant);
 }
 
-tr:hover {
+tbody tr:hover {
-    background-color: #E9F2FA; /* Light blue for hover */
+    background-color: var(--md-sys-color-primary-container);
 }
 
-/* Chart Container in Sidebar */
+/* Chart Container - MD3 Style */
 .chart-container {
     position: relative;
-    height: 300px; /* Adjust height as needed */
     width: 100%;
-    margin-bottom: 20px;
+    padding: 24px;
+    background: var(--md-sys-color-surface);
+    border-radius: 16px;
+    box-shadow: 0 1px 3px var(--md-sys-color-shadow);
+    border: 1px solid var(--md-sys-color-outline);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Footer */
+.chart-container:hover {
+    box-shadow: 0 4px 12px var(--md-sys-color-shadow);
+}
+
+.chart-container canvas {
+    max-width: 100%;
+    height: auto !important;
+}
+
+/* Chart Wrapper for dynamic charts */
+.chart-wrapper {
+    position: relative;
+    width: 100%;
+    height: 350px;
+    padding: 24px;
+    background: var(--md-sys-color-surface);
+    border-radius: 16px;
+    box-shadow: 0 1px 3px var(--md-sys-color-shadow);
+    border: 1px solid var(--md-sys-color-outline);
+}
+
+.chart-wrapper canvas {
+    max-height: 300px !important;
+}
+
+.chart-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    margin-top: 24px;
+}
+
+/* Time Range Buttons - MD3 Filled Button */
+.time-range-btn {
+    background: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+    border: none;
+    padding: 10px 24px;
+    margin: 0 8px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 3px var(--md-sys-color-shadow);
+}
+
+.time-range-btn:hover {
+    box-shadow: 0 2px 6px var(--md-sys-color-shadow);
+}
+
+.time-range-btn.active {
+    background: var(--md-sys-color-secondary);
+    box-shadow: 0 2px 6px var(--md-sys-color-shadow);
+}
+
+/* Statistics Badge - MD3 */
+.stat-badge {
+    display: inline-block;
+    padding: 4px 12px;
+    background: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-primary);
+    border-radius: 16px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin-left: 8px;
+}
+
+/* Loading Animation */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+.loading {
+    animation: pulse 1.5s ease-in-out infinite;
+}
+
+/* Scrollbar Styling - MD3 */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--md-sys-color-surface-variant);
+    border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--md-sys-color-primary);
+    border-radius: 8px;
+    border: 2px solid var(--md-sys-color-surface-variant);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--md-sys-color-secondary);
+}
+
+/* Footer - MD3 */
 .footer {
     text-align: center;
-    margin-top: 40px;
+    margin-top: 48px;
-    font-size: 0.85em;
+    padding-top: 24px;
-    color: #6C757D;
+    border-top: 1px solid var(--md-sys-color-outline);
+    font-size: 0.875rem;
+    color: var(--md-sys-color-secondary);
+}
+
+.footer p {
+    margin: 8px 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 20px;
+        border-radius: 16px;
+    }
+    
+    h1 {
+        font-size: 2em;
+    }
+    
+    h2 {
+        font-size: 1.25em;
+    }
+    
+    .summary-cards {
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 12px;
+    }
+    
+    .card {
+        padding: 16px;
+    }
+    
+    .card h3 {
+        font-size: 0.8rem;
+        margin-bottom: 12px;
+    }
+    
+    .card p {
+        font-size: 1.5rem;
+    }
+    
+    table {
+        font-size: 0.8rem;
+    }
+    
+    th, td {
+        padding: 12px 8px;
+    }
+    
+    .tabs button {
+        padding: 12px 16px;
+        font-size: 13px;
+    }
+    
+    .time-range-btn {
+        padding: 8px 16px;
+        margin: 4px;
+        font-size: 13px;
+    }
+    
+    .chart-wrapper,
+    .chart-container {
+        height: 250px;
+    }
+}
+
+@media (max-width: 480px) {
+    .summary-cards {
+        grid-template-columns: 1fr 1fr;
+    }
+    
+    .card p {
+        font-size: 1.25rem;
+    }
 }

src/chat/utils/templates/report.html

@@ -4,15 +4,21 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ report_title }}</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>{{ report_css }}</style>
 </head>
 <body>
     <div class="container">
         <h1>{{ report_title }}</h1>
-        <p class="info-item"><strong>统计截止时间:</strong> {{ generation_time }}</p>
+        <p class="info-item"><strong>📅 统计截止时间:</strong> {{ generation_time }}</p>
         <div class="tabs">{{ tab_list }}</div>
         {{ tab_content }}
+        <div class="footer">
+            <p>💡 提示: 点击图表上的图例可以切换数据显示 | 🔄 数据每5分钟自动更新一次</p>
+            <p style="margin-top: 10px; color: #999;">Powered by MoFox-Bot Statistics Engine</p>
+        </div>
     </div>
     <script>
         const all_chart_data_json_string = `{{ all_chart_data|safe }}`;

src/chat/utils/templates/report.js

@@ -3,10 +3,17 @@ tab_content = document.getElementsByClassName("tab-content");
 tab_links = document.getElementsByClassName("tab-link");
 if (tab_content.length > 0) tab_content[0].classList.add("active");
 if (tab_links.length > 0) tab_links[0].classList.add("active");
+
 function showTab(evt, tabName) {
-    for (i = 0; i < tab_content.length; i++) tab_content[i].classList.remove("active");
+    for (i = 0; i < tab_content.length; i++) {
-    for (i = 0; i < tab_links.length; i++) tab_links[i].classList.remove("active");
+        tab_content[i].classList.remove("active");
+        tab_content[i].style.animation = '';
+    }
+    for (i = 0; i < tab_links.length; i++) {
+        tab_links[i].classList.remove("active");
+    }
     document.getElementById(tabName).classList.add("active");
+    document.getElementById(tabName).style.animation = 'slideIn 0.5s ease-out';
     evt.currentTarget.classList.add("active");
 }
 
@@ -22,10 +29,10 @@ document.addEventListener('DOMContentLoaded', function () {
 
     let currentCharts = {};
     const chartConfigs = {
-        totalCost: { id: 'totalCostChart', title: '总花费', yAxisLabel: '花费 (¥)', dataKey: 'total_cost_data', fill: true },
+        totalCost: { id: 'totalCostChart', title: '总花费趋势', yAxisLabel: '花费 (¥)', dataKey: 'total_cost_data', fill: true },
-        costByModule: { id: 'costByModuleChart', title: '各模块花费', yAxisLabel: '花费 (¥)', dataKey: 'cost_by_module', fill: false },
+        costByModule: { id: 'costByModuleChart', title: '各模块花费对比', yAxisLabel: '花费 (¥)', dataKey: 'cost_by_module', fill: false },
-        costByModel: { id: 'costByModelChart', title: '各模型花费', yAxisLabel: '花费 (¥)', dataKey: 'cost_by_model', fill: false },
+        costByModel: { id: 'costByModelChart', title: '各模型花费对比', yAxisLabel: '花费 (¥)', dataKey: 'cost_by_model', fill: false },
-        messageByChat: { id: 'messageByChatChart', title: '各聊天流消息数', yAxisLabel: '消息数', dataKey: 'message_by_chat', fill: false }
+        messageByChat: { id: 'messageByChatChart', title: '各聊天流消息统计', yAxisLabel: '消息数', dataKey: 'message_by_chat', fill: false }
     };
 
     window.switchTimeRange = function(timeRange) {
@@ -43,25 +50,107 @@ document.addEventListener('DOMContentLoaded', function () {
     function createChart(chartType, data, timeRange) {
         const config = chartConfigs[chartType];
         if (!data || !data[config.dataKey]) return;
-        const colors = ['#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c', '#34495e', '#e67e22', '#95a5a6', '#f1c40f'];
+        // Material Design 3 Blue/Gray Color Palette
+        const colors = ['#1976D2', '#546E7A', '#42A5F5', '#90CAF9', '#78909C', '#B0BEC5', '#1565C0', '#607D8B', '#2196F3', '#CFD8DC'];
         let datasets = [];
         if (chartType === 'totalCost') {
-            datasets = [{ label: config.title, data: data[config.dataKey], borderColor: colors[0], backgroundColor: 'rgba(52, 152, 219, 0.1)', tension: 0.4, fill: config.fill }];
+            datasets = [{ 
+                label: config.title, 
+                data: data[config.dataKey], 
+                borderColor: '#1976D2', 
+                backgroundColor: 'rgba(25, 118, 210, 0.1)', 
+                tension: 0.3, 
+                fill: config.fill,
+                borderWidth: 2,
+                pointRadius: 3,
+                pointHoverRadius: 5,
+                pointBackgroundColor: '#1976D2',
+                pointBorderColor: '#fff',
+                pointBorderWidth: 2
+            }];
         } else {
             let i = 0;
             Object.entries(data[config.dataKey]).forEach(([name, chartData]) => {
-                datasets.push({ label: name, data: chartData, borderColor: colors[i % colors.length], backgroundColor: colors[i % colors.length] + '20', tension: 0.4, fill: config.fill });
+                datasets.push({ 
+                    label: name, 
+                    data: chartData, 
+                    borderColor: colors[i % colors.length], 
+                    backgroundColor: colors[i % colors.length] + '30', 
+                    tension: 0.4, 
+                    fill: config.fill,
+                    borderWidth: 2,
+                    pointRadius: 3,
+                    pointHoverRadius: 5,
+                    pointBackgroundColor: colors[i % colors.length],
+                    pointBorderColor: '#fff',
+                    pointBorderWidth: 1
+                });
                 i++;
             });
         }
-        currentCharts[chartType] = new Chart(document.getElementById(config.id), {
+        const canvas = document.getElementById(config.id);
+        if (!canvas) return;
+        
+        currentCharts[chartType] = new Chart(canvas, {
             type: 'line',
             data: { labels: data.time_labels, datasets: datasets },
             options: {
                 responsive: true,
-                plugins: { title: { display: true, text: `${timeRange}内${config.title}趋势`, font: { size: 16 } }, legend: { display: chartType !== 'totalCost', position: 'top' } },
+                maintainAspectRatio: true,
-                scales: { x: { title: { display: true, text: '时间' }, ticks: { maxTicksLimit: 12 } }, y: { title: { display: true, text: config.yAxisLabel }, beginAtZero: true } },
+                aspectRatio: 2.5,
-                interaction: { intersect: false, mode: 'index' }
+                plugins: { 
+                    title: { 
+                        display: true, 
+                        text: `${config.title}`, 
+                        font: { size: 16, weight: '500' },
+                        color: '#1C1B1F',
+                        padding: { top: 8, bottom: 16 }
+                    }, 
+                    legend: { 
+                        display: chartType !== 'totalCost', 
+                        position: 'top',
+                        labels: {
+                            usePointStyle: true,
+                            padding: 15,
+                            font: { size: 12 }
+                        }
+                    },
+                    tooltip: {
+                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                        padding: 12,
+                        titleFont: { size: 14 },
+                        bodyFont: { size: 13 },
+                        cornerRadius: 8
+                    }
+                },
+                scales: { 
+                    x: { 
+                        title: { 
+                            display: true, 
+                            text: '⏰ 时间',
+                            font: { size: 13, weight: 'bold' }
+                        },
+                        ticks: { maxTicksLimit: 12 },
+                        grid: { color: 'rgba(0, 0, 0, 0.05)' }
+                    }, 
+                    y: { 
+                        title: { 
+                            display: true, 
+                            text: config.yAxisLabel,
+                            font: { size: 13, weight: 'bold' }
+                        },
+                        beginAtZero: true,
+                        grid: { color: 'rgba(0, 0, 0, 0.05)' }
+                    } 
+                },
+                interaction: { 
+                    intersect: false, 
+                    mode: 'index' 
+                },
+                animation: {
+                    duration: 1000,
+                    easing: 'easeInOutQuart'
+                }
             }
         });
     }
@@ -96,21 +185,64 @@ document.addEventListener('DOMContentLoaded', function () {
         const providerCtx = document.getElementById(`providerCostPieChart_${period_id}`);
         if (providerCtx && providerCostData && providerCostData.data && providerCostData.data.length > 0) {
             new Chart(providerCtx, {
-                type: 'pie',
+                type: 'doughnut',
                 data: {
                     labels: providerCostData.labels,
                     datasets: [{
                         label: '按供应商花费',
                         data: providerCostData.data,
                         backgroundColor: colors,
+                        borderColor: '#FFFFFF',
+                        borderWidth: 2,
+                        hoverOffset: 8
                     }]
                 },
                 options: {
                     responsive: true,
-                    maintainAspectRatio: false,
+                    maintainAspectRatio: true,
+                    aspectRatio: 1.5,
                     plugins: {
-                        title: { display: true, text: '按供应商花费分布', font: { size: 16 } },
+                        title: { 
-                        legend: { position: 'top' }
+                            display: true, 
+                            text: '按供应商花费分布', 
+                            font: { size: 14, weight: '500' },
+                            color: '#1C1B1F',
+                            padding: { top: 8, bottom: 16 }
+                        },
+                        legend: { 
+                            position: 'right',
+                            labels: {
+                                usePointStyle: true,
+                                padding: 15,
+                                font: { size: 12 }
+                            }
+                        },
+                        tooltip: {
+                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                            padding: 12,
+                            titleFont: { size: 14 },
+                            bodyFont: { size: 13 },
+                            cornerRadius: 8,
+                            callbacks: {
+                                label: function(context) {
+                                    let label = context.label || '';
+                                    if (label) {
+                                        label += ': ';
+                                    }
+                                    label += context.parsed.toFixed(4) + ' ¥';
+                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                                    const percentage = ((context.parsed / total) * 100).toFixed(2);
+                                    label += ` (${percentage}%)`;
+                                    return label;
+                                }
+                            }
+                        }
+                    },
+                    animation: {
+                        animateRotate: true,
+                        animateScale: true,
+                        duration: 1000,
+                        easing: 'easeInOutQuart'
                     }
                 }
             });
@@ -127,17 +259,55 @@ document.addEventListener('DOMContentLoaded', function () {
                         label: '按模型花费',
                         data: modelCostData.data,
                         backgroundColor: colors,
+                        borderColor: colors,
+                        borderWidth: 2,
+                        borderRadius: 8,
+                        hoverBackgroundColor: colors.map(c => c + 'dd')
                     }]
                 },
                 options: {
                     responsive: true,
-                    maintainAspectRatio: false,
+                    maintainAspectRatio: true,
+                    aspectRatio: 1.5,
                     plugins: {
-                        title: { display: true, text: '按模型花费排行', font: { size: 16 } },
+                        title: { 
-                        legend: { display: false }
+                            display: true, 
+                            text: '按模型花费排行', 
+                            font: { size: 14, weight: '500' },
+                            color: '#1C1B1F',
+                            padding: { top: 8, bottom: 16 }
+                        },
+                        legend: { display: false },
+                        tooltip: {
+                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                            padding: 12,
+                            titleFont: { size: 14 },
+                            bodyFont: { size: 13 },
+                            cornerRadius: 8,
+                            callbacks: {
+                                label: function(context) {
+                                    return context.dataset.label + ': ' + context.parsed.y.toFixed(4) + ' ¥';
+                                }
+                            }
+                        }
                     },
                     scales: {
-                        y: { beginAtZero: true, title: { display: true, text: '花费 (¥)' } }
+                        x: {
+                            grid: { display: false }
+                        },
+                        y: { 
+                            beginAtZero: true, 
+                            title: { 
+                                display: true, 
+                                text: '💰 花费 (¥)',
+                                font: { size: 13, weight: 'bold' }
+                            },
+                            grid: { color: 'rgba(0, 0, 0, 0.05)' }
+                        }
+                    },
+                    animation: {
+                        duration: 1000,
+                        easing: 'easeInOutQuart'
                     }
                 }
             });

src/chat/utils/templates/static_charts.html

@@ -1,9 +1,9 @@
-<h2>数据总览</h2>
+<h2>📊 数据总览</h2>
-<div class="chart-grid">
+<div style="display: flex; flex-direction: column; gap: 24px;">
-    <div class="chart-container">
+    <div class="chart-container" style="height: 300px;">
         <canvas id="providerCostPieChart_{{ period_id }}"></canvas>
     </div>
-    <div class="chart-container">
+    <div class="chart-container" style="height: 300px;">
         <canvas id="modelCostBarChart_{{ period_id }}"></canvas>
     </div>
 </div>

src/chat/utils/templates/tab_content.html

@@ -2,24 +2,24 @@
     <div class="dashboard-layout">
         <div class="main-content">
             <p class="info-item">
-                <strong>统计时段: </strong>
+                <strong>📅 统计时段: </strong>
                 {{ start_time }} ~ {{ end_time }}
             </p>
             {{ summary_cards }}
 
-            <h2>按模型分类统计</h2>
+            <h2>🤖 按模型分类统计</h2>
             <table>
                 <tr><th>模型名称</th><th>调用次数</th><th>平均Token数</th><th>Token总量</th><th>TPS</th><th>每K Token成本</th><th>累计花费</th><th>平均耗时(秒)</th></tr>
                 <tbody>{{ model_rows }}</tbody>
             </table>
 
-            <h2>按供应商分类统计</h2>
+            <h2>🏢 按供应商分类统计</h2>
             <table>
                 <tr><th>供应商名称</th><th>调用次数</th><th>Token总量</th><th>TPS</th><th>每K Token成本</th><th>累计花费</th></tr>
                 <tbody>{{ provider_rows }}</tbody>
             </table>
 
-            <h2>按模块分类统计</h2>
+            <h2>🔧 按模块分类统计</h2>
             <table>
                 <thead>
                     <tr><th>模块名称</th><th>调用次数</th><th>输入Token</th><th>输出Token</th><th>Token总量</th><th>累计花费</th><th>平均耗时(秒)</th><th>标准差(秒)</th></tr>
@@ -27,7 +27,7 @@
                 <tbody>{{ module_rows }}</tbody>
             </table>
 
-            <h2>按请求类型分类统计</h2>
+            <h2>📝 按请求类型分类统计</h2>
             <table>
                 <thead>
                     <tr><th>请求类型</th><th>调用次数</th><th>输入Token</th><th>输出Token</th><th>Token总量</th><th>累计花费</th><th>平均耗时(秒)</th><th>标准差(秒)</th></tr>
@@ -35,16 +35,32 @@
                 <tbody>{{ type_rows }}</tbody>
             </table>
 
-            <h2>聊天消息统计</h2>
+            <h2>💬 聊天消息统计</h2>
             <table>
                 <thead>
                     <tr><th>联系人/群组名称</th><th>消息数量</th></tr>
                 </thead>
                 <tbody>{{ chat_rows }}</tbody>
             </table>
-        </div>
+
-        <div class="sidebar-content">
+            <h2>🎓 大模型效率分析</h2>
-            {{ static_charts }}
+            <div class="info-item">
+                <strong>💡 提示:</strong> Token效率表示输出Token与输入Token的比率,比率越高说明模型输出越丰富
+            </div>
+            <table>
+                <thead>
+                    <tr>
+                        <th>指标</th>
+                        <th>数值</th>
+                        <th>说明</th>
+                    </tr>
+                </thead>
+                <tbody>{{ efficiency_rows }}</tbody>
+            </table>
         </div>
     </div>
+    
+    <div class="sidebar-content">
+        {{ static_charts }}
+    </div>
 </div>