feat: 完善实战进度与技能树联动

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/App.vue

@@ -15,6 +15,11 @@
     </div>
 
     <div class="rotate-hint">请横屏观看，以获得最佳体验</div>
+
+    <LoadingOverlay
+      :visible="bootstrapLoading"
+      text="正在加载学习数据..."
+    />
   </div>
 </template>
 
@@ -27,8 +32,10 @@ import {
   useInterviewStore,
   useBasicElementsStore,
 } from '@/stores'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { syncAllCompletedYibanLessons } from '@/utils/yibanLessonProgress'
+import { initializeStorageBackend } from '@/utils/yiban'
+import LoadingOverlay from '@/components/Loading/LoadingOverlay.vue'
 
 // 使用等比例缩放hook
 const { scaleStyle } = useScale()
@@ -38,6 +45,9 @@ const filmStore = useFilmStore()
 const interviewStore = useInterviewStore()
 const basicElementsStore = useBasicElementsStore()
 
+// 易班数据读取期间的全屏 loading
+const bootstrapLoading = ref(true)
+
 onMounted(async () => {
   const params = new URLSearchParams(window.location.search)
   const courseId = params.get('courseid')
@@ -50,12 +60,18 @@ onMounted(async () => {
     })
   }
 
-  await Promise.allSettled([
-    vlogStore.loadVlogStore(),
-    filmStore.loadFilmStore(),
-    interviewStore.loadInterviewStore(),
-    basicElementsStore.loadBasicElementsStore(),
-  ])
+  try {
+    await initializeStorageBackend()
+
+    await Promise.allSettled([
+      vlogStore.loadVlogStore(),
+      filmStore.loadFilmStore(),
+      interviewStore.loadInterviewStore(),
+      basicElementsStore.loadBasicElementsStore(),
+    ])
+  } finally {
+    bootstrapLoading.value = false
+  }
 
   await syncAllCompletedYibanLessons()
 })