style(styles): 添加全局颜色和3D效果变量

- 新增了完整的颜色变量，包括主色、文本色和背景色
- 添加多种阴影效果变量，用于提升界面层次感
- 引入边框高亮和阴影效果变量，增强视觉细节
- 增加变换效果变量，用于交互状态的位移变化
- 添加多种渐变色变量，方便实现丰富的渐变背景
- 定义了全圆角变量，增加组件样式的灵活性

Author: lanshuizhiyue

src/frontEnd/src/assets/styles/variables.scss

@@ -20,6 +20,7 @@ $spacing-xl: 32px;
 $border-radius: 6px;
 $border-radius-lg: 8px;
 $border-radius-xl: 12px;
+$border-radius-full: 9999px;
 
 // 字重
 $font-weight-normal: 400;
@@ -29,3 +30,59 @@ $font-weight-bold: 700;
 
 // 过渡
 $transition-base: all 0.2s ease;
+
+// 颜色
+$primary-color: #6366f1;
+$text-color: #1e293b;
+$text-color-white: #ffffff;
+$bg-color-dark: #0f172a;
+
+// 表面色
+$surface-lighter: #f8fafc;
+$surface-white: #ffffff;
+
+// ==================== 3D效果变量 ====================
+
+// 阴影效果
+$shadow-raised: 
+  0 2px 4px rgba(0, 0, 0, 0.05),
+  0 4px 8px rgba(0, 0, 0, 0.08),
+  inset 0 1px 0 rgba(255, 255, 255, 0.8);
+
+$shadow-elevated:
+  0 8px 16px rgba(0, 0, 0, 0.1),
+  0 16px 32px rgba(0, 0, 0, 0.08),
+  inset 0 1px 0 rgba(255, 255, 255, 0.9);
+
+$shadow-floating:
+  0 12px 24px rgba(0, 0, 0, 0.12),
+  0 24px 48px rgba(0, 0, 0, 0.1),
+  inset 0 1px 0 rgba(255, 255, 255, 1);
+
+$shadow-pressed:
+  inset 0 2px 4px rgba(0, 0, 0, 0.1),
+  inset 0 4px 8px rgba(0, 0, 0, 0.05),
+  0 1px 2px rgba(0, 0, 0, 0.05);
+
+$shadow-inset-dark: inset 0 2px 4px rgba(0, 0, 0, 0.08);
+$shadow-inset-light: inset 0 1px 2px rgba(255, 255, 255, 0.6);
+$shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
+
+// 边框效果
+$border-highlight: 1px solid rgba(255, 255, 255, 0.8);
+$border-shadow: 1px solid rgba(0, 0, 0, 0.08);
+
+// 变换效果
+$transform-hover: translateY(-2px);
+$transform-press: translateY(1px);
+$transform-float: translateY(-4px);
+
+// 渐变效果
+$gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+$gradient-secondary: linear-gradient(135deg, #64748b 0%, #475569 100%);
+$gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
+$gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+$gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+$gradient-rainbow: linear-gradient(90deg, 
+  #ef4444 0%, #f59e0b 16%, #eab308 32%, 
+  #22c55e 48%, #06b6d4 64%, #3b82f6 80%, #8b5cf6 100%);