优化前端代码架构 - 提取CSS变量和工具类

主要改进：
- 新增 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/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;
 }