feat: 完善技能树功能架构与逻辑流程文档，新增视频播放与学习进度追踪功能

src/components/Guide/StepNavigation.vue

@@ -56,7 +56,7 @@
             </div> -->
 
             <!-- 步骤标签 -->
-            <div class="step-label" :class="`step-label--${step.type}`">
+            <div class="step-label" :class="getTagColor(step.label)">
               {{ step.label }}
             </div>
 
@@ -93,6 +93,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
+import { getTagColor } from '@/utils'
 
 export interface StepItem {
   id: string
@@ -354,38 +355,9 @@ onMounted(() => {
 
 .step-label {
   @apply px-16 py-4 rounded-full text-2xl font-semibold mr-4 whitespace-nowrap;
-  color: white;
   min-width: 5rem;
   text-align: center;
-}
-
-.step-label--shooting {
-  background: linear-gradient(135deg, #22c55e, #16a34a);
-  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
-}
-
-.step-label--planning {
-  background: linear-gradient(135deg, #e38872, #e38872);
-  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
-}
-
-/* 蓝色 */
-.step-label--blue {
-  background: linear-gradient(135deg, #0ea5e9, #0284c7);
-  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
-}
-
-/* 天蓝色 */
-.step-label--post {
-  /* background: linear-gradient(180deg, #9ed5ee, #0ea5e9); */
-  background-color: #70c7ef;
-  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
-}
-
-.step-label--other {
-  /* background: linear-gradient(135deg, #a855f7, #9445de); */
-  background-color: #5f15d7;
-  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .step-content {