fix(HatsuneMiku): 完善

Author: SXP-Simon

.gitignore

@@ -28,3 +28,6 @@ scripts/output_all/debug_scrapbook_test_group_*.pdf
 scripts/output_all/debug_simple_test_group_*.pdf
 scripts/output_all/debug_spring_festival_test_group_*.pdf
 scripts/data/avatar/cache.db
+debug_miku.html
+scripts/output_all/debug_HatsuneMiku_test_group_*.pdf
+scripts/output/mock_report_test_group_mock_*.pdf

README.md

@@ -16,6 +16,10 @@
       <a href="https://t.me/AstrBotPluginGroupDailyAnalysis"><img src="https://fastly.jsdelivr.net/gh/SXP-Simon/astrbot_plugin_qq_group_daily_analysis@main/assets/TG.png" width="300" alt="Telegram Group"></a>
     </td>
   </tr>
+  <tr>
+    <td style="border: none;" align="center"><b>QQ群</b></td>
+    <td style="border: none;" align="center"><b>Telegram群</b></td>
+  </tr>
 </table>
 
 
@@ -401,6 +405,7 @@ uv run scripts\debug_render.py -t retro_futurism -o debug_retro.html
 uv run scripts\debug_render.py -t format -o debug_format.html
 uv run scripts\debug_render.py -t simple -o debug_simple.html
 uv run scripts\debug_render.py -t spring_festival -o debug_spring.html
+uv run scripts\debug_render.py -t HatsuneMiku -o debug_miku.html
 ```
 
 

_conf_schema.json

@@ -69,6 +69,7 @@
                 "options": [
                     "scrapbook",
                     "retro_futurism",
+                    "HatsuneMiku",
                     "hack",
                     "spring_festival",
                     "simple",

scripts/debug_all_pdf_themes.py

@@ -226,6 +226,7 @@ async def main():
         "simple",
         "spring_festival",
         "format",
+        "HatsuneMiku",
     ]
     for theme in themes:
         await generate_theme(theme)

src/infrastructure/reporting/templates/HatsuneMiku/activity_chart.html

@@ -1,6 +1,6 @@
-<div class="card-common" style="padding: 30px 20px 15px 20px;">
-    <div style="display: flex; align-items: flex-end; justify-content: space-between; height: 180px; gap: 4px;">
-        {# 定义一个从 葱绿 -> 薄荷 -> 鹅黄 -> 蜜桃粉 的完美过渡色板 #}
+<div style="display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 600px;">
+    {# 柱状图主体层：确保底部对齐 #}
+    <div style="display: flex; align-items: flex-end; justify-content: space-between; height: 160px; gap: 4px; padding-bottom: 5px; border-bottom: 2px solid rgba(57, 197, 187, 0.1);">
         {% set chart_colors = [
             '#66D1C7', '#6FD3C6', '#79D5C4', '#85D8C3', '#93DAC1', '#A3DDBF',
             '#B4E0BD', '#C7E2BA', '#DBE5B8', '#EFE8B5', '#FFEAB3', '#FFDF9E',
@@ -10,33 +10,35 @@
 
         {% 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' %}
             {% set bar_opacity = '0.3' %}
             {% set bar_color = 'var(--miku-blue)' %}
         {% endif %}
 
-        <div style="flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; position: relative;">
+        <div style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%;">
             {% if item.count > 0 %}
-            {# 数字去掉背景框，颜色与柱子保持一致，视觉更通透 #}
-            <span style="font-family: var(--font-num); font-size: 0.8rem; color: {{ bar_color }}; margin-bottom: 6px; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.02);">{{ item.count }}</span>
+            <span style="font-family: var(--font-num); font-size: 0.75rem; color: {{ bar_color }}; margin-bottom: 4px; font-weight: 800;">{{ item.count }}</span>
             {% endif %}
 
-            {# 柱状体 #}
             <div style="width: 100%; height: {{ h }}%; 
                         background: {{ bar_color }};
                         border-radius: 4px 4px 1px 1px;
-                        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-                        transition: height 0.3s ease;
-                        opacity: {{ bar_opacity }};"></div>
-            
-            {# X轴标签 #}
-            <span style="margin-top: 10px; font-family: var(--font-num); font-size: 0.75rem; color: var(--text-sub); font-weight: bold;">{{ "%02d"|format(item.hour) }}时</span>
+                        opacity: {{ bar_opacity }};
+                        transition: height 0.3s ease;"></div>
+        </div>
+        {% endfor %}
+    </div>
+
+    {# X轴标签层：独立容器确保水平对齐且不换行 #}
+    <div style="display: flex; justify-content: space-between; gap: 4px;">
+        {% for item in chart_data %}
+        <div style="flex: 1; text-align: center;">
+            <span style="font-family: var(--font-num); font-size: 0.7rem; color: var(--text-sub); font-weight: bold; white-space: nowrap; display: inline-block;">
+                {{ "%02d"|format(item.hour) }}{% if loop.index0 % 4 == 0 or loop.last %}时{% endif %}
+            </span>
         </div>
         {% endfor %}
     </div>