refactor(styles): 重构主题颜色变量为 Sass mixin 系统

- 引入 set-el-color 和 set-el-colors mixin 统一生成 Element Plus 语义色梯度
- 通过 color.mix 函数动态计算 light 和 dark 梯度，提高维护性
- 统一管理亮色和暗色模式的颜色定义，减少重复代码

src/styles/theme.scss

@@ -1,42 +1,60 @@
-// ========== 亮色模式（默认） ==========
-:root {
-  // 覆盖 Element Plus 主色
-  // ---- 主色 ----
-  --el-color-primary: #8077ff;
+// ========== 导入 Sass 模块 ==========
+@use 'sass:color';
+
+// =============================================
+//  颜色梯度生成 Mixin
+// =============================================
 
-  // ---- 亮色 light 梯度（与白色混合） ----
-  --el-color-primary-light-1: #8d85ff; // 10%
-  --el-color-primary-light-2: #9992ff; // 20%
-  --el-color-primary-light-3: #a6a0ff; // 30% ← hover 边框
-  --el-color-primary-light-4: #b3adff; // 40%
-  --el-color-primary-light-5: #c0bbff; // 50% ← 禁用背景
-  --el-color-primary-light-6: #ccc9ff; // 60%
-  --el-color-primary-light-7: #d9d6ff; // 70% ← input hover 边框
-  --el-color-primary-light-8: #e6e4ff; // 80% ← hover 背景
-  --el-color-primary-light-9: #f2f1ff; // 90% ← 极浅背景
+/**
+ * 生成 Element Plus 语义色的全部梯度变量
+ * @param {String} $name     - 色名，如 'primary', 'success'
+ * @param {Color}  $base     - 基色
+ * @param {Color}  $mix-light - light 梯度混合色
+ * @param {Color}  $mix-dark  - dark-2 混合色
+ */
+@mixin set-el-color($name, $base, $mix-light, $mix-dark) {
+  --el-color-#{$name}: #{$base};
 
-  // ---- 暗色（按下/激活：与黑色混合 20%） ----
-  --el-color-primary-dark-2: #665fcc;
+  @for $i from 1 through 9 {
+    --el-color-#{$name}-light-#{$i}: color.mix($mix-light, $base, $i * 10%);
+  }
+
+  --el-color-#{$name}-dark-2: color.mix($mix-dark, $base, 20%);
+}
 
-  // ---- Success 色 (亮色模式) ----
-  --el-color-success: #10b981; // Base: Emerald 500
-  --el-color-success-light-1: #28c08d; // 10%
-  --el-color-success-light-2: #40c799; // 20%
-  --el-color-success-light-3: #58cea6; // 30%
-  --el-color-success-light-4: #70d5b2; // 40%
-  --el-color-success-light-5: #88dcbf; // 50%
-  --el-color-success-light-6: #a0e3cb; // 60%
-  --el-color-success-light-7: #b8ead8; // 70%
-  --el-color-success-light-8: #d0f1e4; // 80%
-  --el-color-success-light-9: #e8f8f1; // 90%
-  --el-color-success-dark-2: #0d9467;  // 20% 混合黑色
+/**
+ * 批量生成多个语义色的梯度变量
+ */
+@mixin set-el-colors($color-map, $mix-light, $mix-dark) {
+  @each $name, $base in $color-map {
+    @include set-el-color($name, $base, $mix-light, $mix-dark);
+  }
+}
+
+// =============================================
+//  亮色模式（默认）
+// =============================================
+:root {
+  // ---- Element Plus 色系 ----
+  @include set-el-colors(
+    (
+      'primary': #8077ff,
+      'success': #10b981,
+      'warning': #e6a23c,
+      'danger': #f56c6c,
+      'info': #909399,
+    ),
+    #ffffff,
+    // light 梯度 → 与白色混合
+    #000000 // dark-2    → 与黑色混合
+  );
 
-  // 自定义渐变按钮变量
+  // ---- 渐变按钮 ----
   --btn-primary-gradient: linear-gradient(91deg, #5f53ff -40.99%, #8d53ff 88.34%);
   --btn-primary-gradient-hover: linear-gradient(95deg, #8d22ff -9.99%, #ae00ff 91.44%);
   --btn-primary-shadow: rgba(102, 126, 234, 0.4);
 
-  // 页面级自定义变量
+  // ---- 页面级变量 ----
   --admin-bg: #f0f2f5;
   --admin-sidebar-bg: #ffffff;
   --admin-header-bg: #ffffff;
@@ -48,46 +66,32 @@
   --admin-table-header-bg: #f5f7fa;
 }
 
-// ========== 暗色模式 ==========
+// =============================================
+//  暗色模式
+// =============================================
 html.dark {
-  // 覆盖 Element Plus 暗色下的主色（可选调整）
-  // ---- 主色保持不变 ----
-  --el-color-primary: #8077ff;
-  // ---- 暗色 light 梯度（与 #141414 混合） ----
-  --el-color-primary-light-1: #756de8; // 10%
-  --el-color-primary-light-2: #6a63d0; // 20%
-  --el-color-primary-light-3: #6059b9; // 30% ← 暗色边框
-  --el-color-primary-light-4: #554fa1; // 40%
-  --el-color-primary-light-5: #4a468a; // 50% ← 暗色禁用
-  --el-color-primary-light-6: #3f3c72; // 60%
-  --el-color-primary-light-7: #34325b; // 70% ← 暗色 hover 背景
-  --el-color-primary-light-8: #2a2843; // 80% ← 暗色浅背景
-  --el-color-primary-light-9: #1f1e2c; // 90% ← 暗色极浅背景
-  // ---- 暗色下 hover 变亮（与白色混合 20%） ----
-  --el-color-primary-dark-2: #9992ff;
-  
+  $dark-bg: #141414;
 
-  // ---- Success 色（暗色模式） ----
-  --el-color-success: #35ffdd;
-  --el-color-success-light-3: #2bb9a1; /* 混合 30% 暗色 */
-  --el-color-success-light-5: #258a79; /* 混合 50% 暗色 (Plain按钮的默认边框色) */
-  --el-color-success-light-7: #1e5b50; /* 混合 70% 暗色 */
-  --el-color-success-light-8: #1b433c; /* 混合 80% 暗色 */
-  --el-color-success-light-9: #172c28; /* 混合 90% 暗色 (Plain按钮的默认背景色) */
-  --el-color-success-light-1: #32e8c9;
-  --el-color-success-light-2: #2ed0b5;
-  --el-color-success-light-4: #28a18d;
-  --el-color-success-light-6: #217264;
-  /* ---- Success 按压色（与纯白 #ffffff 混合产生） ---- */
-  /* 主要用于按钮按下 Active 时的状态反馈 */
-  --el-color-success-dark-2: #5dffe4;
+  // ---- Element Plus 色系 ----
+  @include set-el-colors(
+    (
+      'primary': #8077ff,
+      'success': #35ffdd,
+      'warning': #e6a23c,
+      'danger': #f56c6c,
+      'info': #909399,
+    ),
+    $dark-bg,
+    // light 梯度 → 与暗色背景混合
+    #ffffff // dark-2    → 与白色混合（按下变亮）
+  );
 
-  // 暗色下的渐变按钮
+  // ---- 渐变按钮 ----
   --btn-primary-gradient: linear-gradient(135deg, #5a6fe0 0%, #6a3f9a 100%);
   --btn-primary-gradient-hover: linear-gradient(135deg, #6a3f9a 0%, #5a6fe0 100%);
   --btn-primary-shadow: rgba(90, 111, 224, 0.3);
 
-  // 页面级自定义变量
+  // ---- 页面级变量 ----
   --admin-bg: #050505;
   --admin-sidebar-bg: #050505;
   --admin-header-bg: #050505;
@@ -100,7 +104,9 @@ html.dark {
   --admin-btn-bg: #2f2f2f;
 }
 
-// 全局平滑过渡（主题切换时）
+// =============================================
+//  主题切换过渡
+// =============================================
 html.theme-transition,
 html.theme-transition *,
 html.theme-transition *::before,