From a2dc2b07c5abc77f400a3ee75c4fb5b22132f944 Mon Sep 17 00:00:00 2001
From: shangfangjian <shangfangjian@bilidili.cn>
Date: Mon, 21 Sep 2026 00:19:31 +0800
Subject: [PATCH] =?UTF-8?q?Tab=E5=88=87=E6=8D=A2=E5=8A=A8=E7=94=BB:?=
 =?UTF-8?q?=E6=A8=AA=E5=90=91=E8=BD=BB=E6=89=AB+=E6=B7=A1=E5=85=A5=20+=20?=
 =?UTF-8?q?=E6=B4=BB=E8=B7=83Tab=E4=B8=8B=E5=88=92=E7=BA=BF=E6=B8=90?=
 =?UTF-8?q?=E5=8F=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 活跃Tab下方添加墨色渐变下划线动画(从中心向两侧展开)
- 页面内容切换时横向轻扫+淡入效果(0.3s)
- 使用 key={location.pathname} 触发重新渲染动画

Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>>
)
---
 frontend/src/admin/AdminLayout.tsx | 12 +++++------
 frontend/src/index.css             | 34 ++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/frontend/src/admin/AdminLayout.tsx b/frontend/src/admin/AdminLayout.tsx
index 60ad89e..19fbe6b 100644
--- a/frontend/src/admin/AdminLayout.tsx
+++ b/frontend/src/admin/AdminLayout.tsx
@@ -227,9 +227,9 @@ export default function AdminLayout() {
             to="/admin"
             end
             className={({ isActive }) =>
-              `flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 text-sm transition-colors ${
+              `flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 pb-1 text-sm transition-all duration-300 ${
                 isActive
-                  ? 'border-press bg-press-wash/60 font-medium text-press'
+                  ? 'border-press bg-press-wash/60 font-medium text-press nav-tab-active'
                   : 'border-transparent text-ink-500 hover:bg-paper-100 hover:text-ink-900'
               }`
             }
@@ -249,9 +249,9 @@ export default function AdminLayout() {
                     <NavLink
                       to={item.to}
                       className={({ isActive }) =>
-                        `flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 text-sm transition-colors ${
+                        `flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 pb-1 text-sm transition-all duration-300 ${
                           isActive
-                            ? 'border-press bg-press-wash/60 font-medium text-press'
+                            ? 'border-press bg-press-wash/60 font-medium text-press nav-tab-active'
                             : 'border-transparent text-ink-500 hover:bg-paper-100 hover:text-ink-900'
                         }`
                       }
@@ -282,8 +282,8 @@ export default function AdminLayout() {
       </aside>
 
       {/* ── 主内容区 ── */}
-      <main className="flex-1 overflow-y-auto p-4 lg:p-8">
-        <div className="mx-auto max-w-6xl">
+      <main className="flex-1 overflow-y-auto p-4 lg:p-8" key={location.pathname}>
+        <div className="mx-auto max-w-6xl page-content-enter">
           <Outlet />
         </div>
       </main>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 827d389..a960d2e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -16,6 +16,40 @@
   text-shadow: 0.5px 0.5px 0 currentColor;
 }
 
+/* 活跃Tab下划线渐变动画 */
+.nav-tab-active {
+  position: relative;
+}
+.nav-tab-active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #17140F, transparent);
+  transition: all 0.3s ease;
+  transform: translateX(-50%);
+}
+.nav-tab-active::after {
+  width: 80%;
+}
+
+/* 页面内容横向轻扫+淡入 */
+.page-content-enter {
+  animation: pageSlideIn 0.3s ease-out;
+}
+@keyframes pageSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 @layer base {
   html {
     -webkit-text-size-adjust: 100%;