gardel/Mofox-Core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(report): 重构统计报告页面，引入全新现代化UI主题

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

主要更新包括：
- **UI/UX 重构**: 废弃原有的 Material Design 3 主题，采用更简洁、现代的仪表盘风格，优化了色彩、字体和布局，提升了整体视觉效果和数据可读性。
- **布局优化**: 使用 CSS Grid 构建主布局，提高了响应式设计的灵活性和健壮性。
- **图表美化**: 更新了所有图表的视觉样式，包括新的调色板、交互式工具提示和更清晰的坐标轴。
- **代码优化**:
  - 将图表数据从内联 JavaScript 字符串改为通过 `<script type="application/json">` 标签注入，更加安全和规范。
  - 实现了图表的懒加载，仅在切换到对应标签页时才进行初始化，提升了初始加载速度。
  - 移除大量内联样式，统一使用 CSS 类进行管理，增强了代码的可维护性。
This commit is contained in:
minecraft1024a
2025-11-30 13:00:09 +08:00
parent 06b4b7e4b9
commit 46f88ebc70
6 changed files with 564 additions and 590 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/chat/utils/templates/charts_tab.html
View File

@@ -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>

726
src/chat/utils/templates/report.css
View File

@@ -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;
}
}

21
src/chat/utils/templates/report.html
View File

@@ -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>

180
src/chat/utils/templates/report.js
View File

@@ -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', // 蓝色系

64
src/chat/utils/templates/static_charts.html
View File

@@ -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>

137
src/chat/utils/templates/tab_content.html
View File

@@ -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">