From ca104f25030d8e98378a5e9dd6249952616ea5a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=8E?= <1820661379@qq.com>
Date: Sun, 22 Mar 2026 15:42:12 +0800
Subject: [PATCH] Feat/chat quality analysis (#117 @Snow-kal)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style: 更改模板的显示

* style: 修复显示

* fix: 已按评论建议完成最小修改
---
 .../templates/scrapbook/activity_chart.html   | 22 ++++++----
 .../scrapbook/chat_quality_item.html          | 41 ++++++++++++++-----
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/infrastructure/reporting/templates/scrapbook/activity_chart.html b/src/infrastructure/reporting/templates/scrapbook/activity_chart.html
index d0c88ee..525d332 100644
--- a/src/infrastructure/reporting/templates/scrapbook/activity_chart.html
+++ b/src/infrastructure/reporting/templates/scrapbook/activity_chart.html
@@ -1,5 +1,12 @@
 <div class="chart-section-horizontal">
     {% for item in chart_data %}
+    {% set bar_percentage = item.percentage | float %}
+    {% if bar_percentage < 0 %}
+    {% set bar_percentage = 0 %}
+    {% elif bar_percentage > 100 %}
+    {% set bar_percentage = 100 %}
+    {% endif %}
+
     {% set bar_bg = 'var(--color-purple)' %}
     {% set bar_height = '4px' %}
     {% set bar_opacity = '1' %}
@@ -8,15 +15,15 @@
     {% set bar_bg = 'var(--ink-secondary)' %}
     {% set bar_height = '4px' %}
     {% set bar_opacity = '0.2' %}
-    {% elif item.percentage >= 70 %}
+    {% elif bar_percentage >= 70 %}
     {% set bar_bg = 'var(--accent-orange)' %}
-    {% set bar_height = item.percentage ~ '%' %}
-    {% elif item.percentage >= 30 %}
+    {% set bar_height = bar_percentage ~ '%' %}
+    {% elif bar_percentage >= 30 %}
     {% set bar_bg = 'var(--color-green)' %}
-    {% set bar_height = item.percentage ~ '%' %}
+    {% set bar_height = bar_percentage ~ '%' %}
     {% else %}
     {% set bar_bg = 'var(--color-blue)' %}
-    {% set bar_height = item.percentage ~ '%' %}
+    {% set bar_height = bar_percentage ~ '%' %}
     {% endif %}
 
     <div class="chart-column">
@@ -24,11 +31,10 @@
         <div class="chart-value-top">{{ item.count }}</div>
         {% endif %}
 
-        {% set style_str = 'height: ' ~ bar_height ~ '; background: ' ~ bar_bg ~ '; opacity: ' ~ bar_opacity ~ ';
-        border-bottom: none;' %}
+        {% set style_str = 'height: ' ~ bar_height ~ '; background: ' ~ bar_bg ~ '; opacity: ' ~ bar_opacity ~ '; border-bottom: none;' %}
         <div class="chart-bar-vertical" style="{{ style_str }}"></div>
 
         <div class="chart-label-xaxis">{{ "%02d" | format(item.hour) }}</div>
     </div>
     {% endfor %}
-</div>
\ No newline at end of file
+</div>
diff --git a/src/infrastructure/reporting/templates/scrapbook/chat_quality_item.html b/src/infrastructure/reporting/templates/scrapbook/chat_quality_item.html
index 2b40ec6..77ccc96 100644
--- a/src/infrastructure/reporting/templates/scrapbook/chat_quality_item.html
+++ b/src/infrastructure/reporting/templates/scrapbook/chat_quality_item.html
@@ -232,27 +232,37 @@
     <!-- 堆叠柱状图展示各个维度评分，充分利用空间 -->
     <div class="dimension-bar-container">
         <div class="dimension-bar">
-            {% set total = 0 %}
+            {% set ns = namespace(total=0) %}
             {% for dim in dimensions %}
-            {% set total = total + dim.percentage %}
+            {% set safe_percentage = dim.percentage|float %}
+            {% if safe_percentage < 0 %}
+            {% set safe_percentage = 0 %}
+            {% elif safe_percentage > 100 %}
+            {% set safe_percentage = 100 %}
+            {% endif %}
+            {% set ns.total = ns.total + safe_percentage %}
             {% endfor %}
 
             {% set scale = 1 %}
-            {% if total > 100 %}
-            {% set scale = 100 / total %}
-            {% elif total > 0 %}
-            {% set scale = 100 / total %}
+            {% if ns.total > 0 %}
+            {% set scale = 100 / ns.total %}
             {% endif %}
 
             {% set colors = ['#ffb74d', '#ff8a65', '#ba68c8', '#4db6ac', '#4dd0e1', '#64b5f6', '#81c784', '#e57373'] %}
             {% for dim in dimensions %}
-            {% if dim.percentage > 0 %}
+            {% set safe_percentage = dim.percentage|float %}
+            {% if safe_percentage < 0 %}
+            {% set safe_percentage = 0 %}
+            {% elif safe_percentage > 100 %}
+            {% set safe_percentage = 100 %}
+            {% endif %}
+            {% if safe_percentage > 0 %}
             <div class="dimension-segment"
-                style="width: {{ dim.percentage * scale }}%; background-color: {{ colors[loop.index0 % colors|length] }};"
+                style="width: {{ safe_percentage * scale }}%; background-color: {{ colors[loop.index0 % colors|length] }};"
                 title="{{ dim.comment }}">
                 <span class="segment-label"
                     style="display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;">
-                    {{ dim.name }}({{ dim.percentage }})
+                    {{ dim.name }}
                 </span>
             </div>
             {% endif %}
@@ -264,12 +274,21 @@
     <div class="dimension-comments-grid">
         {% set colors = ['#ffb74d', '#ff8a65', '#ba68c8', '#4db6ac', '#4dd0e1', '#64b5f6', '#81c784', '#e57373'] %}
         {% for dim in dimensions %}
-        {% if dim.percentage > 0 %}
+        {% set safe_percentage = dim.percentage|float %}
+        {% if safe_percentage < 0 %}
+        {% set safe_percentage = 0 %}
+        {% elif safe_percentage > 100 %}
+        {% set safe_percentage = 100 %}
+        {% endif %}
+        {% if safe_percentage > 0 %}
         {% set rot = loop.cycle('-1deg', '1.5deg', '-0.5deg', '1deg', '-1.5deg', '0.5deg') %}
         {% set tape_rot = loop.cycle('2deg', '-1deg', '3deg', '-2deg', '1deg', '-3deg') %}
         <div class="dim-sticker" style="transform: rotate({{ rot }}); border-color: {{ colors[loop.index0 % colors|length] }};">
             <div class="small-tape" style="transform: translateX(-50%) rotate({{ tape_rot }});"></div>
-            <strong class="dim-sticker-title" style="color: {{ colors[loop.index0 % colors|length] }}; border-color: {{ colors[loop.index0 % colors|length] }};">{{ dim.name }}</strong> 
+            <div style="display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;">
+                <strong class="dim-sticker-title" style="color: {{ colors[loop.index0 % colors|length] }}; border-color: {{ colors[loop.index0 % colors|length] }}; margin-bottom: 0;">{{ dim.name }}</strong>
+                <span style="font-size: 0.86em; font-weight: 700; color: {{ colors[loop.index0 % colors|length] }};">{{ '%.1f'|format(safe_percentage * scale) }}%</span>
+            </div>
             <span>{{ dim.comment }}</span>
         </div>
         {% endif %}