feat(ui): 添加春节主题视觉装饰

csfwff · csfwff · commit 905b6bb02b5d · 2026-02-10T14:33:22.000+08:00
- 在桌面版和移动版导航栏添加动态灯笼动画效果
- 实现首页春节横幅展示新春祝福信息
- 为不同屏幕尺寸适配响应式灯笼样式
- 添加移动端专用的灯笼摆动动画
- 在AGENTS.md中记录春节视觉装饰的临时性质
diff --git a/AGENTS.md b/AGENTS.md
@@ -10,6 +10,7 @@
 
 ## 协作目标
 - `AGENTS.md` 保持精简，只保留会影响决策的长期约定；新增内容优先补充“关键链路”，避免堆砌背景信息。
+- 2026 春节临时视觉：全站顶栏灯笼 + 首页新春横幅；用户明确要求“节后”由 AI 直接移除，不额外做开关。
 
 ## 开发硬约束
 - 前端改动只改源码：`.scss` 与非 `min.js`；执行 `yarn run build` 生成产物；`classic` 与 `mobile` 皮肤需同步修改。
diff --git a/src/main/resources/css/base.css b/src/main/resources/css/base.css
diff --git a/src/main/resources/css/index.css b/src/main/resources/css/index.css
diff --git a/src/main/resources/css/mobile-base.css b/src/main/resources/css/mobile-base.css
diff --git a/src/main/resources/scss/base.scss b/src/main/resources/scss/base.scss
@@ -961,6 +961,17 @@ a[class*=" icon-"]:hover {
 /* end framework */
 
 /* start header */
+@keyframes spring-lantern-swing {
+  0%,
+  100% {
+    transform: rotate(-6deg);
+  }
+
+  50% {
+    transform: rotate(6deg);
+  }
+}
+
 .nav {
   position: sticky;
   top: 0;
@@ -975,6 +986,34 @@ a[class*=" icon-"]:hover {
   background-color: $theme-primary;
   box-shadow: 0px 5px 40px 0px rgba(17,58,93,.1);
   font-weight: 500;
+  overflow: visible;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: 6px;
+    width: 18px;
+    height: 30px;
+    border-radius: 55% 55% 45% 45%;
+    background:
+      linear-gradient(#d9b260, #d9b260) center top / 2px 8px no-repeat,
+      radial-gradient(circle at 50% 30%, #ffd68a 0, #ffb05e 28%, #dd4a2d 68%, #a41f1a 100%);
+    box-shadow: 0 4px 10px rgba(164, 31, 26, 0.28);
+    pointer-events: none;
+    z-index: 2;
+    transform-origin: top center;
+    animation: spring-lantern-swing 2.8s ease-in-out infinite;
+  }
+
+  &::before {
+    left: 12px;
+  }
+
+  &::after {
+    right: 12px;
+    animation-delay: -1.4s;
+  }
 
   h1 {
     //margin-right: 20px;
@@ -1224,6 +1263,13 @@ a[class*=" icon-"]:hover {
   }
 }
 
+@media (max-width: 1200px) {
+  .nav::before,
+  .nav::after {
+    display: none;
+  }
+}
+
 /* end header */
 
 /* start footer */
diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss
@@ -1269,6 +1269,56 @@ code .dec {
 
 /* start index */
 .index {
+  .spring-festival-banner {
+    max-width: 1160px;
+    margin: 12px auto 0;
+    padding: 10px 18px;
+    border-radius: 10px;
+    border: 1px solid rgba(212, 73, 44, 0.25);
+    background: linear-gradient(90deg, #fff7e0 0%, #ffe3c4 48%, #ffefd8 100%);
+    box-shadow: 0 4px 14px rgba(177, 58, 42, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 14px;
+    color: #b13a2a;
+  }
+
+  .spring-festival-banner__text {
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 1px;
+  }
+
+  .spring-festival-banner__lantern {
+    position: relative;
+    width: 15px;
+    height: 21px;
+    border-radius: 55% 55% 45% 45%;
+    background:
+      linear-gradient(#d9b260, #d9b260) center top / 2px 6px no-repeat,
+      radial-gradient(circle at 50% 30%, #ffd68a 0, #ffb05e 28%, #dd4a2d 68%, #a41f1a 100%);
+    box-shadow: 0 2px 6px rgba(164, 31, 26, 0.25);
+    transform-origin: top center;
+    animation: spring-lantern-swing 2.8s ease-in-out infinite;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      bottom: -7px;
+      width: 2px;
+      height: 7px;
+      border-radius: 2px;
+      background: linear-gradient(#f5d286, #d79b3b);
+      transform: translateX(-50%);
+    }
+  }
+
+  .spring-festival-banner__lantern:last-child {
+    animation-delay: -1.4s;
+  }
+
   .index-main {
     width: 60%;
   }
diff --git a/src/main/resources/scss/mobile-base.scss b/src/main/resources/scss/mobile-base.scss
@@ -517,6 +517,34 @@ a[class*=" icon-"]:hover {
   padding: 5px 0;
   z-index: 99;
   background-color: rgba(217, 240, 255, 0.75);
+  position: relative;
+  overflow: visible;
+}
+
+.nav::before,
+.nav::after {
+  content: "";
+  position: absolute;
+  top: 5px;
+  width: 10px;
+  height: 14px;
+  border-radius: 55% 55% 45% 45%;
+  background:
+    linear-gradient(#d9b260, #d9b260) center top / 1px 4px no-repeat,
+    radial-gradient(circle at 50% 30%, #ffd68a 0, #ffb05e 28%, #dd4a2d 68%, #a41f1a 100%);
+  box-shadow: 0 2px 4px rgba(164, 31, 26, 0.2);
+  pointer-events: none;
+  transform-origin: top center;
+  animation: spring-lantern-swing-mobile 2.6s ease-in-out infinite;
+}
+
+.nav::before {
+  left: 6px;
+}
+
+.nav::after {
+  right: 6px;
+  animation-delay: -1.3s;
 }
 
 .nav .wrapper{
@@ -2033,6 +2061,17 @@ code .dec {
   color: #999;
 }
 
+@keyframes spring-lantern-swing-mobile {
+  0%,
+  100% {
+    transform: rotate(-7deg);
+  }
+
+  50% {
+    transform: rotate(7deg);
+  }
+}
+
 .index {
   .module-list .title {
     margin-right: 30px;
@@ -2047,6 +2086,56 @@ code .dec {
       color: #fff;
     }
   }
+
+  .spring-festival-banner {
+    margin: 10px 10px 0;
+    padding: 8px 10px;
+    border-radius: 8px;
+    border: 1px solid rgba(212, 73, 44, 0.22);
+    background: linear-gradient(90deg, #fff6e4 0%, #ffe7cf 100%);
+    box-shadow: 0 2px 8px rgba(177, 58, 42, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: #b13a2a;
+  }
+
+  .spring-festival-banner__text {
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: .5px;
+  }
+
+  .spring-festival-banner__lantern {
+    position: relative;
+    width: 12px;
+    height: 16px;
+    border-radius: 55% 55% 45% 45%;
+    background:
+      linear-gradient(#d9b260, #d9b260) center top / 2px 5px no-repeat,
+      radial-gradient(circle at 50% 30%, #ffd68a 0, #ffb05e 28%, #dd4a2d 68%, #a41f1a 100%);
+    box-shadow: 0 2px 4px rgba(164, 31, 26, 0.22);
+    transform-origin: top center;
+    animation: spring-lantern-swing-mobile 2.6s ease-in-out infinite;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      bottom: -5px;
+      width: 2px;
+      height: 5px;
+      border-radius: 2px;
+      background: linear-gradient(#f5d286, #d79b3b);
+      transform: translateX(-50%);
+    }
+  }
+
+  .spring-festival-banner__lantern:last-child {
+    animation-delay: -1.3s;
+  }
+
 }
 
 /* end index */
@@ -4138,4 +4227,4 @@ body.night {
 
   font-size: 14px;  /* emoji/文字统一尺寸 */
   line-height: 1;  /* 防止 emoji 撑高 */
-}
+}
diff --git a/src/main/resources/skins/classic/index.ftl b/src/main/resources/skins/classic/index.ftl
@@ -35,6 +35,11 @@
 <#if showTopAd>
     ${HeaderBannerLabel}
 </#if>
+<div class="spring-festival-banner" aria-label="春节氛围装饰">
+    <span class="spring-festival-banner__lantern" aria-hidden="true"></span>
+    <span class="spring-festival-banner__text">新春快乐 · 摸鱼大吉</span>
+    <span class="spring-festival-banner__lantern" aria-hidden="true"></span>
+</div>
 <div class="main">
     <div class="wrapper index-full-size-white" id="nightTips" style="display: none"></div>
     <div class="wrapper" id="indexTopWrapper" style="padding-bottom: 20px">
diff --git a/src/main/resources/skins/mobile/index.ftl b/src/main/resources/skins/mobile/index.ftl
@@ -36,6 +36,11 @@
 <#if showTopAd>
     ${HeaderBannerLabel}
 </#if>
+<div class="spring-festival-banner" aria-label="春节氛围装饰">
+    <span class="spring-festival-banner__lantern" aria-hidden="true"></span>
+    <span class="spring-festival-banner__text">新春快乐 · 摸鱼大吉</span>
+    <span class="spring-festival-banner__lantern" aria-hidden="true"></span>
+</div>
 
 <#if esEnabled || algoliaEnabled>
     <form class="form wrapper" style="margin-top: 10px" action="/search">
