feat: 完善课程学习与技能树体验

完善课程资源、学习进度与技能树解锁体验，统一视频播放与引导相关交互。

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/App.vue

@@ -1,12 +1,20 @@
 <template>
-  <div class="app-container" :style="containerStyle">
-    <div class="app-content overflow-hidden" :style="scaleStyle">
+  <div
+    class="app-container"
+    :style="containerStyle"
+  >
+    <div
+      class="app-content overflow-hidden"
+      :style="scaleStyle"
+    >
       <router-view v-slot="{ Component }">
         <KeepAlive :include="['Action', 'Skill']">
           <component :is="Component" />
         </KeepAlive>
       </router-view>
     </div>
+
+    <div class="rotate-hint">请横屏观看，以获得最佳体验</div>
   </div>
 </template>
 
@@ -17,9 +25,10 @@ import {
   useVlogStore,
   useFilmStore,
   useInterviewStore,
-  useBasicElementsStore
+  useBasicElementsStore,
 } from '@/stores'
 import { onMounted } from 'vue'
+import { syncAllCompletedYibanLessons } from '@/utils/yibanLessonProgress'
 
 // 使用等比例缩放hook
 const { scaleStyle } = useScale()
@@ -37,7 +46,7 @@ onMounted(async () => {
   if (courseId || uid) {
     userStore.setCourseInfo({
       courseId: courseId ?? null,
-      uid: uid ?? null
+      uid: uid ?? null,
     })
   }
 
@@ -45,8 +54,10 @@ onMounted(async () => {
     vlogStore.loadVlogStore(),
     filmStore.loadFilmStore(),
     interviewStore.loadInterviewStore(),
-    basicElementsStore.loadBasicElementsStore()
+    basicElementsStore.loadBasicElementsStore(),
   ])
+
+  await syncAllCompletedYibanLessons()
 })
 
 // 容器样式
@@ -55,11 +66,39 @@ const containerStyle = {
   height: '100vh',
   overflow: 'hidden',
   position: 'relative' as const,
-  background: '#000'
+  background: '#000',
 }
 </script>
 
-<style>
+<style scoped>
+.rotate-hint {
+  position: fixed;
+  inset: 0;
+  z-index: 200000;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  color: #fff;
+  font-size: 20px;
+  line-height: 1.5;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.55)
+    radial-gradient(
+      circle at center,
+      rgba(255, 255, 255, 0.1),
+      rgba(0, 0, 0, 0.6)
+    );
+}
+
+@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
+  .rotate-hint {
+    display: flex;
+  }
+}
+</style>
+
+<!-- <style>
 #app {
   font-family:
     -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
@@ -67,4 +106,4 @@ const containerStyle = {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-</style>
+</style> -->