+ {# 柱状图主体层:确保底部对齐 #}
+
{% set chart_colors = [
'#66D1C7', '#6FD3C6', '#79D5C4', '#85D8C3', '#93DAC1', '#A3DDBF',
'#B4E0BD', '#C7E2BA', '#DBE5B8', '#EFE8B5', '#FFEAB3', '#FFDF9E',
@@ -10,10 +10,7 @@
{% for item in chart_data %}
{% set h = item.percentage | float %}
-
- {# 使用 loop.index0 从色板中依次取色,形成从左到右的全局渐变 #}
{% set bar_color = chart_colors[loop.index0 % 24] %}
-
{% set bar_opacity = '1' %}
{% if item.count == 0 %}
{% set h = '4' %}
@@ -21,22 +18,27 @@
{% set bar_color = 'var(--miku-blue)' %}
{% endif %}
-
+
{% if item.count > 0 %}
- {# 数字去掉背景框,颜色与柱子保持一致,视觉更通透 #}
-
{{ item.count }}
+
{{ item.count }}
{% endif %}
- {# 柱状体 #}
-
- {# X轴标签 #}
-
{{ "%02d"|format(item.hour) }}时
+ opacity: {{ bar_opacity }};
+ transition: height 0.3s ease;">
+
+ {% endfor %}
+
+
+ {# X轴标签层:独立容器确保水平对齐且不换行 #}
+
+ {% for item in chart_data %}
+
+
+ {{ "%02d"|format(item.hour) }}{% if loop.index0 % 4 == 0 or loop.last %}时{% endif %}
+
{% endfor %}
diff --git a/src/infrastructure/reporting/templates/HatsuneMiku/chat_quality_item.html b/src/infrastructure/reporting/templates/HatsuneMiku/chat_quality_item.html
index 1d18ff3..6d40625 100644
--- a/src/infrastructure/reporting/templates/HatsuneMiku/chat_quality_item.html
+++ b/src/infrastructure/reporting/templates/HatsuneMiku/chat_quality_item.html
@@ -1,9 +1,4 @@
-
-
-
+
{{ title }}
{{ subtitle }}
@@ -28,12 +23,20 @@
{% endfor %}
-
-
-
🎤
-
Miku 综合点评
+
+
+
+
+
-
{{ summary }}
-
diff --git a/src/infrastructure/reporting/templates/HatsuneMiku/image_template.html b/src/infrastructure/reporting/templates/HatsuneMiku/image_template.html
index 3d7721b..7375230 100644
--- a/src/infrastructure/reporting/templates/HatsuneMiku/image_template.html
+++ b/src/infrastructure/reporting/templates/HatsuneMiku/image_template.html
@@ -5,40 +5,48 @@
群聊日常分析看板 · {{current_date}}
-
+
+
@@ -246,7 +477,7 @@
39
[ SYSTEM_VOCALOID_INITIALIZED ]
HATSUNE MIKU v4X
-
+