优化前端代码架构 - 提取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/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>