From 46f88ebc70ab94647443c826e8f8940f72c140e5 Mon Sep 17 00:00:00 2001
From: minecraft1024a <wwwww95915@qq.com>
Date: Sun, 30 Nov 2025 13:00:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(report):=20=E9=87=8D=E6=9E=84=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E6=8A=A5=E5=91=8A=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=BC=95?=
 =?UTF-8?q?=E5=85=A5=E5=85=A8=E6=96=B0=E7=8E=B0=E4=BB=A3=E5=8C=96UI?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

本次提交对统计报告页面进行了一次全面的视觉和代码重构，旨在提升用户体验和可维护性。

主要更新包括：
- **UI/UX 重构**: 废弃原有的 Material Design 3 主题，采用更简洁、现代的仪表盘风格，优化了色彩、字体和布局，提升了整体视觉效果和数据可读性。
- **布局优化**: 使用 CSS Grid 构建主布局，提高了响应式设计的灵活性和健壮性。
- **图表美化**: 更新了所有图表的视觉样式，包括新的调色板、交互式工具提示和更清晰的坐标轴。
- **代码优化**:
  - 将图表数据从内联 JavaScript 字符串改为通过 `<script type="application/json">` 标签注入，更加安全和规范。
  - 实现了图表的懒加载，仅在切换到对应标签页时才进行初始化，提升了初始加载速度。
  - 移除大量内联样式，统一使用 CSS 类进行管理，增强了代码的可维护性。
---
 src/chat/utils/templates/charts_tab.html    |  26 +-
 src/chat/utils/templates/report.css         | 726 +++++++++-----------
 src/chat/utils/templates/report.html        |  21 +-
 src/chat/utils/templates/report.js          | 180 +++--
 src/chat/utils/templates/static_charts.html |  64 +-
 src/chat/utils/templates/tab_content.html   | 137 ++--
 6 files changed, 564 insertions(+), 590 deletions(-)

diff --git a/src/chat/utils/templates/charts_tab.html b/src/chat/utils/templates/charts_tab.html
index 5ad4c8709..d1b2ac686 100644
--- a/src/chat/utils/templates/charts_tab.html
+++ b/src/chat/utils/templates/charts_tab.html
@@ -1,27 +1,33 @@
 <div id="charts" class="tab-content">
     <h2>📈 数据图表</h2>
-    <p class="info-item">
-        <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>
+    <div class="info-item" style="margin-bottom: 2rem;">
+        <span class="material-icons" style="font-size: 18px;">show_chart</span>
+        <strong>动态图表:</strong> 选择不同的时间范围查看数据趋势变化
+    </div>
+    
+    <div class="time-range-controls">
+        <span style="margin-right: 1rem; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 0.5rem;">
+            <span class="material-icons" style="font-size: 18px;">schedule</span>
+            时间范围:
+        </span>
         <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: 30px; display: flex; flex-direction: column; gap: 32px;">
+    
+    <div class="chart-grid" style="grid-template-columns: 1fr;">
         <div class="chart-wrapper">
-            <canvas id="totalCostChart" style="max-height: 350px;"></canvas>
+            <canvas id="totalCostChart"></canvas>
         </div>
         <div class="chart-wrapper">
-            <canvas id="costByModuleChart" style="max-height: 350px;"></canvas>
+            <canvas id="costByModuleChart"></canvas>
         </div>
         <div class="chart-wrapper">
-            <canvas id="costByModelChart" style="max-height: 350px;"></canvas>
+            <canvas id="costByModelChart"></canvas>
         </div>
         <div class="chart-wrapper">
-            <canvas id="messageByChatChart" style="max-height: 350px;"></canvas>
+            <canvas id="messageByChatChart"></canvas>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/chat/utils/templates/report.css b/src/chat/utils/templates/report.css
index 0cb096514..7cd676416 100644
--- a/src/chat/utils/templates/report.css
+++ b/src/chat/utils/templates/report.css
@@ -1,490 +1,378 @@
-/* Material Design 3 - Blue White Gray Theme */
+/* Modern Dashboard Theme - 2025 Edition */
 :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);
+    /* Core Colors */
+    --primary-color: #2563eb;
+    --primary-light: #eff6ff;
+    --primary-dark: #1e40af;
+    --secondary-color: #64748b;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --danger-color: #ef4444;
+    
+    /* Backgrounds */
+    --bg-body: #f8fafc;
+    --bg-card: #ffffff;
+    --bg-sidebar: #ffffff;
+    
+    /* Text */
+    --text-primary: #0f172a;
+    --text-secondary: #475569;
+    --text-muted: #94a3b8;
+    
+    /* Borders & Shadows */
+    --border-color: #e2e8f0;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    
+    /* Layout */
+    --radius-lg: 1rem;
+    --radius-md: 0.75rem;
+    --radius-sm: 0.5rem;
+}
+
+/* Reset & Base Styles */
+* {
+    box-sizing: border-box;
 }
 
-/* General Body Styles */
 body {
-    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
     margin: 0;
-    padding: 20px;
-    background: var(--md-sys-color-background);
-    color: var(--md-sys-color-on-surface);
-    line-height: 1.6;
-    min-height: 100vh;
+    padding: 0;
+    background-color: var(--bg-body);
+    color: var(--text-primary);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
 }
 
-/* Main Container */
+/* Layout Container */
 .container {
-    max-width: 95%;
-    margin: 20px auto;
-    background-color: var(--md-sys-color-surface);
-    padding: 40px;
-    border-radius: 28px;
-    box-shadow: 0 4px 16px var(--md-sys-color-shadow);
-    animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-}
-
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateY(-8px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-/* Dashboard Layout */
-.dashboard-layout {
-    display: flex;
-    gap: 32px;
-    align-items: start;
-    position: relative;
-}
-
-.main-content {
-    flex: 1;
-    min-width: 0;
-}
-
-.sidebar-content {
-    width: 380px;
-    min-width: 380px;
-    flex-shrink: 0;
-    padding: 24px;
-    background: linear-gradient(135deg, #FAFAFA 0%, #FFFFFF 100%);
-    border-radius: 20px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
-    border: 1px solid var(--md-sys-color-outline);
-}
-
-/* 自定义侧边栏滚动条 */
-.sidebar-content::-webkit-scrollbar {
-    width: 6px;
-}
-
-.sidebar-content::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.sidebar-content::-webkit-scrollbar-thumb {
-    background: var(--md-sys-color-outline);
-    border-radius: 3px;
-}
-
-.sidebar-content::-webkit-scrollbar-thumb:hover {
-    background: var(--md-sys-color-primary);
-}
-
-/* Typography - Material Design 3 */
-h1, h2 {
-    color: var(--md-sys-color-on-surface);
-    padding-bottom: 10px;
-    margin-top: 0;
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 2rem;
 }
 
+/* Header Section */
 h1 {
-    text-align: center;
-    font-size: 2.5em;
-    margin-bottom: 30px;
-    color: var(--md-sys-color-primary);
-    font-weight: 500;
-    letter-spacing: 0;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+    text-align: left;
+    letter-spacing: -0.025em;
 }
 
-h2 {
-    font-size: 1.5em;
-    margin-top: 40px;
-    margin-bottom: 20px;
-    border-bottom: 2px solid var(--md-sys-color-primary);
-    padding-bottom: 12px;
-    color: var(--md-sys-color-on-surface);
-    font-weight: 500;
+.header-meta {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    color: var(--text-secondary);
+    font-size: 0.875rem;
 }
 
-/* Info Banners - MD3 Style */
 .info-item {
-    background: var(--md-sys-color-primary-container);
-    padding: 16px 24px;
-    border-radius: 16px;
-    margin-bottom: 24px;
-    font-size: 0.95em;
-    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: var(--md-sys-color-primary);
+    background: var(--primary-light);
+    color: var(--primary-dark);
+    padding: 0.75rem 1.25rem;
+    border-radius: var(--radius-md);
     font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    border: 1px solid rgba(37, 99, 235, 0.1);
 }
 
-/* Tabs - MD3 Style */
+/* Navigation Tabs */
 .tabs {
-    border-bottom: 1px solid var(--md-sys-color-outline);
     display: flex;
-    margin-bottom: 32px;
-    flex-wrap: wrap;
-    gap: 8px;
+    gap: 0.5rem;
+    margin-bottom: 2rem;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 1px;
+    overflow-x: auto;
+    scrollbar-width: none; /* Firefox */
+}
+
+.tabs::-webkit-scrollbar {
+    display: none; /* Chrome/Safari */
 }
 
 .tabs button {
-    background: none;
+    background: transparent;
     border: none;
-    outline: none;
-    padding: 16px 24px;
-    cursor: pointer;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    font-size: 14px;
-    color: var(--md-sys-color-on-surface);
-    border-radius: 16px 16px 0 0;
-    margin-bottom: -1px;
+    padding: 0.75rem 1.25rem;
+    font-size: 0.95rem;
     font-weight: 500;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+    transition: all 0.2s ease;
     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);
+    white-space: nowrap;
 }
 
 .tabs button:hover {
-    background: var(--md-sys-color-surface-variant);
+    color: var(--primary-color);
+    background-color: rgba(37, 99, 235, 0.05);
 }
 
 .tabs button.active {
-    color: var(--md-sys-color-primary);
+    color: var(--primary-color);
     font-weight: 600;
 }
 
 .tabs button.active::after {
-    transform: scaleX(1);
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: var(--primary-color);
+}
+
+/* Summary Cards Grid */
+.summary-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.card {
+    background: var(--bg-card);
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--border-color);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.card h3 {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    margin: 0 0 0.5rem 0;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.card p {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin: 0;
+    line-height: 1.2;
+}
+
+/* Dashboard Layout */
+.dashboard-layout {
+    display: grid;
+    grid-template-columns: 1fr 350px;
+    gap: 2rem;
+    align-items: start;
+}
+
+.main-content {
+    min-width: 0; /* Prevent grid blowout */
+}
+
+.sidebar-content {
+    background: var(--bg-sidebar);
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-sm);
+    position: sticky;
+    top: 2rem;
+    max-height: calc(100vh - 4rem);
+    overflow-y: auto;
+}
+
+/* Charts */
+.chart-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.chart-container, .chart-wrapper {
+    background: var(--bg-card);
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-sm);
+    position: relative;
+    height: auto;
+    min-height: 350px;
+}
+
+.chart-container h3, .chart-wrapper h3 {
+    margin-top: 0;
+    font-size: 1.1rem;
+    color: var(--text-primary);
+    margin-bottom: 1rem;
+}
+
+/* Tables */
+.table-container {
+    background: var(--bg-card);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-sm);
+    overflow: hidden;
+    margin-bottom: 2rem;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+}
+
+th {
+    background: var(--bg-body);
+    padding: 1rem;
+    text-align: left;
+    font-weight: 600;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border-color);
+    white-space: nowrap;
+}
+
+td {
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+    color: var(--text-primary);
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+tr:hover td {
+    background-color: var(--primary-light);
+}
+
+/* Section Headers */
+h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 2.5rem 0 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+h2::before {
+    content: '';
+    display: block;
+    width: 4px;
+    height: 24px;
+    background: var(--primary-color);
+    border-radius: 2px;
+}
+
+/* Time Range Buttons */
+.time-range-controls {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.time-range-btn {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    padding: 0.5rem 1rem;
+    border-radius: 2rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.time-range-btn:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.time-range-btn.active {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
+}
+
+/* Footer */
+.footer {
+    text-align: center;
+    margin-top: 4rem;
+    padding-top: 2rem;
+    border-top: 1px solid var(--border-color);
+    color: var(--text-muted);
+    font-size: 0.875rem;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
 .tab-content {
     display: none;
-    padding-top: 10px;
 }
 
 .tab-content.active {
     display: block;
+    animation: fadeIn 0.4s ease-out;
 }
 
-/* Summary Cards - MD3 Style */
-.summary-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 16px;
-    margin: 32px 0;
-}
-
-.card {
-    background: var(--md-sys-color-surface);
-    padding: 24px;
-    border-radius: 16px;
-    text-align: center;
-    border: 1px solid var(--md-sys-color-outline);
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 1px 3px var(--md-sys-color-shadow);
-}
-
-.card:hover {
-    box-shadow: 0 4px 12px var(--md-sys-color-shadow);
-    transform: translateY(-4px);
-    border-color: var(--md-sys-color-primary);
-}
-
-.card h3 {
-    margin: 0 0 16px;
-    font-size: 0.875rem;
-    color: var(--md-sys-color-secondary);
-    font-weight: 500;
-    letter-spacing: 0.1px;
-}
-
-.card p {
-    margin: 0;
-    font-size: 2rem;
-    font-weight: 600;
-    color: var(--md-sys-color-primary);
-    line-height: 1.2;
-}
-
-/* Tables - MD3 Style */
-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 24px;
-    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: 16px;
-    text-align: left;
-    border-bottom: 1px solid var(--md-sys-color-outline);
-}
-
-th {
-    background: var(--md-sys-color-primary);
-    color: var(--md-sys-color-on-primary);
-    font-weight: 500;
-    font-size: 0.875rem;
-    letter-spacing: 0.1px;
-}
-
-tbody tr {
-    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-tr:nth-child(even) {
-    background-color: var(--md-sys-color-surface-variant);
-}
-
-tbody tr:hover {
-    background-color: var(--md-sys-color-primary-container);
-}
-
-/* Chart Container - MD3 Style */
-.chart-container {
-    position: relative;
-    width: 100%;
-    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);
-}
-
-.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: 48px;
-    padding-top: 24px;
-    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 */
+/* Responsive */
 @media (max-width: 1200px) {
     .dashboard-layout {
-        flex-direction: column;
-    }
-    
-    .main-content {
-        margin-right: 0;
+        grid-template-columns: 1fr;
     }
     
     .sidebar-content {
         position: static;
-        width: 100%;
-        min-width: 0;
         max-height: none;
-        right: auto;
+        margin-top: 2rem;
     }
 }
 
 @media (max-width: 768px) {
     .container {
-        padding: 20px;
-        border-radius: 16px;
+        padding: 1rem;
     }
     
-    h1 {
-        font-size: 2em;
+    .chart-grid {
+        grid-template-columns: 1fr;
     }
     
-    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;
+    h1 {
+        font-size: 1.5rem;
+    }
+    
+    .table-container {
+        overflow-x: auto;
     }
 }
diff --git a/src/chat/utils/templates/report.html b/src/chat/utils/templates/report.html
index 23726641b..67279d6ed 100644
--- a/src/chat/utils/templates/report.html
+++ b/src/chat/utils/templates/report.html
@@ -4,26 +4,31 @@
     <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 rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;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>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
     <style>{{ report_css }}</style>
 </head>
 <body>
     <div class="container">
         <h1>{{ report_title }}</h1>
-        <p class="info-item"><strong>📅 统计截止时间:</strong> {{ generation_time }}</p>
+        <div class="header-meta">
+            <div class="info-item">
+                <span class="material-icons" style="font-size: 18px;">schedule</span>
+                <strong>统计截止时间:</strong> {{ generation_time }}
+            </div>
+        </div>
         <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>
+            <p style="margin-top: 10px; color: #94a3b8;">Powered by MoFox-Bot Statistics Engine</p>
         </div>
     </div>
-    <script>
-        const all_chart_data_json_string = `{{ all_chart_data|safe }}`;
-        const static_chart_data_json_string = `{{ static_chart_data|safe }}`;
-    </script>
+    <script type="application/json" id="all_chart_data">{{ all_chart_data|safe }}</script>
+    <script type="application/json" id="static_chart_data">{{ static_chart_data|safe }}</script>
     <script>{{ report_js }}</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/chat/utils/templates/report.js b/src/chat/utils/templates/report.js
index 355f92ad5..e517e5513 100644
--- a/src/chat/utils/templates/report.js
+++ b/src/chat/utils/templates/report.js
@@ -22,20 +22,29 @@ function showTab(evt, tabName) {
     evt.currentTarget.classList.add("active");
     
     // 懒加载：只在第一次切换到tab时初始化该tab的图表
-    if (!initializedTabs.has(tabName) && tabName !== 'charts' && initializeStaticChartsForPeriod) {
-        initializeStaticChartsForPeriod(tabName);
+    if (!initializedTabs.has(tabName)) {
+        if (tabName === 'charts') {
+            if (window.initChartsTab) window.initChartsTab();
+        } else if (initializeStaticChartsForPeriod) {
+            initializeStaticChartsForPeriod(tabName);
+        }
         initializedTabs.add(tabName);
     }
 }
 
 document.addEventListener('DOMContentLoaded', function () {
- // Chart data is injected by python via the HTML template.
-    let allChartData = {};
-    try {
-        allChartData = JSON.parse(all_chart_data_json_string);
-    } catch (e) {
-        console.error("Failed to parse all_chart_data:", e);
-        console.error("Problematic all_chart_data string:", all_chart_data_json_string);
+    // Chart data is injected by python via the HTML template.
+    let allChartData = null;
+    function getAllChartData() {
+        if (!allChartData) {
+            try {
+                const el = document.getElementById('all_chart_data');
+                if (el) allChartData = JSON.parse(el.textContent);
+            } catch (e) {
+                console.error("Failed to parse all_chart_data:", e);
+            }
+        }
+        return allChartData || {};
     }
 
     let currentCharts = {};
@@ -49,7 +58,10 @@ document.addEventListener('DOMContentLoaded', function () {
     window.switchTimeRange = function(timeRange) {
         document.querySelectorAll('.time-range-btn').forEach(btn => btn.classList.remove('active'));
         event.target.classList.add('active');
-        updateAllCharts(allChartData[timeRange], timeRange);
+        const data = getAllChartData();
+        if (data && data[timeRange]) {
+            updateAllCharts(data[timeRange], timeRange);
+        }
     }
 
     function updateAllCharts(data, timeRange) {
@@ -61,21 +73,28 @@ document.addEventListener('DOMContentLoaded', function () {
     function createChart(chartType, data, timeRange) {
         const config = chartConfigs[chartType];
         if (!data || !data[config.dataKey]) return;
-        // Material Design 3 Blue/Gray Color Palette
-        const colors = ['#1976D2', '#546E7A', '#42A5F5', '#90CAF9', '#78909C', '#B0BEC5', '#1565C0', '#607D8B', '#2196F3', '#CFD8DC'];
+        
+        // Modern Theme Colors
+        const colors = [
+            '#2563eb', '#3b82f6', '#60a5fa', '#93c5fd', // Blue
+            '#0891b2', '#06b6d4', '#22d3ee', '#67e8f9', // Cyan
+            '#059669', '#10b981', '#34d399', '#6ee7b7', // Emerald
+            '#7c3aed', '#8b5cf6', '#a78bfa', '#c4b5fd'  // Violet
+        ];
+        
         let datasets = [];
         if (chartType === 'totalCost') {
             datasets = [{ 
                 label: config.title, 
                 data: data[config.dataKey], 
-                borderColor: '#1976D2', 
-                backgroundColor: 'rgba(25, 118, 210, 0.1)', 
-                tension: 0.3, 
+                borderColor: '#2563eb', 
+                backgroundColor: 'rgba(37, 99, 235, 0.1)', 
+                tension: 0.4, 
                 fill: config.fill,
                 borderWidth: 2,
-                pointRadius: 3,
-                pointHoverRadius: 5,
-                pointBackgroundColor: '#1976D2',
+                pointRadius: 0,
+                pointHoverRadius: 6,
+                pointBackgroundColor: '#2563eb',
                 pointBorderColor: '#fff',
                 pointBorderWidth: 2
             }];
@@ -86,15 +105,15 @@ document.addEventListener('DOMContentLoaded', function () {
                     label: name, 
                     data: chartData, 
                     borderColor: colors[i % colors.length], 
-                    backgroundColor: colors[i % colors.length] + '30', 
+                    backgroundColor: colors[i % colors.length] + '20', 
                     tension: 0.4, 
                     fill: config.fill,
                     borderWidth: 2,
-                    pointRadius: 3,
-                    pointHoverRadius: 5,
+                    pointRadius: 0,
+                    pointHoverRadius: 6,
                     pointBackgroundColor: colors[i % colors.length],
                     pointBorderColor: '#fff',
-                    pointBorderWidth: 1
+                    pointBorderWidth: 2
                 });
                 i++;
             });
@@ -102,56 +121,79 @@ document.addEventListener('DOMContentLoaded', function () {
         const canvas = document.getElementById(config.id);
         if (!canvas) return;
         
+        // Destroy existing chart if any
+        if (currentCharts[chartType]) {
+            currentCharts[chartType].destroy();
+        }
+
         currentCharts[chartType] = new Chart(canvas, {
             type: 'line',
             data: { labels: data.time_labels, datasets: datasets },
             options: {
                 responsive: true,
-                maintainAspectRatio: true,
-                aspectRatio: 2.5,
+                maintainAspectRatio: false,
                 plugins: { 
                     title: { 
                         display: true, 
                         text: `${config.title}`, 
-                        font: { size: 16, weight: '500' },
-                        color: '#1C1B1F',
-                        padding: { top: 8, bottom: 16 }
+                        font: { size: 16, weight: '600', family: "'Inter', sans-serif" },
+                        color: '#0f172a',
+                        padding: { top: 10, bottom: 20 },
+                        align: 'start'
                     }, 
                     legend: { 
                         display: chartType !== 'totalCost', 
                         position: 'top',
+                        align: 'end',
                         labels: {
                             usePointStyle: true,
-                            padding: 15,
-                            font: { size: 12 }
+                            padding: 20,
+                            font: { size: 12, family: "'Inter', sans-serif" },
+                            boxWidth: 8,
+                            boxHeight: 8
                         }
                     },
                     tooltip: {
-                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                        backgroundColor: '#ffffff',
+                        titleColor: '#0f172a',
+                        bodyColor: '#475569',
+                        borderColor: '#e2e8f0',
+                        borderWidth: 1,
                         padding: 12,
-                        titleFont: { size: 14 },
-                        bodyFont: { size: 13 },
-                        cornerRadius: 8
+                        titleFont: { size: 13, weight: '600' },
+                        bodyFont: { size: 12 },
+                        cornerRadius: 8,
+                        displayColors: true,
+                        boxPadding: 4
                     }
                 },
                 scales: { 
                     x: { 
-                        title: { 
-                            display: true, 
-                            text: '⏰ 时间',
-                            font: { size: 13, weight: 'bold' }
+                        grid: { display: false },
+                        ticks: { 
+                            maxTicksLimit: 8,
+                            color: '#94a3b8',
+                            font: { size: 11 }
                         },
-                        ticks: { maxTicksLimit: 12 },
-                        grid: { color: 'rgba(0, 0, 0, 0.05)' }
+                        border: { display: false }
                     }, 
                     y: { 
                         title: { 
                             display: true, 
                             text: config.yAxisLabel,
-                            font: { size: 13, weight: 'bold' }
+                            color: '#94a3b8',
+                            font: { size: 11, weight: '500' }
                         },
                         beginAtZero: true,
-                        grid: { color: 'rgba(0, 0, 0, 0.05)' }
+                        grid: { 
+                            color: '#f1f5f9',
+                            borderDash: [4, 4]
+                        },
+                        ticks: {
+                            color: '#94a3b8',
+                            font: { size: 11 }
+                        },
+                        border: { display: false }
                     } 
                 },
                 interaction: { 
@@ -159,44 +201,54 @@ document.addEventListener('DOMContentLoaded', function () {
                     mode: 'index' 
                 },
                 animation: {
-                    duration: 1000,
-                    easing: 'easeInOutQuart'
+                    duration: 800,
+                    easing: 'easeOutQuart'
                 }
             }
         });
     }
 
-    if (allChartData['24h']) {
-        updateAllCharts(allChartData['24h'], '24h');
-        // Activate the 24h button by default
-        document.querySelectorAll('.time-range-btn').forEach(btn => {
-            if (btn.textContent.includes('24小时')) {
-                btn.classList.add('active');
-            } else {
-                btn.classList.remove('active');
-            }
-        });
-    }
+    // Function to initialize charts tab
+    window.initChartsTab = function() {
+        const data = getAllChartData();
+        if (data['24h']) {
+            updateAllCharts(data['24h'], '24h');
+            // Activate the 24h button by default
+            document.querySelectorAll('.time-range-btn').forEach(btn => {
+                if (btn.textContent.includes('24小时')) {
+                    btn.classList.add('active');
+                } else {
+                    btn.classList.remove('active');
+                }
+            });
+        }
+    };
 
     // Static charts
-    let staticChartData = {};
-    try {
-        staticChartData = JSON.parse(static_chart_data_json_string);
-    } catch (e) {
-        console.error("Failed to parse static_chart_data:", e);
-        console.error("Problematic static_chart_data string:", static_chart_data_json_string);
+    let staticChartData = null;
+    function getStaticChartData() {
+        if (!staticChartData) {
+            try {
+                const el = document.getElementById('static_chart_data');
+                if (el) staticChartData = JSON.parse(el.textContent);
+            } catch (e) {
+                console.error("Failed to parse static_chart_data:", e);
+            }
+        }
+        return staticChartData || {};
     }
 
     // 懒加载函数：只初始化指定tab的静态图表
     // 将函数赋值给外部变量，使得showTab可以调用
     initializeStaticChartsForPeriod = function(period_id) {
-        if (!staticChartData[period_id]) {
+        const data = getStaticChartData();
+        if (!data[period_id]) {
             console.warn(`No static chart data for period: ${period_id}`);
             return;
         }
-        const providerCostData = staticChartData[period_id].provider_cost_data;
-        const moduleCostData = staticChartData[period_id].module_cost_data;
-        const modelCostData = staticChartData[period_id].model_cost_data;
+        const providerCostData = data[period_id].provider_cost_data;
+        const moduleCostData = data[period_id].module_cost_data;
+        const modelCostData = data[period_id].model_cost_data;
         // 扩展的Material Design调色板 - 包含多种蓝色系和其他配色
         const colors = [
             '#1976D2', '#42A5F5', '#2196F3', '#64B5F6', '#90CAF9', '#BBDEFB',  // 蓝色系
diff --git a/src/chat/utils/templates/static_charts.html b/src/chat/utils/templates/static_charts.html
index a31d890cc..04152e7c5 100644
--- a/src/chat/utils/templates/static_charts.html
+++ b/src/chat/utils/templates/static_charts.html
@@ -1,64 +1,68 @@
-<div style="margin: -24px -24px 0 -24px; padding: 20px 24px; background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%); border-radius: 20px 20px 0 0; margin-bottom: 20px;">
-    <h2 style="margin: 0 0 8px 0; color: white; font-size: 1.3em; font-weight: 500; display: flex; align-items: center; gap: 8px;">
-        <span style="font-size: 1.2em;">📊</span> 数据可视化
+<div style="margin-bottom: 1.5rem;">
+    <h2 style="margin-top: 0; font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
+        <span class="material-icons" style="color: var(--primary-color);">analytics</span>
+        数据可视化
     </h2>
-    <p style="margin: 0; color: rgba(255,255,255,0.9); font-size: 0.85em; display: flex; align-items: center; gap: 6px;">
-        <span style="font-size: 1.1em;">💡</span> 提示：点击图例可以隐藏/显示对应的数据系列
+    <p style="color: var(--text-secondary); font-size: 0.875rem; margin: 0;">
+        点击图例可以隐藏/显示对应的数据系列
     </p>
 </div>
-<div style="display: flex; flex-direction: column; gap: 20px; max-height: none; overflow: visible;">
+
+<div style="display: flex; flex-direction: column; gap: 1.5rem;">
     <!-- 原有图表 -->
-    <div class="chart-container" style="min-height: 280px; max-height: 400px; margin: 0; padding: 16px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden;">
-        <h3 style="margin: 0 0 12px 0; color: #1976D2; font-size: 1.1em; font-weight: 600;">💰 供应商成本分布</h3>
-        <div style="position: relative; height: calc(100% - 40px); min-height: 220px;">
+    <div class="chart-container">
+        <h3>💰 供应商成本分布</h3>
+        <div style="position: relative; height: 250px;">
             <canvas id="providerCostPieChart_{{ period_id }}"></canvas>
         </div>
     </div>
-    <div class="chart-container" style="min-height: 280px; max-height: 500px; margin: 0; padding: 16px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden;">
-        <h3 style="margin: 0 0 12px 0; color: #1976D2; font-size: 1.1em; font-weight: 600;">📦 模块成本分布</h3>
-        <div style="position: relative; height: calc(100% - 40px); min-height: 220px;">
+    
+    <div class="chart-container">
+        <h3>📦 模块成本分布</h3>
+        <div style="position: relative; height: 250px;">
             <canvas id="moduleCostPieChart_{{ period_id }}"></canvas>
         </div>
     </div>
-    <div class="chart-container" style="min-height: 300px; max-height: 600px; margin: 0; padding: 16px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: auto;">
-        <h3 style="margin: 0 0 12px 0; color: #1976D2; font-size: 1.1em; font-weight: 600;">🤖 模型成本对比</h3>
-        <div style="position: relative; min-height: 250px; height: auto;">
+    
+    <div class="chart-container">
+        <h3>🤖 模型成本对比</h3>
+        <div style="position: relative; min-height: 300px;">
             <canvas id="modelCostBarChart_{{ period_id }}"></canvas>
         </div>
     </div>
     
     <!-- 新增图表 -->
-    <div class="chart-container" style="min-height: 320px; max-height: 600px; margin: 0; padding: 16px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: auto;">
-        <h3 style="margin: 0 0 12px 0; color: #FF9800; font-size: 1.1em; font-weight: 600;">🔄 Token使用对比</h3>
-        <div style="position: relative; min-height: 270px; height: auto;">
+    <div class="chart-container">
+        <h3>🔄 Token使用对比</h3>
+        <div style="position: relative; min-height: 300px;">
             <canvas id="tokenComparisonChart_{{ period_id }}"></canvas>
         </div>
     </div>
     
-    <div class="chart-container" style="min-height: 280px; max-height: 400px; margin: 0; padding: 16px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden;">
-        <h3 style="margin: 0 0 12px 0; color: #9C27B0; font-size: 1.1em; font-weight: 600;">📞 供应商请求占比</h3>
-        <div style="position: relative; height: calc(100% - 40px); min-height: 220px;">
+    <div class="chart-container">
+        <h3>📞 供应商请求占比</h3>
+        <div style="position: relative; height: 250px;">
             <canvas id="providerRequestsDoughnutChart_{{ period_id }}"></canvas>
         </div>
     </div>
     
-    <div class="chart-container" style="min-height: 320px; max-height: 700px; margin: 0; padding: 16px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: auto;">
-        <h3 style="margin: 0 0 12px 0; color: #E91E63; font-size: 1.1em; font-weight: 600;">⚡ 平均响应时间</h3>
-        <div style="position: relative; min-height: 270px; height: auto;">
+    <div class="chart-container">
+        <h3>⚡ 平均响应时间</h3>
+        <div style="position: relative; min-height: 300px;">
             <canvas id="avgResponseTimeChart_{{ period_id }}"></canvas>
         </div>
     </div>
     
-    <div class="chart-container" style="min-height: 350px; max-height: 450px; margin: 0; padding: 16px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden;">
-        <h3 style="margin: 0 0 12px 0; color: #00BCD4; font-size: 1.1em; font-weight: 600;">🎯 模型效率雷达</h3>
-        <div style="position: relative; height: calc(100% - 40px); min-height: 300px;">
+    <div class="chart-container">
+        <h3>🎯 模型效率雷达</h3>
+        <div style="position: relative; height: 350px;">
             <canvas id="modelEfficiencyRadarChart_{{ period_id }}"></canvas>
         </div>
     </div>
     
-    <div class="chart-container" style="min-height: 400px; max-height: 600px; margin: 0; padding: 16px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: auto;">
-        <h3 style="margin: 0 0 12px 0; color: #4CAF50; font-size: 1.1em; font-weight: 600;">⏱️ 响应时间分布</h3>
-        <div style="position: relative; min-height: 350px; height: auto;">
+    <div class="chart-container">
+        <h3>⏱️ 响应时间分布</h3>
+        <div style="position: relative; min-height: 300px;">
             <canvas id="responseTimeScatterChart_{{ period_id }}"></canvas>
         </div>
     </div>
diff --git a/src/chat/utils/templates/tab_content.html b/src/chat/utils/templates/tab_content.html
index 7e6566a3a..9e5514ca0 100644
--- a/src/chat/utils/templates/tab_content.html
+++ b/src/chat/utils/templates/tab_content.html
@@ -1,85 +1,104 @@
 <div id="{{ div_id }}" class="tab-content">
-    <div class="info-item" style="background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); border-left-color: #1976D2;">
-        <strong>📖 名词解释</strong>
-        <div style="margin-top: 12px; line-height: 1.8; font-size: 0.9em;">
-            <div style="margin-bottom: 8px;">
-                <strong style="color: #1976D2;">🎯 Token:</strong> AI处理文本的基本单位，约等于0.75个英文单词或0.5个中文字
-            </div>
-            <div style="margin-bottom: 8px;">
-                <strong style="color: #1976D2;">💸 TPS:</strong> Token Per Second，每秒处理的Token数量，衡量AI响应速度
-            </div>
-            <div style="margin-bottom: 8px;">
-                <strong style="color: #1976D2;">📊 每K Token成本:</strong> 每1000个Token的成本，用于比较不同模型的性价比
-            </div>
-            <div style="margin-bottom: 8px;">
-                <strong style="color: #1976D2;">⚡ Token效率:</strong> 输出Token与输入Token的比率，反映模型输出丰富度
+    <div class="info-item" style="margin-bottom: 2rem; width: 100%; display: block;">
+        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
+            <span class="material-icons" style="color: var(--primary-color);">menu_book</span>
+            <strong style="font-size: 1.1rem;">名词解释</strong>
+        </div>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; font-size: 0.9rem;">
+            <div>
+                <strong style="color: var(--primary-color);">🎯 Token:</strong> AI处理文本的基本单位
             </div>
             <div>
-                <strong style="color: #1976D2;">🔄 消息/请求比:</strong> 平均每次AI请求处理的用户消息数量
+                <strong style="color: var(--primary-color);">💸 TPS:</strong> 每秒处理的Token数量
+            </div>
+            <div>
+                <strong style="color: var(--primary-color);">📊 每K Token成本:</strong> 每1000个Token的成本
+            </div>
+            <div>
+                <strong style="color: var(--primary-color);">⚡ Token效率:</strong> 输出/输入Token比率
+            </div>
+            <div>
+                <strong style="color: var(--primary-color);">🔄 消息/请求比:</strong> 每次请求处理的消息数
             </div>
         </div>
     </div>
 
     <div class="dashboard-layout">
         <div class="main-content">
-            <p class="info-item">
-                <strong>📅 统计时段: </strong>
-                {{ start_time }} ~ {{ end_time }}
-            </p>
+            <div class="header-meta">
+                <div class="info-item">
+                    <span class="material-icons" style="font-size: 18px;">date_range</span>
+                    <strong>统计时段: </strong> {{ start_time }} ~ {{ end_time }}
+                </div>
+            </div>
+            
             {{ summary_cards }}
 
             <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>
+            <div class="table-container">
+                <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>
+            </div>
 
             <h2>🏢 按供应商分类统计</h2>
-            <table>
-                <thead>
-                    <tr><th>供应商名称</th><th>调用次数</th><th>Token总量</th><th>TPS</th><th>每K Token成本</th><th>累计花费</th><th>平均耗时(秒)</th></tr>
-                </thead>
-                <tbody>{{ provider_rows }}</tbody>
-            </table>
+            <div class="table-container">
+                <table>
+                    <thead>
+                        <tr><th>供应商名称</th><th>调用次数</th><th>Token总量</th><th>TPS</th><th>每K Token成本</th><th>累计花费</th><th>平均耗时(秒)</th></tr>
+                    </thead>
+                    <tbody>{{ provider_rows }}</tbody>
+                </table>
+            </div>
 
             <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>
-                </thead>
-                <tbody>{{ module_rows }}</tbody>
-            </table>
+            <div class="table-container">
+                <table>
+                    <thead>
+                        <tr><th>模块名称</th><th>调用次数</th><th>输入Token</th><th>输出Token</th><th>Token总量</th><th>累计花费</th><th>平均耗时(秒)</th><th>标准差(秒)</th></tr>
+                    </thead>
+                    <tbody>{{ module_rows }}</tbody>
+                </table>
+            </div>
 
             <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>
-                </thead>
-                <tbody>{{ type_rows }}</tbody>
-            </table>
+            <div class="table-container">
+                <table>
+                    <thead>
+                        <tr><th>请求类型</th><th>调用次数</th><th>输入Token</th><th>输出Token</th><th>Token总量</th><th>累计花费</th><th>平均耗时(秒)</th><th>标准差(秒)</th></tr>
+                    </thead>
+                    <tbody>{{ type_rows }}</tbody>
+                </table>
+            </div>
 
             <h2>💬 聊天消息统计</h2>
-            <table>
-                <thead>
-                    <tr><th>联系人/群组名称</th><th>消息数量</th></tr>
-                </thead>
-                <tbody>{{ chat_rows }}</tbody>
-            </table>
+            <div class="table-container">
+                <table>
+                    <thead>
+                        <tr><th>联系人/群组名称</th><th>消息数量</th></tr>
+                    </thead>
+                    <tbody>{{ chat_rows }}</tbody>
+                </table>
+            </div>
 
             <h2>🎓 大模型效率分析</h2>
-            <div class="info-item">
-                <strong>💡 提示:</strong> Token效率表示输出Token与输入Token的比率,比率越高说明模型输出越丰富
+            <div class="info-item" style="margin-bottom: 1rem;">
+                <span class="material-icons" style="font-size: 18px;">lightbulb</span>
+                <strong>提示:</strong> Token效率表示输出Token与输入Token的比率,比率越高说明模型输出越丰富
+            </div>
+            <div class="table-container">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>指标</th>
+                            <th>数值</th>
+                            <th>说明</th>
+                        </tr>
+                    </thead>
+                    <tbody>{{ efficiency_rows }}</tbody>
+                </table>
             </div>
-            <table>
-                <thead>
-                    <tr>
-                        <th>指标</th>
-                        <th>数值</th>
-                        <th>说明</th>
-                    </tr>
-                </thead>
-                <tbody>{{ efficiency_rows }}</tbody>
-            </table>
         </div>
         
         <div class="sidebar-content">