feat: style

web/src/components/BaseInfoCard.vue

@@ -56,7 +56,7 @@ onMounted(() => {
         v-for="(stat, index) in stats"
         :key="stat.title"
         class="stat-card modern-card"
-        :style="{ animationDelay: `${index * 0.1}s` }"
+        :style="{ animationDelay: `${index * 0.07}s` }"
       >
         <div class="stat-header">
           <div class="stat-icon" :style="{ background: stat.color }">
@@ -92,7 +92,7 @@ onMounted(() => {
 <style scoped>
 .stats-container {
   width: 100%;
-  animation: fadeInUp 0.6s ease-out;
+  animation: fadeInUp 0.2s ease-out;
 }
 
 .stats-grid {
@@ -108,7 +108,7 @@ onMounted(() => {
   border: 1px solid rgba(255, 255, 255, 0.3);
   position: relative;
   overflow: hidden;
-  animation: slideInUp 0.6s ease-out both;
+  animation: slideInUp 0.2s ease-out both;
 }
 
 .stat-header {
@@ -190,7 +190,7 @@ onMounted(() => {
   height: 100%;
   border-radius: 2px;
   transition: width 1s ease-out;
-  transition-delay: 0.3s;
+  transition-delay: 0.2s;
 }
 
 @keyframes slideInUp {

web/src/components/Layout.vue

@@ -57,14 +57,14 @@ import NavBar from "@/components/NavBar.vue";
   top: 0;
   z-index: 100;
   padding: 0 24px;
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
 .header-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  max-width: 1400px;
-  margin: 0 auto;
   height: 100%;
   padding: 0 8px;
 }
@@ -100,14 +100,18 @@ import NavBar from "@/components/NavBar.vue";
 }
 
 .header-nav {
-  flex: 1;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 600px;
   display: flex;
   justify-content: center;
-  max-width: 600px;
 }
 
 .header-actions {
   flex-shrink: 0;
+  margin-left: auto;
 }
 
 .layout-content {
@@ -152,22 +156,6 @@ import NavBar from "@/components/NavBar.vue";
   }
 }
 
-/* 过渡动画 */
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.3s ease;
-}
-
-.fade-enter-from {
-  opacity: 0;
-  transform: translateY(10px);
-}
-
-.fade-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-
 :deep(.n-layout-header) {
   height: 64px;
   padding: 0;

web/src/components/LineChart.vue

@@ -215,11 +215,11 @@ onMounted(() => {
 
 .chart-line {
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
-  transition: stroke-dashoffset 2s ease-out;
+  transition: stroke-dashoffset 0.2s ease-out;
 }
 
 .chart-point {
-  transition: r 0.3s ease;
+  transition: r 0.2s ease;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
 }
 

web/src/components/Logout.vue

@@ -30,7 +30,7 @@ const handleLogout = () => {
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
   font-weight: 500;
   letter-spacing: 0.2px;
 }

web/src/components/NavBar.vue

@@ -58,7 +58,7 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
   color: inherit;
   padding: 8px 16px;
   border-radius: var(--border-radius-md);
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
   font-weight: 500;
 }
 
@@ -81,12 +81,13 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
 :deep(.n-menu) {
   background: transparent;
   border-bottom: none;
+  justify-content: center;
 }
 
 :deep(.n-menu-item) {
   border-radius: var(--border-radius-md);
   margin: 0 4px;
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
 }
 
 :deep(.n-menu-item:hover) {