From df0d0ff3442173c5d6ed257e48b437180b3d6920 Mon Sep 17 00:00:00 2001
From: tbphp <admin@tbphp.net>
Date: Fri, 4 Jul 2025 09:41:07 +0800
Subject: [PATCH] feat: style

---
 web/src/assets/style.css            | 23 ++++++++++++++---------
 web/src/components/BaseInfoCard.vue |  8 ++++----
 web/src/components/Layout.vue       | 28 ++++++++--------------------
 web/src/components/LineChart.vue    |  4 ++--
 web/src/components/Logout.vue       |  2 +-
 web/src/components/NavBar.vue       |  5 +++--
 web/src/views/Dashboard.vue         |  2 +-
 web/src/views/Settings.vue          |  8 ++++----
 8 files changed, 37 insertions(+), 43 deletions(-)

diff --git a/web/src/assets/style.css b/web/src/assets/style.css
index 0cfd5e3..7b1372b 100644
--- a/web/src/assets/style.css
+++ b/web/src/assets/style.css
@@ -1,4 +1,6 @@
 :root {
+  overflow-y: scroll;
+  scrollbar-gutter: stable;
   font-family:
     "Inter",
     -apple-system,
@@ -51,7 +53,7 @@ body {
 }
 
 #app {
-  max-width: 1400px;
+  /* max-width: 1400px; */
   width: 100%;
   margin: 0 auto;
   height: 100%;
@@ -119,9 +121,8 @@ body {
 /* 动画和过渡 */
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s ease;
+  transition: opacity 0.2s ease;
 }
-
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
@@ -129,7 +130,7 @@ body {
 
 .slide-enter-active,
 .slide-leave-active {
-  transition: transform 0.3s ease;
+  transition: transform 0.2s ease;
 }
 
 .slide-enter-from {
@@ -167,7 +168,7 @@ body {
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-lg);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
 }
 
 .modern-card:hover {
@@ -178,7 +179,7 @@ body {
 /* 按钮增强 */
 .modern-button {
   border-radius: var(--border-radius-md);
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
   font-weight: 600;
   letter-spacing: 0.5px;
 }
@@ -191,7 +192,7 @@ body {
 /* 输入框增强 */
 .modern-input {
   border-radius: var(--border-radius-md);
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
 }
 
 .modern-input:focus {
@@ -266,8 +267,8 @@ body {
 /* 悬停效果增强 */
 .hover-lift {
   transition:
-    transform 0.3s ease,
-    box-shadow 0.3s ease;
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .hover-lift:hover {
@@ -328,3 +329,7 @@ body {
 .bounce {
   animation: bounce 1s ease-in-out;
 }
+
+.n-layout-scroll-container {
+  overflow: hidden;
+}
diff --git a/web/src/components/BaseInfoCard.vue b/web/src/components/BaseInfoCard.vue
index 4ac70e7..8160608 100644
--- a/web/src/components/BaseInfoCard.vue
+++ b/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 {
diff --git a/web/src/components/Layout.vue b/web/src/components/Layout.vue
index 887b29a..77b5060 100644
--- a/web/src/components/Layout.vue
+++ b/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;
diff --git a/web/src/components/LineChart.vue b/web/src/components/LineChart.vue
index 6166a28..bc7fd4b 100644
--- a/web/src/components/LineChart.vue
+++ b/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));
 }
 
diff --git a/web/src/components/Logout.vue b/web/src/components/Logout.vue
index 6fba1ce..3b81231 100644
--- a/web/src/components/Logout.vue
+++ b/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;
 }
diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
index 5c244b6..7b25ec3 100644
--- a/web/src/components/NavBar.vue
+++ b/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) {
diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue
index e1f3960..81b3520 100644
--- a/web/src/views/Dashboard.vue
+++ b/web/src/views/Dashboard.vue
@@ -54,7 +54,7 @@ import LineChart from "@/components/LineChart.vue";
 }
 
 .dashboard-chart {
-  animation: fadeInUp 0.6s ease-out 0.2s both;
+  animation: fadeInUp 0.2s ease-out 0.2s both;
 }
 
 @keyframes fadeInUp {
diff --git a/web/src/views/Settings.vue b/web/src/views/Settings.vue
index f5c9a5f..36085e9 100644
--- a/web/src/views/Settings.vue
+++ b/web/src/views/Settings.vue
@@ -169,20 +169,20 @@ async function handleSubmit() {
 }
 
 .settings-category {
-  animation: fadeInUp 0.6s ease-out both;
+  animation: fadeInUp 0.2s ease-out both;
   margin-bottom: 24px;
 }
 
 .settings-category:nth-child(2) {
-  animation-delay: 0.1s;
+  animation-delay: 0.07s;
 }
 
 .settings-category:nth-child(3) {
-  animation-delay: 0.2s;
+  animation-delay: 0.14s;
 }
 
 .settings-category:nth-child(4) {
-  animation-delay: 0.3s;
+  animation-delay: 0.21s;
 }
 
 .category-card {