From 0d704e8ed6c7ebe82764ce543a8f6121ca0c7846 Mon Sep 17 00:00:00 2001
From: Saramanda9988 <2074730050@qq.com>
Date: Wed, 31 Dec 2025 00:54:32 +0800
Subject: [PATCH] feat: Enhance Retro Futurism templates with new header icons
 and layout adjustments

---
 .../retro_futurism/image_template.html        | 63 ++++++++++++++-----
 .../retro_futurism/pdf_template.html          | 60 ++++++++++++++----
 2 files changed, 98 insertions(+), 25 deletions(-)

diff --git a/src/reports/templates/retro_futurism/image_template.html b/src/reports/templates/retro_futurism/image_template.html
index d340bb3..3cda588 100644
--- a/src/reports/templates/retro_futurism/image_template.html
+++ b/src/reports/templates/retro_futurism/image_template.html
@@ -80,18 +80,15 @@
 
         /* Decorative Color Bar */
         .color-bar {
-            position: absolute;
-            top: 60px;
-            left: 0;
             display: flex;
-            flex-direction: column;
+            flex-direction: row;
             gap: 0;
-            z-index: 10;
+            margin-bottom: 20px;
         }
 
         .c-block {
-            width: 40px;
-            height: 10px;
+            width: 70px;
+            height: 5px;
         }
 
         .cb-1 { background: var(--c-dec-1); }
@@ -128,6 +125,29 @@
             color: var(--c-accent);
         }
 
+        .header-icons {
+            display: flex;
+            gap: 18px;
+            margin-top: 20px;
+            align-items: center;
+        }
+
+        .header-icon {
+            width: 38px;
+            height: 38px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 2px solid var(--c-accent);
+            background: rgba(178, 101, 59, 0.08);
+        }
+
+        .header-icon svg {
+            width: 20px;
+            height: 20px;
+            fill: var(--c-text);
+        }
+
         .header-brief {
             max-width: 500px;
             color: rgba(24, 24, 24, 0.7);
@@ -607,16 +627,31 @@
     <div class="crt-overlay"></div>
 
     <div class="layout">
-        <!-- Decorative Bars -->
-        <div class="color-bar">
-            <div class="c-block cb-1"></div>
-            <div class="c-block cb-2"></div>
-            <div class="c-block cb-3"></div>
-        </div>
-
         <header>
+            <div class="color-bar">
+                <div class="c-block cb-1"></div>
+                <div class="c-block cb-2"></div>
+                <div class="c-block cb-3"></div>
+            </div>
             <div class="header-meta">System Report // {{current_date}}</div>
             <h1>Daily<br><span class="highlight">Analysis</span><br>Export</h1>
+            <div class="header-icons">
+                <div class="header-icon">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                    </svg>
+                </div>
+                <div class="header-icon">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
+                    </svg>
+                </div>
+                <div class="header-icon">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
+                    </svg>
+                </div>
+            </div>
             <p class="header-brief">
                 QQ群日常活动分析报告，基于消息统计与AI分析生成
             </p>
diff --git a/src/reports/templates/retro_futurism/pdf_template.html b/src/reports/templates/retro_futurism/pdf_template.html
index 90d87d1..3528ee0 100644
--- a/src/reports/templates/retro_futurism/pdf_template.html
+++ b/src/reports/templates/retro_futurism/pdf_template.html
@@ -110,16 +110,14 @@
         }
 
         .color-strip {
-            position: absolute;
-            top: 32px;
-            left: -40px;
             display: flex;
-            flex-direction: column;
-            gap: 4px;
+            flex-direction: row;
+            gap: 0;
+            margin-bottom: 24px;
         }
 
         .color-strip span {
-            width: 120px;
+            width: 80px;
             height: 6px;
         }
 
@@ -164,6 +162,29 @@
             color: var(--c-main);
         }
 
+        .hero-icons {
+            display: flex;
+            gap: 20px;
+            margin-top: 24px;
+            align-items: center;
+        }
+
+        .hero-icon {
+            width: 42px;
+            height: 42px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 2px solid var(--c-accent);
+            background: rgba(178, 101, 59, 0.08);
+        }
+
+        .hero-icon svg {
+            width: 22px;
+            height: 22px;
+            fill: var(--c-dark);
+        }
+
         .hero-brief {
             max-width: 460px;
             color: rgba(24, 24, 24, 0.7);
@@ -632,15 +653,32 @@
 <body>
     <div class="scanlines"></div>
     <main class="report-shell">
-        <div class="color-strip">
-            <span class="strip-1"></span>
-            <span class="strip-2"></span>
-            <span class="strip-3"></span>
-        </div>
         <header class="hero">
             <div>
+                <div class="color-strip">
+                    <span class="strip-1"></span>
+                    <span class="strip-2"></span>
+                    <span class="strip-3"></span>
+                </div>
                 <div class="hero-label">Instruction Catalogue // Retro Futurism Export</div>
                 <h1 class="hero-title">Left <span class="accent">Aligned</span><br>Daily Report</h1>
+                <div class="hero-icons">
+                    <div class="hero-icon">
+                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                        </svg>
+                    </div>
+                    <div class="hero-icon">
+                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
+                        </svg>
+                    </div>
+                    <div class="hero-icon">
+                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
+                        </svg>
+                    </div>
+                </div>
                 <p class="hero-brief">
                     利用网格与留白塑造复古终端的秩序感，配合 #B2653B 主色的橙铜质感，
                     打造一份兼容当代阅读体验的指令式日报。