From 5ddce37ee6f940f76898fd6249f49f72d5189661 Mon Sep 17 00:00:00 2001
From: chiyi <cyi.cc@outlook.com>
Date: Tue, 27 Oct 2026 15:44:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(home):=20=E6=95=B4=E4=BD=93=E7=BE=8E?=
 =?UTF-8?q?=E5=8C=96=20=E2=80=94=20=E5=85=A8=E9=A1=B5=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E6=B7=A1=E7=B4=AB=E5=BA=95=E3=80=81hero=20=E6=9F=94=E5=85=89?=
 =?UTF-8?q?=E6=B5=AE=E5=8A=A8=E3=80=81=E4=BF=AE=E8=83=BD=E5=8A=9B=E7=9F=A9?=
 =?UTF-8?q?=E9=98=B5=E7=95=99=E7=99=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 frontend/src/layouts/PublicLayout.vue |  7 +++-
 frontend/src/views/HomeView.vue       | 49 ++++++++++++++++++++-------
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/frontend/src/layouts/PublicLayout.vue b/frontend/src/layouts/PublicLayout.vue
index d894153..475bd14 100644
--- a/frontend/src/layouts/PublicLayout.vue
+++ b/frontend/src/layouts/PublicLayout.vue
@@ -76,7 +76,8 @@ async function onLogout() {
 </script>
 
 <template>
-  <div class="theme-x min-h-screen bg-[var(--app-bg)] text-[color:var(--fg-2)] selection:bg-orange-400/30">
+  <div class="theme-x min-h-screen bg-[var(--app-bg)] text-[color:var(--fg-2)] selection:bg-orange-400/30"
+       :class="{ 'home-bg': isHome && !isDark }">
     <!-- ===== Top bar：悬浮胶囊，滚动展开为通栏 ===== -->
     <header class="top-nav fixed top-0 inset-x-0 z-40" :class="{ scrolled }">
       <div class="nav-inner mx-auto flex items-center gap-3">
@@ -311,6 +312,10 @@ html.dark .nav-inner { box-shadow: 0 8px 30px -14px rgb(0 0 0 / 0.5); }
   transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
 }
 .round-btn:hover { color: var(--fg); background: var(--hover); border-color: rgb(124 92 252 / 0.4); box-shadow: 0 4px 14px rgb(124 92 252 / 0.16); transform: translateY(-1px); }
+/* 首页整页淡紫渐变底（铺满整个页面高度） */
+.home-bg {
+  background: linear-gradient(180deg, #f6f2ff 0%, #f1ecfe 28%, #f3f0fe 60%, #eef1fe 100%) !important;
+}
 /* 游客登录入口：vivid 同款渐变胶囊 */
 .login-pill {
   display: inline-flex; align-items: center;
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 8f171c8..97cbba7 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -76,8 +76,10 @@
     <!-- 能力矩阵 -->
     <section class="features reveal">
       <div class="section-head">
-        <span class="eyebrow">01 · 能力</span>
-        <h2>一站式创作引擎</h2>
+        <div>
+          <span class="eyebrow">01 · 能力</span>
+          <h2>一站式创作引擎</h2>
+        </div>
       </div>
       <div class="feature-grid">
         <div v-for="f in features" :key="f.title" class="feature">
@@ -334,15 +336,7 @@ async function copyQqGroup() {
   display: flex;
   flex-direction: column;
 }
-/* 整页紫色渐变底铺满 */
-.home::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  background: linear-gradient(160deg, #f5f1fe 0%, #efe9fd 45%, #eae6fd 75%, #e9edfd 100%);
-  pointer-events: none;
-}
+
 
 /* Hero：左文右图 */
 .hero {
@@ -355,9 +349,27 @@ async function copyQqGroup() {
   position: absolute;
   inset: 0;
   pointer-events: none;
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
+  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
   background:
-    radial-gradient(700px 420px at 10% 0%, rgba(124, 92, 245, 0.09), transparent 70%),
-    radial-gradient(640px 420px at 90% 14%, rgba(59, 130, 246, 0.07), transparent 70%);
+    radial-gradient(760px 480px at 8% 4%, rgba(139, 92, 246, 0.16), transparent 70%),
+    radial-gradient(700px 480px at 92% 12%, rgba(59, 130, 246, 0.13), transparent 70%),
+    radial-gradient(520px 360px at 55% 100%, rgba(236, 72, 153, 0.09), transparent 70%);
+}
+.hero-bg::before,
+.hero-bg::after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(70px);
+  animation: drift 14s ease-in-out infinite alternate;
+}
+.hero-bg::before { width: 340px; height: 340px; left: 38%; top: 8%; background: rgba(167, 139, 250, 0.35); }
+.hero-bg::after { width: 300px; height: 300px; right: 6%; bottom: 4%; background: rgba(125, 211, 252, 0.3); animation-delay: -6s; }
+@keyframes drift {
+  from { transform: translate(0, 0) scale(1); }
+  to { transform: translate(30px, -24px) scale(1.12); }
 }
 .hero-wrap {
   position: relative;
@@ -435,6 +447,15 @@ html.dark .art { border-color: var(--ink-soft); }
   pointer-events: none;
 }
 @keyframes imgSweep { to { transform: translateX(100%); } }
+/* 拼贴卡缓慢悬浮（用独立的 translate 属性，不与 transform 冲突） */
+.art:not(.ph) { animation: bob 6s ease-in-out infinite; }
+.art.a2:not(.ph) { animation-delay: -1.5s; }
+.art.a3:not(.ph) { animation-delay: -3s; }
+.art.a4:not(.ph) { animation-delay: -4.5s; }
+@keyframes bob {
+  0%, 100% { translate: 0 0; }
+  50% { translate: 0 -8px; }
+}
 .art:hover {
   transform: translateY(-4px) rotate(0deg) scale(1.02);
   box-shadow: 0 30px 64px -20px rgba(30, 20, 90, 0.45);
@@ -720,6 +741,8 @@ html.dark .art { border-color: var(--ink-soft); }
   overflow: hidden;
   background: linear-gradient(135deg, rgba(139, 92, 246, 0.07), rgba(99, 102, 241, 0.03) 60%, var(--surface));
 }
+.feature:nth-child(4):last-child { grid-column: span 2; }
+.feature:nth-child(3):last-child { grid-column: span 3; }
 .feature:nth-child(5) {
   background: linear-gradient(315deg, rgba(236, 72, 153, 0.05), rgba(245, 158, 11, 0.04) 60%, var(--surface));
 }