Tab切换动画:横向轻扫+淡入 + 活跃Tab下划线渐变

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

Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>>
)

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%;