From 777469c2e6558b479d212bfc567eb362f01e1a88 Mon Sep 17 00:00:00 2001 From: Saramanda9988 <2074730050@qq.com> Date: Wed, 31 Dec 2025 01:36:39 +0800 Subject: [PATCH] feat: Update Retro Futurism templates with enhanced styling and layout adjustments --- .../retro_futurism/image_template.html | 311 ++++++++++++------ .../retro_futurism/pdf_template.html | 300 +++++++++++------ .../templates/retro_futurism/quote_item.html | 15 +- .../templates/retro_futurism/topic_item.html | 9 +- .../retro_futurism/user_title_item.html | 8 +- 5 files changed, 433 insertions(+), 210 deletions(-) diff --git a/src/reports/templates/retro_futurism/image_template.html b/src/reports/templates/retro_futurism/image_template.html index 3cda588..843e90f 100644 --- a/src/reports/templates/retro_futurism/image_template.html +++ b/src/reports/templates/retro_futurism/image_template.html @@ -150,9 +150,11 @@ .header-brief { max-width: 500px; - color: rgba(24, 24, 24, 0.7); + color: rgba(24, 24, 24, 0.8); line-height: 1.6; margin-bottom: 24px; + font-size: 0.95rem; + font-weight: 400; } .header-meta-row { @@ -167,7 +169,8 @@ .meta-label { font-family: var(--font-mono); - font-size: 0.7rem; + font-size: 0.75rem; + font-weight: 500; letter-spacing: 0.15rem; text-transform: uppercase; color: rgba(24, 24, 24, 0.5); @@ -178,7 +181,8 @@ margin-top: 4px; color: var(--c-text); font-family: var(--font-mono); - font-size: 0.85rem; + font-size: 0.9rem; + font-weight: 400; } /* CRT Console */ @@ -194,15 +198,30 @@ grid-column: span 12; } - .crt-console::before { - content: "CRT_CHANNEL // PEAK_ACTIVITY"; - display: block; - border-bottom: 1px solid #444; - padding-bottom: 8px; - margin-bottom: 12px; - color: var(--c-accent); + .crt-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 16px; + } + + .crt-btn { + width: 12px; + height: 12px; + border-radius: 50%; + flex-shrink: 0; + } + + .crt-btn-1 { background: var(--c-dec-1); } + .crt-btn-2 { background: var(--c-dec-2); } + .crt-btn-3 { background: var(--c-dec-3); } + + .crt-title { + margin-left: 12px; font-size: 0.65rem; letter-spacing: 0.2rem; + color: var(--c-accent); + text-transform: uppercase; } .crt-label { @@ -279,7 +298,8 @@ .stat-label { font-family: var(--font-mono); - font-size: 0.75rem; + font-size: 0.8rem; + font-weight: 500; text-transform: uppercase; color: var(--c-dec-1); margin-bottom: 10px; @@ -295,9 +315,10 @@ } .stat-note { - font-size: 0.8rem; - color: rgba(24, 24, 24, 0.6); + font-size: 0.85rem; + color: rgba(24, 24, 24, 0.7); margin-top: 8px; + font-weight: 400; } /* Content Box (for topics, titles, quotes) */ @@ -305,7 +326,7 @@ grid-column: span 12; border: 1px solid var(--c-text); padding: 24px; - background: #fff; + background: rgba(255, 255, 255, 0.5); position: relative; } @@ -323,7 +344,7 @@ /* Activity Chart */ .activity-wrapper { font-family: var(--font-mono); - font-size: 0.8rem; + font-size: 0.85rem; } .activity-row { @@ -331,7 +352,7 @@ grid-template-columns: 60px 1fr 50px; align-items: center; gap: 12px; - padding: 6px 0; + padding: 8px 0; border-bottom: 1px solid var(--c-grid); } @@ -366,48 +387,94 @@ .topic-list { display: flex; flex-direction: column; - gap: 20px; + gap: 16px; + padding: 0; + max-width: 1200px; + margin: 0 auto; } .topic-item { display: grid; - grid-template-columns: 50px 1fr; - gap: 20px; - padding-bottom: 16px; - border-bottom: 1px solid var(--c-grid); + grid-template-columns: 16px 1fr; + gap: 16px; + padding: 16px; + padding-left: 20px; + background: rgba(255, 255, 255, 0.5); + border: 1px solid var(--c-text); + position: relative; } - .topic-item:last-child { - border-bottom: none; - padding-bottom: 0; + .topic-item::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + background: var(--c-dec-1); } - .topic-index { - font-family: var(--font-mono); - font-size: 1rem; - letter-spacing: 0.2rem; - color: rgba(24, 24, 24, 0.3); + .topic-item::after { + content: ''; + position: absolute; + left: 4px; + top: 0; + bottom: 0; + width: 4px; + background: var(--c-dec-2); + } + + .topic-item .color-third { + position: absolute; + left: 8px; + top: 0; + bottom: 0; + width: 4px; + background: var(--c-dec-3); + } + + .topic-icon { + width: 16px; + height: 16px; + display: flex; + align-items: center; + justify-content: center; + } + + .topic-icon svg { + width: 14px; + height: 14px; + fill: var(--c-accent); + } + + .topic-content { + display: flex; + flex-direction: column; + gap: 8px; } .topic-title { - margin: 0 0 6px; - font-size: 1.1rem; + margin: 0; + font-size: 1.15rem; + font-weight: 500; letter-spacing: 0.05rem; color: var(--c-text); } .topic-meta { font-family: var(--font-mono); - font-size: 0.7rem; + font-size: 0.75rem; + font-weight: 500; letter-spacing: 0.15rem; color: rgba(24, 24, 24, 0.5); - margin-bottom: 8px; + text-transform: uppercase; } .topic-detail { - color: rgba(24, 24, 24, 0.7); + color: rgba(24, 24, 24, 0.8); line-height: 1.6; - font-size: 0.9rem; + font-size: 0.95rem; + font-weight: 400; } /* User Title Grid */ @@ -424,26 +491,6 @@ background: rgba(255, 255, 255, 0.5); } - .title-item::before { - content: ''; - position: absolute; - top: 4px; - left: 4px; - width: 24px; - height: 4px; - background: var(--c-dec-1); - } - - .title-item::after { - content: ''; - position: absolute; - top: 4px; - left: 32px; - width: 24px; - height: 4px; - background: var(--c-dec-2); - } - .title-header { display: flex; align-items: center; @@ -451,6 +498,12 @@ margin-bottom: 12px; } + .title-info { + display: flex; + flex-direction: column; + gap: 8px; + } + .title-avatar { width: 52px; height: 52px; @@ -482,32 +535,43 @@ .title-name { font-weight: 600; - font-size: 1rem; + font-size: 1.1rem; + } + + .title-badges { + display: flex; + gap: 8px; + align-items: center; } .title-mbti { font-family: var(--font-mono); - font-size: 0.65rem; + font-size: 0.75rem; + font-weight: 600; letter-spacing: 0.15rem; background: rgba(24, 24, 24, 0.08); - padding: 2px 8px; - margin-left: 8px; + padding: 3px 10px; + border-radius: 3px; } .title-role { font-family: var(--font-mono); - letter-spacing: 0.2rem; + font-weight: 600; + letter-spacing: 0.15rem; text-transform: uppercase; color: var(--c-accent); - margin: 8px 0; - font-size: 0.8rem; + background: rgba(178, 101, 59, 0.15); + padding: 3px 10px; + font-size: 0.75rem; + border-radius: 3px; } .title-reason { - margin: 0; - font-size: 0.85rem; - color: rgba(24, 24, 24, 0.7); + margin: 8px 0 0; + font-size: 0.95rem; + color: rgba(24, 24, 24, 0.8); line-height: 1.5; + font-weight: 400; } /* Quote List */ @@ -515,42 +579,87 @@ display: flex; flex-direction: column; gap: 16px; + padding: 0; + max-width: 1200px; + margin: 0 auto; } .quote-item { - border: 1px dashed var(--c-text); - padding: 20px; + display: grid; + grid-template-columns: 16px 1fr; + gap: 16px; + padding: 16px; + padding-left: 20px; + background: rgba(255, 255, 255, 0.5); + border: 1px solid var(--c-text); position: relative; - background: rgba(255, 255, 255, 0.3); } .quote-item::before { - content: '"'; - font-family: var(--font-display); - font-size: 2rem; - color: var(--c-accent); - opacity: 0.5; - line-height: 1; + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + background: var(--c-dec-1); + } + + .quote-item::after { + content: ''; + position: absolute; + left: 4px; + top: 0; + bottom: 0; + width: 4px; + background: var(--c-dec-2); + } + + .quote-item .color-third { + position: absolute; + left: 8px; + top: 0; + bottom: 0; + width: 4px; + background: var(--c-dec-3); + } + + .quote-icon { + width: 16px; + height: 16px; + display: flex; + align-items: center; + justify-content: center; + } + + .quote-icon svg { + width: 14px; + height: 14px; + fill: var(--c-accent); } .quote-content { - font-size: 1rem; + font-size: 1.05rem; color: var(--c-text); - margin: 8px 0; + margin: 0 0 8px; line-height: 1.6; + font-weight: 400; } .quote-author { font-family: var(--font-mono); font-size: 0.75rem; + font-weight: 500; letter-spacing: 0.15rem; - color: rgba(24, 24, 24, 0.6); + color: rgba(24, 24, 24, 0.5); + text-transform: uppercase; } .quote-note { - font-size: 0.8rem; - color: rgba(24, 24, 24, 0.7); + font-size: 0.9rem; + color: rgba(24, 24, 24, 0.75); margin-top: 8px; + font-weight: 400; } /* Token Strip */ @@ -577,6 +686,9 @@ padding-top: 16px; display: flex; justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 20px; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; @@ -584,6 +696,11 @@ color: rgba(24, 24, 24, 0.6); } + .footer-tokens { + display: flex; + gap: 24px; + } + /* CRT Overlay */ .crt-overlay { position: fixed; @@ -697,6 +814,12 @@
+
+ + + + CRT_CHANNEL // PEAK_ACTIVITY +
Peak Activity Window
{{most_active_period}}
活跃序列 SCAN // 消息流强度 {{message_count}}
@@ -719,12 +842,8 @@
Thread Matrix TOPICS_MODULE
-
-
-
- {{topics_html}} -
-
+
+ {{topics_html}}
@@ -743,25 +862,17 @@
Golden Lines QUOTES_MODULE
-
-
-
- {{quotes_html}} -
-
-
- - -
-
-
Total Tokens // {{total_tokens}}
-
Prompt // {{prompt_tokens}}
-
Completion // {{completion_tokens}}
-
+
+ {{quotes_html}}
CRT_EXPORT_CHANNEL // QQ群日常分析
+
+ Total Tokens // {{total_tokens}} + Prompt // {{prompt_tokens}} + Completion // {{completion_tokens}} +
END_OF_LINE_
diff --git a/src/reports/templates/retro_futurism/pdf_template.html b/src/reports/templates/retro_futurism/pdf_template.html index 3528ee0..33425f0 100644 --- a/src/reports/templates/retro_futurism/pdf_template.html +++ b/src/reports/templates/retro_futurism/pdf_template.html @@ -228,15 +228,31 @@ position: relative; } - .crt-console::before { - content: "CRT CHANNEL"; - position: absolute; - top: 12px; - right: 16px; + .crt-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 20px; + } + + .crt-btn { + width: 12px; + height: 12px; + border-radius: 50%; + flex-shrink: 0; + } + + .crt-btn-1 { background: var(--c-accent-1); } + .crt-btn-2 { background: var(--c-accent-2); } + .crt-btn-3 { background: var(--c-accent-3); } + + .crt-title { + margin-left: 12px; font-family: var(--font-mono); letter-spacing: 0.22rem; font-size: 0.68rem; - color: rgba(245, 237, 220, 0.6); + color: var(--c-main); + text-transform: uppercase; } .crt-label { @@ -290,7 +306,8 @@ .stat-label { font-family: var(--font-mono); - font-size: 0.78rem; + font-size: 0.8rem; + font-weight: 500; letter-spacing: 0.2rem; text-transform: uppercase; color: rgba(24, 24, 24, 0.55); @@ -305,8 +322,9 @@ } .stat-note { - font-size: 0.9rem; - color: rgba(24, 24, 24, 0.7); + font-size: 0.95rem; + color: rgba(24, 24, 24, 0.75); + font-weight: 400; } .module { @@ -406,43 +424,91 @@ .topic-stack { display: flex; flex-direction: column; - gap: 18px; - margin-top: 12px; + gap: 16px; } .topic-card { display: grid; - grid-template-columns: 90px 1fr; - gap: 20px; - padding-bottom: 18px; - border-bottom: 1px solid rgba(24, 24, 24, 0.08); + grid-template-columns: 16px 1fr; + gap: 16px; + padding: 16px; + padding-left: 20px; + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(24, 24, 24, 0.12); + position: relative; } - .topic-index { - font-family: var(--font-mono); - font-size: 1.2rem; - letter-spacing: 0.35rem; - color: rgba(24, 24, 24, 0.35); + .topic-card::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + background: var(--c-accent-1); + } + + .topic-card::after { + content: ''; + position: absolute; + left: 4px; + top: 0; + bottom: 0; + width: 4px; + background: var(--c-accent-2); + } + + .topic-card .color-third { + position: absolute; + left: 8px; + top: 0; + bottom: 0; + width: 4px; + background: var(--c-accent-3); + } + + .topic-icon { + width: 16px; + height: 16px; + display: flex; + align-items: center; + justify-content: center; + } + + .topic-icon svg { + width: 14px; + height: 14px; + fill: var(--c-main); + } + + .topic-content { + display: flex; + flex-direction: column; + gap: 8px; } .topic-title { margin: 0; - font-size: 1.2rem; + font-size: 1.15rem; + font-weight: 500; letter-spacing: 0.04rem; color: var(--c-dark); } .topic-meta { font-family: var(--font-mono); - font-size: 0.8rem; + font-size: 0.75rem; + font-weight: 500; letter-spacing: 0.16rem; color: rgba(24, 24, 24, 0.5); - margin: 6px 0; + text-transform: uppercase; } .topic-detail { - color: rgba(24, 24, 24, 0.75); + color: rgba(24, 24, 24, 0.8); line-height: 1.6; + font-size: 0.95rem; + font-weight: 400; } .title-grid { @@ -457,32 +523,11 @@ grid-template-columns: 72px 1fr; column-gap: 18px; padding: 18px; - border: 1px solid rgba(24, 24, 24, 0.08); - background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 237, 220, 0.6)); + border: 1px solid rgba(24, 24, 24, 0.12); + background: rgba(255, 255, 255, 0.9); position: relative; } - .title-card::before, - .title-card::after { - content: ""; - position: absolute; - top: 12px; - height: 4px; - border-radius: 2px; - } - - .title-card::before { - left: 12px; - width: 32px; - background: var(--c-accent-1); - } - - .title-card::after { - left: 48px; - width: 32px; - background: var(--c-accent-2); - } - .title-avatar { width: 72px; height: 72px; @@ -515,102 +560,147 @@ .title-header { display: flex; - justify-content: space-between; align-items: center; + gap: 14px; + margin-bottom: 12px; grid-column: 2; } + .title-info { + display: flex; + flex-direction: column; + gap: 8px; + } + .title-name { font-weight: 600; + font-size: 1.1rem; + } + + .title-badges { + display: flex; + gap: 8px; + align-items: center; } .title-mbti { font-family: var(--font-mono); font-size: 0.75rem; - letter-spacing: 0.18rem; + font-weight: 600; + letter-spacing: 0.15rem; background: rgba(24, 24, 24, 0.08); - padding: 2px 10px; + padding: 3px 10px; + border-radius: 3px; } .title-role { - grid-column: 2; font-family: var(--font-mono); - letter-spacing: 0.3rem; + font-weight: 600; + letter-spacing: 0.15rem; text-transform: uppercase; color: var(--c-main); - margin: 8px 0; + background: rgba(178, 101, 59, 0.15); + padding: 3px 10px; + font-size: 0.75rem; + border-radius: 3px; } .title-reason { grid-column: 2; - margin: 0; - font-size: 0.92rem; - color: rgba(24, 24, 24, 0.75); + margin: 8px 0 0; + font-size: 0.95rem; + color: rgba(24, 24, 24, 0.8); line-height: 1.5; + font-weight: 400; } .quote-stack { display: flex; flex-direction: column; - gap: 18px; - margin-top: 16px; + gap: 16px; } .quote-card { - padding: 24px; - border: 1px dashed rgba(24, 24, 24, 0.15); - background: #fff8ee; + display: grid; + grid-template-columns: 16px 1fr; + gap: 16px; + padding: 16px; + padding-left: 20px; + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(24, 24, 24, 0.12); position: relative; } - .quote-card::after { - content: ""; + .quote-card::before { + content: ''; position: absolute; - top: -6px; - right: 40px; - width: 90px; - height: 6px; - background: var(--c-dark); + left: 0; + top: 0; + bottom: 0; + width: 4px; + background: var(--c-accent-1); } - .quote-glyph { - font-size: 2.5rem; - color: rgba(178, 101, 59, 0.4); - margin: 0; + .quote-card::after { + content: ''; + position: absolute; + left: 4px; + top: 0; + bottom: 0; + width: 4px; + background: var(--c-accent-2); + } + + .quote-card .color-third { + position: absolute; + left: 8px; + top: 0; + bottom: 0; + width: 4px; + background: var(--c-accent-3); + } + + .quote-icon { + width: 16px; + height: 16px; + display: flex; + align-items: center; + justify-content: center; + } + + .quote-icon svg { + width: 14px; + height: 14px; + fill: var(--c-main); } .quote-content { font-size: 1.05rem; color: var(--c-dark); - margin: 12px 0; + margin: 0 0 8px; line-height: 1.6; + font-weight: 400; } .quote-author { font-family: var(--font-mono); - font-size: 0.85rem; + font-size: 0.75rem; + font-weight: 500; letter-spacing: 0.2rem; - color: rgba(24, 24, 24, 0.6); + color: rgba(24, 24, 24, 0.5); + text-transform: uppercase; } .quote-note { font-size: 0.9rem; - color: rgba(24, 24, 24, 0.7); - margin-top: 10px; + color: rgba(24, 24, 24, 0.75); + margin-top: 8px; + font-weight: 400; } - .token-strip { - padding: 0 64px; - margin-top: 20px; - } - - .token-panel { - border-top: 1px solid rgba(24, 24, 24, 0.15); - padding: 16px 0 8px; + .footer-tokens { display: flex; - gap: 30px; - font-family: var(--font-mono); - letter-spacing: 0.15rem; + gap: 24px; } footer { @@ -621,6 +711,9 @@ letter-spacing: 0.25rem; display: flex; justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 20px; color: rgba(24, 24, 24, 0.65); } @@ -634,8 +727,11 @@ margin: 24px auto 60px; } - .section-shell, - .token-strip { + .section-shell { + padding: 0 32px; + } + + footer { padding: 0 32px; } @@ -695,6 +791,12 @@
+
+ + + + CRT CHANNEL +
Peak Window
{{most_active_period}}
活跃序列 SCAN
@@ -746,18 +848,14 @@ {{quotes_html}}
-
-
Token Monitor
-
-
Total Tokens // {{total_tokens}}
-
Prompt Tokens // {{prompt_tokens}}
-
Completion Tokens // {{completion_tokens}}
-
-
- diff --git a/src/reports/templates/retro_futurism/quote_item.html b/src/reports/templates/retro_futurism/quote_item.html index f333471..9e93300 100644 --- a/src/reports/templates/retro_futurism/quote_item.html +++ b/src/reports/templates/retro_futurism/quote_item.html @@ -1,10 +1,17 @@ {% if quotes %} {% for quote in quotes %}
-
"
-

{{ quote.content }}

-
— {{ quote.sender }}
-

{{ quote.reason }}

+ +
+ + + +
+
+

{{ quote.content }}

+
— {{ quote.sender }}
+

{{ quote.reason }}

+
{% endfor %} {% endif %} diff --git a/src/reports/templates/retro_futurism/topic_item.html b/src/reports/templates/retro_futurism/topic_item.html index c33568a..78ba10a 100644 --- a/src/reports/templates/retro_futurism/topic_item.html +++ b/src/reports/templates/retro_futurism/topic_item.html @@ -1,8 +1,13 @@ {% if topics %} {% for topic in topics %}
-
{{ "%02d"|format(topic.index) }}
-
+ +
+ + + +
+

{{ topic.topic.topic }}

PARTICIPANTS: {{ topic.contributors }}

{{ topic.topic.detail }}

diff --git a/src/reports/templates/retro_futurism/user_title_item.html b/src/reports/templates/retro_futurism/user_title_item.html index 293f5db..88e490f 100644 --- a/src/reports/templates/retro_futurism/user_title_item.html +++ b/src/reports/templates/retro_futurism/user_title_item.html @@ -9,12 +9,14 @@
CRT
{% endif %}
-
+
{{ title.name }} - {{ title.mbti }} +
+ {{ title.mbti }} + {{ title.title }} +
-
{{ title.title }}

{{ title.reason }}

{% endfor %}