diff --git a/src/assets/styles/variables.css b/src/assets/styles/variables.css
index f69a660..0e26050 100644
--- a/src/assets/styles/variables.css
+++ b/src/assets/styles/variables.css
@@ -102,6 +102,37 @@
   --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
   --glass-blur: blur(10px);
 
+  /* 透明度级别 */
+  --opacity-lighter: 0.02;
+  --opacity-light: 0.05;
+  --opacity-medium: 0.1;
+  --opacity-heavy: 0.2;
+  --opacity-strong: 0.3;
+
+  /* 主题色透明度变体 */
+  --primary-alpha-lighter: rgba(30, 58, 138, var(--opacity-lighter));
+  --primary-alpha-light: rgba(30, 58, 138, var(--opacity-light));
+  --primary-alpha-medium: rgba(30, 58, 138, var(--opacity-medium));
+  --primary-alpha-heavy: rgba(30, 58, 138, var(--opacity-heavy));
+  --primary-alpha-strong: rgba(30, 58, 138, var(--opacity-strong));
+
+  --success-alpha-light: rgba(16, 185, 129, var(--opacity-light));
+  --success-alpha-medium: rgba(16, 185, 129, var(--opacity-medium));
+  --success-alpha-heavy: rgba(16, 185, 129, var(--opacity-heavy));
+
+  --danger-alpha-light: rgba(239, 68, 68, var(--opacity-light));
+  --danger-alpha-heavy: rgba(239, 68, 68, var(--opacity-heavy));
+
+  --secondary-alpha-heavy: rgba(6, 182, 212, var(--opacity-heavy));
+
+  --white-alpha-high: rgba(255, 255, 255, 0.98);
+  --white-alpha-medium: rgba(255, 255, 255, 0.9);
+  --white-alpha-light: rgba(255, 255, 255, 0.6);
+  --white-alpha-lighter: rgba(255, 255, 255, 0.1);
+
+  --black-alpha-light: rgba(0, 0, 0, 0.08);
+  --black-alpha-medium: rgba(0, 0, 0, 0.15);
+
   /* 动画 */
   --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/components/AbilityRadarChart.vue b/src/components/AbilityRadarChart.vue
index c7e0a31..0056047 100644
--- a/src/components/AbilityRadarChart.vue
+++ b/src/components/AbilityRadarChart.vue
@@ -107,11 +107,11 @@ export default {
           splitArea: {
             areaStyle: {
               color: [
-                'rgba(59, 130, 246, 0.02)',
-                'rgba(59, 130, 246, 0.04)',
-                'rgba(59, 130, 246, 0.06)',
-                'rgba(59, 130, 246, 0.08)',
-                'rgba(59, 130, 246, 0.1)'
+                getCSSVariable('--primary-alpha-lighter'),
+                getCSSVariable('--primary-alpha-lighter'),
+                getCSSVariable('--primary-alpha-light'),
+                getCSSVariable('--primary-alpha-light'),
+                getCSSVariable('--primary-alpha-medium')
               ]
             }
           },
@@ -135,7 +135,7 @@ export default {
             symbol: 'circle',
             symbolSize: CHART_CONFIG.symbolSize,
             areaStyle: {
-              color: 'rgba(59, 130, 246, 0.1)'
+              color: getCSSVariable('--primary-alpha-medium')
             },
             lineStyle: {
               color: getCSSVariable('--primary'),
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 9d8c8ac..76d604a 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -62,7 +62,7 @@ export default {
 .btn-gradient {
   background: var(--gradient-primary);
   border: none;
-  color: white;
+  color: var(--text-inverse);
 }
 
 .btn-gradient:hover {
@@ -78,6 +78,6 @@ export default {
 
 .btn-outline:hover {
   background: var(--primary-color);
-  color: white;
+  color: var(--text-inverse);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/EvaluationDialog.vue b/src/components/EvaluationDialog.vue
index db1b767..18d0655 100644
--- a/src/components/EvaluationDialog.vue
+++ b/src/components/EvaluationDialog.vue
@@ -225,6 +225,11 @@ import { ref, reactive, computed, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import FileUpload from './FileUpload.vue'
 
+// 常量配置
+const ANIMATION_DELAY = {
+  MEDIUM: 1000
+}
+
 export default {
   name: 'EvaluationDialog',
   components: {
@@ -356,7 +361,7 @@ export default {
         submitting.value = true
 
         // 模拟提交延迟
-        await new Promise(resolve => setTimeout(resolve, 1000))
+        await new Promise(resolve => setTimeout(resolve, ANIMATION_DELAY.MEDIUM))
 
         // 构造提交数据
         const submitData = {
diff --git a/src/components/FileUpload.vue b/src/components/FileUpload.vue
index 373c267..87d9f9c 100644
--- a/src/components/FileUpload.vue
+++ b/src/components/FileUpload.vue
@@ -471,7 +471,7 @@ export default {
 
   &.file-error {
     border-color: var(--danger);
-    background: rgba(239, 68, 68, 0.05);
+    background: var(--danger-alpha-light);
   }
 }
 
diff --git a/src/components/GradeDistributionChart.vue b/src/components/GradeDistributionChart.vue
index 530be5d..c0a38c0 100644
--- a/src/components/GradeDistributionChart.vue
+++ b/src/components/GradeDistributionChart.vue
@@ -353,7 +353,7 @@ export default {
 }
 
 .summary-item:hover {
-  background: rgba(59, 130, 246, 0.05);
+  background: var(--primary-alpha-light);
   transform: translateY(-2px);
 }
 
@@ -390,17 +390,17 @@ export default {
 }
 
 .grade-a-minus {
-  background: rgba(16, 185, 129, 0.2);
+  background: var(--success-alpha-heavy);
   color: var(--success);
 }
 
 .grade-b-plus {
-  background: rgba(59, 130, 246, 0.2);
+  background: var(--primary-alpha-heavy);
   color: var(--primary);
 }
 
 .grade-b {
-  background: rgba(6, 182, 212, 0.2);
+  background: var(--secondary-alpha-heavy);
   color: var(--secondary);
 }
 
@@ -411,7 +411,7 @@ export default {
 
 .grade-c-plus,
 .grade-c {
-  background: rgba(239, 68, 68, 0.2);
+  background: var(--danger-alpha-heavy);
   color: var(--danger);
 }
 
diff --git a/src/components/SubmissionDialog.vue b/src/components/SubmissionDialog.vue
index 4002523..bcd9f7d 100644
--- a/src/components/SubmissionDialog.vue
+++ b/src/components/SubmissionDialog.vue
@@ -101,7 +101,7 @@
           <div class="upload-section">
             <div class="upload-tips">
               <el-icon><InfoFilled /></el-icon>
-              <span>支持上传项目相关文档、截图、代码文件等，单个文件不超过10MB</span>
+              <span>支持上传项目相关文档、截图、代码文件等，单个文件不超过${FILE_SIZE_LIMIT}</span>
             </div>
             <FileUpload
               @upload="handleFileUpload"
@@ -190,6 +190,20 @@ import { ElMessage } from 'element-plus'
 import { InfoFilled, Link } from '@element-plus/icons-vue'
 import FileUpload from './FileUpload.vue'
 
+// 常量配置
+const FILE_SIZE_LIMIT = '10MB'
+const FORM_VALIDATION = {
+  PROJECT_NAME: { min: 2, max: 100 },
+  PROJECT_DESC: { min: 10, max: 800 },
+  CONTRIBUTION: { min: 10, max: 600 },
+  REFLECTION: { min: 10, max: 600 },
+  IMPROVEMENTS: { min: 10, max: 600 }
+}
+const ANIMATION_DELAY = {
+  SHORT: 500,
+  LONG: 1500
+}
+
 export default {
   name: 'SubmissionDialog',
   components: {
@@ -245,19 +259,19 @@ export default {
     const rules = reactive({
       projectName: [
         { required: true, message: '请输入项目名称', trigger: 'blur' },
-        { min: 2, max: 100, message: '项目名称长度在2-100个字符', trigger: 'blur' }
+        { min: FORM_VALIDATION.PROJECT_NAME.min, max: FORM_VALIDATION.PROJECT_NAME.max, message: `项目名称长度在${FORM_VALIDATION.PROJECT_NAME.min}-${FORM_VALIDATION.PROJECT_NAME.max}个字符`, trigger: 'blur' }
       ],
       projectDescription: [
         { required: true, message: '请输入项目描述', trigger: 'blur' },
-        { min: 10, max: 800, message: '项目描述长度在10-800个字符', trigger: 'blur' }
+        { min: FORM_VALIDATION.PROJECT_DESC.min, max: FORM_VALIDATION.PROJECT_DESC.max, message: `项目描述长度在${FORM_VALIDATION.PROJECT_DESC.min}-${FORM_VALIDATION.PROJECT_DESC.max}个字符`, trigger: 'blur' }
       ],
       contributions: [
         { required: true, message: '请描述主要贡献', trigger: 'blur' },
-        { min: 10, max: 600, message: '贡献描述长度在10-600个字符', trigger: 'blur' }
+        { min: FORM_VALIDATION.CONTRIBUTION.min, max: FORM_VALIDATION.CONTRIBUTION.max, message: `贡献描述长度在${FORM_VALIDATION.CONTRIBUTION.min}-${FORM_VALIDATION.CONTRIBUTION.max}个字符`, trigger: 'blur' }
       ],
       learnings: [
         { required: true, message: '请分享收获与感悟', trigger: 'blur' },
-        { min: 10, max: 600, message: '收获感悟长度在10-600个字符', trigger: 'blur' }
+        { min: FORM_VALIDATION.REFLECTION.min, max: FORM_VALIDATION.REFLECTION.max, message: `收获感悟长度在${FORM_VALIDATION.REFLECTION.min}-${FORM_VALIDATION.REFLECTION.max}个字符`, trigger: 'blur' }
       ],
       'selfRating.completion': [
         { required: true, message: '请为完成度评分', trigger: 'change' }
@@ -338,7 +352,7 @@ export default {
         localStorage.setItem(draftKey, JSON.stringify(draftData))
 
         // 模拟保存延迟
-        await new Promise(resolve => setTimeout(resolve, 500))
+        await new Promise(resolve => setTimeout(resolve, ANIMATION_DELAY.SHORT))
 
         ElMessage.success('草稿保存成功')
       } catch (error) {
@@ -380,7 +394,7 @@ export default {
         }
 
         // 模拟提交延迟
-        await new Promise(resolve => setTimeout(resolve, 1500))
+        await new Promise(resolve => setTimeout(resolve, ANIMATION_DELAY.LONG))
 
         emit('submit', submitData)
 
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 9453a8d..65f0c20 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -279,7 +279,7 @@ export default {
 }
 
 .top-bar {
-  background: rgba(255, 255, 255, 0.98);
+  background: var(--white-alpha-high);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--border);
   padding: var(--spacing-lg) calc(var(--spacing-xxl) * 1.2);
@@ -410,17 +410,17 @@ export default {
   font-weight: 600;
   padding: 2px 6px;
   border-radius: var(--radius-sm);
-  background: rgba(16, 185, 129, 0.1);
+  background: var(--success-alpha-medium);
   color: var(--success);
 }
 
 .stat-trend.up {
-  background: rgba(16, 185, 129, 0.1);
+  background: var(--success-alpha-medium);
   color: var(--success);
 }
 
 .stat-trend.down {
-  background: rgba(239, 68, 68, 0.1);
+  background: var(--danger-alpha-medium);
   color: var(--danger);
 }
 
@@ -438,7 +438,7 @@ export default {
 
 .stat-card:hover {
   transform: translateY(-8px) scale(1.02);
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 20px 60px var(--black-alpha-medium);
 }
 
 .stat-icon {
@@ -448,7 +448,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
+  color: var(--text-inverse);
 }
 
 .stat-icon.primary {
@@ -582,7 +582,7 @@ export default {
 
 .action-btn.primary {
   background: var(--gradient-primary);
-  color: white;
+  color: var(--text-inverse);
   border: none;
 }
 
@@ -647,13 +647,13 @@ export default {
 .module-card.coming-soon {
   opacity: 0.5;
   cursor: not-allowed;
-  background: linear-gradient(135deg, rgba(243, 244, 246, 0.9) 0%, rgba(229, 231, 235, 0.9) 100%);
+  background: linear-gradient(135deg, var(--white-alpha-medium) 0%, var(--white-alpha-medium) 100%);
 }
 
 .module-card.coming-soon:hover {
   transform: none;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
-  border-color: rgba(226, 232, 240, 0.6);
+  box-shadow: 0 10px 40px var(--black-alpha-light);
+  border-color: var(--white-alpha-light);
 }
 
 .module-header {
@@ -681,7 +681,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
+  color: var(--text-inverse);
   transition: var(--transition-spring);
   font-size: 18px;
 }
@@ -717,7 +717,7 @@ export default {
 
 .module-badge.special {
   background: linear-gradient(135deg, var(--secondary-light) 0%, var(--secondary) 100%);
-  color: white;
+  color: var(--text-inverse);
 }
 
 .module-badge.coming {
diff --git a/src/views/Evaluate.vue b/src/views/Evaluate.vue
index ead4cf3..181affb 100644
--- a/src/views/Evaluate.vue
+++ b/src/views/Evaluate.vue
@@ -506,7 +506,7 @@ export default {
 }
 
 .page-header {
-  background: rgba(255, 255, 255, 0.98);
+  background: var(--white-alpha-high);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--border);
   padding: var(--spacing-lg) calc(var(--spacing-xxl) * 1.2);
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 138cff7..d75d629 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -243,7 +243,7 @@ export default {
 .logo {
   width: 48px;
   height: 48px;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--white-alpha-lighter);
   border-radius: var(--radius-xl);
   display: flex;
   align-items: center;
@@ -275,16 +275,16 @@ export default {
 }
 
 .stat-item {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--white-alpha-lighter);
   padding: var(--spacing-lg);
   border-radius: var(--radius-lg);
   backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--white-alpha-lighter);
   transition: var(--transition);
 }
 
 .stat-item:hover {
-  background: rgba(255, 255, 255, 0.15);
+  background: var(--white-alpha-lighter);
   transform: translateY(-2px);
 }
 
diff --git a/src/views/ReportMonitor.vue b/src/views/ReportMonitor.vue
index dfda75f..41f346d 100644
--- a/src/views/ReportMonitor.vue
+++ b/src/views/ReportMonitor.vue
@@ -255,8 +255,8 @@ export default {
             itemStyle: { color: getCSSVariable('--primary') },
             areaStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(30, 58, 138, 0.3)' },
-                { offset: 1, color: 'rgba(30, 58, 138, 0.05)' }
+                { offset: 0, color: getCSSVariable('--primary-alpha-strong') },
+                { offset: 1, color: getCSSVariable('--primary-alpha-light') }
               ])
             }
           },