feat: 同步更新其他模板

This commit is contained in:
SXP-Simon
2026-03-23 00:42:18 +08:00
committed by Helian Nuits
parent 09f3517c69
commit 5701599a14
17 changed files with 605 additions and 148 deletions
+8
View File
@@ -13,3 +13,11 @@ data/t2i_templates/base.html
.sisyphus/
data/plugin_data/astrbot_plugin_qq_group_daily_analysis/cache/avatars/123456789_40.jpg
data/plugin_data/astrbot_plugin_qq_group_daily_analysis/cache/avatars/987654321_40.jpg
debug_format.html
debug_hack.html
debug_retro.html
debug_scrapbook.html
debug_simple.html
debug_spring_festival.html
debug_spring.html
data/debug_data/avatar/cache.db
+10
View File
@@ -336,6 +336,16 @@ python scripts/debug_render.py -t retro_futurism -o my_output.html
python scripts/debug_render.py -h
```
```
uv run scripts\debug_render.py -t scrapbook -o debug_scrapbook.html
uv run scripts\debug_render.py -t hack -o debug_hack.html
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
```
**工具特性:**
- 使用 Mock 数据模拟真实的群聊分析结果
+6 -5
View File
@@ -317,14 +317,15 @@ async def debug_render(
}
# 3. Initialize Generator
generator = ReportGenerator(config_manager)
# Override internal methods to facilitate debugging without real dependencies
generator._get_user_avatar_data = mock_get_user_avatar
data_dir = Path("data/debug_data")
data_dir.mkdir(parents=True, exist_ok=True)
generator = ReportGenerator(config_manager, data_dir)
# 4. Prepare Render Data
# Note: _prepare_render_data handles converting Entities to template-friendly dicts
render_payload = await generator._prepare_render_data(analysis_result)
render_payload = await generator._prepare_render_data(
analysis_result, avatar_url_getter=mock_get_user_avatar
)
# Use Jinja2 renderer
final_html = generator.html_templates.render_template(
@@ -1,25 +1,130 @@
<div style="background: white; border: 1px solid #ddd; padding: 20px; margin-bottom: 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-left: 5px solid #007bff;">
<div style="margin-bottom: 15px;">
<h3 style="margin: 0; font-size: 1.5em; color: #222;">{{ title }}</h3>
{% if subtitle %}<span style="color: #666; font-size: 0.9em;">{{ subtitle }}</span>{% endif %}
<style>
.format-quality-item {
background: #ffffff;
border: 1px solid #dee2e6;
padding: 24px;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
border-left: 6px solid #007bff;
}
.format-quality-header {
margin-bottom: 20px;
border-bottom: 1px solid #f1f3f5;
padding-bottom: 15px;
}
.format-theme-title {
font-size: 1.5em;
font-weight: 700;
color: #212529;
margin-bottom: 5px;
}
.format-time-range {
font-size: 0.9em;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.format-dimension-bar-container {
margin: 25px 0;
background: #f8f9fa;
height: 20px;
border-radius: 4px;
display: flex;
overflow: hidden;
border: 1px solid #e9ecef;
}
.format-dimension-segment {
height: 100%;
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.format-dimension-segment:last-child {
border-right: none;
}
.format-comments-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 25px;
}
.format-comment-box {
background: #fcfcfc;
border-radius: 4px;
padding: 15px;
border: 1px solid #f1f3f5;
font-size: 0.95em;
}
.format-comment-title {
font-weight: 700;
color: #007bff;
margin-bottom: 8px;
display: block;
font-size: 0.85em;
text-transform: uppercase;
}
.format-summary-section {
background: #f8f9fa;
padding: 18px;
border-radius: 4px;
font-size: 1em;
line-height: 1.6;
color: #495057;
border: 1px solid #e9ecef;
}
.format-summary-label {
font-weight: 800;
color: #212529;
margin-right: 12px;
background: #e9ecef;
padding: 2px 8px;
border-radius: 3px;
}
</style>
<div class="format-quality-item">
<div class="format-quality-header">
<div class="format-theme-title">{{ title }}</div>
{% if subtitle %}<div class="format-time-range">{{ subtitle }}</div>{% endif %}
</div>
<div style="margin-bottom: 15px;">
{% for dimension in dimensions %}
<div style="margin-bottom: 15px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
<span style="font-weight: 600;">{{ dimension.name }}</span>
<span style="color: #007bff; font-weight: 700;">{{ dimension.percentage }}%</span>
<div class="format-dimension-bar-container">
{% set colors = ['#007bff', '#6610f2', '#6f42c1', '#e83e8c', '#fd7e14', '#28a745', '#20c997', '#17a2b8'] %}
{% for dim in dimensions %}
{% if dim.percentage > 0 %}
<div class="format-dimension-segment"
style="width: {{ dim.percentage }}%; background-color: {{ colors[loop.index0 % colors|length] }};"
title="{{ dim.name }}: {{ dim.percentage }}%">
</div>
<div style="height: 12px; background: #f0f0f0; border-radius: 6px; overflow: hidden;">
<div style="height: 100%; width: {{ dimension.percentage }}%; background-color: {{ dimension.color }}; border-radius: 6px;"></div>
</div>
<p style="margin: 8px 0 0; color: #555; font-size: 0.9em; line-height: 1.5;">{{ dimension.comment }}</p>
</div>
{% endif %}
{% endfor %}
</div>
<div style="background: #f8f9fa; border-top: 1px solid #eee; padding: 12px; font-size: 0.95em; color: #333; font-style: italic;">
{{ summary }}
<div class="format-comments-grid">
{% for dim in dimensions %}
{% if dim.percentage > 0 %}
<div class="format-comment-box">
<span class="format-comment-title">{{ dim.name }}</span>
<span style="font-size: 0.85em; font-weight: 600; color: #6c757d; display: block; margin-bottom: 8px;">{{ dim.percentage }}%</span>
<div style="color: #495057;">{{ dim.comment }}</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class="format-summary-section">
<span class="format-summary-label">EXECUTIVE SUMMARY</span>
<span>{{ summary }}</span>
</div>
</div>
@@ -516,19 +516,19 @@
<div class="chart-header">
<div class="chart-title">24小时活跃度分布</div>
</div>
{{hourly_chart_html}}
{{hourly_chart_html | safe}}
</div>
{% if chat_quality_html %}
<div class="section full-width-section">
<h2 class="section-title">群聊质量分析</h2>
{{ chat_quality_html }}
{{ chat_quality_html | safe }}
</div>
{% endif %}
{{topics_html}}
{{titles_html}}
{{quotes_html}}
{{topics_html | safe}}
{{titles_html | safe}}
{{quotes_html | safe}}
</div>
<div class="footer">
由 AstrBot QQ群日常分析插件 生成 | {{current_datetime}}<br>
@@ -515,12 +515,12 @@
<div class="chart-header">
<div class="chart-title">24小时活跃度分布</div>
</div>
{{hourly_chart_html}}
{{hourly_chart_html | safe}}
</div>
{{topics_html}}
{{titles_html}}
{{quotes_html}}
{{topics_html | safe}}
{{titles_html | safe}}
{{quotes_html | safe}}
</div>
<div class="footer">
由 AstrBot QQ群日常分析插件 生成 | {{current_datetime}} | SXP-Simon/astrbot_plugin_qq_group_daily_analysis<br>
@@ -1,25 +1,133 @@
<div style="background: #000; border: 1px solid #0f0; padding: 15px; margin-bottom: 20px; box-shadow: 0 0 10px #0f0; color: #0f0; font-family: 'Consolas', 'Monaco', 'Courier New', monospace;">
<div style="text-align: center; margin-bottom: 15px;">
<h3 style="margin: 0; color: #0f0;">[ STATUS: {{ title }} ]</h3>
{% if subtitle %}<div style="font-size: 0.8em; color: #0c0;"># {{ subtitle }}</div>{% endif %}
<style>
.hack-quality-item {
background: #000;
border: 2px solid #ff9900;
padding: 20px;
margin-bottom: 25px;
color: #ff9900;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
box-shadow: 0 0 15px rgba(255, 153, 0, 0.2);
position: relative;
}
.hack-quality-header {
border-bottom: 1px solid #ff9900;
padding-bottom: 10px;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.hack-theme-title {
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
}
.hack-time-range {
font-size: 0.85em;
color: #e68a00;
}
.hack-dimension-bar-container {
margin: 20px 0;
background: #0d0800;
border: 1px solid #ff9900;
height: 30px;
display: flex;
overflow: hidden;
}
.hack-dimension-segment {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-right: 1px solid #ff9900;
font-size: 0.8em;
font-weight: bold;
}
.hack-dimension-segment:last-child {
border-right: none;
}
.hack-comments-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.hack-comment-box {
border: 1px dashed #ff9900;
padding: 10px;
font-size: 0.9em;
background: rgba(40, 20, 0, 0.5);
}
.hack-comment-title {
font-weight: bold;
margin-bottom: 5px;
display: block;
color: #fff;
font-size: 0.85em;
}
.hack-summary-section {
border-top: 1px solid #ff9900;
padding-top: 15px;
margin-top: 10px;
line-height: 1.5;
}
.hack-summary-label {
font-weight: bold;
color: #fff;
background: #cc7a00;
padding: 2px 6px;
margin-right: 8px;
}
</style>
<div class="hack-quality-item">
<div class="hack-quality-header">
<div class="hack-theme-title">> {{ title }}</div>
{% if subtitle %}<div class="hack-time-range"># {{ subtitle }}</div>{% endif %}
</div>
<div>
{% for dimension in dimensions %}
<div style="margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; font-size: 0.9em; margin-bottom: 4px;">
<span>> {{ dimension.name }}</span>
<span>{{ dimension.percentage }}%</span>
<div class="hack-dimension-bar-container">
{% set bg_colors = ['#ff9900', '#e68a00', '#cc7a00', '#b36b00', '#995c00', '#804d00'] %}
{% set txt_colors = ['#000', '#000', '#fff', '#fff', '#fff', '#fff'] %}
{% for dim in dimensions %}
{% if dim.percentage > 0 %}
<div class="hack-dimension-segment"
style="width: {{ dim.percentage }}%; background-color: {{ bg_colors[loop.index0 % bg_colors|length] }}; color: {{ txt_colors[loop.index0 % txt_colors|length] }};"
title="{{ dim.comment }}">
<span style="white-space: nowrap; padding: 0 4px; overflow: hidden; text-overflow: ellipsis;">{{ dim.name }}</span>
</div>
<div style="height: 10px; background: #030; border: 1px solid #0f0; overflow: hidden;">
<div style="height: 100%; width: {{ dimension.percentage }}%; background-color: #0f0;"></div>
</div>
<p style="margin: 4px 0 0 10px; font-size: 0.8em; color: #0a0;">// {{ dimension.comment }}</p>
</div>
{% endif %}
{% endfor %}
</div>
<div style="border-top: 1px solid #0f0; margin-top: 10px; padding-top: 10px; line-height: 1.4; color: #0f0;">
<span style="font-weight: bold;">[LOG]:</span> {{ summary }}
<div class="hack-comments-grid">
{% for dim in dimensions %}
{% if dim.percentage > 0 %}
<div class="hack-comment-box">
<span class="hack-comment-title">:: {{ dim.name }}</span>
<span style="font-size: 0.8em; color: #ff9900; display: block; margin-bottom: 5px; opacity: 0.8;">>> {{ dim.percentage }}%</span>
<div>{{ dim.comment }}</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class="hack-summary-section">
<span class="hack-summary-label">[SYSTEM_SUMMARY]</span>
<span>{{ summary }}</span>
</div>
</div>
@@ -21,8 +21,8 @@
--accent-blue: #3399ff;
/* Secondary */
--accent-red: #ff3366;
--accent-green: #00ff88;
/* Reduced use */
--accent-green: #ff9900;
/* Changed to Orange per user request */
--border-color: #2a2a2a;
--grid-color: rgba(255, 255, 255, 0.03);
@@ -109,7 +109,7 @@
}
.light.green {
background: #27c93f;
background: #ff9900;
}
.window-title {
@@ -548,10 +548,10 @@
<div class="section-header">
<span class="prompt">$</span> analyze --quality
</div>
{{ chat_quality_html }}
{{ chat_quality_html | safe }}
</div>
{% endif %}
<!-- Topics moved into left column -->
{% if topics_html %}
<div>
@@ -559,12 +559,12 @@
<span class="prompt">$</span> ls ./topics
</div>
<div class="topic-list">
{{topics_html}}
{{topics_html | safe}}
</div>
</div>
{% endif %}
</div>
<!-- Right Side: Visuals & Members -->
<div class="right-col">
<div class="window">
@@ -577,10 +577,10 @@
<div class="window-title">trend-analytics.tsx</div>
</div>
<div class="chart-container">
{{hourly_chart_html}}
{{hourly_chart_html | safe}}
</div>
</div>
<!-- User Titles grouped here -->
{% if titles_html %}
<div style="margin-top: 20px;">
@@ -588,11 +588,11 @@
<span class="prompt">$</span> cat ./user_titles
</div>
<div class="user-grid">
{{titles_html}}
{{titles_html | safe}}
</div>
</div>
{% endif %}
<!-- Golden Quotes grouped here -->
{% if quotes_html %}
<div style="margin-top: 20px;">
@@ -600,7 +600,7 @@
<span class="prompt">$</span> grep -r "golden_quotes"
</div>
<div class="quote-container">
{{quotes_html}}
{{quotes_html | safe}}
</div>
</div>
{% endif %}
@@ -348,11 +348,11 @@
<div class="avoid-break">
<div class="section-header"><span class="prompt">$</span> ls ./topics</div>
<div class="topic-list">
{{topics_html}}
{{topics_html | safe}}
</div>
</div>
</div>
<!-- Right Column: Chart & People -->
<div class="right-col">
<div class="window avoid-break">
@@ -364,21 +364,21 @@
<div class="window-title">activity.log</div>
</div>
<div class="chart-container">
{{hourly_chart_html}}
{{hourly_chart_html | safe}}
</div>
</div>
<div class="avoid-break">
<div class="section-header"><span class="prompt">$</span> cat users</div>
<div class="user-grid">
{{titles_html}}
{{titles_html | safe}}
</div>
</div>
<div class="avoid-break">
<div class="section-header"><span class="prompt">$</span> grep golden</div>
<div class="quote-grid">
{{quotes_html}}
{{quotes_html | safe}}
</div>
</div>
</div>
@@ -148,7 +148,7 @@
style="width: {{ dim.percentage }}%; background-color: {{ bg_colors[loop.index0 % bg_colors|length] }}; color: {{ txt_colors[loop.index0 % txt_colors|length] }};"
title="{{ dim.comment }}">
<span style="display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding: 0 5px;">
{{ dim.name }} {{ dim.percentage }}%
{{ dim.name }}
</span>
</div>
{% endif %}
@@ -161,6 +161,7 @@
{% if dim.percentage > 0 %}
<div class="retro-comment-box">
<div class="retro-comment-title">{{ dim.name }}</div>
<div style="font-size: 0.85em; font-weight: bold; color: var(--c-dec-2); margin-bottom: 8px;">PROPORTION: {{ dim.percentage }}%</div>
<div style="color: var(--c-text);">{{ dim.comment }}</div>
</div>
{% endif %}
@@ -270,9 +270,9 @@
{% 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>
<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) }}%</span>
<div style="margin-bottom: 4px;">
<strong class="dim-sticker-title" style="color: {{ colors[loop.index0 % colors|length] }}; border-color: {{ colors[loop.index0 % colors|length] }}; margin-bottom: 2px; display: block;">{{ dim.name }}</strong>
<span style="font-size: 0.86em; font-weight: 700; color: {{ colors[loop.index0 % colors|length] }}; display: block; margin-bottom: 4px;">{{ '%.1f'|format(safe_percentage) }}%</span>
</div>
<span>{{ dim.comment }}</span>
</div>
@@ -1,21 +1,120 @@
<div style="background: #f9f9f9; border-radius: 8px; padding: 12px; margin-bottom: 20px; border: 1px solid #eee;">
<h3 style="margin: 0 0 10px; font-size: 1.2em; color: #333; text-align: center;">{{ title }}</h3>
{% if subtitle %}<p style="margin: -5px 0 10px; font-size: 0.85em; color: #666; text-align: center;">{{ subtitle }}</p>{% endif %}
{% for dimension in dimensions %}
<div style="margin-bottom: 10px;">
<div style="display: flex; justify-content: space-between; font-size: 0.9em; margin-bottom: 3px;">
<span>{{ dimension.name }}</span>
<span>{{ dimension.percentage }}%</span>
</div>
<div style="height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden;">
<div style="height: 100%; width: {{ dimension.percentage }}%; background-color: {{ dimension.color }};"></div>
</div>
<p style="margin: 3px 0 0; font-size: 0.8em; color: #555;">{{ dimension.comment }}</p>
<style>
.simple-quality-item {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.simple-quality-header {
margin-bottom: 15px;
text-align: center;
}
.simple-theme-title {
font-size: 1.25em;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 4px;
}
.simple-time-range {
font-size: 0.85em;
color: #666;
}
.simple-dimension-bar-container {
margin: 20px 0;
background: #f5f5f5;
height: 12px;
border-radius: 6px;
display: flex;
overflow: hidden;
}
.simple-dimension-segment {
height: 100%;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.simple-dimension-segment:last-child {
border-right: none;
}
.simple-comments-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.simple-comment-box {
padding: 10px;
border-radius: 6px;
background: #f9f9f9;
font-size: 0.9em;
border: 1px solid #f0f0f0;
}
.simple-comment-title {
font-weight: 600;
color: #333;
margin-bottom: 4px;
display: block;
font-size: 0.85em;
}
.simple-summary-section {
border-top: 1px solid #f0f0f0;
padding-top: 15px;
font-size: 0.95em;
line-height: 1.5;
color: #444;
}
.simple-summary-label {
font-weight: 600;
color: #1a1a1a;
margin-right: 8px;
}
</style>
<div class="simple-quality-item">
<div class="simple-quality-header">
<div class="simple-theme-title">{{ title }}</div>
{% if subtitle %}<div class="simple-time-range">{{ subtitle }}</div>{% endif %}
</div>
{% endfor %}
<div style="border-top: 1px solid #eee; margin-top: 10px; padding-top: 8px; font-size: 0.9em; line-height: 1.4; color: #444;">
{{ summary }}
<div class="simple-dimension-bar-container">
{% set colors = ['#4dabf7', '#ff922b', '#51cf66', '#f06595', '#845ef7', '#339af0'] %}
{% for dim in dimensions %}
{% if dim.percentage > 0 %}
<div class="simple-dimension-segment"
style="width: {{ dim.percentage }}%; background-color: {{ colors[loop.index0 % colors|length] }};"
title="{{ dim.name }}: {{ dim.percentage }}%">
</div>
{% endif %}
{% endfor %}
</div>
<div class="simple-comments-grid">
{% for dim in dimensions %}
{% if dim.percentage > 0 %}
<div class="simple-comment-box">
<span class="simple-comment-title">{{ dim.name }}</span>
<span style="font-size: 0.82em; color: #666; display: block; margin-bottom: 4px; font-weight: 600;">{{ dim.percentage }}%</span>
<div style="color: #666;">{{ dim.comment }}</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class="simple-summary-section">
<span class="simple-summary-label">Summary</span>
<span>{{ summary }}</span>
</div>
</div>
@@ -37,21 +37,21 @@
<div class="section">
<h2>活跃度图表</h2>
{{hourly_chart_html}}
{{hourly_chart_html | safe}}
</div>
{% if chat_quality_html %}
<div class="section">
<h2>群聊质量分析</h2>
{{ chat_quality_html }}
{{ chat_quality_html | safe }}
</div>
{% endif %}
{{topics_html}}
{{titles_html}}
{{quotes_html}}
{{topics_html | safe}}
{{titles_html | safe}}
{{quotes_html | safe}}
<div class="footer" style="margin-top: 30px; padding: 15px; border-top: 1px solid #ccc; color: #666; font-size: 0.85em; text-align: center; line-height: 1.8;">
Generated by AstrBot | {{current_datetime}}<br>
@@ -37,14 +37,14 @@
<div class="section">
<h2>活跃度图表</h2>
{{hourly_chart_html}}
{{hourly_chart_html | safe}}
</div>
{{topics_html}}
{{titles_html}}
{{quotes_html}}
{{topics_html | safe}}
{{titles_html | safe}}
{{quotes_html | safe}}
<div class="footer">
Generated by AstrBot | {{current_datetime}}
@@ -1,27 +1,152 @@
<div style="background: #fff5f5; border: 2px solid #ff4d4f; border-radius: 12px; padding: 20px; margin-bottom: 25px; box-shadow: 0 4px 12px rgba(255, 77, 79, 0.1); position: relative; overflow: hidden;">
<div style="position: absolute; top: -10px; right: -10px; opacity: 0.1; font-size: 80px; transform: rotate(15deg);"></div>
<div style="text-align: center; margin-bottom: 20px;">
<h3 style="margin: 0; color: #cf1322; font-size: 1.6em; border-bottom: 2px solid #ff4d4f; display: inline-block; padding-bottom: 5px;">{{ title }}</h3>
{% if subtitle %}<p style="margin: 8px 0 0; color: #fa541c; font-weight: bold;">{{ subtitle }}</p>{% endif %}
<style>
.sf-quality-item {
background: #fff5f5;
border: 2px solid #ff4d4f;
border-radius: 12px;
padding: 24px;
margin-bottom: 25px;
box-shadow: 0 4px 15px rgba(255, 77, 79, 0.15);
position: relative;
overflow: hidden;
}
.sf-quality-item::before {
content: '福';
position: absolute;
top: -15px;
right: -15px;
font-size: 100px;
color: #ff4d4f;
opacity: 0.05;
transform: rotate(15deg);
pointer-events: none;
}
.sf-quality-header {
text-align: center;
margin-bottom: 20px;
border-bottom: 2px dashed #ffccc7;
padding-bottom: 15px;
}
.sf-theme-title {
color: #cf1322;
font-size: 1.6em;
font-weight: bold;
margin: 0;
}
.sf-time-range {
color: #fa541c;
font-size: 1em;
margin-top: 5px;
font-weight: 500;
}
.sf-dimension-bar-container {
margin: 25px 0;
background: #fff1f0;
border: 1px solid #ffa39e;
height: 35px;
border-radius: 18px;
display: flex;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
.sf-dimension-segment {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-right: 1px solid rgba(255, 255, 255, 0.3);
font-size: 0.9em;
font-weight: bold;
color: #fff;
}
.sf-dimension-segment:last-child {
border-right: none;
}
.sf-comments-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 25px;
}
.sf-comment-box {
background: #ffffff;
border: 1px solid #ffccc7;
border-radius: 8px;
padding: 12px;
font-size: 0.9em;
position: relative;
border-left: 4px solid #f5222d;
}
.sf-comment-title {
font-weight: bold;
color: #cf1322;
margin-bottom: 5px;
display: block;
}
.sf-summary-section {
background: #fff1f0;
border: 1px solid #ff4d4f;
border-radius: 10px;
padding: 15px;
line-height: 1.6;
color: #434343;
}
.sf-summary-label {
color: #cf1322;
font-weight: bold;
border-bottom: 2px solid #ff4d4f;
margin-right: 10px;
padding-bottom: 2px;
}
</style>
<div class="sf-quality-item">
<div class="sf-quality-header">
<div class="sf-theme-title">🧧 {{ title }} 🧧</div>
{% if subtitle %}<div class="sf-time-range">{{ subtitle }}</div>{% endif %}
</div>
<div>
{% for dimension in dimensions %}
<div style="margin-bottom: 15px;">
<div style="display: flex; justify-content: space-between; font-size: 1em; margin-bottom: 6px; color: #333; font-weight: bold;">
<span>{{ dimension.name }}</span>
<span style="color: #cf1322;">{{ dimension.percentage }}%</span>
<div class="sf-dimension-bar-container">
{% set bg_colors = ['#f5222d', '#fa541c', '#fa8c16', '#faad14', '#d46b08', '#ad2102'] %}
{% for dim in dimensions %}
{% if dim.percentage > 0 %}
<div class="sf-dimension-segment"
style="width: {{ dim.percentage }}%; background-color: {{ bg_colors[loop.index0 % bg_colors|length] }};"
title="{{ dim.comment }}">
<span style="white-space: nowrap; padding: 0 4px; overflow: hidden; text-overflow: ellipsis;">{{ dim.name }}</span>
</div>
<div style="height: 12px; background: #ffe8e6; border-radius: 6px; overflow: hidden; border: 1px solid #ffccc7;">
<div style="height: 100%; width: {{ dimension.percentage }}%; background: linear-gradient(90deg, #ff4d4f, #cf1322);"></div>
</div>
<p style="margin: 6px 0 0; font-size: 0.9em; color: #8c8c8c; font-style: italic;">{{ dimension.comment }}</p>
</div>
{% endif %}
{% endfor %}
</div>
<div style="margin-top: 15px; padding: 12px; background: #fff1f0; border-radius: 8px; border-left: 4px solid #f5222d; font-size: 0.95em; color: #434343;">
{{ summary }}
<div class="sf-comments-grid">
{% for dim in dimensions %}
{% if dim.percentage > 0 %}
<div class="sf-comment-box">
<span class="sf-comment-title">✨ {{ dim.name }}</span>
<span style="font-size: 0.82em; color: #fa541c; display: block; margin-bottom: 5px; font-weight: 600;">占比: {{ dim.percentage }}%</span>
<div>{{ dim.comment }}</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class="sf-summary-section">
<span class="sf-summary-label">📜 分析总结</span>
<span>{{ summary }}</span>
</div>
</div>
@@ -637,43 +637,43 @@
{% if chat_quality_html %}
<div class="sf-section-box">
<div class="sf-section-title"><span>🏺</span> 聊天质量锐评</div>
{{ chat_quality_html }}
{{ chat_quality_html | safe }}
</div>
{% endif %}
<!-- 1. Topics: Full Width -->
{% if topics_html %}
<div class="sf-section-box">
<div class="sf-section-title"><span>&#127982;</span> 核心话题回顾</div>
<div class="sf-topic-list">
{{topics_html}}
{{topics_html | safe}}
</div>
</div>
{% endif %}
<!-- 2. Chart: Full Width with SF window -->
<div class="sf-section-box">
<div class="sf-section-title"><span>📈</span> 活跃时序图</div>
<div class="sf-window">
<div class="sf-window-title">ACTIVITY CHRONICLE</div>
{{hourly_chart_html}}
{{hourly_chart_html | safe}}
</div>
</div>
<!-- 3. Characters: Masonry 2-Column Grid -->
{% if titles_html %}
<div class="sf-section-box">
<div class="sf-section-title"><span>🎖️</span> 群友风云榜</div>
{{titles_html}}
{{titles_html | safe}}
</div>
{% endif %}
<!-- 4. Quotes: Staggered Timeline -->
{% if quotes_html %}
<div class="sf-section-box">
<div class="sf-section-title"><span></span> 每日金句回响</div>
<div class="sf-quote-timeline">
{{quotes_html}}
{{quotes_html | safe}}
</div>
</div>
{% endif %}
@@ -305,21 +305,21 @@
<div class="sf-main">
<div class="left-col">
<div class="sf-section-title">核心话题回顾</div>
{{topics_html}}
{{topics_html | safe}}
</div>
<div class="right-col">
<div class="sf-section-title">活跃趋势</div>
<div class="chart-container">
{{hourly_chart_html}}
{{hourly_chart_html | safe}}
</div>
<div class="sf-section-title">群友风云榜</div>
{{titles_html}}
{{titles_html | safe}}
</div>
</div>
<div class="sf-section-title">每日金句回响</div>
{{quotes_html}}
{{quotes_html | safe}}
<footer>
<div>Generated by SXP-Simon / astrbot_plugin_qq_group_daily_analysis // {{current_datetime}}</div>