diff --git a/web/package.json b/web/package.json
index 64ab83d..974e488 100644
--- a/web/package.json
+++ b/web/package.json
@@ -4,7 +4,7 @@
   "version": "0.1.0",
   "description": "GPT Load Balancer Frontend - A modern Vue 3 frontend for GPT load balancing service",
   "type": "module",
-  "keywords": ["vue3", "typescript", "vite", "naive-ui", "gpt", "load-balancer", "frontend"],
+  "keywords": ["vue3", "typescript", "vite", "naive-ui", "gpt-load", "frontend"],
   "author": "tbphp",
   "license": "MIT",
   "repository": {
diff --git a/web/src/App.vue b/web/src/App.vue
index f0cf0b3..d715f88 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -10,7 +10,34 @@ const isLoggedIn = computed(() => !!authKey.value);
 
 <template>
   <global-providers>
-    <layout v-if="isLoggedIn" />
-    <router-view v-else />
+    <div id="app-root">
+      <transition name="app-transition" mode="out-in">
+        <layout v-if="isLoggedIn" key="layout" />
+        <router-view v-else key="auth" />
+      </transition>
+    </div>
   </global-providers>
 </template>
+
+<style>
+#app-root {
+  width: 100%;
+  /* height: 100vh; */
+  overflow: hidden;
+}
+
+.app-transition-enter-active,
+.app-transition-leave-active {
+  transition: all 0.4s ease;
+}
+
+.app-transition-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.app-transition-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+</style>
diff --git a/web/src/assets/style.css b/web/src/assets/style.css
index 44d1249..0cfd5e3 100644
--- a/web/src/assets/style.css
+++ b/web/src/assets/style.css
@@ -1,28 +1,65 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  line-height: 1.6;
   font-weight: 400;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  /* 现代化颜色方案 */
+  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+  --surface-gradient: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+  --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+
+  /* 阴影效果 */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* 边框半径 */
+  --border-radius-sm: 8px;
+  --border-radius-md: 12px;
+  --border-radius-lg: 16px;
+  --border-radius-xl: 24px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 html,
 body {
   height: 100%;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  background-attachment: fixed;
 }
 
 #app {
-  max-width: 1280px;
+  max-width: 1400px;
   width: 100%;
-  padding: 20px;
   margin: 0 auto;
   height: 100%;
   box-sizing: border-box;
+  position: relative;
 }
 
+/* 工具类 */
 .flex {
   display: flex;
 }
@@ -78,3 +115,216 @@ body {
 .shrink {
   flex-shrink: 1;
 }
+
+/* 动画和过渡 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.slide-enter-from {
+  transform: translateX(-100%);
+}
+
+.slide-leave-to {
+  transform: translateX(100%);
+}
+
+/* 美化滚动条 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+}
+
+/* 通用卡片样式 */
+.modern-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  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;
+}
+
+.modern-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-xl);
+}
+
+/* 按钮增强 */
+.modern-button {
+  border-radius: var(--border-radius-md);
+  transition: all 0.3s ease;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.modern-button:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+/* 输入框增强 */
+.modern-input {
+  border-radius: var(--border-radius-md);
+  transition: all 0.3s ease;
+}
+
+.modern-input:focus {
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+/* 选择文本样式 */
+::selection {
+  background: rgba(102, 126, 234, 0.2);
+  color: #1e293b;
+}
+
+::-moz-selection {
+  background: rgba(102, 126, 234, 0.2);
+  color: #1e293b;
+}
+
+/* Focus样式增强 */
+*:focus {
+  outline: none;
+}
+
+*:focus-visible {
+  outline: 2px solid rgba(102, 126, 234, 0.5);
+  outline-offset: 2px;
+}
+
+/* 加载状态样式 */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+/* 响应式网格 */
+.responsive-grid {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+@media (max-width: 640px) {
+  .responsive-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
+
+/* 文本渐变 */
+.text-gradient {
+  background: var(--primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* 玻璃态效果 */
+.glass-effect {
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+/* 悬停效果增强 */
+.hover-lift {
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+.hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-xl);
+}
+
+/* 脉冲动画 */
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* 旋转动画 */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+/* 弹跳动画 */
+@keyframes bounce {
+  0%,
+  20%,
+  53%,
+  80%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  40%,
+  43% {
+    transform: translate3d(0, -30px, 0);
+  }
+  70% {
+    transform: translate3d(0, -15px, 0);
+  }
+  90% {
+    transform: translate3d(0, -4px, 0);
+  }
+}
+
+.bounce {
+  animation: bounce 1s ease-in-out;
+}
diff --git a/web/src/components/BaseInfoCard.vue b/web/src/components/BaseInfoCard.vue
index db03a4a..4ac70e7 100644
--- a/web/src/components/BaseInfoCard.vue
+++ b/web/src/components/BaseInfoCard.vue
@@ -1,5 +1,232 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+// 模拟数据
+const stats = ref([
+  {
+    title: "总请求数",
+    value: "125,842",
+    icon: "📈",
+    color: "var(--primary-gradient)",
+    trend: "+12.5%",
+    trendUp: true,
+  },
+  {
+    title: "活跃连接",
+    value: "1,234",
+    icon: "🔗",
+    color: "var(--success-gradient)",
+    trend: "+5.2%",
+    trendUp: true,
+  },
+  {
+    title: "响应时间",
+    value: "245ms",
+    icon: "⚡",
+    color: "var(--warning-gradient)",
+    trend: "-8.1%",
+    trendUp: false,
+  },
+  {
+    title: "错误率",
+    value: "0.12%",
+    icon: "🛡️",
+    color: "var(--secondary-gradient)",
+    trend: "-2.3%",
+    trendUp: false,
+  },
+]);
+
+const animatedValues = ref<Record<string, number>>({});
+
+onMounted(() => {
+  // 动画效果
+  stats.value.forEach((stat, index) => {
+    setTimeout(() => {
+      animatedValues.value[stat.title] = 1;
+    }, index * 150);
+  });
+});
+</script>
+
 <template>
-  <n-card title="基础统计">
-    <div>基础统计</div>
-  </n-card>
+  <div class="stats-container">
+    <div class="stats-grid">
+      <div
+        v-for="(stat, index) in stats"
+        :key="stat.title"
+        class="stat-card modern-card"
+        :style="{ animationDelay: `${index * 0.1}s` }"
+      >
+        <div class="stat-header">
+          <div class="stat-icon" :style="{ background: stat.color }">
+            {{ stat.icon }}
+          </div>
+          <div
+            class="stat-trend"
+            :class="{ 'trend-up': stat.trendUp, 'trend-down': !stat.trendUp }"
+          >
+            {{ stat.trend }}
+          </div>
+        </div>
+
+        <div class="stat-content">
+          <div class="stat-value">{{ stat.value }}</div>
+          <div class="stat-title">{{ stat.title }}</div>
+        </div>
+
+        <div class="stat-bar">
+          <div
+            class="stat-bar-fill"
+            :style="{
+              background: stat.color,
+              width: `${animatedValues[stat.title] * 100}%`,
+            }"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.stats-container {
+  width: 100%;
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.stat-card {
+  padding: 24px;
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: var(--border-radius-lg);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  position: relative;
+  overflow: hidden;
+  animation: slideInUp 0.6s ease-out both;
+}
+
+.stat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.stat-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--border-radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  color: white;
+  box-shadow: var(--shadow-md);
+}
+
+.stat-trend {
+  font-size: 0.875rem;
+  font-weight: 600;
+  padding: 4px 8px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+}
+
+.trend-up {
+  background: rgba(34, 197, 94, 0.1);
+  color: #16a34a;
+}
+
+.trend-down {
+  background: rgba(239, 68, 68, 0.1);
+  color: #dc2626;
+}
+
+.trend-up::before {
+  content: "↗";
+  margin-right: 4px;
+}
+
+.trend-down::before {
+  content: "↘";
+  margin-right: 4px;
+}
+
+.stat-content {
+  margin-bottom: 16px;
+}
+
+.stat-value {
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #1e293b;
+  margin-bottom: 4px;
+}
+
+.stat-title {
+  font-size: 0.95rem;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.stat-bar {
+  width: 100%;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+}
+
+.stat-bar-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 1s ease-out;
+  transition-delay: 0.3s;
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 640px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .stat-card {
+    padding: 20px;
+  }
+
+  .stat-value {
+    font-size: 2rem;
+  }
+}
+</style>
diff --git a/web/src/components/GlobalProviders.vue b/web/src/components/GlobalProviders.vue
index 2226fb3..92c6478 100644
--- a/web/src/components/GlobalProviders.vue
+++ b/web/src/components/GlobalProviders.vue
@@ -1,14 +1,44 @@
 <script setup lang="ts">
 import { appState } from "@/utils/app-state";
 import {
+  NConfigProvider,
   NDialogProvider,
   NLoadingBarProvider,
   NMessageProvider,
   useLoadingBar,
   useMessage,
+  type GlobalThemeOverrides,
 } from "naive-ui";
 import { defineComponent, watch } from "vue";
 
+// 自定义主题配置
+const themeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: "#667eea",
+    primaryColorHover: "#5a6fd8",
+    primaryColorPressed: "#4c63d2",
+    primaryColorSuppl: "#8b9df5",
+    borderRadius: "12px",
+    borderRadiusSmall: "8px",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  },
+  Card: {
+    paddingMedium: "24px",
+  },
+  Button: {
+    fontWeight: "600",
+    heightMedium: "40px",
+    heightLarge: "48px",
+  },
+  Input: {
+    heightMedium: "40px",
+    heightLarge: "48px",
+  },
+  Menu: {
+    itemHeight: "42px",
+  },
+};
+
 function useGlobalMessage() {
   window.$message = useMessage();
 }
@@ -39,13 +69,15 @@ const Message = defineComponent({
 </script>
 
 <template>
-  <n-loading-bar-provider>
-    <n-message-provider>
-      <n-dialog-provider>
-        <slot />
-        <loading-bar />
-        <message />
-      </n-dialog-provider>
-    </n-message-provider>
-  </n-loading-bar-provider>
+  <n-config-provider :theme-overrides="themeOverrides">
+    <n-loading-bar-provider>
+      <n-message-provider>
+        <n-dialog-provider>
+          <slot />
+          <loading-bar />
+          <message />
+        </n-dialog-provider>
+      </n-message-provider>
+    </n-loading-bar-provider>
+  </n-config-provider>
 </template>
diff --git a/web/src/components/Layout.vue b/web/src/components/Layout.vue
index 78cce92..887b29a 100644
--- a/web/src/components/Layout.vue
+++ b/web/src/components/Layout.vue
@@ -4,25 +4,176 @@ import NavBar from "@/components/NavBar.vue";
 </script>
 
 <template>
-  <n-layout>
-    <n-layout-header class="flex items-center">
-      <h1 class="layout-header-title">T.COM</h1>
-      <nav-bar />
-      <logout />
+  <n-layout class="main-layout">
+    <n-layout-header class="layout-header">
+      <div class="header-content">
+        <div class="header-brand">
+          <div class="brand-icon">
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+          <h1 class="brand-title">GPT Load</h1>
+        </div>
+
+        <nav-bar class="header-nav" />
+
+        <div class="header-actions">
+          <logout />
+        </div>
+      </div>
     </n-layout-header>
-    <n-layout-content class="layout-content" content-style="padding: 24px;">
-      <router-view />
+
+    <n-layout-content class="layout-content">
+      <div class="content-wrapper">
+        <router-view v-slot="{ Component }">
+          <transition name="fade" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
+      </div>
     </n-layout-content>
   </n-layout>
 </template>
 
 <style scoped>
-.layout-header-title {
-  margin-top: 0;
-  margin-bottom: 8px;
-  margin-right: 20px;
+.main-layout {
+  /* height: 100vh; */
+  background: transparent;
 }
+
+.layout-header {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-sm);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  padding: 0 24px;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 1400px;
+  margin: 0 auto;
+  height: 100%;
+  padding: 0 8px;
+}
+
+.header-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.brand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: var(--primary-gradient);
+  border-radius: var(--border-radius-md);
+  color: white;
+  box-shadow: var(--shadow-md);
+}
+
+.brand-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+  background: var(--primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0;
+  letter-spacing: -0.3px;
+}
+
+.header-nav {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  max-width: 600px;
+}
+
+.header-actions {
+  flex-shrink: 0;
+}
+
 .layout-content {
-  width: 100%;
+  flex: 1;
+  overflow: auto;
+  background: transparent;
+}
+
+.content-wrapper {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 24px;
+  min-height: calc(100vh - 64px);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .header-content {
+    padding: 0 4px;
+  }
+
+  .brand-title {
+    font-size: 1.2rem;
+  }
+
+  .content-wrapper {
+    padding: 16px;
+  }
+
+  .header-nav {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .brand-title {
+    display: none;
+  }
+
+  .content-wrapper {
+    padding: 12px;
+  }
+}
+
+/* 过渡动画 */
+.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;
+}
+
+:deep(.n-layout-content) {
+  padding: 0;
 }
 </style>
diff --git a/web/src/components/LineChart.vue b/web/src/components/LineChart.vue
index 844ac8a..6166a28 100644
--- a/web/src/components/LineChart.vue
+++ b/web/src/components/LineChart.vue
@@ -1,5 +1,265 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+// 模拟图表数据
+const chartData = ref({
+  labels: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
+  datasets: [
+    {
+      label: "请求数量",
+      data: [120, 150, 300, 450, 380, 280, 200],
+      color: "#667eea",
+    },
+    {
+      label: "响应时间",
+      data: [200, 180, 250, 300, 220, 190, 160],
+      color: "#f093fb",
+    },
+  ],
+});
+
+const chartContainer = ref<HTMLElement>();
+const animationProgress = ref(0);
+
+// 生成SVG路径
+const generatePath = (data: number[]) => {
+  const points = data.map((value, index) => {
+    const x = (index / (data.length - 1)) * 380 + 10;
+    const y = 200 - (value / 500) * 180 - 10;
+    return `${x},${y}`;
+  });
+  return `M ${points.join(" L ")}`;
+};
+
+onMounted(() => {
+  // 简单的动画效果
+  let start = 0;
+  const animate = (timestamp: number) => {
+    if (!start) {
+      start = timestamp;
+    }
+    const progress = Math.min((timestamp - start) / 2000, 1);
+    animationProgress.value = progress;
+
+    if (progress < 1) {
+      requestAnimationFrame(animate);
+    }
+  };
+  requestAnimationFrame(animate);
+});
+</script>
+
 <template>
-  <n-card title="拆线图">
-    <div>拆线图</div>
-  </n-card>
+  <div class="chart-container">
+    <n-card class="chart-card modern-card" :bordered="false">
+      <template #header>
+        <div class="chart-header">
+          <h3 class="chart-title">性能监控</h3>
+          <p class="chart-subtitle">实时系统性能指标</p>
+        </div>
+      </template>
+
+      <div ref="chartContainer" class="chart-content">
+        <div class="chart-legend">
+          <div v-for="dataset in chartData.datasets" :key="dataset.label" class="legend-item">
+            <div class="legend-color" :style="{ backgroundColor: dataset.color }" />
+            <span class="legend-label">{{ dataset.label }}</span>
+          </div>
+        </div>
+
+        <div class="chart-area">
+          <div class="chart-grid">
+            <div
+              v-for="(label, index) in chartData.labels"
+              :key="label"
+              class="grid-line"
+              :style="{ left: `${(index / (chartData.labels.length - 1)) * 100}%` }"
+            />
+          </div>
+
+          <svg class="chart-svg" viewBox="0 0 400 200">
+            <!-- 数据线条 -->
+            <g v-for="dataset in chartData.datasets" :key="dataset.label">
+              <path
+                :d="generatePath(dataset.data)"
+                :stroke="dataset.color"
+                stroke-width="3"
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="chart-line"
+                :style="{
+                  strokeDasharray: '1000',
+                  strokeDashoffset: `${1000 * (1 - animationProgress)}`,
+                }"
+              />
+
+              <!-- 数据点 -->
+              <g v-for="(value, index) in dataset.data" :key="index">
+                <circle
+                  :cx="(index / (dataset.data.length - 1)) * 380 + 10"
+                  :cy="200 - (value / 500) * 180 - 10"
+                  :r="animationProgress > index / dataset.data.length ? 4 : 0"
+                  :fill="dataset.color"
+                  class="chart-point"
+                />
+              </g>
+            </g>
+          </svg>
+
+          <div class="chart-labels">
+            <div
+              v-for="(label, index) in chartData.labels"
+              :key="label"
+              class="chart-label"
+              :style="{ left: `${(index / (chartData.labels.length - 1)) * 100}%` }"
+            >
+              {{ label }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </n-card>
+  </div>
 </template>
+
+<style scoped>
+.chart-container {
+  width: 100%;
+}
+
+.chart-card {
+  background: rgba(255, 255, 255, 0.98);
+}
+
+.chart-header {
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.chart-title {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 4px 0;
+}
+
+.chart-subtitle {
+  font-size: 0.9rem;
+  color: #64748b;
+  margin: 0;
+}
+
+.chart-content {
+  position: relative;
+}
+
+.chart-legend {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.legend-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  box-shadow: var(--shadow-sm);
+}
+
+.legend-label {
+  font-size: 0.9rem;
+  color: #374151;
+  font-weight: 500;
+}
+
+.chart-area {
+  position: relative;
+  height: 240px;
+  background: linear-gradient(180deg, rgba(102, 126, 234, 0.02) 0%, rgba(102, 126, 234, 0.08) 100%);
+  border-radius: var(--border-radius-md);
+  border: 1px solid rgba(102, 126, 234, 0.1);
+  overflow: hidden;
+}
+
+.chart-grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.grid-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: rgba(102, 126, 234, 0.1);
+}
+
+.chart-svg {
+  width: 100%;
+  height: 200px;
+  position: relative;
+  z-index: 1;
+}
+
+.chart-line {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+  transition: stroke-dashoffset 2s ease-out;
+}
+
+.chart-point {
+  transition: r 0.3s ease;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+}
+
+.chart-point:hover {
+  r: 6;
+}
+
+.chart-labels {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.chart-label {
+  position: absolute;
+  font-size: 0.8rem;
+  color: #64748b;
+  font-weight: 500;
+  transform: translateX(-50%);
+  background: rgba(255, 255, 255, 0.9);
+  padding: 4px 8px;
+  border-radius: 4px;
+  backdrop-filter: blur(4px);
+}
+
+@media (max-width: 768px) {
+  .chart-legend {
+    gap: 16px;
+  }
+
+  .chart-area {
+    height: 200px;
+  }
+
+  .chart-svg {
+    height: 160px;
+  }
+}
+</style>
diff --git a/web/src/components/Logout.vue b/web/src/components/Logout.vue
index d5bf1a1..6fba1ce 100644
--- a/web/src/components/Logout.vue
+++ b/web/src/components/Logout.vue
@@ -12,5 +12,38 @@ const handleLogout = () => {
 </script>
 
 <template>
-  <n-button quaternary round @click="handleLogout">退出</n-button>
+  <n-button quaternary round class="logout-button" @click="handleLogout">
+    <template #icon>
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path
+          d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.59L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"
+        />
+      </svg>
+    </template>
+    退出登录
+  </n-button>
 </template>
+
+<style scoped>
+.logout-button {
+  color: #64748b;
+  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;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+}
+
+.logout-button:hover {
+  color: #dc2626;
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.2);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+:deep(.n-button__content) {
+  gap: 6px;
+}
+</style>
diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
index a653238..5c244b6 100644
--- a/web/src/components/NavBar.vue
+++ b/web/src/components/NavBar.vue
@@ -4,16 +4,16 @@ import { computed, h } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 
 const menuOptions: MenuOption[] = [
-  renderMenuItem("dashboard", "仪表盘"),
-  renderMenuItem("keys", "密钥管理"),
-  renderMenuItem("logs", "日志"),
-  renderMenuItem("settings", "系统设置"),
+  renderMenuItem("dashboard", "仪表盘", "📊"),
+  renderMenuItem("keys", "密钥管理", "🔑"),
+  renderMenuItem("logs", "日志", "📋"),
+  renderMenuItem("settings", "系统设置", "⚙️"),
 ];
 
 const route = useRoute();
 const activeMenu = computed(() => route.name);
 
-function renderMenuItem(key: string, label: string): MenuOption {
+function renderMenuItem(key: string, label: string, icon: string): MenuOption {
   return {
     label: () =>
       h(
@@ -22,8 +22,14 @@ function renderMenuItem(key: string, label: string): MenuOption {
           to: {
             name: key,
           },
+          class: "nav-menu-item",
         },
-        { default: () => label }
+        {
+          default: () => [
+            h("span", { class: "nav-item-icon" }, icon),
+            h("span", { class: "nav-item-text" }, label),
+          ],
+        }
       ),
     key,
   };
@@ -31,5 +37,86 @@ function renderMenuItem(key: string, label: string): MenuOption {
 </script>
 
 <template>
-  <n-menu mode="horizontal" :options="menuOptions" :value="activeMenu" responsive />
+  <div class="navbar-container">
+    <n-menu mode="horizontal" :options="menuOptions" :value="activeMenu" class="modern-menu" />
+  </div>
 </template>
+
+<style scoped>
+.navbar-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  max-width: 600px;
+}
+
+.nav-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  color: inherit;
+  padding: 8px 16px;
+  border-radius: var(--border-radius-md);
+  transition: all 0.3s ease;
+  font-weight: 500;
+}
+
+.nav-menu-item:hover {
+  background: rgba(102, 126, 234, 0.1);
+  transform: translateY(-1px);
+}
+
+.nav-item-icon {
+  font-size: 1.1rem;
+  display: flex;
+  align-items: center;
+}
+
+.nav-item-text {
+  font-size: 0.95rem;
+  letter-spacing: 0.2px;
+}
+
+:deep(.n-menu) {
+  background: transparent;
+  border-bottom: none;
+}
+
+:deep(.n-menu-item) {
+  border-radius: var(--border-radius-md);
+  margin: 0 4px;
+  transition: all 0.3s ease;
+}
+
+:deep(.n-menu-item:hover) {
+  background: rgba(102, 126, 234, 0.1);
+  transform: translateY(-1px);
+}
+
+:deep(.n-menu-item--selected) {
+  background: var(--primary-gradient);
+  color: white;
+  font-weight: 600;
+  box-shadow: var(--shadow-md);
+}
+
+:deep(.n-menu-item--selected:hover) {
+  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+  transform: translateY(-1px);
+}
+
+:deep(.n-menu-item-content) {
+  border-radius: var(--border-radius-md);
+}
+
+:deep(.n-menu-item-content-header) {
+  overflow: visible;
+}
+
+@media (max-width: 768px) {
+  .navbar-container {
+    display: none;
+  }
+}
+</style>
diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue
index 3ca9e95..e1f3960 100644
--- a/web/src/views/Dashboard.vue
+++ b/web/src/views/Dashboard.vue
@@ -4,12 +4,81 @@ import LineChart from "@/components/LineChart.vue";
 </script>
 
 <template>
-  <base-info-card />
-  <line-chart class="chart" />
+  <div class="dashboard-container">
+    <div class="dashboard-header">
+      <h2 class="dashboard-title">仪表盘</h2>
+      <p class="dashboard-subtitle">系统概览与实时监控</p>
+    </div>
+
+    <div class="dashboard-content">
+      <base-info-card />
+      <line-chart class="dashboard-chart" />
+    </div>
+  </div>
 </template>
 
 <style scoped>
-.chart {
-  margin-top: 20px;
+.dashboard-container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.dashboard-header {
+  margin-bottom: 32px;
+  text-align: center;
+}
+
+.dashboard-title {
+  font-size: 2.25rem;
+  font-weight: 700;
+  background: var(--primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0 0 8px 0;
+  letter-spacing: -0.5px;
+}
+
+.dashboard-subtitle {
+  font-size: 1.1rem;
+  color: #64748b;
+  margin: 0;
+  font-weight: 500;
+}
+
+.dashboard-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.dashboard-chart {
+  animation: fadeInUp 0.6s ease-out 0.2s both;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 768px) {
+  .dashboard-title {
+    font-size: 1.75rem;
+  }
+
+  .dashboard-subtitle {
+    font-size: 1rem;
+  }
+
+  .dashboard-content {
+    gap: 16px;
+  }
 }
 </style>
diff --git a/web/src/views/Keys.vue b/web/src/views/Keys.vue
index a4de1cc..6483bbb 100644
--- a/web/src/views/Keys.vue
+++ b/web/src/views/Keys.vue
@@ -1,3 +1,118 @@
+<script setup lang="ts">
+// 这里可以添加密钥管理相关的逻辑
+</script>
+
 <template>
-  <div>keys</div>
+  <div class="keys-container">
+    <div class="page-header">
+      <h2 class="page-title">密钥管理</h2>
+      <p class="page-subtitle">管理API密钥和访问凭证</p>
+    </div>
+
+    <div class="content-placeholder">
+      <div class="placeholder-card modern-card">
+        <div class="placeholder-icon">🔑</div>
+        <h3 class="placeholder-title">密钥管理功能</h3>
+        <p class="placeholder-description">
+          此功能正在开发中，将提供完整的API密钥管理功能，包括添加、删除、编辑和监控密钥使用情况。
+        </p>
+        <div class="placeholder-features">
+          <div class="feature-item">✨ 密钥添加与删除</div>
+          <div class="feature-item">📊 使用情况统计</div>
+          <div class="feature-item">🔒 安全性验证</div>
+          <div class="feature-item">🔄 自动轮换</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.keys-container {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.page-header {
+  margin-bottom: 32px;
+  text-align: center;
+}
+
+.page-title {
+  font-size: 2.25rem;
+  font-weight: 700;
+  background: var(--primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0 0 8px 0;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  font-size: 1.1rem;
+  color: #64748b;
+  margin: 0;
+  font-weight: 500;
+}
+
+.content-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+.placeholder-card {
+  text-align: center;
+  max-width: 500px;
+  padding: 48px 32px;
+  background: rgba(255, 255, 255, 0.98);
+}
+
+.placeholder-icon {
+  font-size: 4rem;
+  margin-bottom: 24px;
+  display: block;
+}
+
+.placeholder-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 16px 0;
+}
+
+.placeholder-description {
+  font-size: 1rem;
+  color: #64748b;
+  line-height: 1.6;
+  margin: 0 0 32px 0;
+}
+
+.placeholder-features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.feature-item {
+  padding: 12px 16px;
+  background: rgba(102, 126, 234, 0.1);
+  border-radius: var(--border-radius-md);
+  color: #667eea;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+@media (max-width: 768px) {
+  .placeholder-card {
+    margin: 0 16px;
+    padding: 32px 24px;
+  }
+
+  .placeholder-features {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 0bf1f8b..205f580 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -12,7 +12,7 @@ const { login } = useAuthService();
 
 const handleLogin = async () => {
   if (!authKey.value) {
-    message.error("Please enter Auth Key");
+    message.error("请输入授权密钥");
     return;
   }
   loading.value = true;
@@ -21,42 +21,224 @@ const handleLogin = async () => {
   if (success) {
     router.push("/");
   } else {
-    message.error("Login failed, please check your Auth Key");
+    message.error("登录失败，请检查您的授权密钥");
   }
 };
 </script>
 
 <template>
   <div class="login-container">
-    <n-card class="login-card" title="登录">
-      <n-space vertical>
-        <n-input
-          v-model:value="authKey"
-          type="password"
-          placeholder="Auth Key"
-          @keyup.enter="handleLogin"
-        />
-        <n-button class="login-btn" type="primary" block @click="handleLogin" :loading="loading">
-          Login
-        </n-button>
-      </n-space>
-    </n-card>
+    <div class="login-background">
+      <div class="login-decoration" />
+      <div class="login-decoration-2" />
+    </div>
+
+    <div class="login-content">
+      <div class="login-header">
+        <h1 class="login-title">GPT Load</h1>
+        <p class="login-subtitle">智能负载均衡管理平台</p>
+      </div>
+
+      <n-card class="login-card modern-card" :bordered="false">
+        <template #header>
+          <div class="card-header">
+            <h2 class="card-title">欢迎回来</h2>
+            <p class="card-subtitle">请输入您的授权密钥以继续</p>
+          </div>
+        </template>
+
+        <n-space vertical size="large">
+          <n-input
+            v-model:value="authKey"
+            type="password"
+            size="large"
+            placeholder="请输入授权密钥"
+            class="modern-input"
+            @keyup.enter="handleLogin"
+          >
+            <template #prefix>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                <path
+                  d="M6 10v-4a6 6 0 1 1 12 0v4h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm6-6a4 4 0 0 0-4 4v4h8v-4a4 4 0 0 0-4-4z"
+                />
+              </svg>
+            </template>
+          </n-input>
+
+          <n-button
+            class="login-btn modern-button"
+            type="primary"
+            size="large"
+            block
+            @click="handleLogin"
+            :loading="loading"
+            :disabled="loading"
+          >
+            <template v-if="!loading">
+              <span>立即登录</span>
+            </template>
+          </n-button>
+        </n-space>
+      </n-card>
+
+      <div class="login-footer">
+        <p class="footer-text">© 2024 GPT Load. All rights reserved.</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .login-container {
-  height: 100%;
+  height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.login-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.login-decoration {
+  position: absolute;
+  top: -50%;
+  right: -20%;
+  width: 800px;
+  height: 800px;
+  background: var(--primary-gradient);
+  border-radius: 50%;
+  opacity: 0.1;
+  animation: float 6s ease-in-out infinite;
+}
+
+.login-decoration-2 {
+  position: absolute;
+  bottom: -50%;
+  left: -20%;
+  width: 600px;
+  height: 600px;
+  background: var(--secondary-gradient);
+  border-radius: 50%;
+  opacity: 0.08;
+  animation: float 8s ease-in-out infinite reverse;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(5deg);
+  }
+}
+
+.login-content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 420px;
+  padding: 0 20px;
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.login-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  background: var(--primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 8px;
+  letter-spacing: -0.5px;
+}
+
+.login-subtitle {
+  font-size: 1.1rem;
+  color: #64748b;
+  margin: 0;
+  font-weight: 500;
 }
 
 .login-card {
-  max-width: 400px;
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.card-header {
+  text-align: center;
+  padding-bottom: 8px;
+}
+
+.card-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 8px 0;
+}
+
+.card-subtitle {
+  font-size: 0.95rem;
+  color: #64748b;
+  margin: 0;
 }
 
 .login-btn {
-  margin-top: 10px;
+  background: var(--primary-gradient);
+  border: none;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  height: 48px;
+  font-size: 1rem;
+}
+
+.login-btn:hover {
+  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+  transform: translateY(-1px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+
+.login-footer {
+  text-align: center;
+  margin-top: 32px;
+}
+
+.footer-text {
+  font-size: 0.875rem;
+  color: #94a3b8;
+  margin: 0;
+}
+
+:deep(.n-input) {
+  --n-border-radius: 12px;
+  --n-height: 48px;
+}
+
+:deep(.n-input__input-el) {
+  font-size: 1rem;
+}
+
+:deep(.n-input__prefix) {
+  color: #64748b;
+}
+
+:deep(.n-card-header) {
+  padding-bottom: 16px;
+}
+
+:deep(.n-card__content) {
+  padding-top: 0;
 }
 </style>
diff --git a/web/src/views/Logs.vue b/web/src/views/Logs.vue
index d27c933..a8e063c 100644
--- a/web/src/views/Logs.vue
+++ b/web/src/views/Logs.vue
@@ -1,3 +1,118 @@
+<script setup lang="ts">
+// 这里可以添加日志管理相关的逻辑
+</script>
+
 <template>
-  <div>logs</div>
+  <div class="logs-container">
+    <div class="page-header">
+      <h2 class="page-title">系统日志</h2>
+      <p class="page-subtitle">查看系统运行日志和操作记录</p>
+    </div>
+
+    <div class="content-placeholder">
+      <div class="placeholder-card modern-card">
+        <div class="placeholder-icon">📋</div>
+        <h3 class="placeholder-title">日志管理功能</h3>
+        <p class="placeholder-description">
+          此功能正在开发中，将提供完整的系统日志查看和管理功能，包括实时日志、历史记录和日志分析。
+        </p>
+        <div class="placeholder-features">
+          <div class="feature-item">📝 实时日志流</div>
+          <div class="feature-item">🔍 日志搜索过滤</div>
+          <div class="feature-item">📈 错误统计分析</div>
+          <div class="feature-item">💾 日志导出功能</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.logs-container {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.page-header {
+  margin-bottom: 32px;
+  text-align: center;
+}
+
+.page-title {
+  font-size: 2.25rem;
+  font-weight: 700;
+  background: var(--primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0 0 8px 0;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  font-size: 1.1rem;
+  color: #64748b;
+  margin: 0;
+  font-weight: 500;
+}
+
+.content-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+.placeholder-card {
+  text-align: center;
+  max-width: 500px;
+  padding: 48px 32px;
+  background: rgba(255, 255, 255, 0.98);
+}
+
+.placeholder-icon {
+  font-size: 4rem;
+  margin-bottom: 24px;
+  display: block;
+}
+
+.placeholder-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 16px 0;
+}
+
+.placeholder-description {
+  font-size: 1rem;
+  color: #64748b;
+  line-height: 1.6;
+  margin: 0 0 32px 0;
+}
+
+.placeholder-features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.feature-item {
+  padding: 12px 16px;
+  background: rgba(102, 126, 234, 0.1);
+  border-radius: var(--border-radius-md);
+  color: #667eea;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+@media (max-width: 768px) {
+  .placeholder-card {
+    margin: 0 16px;
+    padding: 32px 24px;
+  }
+
+  .placeholder-features {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/web/src/views/Settings.vue b/web/src/views/Settings.vue
index e201694..f5c9a5f 100644
--- a/web/src/views/Settings.vue
+++ b/web/src/views/Settings.vue
@@ -42,63 +42,286 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <div>
-    <n-form ref="formRef" :model="form" label-placement="left" label-width="110">
-      <n-card
-        v-for="(category, cIndex) in settingList"
-        :key="cIndex"
-        :bordered="false"
-        :title="category.category_name"
-      >
-        <n-space>
-          <n-form-item
-            v-for="item in category.settings"
-            :key="item.key"
-            :path="item.key"
-            style="margin-right: 10px"
-            :rule="{
-              required: true,
-              message: `请输入${item.name}`,
-            }"
-          >
-            <template #label>
-              <n-tooltip trigger="hover">
-                <template #trigger>
-                  <span>{{ item.name }}</span>
-                </template>
-                <span>{{ item.description }}</span>
-              </n-tooltip>
+  <div class="settings-container">
+    <div class="settings-header">
+      <h2 class="settings-title">系统设置</h2>
+      <p class="settings-subtitle">配置系统参数和选项</p>
+    </div>
+
+    <div class="settings-content">
+      <n-form ref="formRef" :model="form" label-placement="top" class="settings-form">
+        <div v-for="(category, cIndex) in settingList" :key="cIndex" class="settings-category">
+          <n-card class="category-card modern-card" :bordered="false" size="small">
+            <template #header>
+              <div class="category-header">
+                <h3 class="category-title">{{ category.category_name }}</h3>
+                <div class="category-divider" />
+              </div>
             </template>
-            <n-input-number
-              v-if="item.type === 'int'"
-              v-model:value="form[item.key]"
-              :min="item.min_value! >= 0 ? item.min_value : undefined"
-              style="width: 120px"
-              placeholder=""
-              clearable
-            />
-            <n-input
-              v-else
-              v-model:value="form[item.key]"
-              style="width: 120px"
-              placeholder=""
-              clearable
-            />
-          </n-form-item>
-        </n-space>
-      </n-card>
-    </n-form>
+
+            <div class="settings-grid">
+              <n-form-item
+                v-for="item in category.settings"
+                :key="item.key"
+                :path="item.key"
+                class="setting-item"
+                :rule="{
+                  required: true,
+                  message: `请输入${item.name}`,
+                }"
+              >
+                <template #label>
+                  <div class="setting-label">
+                    <span class="label-text">{{ item.name }}</span>
+                    <n-tooltip trigger="hover" placement="top">
+                      <template #trigger>
+                        <div class="label-help">
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                            />
+                          </svg>
+                        </div>
+                      </template>
+                      <div class="tooltip-content">{{ item.description }}</div>
+                    </n-tooltip>
+                  </div>
+                </template>
+
+                <n-input-number
+                  v-if="item.type === 'int'"
+                  v-model:value="form[item.key]"
+                  :min="item.min_value! >= 0 ? item.min_value : undefined"
+                  class="modern-input setting-input"
+                  placeholder="请输入数值"
+                  clearable
+                />
+                <n-input
+                  v-else
+                  v-model:value="form[item.key]"
+                  class="modern-input setting-input"
+                  placeholder="请输入内容"
+                  clearable
+                />
+              </n-form-item>
+            </div>
+          </n-card>
+        </div>
+      </n-form>
+
+      <div class="settings-actions">
+        <n-button
+          v-show="settingList.length > 0"
+          type="primary"
+          size="large"
+          class="save-button modern-button"
+          :loading="isSaving"
+          :disabled="isSaving"
+          @click="handleSubmit"
+        >
+          <template #icon>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"
+              />
+            </svg>
+          </template>
+          {{ isSaving ? "保存中..." : "保存设置" }}
+        </n-button>
+      </div>
+    </div>
   </div>
-  <n-flex justify="center">
-    <n-button
-      v-show="settingList.length > 0"
-      type="primary"
-      style="width: 200px"
-      :loading="isSaving"
-      :disabled="isSaving"
-      @click="handleSubmit"
-    >
-      保存设置
-    </n-button>
-  </n-flex>
 </template>
+
+<style scoped>
+.settings-container {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.settings-header {
+  margin-bottom: 32px;
+  text-align: center;
+}
+
+.settings-title {
+  font-size: 2.25rem;
+  font-weight: 700;
+  background: var(--primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0 0 8px 0;
+  letter-spacing: -0.5px;
+}
+
+.settings-subtitle {
+  font-size: 1.1rem;
+  color: #64748b;
+  margin: 0;
+  font-weight: 500;
+}
+
+.settings-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.settings-category {
+  animation: fadeInUp 0.6s ease-out both;
+  margin-bottom: 24px;
+}
+
+.settings-category:nth-child(2) {
+  animation-delay: 0.1s;
+}
+
+.settings-category:nth-child(3) {
+  animation-delay: 0.2s;
+}
+
+.settings-category:nth-child(4) {
+  animation-delay: 0.3s;
+}
+
+.category-card {
+  background: rgba(255, 255, 255, 0.98);
+}
+
+.category-header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.category-title {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0;
+}
+
+.category-divider {
+  height: 3px;
+  background: var(--primary-gradient);
+  border-radius: 2px;
+  width: 60px;
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 12px 10px;
+}
+
+.setting-item {
+  margin-bottom: 0;
+}
+
+.setting-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.label-text {
+  font-weight: 600;
+  color: #374151;
+  font-size: 0.95rem;
+}
+
+.label-help {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  cursor: help;
+  transition: all 0.2s ease;
+}
+
+.label-help:hover {
+  background: rgba(102, 126, 234, 0.2);
+  transform: scale(1.1);
+}
+
+.tooltip-content {
+  max-width: 250px;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.setting-input {
+  width: 100%;
+}
+
+.settings-actions {
+  display: flex;
+  justify-content: center;
+  padding-top: 24px;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.save-button {
+  min-width: 200px;
+  background: var(--primary-gradient);
+  border: none;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  height: 48px;
+  font-size: 1rem;
+}
+
+.save-button:hover {
+  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+  transform: translateY(-1px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 768px) {
+  .settings-title {
+    font-size: 1.75rem;
+  }
+
+  .settings-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+
+  .save-button {
+    width: 100%;
+  }
+}
+
+:deep(.n-form-item-label) {
+  padding: 0;
+}
+
+:deep(.n-input) {
+  --n-border-radius: 12px;
+}
+
+:deep(.n-input-number) {
+  --n-border-radius: 12px;
+}
+
+:deep(.n-card-header) {
+  padding-bottom: 5px;
+}
+</style>