From 209f03a238f3f64f3fe1ed412f009404d6dd2bdd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=80=E6=A2=A6?= <3501646051@qq.com>
Date: Tue, 27 Jan 2026 21:58:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=89=8D=E7=AB=AF=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=9E=B6=E6=9E=84=20-=20=E6=8F=90=E5=8F=96CSS?=
 =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=92=8C=E5=B7=A5=E5=85=B7=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

主要改进：
- 新增 variables.css 统一管理所有主题相关的CSS变量
- 新增 utilities.css 提供可复用的工具类组件
- 重构所有Vue组件，移除重复的CSS代码
- 统一使用CSS变量实现一致的粉色主题(#FF6B9D)
- 改进代码组织结构，提升可维护性
- 优化样式继承和复用机制

修改文件：
- 新增：frontend/src/styles/variables.css, utilities.css
- 重构：App.vue, 所有视图组件和组件文件
- 更新：style.css, element-plus.css

技术亮点：
- 模块化CSS架构，使用@import导入
- 统一的颜色、间距、阴影、过渡效果变量
- 卡片、按钮、布局等通用工具类
- 响应式设计支持
---
 frontend/src/App.vue                      | 238 +--------
 frontend/src/components/PageHeader.vue    |   6 +-
 frontend/src/components/ProtocolChart.vue |  18 +-
 frontend/src/components/QuickActions.vue  |  37 +-
 frontend/src/components/StatCard.vue      |  20 +-
 frontend/src/style.css                    | 591 +++-------------------
 frontend/src/styles/element-plus.css      | 235 ++++-----
 frontend/src/styles/utilities.css         | 190 +++++++
 frontend/src/styles/variables.css         |  43 ++
 frontend/src/views/CrawlerTasks.vue       |  74 +--
 frontend/src/views/Dashboard.vue          |  30 +-
 frontend/src/views/Plugins.vue            |  29 +-
 frontend/src/views/ProxyList.vue          |  65 +--
 frontend/src/views/Settings.vue           | 298 +++++------
 14 files changed, 610 insertions(+), 1264 deletions(-)
 create mode 100644 frontend/src/styles/utilities.css
 create mode 100644 frontend/src/styles/variables.css

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 0f4f41e..0f19901 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -60,43 +60,6 @@ const activeMenu = computed(() => route.path)
   </div>
 </template>
 
-
-
-<style>
-/* 全局样式修正 */
-:root {
-  --menu-bg: #FFFFFF;
-  --menu-text: #666666;
-  --menu-active-text: #FF6B9D;
-  --menu-hover-bg: #FFF0F5;
-  --menu-border: #FFB6C1;
-  --theme-bg: #FAFAFA;
-  --theme-bg-card: #FFFFFF;
-  --theme-border: #FFE4EC;
-  --theme-primary: #FF6B9D;
-  --theme-text: #333333;
-  --theme-text-secondary: #999999;
-  --theme-bg-light: #FFF9FB;
-}
-</style>
-
-<style>
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-}
-
-#app {
-  width: 100%;
-  height: 100vh;
-}
-</style>
-
 <style scoped>
 .app-container {
   display: flex;
@@ -107,7 +70,7 @@ body {
 .side-menu {
   width: 240px;
   height: 100%;
-  border-right: 1px solid rgba(255, 107, 157, 0.15);
+  border-right: 1px solid var(--border);
   box-shadow: 4px 0 20px rgba(255, 107, 157, 0.1);
   background: rgba(255, 255, 255, 0.98);
   backdrop-filter: blur(10px);
@@ -119,7 +82,7 @@ body {
   flex-direction: column;
   align-items: center;
   padding: 35px 0;
-  border-bottom: 1px solid rgba(255, 107, 157, 0.15);
+  border-bottom: 1px solid var(--border);
   position: relative;
 }
 
@@ -131,38 +94,20 @@ body {
   transform: translateX(-50%);
   width: 80%;
   height: 2px;
-  background: linear-gradient(90deg, transparent, #FF6B9D, transparent);
+  background: linear-gradient(90deg, transparent, var(--primary), transparent);
   animation: shimmer 3s infinite;
 }
 
-@keyframes shimmer {
-  0%, 100% {
-    opacity: 0.3;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
 .logo {
   font-size: 52px;
   margin-bottom: 10px;
   animation: float 3s ease-in-out infinite;
 }
 
-@keyframes float {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-5px);
-  }
-}
-
 .logo-text {
   font-size: 22px;
   font-weight: 700;
-  color: #FF6B9D;
+  color: var(--primary);
   text-shadow: 0 0 20px rgba(255, 107, 157, 0.3);
   letter-spacing: 2px;
 }
@@ -181,8 +126,8 @@ body {
 :deep(.el-menu-item) {
   border-radius: 12px;
   margin: 8px 12px;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--theme-text-secondary);
+  transition: var(--transition-hover);
+  color: var(--text-secondary);
   font-weight: 600;
   position: relative;
   overflow: hidden;
@@ -195,14 +140,14 @@ body {
   top: 0;
   height: 100%;
   width: 3px;
-  background: var(--theme-primary);
+  background: var(--primary);
   transform: scaleY(0);
   transition: transform 0.3s ease;
 }
 
 :deep(.el-menu-item:hover) {
   background: rgba(0, 212, 255, 0.1) !important;
-  color: var(--theme-primary);
+  color: var(--primary);
   transform: translateX(8px);
   box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
 }
@@ -212,8 +157,8 @@ body {
 }
 
 :deep(.el-menu-item.is-active) {
-  background: linear-gradient(135deg, #00D4FF 0%, #00B8E0 100%) !important;
-  color: var(--theme-bg) !important;
+  background: var(--gradient-cyan) !important;
+  color: var(--bg-page) !important;
   font-weight: 700;
   box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
 }
@@ -225,167 +170,6 @@ body {
 .main-content {
   flex: 1;
   overflow-y: auto;
-  background: var(--theme-bg);
-}
-
-/* 全局覆盖Element Plus黑色边框 */
-:deep(.el-input__wrapper) {
-  box-shadow: 0 0 0 1px var(--theme-border) inset !important;
-}
-
-:deep(.el-input__wrapper:hover) {
-  box-shadow: 0 0 0 1px var(--theme-primary) inset !important;
-}
-
-:deep(.el-input__wrapper.is-focus) {
-  box-shadow: 0 0 0 1px var(--theme-primary) inset !important;
-}
-
-:deep(.el-select__wrapper) {
-  box-shadow: 0 0 0 1px var(--theme-border) inset !important;
-}
-
-:deep(.el-select__wrapper:hover) {
-  box-shadow: 0 0 0 1px var(--theme-primary) inset !important;
-}
-
-:deep(.el-select__wrapper.is-focused) {
-  box-shadow: 0 0 0 1px var(--theme-primary) inset !important;
-}
-
-:deep(.el-input-number__decrease),
-:deep(.el-input-number__increase) {
-  background: var(--theme-bg-light);
-  color: var(--theme-text-secondary);
-  border: 1px solid var(--theme-border) !important;
-}
-
-:deep(.el-input-number__decrease:hover),
-:deep(.el-input-number__increase:hover) {
-  background: rgba(255, 107, 157, 0.1);
-  color: var(--theme-primary);
-  border-color: var(--theme-primary) !important;
-}
-
-:deep(.el-input-number__decrease.is-disabled),
-:deep(.el-input-number__increase.is-disabled) {
-  color: #ccc !important;
-  border-color: var(--theme-border) !important;
-}
-
-:deep(.el-button) {
-  border: 1px solid var(--theme-border) !important;
-}
-
-:deep(.el-button--primary) {
-  background: linear-gradient(135deg, #FF6B9D 0%, #FF8FB3 100%) !important;
-  border-color: #FF6B9D !important;
-  color: white !important;
-}
-
-:deep(.el-button--success) {
-  background: linear-gradient(135deg, #00D4FF 0%, #00E5FF 100%) !important;
-  border-color: #00D4FF !important;
-  color: white !important;
-}
-
-:deep(.el-button--warning) {
-  background: linear-gradient(135deg, #FFB800 0%, #FFD000 100%) !important;
-  border-color: #FFB800 !important;
-  color: white !important;
-}
-
-:deep(.el-button--danger) {
-  background: linear-gradient(135deg, #FF6B6B 0%, #FF8B8B 100%) !important;
-  border-color: #FF6B6B !important;
-  color: white !important;
-}
-
-:deep(.el-card) {
-  border: 1px solid var(--theme-border) !important;
-  box-shadow: 0 2px 12px rgba(255, 107, 157, 0.08) !important;
-}
-
-:deep(.el-table) {
-  border: 1px solid var(--theme-border) !important;
-}
-
-:deep(.el-table th.el-table__cell) {
-  background: var(--theme-bg-light) !important;
-  color: var(--theme-text) !important;
-  border-bottom: 1px solid var(--theme-border) !important;
-}
-
-:deep(.el-table td.el-table__cell) {
-  border-bottom: 1px solid var(--theme-border) !important;
-}
-
-:deep(.el-table__border-left) {
-  border-left: 1px solid var(--theme-border) !important;
-}
-
-:deep(.el-table__border-right) {
-  border-right: 1px solid var(--theme-border) !important;
-}
-
-:deep(.el-checkbox__inner) {
-  border: 1px solid var(--theme-border) !important;
-  background: white !important;
-}
-
-:deep(.el-checkbox__inner:hover) {
-  border-color: var(--theme-primary) !important;
-}
-
-:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
-  background: var(--theme-primary) !important;
-  border-color: var(--theme-primary) !important;
-}
-
-:deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
-  background: #f5f5f5 !important;
-  border-color: #e4e7ed !important;
-}
-
-:deep(.el-pagination button) {
-  border: 1px solid var(--theme-border) !important;
-  background: var(--theme-bg-light) !important;
-  color: var(--theme-text-secondary) !important;
-}
-
-:deep(.el-pagination button:hover) {
-  background: rgba(255, 107, 157, 0.1) !important;
-  color: var(--theme-primary) !important;
-}
-
-:deep(.el-pagination li.is-active) {
-  background: var(--theme-primary) !important;
-  color: white !important;
-}
-
-:deep(.el-pager li) {
-  background: var(--theme-bg-light) !important;
-  color: var(--theme-text-secondary) !important;
-  border: 1px solid var(--theme-border) !important;
-}
-
-/* 下拉面板样式 */
-:deep(.el-select-dropdown) {
-  border: 1px solid var(--theme-border) !important;
-  box-shadow: 0 2px 12px rgba(255, 107, 157, 0.1) !important;
-}
-
-:deep(.el-select-dropdown__item) {
-  color: var(--theme-text) !important;
-}
-
-:deep(.el-select-dropdown__item:hover) {
-  background: rgba(255, 107, 157, 0.1) !important;
-  color: var(--theme-primary) !important;
-}
-
-:deep(.el-select-dropdown__item.is-selected) {
-  color: var(--theme-primary) !important;
-  font-weight: 600;
+  background: var(--bg-page);
 }
 </style>
diff --git a/frontend/src/components/PageHeader.vue b/frontend/src/components/PageHeader.vue
index 9bbcaf5..810a796 100644
--- a/frontend/src/components/PageHeader.vue
+++ b/frontend/src/components/PageHeader.vue
@@ -20,15 +20,13 @@ defineProps({
 <style scoped>
 .header-card {
   margin-bottom: 20px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid rgba(255, 107, 157, 0.15);
+  border-radius: var(--radius-xl);
 }
 
 .title {
   text-align: center;
   margin: 0;
-  color: var(--theme-primary);
+  color: var(--primary);
   font-size: 28px;
   font-weight: 700;
   letter-spacing: 2px;
diff --git a/frontend/src/components/ProtocolChart.vue b/frontend/src/components/ProtocolChart.vue
index bbadea8..3fef321 100644
--- a/frontend/src/components/ProtocolChart.vue
+++ b/frontend/src/components/ProtocolChart.vue
@@ -129,24 +129,8 @@ onUnmounted(() => {
 
 <style scoped>
 .chart-card {
-  border-radius: 20px;
+  border-radius: var(--radius-xl);
   min-height: 400px;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid rgba(255, 107, 157, 0.15);
-  backdrop-filter: blur(10px);
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.card-title {
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--theme-primary);
-  letter-spacing: 1px;
 }
 
 .chart-container {
diff --git a/frontend/src/components/QuickActions.vue b/frontend/src/components/QuickActions.vue
index 6a35e6b..1390119 100644
--- a/frontend/src/components/QuickActions.vue
+++ b/frontend/src/components/QuickActions.vue
@@ -11,7 +11,7 @@
         size="large" 
         class="action-btn"
         :loading="loading"
-        @click="$emit('start-crawler')"
+        @click="$emit('startCrawler')"
       >
         <span class="btn-icon">🚀</span>
         立即更新
@@ -51,23 +51,8 @@ defineEmits(['start-crawler', 'export', 'clean'])
 
 <style scoped>
 .chart-card {
-  border-radius: 20px;
+  border-radius: var(--radius-xl);
   min-height: 400px;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid rgba(255, 107, 157, 0.15);
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.card-title {
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--theme-primary);
-  letter-spacing: 1px;
 }
 
 .quick-actions {
@@ -82,33 +67,17 @@ defineEmits(['start-crawler', 'export', 'clean'])
   height: 60px;
   font-size: 16px;
   border-radius: 14px;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   font-weight: 700;
   letter-spacing: 0.5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.15);
+  box-shadow: var(--shadow-md);
 }
 
 .action-btn:hover {
   box-shadow: 0 8px 20px rgba(255, 107, 157, 0.25);
-}
-
-:deep(.action-btn .el-button__content) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.action-btn:hover {
   transform: translateY(-5px) scale(1.02);
 }
 
 .btn-icon {
   font-size: 20px;
-  margin-right: 8px;
-  vertical-align: middle;
 }
 </style>
diff --git a/frontend/src/components/StatCard.vue b/frontend/src/components/StatCard.vue
index ddb339d..8a8758f 100644
--- a/frontend/src/components/StatCard.vue
+++ b/frontend/src/components/StatCard.vue
@@ -33,11 +33,11 @@ defineProps({
 
 <style scoped>
 .stat-card {
-  border-radius: 20px;
-  min-height: 180px;
+  border-radius: var(--radius-xl);
+  min-height: 120px;
   background: rgba(255, 255, 255, 0.95);
   border: 1px solid rgba(255, 107, 157, 0.15);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: var(--transition-hover);
   position: relative;
   overflow: hidden;
 }
@@ -45,7 +45,7 @@ defineProps({
 .stat-card:hover {
   transform: translateY(-8px) scale(1.02);
   box-shadow: 0 8px 24px rgba(255, 107, 157, 0.15);
-  border-color: var(--theme-primary);
+  border-color: var(--cyan);
 }
 
 .stat-card.total {
@@ -71,26 +71,26 @@ defineProps({
 }
 
 .stat-icon {
-  font-size: 48px;
+  font-size: 32px;
   margin-right: 20px;
   filter: drop-shadow(0 0 15px rgba(255, 107, 157, 0.3));
 }
 
 .stat-info {
   flex: 1;
-  text-align: center;
+  text-align: left;
 }
 
 .stat-value {
-  font-size: 36px;
+  font-size: 28px;
   font-weight: 700;
-  color: var(--theme-text);
+  color: var(--text-primary);
   margin-bottom: 5px;
 }
 
 .stat-label {
-  font-size: 14px;
-  color: var(--theme-text-secondary);
+  font-size: 12px;
+  color: var(--text-secondary);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 63c8e3f..983d1bb 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,39 +1,6 @@
-:root {
-  --theme-primary: #00D4FF;
-  --theme-primary-light: #00B8E0;
-  --theme-primary-dark: #0090B0;
-  --theme-bg: linear-gradient(135deg, #0A0E27 0%, #1A1F3A 50%, #162032 100%);
-  --theme-bg-solid: #0A0E27;
-  --theme-bg-light: #1A1F3A;
-  --theme-bg-card: rgba(26, 31, 58, 0.95);
-  --theme-text: #E0E6FF;
-  --theme-text-secondary: #9CA3AF;
-  --theme-border: #2D3748;
-  --theme-border-light: #3A4558;
-  --theme-gradient-1: linear-gradient(135deg, #00D4FF 0%, #00B8E0 100%);
-  --theme-gradient-2: linear-gradient(135deg, #FF6B9D 0%, #FF8E53 100%);
-  --theme-gradient-3: linear-gradient(135deg, #00FF88 0%, #00CC6A 100%);
-  
-  --el-color-primary: #00D4FF;
-  --el-color-primary-light-3: #00B8E0;
-  --el-color-primary-light-5: #4A90E2;
-  --el-color-primary-light-7: #00B8FF;
-  --el-color-primary-light-8: #00D4FF;
-  --el-color-primary-light-9: #00E5FF;
-  --el-color-primary-dark-2: #0090B0;
-  --el-color-success: #00FF88;
-  --el-color-warning: #FFB800;
-  --el-color-danger: #FF3366;
-  --el-color-info: #A855F7;
-  --el-bg-color: #0A0E27;
-  --el-bg-color-page: #0A0E27;
-  --el-text-color-primary: #E0E6FF;
-  --el-text-color-regular: #9CA3AF;
-  --el-border-color: #2D3748;
-  --el-border-color-light: #2D3748;
-  --el-fill-color-blank: #1A1F3A;
-  --el-fill-color-light: #1A1F3A;
-}
+@import './styles/variables.css';
+@import './styles/utilities.css';
+@import './styles/element-plus.css';
 
 * {
   margin: 0;
@@ -44,14 +11,41 @@
 body {
   font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   line-height: 1.6;
-  color: var(--theme-text);
-  background: var(--theme-bg);
-  background-attachment: fixed;
-  background-size: 400% 400%;
-  animation: gradientShift 15s ease infinite;
+  color: var(--text-primary);
+  background: var(--bg-page);
   overflow-x: hidden;
 }
 
+a {
+  text-decoration: none;
+  color: var(--cyan);
+  transition: var(--transition-base);
+}
+
+a:hover {
+  color: var(--cyan-light);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--bg-page);
+  border-radius: var(--radius-sm);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--border-light);
+  border-radius: var(--radius-sm);
+  transition: var(--transition-base);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--primary-light);
+}
+
 @keyframes gradientShift {
   0%, 100% {
     background-position: 0% 50%;
@@ -61,331 +55,33 @@ body {
   }
 }
 
-a {
-  text-decoration: none;
-  color: var(--theme-primary);
-  transition: color 0.3s ease;
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-a:hover {
-  color: var(--theme-primary-light);
+@keyframes shimmer {
+  0%, 100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 
-.el-card {
-  border-radius: 16px;
-  border: 1px solid rgba(0, 212, 255, 0.15);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: var(--theme-bg-card);
-  backdrop-filter: blur(10px);
-}
-
-.el-card:hover {
-  box-shadow: 0 8px 32px rgba(0, 212, 255, 0.2);
-  transform: translateY(-4px);
-  border-color: rgba(0, 212, 255, 0.4);
-}
-
-.el-button--primary {
-  background: var(--theme-gradient-1);
-  border: none;
-  border-radius: 8px;
-  padding: 10px 24px;
-  font-weight: 600;
-  transition: all 0.3s ease;
-  color: #0A0E27;
-  position: relative;
-  overflow: hidden;
-}
-
-.el-button--primary::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-  transition: left 0.5s ease;
-}
-
-.el-button--primary:hover::before {
-  left: 100%;
-}
-
-.el-button--primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
-}
-
-.el-button--success {
-  background: var(--theme-gradient-3);
-  border: none;
-  border-radius: 8px;
-  padding: 10px 24px;
-  font-weight: 600;
-  transition: all 0.3s ease;
-  color: #0A0E27;
-  position: relative;
-  overflow: hidden;
-}
-
-.el-button--success::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-  transition: left 0.5s ease;
-}
-
-.el-button--success:hover::before {
-  left: 100%;
-}
-
-.el-button--success:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(0, 255, 136, 0.4);
-}
-
-.el-button--danger {
-  background: var(--theme-gradient-2);
-  border: none;
-  border-radius: 8px;
-  padding: 10px 24px;
-  font-weight: 600;
-  transition: all 0.3s ease;
-  color: white;
-  position: relative;
-  overflow: hidden;
-}
-
-.el-button--danger::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-  transition: left 0.5s ease;
-}
-
-.el-button--danger:hover::before {
-  left: 100%;
-}
-
-.el-button--danger:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(255, 107, 157, 0.4);
-}
-
-.el-button--warning {
-  background-color: #FFB800;
-  border-color: #FFB800;
-  border-radius: 8px;
-  padding: 10px 24px;
-  font-weight: 600;
-  transition: all 0.3s ease;
-  color: #0A0E27;
-}
-
-.el-button--warning:hover {
-  background-color: #E5A600;
-  border-color: #E5A600;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
-}
-
-.el-button--default {
-  border: 1px solid var(--theme-border);
-  border-radius: 8px;
-  padding: 10px 24px;
-  font-weight: 600;
-  background-color: var(--theme-bg-light);
-  color: var(--theme-text);
-  transition: all 0.3s ease;
-}
-
-.el-button--default:hover {
-  border-color: var(--theme-primary);
-  color: var(--theme-primary);
-  transform: translateY(-2px);
-  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2);
-}
-
-.el-input__wrapper {
-  border-radius: 8px;
-  box-shadow: 0 0 0 1px var(--theme-border) inset;
-  transition: all 0.3s ease;
-  background-color: var(--theme-bg-light);
-}
-
-.el-input__wrapper:hover {
-  box-shadow: 0 0 0 1px var(--theme-primary-light) inset;
-}
-
-.el-input__wrapper.is-focus {
-  box-shadow: 0 0 0 2px var(--theme-primary) inset;
-}
-
-.el-select .el-input__wrapper {
-  border-radius: 8px;
-}
-
-.el-table {
-  border-radius: 12px;
-  overflow: hidden;
-  border: 1px solid var(--theme-border);
-  background-color: var(--theme-bg-card);
-}
-
-.el-table th {
-  background-color: var(--theme-bg-light);
-  color: var(--theme-primary);
-  font-weight: 600;
-  border-bottom: 2px solid var(--theme-primary);
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-.el-table td {
-  border-bottom: 1px solid var(--theme-border);
-  background-color: var(--theme-bg-card);
-}
-
-.el-table tr:hover > td {
-  background-color: var(--theme-bg-light);
-}
-
-.el-tag {
-  border-radius: 6px;
-  border: 1px solid var(--theme-border);
-  padding: 4px 12px;
-  font-weight: 600;
-  font-size: 13px;
-}
-
-.el-tag--primary {
-  background-color: rgba(0, 212, 255, 0.15);
-  color: var(--theme-primary);
-  border-color: var(--theme-primary);
-}
-
-.el-tag--success {
-  background-color: rgba(0, 255, 136, 0.15);
-  color: #00FF88;
-  border-color: #00FF88;
-}
-
-.el-tag--warning {
-  background-color: rgba(255, 184, 0, 0.15);
-  color: #FFB800;
-  border-color: #FFB800;
-}
-
-.el-tag--danger {
-  background-color: rgba(255, 51, 102, 0.15);
-  color: #FF3366;
-  border-color: #FF3366;
-}
-
-.el-tag--info {
-  background-color: rgba(168, 85, 247, 0.15);
-  color: #A855F7;
-  border-color: #A855F7;
-}
-
-.el-rate__icon {
-  color: var(--theme-primary);
-}
-
-.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
-  background-color: var(--theme-primary);
-  color: #0A0E27;
-  font-weight: 600;
-}
-
-.el-pagination.is-background .btn-next,
-.el-pagination.is-background .btn-prev {
-  background-color: var(--theme-bg-light);
-  color: var(--theme-primary);
-  border-radius: 6px;
-  border: 1px solid var(--theme-border);
-  transition: all 0.3s ease;
-}
-
-.el-pagination.is-background .btn-next:hover,
-.el-pagination.is-background .btn-prev:hover {
-  background-color: var(--theme-primary);
-  color: #0A0E27;
-  border-color: var(--theme-primary);
-}
-
-.el-pagination.is-background .el-pager li {
-  background-color: var(--theme-bg-light);
-  color: var(--theme-primary);
-  border-radius: 6px;
-  margin: 0 4px;
-  border: 1px solid var(--theme-border);
-  transition: all 0.3s ease;
-}
-
-.el-pagination.is-background .el-pager li:hover {
-  background-color: var(--theme-primary-light);
-  color: #0A0E27;
-}
-
-.el-message {
-  border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  background-color: var(--theme-bg-card);
-  border: 1px solid var(--theme-border);
-}
-
-.el-message--success .el-message__content {
-  color: #00FF88;
-  font-weight: 600;
-}
-
-.el-message--error .el-message__content {
-  color: #FF3366;
-  font-weight: 600;
-}
-
-.el-message--warning .el-message__content {
-  color: #FFB800;
-  font-weight: 600;
-}
-
-.el-message--info .el-message__content {
-  color: #A855F7;
-  font-weight: 600;
-}
-
-.el-progress-bar__inner {
-  background: var(--theme-gradient-1);
-  border-radius: 8px;
-  position: relative;
-  overflow: hidden;
-}
-
-.el-progress-bar__inner::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(255, 255, 255, 0.2) 50%,
-    transparent 100%
-  );
-  animation: progressShine 2s infinite;
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
 }
 
 @keyframes progressShine {
@@ -396,174 +92,3 @@ a:hover {
     transform: translateX(100%);
   }
 }
-
-.el-switch.is-checked .el-switch__core {
-  background-color: var(--theme-primary);
-}
-
-.el-switch.is-checked .el-switch__action {
-  background-color: white;
-}
-
-.el-alert {
-  border-radius: 12px;
-  border: 1px solid var(--theme-border);
-  background-color: var(--theme-bg-card);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-.el-alert--success {
-  background-color: rgba(0, 255, 136, 0.1);
-  border-color: #00FF88;
-}
-
-.el-alert--info {
-  background-color: rgba(168, 85, 247, 0.1);
-  border-color: #A855F7;
-}
-
-.el-alert--warning {
-  background-color: rgba(255, 184, 0, 0.1);
-  border-color: #FFB800;
-}
-
-.el-alert--error {
-  background-color: rgba(255, 51, 102, 0.1);
-  border-color: #FF3366;
-}
-
-.el-dialog {
-  border-radius: 16px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  background-color: var(--theme-bg-card);
-  border: 1px solid var(--theme-border);
-}
-
-.el-dialog__header {
-  background-color: var(--theme-bg-light);
-  border-radius: 16px 16px 0 0;
-  padding: 20px;
-  border-bottom: 1px solid var(--theme-border);
-}
-
-.el-dialog__title {
-  color: var(--theme-primary);
-  font-weight: 600;
-  font-size: 18px;
-}
-
-.el-dialog__body {
-  color: var(--theme-text);
-}
-
-.el-dropdown-menu {
-  border-radius: 12px;
-  border: 1px solid var(--theme-border);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-  background-color: var(--theme-bg-card);
-}
-
-.el-dropdown-menu__item:hover {
-  background-color: var(--theme-bg-light);
-  color: var(--theme-primary);
-  border-radius: 6px;
-  margin: 2px 6px;
-}
-
-.el-notification {
-  border-radius: 16px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  background-color: var(--theme-bg-card);
-  border: 1px solid var(--theme-border);
-}
-
-.el-notification__title {
-  color: var(--theme-primary);
-  font-weight: 600;
-}
-
-.el-card__header {
-  border-bottom: 1px solid var(--theme-border);
-  padding: 16px 20px;
-  background-color: var(--theme-bg-light);
-}
-
-.el-card__body {
-  padding: 20px;
-  color: var(--theme-text);
-}
-
-.el-form-item__label {
-  color: var(--theme-text);
-  font-weight: 600;
-}
-
-.el-input-number {
-  border-radius: 8px;
-}
-
-.el-input-number .el-input__wrapper {
-  border-radius: 8px;
-  background-color: var(--theme-bg-light);
-}
-
-.el-radio-button__inner {
-  border-radius: 8px !important;
-  border: 1px solid var(--theme-border);
-  background-color: var(--theme-bg-light);
-  color: var(--theme-text);
-  transition: all 0.3s ease;
-  font-weight: 600;
-}
-
-.el-radio-button__original-radio:checked + .el-radio-button__inner {
-  background-color: var(--theme-primary);
-  border-color: var(--theme-primary);
-  color: #0A0E27;
-  font-weight: 700;
-}
-
-.el-menu {
-  border-right: 1px solid var(--theme-border);
-  background-color: var(--theme-bg);
-}
-
-.el-menu-item {
-  border-radius: 8px;
-  margin: 4px 8px;
-  transition: all 0.3s ease;
-  font-weight: 600;
-  color: var(--theme-text-secondary);
-}
-
-.el-menu-item:hover {
-  background-color: var(--theme-bg-light);
-  color: var(--theme-primary);
-  transform: translateX(4px);
-}
-
-.el-menu-item.is-active {
-  background-color: var(--theme-primary);
-  color: #0A0E27;
-  font-weight: 700;
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: var(--theme-bg);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--theme-border-light);
-  border-radius: 4px;
-  transition: all 0.3s ease;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--theme-primary-light);
-}
diff --git a/frontend/src/styles/element-plus.css b/frontend/src/styles/element-plus.css
index e1bdf82..415b6e0 100644
--- a/frontend/src/styles/element-plus.css
+++ b/frontend/src/styles/element-plus.css
@@ -1,177 +1,160 @@
-/* Element Plus 全局样式覆盖 - 强制去除所有黑色边框 */
-
-/* 输入框 */
 .el-input__wrapper {
-  box-shadow: 0 0 0 1px #FFE4EC inset !important;
-}
-
-.el-input__wrapper:hover {
-  box-shadow: 0 0 0 1px #FF6B9D inset !important;
+  box-shadow: 0 0 0 1px var(--border) inset !important;
 }
 
+.el-input__wrapper:hover,
 .el-input__wrapper.is-focus {
-  box-shadow: 0 0 0 1px #FF6B9D inset !important;
+  box-shadow: 0 0 0 1px var(--primary) inset !important;
 }
 
-/* 下拉选择框 */
 .el-select__wrapper {
-  box-shadow: 0 0 0 1px #FFE4EC inset !important;
-}
-
-.el-select__wrapper:hover {
-  box-shadow: 0 0 0 1px #FF6B9D inset !important;
+  box-shadow: 0 0 0 1px var(--border) inset !important;
 }
 
+.el-select__wrapper:hover,
 .el-select__wrapper.is-focused {
-  box-shadow: 0 0 0 1px #FF6B9D inset !important;
+  box-shadow: 0 0 0 1px var(--primary) inset !important;
 }
 
 .el-select__placeholder {
-  color: #999999 !important;
+  color: var(--text-secondary) !important;
 }
 
 .el-select__caret {
-  color: #FF6B9D !important;
+  color: var(--primary) !important;
 }
 
 .el-select-dropdown {
-  border: 1px solid #FFE4EC !important;
-  box-shadow: 0 2px 12px rgba(255, 107, 157, 0.1) !important;
+  border: 1px solid var(--border) !important;
+  box-shadow: var(--shadow-md) !important;
   background: white !important;
 }
 
 .el-select-dropdown__item {
-  color: #333333 !important;
+  color: var(--text-primary) !important;
 }
 
 .el-select-dropdown__item:hover {
   background: rgba(255, 107, 157, 0.1) !important;
-  color: #FF6B9D !important;
+  color: var(--primary) !important;
 }
 
 .el-select-dropdown__item.is-selected {
-  color: #FF6B9D !important;
+  color: var(--primary) !important;
   font-weight: 600;
 }
 
-/* 数字输入框 */
 .el-input-number__decrease,
 .el-input-number__increase {
-  background: #FFF9FB !important;
-  color: #999999 !important;
-  border: 1px solid #FFE4EC !important;
+  background: var(--bg-light) !important;
+  color: var(--text-secondary) !important;
+  border: 1px solid var(--border) !important;
 }
 
 .el-input-number__decrease:hover,
 .el-input-number__increase:hover {
   background: rgba(255, 107, 157, 0.1) !important;
-  color: #FF6B9D !important;
-  border-color: #FF6B9D !important;
+  color: var(--primary) !important;
+  border-color: var(--primary) !important;
 }
 
 .el-input-number__decrease.is-disabled,
 .el-input-number__increase.is-disabled {
-  color: #cccccc !important;
-  border-color: #FFE4EC !important;
+  color: #ccc !important;
+  border-color: var(--border) !important;
 }
 
 .el-input-number__wrapper {
-  box-shadow: 0 0 0 1px #FFE4EC inset !important;
-}
-
-.el-input-number__wrapper:hover {
-  box-shadow: 0 0 0 1px #FF6B9D inset !important;
+  box-shadow: 0 0 0 1px var(--border) inset !important;
 }
 
+.el-input-number__wrapper:hover,
 .el-input-number__wrapper.is-focus {
-  box-shadow: 0 0 0 1px #FF6B9D inset !important;
+  box-shadow: 0 0 0 1px var(--primary) inset !important;
 }
 
-/* 按钮 */
 .el-button {
-  border: 1px solid #FFE4EC !important;
+  border: 1px solid var(--border) !important;
 }
 
 .el-button--primary {
-  background: linear-gradient(135deg, #FF6B9D 0%, #FF8FB3 100%) !important;
-  border-color: #FF6B9D !important;
+  background: var(--gradient-primary) !important;
+  border-color: var(--primary) !important;
   color: white !important;
 }
 
 .el-button--primary:hover {
-  background: linear-gradient(135deg, #FF5A8F 0%, #FF7FA7 100%) !important;
   box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3) !important;
+  transform: translateY(-2px);
 }
 
 .el-button--success {
-  background: linear-gradient(135deg, #00D4FF 0%, #00E5FF 100%) !important;
-  border-color: #00D4FF !important;
+  background: var(--gradient-cyan) !important;
+  border-color: var(--cyan) !important;
   color: white !important;
 }
 
 .el-button--success:hover {
-  background: linear-gradient(135deg, #00C4F0 0%, #00D4E8 100%) !important;
   box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3) !important;
+  transform: translateY(-2px);
 }
 
 .el-button--warning {
-  background: linear-gradient(135deg, #FFB800 0%, #FFD000 100%) !important;
-  border-color: #FFB800 !important;
+  background: var(--gradient-yellow) !important;
+  border-color: var(--yellow) !important;
   color: white !important;
 }
 
 .el-button--warning:hover {
-  background: linear-gradient(135deg, #FFA700 0%, #FFC000 100%) !important;
   box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3) !important;
+  transform: translateY(-2px);
 }
 
 .el-button--danger {
-  background: linear-gradient(135deg, #FF6B6B 0%, #FF8B8B 100%) !important;
-  border-color: #FF6B6B !important;
+  background: var(--gradient-danger) !important;
+  border-color: var(--danger) !important;
   color: white !important;
 }
 
 .el-button--danger:hover {
-  background: linear-gradient(135deg, #FF5A5A 0%, #FF7A7A 100%) !important;
   box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
+  transform: translateY(-2px);
 }
 
-/* 卡片 */
 .el-card {
-  border: 1px solid #FFE4EC !important;
-  box-shadow: 0 2px 12px rgba(255, 107, 157, 0.08) !important;
+  border: 1px solid var(--border) !important;
+  box-shadow: var(--shadow-sm) !important;
 }
 
 .el-card__header {
-  border-bottom: 1px solid #FFE4EC !important;
+  border-bottom: 1px solid var(--border) !important;
 }
 
 .el-card__body {
-  background: rgba(255, 255, 255, 0.95) !important;
+  background: var(--bg-card) !important;
 }
 
-/* 表格 */
 .el-table {
-  border: 1px solid #FFE4EC !important;
+  border: 1px solid var(--border) !important;
   background: white !important;
 }
 
 .el-table th.el-table__cell {
-  background: #FFF9FB !important;
-  color: #333333 !important;
-  border-bottom: 1px solid #FFE4EC !important;
+  background: var(--bg-light) !important;
+  color: var(--text-primary) !important;
+  border-bottom: 1px solid var(--border) !important;
 }
 
 .el-table td.el-table__cell {
-  border-bottom: 1px solid #FFE4EC !important;
+  border-bottom: 1px solid var(--border) !important;
 }
 
 .el-table__border-left {
-  border-left: 1px solid #FFE4EC !important;
+  border-left: 1px solid var(--border) !important;
 }
 
 .el-table__border-right {
-  border-right: 1px solid #FFE4EC !important;
+  border-right: 1px solid var(--border) !important;
 }
 
 .el-table tr:hover > td {
@@ -179,22 +162,21 @@
 }
 
 .el-table__body tr.current-row > td.el-table__cell {
-  background: #FFE4EC !important;
+  background: var(--border) !important;
 }
 
-/* Checkbox */
 .el-checkbox__inner {
-  border: 1px solid #FFE4EC !important;
+  border: 1px solid var(--border) !important;
   background: white !important;
 }
 
 .el-checkbox__inner:hover {
-  border-color: #FF6B9D !important;
+  border-color: var(--primary) !important;
 }
 
 .el-checkbox__input.is-checked .el-checkbox__inner {
-  background: #FF6B9D !important;
-  border-color: #FF6B9D !important;
+  background: var(--primary) !important;
+  border-color: var(--primary) !important;
 }
 
 .el-checkbox__input.is-disabled .el-checkbox__inner {
@@ -202,79 +184,71 @@
   border-color: #e4e7ed !important;
 }
 
-/* 分页器 */
 .el-pagination button {
-  border: 1px solid #FFE4EC !important;
-  background: #FFF9FB !important;
-  color: #999999 !important;
+  border: 1px solid var(--border) !important;
+  background: var(--bg-light) !important;
+  color: var(--text-secondary) !important;
 }
 
 .el-pagination button:hover {
   background: rgba(255, 107, 157, 0.1) !important;
-  color: #FF6B9D !important;
+  color: var(--primary) !important;
 }
 
 .el-pagination li.is-active {
-  background: #FF6B9D !important;
+  background: var(--primary) !important;
   color: white !important;
-  border-color: #FF6B9D !important;
+  border-color: var(--primary) !important;
 }
 
 .el-pager li {
-  background: #FFF9FB !important;
-  color: #999999 !important;
-  border: 1px solid #FFE4EC !important;
+  background: var(--bg-light) !important;
+  color: var(--text-secondary) !important;
+  border: 1px solid var(--border) !important;
 }
 
 .el-pager li:hover {
-  color: #FF6B9D !important;
-}
-
-/* Tag */
-.el-tag {
-  border: 1px solid #FFE4EC !important;
+  color: var(--primary) !important;
 }
 
 .el-tag--primary {
   background: rgba(255, 107, 157, 0.1) !important;
-  color: #FF6B9D !important;
+  color: var(--primary) !important;
   border-color: rgba(255, 107, 157, 0.3) !important;
 }
 
 .el-tag--success {
   background: rgba(0, 212, 255, 0.1) !important;
-  color: #00D4FF !important;
+  color: var(--cyan) !important;
   border-color: rgba(0, 212, 255, 0.3) !important;
 }
 
 .el-tag--warning {
   background: rgba(255, 184, 0, 0.1) !important;
-  color: #FFB800 !important;
+  color: var(--yellow) !important;
   border-color: rgba(255, 184, 0, 0.3) !important;
 }
 
 .el-tag--danger {
   background: rgba(255, 107, 107, 0.1) !important;
-  color: #FF6B6B !important;
+  color: var(--danger) !important;
   border-color: rgba(255, 107, 107, 0.3) !important;
 }
 
-/* Rate 评分 */
 .el-rate__icon {
-  color: #FFE4EC !important;
+  color: var(--border) !important;
 }
 
 .el-rate__icon.hover {
-  color: #FF6B9D !important;
+  color: var(--primary) !important;
 }
 
-/* Dialog 对话框 */
 .el-dialog {
-  border: 1px solid #FFE4EC !important;
+  border: 1px solid var(--border) !important;
 }
 
 .el-dialog__header {
-  border-bottom: 1px solid #FFE4EC !important;
+  border-bottom: 1px solid var(--border) !important;
 }
 
 .el-dialog__body {
@@ -282,96 +256,111 @@
 }
 
 .el-dialog__footer {
-  border-top: 1px solid #FFE4EC !important;
+  border-top: 1px solid var(--border) !important;
 }
 
-/* Dropdown 下拉菜单 */
 .el-dropdown-menu {
-  border: 1px solid #FFE4EC !important;
-  box-shadow: 0 2px 12px rgba(255, 107, 157, 0.1) !important;
+  border: 1px solid var(--border) !important;
+  box-shadow: var(--shadow-md) !important;
 }
 
 .el-dropdown-menu__item {
-  color: #333333 !important;
+  color: var(--text-primary) !important;
 }
 
 .el-dropdown-menu__item:hover {
   background: rgba(255, 107, 157, 0.1) !important;
-  color: #FF6B9D !important;
+  color: var(--primary) !important;
 }
 
-/* Scrollbar 滚动条 */
 .el-scrollbar__wrap::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
 
 .el-scrollbar__wrap::-webkit-scrollbar-thumb {
-  background: #FFE4EC;
-  border-radius: 3px;
+  background: var(--border);
+  border-radius: var(--radius-sm);
 }
 
 .el-scrollbar__wrap::-webkit-scrollbar-thumb:hover {
-  background: #FF6B9D;
+  background: var(--primary);
 }
 
-/* Form 表单 */
 .el-form-item__label {
-  color: #666666 !important;
+  color: var(--text-muted) !important;
 }
 
 .el-form-item__error {
-  color: #FF6B6B !important;
+  color: var(--danger) !important;
 }
 
-/* Message 消息提示 */
 .el-message {
-  border: 1px solid #FFE4EC !important;
-  box-shadow: 0 4px 16px rgba(255, 107, 157, 0.15) !important;
+  border: 1px solid var(--border) !important;
+  box-shadow: var(--shadow-md) !important;
 }
 
 .el-message--success {
   background: rgba(0, 212, 255, 0.1) !important;
   border-color: rgba(0, 212, 255, 0.3) !important;
-  color: #00D4FF !important;
+  color: var(--cyan) !important;
 }
 
 .el-message--error {
   background: rgba(255, 107, 107, 0.1) !important;
   border-color: rgba(255, 107, 107, 0.3) !important;
-  color: #FF6B6B !important;
+  color: var(--danger) !important;
 }
 
 .el-message--warning {
   background: rgba(255, 184, 0, 0.1) !important;
   border-color: rgba(255, 184, 0, 0.3) !important;
-  color: #FFB800 !important;
+  color: var(--yellow) !important;
 }
 
 .el-message--info {
   background: rgba(255, 107, 157, 0.1) !important;
   border-color: rgba(255, 107, 157, 0.3) !important;
-  color: #FF6B9D !important;
+  color: var(--primary) !important;
 }
 
-/* MessageBox 弹窗 */
 .el-message-box {
-  border: 1px solid #FFE4EC !important;
-  box-shadow: 0 4px 16px rgba(255, 107, 157, 0.15) !important;
+  border: 1px solid var(--border) !important;
+  box-shadow: var(--shadow-md) !important;
 }
 
 .el-message-box__header {
-  border-bottom: 1px solid #FFE4EC !important;
+  border-bottom: 1px solid var(--border) !important;
 }
 
 .el-message-box__title {
-  color: #FF6B9D !important;
+  color: var(--primary) !important;
 }
 
 .el-message-box__content {
-  color: #333333 !important;
+  color: var(--text-primary) !important;
 }
 
 .el-message-box__btns {
-  border-top: 1px solid #FFE4EC !important;
+  border-top: 1px solid var(--border) !important;
+}
+
+.el-alert--success {
+  background-color: rgba(0, 255, 136, 0.1) !important;
+  border-color: var(--green) !important;
+}
+
+.el-alert--info {
+  background-color: rgba(255, 107, 157, 0.1) !important;
+  border-color: var(--primary) !important;
+}
+
+.el-alert--warning {
+  background-color: rgba(255, 184, 0, 0.1) !important;
+  border-color: var(--yellow) !important;
+}
+
+.el-alert--error {
+  background-color: rgba(255, 51, 102, 0.1) !important;
+  border-color: var(--danger) !important;
 }
diff --git a/frontend/src/styles/utilities.css b/frontend/src/styles/utilities.css
new file mode 100644
index 0000000..afaf5f4
--- /dev/null
+++ b/frontend/src/styles/utilities.css
@@ -0,0 +1,190 @@
+.card-base {
+  border-radius: var(--radius-xl);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-hover);
+}
+
+.card-base:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+  border-color: var(--primary);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+  padding: 16px 20px;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--primary);
+  letter-spacing: 1px;
+}
+
+.btn-base {
+  border-radius: var(--radius-md);
+  font-weight: 600;
+  transition: var(--transition-base);
+  border: 1px solid var(--border);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  outline: none;
+}
+
+.btn-primary {
+  background: var(--gradient-primary);
+  border-color: var(--primary);
+  color: white;
+}
+
+.btn-primary:hover {
+  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
+  transform: translateY(-2px);
+}
+
+.btn-success {
+  background: var(--gradient-cyan);
+  border-color: var(--cyan);
+  color: white;
+}
+
+.btn-success:hover {
+  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
+  transform: translateY(-2px);
+}
+
+.btn-warning {
+  background: var(--gradient-yellow);
+  border-color: var(--yellow);
+  color: white;
+}
+
+.btn-warning:hover {
+  box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
+  transform: translateY(-2px);
+}
+
+.btn-danger {
+  background: var(--gradient-danger);
+  border-color: var(--danger);
+  color: white;
+}
+
+.btn-danger:hover {
+  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
+  transform: translateY(-2px);
+}
+
+.btn-icon {
+  font-size: 20px;
+  margin-right: 0;
+  vertical-align: middle;
+}
+
+.page-container {
+  padding: 20px;
+  background: var(--bg-page);
+  min-height: 100vh;
+}
+
+.table-container {
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: flex-end;
+}
+
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+@media (max-width: 768px) {
+  .stat-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.text-primary {
+  color: var(--primary);
+}
+
+.text-cyan {
+  color: var(--cyan);
+}
+
+.text-success {
+  color: var(--green);
+}
+
+.text-warning {
+  color: var(--yellow);
+}
+
+.text-danger {
+  color: var(--danger);
+}
+
+.text-muted {
+  color: var(--text-secondary);
+}
+
+.bg-gradient-primary {
+  background: var(--gradient-primary);
+}
+
+.bg-gradient-cyan {
+  background: var(--gradient-cyan);
+}
+
+.border-pink {
+  border: 1px solid var(--border);
+}
+
+.rounded-xl {
+  border-radius: var(--radius-xl);
+}
+
+.rounded-lg {
+  border-radius: var(--radius-lg);
+}
+
+.shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.shadow-md {
+  box-shadow: var(--shadow-md);
+}
diff --git a/frontend/src/styles/variables.css b/frontend/src/styles/variables.css
new file mode 100644
index 0000000..bcf73e0
--- /dev/null
+++ b/frontend/src/styles/variables.css
@@ -0,0 +1,43 @@
+:root {
+  --primary: #FF6B9D;
+  --primary-light: #FF8FB3;
+  --primary-dark: #FF5A8F;
+  
+  --cyan: #00D4FF;
+  --cyan-light: #00E5FF;
+  --cyan-dark: #00B8E0;
+  
+  --green: #34D399;
+  --yellow: #FFB800;
+  --danger: #FF6B6B;
+  --purple: #A855F7;
+  
+  --bg-page: #FAFAFA;
+  --bg-card: #FFFFFF;
+  --bg-light: #FFF9FB;
+  
+  --text-primary: #333333;
+  --text-secondary: #999999;
+  --text-muted: #666666;
+  
+  --border: #FFE4EC;
+  --border-light: #FFD6E3;
+  
+  --gradient-primary: linear-gradient(135deg, #FF6B9D 0%, #FF8FB3 100%);
+  --gradient-cyan: linear-gradient(135deg, #00D4FF 0%, #00E5FF 100%);
+  --gradient-yellow: linear-gradient(135deg, #FFB800 0%, #FFD000 100%);
+  --gradient-danger: linear-gradient(135deg, #FF6B6B 0%, #FF8B8B 100%);
+  
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 20px;
+  
+  --shadow-sm: 0 2px 8px rgba(255, 107, 157, 0.08);
+  --shadow-md: 0 4px 12px rgba(255, 107, 157, 0.15);
+  --shadow-lg: 0 8px 20px rgba(255, 107, 157, 0.2);
+  
+  --transition-base: all 0.3s ease;
+  --transition-hover: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
diff --git a/frontend/src/views/CrawlerTasks.vue b/frontend/src/views/CrawlerTasks.vue
index 4f06031..bf00a7a 100644
--- a/frontend/src/views/CrawlerTasks.vue
+++ b/frontend/src/views/CrawlerTasks.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="crawler-tasks">
+  <div class="page-container">
     <PageHeader title="任务管理" icon="🎀" />
 
     <el-card class="control-card" shadow="hover">
@@ -32,7 +32,6 @@
             @click="handleStart"
             :loading="crawler.running"
             :disabled="crawler.running"
-            class="start-btn"
           >
             <span class="btn-icon">🚀</span>
             开始任务
@@ -42,7 +41,6 @@
             size="large" 
             @click="handleStop"
             :disabled="!crawler.running"
-            class="stop-btn"
           >
             <span class="btn-icon">⏹️</span>
             停止任务
@@ -159,11 +157,6 @@ const crawlProgress = computed(() => {
   return Math.round((crawler.progress.current / crawler.progress.total) * 100)
 })
 
-const verifyProgress = computed(() => {
-  if (crawler.progress.total === 0) return 0
-  return Math.round((crawler.progress.current / crawler.progress.total) * 100)
-})
-
 function formatTime(timeStr) {
   if (!timeStr) return '-'
   const date = new Date(timeStr)
@@ -212,17 +205,9 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.crawler-tasks {
-  padding: 20px;
-  background: var(--theme-bg);
-  min-height: 100vh;
-}
-
 .control-card {
   margin-bottom: 20px;
-  border-radius: 16px;
-  background: var(--theme-bg-card);
-  border: 1px solid var(--theme-border);
+  border-radius: var(--radius-xl);
 }
 
 .card-header {
@@ -234,7 +219,7 @@ onUnmounted(() => {
 .card-title {
   font-size: 18px;
   font-weight: 600;
-  color: var(--theme-primary);
+  color: var(--primary);
 }
 
 .control-content {
@@ -249,7 +234,7 @@ onUnmounted(() => {
 
 .control-label {
   font-size: 16px;
-  color: #666;
+  color: var(--text-muted);
   margin-right: 20px;
   min-width: 100px;
 }
@@ -264,23 +249,6 @@ onUnmounted(() => {
   justify-content: center;
 }
 
-.start-btn, .stop-btn {
-  padding: 15px 40px;
-  font-size: 16px;
-  border-radius: 12px;
-  transition: all 0.3s ease;
-}
-
-.start-btn:hover:not(:disabled) {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 20px rgba(255, 107, 157, 0.3);
-}
-
-.stop-btn:hover:not(:disabled) {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
-}
-
 .btn-icon {
   font-size: 20px;
   margin-right: 8px;
@@ -288,9 +256,7 @@ onUnmounted(() => {
 
 .progress-card {
   margin-bottom: 20px;
-  border-radius: 16px;
-  background: var(--theme-bg-card);
-  border: 1px solid var(--theme-border);
+  border-radius: var(--radius-xl);
 }
 
 .progress-content {
@@ -303,7 +269,7 @@ onUnmounted(() => {
 
 .progress-label {
   font-size: 16px;
-  color: #666;
+  color: var(--text-muted);
   margin-bottom: 15px;
   font-weight: 600;
 }
@@ -314,7 +280,7 @@ onUnmounted(() => {
 
 .progress-text {
   font-size: 14px;
-  color: var(--theme-primary);
+  color: var(--primary);
   font-weight: 600;
 }
 
@@ -335,12 +301,12 @@ onUnmounted(() => {
 
 .status-label {
   font-size: 14px;
-  color: #999;
+  color: var(--text-secondary);
 }
 
 .status-value {
   font-size: 16px;
-  color: #FF6B9D;
+  color: var(--primary);
   font-weight: 600;
 }
 
@@ -361,17 +327,17 @@ onUnmounted(() => {
 
 .stat-item.success {
   background: rgba(52, 211, 153, 0.1);
-  border: 2px solid #34D399;
+  border: 2px solid var(--green);
 }
 
-.stat-item.failed {
-  background: rgba(239, 68, 68, 0.1);
-  border: 2px solid #EF4444;
+.stat-item.verified {
+  background: rgba(255, 107, 157, 0.1);
+  border: 2px solid var(--primary);
 }
 
 .stat-label {
   font-size: 14px;
-  color: #666;
+  color: var(--text-muted);
   font-weight: 600;
 }
 
@@ -381,17 +347,15 @@ onUnmounted(() => {
 }
 
 .stat-item.success .stat-value {
-  color: #34D399;
+  color: var(--green);
 }
 
-.stat-item.failed .stat-value {
-  color: #EF4444;
+.stat-item.verified .stat-value {
+  color: var(--primary);
 }
 
 .scheduled-card {
-  border-radius: 16px;
-  background: var(--theme-bg-card);
-  border: 1px solid var(--theme-border);
+  border-radius: var(--radius-xl);
 }
 
 .scheduled-content {
@@ -406,7 +370,7 @@ onUnmounted(() => {
 
 .scheduled-label {
   font-size: 16px;
-  color: #666;
+  color: var(--text-muted);
   margin-right: 20px;
   min-width: 150px;
 }
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 4c33d4b..49a0824 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dashboard">
+  <div class="page-container">
     <PageHeader title="代理池管理系统" icon="🔮" />
 
     <el-row :gutter="20" class="stats-row">
@@ -63,7 +63,6 @@ const crawler = useCrawlerStore()
 
 const stats = computed(() => proxyStore.stats)
 
-// 监听爬虫状态，任务结束时自动刷新数据
 watch(() => crawler.running, async (newVal, oldVal) => {
   if (oldVal === true && newVal === false) {
     await proxyStore.fetchStats()
@@ -141,12 +140,6 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.dashboard {
-  padding: 20px;
-  background: var(--theme-bg);
-  min-height: 100vh;
-}
-
 .stats-row {
   margin-bottom: 20px;
 }
@@ -156,10 +149,8 @@ onUnmounted(() => {
 }
 
 .status-card {
-  border-radius: 20px;
+  border-radius: var(--radius-xl);
   margin-bottom: 20px;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid rgba(255, 107, 157, 0.2);
   backdrop-filter: blur(10px);
 }
 
@@ -178,7 +169,7 @@ onUnmounted(() => {
 
 .progress-text {
   font-size: 14px;
-  color: #FF6B9D;
+  color: var(--primary);
   font-weight: 700;
   text-shadow: 0 0 10px rgba(255, 107, 157, 0.3);
 }
@@ -186,24 +177,13 @@ onUnmounted(() => {
 .status-message {
   text-align: center;
   font-size: 16px;
-  color: #9CA3AF;
+  color: var(--text-secondary);
   padding: 15px;
-  background: rgba(26, 31, 58, 0.5);
+  background: rgba(255, 255, 255, 0.5);
   border-radius: 12px;
   border: 1px solid rgba(0, 212, 255, 0.1);
   font-weight: 600;
   letter-spacing: 0.5px;
   animation: fadeIn 0.5s ease;
 }
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 </style>
diff --git a/frontend/src/views/Plugins.vue b/frontend/src/views/Plugins.vue
index c06c84f..33002d2 100644
--- a/frontend/src/views/Plugins.vue
+++ b/frontend/src/views/Plugins.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="plugins">
+  <div class="page-container">
     <PageHeader title="插件管理" icon="🔌" />
 
     <el-card class="plugins-card" shadow="hover" v-loading="pluginsStore.loading">
@@ -126,16 +126,8 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.plugins {
-  padding: 20px;
-  background: var(--theme-bg);
-  min-height: 100vh;
-}
-
 .plugins-card {
-  border-radius: 16px;
-  background: var(--theme-bg-card);
-  border: 1px solid var(--theme-border);
+  border-radius: var(--radius-xl);
 }
 
 .card-header {
@@ -147,7 +139,7 @@ onMounted(async () => {
 .card-title {
   font-size: 18px;
   font-weight: 600;
-  color: var(--theme-primary);
+  color: var(--primary);
 }
 
 .plugin-name {
@@ -161,7 +153,7 @@ onMounted(async () => {
 }
 
 .plugin-description {
-  color: var(--theme-text-secondary);
+  color: var(--text-secondary);
   font-size: 14px;
 }
 
@@ -178,7 +170,7 @@ onMounted(async () => {
 
 .stat-label {
   font-size: 12px;
-  color: var(--theme-text-secondary);
+  color: var(--text-secondary);
 }
 
 .stat-value {
@@ -187,23 +179,20 @@ onMounted(async () => {
 }
 
 .stat-value.success {
-  color: #34D399;
+  color: var(--green);
 }
 
 .stat-value.failed {
-  color: #F56C6C;
+  color: var(--danger);
 }
 
 .last-run {
-  color: var(--theme-text-secondary);
+  color: var(--text-secondary);
   font-size: 14px;
 }
 
 .btn-icon {
+  font-size: 20px;
   margin-right: 4px;
 }
-
-:deep(.el-switch__label) {
-  font-weight: 600;
-}
 </style>
diff --git a/frontend/src/views/ProxyList.vue b/frontend/src/views/ProxyList.vue
index f77faa5..c1a4d94 100644
--- a/frontend/src/views/ProxyList.vue
+++ b/frontend/src/views/ProxyList.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="proxy-list">
+  <div class="page-container">
     <PageHeader title="代理列表" icon="📋" />
 
     <el-card class="filter-card" shadow="hover">
-      <el-form :inline="true" :model="filterForm" class="filter-form">
+      <el-form :inline="true" :model="filterForm" class="form-row">
         <el-form-item label="协议类型">
           <el-select v-model="filterForm.protocol" placeholder="全部" clearable style="width: 120px">
             <el-option label="全部" value=""></el-option>
@@ -23,11 +23,11 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleSearch" class="search-btn">
+          <el-button type="primary" @click="handleSearch">
             <span class="btn-icon">🔍</span>
             搜索
           </el-button>
-          <el-button @click="handleReset" class="reset-btn">
+          <el-button @click="handleReset">
             <span class="btn-icon">🔄</span>
             重置
           </el-button>
@@ -63,7 +63,6 @@
         v-loading="proxyStore.loading"
         @selection-change="handleSelectionChange"
         :row-style="{ cursor: 'pointer' }"
-        class="proxy-table"
       >
         <el-table-column type="selection" width="55" />
         <el-table-column prop="ip" label="IP地址" width="150" />
@@ -82,7 +81,6 @@
               disabled 
               show-score 
               :score-template="scope.row.score ? '{value}' : '0'"
-              text-color="var(--theme-primary)"
             />
           </template>
         </el-table-column>
@@ -93,7 +91,6 @@
               type="primary" 
               size="small" 
               @click.stop="handleCopy(scope.row)"
-              class="action-btn"
             >
               复制
             </el-button>
@@ -101,7 +98,6 @@
               type="danger" 
               size="small" 
               @click.stop="handleDelete(scope.row)"
-              class="action-btn"
             >
               删除
             </el-button>
@@ -118,7 +114,6 @@
           layout="total, sizes, prev, pager, next, jumper"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
-          class="pagination"
         />
       </div>
     </el-card>
@@ -251,41 +246,12 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.proxy-list {
-  padding: 20px;
-  background: var(--theme-bg);
-  min-height: 100vh;
-}
-
 .filter-card {
   margin-bottom: 20px;
-  border-radius: 16px;
-  background: var(--theme-bg-card);
-  border: 1px solid var(--theme-border);
-}
-
-.filter-form {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.search-btn, .reset-btn {
-  border-radius: 8px;
-  transition: all 0.3s ease;
-}
-
-.search-btn:hover, .reset-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.2);
-}
-
-.btn-icon {
-  margin-right: 5px;
 }
 
 .table-card {
-  border-radius: 16px;
+  border-radius: var(--radius-xl);
 }
 
 .card-header {
@@ -297,7 +263,7 @@ onMounted(() => {
 .card-title {
   font-size: 18px;
   font-weight: 600;
-  color: #FF6B9D;
+  color: var(--primary);
 }
 
 .header-actions {
@@ -305,18 +271,9 @@ onMounted(() => {
   gap: 10px;
 }
 
-.proxy-table {
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.action-btn {
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-.action-btn:hover {
-  transform: scale(1.05);
+.btn-icon {
+  font-size: 20px;
+  margin-right: 0;
 }
 
 .pagination-wrapper {
@@ -325,8 +282,4 @@ onMounted(() => {
   margin-top: 20px;
   padding: 20px;
 }
-
-.pagination {
-  border-radius: 8px;
-}
 </style>
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index 998196d..22c8681 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -1,64 +1,148 @@
 <template>
-  <div class="settings">
-    <PageHeader title="设置" icon="⚙️" />
+  <div class="page-container">
+    <PageHeader title="系统设置" icon="⚙️" />
 
-    <el-card class="settings-card" shadow="hover">
+    <el-card class="settings-card" shadow="hover" v-loading="loading">
       <template #header>
         <div class="card-header">
-          <span class="card-title">📝 关于</span>
+          <span class="card-title">🎨 基础配置</span>
+          <el-button type="primary" @click="handleSave" size="large" :loading="saving">
+            <span class="btn-icon">💾</span>
+            保存配置
+          </el-button>
         </div>
       </template>
-      
-      <div class="about-content">
-        <div class="about-item">
-          <span class="about-label">项目名称</span>
-          <span class="about-value">代理池管理系统</span>
-        </div>
-        <div class="about-item">
-          <span class="about-label">版本号</span>
-          <span class="about-value">v1.0.0</span>
-        </div>
-        <div class="about-item">
-          <span class="about-label">后端API</span>
-          <span class="about-value">http://localhost:3000</span>
-        </div>
-        <div class="about-item">
-          <span class="about-label">前端服务</span>
-          <span class="about-value">http://localhost:8080</span>
-        </div>
-        <div class="about-item">
-          <span class="about-label">数据库</span>
-          <span class="about-value">SQLite</span>
-        </div>
-      </div>
+
+      <el-form :model="settings" label-width="150px" class="settings-form">
+        <el-form-item label="数据库路径">
+          <el-input v-model="settings.db_path" placeholder="数据库文件路径" />
+        </el-form-item>
+
+        <el-form-item label="爬取超时">
+          <el-input-number 
+            v-model="settings.crawl_timeout" 
+            :min="5" 
+            :max="120"
+            :step="5"
+            class="setting-input"
+          />
+          <span class="setting-suffix">秒</span>
+        </el-form-item>
+
+        <el-form-item label="验证超时">
+          <el-input-number 
+            v-model="settings.validation_timeout" 
+            :min="3" 
+            :max="60"
+            :step="1"
+            class="setting-input"
+          />
+          <span class="setting-suffix">秒</span>
+        </el-form-item>
+
+        <el-form-item label="最大重试次数">
+          <el-input-number 
+            v-model="settings.max_retries" 
+            :min="0" 
+            :max="10"
+            class="setting-input"
+          />
+        </el-form-item>
+
+        <el-form-item label="默认并发数">
+          <el-input-number 
+            v-model="settings.default_concurrency" 
+            :min="10" 
+            :max="200"
+            :step="10"
+            class="setting-input"
+          />
+        </el-form-item>
+
+        <el-form-item label="最低代理分数">
+          <el-input-number 
+            v-model="settings.min_proxy_score" 
+            :min="0" 
+            :max="10"
+            :step="1"
+            class="setting-input"
+          />
+        </el-form-item>
+
+        <el-form-item label="代理过期时间">
+          <el-input-number 
+            v-model="settings.proxy_expiry_days" 
+            :min="1" 
+            :max="30"
+            :step="1"
+            class="setting-input"
+          />
+          <span class="setting-suffix">天</span>
+        </el-form-item>
+      </el-form>
     </el-card>
   </div>
 </template>
 
 <script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
 import PageHeader from '../components/PageHeader.vue'
+
+const loading = ref(false)
+const saving = ref(false)
+const settings = reactive({
+  db_path: '',
+  crawl_timeout: 30,
+  validation_timeout: 10,
+  max_retries: 3,
+  default_concurrency: 50,
+  min_proxy_score: 5,
+  proxy_expiry_days: 7
+})
+
+async function fetchSettings() {
+  loading.value = true
+  try {
+    const response = await fetch('http://localhost:8923/api/settings')
+    if (response.ok) {
+      const data = await response.json()
+      Object.assign(settings, data)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleSave() {
+  saving.value = true
+  try {
+    const response = await fetch('http://localhost:8923/api/settings', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(settings)
+    })
+    
+    if (response.ok) {
+      ElMessage.success('配置保存成功啦~')
+    } else {
+      ElMessage.error('配置保存失败呢~')
+    }
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(() => {
+  fetchSettings()
+})
 </script>
 
 <style scoped>
-.settings {
-  padding: 20px;
-  background: var(--theme-bg);
-  min-height: 100vh;
-  color: var(--theme-text);
-}
-
 .settings-card {
-  margin-bottom: 20px;
-  border-radius: 12px;
-  background: var(--theme-bg-card);
-  border: 1px solid var(--theme-border);
-  transition: all 0.3s ease;
-}
-
-.settings-card:hover {
-  box-shadow: 0 4px 16px rgba(255, 107, 157, 0.15);
-  transform: translateY(-2px);
-  border-color: var(--theme-primary);
+  border-radius: var(--radius-xl);
 }
 
 .card-header {
@@ -69,132 +153,26 @@ import PageHeader from '../components/PageHeader.vue'
 
 .card-title {
   font-size: 18px;
-  font-weight: 700;
-  color: var(--theme-primary);
+  font-weight: 600;
+  color: var(--primary);
 }
 
-.settings-content {
+.settings-form {
   padding: 20px;
-}
-
-.setting-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 0;
-  border-bottom: 1px solid var(--theme-border);
-  transition: all 0.3s ease;
-}
-
-.setting-item:hover {
-  background-color: var(--theme-bg-light);
-  border-radius: 8px;
-  padding: 20px 10px;
-  margin: 0 -10px;
-}
-
-.setting-item:last-child {
-  border-bottom: none;
-}
-
-.setting-info {
-  flex: 1;
-  padding-right: 20px;
-}
-
-.setting-label {
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--theme-text);
-  margin-bottom: 5px;
-}
-
-.setting-desc {
-  font-size: 14px;
-  color: var(--theme-text-secondary);
+  max-width: 800px;
 }
 
 .setting-input {
-  width: 150px;
+  width: 300px;
 }
 
-.setting-actions {
-  display: flex;
-  gap: 20px;
-  justify-content: center;
-  padding-top: 20px;
-  border-top: 1px solid var(--theme-border);
-}
-
-.save-btn {
-  padding: 12px 30px;
-  font-size: 16px;
-  border-radius: 8px;
-  background-color: var(--theme-primary);
-  border: none;
-  color: var(--theme-bg);
-  font-weight: 700;
-  transition: all 0.3s ease;
-}
-
-.save-btn:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-
-.reset-btn {
-  padding: 12px 30px;
-  font-size: 16px;
-  border-radius: 8px;
-  background-color: var(--theme-bg-light);
-  border: 1px solid var(--theme-border);
-  color: var(--theme-text);
-  font-weight: 700;
-  transition: all 0.3s ease;
-}
-
-.reset-btn:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+.setting-suffix {
+  margin-left: 10px;
+  color: var(--text-secondary);
 }
 
 .btn-icon {
-  font-size: 18px;
+  font-size: 20px;
   margin-right: 8px;
 }
-
-.about-content {
-  padding: 20px;
-}
-
-.about-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 15px 0;
-  border-bottom: 1px solid var(--theme-border);
-  transition: all 0.3s ease;
-}
-
-.about-item:hover {
-  background-color: var(--theme-bg-light);
-  border-radius: 8px;
-  padding: 15px 10px;
-  margin: 0 -10px;
-}
-
-.about-item:last-child {
-  border-bottom: none;
-}
-
-.about-label {
-  font-size: 16px;
-  color: var(--theme-text-secondary);
-  font-weight: 600;
-}
-
-.about-value {
-  font-size: 16px;
-  color: var(--theme-primary);
-  font-weight: 700;
-}
 </style>