diff --git a/eslint.config.ts b/eslint.config.ts
index 082a3ee..87a1bbb 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -5,7 +5,10 @@ import { defineConfig } from 'eslint/config'
 import { fileURLToPath } from 'node:url'
 
 // 直接使用 tsconfig 的绝对路径，避免中文路径在 URL/路径互转时被编码导致读取失败
-const tsconfigEslintPath = fileURLToPath(new URL('./tsconfig.eslint.json', import.meta.url))
+const tsconfigRootDir = fileURLToPath(new URL('.', import.meta.url))
+const tsconfigEslintPath = fileURLToPath(
+  new URL('./tsconfig.eslint.json', import.meta.url),
+)
 
 export default defineConfig([
   // 全局忽略：自身配置文件、产物、第三方静态资源等不参与 lint
@@ -18,24 +21,25 @@ export default defineConfig([
       'public/**',
       'vite.config.*',
       'postcss.config.*',
-      'tailwind.config.*'
-    ]
+      'tailwind.config.*',
+    ],
   },
   {
     files: ['**/*.{js,mjs,cjs,ts,mts,cts,tsx,vue}'],
-    languageOptions: { globals: globals.browser }
+    languageOptions: { globals: globals.browser },
   },
   tseslint.configs.recommended,
   {
     languageOptions: {
       parserOptions: {
         // 让 typescript-eslint 使用专用 tsconfig（显式 include .vue）
-        project: [tsconfigEslintPath]
-      }
+        project: [tsconfigEslintPath],
+        tsconfigRootDir,
+      },
     },
     rules: {
-      '@typescript-eslint/no-explicit-any': 'off'
-    }
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
   },
   pluginVue.configs['flat/essential'],
   {
@@ -44,22 +48,28 @@ export default defineConfig([
       parserOptions: {
         parser: {
           ts: tseslint.parser,
-          tsx: tseslint.parser
+          tsx: tseslint.parser,
         },
         project: [tsconfigEslintPath],
+        tsconfigRootDir,
         extraFileExtensions: ['.vue'],
         ecmaFeatures: {
-          jsx: true
-        }
-      }
+          jsx: true,
+        },
+      },
     },
     rules: {
       'vue/multi-word-component-names': 'off',
       'vue/no-undef-components': [
         'error',
         {
-          ignorePatterns: ['router-view', 'router-link', 'RouterView', 'RouterLink']
-        }
+          ignorePatterns: [
+            'router-view',
+            'router-link',
+            'RouterView',
+            'RouterLink',
+          ],
+        },
       ],
       '@typescript-eslint/no-unused-vars': 'warn',
       '@typescript-eslint/no-explicit-any': 'off', // 完全禁用 any 检查
@@ -71,7 +81,7 @@ export default defineConfig([
       '@typescript-eslint/no-unsafe-argument': 'off',
       '@typescript-eslint/no-empty-object-type': 'off', // 允许空接口
       '@typescript-eslint/no-unused-expressions': 'warn', // 改为警告而非错误
-      'no-unused-expressions': 'off'
-    }
-  }
+      'no-unused-expressions': 'off',
+    },
+  },
 ])
diff --git a/src/App.vue b/src/App.vue
index dca5bc4..3a3f434 100644
--- a/src/App.vue
+++ b/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()
 })
diff --git a/src/assets/images/components/medal/vlog徽章-弹.png b/src/assets/images/components/medal/vlog徽章-弹.png
new file mode 100644
index 0000000..6b8ca10
Binary files /dev/null and b/src/assets/images/components/medal/vlog徽章-弹.png differ
diff --git a/src/assets/images/components/medal/关闭.png b/src/assets/images/components/medal/关闭.png
new file mode 100644
index 0000000..d9d7d9d
Binary files /dev/null and b/src/assets/images/components/medal/关闭.png differ
diff --git a/src/assets/images/components/medal/半透明背景.png b/src/assets/images/components/medal/半透明背景.png
new file mode 100644
index 0000000..4437321
Binary files /dev/null and b/src/assets/images/components/medal/半透明背景.png differ
diff --git a/src/assets/images/components/medal/恭喜获得vlog模块徽章.png b/src/assets/images/components/medal/恭喜获得vlog模块徽章.png
new file mode 100644
index 0000000..b5f5086
Binary files /dev/null and b/src/assets/images/components/medal/恭喜获得vlog模块徽章.png differ
diff --git a/src/assets/images/components/medal/恭喜获得新手导航模块徽章.png b/src/assets/images/components/medal/恭喜获得新手导航模块徽章.png
new file mode 100644
index 0000000..e0e231a
Binary files /dev/null and b/src/assets/images/components/medal/恭喜获得新手导航模块徽章.png differ
diff --git a/src/assets/images/components/medal/恭喜获得电影模块徽章.png b/src/assets/images/components/medal/恭喜获得电影模块徽章.png
new file mode 100644
index 0000000..834ab81
Binary files /dev/null and b/src/assets/images/components/medal/恭喜获得电影模块徽章.png differ
diff --git a/src/assets/images/components/medal/恭喜获得访谈模块徽章.png b/src/assets/images/components/medal/恭喜获得访谈模块徽章.png
new file mode 100644
index 0000000..24b1d67
Binary files /dev/null and b/src/assets/images/components/medal/恭喜获得访谈模块徽章.png differ
diff --git a/src/assets/images/components/medal/恭喜获得通关证书.png b/src/assets/images/components/medal/恭喜获得通关证书.png
new file mode 100644
index 0000000..3f178a8
Binary files /dev/null and b/src/assets/images/components/medal/恭喜获得通关证书.png differ
diff --git a/src/assets/images/components/medal/收集后可在【我的进度】中查看.png b/src/assets/images/components/medal/收集后可在【我的进度】中查看.png
new file mode 100644
index 0000000..7e35889
Binary files /dev/null and b/src/assets/images/components/medal/收集后可在【我的进度】中查看.png differ
diff --git a/src/assets/images/components/medal/新手导航徽章-弹.png b/src/assets/images/components/medal/新手导航徽章-弹.png
new file mode 100644
index 0000000..72a833e
Binary files /dev/null and b/src/assets/images/components/medal/新手导航徽章-弹.png differ
diff --git a/src/assets/images/components/medal/电影徽章-弹.png b/src/assets/images/components/medal/电影徽章-弹.png
new file mode 100644
index 0000000..47f806f
Binary files /dev/null and b/src/assets/images/components/medal/电影徽章-弹.png differ
diff --git a/src/assets/images/components/medal/立即查看.png b/src/assets/images/components/medal/立即查看.png
new file mode 100644
index 0000000..91da445
Binary files /dev/null and b/src/assets/images/components/medal/立即查看.png differ
diff --git a/src/assets/images/components/medal/访谈徽章-弹.png b/src/assets/images/components/medal/访谈徽章-弹.png
new file mode 100644
index 0000000..f034173
Binary files /dev/null and b/src/assets/images/components/medal/访谈徽章-弹.png differ
diff --git a/src/assets/images/components/medal/证书详情.png b/src/assets/images/components/medal/证书详情.png
new file mode 100644
index 0000000..bd491ce
Binary files /dev/null and b/src/assets/images/components/medal/证书详情.png differ
diff --git a/src/assets/images/components/medal/通关证书-弹.png b/src/assets/images/components/medal/通关证书-弹.png
new file mode 100644
index 0000000..2f856cd
Binary files /dev/null and b/src/assets/images/components/medal/通关证书-弹.png differ
diff --git a/src/assets/images/cover/Vlogmk_dtgpyzp_batch.jpg b/src/assets/images/cover/Vlogmk_dtgpyzp_batch.jpg
index 97041de..75f27d3 100644
Binary files a/src/assets/images/cover/Vlogmk_dtgpyzp_batch.jpg and b/src/assets/images/cover/Vlogmk_dtgpyzp_batch.jpg differ
diff --git a/src/assets/images/cover/Vlogmk_jcjbyy_batch.jpg b/src/assets/images/cover/Vlogmk_jcjbyy_batch.jpg
index 4d961af..aab1e30 100644
Binary files a/src/assets/images/cover/Vlogmk_jcjbyy_batch.jpg and b/src/assets/images/cover/Vlogmk_jcjbyy_batch.jpg differ
diff --git a/src/assets/images/cover/Vlogmk_jdjbch_batch.jpg b/src/assets/images/cover/Vlogmk_jdjbch_batch.jpg
index 9cb1668..10a42a8 100644
Binary files a/src/assets/images/cover/Vlogmk_jdjbch_batch.jpg and b/src/assets/images/cover/Vlogmk_jdjbch_batch.jpg differ
diff --git a/src/assets/images/cover/Vlogmk_jjjz_batch.jpg b/src/assets/images/cover/Vlogmk_jjjz_batch.jpg
index a8f84f8..2b93262 100644
Binary files a/src/assets/images/cover/Vlogmk_jjjz_batch.jpg and b/src/assets/images/cover/Vlogmk_jjjz_batch.jpg differ
diff --git a/src/assets/images/cover/Vlogmk_jjqd_batch.jpg b/src/assets/images/cover/Vlogmk_jjqd_batch.jpg
index b7297df..faae1b1 100644
Binary files a/src/assets/images/cover/Vlogmk_jjqd_batch.jpg and b/src/assets/images/cover/Vlogmk_jjqd_batch.jpg differ
diff --git a/src/assets/images/cover/Vlogmk_jtyy_batch.jpg b/src/assets/images/cover/Vlogmk_jtyy_batch.jpg
index 1838335..8cd6e17 100644
Binary files a/src/assets/images/cover/Vlogmk_jtyy_batch.jpg and b/src/assets/images/cover/Vlogmk_jtyy_batch.jpg differ
diff --git a/src/assets/images/cover/Vlogmk_kcjl_batch.jpg b/src/assets/images/cover/Vlogmk_kcjl_batch.jpg
index c7478be..3a30ec3 100644
Binary files a/src/assets/images/cover/Vlogmk_kcjl_batch.jpg and b/src/assets/images/cover/Vlogmk_kcjl_batch.jpg differ
diff --git a/src/assets/images/cover/Vlogmk_scdrjjpj_batch.jpg b/src/assets/images/cover/Vlogmk_scdrjjpj_batch.jpg
index d4131a5..e568332 100644
Binary files a/src/assets/images/cover/Vlogmk_scdrjjpj_batch.jpg and b/src/assets/images/cover/Vlogmk_scdrjjpj_batch.jpg differ
diff --git a/src/assets/images/cover/Vlogmk_syyzc_batch.jpg b/src/assets/images/cover/Vlogmk_syyzc_batch.jpg
index 31da037..f07d545 100644
Binary files a/src/assets/images/cover/Vlogmk_syyzc_batch.jpg and b/src/assets/images/cover/Vlogmk_syyzc_batch.jpg differ
diff --git a/src/assets/images/cover/Vlogmk_tjbjyy_batch.jpg b/src/assets/images/cover/Vlogmk_tjbjyy_batch.jpg
index b7b3997..87b5b75 100644
Binary files a/src/assets/images/cover/Vlogmk_tjbjyy_batch.jpg and b/src/assets/images/cover/Vlogmk_tjbjyy_batch.jpg differ
diff --git a/src/assets/images/cover/Vlogmk_tsybz_batch.jpg b/src/assets/images/cover/Vlogmk_tsybz_batch.jpg
index eada33f..5ace4a1 100644
Binary files a/src/assets/images/cover/Vlogmk_tsybz_batch.jpg and b/src/assets/images/cover/Vlogmk_tsybz_batch.jpg differ
diff --git a/src/assets/images/cover/Vlogmk_yhpp_batch.jpg b/src/assets/images/cover/Vlogmk_yhpp_batch.jpg
index ed7c055..ef92f75 100644
Binary files a/src/assets/images/cover/Vlogmk_yhpp_batch.jpg and b/src/assets/images/cover/Vlogmk_yhpp_batch.jpg differ
diff --git a/src/assets/images/cover/Vlogmk_ystyycbbdgd_batch.jpg b/src/assets/images/cover/Vlogmk_ystyycbbdgd_batch.jpg
index 064cb8c..01a7a30 100644
Binary files a/src/assets/images/cover/Vlogmk_ystyycbbdgd_batch.jpg and b/src/assets/images/cover/Vlogmk_ystyycbbdgd_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_czsjx_batch.jpg b/src/assets/images/cover/dygmk_czsjx_batch.jpg
index 55a5bd8..b4e5ba1 100644
Binary files a/src/assets/images/cover/dygmk_czsjx_batch.jpg and b/src/assets/images/cover/dygmk_czsjx_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_fjt_batch.jpg b/src/assets/images/cover/dygmk_fjt_batch.jpg
index e6ad965..460724b 100644
Binary files a/src/assets/images/cover/dygmk_fjt_batch.jpg and b/src/assets/images/cover/dygmk_fjt_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_gljj_batch.jpg b/src/assets/images/cover/dygmk_gljj_batch.jpg
new file mode 100644
index 0000000..b19bf41
Binary files /dev/null and b/src/assets/images/cover/dygmk_gljj_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_gx_batch.jpg b/src/assets/images/cover/dygmk_gx_batch.jpg
index f4c99a3..d7a77a0 100644
Binary files a/src/assets/images/cover/dygmk_gx_batch.jpg and b/src/assets/images/cover/dygmk_gx_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_hgydjt_batch.jpg b/src/assets/images/cover/dygmk_hgydjt_batch.jpg
index 2e3c98b..c493203 100644
Binary files a/src/assets/images/cover/dygmk_hgydjt_batch.jpg and b/src/assets/images/cover/dygmk_hgydjt_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_jjcnlks_batch.jpg b/src/assets/images/cover/dygmk_jjcnlks_batch.jpg
index bf2b532..f25e00c 100644
Binary files a/src/assets/images/cover/dygmk_jjcnlks_batch.jpg and b/src/assets/images/cover/dygmk_jjcnlks_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_jzxjj_batch.jpg b/src/assets/images/cover/dygmk_jzxjj_batch.jpg
new file mode 100644
index 0000000..04a2851
Binary files /dev/null and b/src/assets/images/cover/dygmk_jzxjj_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_kq_batch.jpg b/src/assets/images/cover/dygmk_kq_batch.jpg
new file mode 100644
index 0000000..7b0b569
Binary files /dev/null and b/src/assets/images/cover/dygmk_kq_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_lj_batch.jpg b/src/assets/images/cover/dygmk_lj_batch.jpg
index 0f3e023..1eb1af1 100644
Binary files a/src/assets/images/cover/dygmk_lj_batch.jpg and b/src/assets/images/cover/dygmk_lj_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_lxjj_batch.jpg b/src/assets/images/cover/dygmk_lxjj_batch.jpg
new file mode 100644
index 0000000..4708330
Binary files /dev/null and b/src/assets/images/cover/dygmk_lxjj_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_mmps_batch.jpg b/src/assets/images/cover/dygmk_mmps_batch.jpg
index e79ca1d..8661310 100644
Binary files a/src/assets/images/cover/dygmk_mmps_batch.jpg and b/src/assets/images/cover/dygmk_mmps_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_tqs_batch.jpg b/src/assets/images/cover/dygmk_tqs_batch.jpg
index 0319bdf..d29c192 100644
Binary files a/src/assets/images/cover/dygmk_tqs_batch.jpg and b/src/assets/images/cover/dygmk_tqs_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_txjt_batch.jpg b/src/assets/images/cover/dygmk_txjt_batch.jpg
index 71767c1..75de9a7 100644
Binary files a/src/assets/images/cover/dygmk_txjt_batch.jpg and b/src/assets/images/cover/dygmk_txjt_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_xs_batch.jpg b/src/assets/images/cover/dygmk_xs_batch.jpg
index 76ad871..6ba592d 100644
Binary files a/src/assets/images/cover/dygmk_xs_batch.jpg and b/src/assets/images/cover/dygmk_xs_batch.jpg differ
diff --git a/src/assets/images/cover/dygmk_zf_batch.jpg b/src/assets/images/cover/dygmk_zf_batch.jpg
index a9a92ce..a6ae620 100644
Binary files a/src/assets/images/cover/dygmk_zf_batch.jpg and b/src/assets/images/cover/dygmk_zf_batch.jpg differ
diff --git a/src/assets/images/cover/ftmk_bpjtynx_batch.jpg b/src/assets/images/cover/ftmk_bpjtynx_batch.jpg
index cbacbfd..a65a906 100644
Binary files a/src/assets/images/cover/ftmk_bpjtynx_batch.jpg and b/src/assets/images/cover/ftmk_bpjtynx_batch.jpg differ
diff --git a/src/assets/images/cover/ftmk_jlcutyy_batch.jpg b/src/assets/images/cover/ftmk_jlcutyy_batch.jpg
index 7b044d8..f86e183 100644
Binary files a/src/assets/images/cover/ftmk_jlcutyy_batch.jpg and b/src/assets/images/cover/ftmk_jlcutyy_batch.jpg differ
diff --git a/src/assets/images/cover/ftmk_jtzjlj_batch.jpg b/src/assets/images/cover/ftmk_jtzjlj_batch.jpg
index cb51bfe..91d073a 100644
Binary files a/src/assets/images/cover/ftmk_jtzjlj_batch.jpg and b/src/assets/images/cover/ftmk_jtzjlj_batch.jpg differ
diff --git a/src/assets/images/cover/ftmk_jwsz_batch.jpg b/src/assets/images/cover/ftmk_jwsz_batch.jpg
index 5758e7a..8418a74 100644
Binary files a/src/assets/images/cover/ftmk_jwsz_batch.jpg and b/src/assets/images/cover/ftmk_jwsz_batch.jpg differ
diff --git a/src/assets/images/cover/ftmk_jzjjjq_batch.jpg b/src/assets/images/cover/ftmk_jzjjjq_batch.jpg
index a41aa97..c3e29db 100644
Binary files a/src/assets/images/cover/ftmk_jzjjjq_batch.jpg and b/src/assets/images/cover/ftmk_jzjjjq_batch.jpg differ
diff --git a/src/assets/images/cover/ftmk_sczmp_batch.jpg b/src/assets/images/cover/ftmk_sczmp_batch.jpg
index 1ea52ff..ed01e2a 100644
Binary files a/src/assets/images/cover/ftmk_sczmp_batch.jpg and b/src/assets/images/cover/ftmk_sczmp_batch.jpg differ
diff --git a/src/assets/images/cover/ftmk_shjjlc_batch.jpg b/src/assets/images/cover/ftmk_shjjlc_batch.jpg
index eb0c01b..f857a4e 100644
Binary files a/src/assets/images/cover/ftmk_shjjlc_batch.jpg and b/src/assets/images/cover/ftmk_shjjlc_batch.jpg differ
diff --git a/src/assets/images/cover/ftmk_sytbysl_batch.jpg b/src/assets/images/cover/ftmk_sytbysl_batch.jpg
index 6b35d06..c5a4ebb 100644
Binary files a/src/assets/images/cover/ftmk_sytbysl_batch.jpg and b/src/assets/images/cover/ftmk_sytbysl_batch.jpg differ
diff --git a/src/assets/images/cover/ftmk_txjtdzy_batch.jpg b/src/assets/images/cover/ftmk_txjtdzy_batch.jpg
index c41d0f9..9f01823 100644
Binary files a/src/assets/images/cover/ftmk_txjtdzy_batch.jpg and b/src/assets/images/cover/ftmk_txjtdzy_batch.jpg differ
diff --git a/src/assets/images/cover/ftmk_ydjtdzy_batch.jpg b/src/assets/images/cover/ftmk_ydjtdzy_batch.jpg
index 125f76c..6c38a60 100644
Binary files a/src/assets/images/cover/ftmk_ydjtdzy_batch.jpg and b/src/assets/images/cover/ftmk_ydjtdzy_batch.jpg differ
diff --git a/src/assets/images/cover/ftmk_yx_batch.jpg b/src/assets/images/cover/ftmk_yx_batch.jpg
index 284689a..7adefba 100644
Binary files a/src/assets/images/cover/ftmk_yx_batch.jpg and b/src/assets/images/cover/ftmk_yx_batch.jpg differ
diff --git a/src/assets/images/cover/ftmk_zxyz_batch.jpg b/src/assets/images/cover/ftmk_zxyz_batch.jpg
index aef6a3c..c2a8581 100644
Binary files a/src/assets/images/cover/ftmk_zxyz_batch.jpg and b/src/assets/images/cover/ftmk_zxyz_batch.jpg differ
diff --git a/src/assets/images/cover/jiaoben.jpg b/src/assets/images/cover/jiaoben.jpg
index c85d6d1..508ee71 100644
Binary files a/src/assets/images/cover/jiaoben.jpg and b/src/assets/images/cover/jiaoben.jpg differ
diff --git a/src/assets/images/cover/start.jpg b/src/assets/images/cover/start.jpg
new file mode 100644
index 0000000..c0f1998
Binary files /dev/null and b/src/assets/images/cover/start.jpg differ
diff --git a/src/assets/images/cover/xinshou_guangdejichurenzhi.jpg b/src/assets/images/cover/xinshou_guangdejichurenzhi.jpg
index 26e1bcb..70f8656 100644
Binary files a/src/assets/images/cover/xinshou_guangdejichurenzhi.jpg and b/src/assets/images/cover/xinshou_guangdejichurenzhi.jpg differ
diff --git a/src/assets/images/cover/xinshou_guangdesidashuxing.jpg b/src/assets/images/cover/xinshou_guangdesidashuxing.jpg
index 168af3a..c74d0ec 100644
Binary files a/src/assets/images/cover/xinshou_guangdesidashuxing.jpg and b/src/assets/images/cover/xinshou_guangdesidashuxing.jpg differ
diff --git a/src/assets/images/cover/xinshou_shenqideweijusheying.jpg b/src/assets/images/cover/xinshou_shenqideweijusheying.jpg
index 8f85f80..3049306 100644
Binary files a/src/assets/images/cover/xinshou_shenqideweijusheying.jpg and b/src/assets/images/cover/xinshou_shenqideweijusheying.jpg differ
diff --git a/src/assets/images/cover/xinshou_shoujishexiangtoujieshao.jpg b/src/assets/images/cover/xinshou_shoujishexiangtoujieshao.jpg
index e22ff8d..71c8644 100644
Binary files a/src/assets/images/cover/xinshou_shoujishexiangtoujieshao.jpg and b/src/assets/images/cover/xinshou_shoujishexiangtoujieshao.jpg differ
diff --git a/src/assets/images/cover/xinshou_yunjingdejibenfangshi.jpg b/src/assets/images/cover/xinshou_yunjingdejibenfangshi.jpg
index d3dbd5c..6815704 100644
Binary files a/src/assets/images/cover/xinshou_yunjingdejibenfangshi.jpg and b/src/assets/images/cover/xinshou_yunjingdejibenfangshi.jpg differ
diff --git a/src/assets/images/cover/xinshou_zhengquedeshoujipaishe.jpg b/src/assets/images/cover/xinshou_zhengquedeshoujipaishe.jpg
index b686d38..abee406 100644
Binary files a/src/assets/images/cover/xinshou_zhengquedeshoujipaishe.jpg and b/src/assets/images/cover/xinshou_zhengquedeshoujipaishe.jpg differ
diff --git a/src/assets/images/cover/xsdh_csjyzybjmhgn_batch.jpg b/src/assets/images/cover/xsdh_csjyzybjmhgn_batch.jpg
index c41c40a..e718beb 100644
Binary files a/src/assets/images/cover/xsdh_csjyzybjmhgn_batch.jpg and b/src/assets/images/cover/xsdh_csjyzybjmhgn_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_djmldyjsy_batch.jpg b/src/assets/images/cover/xsdh_djmldyjsy_batch.jpg
index d62f92a..d0ad97f 100644
Binary files a/src/assets/images/cover/xsdh_djmldyjsy_batch.jpg and b/src/assets/images/cover/xsdh_djmldyjsy_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_gjzgnyfxj_batch.jpg b/src/assets/images/cover/xsdh_gjzgnyfxj_batch.jpg
index 1ac9447..af3fbe0 100644
Binary files a/src/assets/images/cover/xsdh_gjzgnyfxj_batch.jpg and b/src/assets/images/cover/xsdh_gjzgnyfxj_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_hhmsgnyfxj_batch.jpg b/src/assets/images/cover/xsdh_hhmsgnyfxj_batch.jpg
index 11caab9..4c8af3f 100644
Binary files a/src/assets/images/cover/xsdh_hhmsgnyfxj_batch.jpg and b/src/assets/images/cover/xsdh_hhmsgnyfxj_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_jbgnjs_batch.jpg b/src/assets/images/cover/xsdh_jbgnjs_batch.jpg
index 3fbe492..dfefe15 100644
Binary files a/src/assets/images/cover/xsdh_jbgnjs_batch.jpg and b/src/assets/images/cover/xsdh_jbgnjs_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_jzgtf_batch.jpg b/src/assets/images/cover/xsdh_jzgtf_batch.jpg
index 8dcd425..4125abd 100644
Binary files a/src/assets/images/cover/xsdh_jzgtf_batch.jpg and b/src/assets/images/cover/xsdh_jzgtf_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_mbgnyfxj_batch.jpg b/src/assets/images/cover/xsdh_mbgnyfxj_batch.jpg
index 18cfe6a..bf26137 100644
Binary files a/src/assets/images/cover/xsdh_mbgnyfxj_batch.jpg and b/src/assets/images/cover/xsdh_mbgnyfxj_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_psdhjsj_batch.jpg b/src/assets/images/cover/xsdh_psdhjsj_batch.jpg
index 16d048e..3b86fb5 100644
Binary files a/src/assets/images/cover/xsdh_psdhjsj_batch.jpg and b/src/assets/images/cover/xsdh_psdhjsj_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_qxbsgnyfxj_batch.jpg b/src/assets/images/cover/xsdh_qxbsgnyfxj_batch.jpg
index 77410c3..7be64a7 100644
Binary files a/src/assets/images/cover/xsdh_qxbsgnyfxj_batch.jpg and b/src/assets/images/cover/xsdh_qxbsgnyfxj_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_rhghmts_batch.jpg b/src/assets/images/cover/xsdh_rhghmts_batch.jpg
index 7f2ffb7..15dfc9d 100644
Binary files a/src/assets/images/cover/xsdh_rhghmts_batch.jpg and b/src/assets/images/cover/xsdh_rhghmts_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_rhgspksszm_batch.jpg b/src/assets/images/cover/xsdh_rhgspksszm_batch.jpg
index 0c84250..b5f6b51 100644
Binary files a/src/assets/images/cover/xsdh_rhgspksszm_batch.jpg and b/src/assets/images/cover/xsdh_rhgspksszm_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_rhxzgt_batch.jpg b/src/assets/images/cover/xsdh_rhxzgt_batch.jpg
index 5d03495..1e0b47b 100644
Binary files a/src/assets/images/cover/xsdh_rhxzgt_batch.jpg and b/src/assets/images/cover/xsdh_rhxzgt_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_sjmdz_batch.jpg b/src/assets/images/cover/xsdh_sjmdz_batch.jpg
index 4d2acea..9d73a88 100644
Binary files a/src/assets/images/cover/xsdh_sjmdz_batch.jpg and b/src/assets/images/cover/xsdh_sjmdz_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_sjxdyfxj_batch.jpg b/src/assets/images/cover/xsdh_sjxdyfxj_batch.jpg
index 6cbb291..3c56b01 100644
Binary files a/src/assets/images/cover/xsdh_sjxdyfxj_batch.jpg and b/src/assets/images/cover/xsdh_sjxdyfxj_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_ypdgnyyhcl_batch.jpg b/src/assets/images/cover/xsdh_ypdgnyyhcl_batch.jpg
index ba1a3b1..a15f240 100644
Binary files a/src/assets/images/cover/xsdh_ypdgnyyhcl_batch.jpg and b/src/assets/images/cover/xsdh_ypdgnyyhcl_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_yssy_batch.jpg b/src/assets/images/cover/xsdh_yssy_batch.jpg
index a8802fd..5857782 100644
Binary files a/src/assets/images/cover/xsdh_yssy_batch.jpg and b/src/assets/images/cover/xsdh_yssy_batch.jpg differ
diff --git a/src/assets/images/cover/xsdh_zctxtzgnxj_batch.jpg b/src/assets/images/cover/xsdh_zctxtzgnxj_batch.jpg
index 25fdea1..ad06542 100644
Binary files a/src/assets/images/cover/xsdh_zctxtzgnxj_batch.jpg and b/src/assets/images/cover/xsdh_zctxtzgnxj_batch.jpg differ
diff --git a/src/assets/images/film/任务取景框背景.png b/src/assets/images/film/任务取景框背景.png
index 26bd3d4..b92cdb7 100644
Binary files a/src/assets/images/film/任务取景框背景.png and b/src/assets/images/film/任务取景框背景.png differ
diff --git a/src/assets/images/film/分镜制作-拍摄分镜.png b/src/assets/images/film/分镜制作-拍摄分镜.png
index f9afef7..e7126e8 100644
Binary files a/src/assets/images/film/分镜制作-拍摄分镜.png and b/src/assets/images/film/分镜制作-拍摄分镜.png differ
diff --git a/src/assets/images/film/脚本编写-拍摄脚本.png b/src/assets/images/film/脚本编写-拍摄脚本.png
index bd46fbe..85e0676 100644
Binary files a/src/assets/images/film/脚本编写-拍摄脚本.png and b/src/assets/images/film/脚本编写-拍摄脚本.png differ
diff --git a/src/assets/images/home/action/学习进度入口.png b/src/assets/images/home/action/学习进度入口.png
index b59e125..1f6e169 100644
Binary files a/src/assets/images/home/action/学习进度入口.png and b/src/assets/images/home/action/学习进度入口.png differ
diff --git a/src/assets/images/home/action/首页锁.png b/src/assets/images/home/action/首页锁.png
new file mode 100644
index 0000000..c5214ad
Binary files /dev/null and b/src/assets/images/home/action/首页锁.png differ
diff --git a/src/assets/images/home/stuy/vlog-亮.png b/src/assets/images/home/stuy/vlog-亮.png
new file mode 100644
index 0000000..09f4125
Binary files /dev/null and b/src/assets/images/home/stuy/vlog-亮.png differ
diff --git a/src/assets/images/home/stuy/vlog-灰.png b/src/assets/images/home/stuy/vlog-灰.png
new file mode 100644
index 0000000..540f946
Binary files /dev/null and b/src/assets/images/home/stuy/vlog-灰.png differ
diff --git a/src/assets/images/home/stuy/学习进度底图.png b/src/assets/images/home/stuy/学习进度底图.png
index 9b9fcbf..74ff2fc 100644
Binary files a/src/assets/images/home/stuy/学习进度底图.png and b/src/assets/images/home/stuy/学习进度底图.png differ
diff --git a/src/assets/images/home/stuy/学习进度底图_.png b/src/assets/images/home/stuy/学习进度底图_.png
deleted file mode 100644
index b518f4e..0000000
Binary files a/src/assets/images/home/stuy/学习进度底图_.png and /dev/null differ
diff --git a/src/assets/images/home/stuy/新手导航-亮.png b/src/assets/images/home/stuy/新手导航-亮.png
new file mode 100644
index 0000000..578c270
Binary files /dev/null and b/src/assets/images/home/stuy/新手导航-亮.png differ
diff --git a/src/assets/images/home/stuy/新手导航-灰.png b/src/assets/images/home/stuy/新手导航-灰.png
new file mode 100644
index 0000000..12892ab
Binary files /dev/null and b/src/assets/images/home/stuy/新手导航-灰.png differ
diff --git a/src/assets/images/home/stuy/电影-亮.png b/src/assets/images/home/stuy/电影-亮.png
new file mode 100644
index 0000000..4e9829e
Binary files /dev/null and b/src/assets/images/home/stuy/电影-亮.png differ
diff --git a/src/assets/images/home/stuy/电影-灰.png b/src/assets/images/home/stuy/电影-灰.png
new file mode 100644
index 0000000..c0b6a01
Binary files /dev/null and b/src/assets/images/home/stuy/电影-灰.png differ
diff --git a/src/assets/images/home/stuy/访谈-亮.png b/src/assets/images/home/stuy/访谈-亮.png
new file mode 100644
index 0000000..ce8a500
Binary files /dev/null and b/src/assets/images/home/stuy/访谈-亮.png differ
diff --git a/src/assets/images/home/stuy/访谈-灰.png b/src/assets/images/home/stuy/访谈-灰.png
new file mode 100644
index 0000000..0fda47c
Binary files /dev/null and b/src/assets/images/home/stuy/访谈-灰.png differ
diff --git a/src/assets/images/home/stuy/通关证书-已获取.png b/src/assets/images/home/stuy/通关证书-已获取.png
new file mode 100644
index 0000000..5684487
Binary files /dev/null and b/src/assets/images/home/stuy/通关证书-已获取.png differ
diff --git a/src/assets/images/home/stuy/通关证书-暂未获取.png b/src/assets/images/home/stuy/通关证书-暂未获取.png
new file mode 100644
index 0000000..7e5fe61
Binary files /dev/null and b/src/assets/images/home/stuy/通关证书-暂未获取.png differ
diff --git a/src/assets/images/interview/img/育人故事配音.png b/src/assets/images/interview/img/育人故事配音.png
index 427e421..0a98ca6 100644
Binary files a/src/assets/images/interview/img/育人故事配音.png and b/src/assets/images/interview/img/育人故事配音.png differ
diff --git a/src/assets/images/interview/work/任务取景框背景.png b/src/assets/images/interview/work/任务取景框背景.png
index 40fd018..3153f7c 100644
Binary files a/src/assets/images/interview/work/任务取景框背景.png and b/src/assets/images/interview/work/任务取景框背景.png differ
diff --git a/src/assets/images/skill/icon/ai技术应用.png b/src/assets/images/skill/icon/ai技术应用.png
index 47ca6ac..e4ed4db 100644
Binary files a/src/assets/images/skill/icon/ai技术应用.png and b/src/assets/images/skill/icon/ai技术应用.png differ
diff --git a/src/assets/images/skill/icon/光线.png b/src/assets/images/skill/icon/光线.png
index f9c4d69..7e09407 100644
Binary files a/src/assets/images/skill/icon/光线.png and b/src/assets/images/skill/icon/光线.png differ
diff --git a/src/assets/images/skill/icon/光线运用.png b/src/assets/images/skill/icon/光线运用.png
index f5d6026..b973167 100644
Binary files a/src/assets/images/skill/icon/光线运用.png and b/src/assets/images/skill/icon/光线运用.png differ
diff --git a/src/assets/images/skill/icon/剪辑技巧.png b/src/assets/images/skill/icon/剪辑技巧.png
index c293608..2d22035 100644
Binary files a/src/assets/images/skill/icon/剪辑技巧.png and b/src/assets/images/skill/icon/剪辑技巧.png differ
diff --git a/src/assets/images/skill/icon/包装.png b/src/assets/images/skill/icon/包装.png
index bc495e2..8f4041b 100644
Binary files a/src/assets/images/skill/icon/包装.png and b/src/assets/images/skill/icon/包装.png differ
diff --git a/src/assets/images/skill/icon/思路提点.png b/src/assets/images/skill/icon/思路提点.png
index 30bb71d..c2eedd6 100644
Binary files a/src/assets/images/skill/icon/思路提点.png and b/src/assets/images/skill/icon/思路提点.png differ
diff --git a/src/assets/images/skill/icon/拍摄技巧.png b/src/assets/images/skill/icon/拍摄技巧.png
index e4b12d4..a95d665 100644
Binary files a/src/assets/images/skill/icon/拍摄技巧.png and b/src/assets/images/skill/icon/拍摄技巧.png differ
diff --git a/src/assets/images/skill/icon/景别.png b/src/assets/images/skill/icon/景别.png
index 23806f4..bff6573 100644
Binary files a/src/assets/images/skill/icon/景别.png and b/src/assets/images/skill/icon/景别.png differ
diff --git a/src/assets/images/skill/icon/构图.png b/src/assets/images/skill/icon/构图.png
index d753f9c..ee1d8d2 100644
Binary files a/src/assets/images/skill/icon/构图.png and b/src/assets/images/skill/icon/构图.png differ
diff --git a/src/assets/images/skill/icon/案例合集.png b/src/assets/images/skill/icon/案例合集.png
index 5504c3c..31f9c32 100644
Binary files a/src/assets/images/skill/icon/案例合集.png and b/src/assets/images/skill/icon/案例合集.png differ
diff --git a/src/assets/images/skill/icon/版权意识.png b/src/assets/images/skill/icon/版权意识.png
index 3182f07..f89c335 100644
Binary files a/src/assets/images/skill/icon/版权意识.png and b/src/assets/images/skill/icon/版权意识.png differ
diff --git a/src/assets/images/skill/icon/画面构图.png b/src/assets/images/skill/icon/画面构图.png
index 0290ddf..49820ce 100644
Binary files a/src/assets/images/skill/icon/画面构图.png and b/src/assets/images/skill/icon/画面构图.png differ
diff --git a/src/assets/images/skill/icon/素材管理.png b/src/assets/images/skill/icon/素材管理.png
index 22443e9..36646ee 100644
Binary files a/src/assets/images/skill/icon/素材管理.png and b/src/assets/images/skill/icon/素材管理.png differ
diff --git a/src/assets/images/skill/icon/脚本与分镜制作.png b/src/assets/images/skill/icon/脚本与分镜制作.png
index 08dee9b..957f755 100644
Binary files a/src/assets/images/skill/icon/脚本与分镜制作.png and b/src/assets/images/skill/icon/脚本与分镜制作.png differ
diff --git a/src/assets/images/skill/icon/蒙太奇剪辑.png b/src/assets/images/skill/icon/蒙太奇剪辑.png
index 8a26be4..3f679e2 100644
Binary files a/src/assets/images/skill/icon/蒙太奇剪辑.png and b/src/assets/images/skill/icon/蒙太奇剪辑.png differ
diff --git a/src/assets/images/skill/icon/设备准备.png b/src/assets/images/skill/icon/设备准备.png
index 088319e..7391c6e 100644
Binary files a/src/assets/images/skill/icon/设备准备.png and b/src/assets/images/skill/icon/设备准备.png differ
diff --git a/src/assets/images/skill/icon/调色.png b/src/assets/images/skill/icon/调色.png
index 863662e..bc306fa 100644
Binary files a/src/assets/images/skill/icon/调色.png and b/src/assets/images/skill/icon/调色.png differ
diff --git a/src/assets/images/skill/icon/运镜.png b/src/assets/images/skill/icon/运镜.png
index 8fe6cc9..8cb788d 100644
Binary files a/src/assets/images/skill/icon/运镜.png and b/src/assets/images/skill/icon/运镜.png differ
diff --git a/src/assets/images/skill/icon/运镜技巧.png b/src/assets/images/skill/icon/运镜技巧.png
index bc21f01..4c877c7 100644
Binary files a/src/assets/images/skill/icon/运镜技巧.png and b/src/assets/images/skill/icon/运镜技巧.png differ
diff --git a/src/assets/images/skill/icon/选题与构思.png b/src/assets/images/skill/icon/选题与构思.png
index 475ab5e..ce7f695 100644
Binary files a/src/assets/images/skill/icon/选题与构思.png and b/src/assets/images/skill/icon/选题与构思.png differ
diff --git a/src/assets/images/skill/icon/音效.png b/src/assets/images/skill/icon/音效.png
index da76458..c19528a 100644
Binary files a/src/assets/images/skill/icon/音效.png and b/src/assets/images/skill/icon/音效.png differ
diff --git a/src/assets/images/work/bg.png b/src/assets/images/work/bg.png
index 9d6894f..3ca013c 100644
Binary files a/src/assets/images/work/bg.png and b/src/assets/images/work/bg.png differ
diff --git a/src/assets/images/work/未选中_带三角.png b/src/assets/images/work/未选中_带三角.png
index be10b2f..9c78c51 100644
Binary files a/src/assets/images/work/未选中_带三角.png and b/src/assets/images/work/未选中_带三角.png differ
diff --git a/src/components/AnchoredProgressBar/AnchoredProgressBar.vue b/src/components/AnchoredProgressBar/AnchoredProgressBar.vue
deleted file mode 100644
index b3476cf..0000000
--- a/src/components/AnchoredProgressBar/AnchoredProgressBar.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { computeSegmentLayout } from './computeSegmentLayout'
-import type { AnchoredProgressBarProps } from './types'
-
-defineOptions({
-  name: 'AnchoredProgressBar',
-})
-
-const props = withDefaults(defineProps<AnchoredProgressBarProps>(), {
-  min: 0,
-  max: 100,
-  segments: () => [],
-  trackClass: 'bg-black/20',
-  fillClass: 'bg-[#31effa] shadow-[0_0_26px_rgba(49,239,250,0.95)]',
-  segmentClass: '',
-  showDividers: true,
-})
-
-const clamp = (value: number, lower: number, upper: number) =>
-  Math.min(Math.max(value, lower), upper)
-
-const progressPercent = computed(() => {
-  const range = props.max - props.min
-  if (range <= 0) return 0
-  return clamp(((props.progress - props.min) / range) * 100, 0, 100)
-})
-
-const segmentLayout = computed(() =>
-  computeSegmentLayout(props.segments, props.min, props.max),
-)
-</script>
-
-<template>
-  <div class="relative h-full w-full">
-    <div
-      class="absolute inset-0 overflow-hidden"
-      :class="trackClass"
-    >
-      <div
-        v-for="segment in segmentLayout"
-        :key="segment.id"
-        class="absolute top-0 h-full"
-        :class="[segmentClass, segment.className]"
-        :style="{
-          left: `${segment.left}%`,
-          width: `${segment.width}%`,
-          ...(segment.style ?? {}),
-        }"
-      ></div>
-      <div
-        class="absolute left-0 top-0 h-full transition-all duration-700 ease-out"
-        :class="fillClass"
-        :style="{ width: `${progressPercent}%` }"
-      ></div>
-    </div>
-    <template v-if="showDividers">
-      <div
-        v-for="segment in segmentLayout.slice(0, -1)"
-        :key="`${segment.id}-divider`"
-        class="pointer-events-none absolute -translate-x-1/2 rounded-[3px] bg-white"
-        :style="{
-          left: `${segment.left + segment.width}%`,
-          top: '-15%',
-          height: '130%',
-          width: '8px',
-        }"
-      ></div>
-    </template>
-    <slot
-      :segments="segmentLayout"
-      :progress="progressPercent"
-    />
-  </div>
-</template>
diff --git a/src/components/DownloadButton.vue b/src/components/DownloadButton.vue
new file mode 100644
index 0000000..49299f5
--- /dev/null
+++ b/src/components/DownloadButton.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  imageUrl: string
+  fileName?: string
+}>()
+
+const handleDownload = () => {
+  const link = document.createElement('a')
+  link.href = props.imageUrl
+  link.download = props.fileName || '思路提点.png'
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+</script>
+
+<template>
+  <button
+    class="download-btn absolute right-4 bottom-4 z-10 w-14 h-14 bg-white/90 hover:bg-white rounded-full flex items-center justify-center transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-110"
+    @click.stop="handleDownload"
+    title="下载思路提点"
+  >
+    <svg
+      width="28"
+      height="28"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="text-blue-500"
+    >
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line
+        x1="12"
+        y1="15"
+        x2="12"
+        y2="3"
+      />
+    </svg>
+  </button>
+</template>
+
+<style scoped>
+.download-btn {
+  backdrop-filter: blur(4px);
+}
+</style>
diff --git a/src/components/ProgressBar/ProgressBar.vue b/src/components/ProgressBar/ProgressBar.vue
index a07cc62..45bc647 100644
--- a/src/components/ProgressBar/ProgressBar.vue
+++ b/src/components/ProgressBar/ProgressBar.vue
@@ -183,7 +183,7 @@ const emit = defineEmits<Emits>()
 // 步骤：1=前期准备, 2=中期拍摄, 3=后期剪辑, 4=实战操作台
 // 当 completedStep >= 3（即完成第3步）时，解锁右侧完成按钮
 const canComplete = computed(() => props.completedStep >= 3)
-const isPracticeCompleted = computed(() => props.completedStep >= 4)
+const isPracticeCompleted = computed(() => props.completedStep >= 5)
 const completeButtonImage = computed(() => {
   if (!canComplete.value)
     return IMAGE_PATHS.PROGRESS_BAR.COMPLETE_BUTTON_DISABLED
diff --git a/src/components/QuestionQuiz/QuestionQuiz.vue b/src/components/QuestionQuiz/QuestionQuiz.vue
index 7365b96..5b89b5a 100644
--- a/src/components/QuestionQuiz/QuestionQuiz.vue
+++ b/src/components/QuestionQuiz/QuestionQuiz.vue
@@ -36,9 +36,30 @@ const emit = defineEmits<{
 const currentIndex = ref(0)
 const selectedOptionId = ref<string | null>(null) // 单选题选中的选项
 const selectedOptionIds = ref<string[]>([]) // 多选题选中的选项数组
+const wrongAnswerCount = ref(0) // 当前题答错次数
+const showWrongFeedback = ref(false) // 是否显示答错提示
 const showErrorExplanation = ref(false) // 是否显示错误解析
 const showCorrectFeedback = ref(false)
 
+const VIDEO_EXTENSIONS = [
+  '.mp4',
+  '.mov',
+  '.avi',
+  '.webm',
+  '.mkv',
+  '.flv',
+  '.wmv',
+]
+const IMAGE_EXTENSIONS = [
+  '.png',
+  '.jpg',
+  '.jpeg',
+  '.gif',
+  '.webp',
+  '.svg',
+  '.bmp',
+]
+
 const total = computed(() => props.questions.length)
 const currentQuestion = computed(() => props.questions[currentIndex.value])
 const hasMedia = computed(() => !!currentQuestion.value?.mediaSrc)
@@ -66,37 +87,96 @@ const hasMoreThanFourOptions = computed(() => {
 watch(currentIndex, () => {
   selectedOptionId.value = null
   selectedOptionIds.value = []
+  wrongAnswerCount.value = 0
+  showWrongFeedback.value = false
   showErrorExplanation.value = false
   showCorrectFeedback.value = false
 })
 
 // 通过文件后缀判断媒体类型
+const getFileExtension = (src: string): string => {
+  const cleanSrc = src.split('?')[0].split('#')[0].toLowerCase()
+  const dotIndex = cleanSrc.lastIndexOf('.')
+  return dotIndex > -1 ? cleanSrc.slice(dotIndex) : ''
+}
+
 const isVideo = (src: string): boolean => {
-  const videoExtensions = [
-    '.mp4',
-    '.mov',
-    '.avi',
-    '.webm',
-    '.mkv',
-    '.flv',
-    '.wmv',
-  ]
-  const lowerSrc = src.toLowerCase()
-  return videoExtensions.some((ext) => lowerSrc.endsWith(ext))
+  return VIDEO_EXTENSIONS.includes(getFileExtension(src))
 }
 
 const isImage = (src: string): boolean => {
-  const imageExtensions = [
-    '.png',
-    '.jpg',
-    '.jpeg',
-    '.gif',
-    '.webp',
-    '.svg',
-    '.bmp',
-  ]
-  const lowerSrc = src.toLowerCase()
-  return imageExtensions.some((ext) => lowerSrc.endsWith(ext))
+  return IMAGE_EXTENSIONS.includes(getFileExtension(src))
+}
+
+const isOptionSelected = (optionId: string) => {
+  return isMultiple.value
+    ? selectedOptionIds.value.includes(optionId)
+    : selectedOptionId.value === optionId
+}
+
+const isCorrectOption = (optionId: string) => {
+  const q = currentQuestion.value
+  if (!q) return false
+
+  return isMultiple.value
+    ? (q.correctOptionIds?.includes(optionId) ?? false)
+    : optionId === q.correctOptionId
+}
+
+const getOptionClass = (optionId: string) => {
+  const selected = isOptionSelected(optionId)
+  const correct = isCorrectOption(optionId)
+
+  if (showErrorExplanation.value) {
+    if (selected && correct) {
+      return 'border-emerald-400 bg-emerald-500/30 shadow-lg shadow-emerald-500/30'
+    }
+
+    if (correct) {
+      return 'border-emerald-400 bg-emerald-500/20 shadow-lg shadow-emerald-500/20'
+    }
+
+    if (selected && !correct) {
+      return 'border-red-400 bg-red-500/20 shadow-lg shadow-red-500/20'
+    }
+
+    return 'border-white/15 bg-white/5 hover:bg-white/10 hover:border-white/25'
+  }
+
+  if (showWrongFeedback.value && selected) {
+    return 'border-red-400 bg-red-500/20 shadow-lg shadow-red-500/20'
+  }
+
+  if (selected) {
+    return 'border-emerald-400 bg-emerald-500/20 shadow-lg shadow-emerald-500/20'
+  }
+
+  return 'border-white/15 bg-white/5 hover:bg-white/10 hover:border-white/25'
+}
+
+const hasSelectedAnswer = () => {
+  return isMultiple.value
+    ? selectedOptionIds.value.length > 0
+    : !!selectedOptionId.value
+}
+
+const isCurrentAnswerCorrect = () => {
+  const q = currentQuestion.value
+  if (!q) return false
+
+  if (isMultiple.value) {
+    const correctIds = q.correctOptionIds || []
+    const selectedIds = selectedOptionIds.value
+
+    if (correctIds.length === 0) return false
+    if (selectedIds.length !== correctIds.length) return false
+
+    const correctSet = new Set(correctIds)
+    return selectedIds.every((id) => correctSet.has(id))
+  }
+
+  const isGuideQuestion = q.correctOptionId === '' // 引导题判断
+  return isGuideQuestion || selectedOptionId.value === q.correctOptionId
 }
 
 const handleOptionClick = (optionId: string) => {
@@ -114,73 +194,41 @@ const handleOptionClick = (optionId: string) => {
     // 单选题：直接选中
     selectedOptionId.value = optionId
   }
-  // 选择新选项时隐藏错误解析
+  // 选择新选项时隐藏错误提示和解析
+  showWrongFeedback.value = false
   showErrorExplanation.value = false
   showCorrectFeedback.value = false
 }
 
-// 交互规则：选对进入下一步，选错显示解析；最后一题选对触发 complete 事件
-// 如果 correctOptionId 为空字符串，表示引导题，任意选择都可进入下一题
-const handleSubmit = async () => {
-  const q = currentQuestion.value
-
-  if (showCorrectFeedback.value) return
-
-  if (isMultiple.value) {
-    // 多选题：必须选择至少一个选项
-    if (selectedOptionIds.value.length === 0) return
-
-    // 多选题：必须选择所有正确答案，且不能选择错误答案
-    const correctIds = q.correctOptionIds || []
-    const selectedSet = new Set(selectedOptionIds.value)
-    const correctSet = new Set(correctIds)
-
-    // 检查是否选择了所有正确答案
-    const hasAllCorrect = correctIds.every((id) => selectedSet.has(id))
-    // 检查是否只选择了正确答案（没有选择错误答案）
-    const onlyCorrect = selectedOptionIds.value.every((id) =>
-      correctSet.has(id),
-    )
-
-    const isCorrect =
-      hasAllCorrect &&
-      onlyCorrect &&
-      selectedOptionIds.value.length === correctIds.length
-
-    if (!isCorrect) {
-      // 答错时显示解析
-      showErrorExplanation.value = true
-      return
-    }
-  } else {
-    // 单选题
-    if (!selectedOptionId.value) return
-
-    const isGuideQuestion = q.correctOptionId === '' // 引导题判断
-    const isCorrect =
-      isGuideQuestion || selectedOptionId.value === q.correctOptionId
-
-    if (!isCorrect) {
-      // 答错时显示解析
-      showErrorExplanation.value = true
-      return
-    }
-  }
-
-  // 答对时重置错误解析状态
+const goNextQuestion = async () => {
+  showWrongFeedback.value = false
   showErrorExplanation.value = false
   showCorrectFeedback.value = true
   await new Promise((resolve) => setTimeout(resolve, 800))
 
   if (currentIndex.value < total.value - 1) {
     currentIndex.value += 1
-    selectedOptionId.value = null
-    selectedOptionIds.value = []
   } else {
     showCorrectFeedback.value = false
     emit('complete')
   }
 }
+
+// 交互规则：选对进入下一步，选错显示解析；最后一题选对触发 complete 事件
+// 如果 correctOptionId 为空字符串，表示引导题，任意选择都可进入下一题
+const handleSubmit = async () => {
+  if (showCorrectFeedback.value) return
+  if (!hasSelectedAnswer()) return
+
+  if (!isCurrentAnswerCorrect()) {
+    wrongAnswerCount.value += 1
+    showWrongFeedback.value = true
+    showErrorExplanation.value = wrongAnswerCount.value >= 3
+    return
+  }
+
+  await goNextQuestion()
+}
 </script>
 
 <template>
@@ -234,46 +282,13 @@ const handleSubmit = async () => {
               :key="opt.id"
               type="button"
               class="w-full text-left px-5 py-4 rounded-xl border transition-all duration-200 text-2xl leading-6"
-              :class="[
-                (
-                  isMultiple
-                    ? selectedOptionIds.includes(opt.id)
-                    : selectedOptionId === opt.id
-                )
-                  ? showErrorExplanation &&
-                    (isMultiple
-                      ? currentQuestion.correctOptionIds?.includes(opt.id)
-                      : opt.id === currentQuestion.correctOptionId)
-                    ? 'border-emerald-400 bg-emerald-500/30 shadow-lg shadow-emerald-500/30'
-                    : showErrorExplanation &&
-                        (isMultiple
-                          ? !currentQuestion.correctOptionIds?.includes(
-                              opt.id,
-                            ) && selectedOptionIds.includes(opt.id)
-                          : opt.id === selectedOptionId &&
-                            opt.id !== currentQuestion.correctOptionId)
-                      ? 'border-red-400 bg-red-500/20 shadow-lg shadow-red-500/20'
-                      : 'border-emerald-400 bg-emerald-500/20 shadow-lg shadow-emerald-500/20'
-                  : showErrorExplanation &&
-                      (isMultiple
-                        ? currentQuestion.correctOptionIds?.includes(opt.id)
-                        : opt.id === currentQuestion.correctOptionId)
-                    ? 'border-emerald-400 bg-emerald-500/20 shadow-lg shadow-emerald-500/20'
-                    : 'border-white/15 bg-white/5 hover:bg-white/10 hover:border-white/25',
-              ]"
+              :class="getOptionClass(opt.id)"
               @click="handleOptionClick(opt.id)"
             >
               <span class="font-semibold mr-2">
                 {{ opt.id.toUpperCase() }}.
               </span>
               <span>{{ opt.label }}</span>
-              <!-- 多选题显示复选框样式 -->
-              <span
-                v-if="isMultiple"
-                class="ml-auto text-emerald-400"
-              >
-                {{ selectedOptionIds.includes(opt.id) ? '✓' : '' }}
-              </span>
             </button>
           </div>
 
@@ -287,6 +302,16 @@ const handleSubmit = async () => {
             </div>
           </Transition>
 
+          <!-- 错误选择提示 -->
+          <Transition name="fade">
+            <div
+              v-if="showWrongFeedback && !showErrorExplanation"
+              class="mt-4 p-6 rounded-xl bg-red-500/20 border border-red-400/30 text-2xl font-semibold text-red-100"
+            >
+              回答错误，请再试一次
+            </div>
+          </Transition>
+
           <!-- 错误解析提示 -->
           <Transition name="fade">
             <div
diff --git a/src/components/Switcher/ImageSwitchList.vue b/src/components/Switcher/ImageSwitchList.vue
index 1444cf1..eee75ad 100644
--- a/src/components/Switcher/ImageSwitchList.vue
+++ b/src/components/Switcher/ImageSwitchList.vue
@@ -7,7 +7,9 @@
         itemClass,
         item.key == modelValue
           ? 'translate-x-[-25%] brightness-100'
-          : 'translate-x-[0] brightness-50',
+          : item.completed
+            ? 'translate-x-[0] brightness-100'
+            : 'translate-x-[0] brightness-50',
         'img-switch-item transition-all duration-500',
         `img-switch-item--${item.key}`,
       ]"
@@ -18,7 +20,7 @@
       <span
         v-if="item.label"
         :class="[
-          'ml-6 text-white [text-shadow:5px_5px_5px_rgba(0,0,0,0.4)]',
+          'ml-10 text-white [text-shadow:5px_5px_5px_rgba(0,0,0,0.4)]',
           labelClass,
         ]"
       >
@@ -44,6 +46,7 @@ interface SwitchItem {
   inactiveImage: string
   label?: string
   statusImage?: string
+  completed?: boolean
 }
 
 interface Props {
diff --git a/src/components/Video/Video.vue b/src/components/Video/Video.vue
index 15840c2..d906bff 100644
--- a/src/components/Video/Video.vue
+++ b/src/components/Video/Video.vue
@@ -578,7 +578,9 @@ const videoStyle = computed(() => ({
           class="w-40 h-40 pointer-events-auto rounded-full bg-black/50 backdrop-blur-sm flex items-center justify-center cursor-pointer hover:bg-black/70 transition-colors"
         >
           <svg
-            class="w-22 h-22 text-white ml-1"
+            class="text-white ml-1"
+            width="120"
+            height="120"
             fill="currentColor"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/index.ts b/src/components/index.ts
index ace2db3..20cf11d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -10,7 +10,6 @@ export * from './Guide'
 
 // 进度条组件
 export * from './ProgressBar'
-export * from './AnchoredProgressBar'
 
 // 切换组件
 export * from './Switcher'
diff --git a/src/config/moduleStepMap.ts b/src/config/moduleStepMap.ts
index 7c428fc..19a395e 100644
--- a/src/config/moduleStepMap.ts
+++ b/src/config/moduleStepMap.ts
@@ -92,6 +92,7 @@ export const videoCompletionRouteNames = new Set<string>([
   'InterviewOnsiteShooting',
   'InterviewEditing',
   'InterviewExportPublish',
+  'InterviewSoundEffect',
 ])
 
 export const allTrackedRouteNames = new Set<string>(
diff --git a/src/config/studyProgress.ts b/src/config/studyProgress.ts
index 7a6521a..e013014 100644
--- a/src/config/studyProgress.ts
+++ b/src/config/studyProgress.ts
@@ -34,11 +34,6 @@ const getStepProgress = (
 }
 
 const WORK_COMPLETION_KEYS = ['case', 'profession', 'idea'] as const
-const PRACTICE_ROUTE_MAP: Record<ProductionModuleKey, string> = {
-  vlog: 'VlogPractice',
-  interview: 'InterviewPractice',
-  film: 'FilmPractice',
-}
 
 const getWorkProgress = (workVideosWatched: Record<string, boolean>) =>
   countViewedRoutes(
@@ -50,6 +45,7 @@ export const getProductionModuleProgress = (
   moduleKey: ProductionModuleKey,
   viewed: ViewedInput,
   workVideosWatched: Record<string, boolean> = {},
+  practiceProgress = 0,
 ) => {
   const isViewed = toPredicate(viewed)
   const stepRoutes = moduleStepMap[moduleKey]
@@ -59,19 +55,15 @@ export const getProductionModuleProgress = (
   const step1Progress = stepProgress(1) * 22
   const step2Progress = stepProgress(2) * 22
   const step3Progress = stepProgress(3) * 21
-  const progress = taskProgress + step1Progress + step2Progress + step3Progress
+  const practiceStepProgress = Math.min(1, Math.max(0, practiceProgress)) * 15
+  const progress =
+    taskProgress +
+    step1Progress +
+    step2Progress +
+    step3Progress +
+    practiceStepProgress
 
-  if (
-    progress >= 85 &&
-    step1Progress === 22 &&
-    step2Progress === 22 &&
-    step3Progress === 21 &&
-    isViewed(PRACTICE_ROUTE_MAP[moduleKey])
-  ) {
-    return 100
-  }
-
-  return Math.round(progress)
+  return Math.round(Math.min(100, progress))
 }
 
 const BASIC_ELEMENTS_VIDEO_KEYS = [
diff --git a/src/stores/modules/basic-elements.ts b/src/stores/modules/basic-elements.ts
index a152969..8b965a0 100644
--- a/src/stores/modules/basic-elements.ts
+++ b/src/stores/modules/basic-elements.ts
@@ -4,6 +4,12 @@ import { ref } from 'vue'
 export const BASIC_ELEMENTS_LESSON_ID = 'xsdh_sdjcys'
 export const BASIC_ELEMENTS_KEY = 1
 
+interface CertificateInfo {
+  number: string // 证书编号，例如 SP20260618-7F3A
+  date: string // 颁发日期，yyyy-mm-dd
+  studentNumber: string // 学员序号，例如 0001
+}
+
 interface BasicElementsSavePayload {
   isGuideNewUser?: boolean
   isGuideBasicElementsTask?: boolean
@@ -13,6 +19,22 @@ interface BasicElementsSavePayload {
   guideShown?: Record<string, boolean>
   hasFinishedUnlockedGuide?: boolean
   uploadedCourseOrders?: number[]
+  certificate?: CertificateInfo | null
+}
+
+// 首次获得通关证书时生成证书编号：SP + yyyymmdd + - + 4 位大写十六进制随机串
+function generateCertificateInfo(): CertificateInfo {
+  const now = new Date()
+  const yyyymmdd = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}`
+  const randomHex = Math.floor(Math.random() * 0x10000)
+    .toString(16)
+    .toUpperCase()
+    .padStart(4, '0')
+  return {
+    number: `SP${yyyymmdd}-${randomHex}`,
+    date: now.toLocaleDateString().replace(/\//g, '-'),
+    studentNumber: '0001',
+  }
 }
 
 async function getYibanApi(): Promise<typeof import('@/utils/yiban') | null> {
@@ -44,6 +66,7 @@ export const useBasicElementsStore = defineStore(
     const guideShown = ref<Record<string, boolean>>({})
     const hasFinishedUnlockedGuide = ref<boolean>(false)
     const uploadedCourseOrders = ref<number[]>([])
+    const certificate = ref<CertificateInfo | null>(null)
 
     //Actions
     function saveBasicElementsStore(): void {
@@ -56,6 +79,7 @@ export const useBasicElementsStore = defineStore(
         guideShown: guideShown.value,
         hasFinishedUnlockedGuide: hasFinishedUnlockedGuide.value,
         uploadedCourseOrders: uploadedCourseOrders.value,
+        certificate: certificate.value,
       }
 
       getYibanApi()
@@ -80,7 +104,10 @@ export const useBasicElementsStore = defineStore(
           BASIC_ELEMENTS_LESSON_ID,
           BASIC_ELEMENTS_KEY,
         )
-        if (!raw) return
+        if (!raw) {
+          resetBasicElementsState()
+          return
+        }
 
         const data = JSON.parse(raw) as BasicElementsSavePayload
         isGuideNewUser.value = data.isGuideNewUser ?? true
@@ -92,6 +119,7 @@ export const useBasicElementsStore = defineStore(
         guideShown.value = data.guideShown ?? {}
         hasFinishedUnlockedGuide.value = data.hasFinishedUnlockedGuide ?? false
         uploadedCourseOrders.value = data.uploadedCourseOrders ?? []
+        certificate.value = data.certificate ?? null
       } catch (error) {
         console.error('Failed to load Basic Elements store', error)
       }
@@ -136,6 +164,14 @@ export const useBasicElementsStore = defineStore(
       saveBasicElementsStore()
     }
 
+    // 首次获得通关证书时生成并持久化证书数据；已存在则直接复用
+    function ensureCertificate(): CertificateInfo {
+      if (certificate.value) return certificate.value
+      certificate.value = generateCertificateInfo()
+      saveBasicElementsStore()
+      return certificate.value
+    }
+
     function markLearningVideoWatched(key: string): void {
       if (!key) return
       if (learningVideosWatched.value[key]) return
@@ -154,6 +190,8 @@ export const useBasicElementsStore = defineStore(
       learningVideosWatched.value = {}
       guideShown.value = {}
       hasFinishedUnlockedGuide.value = false
+      uploadedCourseOrders.value = []
+      certificate.value = null
       saveBasicElementsStore()
     }
 
@@ -166,6 +204,7 @@ export const useBasicElementsStore = defineStore(
       markGuideShown,
       markUnlockedGuideFinished,
       markCourseOrderUploaded,
+      ensureCertificate,
       markLearningVideoWatched,
       saveBasicElementsStore,
       loadBasicElementsStore,
@@ -179,6 +218,7 @@ export const useBasicElementsStore = defineStore(
       guideShown,
       hasFinishedUnlockedGuide,
       uploadedCourseOrders,
+      certificate,
     }
   },
   {
diff --git a/src/stores/modules/film.ts b/src/stores/modules/film.ts
index aad4be5..0624bd3 100644
--- a/src/stores/modules/film.ts
+++ b/src/stores/modules/film.ts
@@ -10,6 +10,8 @@ type FilmWorkTab = 'case' | 'profession' | 'idea'
 
 export const FILM_WORK_COMPLETION_KEYS = ['case', 'profession', 'idea'] as const
 
+export const FILM_PRACTICE_VIDEO_KEYS = ['film-practice-case-1'] as const
+
 type PracticeRatingScores = Record<string, number>
 type PracticeWorkRatings = Record<string, PracticeRatingScores>
 
@@ -25,6 +27,7 @@ interface FilmSavePayload {
   editingVideosWatched?: Record<string, boolean>
   professionVideosWatched?: Record<string, boolean>
   workVideosWatched?: Record<string, boolean>
+  practiceVideosWatched?: Record<string, boolean>
   isGuideFilmEditingComplete?: boolean
   guideShown?: Record<string, boolean>
   practiceScrollPage?: number
@@ -99,6 +102,7 @@ export const useFilmStore = defineStore(
     const editingVideosWatched = ref<Record<string, boolean>>({})
     const professionVideosWatched = ref<Record<string, boolean>>({})
     const workVideosWatched = ref<Record<string, boolean>>({})
+    const practiceVideosWatched = ref<Record<string, boolean>>({})
     //Film-后期剪辑6个视频学完后的一次性引导
     const isGuideFilmEditingComplete = ref<boolean>(true)
     const guideShown = ref<Record<string, boolean>>({})
@@ -123,6 +127,7 @@ export const useFilmStore = defineStore(
         editingVideosWatched: editingVideosWatched.value,
         professionVideosWatched: professionVideosWatched.value,
         workVideosWatched: workVideosWatched.value,
+        practiceVideosWatched: practiceVideosWatched.value,
         isGuideFilmEditingComplete: isGuideFilmEditingComplete.value,
         guideShown: guideShown.value,
         practiceScrollPage: practiceScrollPage.value,
@@ -145,7 +150,10 @@ export const useFilmStore = defineStore(
         if (!api) return
 
         const raw = await api.getUserDefine(FILM_LESSON_ID, FILM_KEY)
-        if (!raw) return
+        if (!raw) {
+          resetFilmState()
+          return
+        }
 
         const data = JSON.parse(raw) as FilmSavePayload
         viewed.value = data.viewed ?? {}
@@ -159,6 +167,7 @@ export const useFilmStore = defineStore(
         editingVideosWatched.value = data.editingVideosWatched ?? {}
         professionVideosWatched.value = data.professionVideosWatched ?? {}
         workVideosWatched.value = data.workVideosWatched ?? {}
+        practiceVideosWatched.value = data.practiceVideosWatched ?? {}
         isGuideFilmEditingComplete.value =
           data.isGuideFilmEditingComplete ?? true
         guideShown.value = data.guideShown ?? {}
@@ -256,6 +265,16 @@ export const useFilmStore = defineStore(
       )
     }
 
+    function markPracticeVideoWatched(key: string): void {
+      if (!key) return
+      if (practiceVideosWatched.value[key]) return
+      practiceVideosWatched.value[key] = true
+      saveFilmStore()
+      void import('@/utils/yibanLessonProgress').then((api) =>
+        api.syncFilmCourseProgress(),
+      )
+    }
+
     function setIsGuideFilmEditingComplete(value: boolean): void {
       isGuideFilmEditingComplete.value = value
       saveFilmStore()
@@ -318,6 +337,9 @@ export const useFilmStore = defineStore(
     const areEditingVideosWatched = (keys: readonly string[]) =>
       keys.every((key) => editingVideosWatched.value[key] === true)
 
+    const arePracticeVideosWatched = (keys: readonly string[]) =>
+      keys.every((key) => practiceVideosWatched.value[key] === true)
+
     const allMidtermShootingViewed = computed<boolean>(() =>
       areRoutesViewed(['FilmFilmingLocationA', 'FilmFilmingLocationB']),
     )
@@ -330,10 +352,29 @@ export const useFilmStore = defineStore(
       areEditingVideosWatched(FILM_EDITING_VIDEO_KEYS),
     )
 
+    const allPracticeVideosWatched = computed<boolean>(() =>
+      arePracticeVideosWatched(FILM_PRACTICE_VIDEO_KEYS),
+    )
+
+    const isPracticeCompleted = computed<boolean>(
+      () =>
+        allPracticeVideosWatched.value &&
+        practiceNoteContent.value.trim() !== '',
+    )
+
+    const practiceProgress = computed<number>(() => {
+      const watchedCount = FILM_PRACTICE_VIDEO_KEYS.filter(
+        (key) => practiceVideosWatched.value[key] === true,
+      ).length
+      const noteCount = practiceNoteContent.value.trim() === '' ? 0 : 1
+      return (watchedCount + noteCount) / (FILM_PRACTICE_VIDEO_KEYS.length + 1)
+    })
+
     function isRouteViewed(name: string): boolean {
       if (name === 'FilmMidtermShooting') return allMidtermShootingViewed.value
       if (name === 'FilmOnsiteShooting') return allOnsiteScenesViewed.value
       if (name === 'FilmEditing') return allEditingVideosWatched.value
+      if (name === 'FilmPractice') return isPracticeCompleted.value
       return viewed.value[name] === true
     }
 
@@ -345,9 +386,9 @@ export const useFilmStore = defineStore(
       const isDone = (step: 1 | 2 | 3) =>
         stepRouteNames[step].every((name) => isRouteViewed(name))
 
-      if (isDone(1) && isDone(2) && isDone(3) && viewed.value.FilmPractice)
-        return 4
-      if (isDone(1) && isDone(2) && isDone(3)) return 3
+      if (isDone(1) && isDone(2) && isDone(3) && isPracticeCompleted.value)
+        return 5
+      if (isDone(1) && isDone(2) && isDone(3)) return 4
       if (isDone(1) && isDone(2)) return 2
       if (isDone(1)) return 1
       return 0
@@ -359,6 +400,7 @@ export const useFilmStore = defineStore(
         'film',
         isRouteViewed,
         workVideosWatched.value,
+        practiceProgress.value,
       ),
     )
 
@@ -375,6 +417,7 @@ export const useFilmStore = defineStore(
       editingVideosWatched.value = {}
       professionVideosWatched.value = {}
       workVideosWatched.value = {}
+      practiceVideosWatched.value = {}
       isGuideFilmEditingComplete.value = true
       guideShown.value = {}
       practiceScrollPage.value = 0
@@ -398,6 +441,7 @@ export const useFilmStore = defineStore(
       markEditingVideoWatched,
       markProfessionVideoWatched,
       markWorkVideoWatched,
+      markPracticeVideoWatched,
       setIsGuideFilmEditingComplete,
       markGuideShown,
       setPracticeScrollPage,
@@ -425,6 +469,7 @@ export const useFilmStore = defineStore(
       editingVideosWatched,
       professionVideosWatched,
       workVideosWatched,
+      practiceVideosWatched,
       isGuideFilmEditingComplete,
       guideShown,
       practiceScrollPage,
@@ -434,6 +479,9 @@ export const useFilmStore = defineStore(
       practiceWorkRatings,
       allOnsiteScenesViewed,
       allEditingVideosWatched,
+      allPracticeVideosWatched,
+      isPracticeCompleted,
+      practiceProgress,
       isRouteViewed,
     }
   },
diff --git a/src/stores/modules/interview.ts b/src/stores/modules/interview.ts
index 6ca6dde..1cb63ea 100644
--- a/src/stores/modules/interview.ts
+++ b/src/stores/modules/interview.ts
@@ -27,6 +27,10 @@ export const INTERVIEW_WORK_COMPLETION_KEYS = [
   'idea',
 ] as const
 
+export const INTERVIEW_PRACTICE_VIDEO_KEYS = [
+  'interview-practice-case-1',
+] as const
+
 type PracticeRatingScores = Record<string, number>
 type PracticeWorkRatings = Record<string, PracticeRatingScores>
 
@@ -41,6 +45,7 @@ interface InterviewSavePayload {
   interviewMenuVisible?: boolean
   professionVideosWatched?: Record<string, boolean>
   workVideosWatched?: Record<string, boolean>
+  practiceVideosWatched?: Record<string, boolean>
   guideShown?: Record<string, boolean>
   practiceScrollPage?: number
   workSelectedTab?: InterviewWorkTab
@@ -88,6 +93,7 @@ export const useInterviewStore = defineStore(
     const interviewMenuVisible = ref<boolean>(false)
     const professionVideosWatched = ref<Record<string, boolean>>({})
     const workVideosWatched = ref<Record<string, boolean>>({})
+    const practiceVideosWatched = ref<Record<string, boolean>>({})
     const guideShown = ref<Record<string, boolean>>({})
     const practiceScrollPage = ref<number>(0)
     const workSelectedTab = ref<InterviewWorkTab>('case')
@@ -109,6 +115,7 @@ export const useInterviewStore = defineStore(
         interviewMenuVisible: interviewMenuVisible.value,
         professionVideosWatched: professionVideosWatched.value,
         workVideosWatched: workVideosWatched.value,
+        practiceVideosWatched: practiceVideosWatched.value,
         guideShown: guideShown.value,
         practiceScrollPage: practiceScrollPage.value,
         workSelectedTab: workSelectedTab.value,
@@ -136,7 +143,10 @@ export const useInterviewStore = defineStore(
         if (!api) return
 
         const raw = await api.getUserDefine(INTERVIEW_LESSON_ID, INTERVIEW_KEY)
-        if (!raw) return
+        if (!raw) {
+          resetInterviewState()
+          return
+        }
 
         const data = JSON.parse(raw) as InterviewSavePayload
         viewed.value = data.viewed ?? {}
@@ -149,6 +159,7 @@ export const useInterviewStore = defineStore(
         interviewMenuVisible.value = data.interviewMenuVisible ?? false
         professionVideosWatched.value = data.professionVideosWatched ?? {}
         workVideosWatched.value = data.workVideosWatched ?? {}
+        practiceVideosWatched.value = data.practiceVideosWatched ?? {}
         guideShown.value = data.guideShown ?? {}
         practiceScrollPage.value = data.practiceScrollPage ?? 0
         workSelectedTab.value = data.workSelectedTab ?? 'case'
@@ -219,6 +230,29 @@ export const useInterviewStore = defineStore(
     const areRoutesViewed = (routeNames: readonly string[]) =>
       routeNames.every((name) => viewed.value[name] === true)
 
+    const arePracticeVideosWatched = (keys: readonly string[]) =>
+      keys.every((key) => practiceVideosWatched.value[key] === true)
+
+    const allPracticeVideosWatched = computed<boolean>(() =>
+      arePracticeVideosWatched(INTERVIEW_PRACTICE_VIDEO_KEYS),
+    )
+
+    const isPracticeCompleted = computed<boolean>(
+      () =>
+        allPracticeVideosWatched.value &&
+        practiceNoteContent.value.trim() !== '',
+    )
+
+    const practiceProgress = computed<number>(() => {
+      const watchedCount = INTERVIEW_PRACTICE_VIDEO_KEYS.filter(
+        (key) => practiceVideosWatched.value[key] === true,
+      ).length
+      const noteCount = practiceNoteContent.value.trim() === '' ? 0 : 1
+      return (
+        (watchedCount + noteCount) / (INTERVIEW_PRACTICE_VIDEO_KEYS.length + 1)
+      )
+    })
+
     const allMidtermShootingViewed = computed<boolean>(() =>
       areRoutesViewed([
         'InterviewFilmingLocationA',
@@ -234,6 +268,7 @@ export const useInterviewStore = defineStore(
       if (name === 'InterviewEditing') {
         return areProfessionVideosWatched(INTERVIEW_EDITING_VIDEO_KEYS)
       }
+      if (name === 'InterviewPractice') return isPracticeCompleted.value
       return viewed.value[name] === true
     }
 
@@ -243,9 +278,9 @@ export const useInterviewStore = defineStore(
       const isDone = (step: 1 | 2 | 3) =>
         stepRouteNames[step].every((name) => isRouteViewed(name))
 
-      if (isDone(1) && isDone(2) && isDone(3) && viewed.value.InterviewPractice)
-        return 4
-      if (isDone(1) && isDone(2) && isDone(3)) return 3
+      if (isDone(1) && isDone(2) && isDone(3) && isPracticeCompleted.value)
+        return 5
+      if (isDone(1) && isDone(2) && isDone(3)) return 4
       if (isDone(1) && isDone(2)) return 2
       if (isDone(1)) return 1
       return 0
@@ -256,6 +291,7 @@ export const useInterviewStore = defineStore(
         'interview',
         isRouteViewed,
         workVideosWatched.value,
+        practiceProgress.value,
       ),
     )
 
@@ -312,6 +348,16 @@ export const useInterviewStore = defineStore(
       )
     }
 
+    function markPracticeVideoWatched(key: string): void {
+      if (!key) return
+      if (practiceVideosWatched.value[key]) return
+      practiceVideosWatched.value[key] = true
+      saveInterviewStore()
+      void import('@/utils/yibanLessonProgress').then((api) =>
+        api.syncInterviewCourseProgress(),
+      )
+    }
+
     function markOnsiteVideoWatched(key: string): void {
       if (!key) return
       if (professionVideosWatched.value[key]) return
@@ -369,6 +415,7 @@ export const useInterviewStore = defineStore(
       interviewMenuVisible.value = false
       professionVideosWatched.value = {}
       workVideosWatched.value = {}
+      practiceVideosWatched.value = {}
       guideShown.value = {}
       practiceScrollPage.value = 0
       workSelectedTab.value = 'case'
@@ -390,6 +437,7 @@ export const useInterviewStore = defineStore(
       setInterviewMenuVisible,
       markProfessionVideoWatched,
       markWorkVideoWatched,
+      markPracticeVideoWatched,
       markOnsiteVideoWatched,
       markEditingVideoWatched,
       markGuideShown,
@@ -418,12 +466,16 @@ export const useInterviewStore = defineStore(
       interviewMenuVisible,
       professionVideosWatched,
       workVideosWatched,
+      practiceVideosWatched,
       guideShown,
       practiceScrollPage,
       workSelectedTab,
       practiceNoteContent,
       practiceSelfEvaluationScores,
       practiceWorkRatings,
+      allPracticeVideosWatched,
+      isPracticeCompleted,
+      practiceProgress,
     }
   },
   {
diff --git a/src/stores/modules/vlog.ts b/src/stores/modules/vlog.ts
index 74737a7..12027ab 100644
--- a/src/stores/modules/vlog.ts
+++ b/src/stores/modules/vlog.ts
@@ -23,6 +23,11 @@ export const VLOG_EDITING_VIDEO_KEYS = [
 
 export const VLOG_WORK_COMPLETION_KEYS = ['case', 'profession', 'idea'] as const
 
+export const VLOG_PRACTICE_VIDEO_KEYS = [
+  'vlog-practice-case-1',
+  'vlog-practice-case-2',
+] as const
+
 type PracticeRatingScores = Record<string, number>
 type PracticeWorkRatings = Record<string, PracticeRatingScores>
 
@@ -38,6 +43,7 @@ interface VlogSavePayload {
   vlogMenuVisible?: boolean
   professionVideosWatched?: Record<string, boolean>
   workVideosWatched?: Record<string, boolean>
+  practiceVideosWatched?: Record<string, boolean>
   guideShown?: Record<string, boolean>
   practiceScrollPage?: number
   workSelectedTab?: VlogWorkTab
@@ -89,6 +95,7 @@ export const useVlogStore = defineStore(
     const vlogUnlockProgress = ref<number>(0)
     const professionVideosWatched = ref<Record<string, boolean>>({})
     const workVideosWatched = ref<Record<string, boolean>>({})
+    const practiceVideosWatched = ref<Record<string, boolean>>({})
     const guideShown = ref<Record<string, boolean>>({})
     const practiceScrollPage = ref<number>(0)
     const workSelectedTab = ref<VlogWorkTab>('case')
@@ -111,6 +118,7 @@ export const useVlogStore = defineStore(
         vlogMenuVisible: vlogMenuVisible.value,
         professionVideosWatched: professionVideosWatched.value,
         workVideosWatched: workVideosWatched.value,
+        practiceVideosWatched: practiceVideosWatched.value,
         guideShown: guideShown.value,
         practiceScrollPage: practiceScrollPage.value,
         workSelectedTab: workSelectedTab.value,
@@ -132,7 +140,10 @@ export const useVlogStore = defineStore(
         if (!api) return
 
         const raw = await api.getUserDefine(VLOG_LESSON_ID, VLOG_KEY)
-        if (!raw) return
+        if (!raw) {
+          resetVlogState()
+          return
+        }
 
         const data = JSON.parse(raw) as VlogSavePayload
         viewed.value = data.viewed ?? {}
@@ -146,6 +157,7 @@ export const useVlogStore = defineStore(
         vlogMenuVisible.value = data.vlogMenuVisible ?? false
         professionVideosWatched.value = data.professionVideosWatched ?? {}
         workVideosWatched.value = data.workVideosWatched ?? {}
+        practiceVideosWatched.value = data.practiceVideosWatched ?? {}
         guideShown.value = data.guideShown ?? {}
         practiceScrollPage.value = data.practiceScrollPage ?? 0
         workSelectedTab.value = data.workSelectedTab ?? 'case'
@@ -233,6 +245,16 @@ export const useVlogStore = defineStore(
       )
     }
 
+    function markPracticeVideoWatched(key: string): void {
+      if (!key) return
+      if (practiceVideosWatched.value[key]) return
+      practiceVideosWatched.value[key] = true
+      saveVlogStore()
+      void import('@/utils/yibanLessonProgress').then((api) =>
+        api.syncVlogCourseProgress(),
+      )
+    }
+
     function markOnsiteVideoWatched(key: string): void {
       if (!key) return
       if (professionVideosWatched.value[key]) return
@@ -314,10 +336,31 @@ export const useVlogStore = defineStore(
     const areRoutesViewed = (routeNames: readonly string[]) =>
       routeNames.every((name) => viewed.value[name] === true)
 
+    const arePracticeVideosWatched = (keys: readonly string[]) =>
+      keys.every((key) => practiceVideosWatched.value[key] === true)
+
     const allMidtermShootingViewed = computed<boolean>(() =>
       areRoutesViewed(['VlogFilmingLocationA', 'VlogFilmingLocationB']),
     )
 
+    const allPracticeVideosWatched = computed<boolean>(() =>
+      arePracticeVideosWatched(VLOG_PRACTICE_VIDEO_KEYS),
+    )
+
+    const isPracticeCompleted = computed<boolean>(
+      () =>
+        allPracticeVideosWatched.value &&
+        practiceNoteContent.value.trim() !== '',
+    )
+
+    const practiceProgress = computed<number>(() => {
+      const watchedCount = VLOG_PRACTICE_VIDEO_KEYS.filter(
+        (key) => practiceVideosWatched.value[key] === true,
+      ).length
+      const noteCount = practiceNoteContent.value.trim() === '' ? 0 : 1
+      return (watchedCount + noteCount) / (VLOG_PRACTICE_VIDEO_KEYS.length + 1)
+    })
+
     function isRouteViewed(name: string): boolean {
       if (name === 'VlogMidtermShooting') return allMidtermShootingViewed.value
       if (name === 'VlogShooting') {
@@ -326,6 +369,7 @@ export const useVlogStore = defineStore(
       if (name === 'VlogEditing') {
         return areProfessionVideosWatched(VLOG_EDITING_VIDEO_KEYS)
       }
+      if (name === 'VlogPractice') return isPracticeCompleted.value
       return viewed.value[name] === true
     }
 
@@ -335,9 +379,9 @@ export const useVlogStore = defineStore(
       const isDone = (step: 1 | 2 | 3) =>
         stepRouteNames[step].every((name) => isRouteViewed(name))
 
-      if (isDone(1) && isDone(2) && isDone(3) && viewed.value.VlogPractice)
-        return 4
-      if (isDone(1) && isDone(2) && isDone(3)) return 3
+      if (isDone(1) && isDone(2) && isDone(3) && isPracticeCompleted.value)
+        return 5
+      if (isDone(1) && isDone(2) && isDone(3)) return 4
       if (isDone(1) && isDone(2)) return 2
       if (isDone(1)) return 1
       return 0
@@ -349,6 +393,7 @@ export const useVlogStore = defineStore(
         'vlog',
         isRouteViewed,
         workVideosWatched.value,
+        practiceProgress.value,
       ),
     )
 
@@ -361,9 +406,11 @@ export const useVlogStore = defineStore(
       isGuideVlogStage2.value = true
       isGuideVlogStage3.value = true
       isVlogUnlock.value = false
+      vlogUnlockProgress.value = 0
       vlogMenuVisible.value = false
       professionVideosWatched.value = {}
       workVideosWatched.value = {}
+      practiceVideosWatched.value = {}
       guideShown.value = {}
       practiceScrollPage.value = 0
       workSelectedTab.value = 'case'
@@ -385,6 +432,7 @@ export const useVlogStore = defineStore(
       setVlogMenuVisible,
       markProfessionVideoWatched,
       markWorkVideoWatched,
+      markPracticeVideoWatched,
       markOnsiteVideoWatched,
       markEditingVideoWatched,
       saveVlogStore,
@@ -415,12 +463,16 @@ export const useVlogStore = defineStore(
       vlogMenuVisible,
       professionVideosWatched,
       workVideosWatched,
+      practiceVideosWatched,
       guideShown,
       practiceScrollPage,
       workSelectedTab,
       practiceNoteContent,
       practiceSelfEvaluationScores,
       practiceWorkRatings,
+      allPracticeVideosWatched,
+      isPracticeCompleted,
+      practiceProgress,
     }
   },
   {
diff --git a/src/utils/yiban.ts b/src/utils/yiban.ts
index fcc14c5..cca73a1 100644
--- a/src/utils/yiban.ts
+++ b/src/utils/yiban.ts
@@ -1,12 +1,12 @@
 import { useUserStore } from '@/stores'
+
+//超时时间
+const TIMEOUT_MS = 1000 * 5
+const PROBE_LESSON_ID = '__probe__'
+const PROBE_KEY = '__probe__'
+
 // 声明外部依赖（由运行环境提供）
-declare const $: any
-declare const iscallyb: boolean
-declare const emykey: string
 declare function videoAjax(): VideoAjax
-declare function getFutureDa(days: number): string
-declare function getCurrentDa(str: string): void
-declare function formatDateFromMilliseconds(date: Date): string
 
 interface UserDefineParam {
   lessonId: string
@@ -21,7 +21,7 @@ interface VideoAjaxResponseItem {
 
 interface VideoAjaxResponse {
   code: number
-  data: {
+  data?: {
     value?: VideoAjaxResponseItem[] | string
   }
 }
@@ -33,117 +33,80 @@ interface VideoAjax {
     param: UserDefineParam,
     callback: (data: VideoAjaxResponse | undefined) => void,
   ): void
-  getUserDefineInfo(
-    param: UserDefineParam,
-    callback: (data: VideoAjaxResponse | undefined) => void,
-  ): void
   finishCourse(param: { order: number; co: string; process: number }): void
 }
 
-// 扩展 jQuery，获取 URL 参数
-$.extend({
-  getUrlVars(): string[] & Record<string, string | undefined> {
-    const vars: any[] & Record<string, string | undefined> = [] as any
-    let hash: string[]
-    const queryIndex = window.location.href.indexOf('?')
-    if (queryIndex === -1) return vars
-    const hashes = window.location.href
-      .slice(queryIndex + 1)
-      .split('&')
-      .filter(Boolean)
-    for (let i = 0; i < hashes.length; i++) {
-      const item = hashes[i]
-      if (!item) continue
-      hash = item.split('=')
-      const keyRaw = hash[0] ?? ''
-      const valueRaw = hash[1] ?? ''
-      const key = decodeURIComponent(keyRaw)
-      const value = decodeURIComponent(valueRaw)
-      vars.push(key)
-      vars[key] = value
-    }
-    return vars
-  },
-  getUrlVar(name: string): string | undefined {
-    return ($ as any).getUrlVars()[name]
-  },
-})
-
 const LESSON_PREFIX = 'dsp'
 
-const videoajax: VideoAjax = videoAjax()
-videoajax.setHost('/')
+type StorageBackend = 'yiban' | 'session'
 
-// 设置我的自定义数据(所有的自定义数据都设置在第一个课时ID上，以key来区分不同的类型)
-function setLtDefine(key: string | number, value: string): void {
-  if (iscallyb) {
-    setUserDefine(1, key, value)
-  } else {
-    sessionStorage.setItem(`${LESSON_PREFIX}_${key}`, value)
+let videoajax: VideoAjax | null = null
+let resolvedStorageBackend: StorageBackend | null = null
+let storageBackendInitPromise: Promise<StorageBackend> | null = null
+
+function getVideoAjax(): VideoAjax | null {
+  if (videoajax) return videoajax
+
+  if (typeof videoAjax !== 'function') {
+    return null
+  }
+
+  try {
+    videoajax = videoAjax()
+    videoajax.setHost('/')
+    return videoajax
+  } catch (error) {
+    console.warn('[yiban] failed to initialize videoAjax', error)
+    return null
   }
 }
 
-let mycstr9 = ''
-
-// 获取定义数据（由于底层是异步接口，这里返回 Promise）
-async function getLtDefine(key: string | number): Promise<string> {
-  if (iscallyb) {
-    if (mycstr9 === '') {
-      const all = await getUsersDefine(1, emykey)
-      if (all === undefined || all === null || all === 'null' || all === '') {
-        mycstr9 = getFutureDa(10)
-        setLtDefine(emykey, mycstr9)
-      } else {
-        mycstr9 = all as string // 这里是 emykey，对应上面 getUsersDefine 的 string 分支
-      }
-    }
-    const str =
-      mycstr9 === undefined || mycstr9 === null || mycstr9 === 'null'
-        ? ''
-        : mycstr9
-    getCurrentDa(str)
-    const objitem = await getUserDefine(1, key)
-    return objitem === undefined || objitem === null || objitem === 'null'
-      ? ''
-      : objitem
-  } else {
-    const itemvalue = sessionStorage.getItem(`${LESSON_PREFIX}_${key}`)
-    return itemvalue === undefined || itemvalue === null || itemvalue === 'null'
-      ? ''
-      : itemvalue
-  }
+function getSessionStorageKey(
+  lessonId: string | number,
+  key: string | number,
+): string {
+  return `${LESSON_PREFIX}_${lessonId}_${key}`
 }
 
-// 设置课程笔记10002
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function setCourseNotepad(collect: string[]): void {
-  // 保持和原逻辑一致：序列化为 JSON 存储
-  setLtDefine(10002, $.toJSON(collect))
+function getSessionUserDefine(
+  lessonId: string | number,
+  key: string | number,
+): string {
+  const value = sessionStorage.getItem(getSessionStorageKey(lessonId, key))
+  return value === null || value === '' || value === 'null' ? '' : value
 }
 
-// 获取课程笔记10002（异步）
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-async function getCourseNotepad(): Promise<string[]> {
-  const raw = await getLtDefine(10002)
-  if (raw === undefined || raw === null || raw === '') {
-    // 原逻辑：返回长度为 9 的空字符串数组
-    return ['', '', '', '', '', '', '', '', '']
-  }
-  return $.parseJSON(raw) as string[]
-}
-
-// lessonId(课时唯一ID)
-export function setUserDefine(
+function setSessionUserDefine(
   lessonId: string | number,
   key: string | number,
   value: string,
 ): void {
+  sessionStorage.setItem(getSessionStorageKey(lessonId, key), value)
+}
+
+function setYibanUserDefine(
+  lessonId: string | number,
+  key: string | number,
+  value: string,
+): void {
+  const api = getVideoAjax()
+  if (!api) {
+    console.warn(
+      `[yiban] skip setUserDefine: missing videoAjax, lessonId=${lessonId}, key=${key}`,
+    )
+    return
+  }
+
   const param: UserDefineParam = {
     lessonId: `${LESSON_PREFIX}_${lessonId}`,
     key,
     content: value,
   }
-  videoajax.addUserDefine(param)
+  api.addUserDefine(param)
+}
+
+function isUsableYibanResponse(res: VideoAjaxResponse | undefined): boolean {
+  return res !== undefined && res !== null && typeof res.code === 'number'
 }
 
 // 内部：将回调形式封装为 Promise
@@ -151,6 +114,11 @@ function getUserDefineAsyncInternal(
   lessonId: string | number,
   key: string | number,
 ): Promise<string> {
+  const api = getVideoAjax()
+  if (!api) {
+    return Promise.resolve('')
+  }
+
   const param: UserDefineParam = {
     lessonId: `${LESSON_PREFIX}_${lessonId}`,
     order: key,
@@ -167,18 +135,107 @@ function getUserDefineAsyncInternal(
     const timeout = setTimeout(() => {
       console.warn(`getUserDefine timeout: lessonId=${lessonId}, key=${key}`)
       done('')
-    }, 5000)
+    }, TIMEOUT_MS)
 
-    videoajax.getUserDefineInfoByUser(param, (res) => {
+    try {
+      api.getUserDefineInfoByUser(param, (res) => {
+        clearTimeout(timeout)
+        console.log(res)
+        let content = ''
+        if (res && res.code === 200) {
+          const value = res.data?.value
+          const json = Array.isArray(value) ? value : []
+          content = json[0]?.content || ''
+        }
+        done(content)
+      })
+    } catch (error) {
       clearTimeout(timeout)
-      console.log(res)
-      let content = ''
-      if (res && res.code === 200) {
-        const json = (res.data.value || []) as VideoAjaxResponseItem[]
-        content = json[0]?.content || ''
-      }
-      done(content)
-    })
+      console.warn('[yiban] getUserDefine failed', error)
+      done('')
+    }
+  })
+}
+
+function probeYibanStorage(): Promise<boolean> {
+  const api = getVideoAjax()
+  if (!api) {
+    return Promise.resolve(false)
+  }
+
+  const param: UserDefineParam = {
+    lessonId: `${LESSON_PREFIX}_${PROBE_LESSON_ID}`,
+    order: PROBE_KEY,
+  }
+
+  return new Promise((resolve) => {
+    let settled = false
+    const done = (connected: boolean) => {
+      if (settled) return
+      settled = true
+      resolve(connected)
+    }
+
+    const timeout = setTimeout(() => {
+      console.warn('[yiban] storage backend probe timeout')
+      done(false)
+    }, TIMEOUT_MS)
+
+    try {
+      api.getUserDefineInfoByUser(param, (res) => {
+        clearTimeout(timeout)
+        done(isUsableYibanResponse(res))
+      })
+    } catch (error) {
+      clearTimeout(timeout)
+      console.warn('[yiban] storage backend probe failed', error)
+      done(false)
+    }
+  })
+}
+
+export async function initializeStorageBackend(): Promise<StorageBackend> {
+  if (resolvedStorageBackend) return resolvedStorageBackend
+  if (storageBackendInitPromise) return storageBackendInitPromise
+
+  storageBackendInitPromise = probeYibanStorage().then((connected) => {
+    resolvedStorageBackend = connected ? 'yiban' : 'session'
+    console.info(`[yiban] storage backend resolved: ${resolvedStorageBackend}`)
+    return resolvedStorageBackend
+  })
+
+  return storageBackendInitPromise
+}
+
+function useResolvedStorageBackend(): StorageBackend | null {
+  return resolvedStorageBackend
+}
+
+// lessonId(课时唯一ID)
+export function setUserDefine(
+  lessonId: string | number,
+  key: string | number,
+  value: string,
+): void {
+  const backend = useResolvedStorageBackend()
+
+  if (backend === 'session') {
+    setSessionUserDefine(lessonId, key, value)
+    return
+  }
+
+  if (backend === 'yiban') {
+    setYibanUserDefine(lessonId, key, value)
+    return
+  }
+
+  void initializeStorageBackend().then((resolvedBackend) => {
+    if (resolvedBackend === 'session') {
+      setSessionUserDefine(lessonId, key, value)
+      return
+    }
+
+    setYibanUserDefine(lessonId, key, value)
   })
 }
 
@@ -187,78 +244,35 @@ export async function getUserDefine(
   lessonId: string | number,
   key: string | number,
 ): Promise<string> {
-  return getUserDefineAsyncInternal(lessonId, key)
-}
+  const backend = await initializeStorageBackend()
 
-// 内部：获取【所有】用户自定义数据（Promise 封装）
-function getUsersDefineAsyncInternal(
-  lessonId: string | number,
-  key: string | number,
-): Promise<string | VideoAjaxResponseItem[]> {
-  const param: UserDefineParam = {
-    lessonId: `${LESSON_PREFIX}_${lessonId}`,
-    order: key,
+  if (backend === 'session') {
+    return getSessionUserDefine(lessonId, key)
   }
 
-  return new Promise((resolve) => {
-    let settled = false
-    const done = (content: string | VideoAjaxResponseItem[]) => {
-      if (settled) return
-      settled = true
-      resolve(content)
-    }
-
-    const timeout = setTimeout(() => {
-      console.warn(`getUsersDefine timeout: lessonId=${lessonId}, key=${key}`)
-      done('')
-    }, 5000)
-
-    videoajax.getUserDefineInfo(param, (data) => {
-      clearTimeout(timeout)
-      let content: string | VideoAjaxResponseItem[] = ''
-      if (data && data.code === 200) {
-        const json = (data.data.value || []) as VideoAjaxResponseItem[]
-        if (json.length > 1) {
-          if (key === emykey) {
-            const mdate = new Date(
-              Math.max.apply(
-                null,
-                json.map((item) => new Date(item.content || '').getTime()),
-              ),
-            )
-            content = formatDateFromMilliseconds(mdate)
-          } else {
-            content = json
-          }
-        } else {
-          content = json[0]?.content || ''
-        }
-      }
-      done(content)
-    })
-  })
-}
-
-// Promise 版本：获取【所有】用户自定义数据
-export async function getUsersDefine(
-  lessonId: string | number,
-  key: string | number,
-): Promise<string | VideoAjaxResponseItem[]> {
-  return getUsersDefineAsyncInternal(lessonId, key)
+  return getUserDefineAsyncInternal(lessonId, key)
 }
 
 // 根据课时顺序号(所处课程的第几课时)更新对应易班平台上的每个环节进度（异步）
 export async function setCourseTimeProgress(order: number): Promise<boolean> {
-  const courseid = useUserStore().courseId
-  console.info(`courseid:${courseid} order:${order}`)
+  const backend = await initializeStorageBackend()
 
-  if (!iscallyb) {
+  if (backend === 'session') {
     console.info(
-      `[yiban] skip finishCourse: not in yiban runtime, order=${order}`,
+      `[yiban] skip finishCourse: session storage backend, order=${order}`,
     )
     return false
   }
 
+  const api = getVideoAjax()
+  if (!api) {
+    console.info(`[yiban] skip finishCourse: missing videoAjax, order=${order}`)
+    return false
+  }
+
+  const courseid = useUserStore().courseId
+  console.info(`courseid:${courseid} order:${order}`)
+
   if (courseid === undefined || courseid === null || courseid === '') {
     console.info(`[yiban] skip finishCourse: missing courseId, order=${order}`)
     return false
@@ -271,6 +285,6 @@ export async function setCourseTimeProgress(order: number): Promise<boolean> {
 
   const param2 = { order, co: courseid, process: 100 }
   console.info('[yiban] finishCourse', param2)
-  videoajax.finishCourse(param2)
+  api.finishCourse(param2)
   return true
 }
diff --git a/src/utils/yibanLessonProgress.ts b/src/utils/yibanLessonProgress.ts
index 8d0afbb..fb7e80c 100644
--- a/src/utils/yibanLessonProgress.ts
+++ b/src/utils/yibanLessonProgress.ts
@@ -36,16 +36,23 @@ const getUploadedCourseOrders = (): number[] => {
   return [...basicElementsStore.uploadedCourseOrders]
 }
 
+const uploadingCourseOrders = new Set<number>()
+
 const hasUploadedCourseOrder = (order: number): boolean =>
   getUploadedCourseOrders().includes(order)
 
 export async function markYibanLessonCompleted(order: number): Promise<void> {
-  if (hasUploadedCourseOrder(order)) return
+  if (hasUploadedCourseOrder(order) || uploadingCourseOrders.has(order)) return
 
-  const uploaded = await setCourseTimeProgress(order)
-  if (!uploaded) return
+  uploadingCourseOrders.add(order)
+  try {
+    const uploaded = await setCourseTimeProgress(order)
+    if (!uploaded) return
 
-  useBasicElementsStore().markCourseOrderUploaded(order)
+    useBasicElementsStore().markCourseOrderUploaded(order)
+  } finally {
+    uploadingCourseOrders.delete(order)
+  }
 }
 
 export async function syncAllCompletedYibanLessons(): Promise<void> {
@@ -87,11 +94,11 @@ export async function syncAllCompletedYibanLessons(): Promise<void> {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.vlogTask)
   }
 
-  if (vlogStore.completedStep === 3) {
+  if (vlogStore.completedStep >= 4) {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.vlogStage)
   }
 
-  if (vlogStore.completedStep >= 4) {
+  if (vlogStore.completedStep >= 5) {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.vlogPractice)
   }
 
@@ -105,11 +112,11 @@ export async function syncAllCompletedYibanLessons(): Promise<void> {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.interviewTask)
   }
 
-  if (interviewStore.completedStep === 3) {
+  if (interviewStore.completedStep >= 4) {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.interviewStage)
   }
 
-  if (interviewStore.completedStep >= 4) {
+  if (interviewStore.completedStep >= 5) {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.interviewPractice)
   }
 
@@ -119,11 +126,11 @@ export async function syncAllCompletedYibanLessons(): Promise<void> {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.filmTask)
   }
 
-  if (filmStore.completedStep === 3) {
+  if (filmStore.completedStep >= 4) {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.filmStage)
   }
 
-  if (filmStore.completedStep >= 4) {
+  if (filmStore.completedStep >= 5) {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.filmPractice)
   }
 }
@@ -168,11 +175,11 @@ export async function syncVlogCourseProgress(): Promise<void> {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.vlogTask)
   }
 
-  if (vlogStore.completedStep === 3) {
+  if (vlogStore.completedStep >= 4) {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.vlogStage)
   }
 
-  if (vlogStore.completedStep >= 4) {
+  if (vlogStore.completedStep >= 5) {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.vlogPractice)
   }
 }
@@ -190,11 +197,11 @@ export async function syncInterviewCourseProgress(): Promise<void> {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.interviewTask)
   }
 
-  if (interviewStore.completedStep === 3) {
+  if (interviewStore.completedStep >= 4) {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.interviewStage)
   }
 
-  if (interviewStore.completedStep >= 4) {
+  if (interviewStore.completedStep >= 5) {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.interviewPractice)
   }
 }
@@ -208,11 +215,11 @@ export async function syncFilmCourseProgress(): Promise<void> {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.filmTask)
   }
 
-  if (filmStore.completedStep === 3) {
+  if (filmStore.completedStep >= 4) {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.filmStage)
   }
 
-  if (filmStore.completedStep >= 4) {
+  if (filmStore.completedStep >= 5) {
     await markYibanLessonCompleted(YIBAN_COURSE_ORDERS.filmPractice)
   }
 }
diff --git a/src/views/basic-elements/basic-shooting-skills/index.vue b/src/views/basic-elements/basic-shooting-skills/index.vue
index a796132..9eed8b9 100644
--- a/src/views/basic-elements/basic-shooting-skills/index.vue
+++ b/src/views/basic-elements/basic-shooting-skills/index.vue
@@ -9,12 +9,7 @@ import { Video } from '@/components'
 import QuestionQuiz, {
   type Question,
 } from '@/components/QuestionQuiz/QuestionQuiz.vue'
-import {
-  getPublicPath,
-  getStaticImage,
-  IMAGE_PATHS,
-  getVideoPoster,
-} from '@/utils'
+import { getPublicPath, IMAGE_PATHS, getVideoPoster } from '@/utils'
 import { useBasicElementsStore } from '@/stores/modules/basic-elements'
 
 const router = useRouter()
@@ -310,13 +305,13 @@ onBeforeRouteLeave((to) => {
     />
     <!-- 步骤导航按钮 -->
     <button
-      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-12 h-12 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
+      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-16 h-16 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
       @click="showStepNavigation = true"
       title="步骤导航"
     >
       <svg
-        width="20"
-        height="20"
+        width="35"
+        height="35"
         viewBox="0 0 20 20"
         fill="none"
       >
diff --git a/src/views/basic-elements/camera-movement/index.vue b/src/views/basic-elements/camera-movement/index.vue
index eb4d7ad..dd1ea3f 100644
--- a/src/views/basic-elements/camera-movement/index.vue
+++ b/src/views/basic-elements/camera-movement/index.vue
@@ -5,12 +5,7 @@ import ImgButton from '@/components/Button/ImgButton.vue'
 import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import UnfinishedLearningPrompt from '@/components/UnfinishedLearningPrompt'
 import { Video } from '@/components'
-import {
-  getPublicPath,
-  getStaticImage,
-  IMAGE_PATHS,
-  getVideoPoster,
-} from '@/utils'
+import { getPublicPath, IMAGE_PATHS, getVideoPoster } from '@/utils'
 // 运镜初识 - 暂时用运镜的基本方式代替
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { useBasicElementsStore } from '@/stores/modules/basic-elements'
@@ -135,8 +130,6 @@ const handleClose = () => {
   router.back()
 }
 
-const label = computed(() => props.label as string)
-
 const handlePlay = () => {}
 
 const onEnded = () => {
@@ -184,13 +177,13 @@ onBeforeRouteLeave((to) => {
     />
     <!-- 步骤导航按钮 -->
     <button
-      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-12 h-12 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
+      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-16 h-16 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
       @click="showStepNavigation = true"
       title="步骤导航"
     >
       <svg
-        width="20"
-        height="20"
+        width="35"
+        height="35"
         viewBox="0 0 20 20"
         fill="none"
       >
diff --git a/src/views/basic-elements/composition/index.vue b/src/views/basic-elements/composition/index.vue
index 5f6ffb3..6ad7ca3 100644
--- a/src/views/basic-elements/composition/index.vue
+++ b/src/views/basic-elements/composition/index.vue
@@ -156,13 +156,13 @@ onMounted(() => {})
     />
     <!-- 步骤导航按钮 -->
     <button
-      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-12 h-12 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200 step-navigation-btn"
+      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-16 h-16 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200 step-navigation-btn"
       @click="showStepNavigation = true"
       title="步骤导航"
     >
       <svg
-        width="20"
-        height="20"
+        width="35"
+        height="35"
         viewBox="0 0 20 20"
         fill="none"
       >
diff --git a/src/views/basic-elements/light/index.vue b/src/views/basic-elements/light/index.vue
index 70a0d09..3402dbe 100644
--- a/src/views/basic-elements/light/index.vue
+++ b/src/views/basic-elements/light/index.vue
@@ -8,12 +8,7 @@ import { Video } from '@/components'
 import QuestionQuiz, {
   type Question,
 } from '@/components/QuestionQuiz/QuestionQuiz.vue'
-import {
-  getPublicPath,
-  getStaticImage,
-  IMAGE_PATHS,
-  getVideoPoster,
-} from '@/utils'
+import { getPublicPath, IMAGE_PATHS, getVideoPoster } from '@/utils'
 import { GuideSteps } from '@/components/Guide'
 import GuideStepsItem from '@/components/Guide/GuideStepsItem.vue'
 import { useBasicElementsStore } from '@/stores/modules/basic-elements'
@@ -243,13 +238,13 @@ onBeforeRouteLeave((to) => {
     />
     <!-- 步骤导航按钮 -->
     <button
-      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-12 h-12 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
+      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-16 h-16 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
       @click="showStepNavigation = true"
       title="步骤导航"
     >
       <svg
-        width="20"
-        height="20"
+        width="35"
+        height="35"
         viewBox="0 0 20 20"
         fill="none"
       >
diff --git a/src/views/basic-elements/short-video-editing-skills/index.vue b/src/views/basic-elements/short-video-editing-skills/index.vue
index 51db79f..ed7cff9 100644
--- a/src/views/basic-elements/short-video-editing-skills/index.vue
+++ b/src/views/basic-elements/short-video-editing-skills/index.vue
@@ -219,13 +219,13 @@ onBeforeRouteLeave((to) => {
     />
     <!-- 步骤导航按钮 -->
     <button
-      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-12 h-12 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
+      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-16 h-16 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
       @click="showStepNavigation = true"
       title="步骤导航"
     >
       <svg
-        width="20"
-        height="20"
+        width="35"
+        height="35"
         viewBox="0 0 20 20"
         fill="none"
       >
diff --git a/src/views/film/after-editing/editing/sound-transition.vue b/src/views/film/after-editing/editing/sound-transition.vue
index 89a2d35..c3dff51 100644
--- a/src/views/film/after-editing/editing/sound-transition.vue
+++ b/src/views/film/after-editing/editing/sound-transition.vue
@@ -21,11 +21,10 @@ const handleBack = () => {
   router.back()
 }
 
-// 声音转场视频 URL（暂时用其他视频代替）
+// 声音转场视频 URL
 const soundTransitionVideoUrl = getPublicPath(
   'video/film/editing/xianchangpaishe_shengyingzhuanchang1.mp4',
 )
-// const soundTransitionVideoUrl2 = getPublicPath('video/on-site/xianchangpaishe_yanshipaishe.mp4')
 const soundTransitionVideoUrl3 = getPublicPath(
   'video/film/editing/xianchangpaishe_shengyingzhuanchang3.mp4',
 )
@@ -78,6 +77,7 @@ const handleQuestionsComplete = () => {
   showQuiz.value = false
   showVerification.value = true
   film.markEditingVideoWatched('soundTransition')
+  film.markViewed('FilmEditingSoundTransition')
 }
 </script>
 
diff --git a/src/views/film/after-editing/editing/start.vue b/src/views/film/after-editing/editing/start.vue
index 91fd7a8..b794714 100644
--- a/src/views/film/after-editing/editing/start.vue
+++ b/src/views/film/after-editing/editing/start.vue
@@ -3,12 +3,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
 import { Video } from '@/components'
-import {
-  getBackgroundImage,
-  getPublicPath,
-  IMAGE_PATHS,
-  getVideoPoster,
-} from '@/utils'
+import { getPublicPath, IMAGE_PATHS, getVideoPoster } from '@/utils'
 import { useFilmStore } from '@/stores'
 
 const router = useRouter()
@@ -20,7 +15,7 @@ const handleBack = () => {
 
 // 连续剪辑视频 URL（暂时用其他视频代替）
 const continuityVideoUrl = getPublicPath(
-  'video/on-site/dygmk_jjcnlks_batch.mp4',
+  'video/film/editing/dygmk_jjcnlks_batch.mp4',
 )
 
 // 视频播放状态
diff --git a/src/views/film/index.vue b/src/views/film/index.vue
index ab39849..f49121d 100644
--- a/src/views/film/index.vue
+++ b/src/views/film/index.vue
@@ -7,16 +7,28 @@ import {
 } from '@/utils'
 import { ImgButton } from '@/components/Button'
 
-import { computed, onMounted, ref, watch, type Ref } from 'vue'
+import { computed, nextTick, onMounted, ref, watch, type Ref } from 'vue'
 import { ProgressBar, Overlay } from '@/components'
 import { useRoute, useRouter } from 'vue-router'
 import { useFilmStore } from '@/stores'
 import { GuideSteps, GuideStepsItem, type GuideStep } from '@/components/Guide'
+import {
+  ModuleMedalPopup,
+  useModuleMedalPopup,
+} from '@/views/home/components/ModuleMedalPopup'
+import { StudyProgressPopup } from '@/views/home/components/StudyProgressPopup'
 import FilmMenu from './components/menu.vue'
 
 const route = useRoute()
 const router = useRouter()
 const film = useFilmStore()
+const {
+  activeMedalKey,
+  visible: medalPopupVisible,
+  showMedalIfNeeded,
+  closeMedal,
+} = useModuleMedalPopup()
+const pendingFilmMedal = ref(false)
 
 const visible = computed({
   get: () => film.filmMenuVisible,
@@ -42,6 +54,32 @@ const showTaskGuide = computed(
 const showPracticeGuide = computed(
   () => currentStep.value === 4 && !hasShownPracticeGuide.value,
 )
+const isFilmCompleted = computed(() => progress.value >= 100)
+const showPendingFilmMedal = () => {
+  if (!pendingFilmMedal.value) return
+  if (
+    showReturnGuide.value ||
+    stageGuideStep.value ||
+    showPracticeGuide.value ||
+    showTaskGuide.value
+  ) {
+    return
+  }
+  pendingFilmMedal.value = false
+  showMedalIfNeeded('film')
+}
+const handleCloseMedalPopup = () => {
+  closeMedal()
+}
+const studyProgressVisible = ref(false)
+const handleViewProgressFromMedal = () => {
+  closeMedal()
+  studyProgressVisible.value = true
+}
+// 关闭学习进度弹窗后默认返回首页
+watch(studyProgressVisible, (value) => {
+  if (!value) router.push({ name: 'Action' })
+})
 
 // 思路提点完成回到首页的一次性引导
 const showReturnGuide = ref(
@@ -186,6 +224,26 @@ watch(
   },
   { immediate: true },
 )
+
+watch(isFilmCompleted, (completed, previousCompleted) => {
+  if (!completed || previousCompleted !== false) return
+  pendingFilmMedal.value = true
+  nextTick(showPendingFilmMedal)
+})
+
+watch(
+  [showReturnGuide, stageGuideStep, showPracticeGuide, showTaskGuide],
+  () => {
+    nextTick(showPendingFilmMedal)
+  },
+)
+
+onMounted(() => {
+  if (isFilmCompleted.value) {
+    pendingFilmMedal.value = true
+  }
+  showPendingFilmMedal()
+})
 </script>
 
 <template>
@@ -353,5 +411,14 @@ watch(
         </div>
       </GuideStepsItem>
     </GuideSteps> -->
+
+    <ModuleMedalPopup
+      :visible="medalPopupVisible"
+      :module-key="activeMedalKey"
+      @close="handleCloseMedalPopup"
+      @view-progress="handleViewProgressFromMedal"
+    />
+
+    <StudyProgressPopup v-model="studyProgressVisible" />
   </div>
 </template>
diff --git a/src/views/film/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts b/src/views/film/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
index b3d184e..e97533d 100644
--- a/src/views/film/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
+++ b/src/views/film/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
@@ -12,7 +12,7 @@ export function useViewfinderA() {
 
   // 缩放级别 (保留用于点击按钮)
   const zoomLevels = [3, 2, 1]
-  const currentZoom = ref(1)
+  const currentZoom = ref(2)
   const isCapturing = ref(false) // 拍照闪光效果
 
   // 拖拽相关状态
@@ -44,8 +44,14 @@ export function useViewfinderA() {
     const maxOffsetY = (scaledHeight - containerHeight) / 2
 
     // 限制偏移量
-    currentOffsetX.value = Math.max(-maxOffsetX, Math.min(maxOffsetX, currentOffsetX.value))
-    currentOffsetY.value = Math.max(-maxOffsetY, Math.min(maxOffsetY, currentOffsetY.value))
+    currentOffsetX.value = Math.max(
+      -maxOffsetX,
+      Math.min(maxOffsetX, currentOffsetX.value),
+    )
+    currentOffsetY.value = Math.max(
+      -maxOffsetY,
+      Math.min(maxOffsetY, currentOffsetY.value),
+    )
   }
 
   // 设置缩放级别
@@ -144,6 +150,6 @@ export function useViewfinderA() {
     onDrag,
     endDrag,
     handleWheel,
-    getTransform
+    getTransform,
   }
 }
diff --git a/src/views/film/practice/index.vue b/src/views/film/practice/index.vue
index f6a3b4b..4e9dc45 100644
--- a/src/views/film/practice/index.vue
+++ b/src/views/film/practice/index.vue
@@ -111,6 +111,7 @@ interface WorkItem {
   title: string
   stars: number
   path: string
+  watchKey: string
   description: string
 }
 
@@ -121,6 +122,7 @@ const worksList = ref<WorkItem[]>([
     title: '学生案例',
     stars: 4,
     path: '/video/film/practice/film_anli1.mp4',
+    watchKey: 'film-practice-case-1',
     description: '27084 施颖雯 杨可馨 胡悦莹 陆佳慧 雷鑫丽',
   },
 ])
@@ -375,7 +377,7 @@ onUnmounted(() => {
                 <ImgButton
                   :class="index === 0 ? 'view-btn' : ''"
                   image="vlog/practice/查看"
-                  :path="`/film/practice/video/${encodeURIComponent(work.path)}`"
+                  :path="`/film/practice/video/${encodeURIComponent(work.path)}?watchKey=${work.watchKey}`"
                 />
               </div>
             </div>
diff --git a/src/views/film/practice/video/index.vue b/src/views/film/practice/video/index.vue
index 042d859..115d610 100644
--- a/src/views/film/practice/video/index.vue
+++ b/src/views/film/practice/video/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { Video } from '@/components'
 import { ImgButton } from '@/components/Button'
 import PracticeRatingModal, {
@@ -10,6 +10,7 @@ import { computed, ref } from 'vue'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { useFilmStore } from '@/stores/modules/film'
 const router = useRouter()
+const route = useRoute()
 const filmStore = useFilmStore()
 const store = filmStore
 const guideKey = 'film-practice-video-rating'
@@ -82,6 +83,13 @@ const handleSaveEvaluation = (items: PracticeRatingItem[]): void => {
   store.setPracticeWorkRating(workKey.value, toScores(items))
 }
 
+const handleVideoEnded = (): void => {
+  const watchKey = route.query.watchKey
+  if (typeof watchKey === 'string' && watchKey) {
+    filmStore.markPracticeVideoWatched(watchKey)
+  }
+}
+
 /** 保存弹窗 */
 const showModal = ref<boolean>(false)
 
@@ -99,7 +107,7 @@ const handleBack = (): void => {
       @click="handleBack"
     />
     <ImgButton
-      class="absolute right-0 top-1/2 -translate-y-1/2 z-50"
+      class="btn-1 absolute right-0 top-1/2 -translate-y-1/2 z-50"
       image="vlog/practice/评分"
       @click="showModal = true"
     />
@@ -110,6 +118,7 @@ const handleBack = (): void => {
       :muted="false"
       :controls="true"
       :loop="false"
+      @ended="handleVideoEnded"
     />
 
     <PracticeRatingModal
@@ -124,7 +133,7 @@ const handleBack = (): void => {
     <GuideSteps
       :visible="showGuide"
       highlight-selector=".btn-1"
-      position-offset-y="60%"
+      position-offset-y="85%"
       @complete="handleRatingGuideComplete"
     >
       <GuideStepsItem audio-src="/audio/py_6_008.MP3">
diff --git a/src/views/film/video/index.vue b/src/views/film/video/index.vue
index 86591b8..3321f89 100644
--- a/src/views/film/video/index.vue
+++ b/src/views/film/video/index.vue
@@ -2,6 +2,7 @@
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
+import DownloadButton from '@/components/DownloadButton.vue'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import UnfinishedLearningPrompt from '@/components/UnfinishedLearningPrompt'
@@ -250,18 +251,16 @@ const onEnded = () => {
   }
 
   if (key.value === 'profession') {
-    markCurrentProfessionVideoWatched()
-
-    // 检查是否是"虚实"（index 2）或"分镜头"（index 4）
+    // 虚实（index 2）和分镜头（index 4）需要答题完成后才计入学习完成
     if (currentVideoIndex.value === 2 || currentVideoIndex.value === 4) {
-      // 暂停播放并显示答题窗口
       playing.value = false
       questions.value = getQuestionsForVideo(currentVideoIndex.value)
       showQuiz.value = true
-    } else {
-      // 其他视频正常切换
-      handleVideoChange()
+      return
     }
+
+    markCurrentProfessionVideoWatched()
+    handleVideoChange()
   }
 }
 
@@ -292,6 +291,7 @@ const handleStepNavigationClose = () => {
 
 // 答题完成后的处理
 const handleQuestionsComplete = () => {
+  markCurrentProfessionVideoWatched()
   showQuiz.value = false
   // 答题完成后继续播放下一个视频
   handleVideoChange()
@@ -351,7 +351,7 @@ onMounted(() => {
     <!-- 步骤导航按钮 -->
     <button
       v-if="key === 'profession'"
-      class="step-navigation-btn absolute right-4 top-1/2 z-10 -translate-y-1/2 w-20 h-20 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
+      class="step-navigation-btn absolute right-4 top-1/2 z-10 -translate-y-1/2 w-16 h-16 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
       @click="showStepNavigation = true"
       title="步骤导航"
     >
@@ -399,13 +399,17 @@ onMounted(() => {
     <div
       v-else-if="key === 'idea'"
       :src="image"
-      class="cursor-pointer"
+      class="relative cursor-pointer"
       @click="handleIdeaImageClick"
     >
       <img
         :src="ideaImage"
         alt=""
       />
+      <DownloadButton
+        :image-url="ideaImage"
+        file-name="电影感思路提点.png"
+      />
     </div>
   </div>
 
diff --git a/src/views/film/work/components/WorkSideSwitcher.vue b/src/views/film/work/components/WorkSideSwitcher.vue
index f02b699..4187432 100644
--- a/src/views/film/work/components/WorkSideSwitcher.vue
+++ b/src/views/film/work/components/WorkSideSwitcher.vue
@@ -51,6 +51,7 @@ const items = computed(() => [
     activeImage: 'work/选中_带三角',
     inactiveImage: 'work/未选中_带三角',
     statusImage: getStatusImage('case'),
+    completed: film.workVideosWatched.case,
   },
   {
     key: 'profession',
@@ -58,6 +59,7 @@ const items = computed(() => [
     activeImage: 'work/选中_带三角',
     inactiveImage: 'work/未选中_带三角',
     statusImage: getStatusImage('profession'),
+    completed: film.workVideosWatched.profession,
   },
   {
     key: 'idea',
@@ -65,6 +67,7 @@ const items = computed(() => [
     activeImage: 'work/选中_带三角',
     inactiveImage: 'work/未选中_带三角',
     statusImage: getStatusImage('idea'),
+    completed: film.workVideosWatched.idea,
   },
 ])
 
diff --git a/src/views/home/action.vue b/src/views/home/action.vue
index 31c1ad3..5120a34 100644
--- a/src/views/home/action.vue
+++ b/src/views/home/action.vue
@@ -2,17 +2,17 @@
 defineOptions({
   name: 'Action',
 })
-import {
-  getBackgroundImage,
-  getPublicPath,
-  IMAGE_PATHS,
-  getStaticImage,
-} from '@/utils'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import { ModuleSwitcher } from './components/ModuleSwitcher'
-import StudyProgressPopup from './components/StudyProgressPopup.vue'
-import { computed, ref, onMounted, onActivated, nextTick } from 'vue'
-import { useRouter, type RouteRecordName } from 'vue-router'
+import { NewbieNavigation } from './components/NewbieNavigation'
+import {
+  ModuleMedalPopup,
+  useModuleMedalPopup,
+} from './components/ModuleMedalPopup'
+import { StudyProgressPopup } from './components/StudyProgressPopup'
+import { computed, ref, onMounted, onActivated, nextTick, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import {
   useUserStore,
   useFilmStore,
@@ -26,51 +26,19 @@ import {
   getBasicElementsProgress,
   getOverallStudyProgress,
   getProductionModuleProgress,
-} from './components/studyProgressUtils'
+} from '@/config/studyProgress'
 import {
   basicElementsEditingVideoKeys,
   basicElementsFoundationVideoKeys,
   basicElementsShootingVideoKeys,
 } from '@/config/moduleStepMap'
 
-const compositionVideoKeys = basicElementsFoundationVideoKeys.filter((key) =>
-  key.startsWith('basic-composition:'),
-)
-const lightVideoKeys = basicElementsFoundationVideoKeys.filter((key) =>
-  key.startsWith('basic-light:'),
-)
-const cameraMovementVideoKeys = basicElementsFoundationVideoKeys.filter((key) =>
-  key.startsWith('basic-camera-movement:'),
-)
-
-type GuideChildNode = {
-  id: number
-  label: string
-  icon: string
-  routeName: RouteRecordName
-  videoKeys: readonly string[]
-}
-
-type GuideNode = {
-  id: number
-  num: string
-  label: string
-  x: number
-  y: number
-  hasChildren: boolean
-  routeName?: RouteRecordName
-  children?: GuideChildNode[]
-  videoKeys: readonly string[]
-}
-
 const actionGuideKey = 'home-action-guide'
 const homeGuideKey = 'home-action-home-guide'
 const completionGuideKey = 'home-action-completion-guide'
 const modulesGuideKey = 'home-action-modules-guide'
-const activeActionGuide = ref<
-  'home' | 'unlocked' | 'element' | 'completion' | 'modules' | null
->(null)
-const activeGuideStepHasHighlight = ref(false)
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+const activeActionGuide = ref<ActionGuideKey | null>(null)
 const pendingElementGuide = ref(false)
 const studyProgressVisible = ref(false)
 
@@ -98,37 +66,6 @@ const homeGuideSteps: GuideStep[] = [
   },
 ]
 
-const unlockedHomeGuideSteps: GuideStep[] = [
-  {
-    id: 'home-guide-welcome',
-    content: '欢迎来到新手模块！在这里，我会带着你解锁短视频创作的核心基本功！',
-    audioSrc: getPublicPath('audio/py_1_001.MP3'),
-  },
-  {
-    id: 'home-guide-map',
-    content:
-      '我们会读懂构图、用好光线、灵活运镜，了解基础拍摄技巧和剪映软件的基本操作。',
-    audioSrc: getPublicPath('audio/py_1_002.MP3'),
-  },
-  {
-    id: 'home-guide-start-node',
-    content: '选择任意节点开始学习！',
-    highlightSelector: '.guide-content',
-    positionOffsetY: '20%',
-    audioSrc: getPublicPath('audio/py_1_003.MP3'),
-  },
-]
-
-const elementGuideSteps: GuideStep[] = [
-  {
-    id: 'home-guide-start-element',
-    highlightSelector: '.child-node-buttons',
-    content: '选择任意要素开始学习！',
-    positionOffsetY: '20%',
-    audioSrc: getPublicPath('audio/py_1_004.MP3'),
-  },
-]
-
 const completionGuideSteps: GuideStep[] = [
   {
     id: 'home-guide-completion',
@@ -160,64 +97,56 @@ const modulesGuideSteps: GuideStep[] = [
   },
 ]
 
-const actionGuideStepsMap = {
-  home: homeGuideSteps,
-  unlocked: unlockedHomeGuideSteps,
-  element: elementGuideSteps,
-  completion: completionGuideSteps,
-  modules: modulesGuideSteps,
-}
+type ActionGuideKey = 'home' | 'unlocked' | 'element' | 'completion' | 'modules'
 
-const startActionGuide = (guide: keyof typeof actionGuideStepsMap) => {
-  activeGuideStepHasHighlight.value = Boolean(
-    actionGuideStepsMap[guide][0]?.highlightSelector,
-  )
+const startActionGuide = (guide: ActionGuideKey) => {
   activeActionGuide.value = guide
 }
 
-const handleGuideStepChange = (step: GuideStep | null) => {
-  activeGuideStepHasHighlight.value = Boolean(step?.highlightSelector)
-}
-
 const handleHomeGuideComplete = () => {
   activeActionGuide.value = null
-  activeGuideStepHasHighlight.value = false
   basicElements.markGuideShown(homeGuideKey)
+  nextTick(showPendingBasicMedal)
 }
 
-const handleUnlockedHomeGuideComplete = () => {
+const handlePanelGuideComplete = (key: 'unlocked' | 'element') => {
   activeActionGuide.value = null
-  activeGuideStepHasHighlight.value = false
-  basicElements.markUnlockedGuideFinished()
-}
-
-const handleElementGuideComplete = () => {
-  activeActionGuide.value = null
-  activeGuideStepHasHighlight.value = false
-  basicElements.markGuideShown(actionGuideKey)
+  if (key === 'unlocked') {
+    basicElements.markUnlockedGuideFinished()
+  } else {
+    basicElements.markGuideShown(actionGuideKey)
+  }
+  nextTick(showPendingBasicMedal)
 }
 
 const handleCompletionGuideComplete = () => {
   activeActionGuide.value = null
-  activeGuideStepHasHighlight.value = false
   basicElements.markGuideShown(completionGuideKey)
+  nextTick(showPendingBasicMedal)
 }
 
 const handleModulesGuideComplete = () => {
   activeActionGuide.value = null
-  activeGuideStepHasHighlight.value = false
   basicElements.markGuideShown(modulesGuideKey)
+  nextTick(showPendingBasicMedal)
 }
 
+const route = useRoute()
 const router = useRouter()
 const user = useUserStore()
 const film = useFilmStore()
 const vlog = useVlogStore()
 const interview = useInterviewStore()
 const basicElements = useBasicElementsStore()
+const {
+  activeMedalKey,
+  visible: medalPopupVisible,
+  showMedalIfNeeded,
+  closeMedal,
+} = useModuleMedalPopup()
+const pendingBasicMedal = ref(false)
 
 // 响应式状态
-const guideShow = ref(false)
 const selectedModule = ref<'vlog' | 'film' | 'interview'>('vlog')
 const isImageLoading = ref(false)
 
@@ -255,11 +184,23 @@ const isAllBasicElementsCompleted = computed(() =>
     (key) => basicElements.learningVideosWatched[key] === true,
   ),
 )
-const shouldShowGuideMask = computed(
-  () => !isAllBasicElementsCompleted.value || guideShow.value,
-)
-const shouldMakeGuideMaskTransparent = computed(
-  () => activeGuideStepHasHighlight.value && !guideShow.value,
+const showPendingBasicMedal = () => {
+  if (!pendingBasicMedal.value) return
+  if (route.name !== 'Action') return
+  if (activeActionGuide.value !== null) return
+  pendingBasicMedal.value = false
+  showMedalIfNeeded('basic')
+}
+const handleCloseMedalPopup = () => {
+  closeMedal()
+}
+const handleViewProgressFromMedal = () => {
+  closeMedal()
+  studyProgressVisible.value = true
+}
+// 基础要素未完成时的守门员遮罩：阻止进入模块
+const shouldShowBasicElementsMask = computed(
+  () => !isAllBasicElementsCompleted.value,
 )
 
 // 预加载所有图片
@@ -275,14 +216,12 @@ const preloadImages = () => {
 
 // 事件处理函数
 const handleOpenGuide = () => {
-  guideShow.value = true
   if (activeActionGuide.value === null && !hasFinishedUnlockedGuide.value) {
     startActionGuide('unlocked')
   }
 }
 
 const handleCloseGuide = () => {
-  guideShow.value = false
   if (isGuideNewUser.value) {
     basicElements.setIsGuideNewUser(false)
   }
@@ -325,11 +264,6 @@ const selectedImage = computed(() => {
   return getBackgroundImage(imageMap[selectedModule.value])
 })
 
-const filmViewed = computed(() => ({
-  ...film.viewed,
-  FilmOnsiteShooting: film.allOnsiteScenesViewed,
-  FilmEditing: film.allEditingVideosWatched,
-}))
 const totalStudyPercent = computed(() =>
   getOverallStudyProgress([
     getBasicElementsProgress(
@@ -341,17 +275,15 @@ const totalStudyPercent = computed(() =>
       'vlog',
       vlog.isRouteViewed,
       vlog.workVideosWatched,
+      vlog.practiceProgress,
     ),
     getProductionModuleProgress(
       'interview',
       interview.isRouteViewed,
       interview.workVideosWatched,
+      interview.practiceProgress,
     ),
-    getProductionModuleProgress(
-      'film',
-      filmViewed.value,
-      film.workVideosWatched,
-    ),
+    film.progressPercent,
   ]),
 )
 
@@ -374,92 +306,8 @@ const handleClearCache = () => {
   user.resetUserState()
 }
 
-// 新手导航数据
-const nodes: GuideNode[] = [
-  {
-    id: 1,
-    num: '1',
-    label: '三大基础要素',
-    x: 20,
-    y: 30,
-    hasChildren: true,
-    videoKeys: basicElementsFoundationVideoKeys,
-    children: [
-      {
-        id: 1,
-        label: '构图',
-        icon: 'home/action/新手导航构图',
-        routeName: 'Composition',
-        videoKeys: compositionVideoKeys,
-      },
-      {
-        id: 2,
-        label: '光',
-        icon: 'home/action/新手导航光',
-        routeName: 'Light',
-        videoKeys: lightVideoKeys,
-      },
-      {
-        id: 3,
-        label: '运镜',
-        icon: 'home/action/新手导航运镜',
-        routeName: 'CameraMovement',
-        videoKeys: cameraMovementVideoKeys,
-      },
-    ],
-  },
-  {
-    id: 2,
-    num: '2',
-    label: '基础拍摄技巧',
-    x: 50,
-    y: 60,
-    hasChildren: false,
-    routeName: 'BasicShootingSkills',
-    videoKeys: basicElementsShootingVideoKeys,
-  },
-  {
-    id: 3,
-    num: '3',
-    label: '短视频剪辑技巧',
-    x: 80,
-    y: 30,
-    hasChildren: false,
-    routeName: 'ShortVideoEditingSkills',
-    videoKeys: basicElementsEditingVideoKeys,
-  },
-]
-
-const guideStatusIcons = {
-  done: getStaticImage('home/新手导航/已完成'),
-  undone: getStaticImage('home/新手导航/未完成'),
-}
-const isVideoKeysCompleted = (keys: readonly string[]) => {
-  if (keys.length === 0) return false
-  return keys.every((key) => basicElements.learningVideosWatched[key] === true)
-}
-
-// 显示子节点的节点ID
-const showChildrenNodeId = ref<number | null>(null)
-
-// 处理节点点击
-const handleNodeClick = (node: GuideNode, event?: MouseEvent) => {
-  event?.stopPropagation()
-
-  if (!node.hasChildren) {
-    showChildrenNodeId.value = null
-    if (node.routeName) {
-      router.push({ name: node.routeName })
-    }
-    return
-  }
-
-  if (showChildrenNodeId.value === node.id) {
-    showChildrenNodeId.value = null
-    return
-  }
-
-  showChildrenNodeId.value = node.id
+// 新手导航面板：展开「有子节点」节点时，按条件预约元素引导
+const onExpandChildren = () => {
   if (activeActionGuide.value !== 'unlocked' && !hasFinishedActionGuide.value) {
     pendingElementGuide.value = true
   }
@@ -471,17 +319,6 @@ const handleChildNodeAfterEnter = () => {
   startActionGuide('element')
 }
 
-// 处理子节点点击
-const handleChildNodeClick = (childNode: GuideChildNode, event: MouseEvent) => {
-  event.stopPropagation()
-  router.push({ name: childNode.routeName })
-}
-
-// 点击外部关闭子节点
-const handleClickOutside = () => {
-  showChildrenNodeId.value = null
-}
-
 const handleReturnHome = () => {
   router.push('/')
 }
@@ -491,7 +328,16 @@ onMounted(() => {
   preloadImages()
 })
 
+watch(isAllBasicElementsCompleted, (completed, previousCompleted) => {
+  if (!completed || previousCompleted !== false) return
+  pendingBasicMedal.value = true
+  nextTick(showPendingBasicMedal)
+})
+
 onActivated(() => {
+  if (isAllBasicElementsCompleted.value) {
+    pendingBasicMedal.value = true
+  }
   if (activeActionGuide.value !== null) return
   if (isAllBasicElementsCompleted.value && !hasFinishedCompletionGuide.value) {
     startActionGuide('completion')
@@ -499,7 +345,9 @@ onActivated(() => {
   }
   if (!hasFinishedHomeGuide.value && !hasFinishedActionGuide.value) {
     startActionGuide('home')
+    return
   }
+  nextTick(showPendingBasicMedal)
 })
 </script>
 
@@ -510,35 +358,18 @@ onActivated(() => {
       :steps="homeGuideSteps"
       position-offset-y="82%"
       @close="handleHomeGuideComplete"
-      @step-change="handleGuideStepChange"
-    />
-    <GuideSteps
-      v-if="activeActionGuide === 'unlocked'"
-      :steps="unlockedHomeGuideSteps"
-      position-offset-y="82%"
-      @close="handleUnlockedHomeGuideComplete"
-      @step-change="handleGuideStepChange"
-    />
-    <GuideSteps
-      v-if="activeActionGuide === 'element'"
-      :steps="elementGuideSteps"
-      position-offset-y="82%"
-      @close="handleElementGuideComplete"
-      @step-change="handleGuideStepChange"
     />
     <GuideSteps
       v-if="activeActionGuide === 'completion'"
       :steps="completionGuideSteps"
       position-offset-y="82%"
       @close="handleCompletionGuideComplete"
-      @step-change="handleGuideStepChange"
     />
     <GuideSteps
       v-if="activeActionGuide === 'modules'"
       :steps="modulesGuideSteps"
       position-offset-y="82%"
       @close="handleModulesGuideComplete"
-      @step-change="handleGuideStepChange"
     />
 
     <!-- 返回首页按钮 -->
@@ -555,21 +386,33 @@ onActivated(() => {
     ></div>
 
     <!-- 学习进度 -->
-    <div class="absolute top-0 left-0">
-      <ImgButton
-        image="home/action/学习进度入口"
-        @click="handleOpenStudyProgress"
-      />
+    <div
+      class="absolute top-0 left-0 z-40 w-[382px] h-[304px] transition-all hover:scale-105 hover:brightness-110 cursor-pointer"
+      :style="{
+        backgroundImage: getBackgroundImage('home/action/学习进度入口'),
+      }"
+      @click="handleOpenStudyProgress"
+    >
+      <div
+        class="absolute top-[4.2rem] left-[150px] flex h-[150px] w-[150px] items-center justify-center overflow-visible pointer-events-none"
+        :style="{
+          transform: `rotate(-14deg) skewX(${isSafari ? -6 : -18}deg)`,
+        }"
+      >
+        <span class="whitespace-nowrap text-5xl italic text-white">
+          {{ totalStudyPercent }}%
+        </span>
+      </div>
     </div>
 
     <StudyProgressPopup v-model="studyProgressVisible" />
 
-    <div
-      class="absolute top-[5.1rem] left-[168px] w-[110px] h-[116px] flex items-center justify-center pointer-events-none"
-      style="transform: rotateX(16deg) rotateY(-6deg) rotateZ(-12deg)"
-    >
-      <span class="text-5xl italic text-white">{{ totalStudyPercent }}%</span>
-    </div>
+    <ModuleMedalPopup
+      :visible="medalPopupVisible"
+      :module-key="activeMedalKey"
+      @close="handleCloseMedalPopup"
+      @view-progress="handleViewProgressFromMedal"
+    />
 
     <!-- <div
       class="absolute top-4 left-4 flex items-center text-white text-xl bg-black/10 px-4 py-2 rounded-xl"
@@ -613,242 +456,22 @@ onActivated(() => {
       class="absolute bottom-0 right-0 z-50 skill-tree"
     />
 
-    <!-- 新手导航遮罩：未完成提示词时阻止进入模块；完成后打开导航时突出导航区域 -->
+    <!-- 基础要素未完成时的守门员遮罩：阻止进入模块 -->
     <div
-      v-if="shouldShowGuideMask"
-      :class="[
-        'absolute inset-0 z-10',
-        shouldMakeGuideMaskTransparent ? 'bg-black/0' : 'bg-black/50',
-      ]"
+      v-if="shouldShowBasicElementsMask"
+      class="absolute inset-0 z-10"
+      :style="{ backgroundImage: getBackgroundImage('home/action/首页锁') }"
     ></div>
 
-    <!-- 新手指导 -->
-    <div
-      class="absolute bottom-0 left-0 w-full h-[497px] bg-cover bg-center bg-no-repeat z-20 pointer-events-none"
-      :style="{
-        backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BTN),
-      }"
-      v-if="!guideShow"
-    >
-      <div
-        class="absolute bottom-20 right-[calc(50%-20px)] translate-x-1/2 w-20 h-20 cursor-pointer pointer-events-auto newUserGuide"
-        @click="handleOpenGuide"
-      ></div>
-    </div>
-
-    <div
-      class="absolute bottom-0 left-0 w-full h-[911px] bg-cover bg-center bg-no-repeat z-40 flex flex-col items-center justify-center pt-40"
-      :style="{
-        backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BG),
-      }"
-      v-else
-    >
-      <ImgButton
-        :image="IMAGE_PATHS.ACTION.DOWN"
-        class="absolute top-60 right-1/2 translate-x-1/2 z-50"
-        @click="handleCloseGuide"
-      />
-
-      <!-- 新手导航内容 -->
-      <div class="relative w-[880px] h-[400px] mt-20">
-        <div
-          class="w-full h-full relative guide-content"
-          @click="handleClickOutside"
-        >
-          <!-- 标题区域 -->
-          <div
-            class="text-center mt-10 mb-8 transition-opacity duration-300"
-            :class="showChildrenNodeId !== null ? 'opacity-35' : 'opacity-100'"
-          >
-            <h2
-              class="text-5xl font-bold mb-3 text-[#7bfffd] tracking-wider drop-shadow-lg"
-            >
-              新手导航
-            </h2>
-            <p class="text-4xl text-white font-bold drop-shadow-md">
-              点击节点即可开始学习
-            </p>
-          </div>
-
-          <!-- 节点图表 -->
-          <div class="absolute inset-0 top-[60px] btn-items">
-            <!-- 连线 (SVG) -->
-            <svg class="absolute inset-0 w-full h-full pointer-events-none">
-              <!-- 左侧装饰线 -> 节点1 -->
-              <line
-                x1="0%"
-                y1="45%"
-                :x2="nodes[0].x + '%'"
-                :y2="nodes[0].y + '%'"
-                stroke="#7bfffd"
-                stroke-width="5"
-                stroke-linecap="round"
-              />
-              <!-- 节点1 -> 节点2 -->
-              <line
-                :x1="nodes[0].x + '%'"
-                :y1="nodes[0].y + '%'"
-                :x2="nodes[1].x + '%'"
-                :y2="nodes[1].y + '%'"
-                stroke="#7bfffd"
-                stroke-width="5"
-                stroke-linecap="round"
-                class="transition-opacity duration-300"
-                :class="
-                  showChildrenNodeId !== null ? 'opacity-35' : 'opacity-100'
-                "
-              />
-              <!-- 节点2 -> 节点3 -->
-              <line
-                :x1="nodes[1].x + '%'"
-                :y1="nodes[1].y + '%'"
-                :x2="nodes[2].x + '%'"
-                :y2="nodes[2].y + '%'"
-                stroke="#7bfffd"
-                stroke-width="5"
-                stroke-linecap="round"
-                class="transition-opacity duration-300"
-                :class="
-                  showChildrenNodeId !== null ? 'opacity-35' : 'opacity-100'
-                "
-              />
-              <!-- 节点3 -> 右侧装饰线 -->
-              <line
-                :x1="nodes[2].x + '%'"
-                :y1="nodes[2].y + '%'"
-                x2="100%"
-                y2="45%"
-                stroke="#7bfffd"
-                stroke-width="5"
-                stroke-linecap="round"
-                class="transition-opacity duration-300"
-                :class="
-                  showChildrenNodeId !== null ? 'opacity-35' : 'opacity-100'
-                "
-              />
-            </svg>
-
-            <!-- 节点 -->
-            <div
-              v-for="node in nodes"
-              :key="node.id"
-              class="absolute transform -translate-x-1/2 -translate-y-1/2 transition-opacity duration-300"
-              :class="
-                showChildrenNodeId !== null && showChildrenNodeId !== node.id
-                  ? 'opacity-35'
-                  : 'opacity-100'
-              "
-              :style="{ left: node.x + '%', top: node.y + '%' }"
-              @click="handleNodeClick(node, $event)"
-            >
-              <div
-                class="cursor-pointer flex flex-col items-center group transition-all duration-300 hover:scale-110"
-              >
-                <!-- 圆圈 -->
-                <div
-                  class="relative w-24 h-24 rounded-full flex items-center justify-center text-5xl font-bold text-white z-10 transition-all duration-300 group-hover:bg-[#ff4d8c]"
-                  :class="
-                    showChildrenNodeId === node.id
-                      ? 'bg-[#ff4d8c] shadow-[0_0_20px_rgba(255,77,140,0.6)]'
-                      : 'bg-[#60c8db] shadow-[0_0_20px_rgba(96, 200, 219,0.6)]'
-                  "
-                >
-                  {{ node.num }}
-                  <!-- 选中状态的光晕 -->
-                  <div
-                    v-if="showChildrenNodeId === node.id"
-                    class="absolute inset-0 rounded-full border-4 border-white/20 animate-pulse"
-                  ></div>
-                  <!-- 完成状态指示 -->
-                  <img
-                    class="absolute -right-2 -top-2 w-10 h-10 pointer-events-none drop-shadow"
-                    :src="
-                      isVideoKeysCompleted(node.videoKeys)
-                        ? guideStatusIcons.done
-                        : guideStatusIcons.undone
-                    "
-                    alt=""
-                  />
-                </div>
-                <!-- 标签 -->
-                <div
-                  class="mt-2 text-4xl font-bold text-white tracking-wider drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)] whitespace-nowrap"
-                >
-                  {{ node.label }}
-                </div>
-              </div>
-
-              <!-- 子节点图标（当点击三大基础要素时显示） -->
-              <Transition
-                name="child-node-pop"
-                @after-enter="handleChildNodeAfterEnter"
-              >
-                <div
-                  v-if="node.hasChildren && showChildrenNodeId === node.id"
-                  class="child-node-buttons absolute -top-48 left-1/2 z-20 flex -translate-x-1/2 flex-col items-center"
-                >
-                  <div
-                    class="relative flex rounded-[30px] bg-[rgba(78,195,217,1)] backdrop-filter px-3 py-2 shadow-[0_0_0_2px_rgba(250,250,250,1),0_0_20px_rgba(121,252,249,1)] after:absolute after:left-1/2 after:top-[calc(100%-9px)] after:h-5 after:w-5 after:-translate-x-1/2 after:rotate-45 after:border-r-2 after:border-b-2 after:border-white after:bg-[rgba(78,195,217,1)]"
-                  >
-                    <div
-                      v-for="childNode in node.children"
-                      :key="childNode.id"
-                      class="group/child relative z-10 flex flex-col items-center cursor-pointer"
-                      @click.stop="handleChildNodeClick(childNode, $event)"
-                    >
-                      <!-- 图标 -->
-                      <div
-                        class="relative w-36 flex items-center justify-center transition-all duration-300 hover:scale-110"
-                      >
-                        <div
-                          class="absolute inset-x-5 inset-y-4 rounded-full bg-[#7bfffd]/12 blur-xl opacity-60 transition-opacity duration-300 group-hover/child:opacity-100"
-                        ></div>
-                        <img
-                          class="relative z-10 drop-shadow-[0_0_10px_rgba(123,255,253,0.45)] transition-all duration-300 group-hover/child:brightness-125 group-hover/child:drop-shadow-[0_0_18px_rgba(123,255,253,0.8)]"
-                          :src="getStaticImage(childNode.icon)"
-                          :alt="childNode.label"
-                        />
-                        <!-- 完成状态指示 -->
-                        <img
-                          class="absolute right-6 top-2 z-20 w-9 h-9 pointer-events-none drop-shadow"
-                          :src="
-                            isVideoKeysCompleted(childNode.videoKeys)
-                              ? guideStatusIcons.done
-                              : guideStatusIcons.undone
-                          "
-                          alt=""
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </Transition>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <NewbieNavigation
+      :active-guide="activeActionGuide"
+      @open-panel="handleOpenGuide"
+      @close-panel="handleCloseGuide"
+      @expand-children="onExpandChildren"
+      @children-after-enter="handleChildNodeAfterEnter"
+      @guide-complete="handlePanelGuideComplete"
+    />
   </div>
 </template>
 
-<style scoped>
-.child-node-pop-enter-active,
-.child-node-pop-leave-active {
-  transition:
-    opacity 0.22s ease,
-    transform 0.22s cubic-bezier(0.2, 0.9, 0.2, 1.1);
-  transform-origin: bottom center;
-}
-
-.child-node-pop-enter-from,
-.child-node-pop-leave-to {
-  opacity: 0;
-  transform: translateX(-50%) translateY(10px) scale(0.86);
-}
-
-.child-node-pop-enter-to,
-.child-node-pop-leave-from {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0) scale(1);
-}
-</style>
+<style scoped></style>
diff --git a/src/views/home/components/ModuleMedalPopup/ModuleMedalPopup.vue b/src/views/home/components/ModuleMedalPopup/ModuleMedalPopup.vue
new file mode 100644
index 0000000..37b5250
--- /dev/null
+++ b/src/views/home/components/ModuleMedalPopup/ModuleMedalPopup.vue
@@ -0,0 +1,232 @@
+<script lang="ts" setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { ImgButton, Overlay } from '@/components'
+import { getStaticImage } from '@/utils'
+import { moduleMedalConfig, type MedalModuleKey } from './moduleMedalConfig'
+
+defineOptions({
+  name: 'ModuleMedalPopup',
+})
+
+const props = defineProps<{
+  visible: boolean
+  moduleKey: MedalModuleKey | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'view-progress'): void
+}>()
+
+const phase = ref<'medal' | 'content'>('medal')
+const shouldRenderContent = ref(false)
+const phaseTimer = ref<number>()
+
+const currentConfig = computed(() =>
+  props.moduleKey ? moduleMedalConfig[props.moduleKey] : null,
+)
+
+const titleSrc = computed(() =>
+  currentConfig.value ? getStaticImage(currentConfig.value.titleImage) : '',
+)
+const medalSrc = computed(() =>
+  currentConfig.value ? getStaticImage(currentConfig.value.medalImage) : '',
+)
+
+const clearPhaseTimer = () => {
+  window.clearTimeout(phaseTimer.value)
+  phaseTimer.value = undefined
+}
+
+const startAnimation = async () => {
+  clearPhaseTimer()
+  phase.value = 'medal'
+  shouldRenderContent.value = false
+  await nextTick()
+  phaseTimer.value = window.setTimeout(() => {
+    phase.value = 'content'
+    shouldRenderContent.value = true
+  }, 850)
+}
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      startAnimation()
+      return
+    }
+    clearPhaseTimer()
+    phase.value = 'medal'
+    shouldRenderContent.value = false
+  },
+)
+
+onBeforeUnmount(clearPhaseTimer)
+
+const handleClose = () => {
+  emit('close')
+}
+
+const handleViewProgress = () => {
+  emit('view-progress')
+}
+</script>
+
+<template>
+  <Overlay
+    :visible="visible && moduleKey !== null"
+    animation="fade"
+    :duration="260"
+    :clickable="false"
+    background="transparent"
+    :z-index="3000"
+    content-class="w-full h-full"
+  >
+    <div class="relative h-full w-full overflow-hidden">
+      <img
+        class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500"
+        :class="shouldRenderContent ? 'opacity-100' : 'opacity-0'"
+        :src="getStaticImage('components/medal/半透明背景')"
+        alt=""
+      />
+
+      <div class="absolute inset-0 flex flex-col items-center">
+        <img
+          v-if="titleSrc"
+          class="mt-[60px] max-h-[155px] max-w-[1210px] object-contain transition-all duration-500"
+          :class="
+            shouldRenderContent
+              ? 'translate-y-0 opacity-100'
+              : '-translate-y-5 opacity-0'
+          "
+          :src="titleSrc"
+          alt=""
+        />
+
+        <div
+          class="relative mt-[36px] flex h-[560px] w-[680px] items-center justify-center"
+        >
+          <div
+            class="medal-ring pointer-events-none absolute h-[520px] w-[520px] rounded-full"
+          ></div>
+          <div
+            class="medal-aura pointer-events-none absolute h-[470px] w-[470px] rounded-full transition-opacity duration-500"
+            :class="shouldRenderContent ? 'opacity-100' : 'opacity-80'"
+          ></div>
+          <img
+            v-if="medalSrc"
+            :key="moduleKey ?? 'none'"
+            class="medal-image relative z-10 max-h-[560px] max-w-[640px] object-contain"
+            :class="phase === 'content' ? 'medal-breathe' : 'medal-pop'"
+            :src="medalSrc"
+            alt=""
+          />
+        </div>
+
+        <img
+          class="mt-[-6px] object-contain transition-all delay-150 duration-500"
+          :class="
+            shouldRenderContent
+              ? 'translate-y-0 opacity-100'
+              : 'translate-y-5 opacity-0'
+          "
+          :src="getStaticImage('components/medal/收集后可在【我的进度】中查看')"
+          alt=""
+        />
+
+        <div
+          class="mt-[26px] flex items-center gap-[160px] transition-all delay-200 duration-500"
+          :class="
+            shouldRenderContent
+              ? 'translate-y-0 opacity-100'
+              : 'translate-y-5 opacity-0'
+          "
+        >
+          <ImgButton
+            :image="'components/medal/立即查看'"
+            @click="handleViewProgress"
+          />
+
+          <ImgButton
+            :image="'components/medal/关闭'"
+            @click="handleClose"
+          />
+        </div>
+      </div>
+    </div>
+  </Overlay>
+</template>
+
+<style scoped>
+.medal-pop {
+  animation: medal-pop-in 850ms cubic-bezier(0.18, 0.9, 0.24, 1.18) both;
+}
+
+.medal-breathe {
+  animation: medal-breathe 1800ms ease-in-out infinite;
+  filter: drop-shadow(0 0 28px rgba(255, 246, 186, 0.78));
+}
+
+.medal-ring {
+  background: radial-gradient(
+    circle,
+    rgba(255, 246, 186, 0) 42%,
+    rgba(255, 246, 186, 0.85) 58%,
+    rgba(255, 246, 186, 0) 72%
+  );
+  animation: medal-ring 850ms ease-out both;
+}
+
+.medal-aura {
+  background: radial-gradient(
+    circle,
+    rgba(255, 246, 186, 0.52) 0%,
+    rgba(255, 215, 138, 0.28) 34%,
+    rgba(255, 215, 138, 0) 72%
+  );
+  filter: blur(6px);
+}
+
+@keyframes medal-pop-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.2) rotate(-18deg);
+    filter: drop-shadow(0 0 0 rgba(255, 246, 186, 0));
+  }
+  58% {
+    opacity: 1;
+    transform: scale(1.16) rotate(3deg);
+    filter: drop-shadow(0 0 46px rgba(255, 246, 186, 0.95));
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+    filter: drop-shadow(0 0 26px rgba(255, 246, 186, 0.75));
+  }
+}
+
+@keyframes medal-ring {
+  0% {
+    opacity: 0;
+    transform: scale(0.35);
+  }
+  45% {
+    opacity: 0.85;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.45);
+  }
+}
+
+@keyframes medal-breathe {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.035);
+  }
+}
+</style>
diff --git a/src/views/home/components/ModuleMedalPopup/index.ts b/src/views/home/components/ModuleMedalPopup/index.ts
new file mode 100644
index 0000000..b65826b
--- /dev/null
+++ b/src/views/home/components/ModuleMedalPopup/index.ts
@@ -0,0 +1,3 @@
+export { default as ModuleMedalPopup } from './ModuleMedalPopup.vue'
+export * from './useModuleMedalPopup'
+export * from './moduleMedalConfig'
diff --git a/src/views/home/components/ModuleMedalPopup/moduleMedalConfig.ts b/src/views/home/components/ModuleMedalPopup/moduleMedalConfig.ts
new file mode 100644
index 0000000..fad2c06
--- /dev/null
+++ b/src/views/home/components/ModuleMedalPopup/moduleMedalConfig.ts
@@ -0,0 +1,27 @@
+export type MedalModuleKey = 'basic' | 'vlog' | 'interview' | 'film'
+
+export const moduleMedalConfig = {
+  basic: {
+    label: '新手导航',
+    titleImage: 'components/medal/恭喜获得新手导航模块徽章',
+    medalImage: 'components/medal/新手导航徽章-弹',
+  },
+  vlog: {
+    label: 'Vlog',
+    titleImage: 'components/medal/恭喜获得vlog模块徽章',
+    medalImage: 'components/medal/vlog徽章-弹',
+  },
+  interview: {
+    label: '访谈',
+    titleImage: 'components/medal/恭喜获得访谈模块徽章',
+    medalImage: 'components/medal/访谈徽章-弹',
+  },
+  film: {
+    label: '电影',
+    titleImage: 'components/medal/恭喜获得电影模块徽章',
+    medalImage: 'components/medal/电影徽章-弹',
+  },
+} satisfies Record<
+  MedalModuleKey,
+  { label: string; titleImage: string; medalImage: string }
+>
diff --git a/src/views/home/components/ModuleMedalPopup/useModuleMedalPopup.ts b/src/views/home/components/ModuleMedalPopup/useModuleMedalPopup.ts
new file mode 100644
index 0000000..7ab7c22
--- /dev/null
+++ b/src/views/home/components/ModuleMedalPopup/useModuleMedalPopup.ts
@@ -0,0 +1,49 @@
+import { computed, ref } from 'vue'
+import {
+  useBasicElementsStore,
+  useFilmStore,
+  useInterviewStore,
+  useVlogStore,
+} from '@/stores'
+import type { MedalModuleKey } from './moduleMedalConfig'
+
+// 复用各模块 store 的 guideShown 记录徽章是否已展示：
+// 它已随易班 userDefine 持久化，并在各 store reset 时清空。
+const MEDAL_SHOWN_KEY = 'module-medal-popup'
+
+// 当前展示的徽章 key（运行时 UI 状态，跨页面共享，无需持久化）
+const activeMedalKey = ref<MedalModuleKey | null>(null)
+
+export const useModuleMedalPopup = () => {
+  const storeMap = {
+    basic: useBasicElementsStore(),
+    vlog: useVlogStore(),
+    interview: useInterviewStore(),
+    film: useFilmStore(),
+  }
+
+  const visible = computed(() => activeMedalKey.value !== null)
+
+  const isMedalShown = (key: MedalModuleKey) =>
+    storeMap[key].guideShown[MEDAL_SHOWN_KEY] === true
+
+  const showMedalIfNeeded = (key: MedalModuleKey) => {
+    if (isMedalShown(key)) return
+    activeMedalKey.value = key
+  }
+
+  const closeMedal = () => {
+    const key = activeMedalKey.value
+    if (key) {
+      storeMap[key].markGuideShown(MEDAL_SHOWN_KEY)
+    }
+    activeMedalKey.value = null
+  }
+
+  return {
+    activeMedalKey,
+    visible,
+    showMedalIfNeeded,
+    closeMedal,
+  }
+}
diff --git a/src/views/home/components/NewbieNavigation/NewbieNavigation.vue b/src/views/home/components/NewbieNavigation/NewbieNavigation.vue
new file mode 100644
index 0000000..02c2d52
--- /dev/null
+++ b/src/views/home/components/NewbieNavigation/NewbieNavigation.vue
@@ -0,0 +1,379 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { GuideSteps } from '@/components/Guide'
+import type { GuideStep } from '@/components/Guide/types'
+import { useBasicElementsStore } from '@/stores'
+import {
+  getBackgroundImage,
+  getPublicPath,
+  getStaticImage,
+  IMAGE_PATHS,
+} from '@/utils'
+import {
+  navigationNodes,
+  type GuideChildNode,
+  type GuideNode,
+} from './navigationNodes'
+
+export type NewbieNavigationGuideKey = 'unlocked' | 'element'
+
+defineOptions({
+  name: 'NewbieNavigation',
+})
+
+const props = defineProps<{
+  activeGuide: string | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'open-panel'): void
+  (e: 'close-panel'): void
+  (e: 'expand-children'): void
+  (e: 'children-after-enter'): void
+  (e: 'guide-complete', key: NewbieNavigationGuideKey): void
+}>()
+
+const router = useRouter()
+const basicElements = useBasicElementsStore()
+
+const guideShow = ref(false)
+const showChildrenNodeId = ref<number | null>(null)
+
+const unlockedHomeGuideSteps: GuideStep[] = [
+  {
+    id: 'home-guide-welcome',
+    content: '欢迎来到新手模块！在这里，我会带着你解锁短视频创作的核心基本功！',
+    audioSrc: getPublicPath('audio/py_1_001.MP3'),
+  },
+  {
+    id: 'home-guide-map',
+    content:
+      '我们会读懂构图、用好光线、灵活运镜，了解基础拍摄技巧和剪映软件的基本操作。',
+    audioSrc: getPublicPath('audio/py_1_002.MP3'),
+  },
+  {
+    id: 'home-guide-start-node',
+    content: '选择任意节点开始学习！',
+    highlightSelector: '.guide-content',
+    positionOffsetY: '20%',
+    audioSrc: getPublicPath('audio/py_1_003.MP3'),
+  },
+]
+
+const elementGuideSteps: GuideStep[] = [
+  {
+    id: 'home-guide-start-element',
+    highlightSelector: '.child-node-buttons',
+    content: '选择任意要素开始学习！',
+    positionOffsetY: '20%',
+    audioSrc: getPublicPath('audio/py_1_004.MP3'),
+  },
+]
+
+const guideStatusIcons = {
+  done: getStaticImage('home/新手导航/已完成'),
+  undone: getStaticImage('home/新手导航/未完成'),
+}
+
+const shouldShowGuidePanelMask = computed(() => guideShow.value)
+
+const isVideoKeysCompleted = (keys: readonly string[]) => {
+  if (keys.length === 0) return false
+  return keys.every((key) => basicElements.learningVideosWatched[key] === true)
+}
+
+const handleOpenGuide = () => {
+  guideShow.value = true
+  emit('open-panel')
+}
+
+const handleCloseGuide = () => {
+  guideShow.value = false
+  emit('close-panel')
+}
+
+const handleClickOutside = () => {
+  showChildrenNodeId.value = null
+}
+
+const handleNodeClick = (node: GuideNode, event?: MouseEvent) => {
+  event?.stopPropagation()
+
+  if (!node.hasChildren) {
+    showChildrenNodeId.value = null
+    if (node.routeName) {
+      router.push({ name: node.routeName })
+    }
+    return
+  }
+
+  if (showChildrenNodeId.value === node.id) {
+    showChildrenNodeId.value = null
+    return
+  }
+
+  showChildrenNodeId.value = node.id
+  emit('expand-children')
+}
+
+const handleChildNodeAfterEnter = () => {
+  emit('children-after-enter')
+}
+
+const handleChildNodeClick = (childNode: GuideChildNode, event: MouseEvent) => {
+  event.stopPropagation()
+  router.push({ name: childNode.routeName })
+}
+</script>
+
+<template>
+  <!-- 新手导航面板打开时的背景遮罩：压暗背景突出导航区域 -->
+  <div
+    v-if="shouldShowGuidePanelMask"
+    class="absolute inset-0 z-10 bg-black/50"
+  ></div>
+
+  <!-- 新手指导 -->
+  <div
+    v-if="!guideShow"
+    class="absolute bottom-0 left-0 w-full h-[497px] bg-cover bg-center bg-no-repeat z-20 pointer-events-none"
+    :style="{
+      backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BTN),
+    }"
+  >
+    <div
+      class="absolute bottom-20 right-[calc(50%-20px)] translate-x-1/2 w-20 h-20 cursor-pointer pointer-events-auto newUserGuide"
+      @click="handleOpenGuide"
+    ></div>
+  </div>
+
+  <div
+    v-else
+    class="absolute bottom-0 left-0 w-full h-[911px] bg-cover bg-center bg-no-repeat z-40 flex flex-col items-center justify-center pt-40"
+    :style="{
+      backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BG),
+    }"
+  >
+    <ImgButton
+      :image="IMAGE_PATHS.ACTION.DOWN"
+      class="absolute top-60 right-1/2 translate-x-1/2 z-50"
+      @click="handleCloseGuide"
+    />
+
+    <!-- 新手导航内容 -->
+    <div class="relative w-[880px] h-[400px] mt-20">
+      <div
+        class="w-full h-full relative guide-content"
+        @click="handleClickOutside"
+      >
+        <!-- 标题区域 -->
+        <div
+          class="text-center mt-10 mb-8 transition-opacity duration-300"
+          :class="showChildrenNodeId !== null ? 'opacity-35' : 'opacity-100'"
+        >
+          <h2
+            class="text-5xl font-bold mb-3 text-[#7bfffd] tracking-wider drop-shadow-lg"
+          >
+            新手导航
+          </h2>
+          <p class="text-4xl text-white font-bold drop-shadow-md">
+            点击节点即可开始学习
+          </p>
+        </div>
+
+        <!-- 节点图表 -->
+        <div class="absolute inset-0 top-[60px] btn-items">
+          <!-- 连线 (SVG) -->
+          <svg class="absolute inset-0 w-full h-full pointer-events-none">
+            <!-- 左侧装饰线 -> 节点1 -->
+            <line
+              x1="0%"
+              y1="45%"
+              :x2="navigationNodes[0].x + '%'"
+              :y2="navigationNodes[0].y + '%'"
+              stroke="#7bfffd"
+              stroke-width="5"
+              stroke-linecap="round"
+            />
+            <!-- 节点1 -> 节点2 -->
+            <line
+              :x1="navigationNodes[0].x + '%'"
+              :y1="navigationNodes[0].y + '%'"
+              :x2="navigationNodes[1].x + '%'"
+              :y2="navigationNodes[1].y + '%'"
+              stroke="#7bfffd"
+              stroke-width="5"
+              stroke-linecap="round"
+              class="transition-opacity duration-300"
+              :class="
+                showChildrenNodeId !== null ? 'opacity-35' : 'opacity-100'
+              "
+            />
+            <!-- 节点2 -> 节点3 -->
+            <line
+              :x1="navigationNodes[1].x + '%'"
+              :y1="navigationNodes[1].y + '%'"
+              :x2="navigationNodes[2].x + '%'"
+              :y2="navigationNodes[2].y + '%'"
+              stroke="#7bfffd"
+              stroke-width="5"
+              stroke-linecap="round"
+              class="transition-opacity duration-300"
+              :class="
+                showChildrenNodeId !== null ? 'opacity-35' : 'opacity-100'
+              "
+            />
+            <!-- 节点3 -> 右侧装饰线 -->
+            <line
+              :x1="navigationNodes[2].x + '%'"
+              :y1="navigationNodes[2].y + '%'"
+              x2="100%"
+              y2="45%"
+              stroke="#7bfffd"
+              stroke-width="5"
+              stroke-linecap="round"
+              class="transition-opacity duration-300"
+              :class="
+                showChildrenNodeId !== null ? 'opacity-35' : 'opacity-100'
+              "
+            />
+          </svg>
+
+          <!-- 节点 -->
+          <div
+            v-for="node in navigationNodes"
+            :key="node.id"
+            class="absolute transform -translate-x-1/2 -translate-y-1/2 transition-opacity duration-300"
+            :class="
+              showChildrenNodeId !== null && showChildrenNodeId !== node.id
+                ? 'opacity-35'
+                : 'opacity-100'
+            "
+            :style="{ left: node.x + '%', top: node.y + '%' }"
+            @click="handleNodeClick(node, $event)"
+          >
+            <div
+              class="cursor-pointer flex flex-col items-center group transition-all duration-300 hover:scale-110"
+            >
+              <!-- 圆圈 -->
+              <div
+                class="relative w-24 h-24 rounded-full flex items-center justify-center text-5xl font-bold text-white z-10 transition-all duration-300 group-hover:bg-[#ff4d8c]"
+                :class="
+                  showChildrenNodeId === node.id
+                    ? 'bg-[#ff4d8c] shadow-[0_0_20px_rgba(255,77,140,0.6)]'
+                    : 'bg-[#60c8db] shadow-[0_0_20px_rgba(96, 200, 219,0.6)]'
+                "
+              >
+                {{ node.num }}
+                <!-- 选中状态的光晕 -->
+                <div
+                  v-if="showChildrenNodeId === node.id"
+                  class="absolute inset-0 rounded-full border-4 border-white/20 animate-pulse"
+                ></div>
+                <!-- 完成状态指示 -->
+                <img
+                  class="absolute -right-2 -top-2 w-10 h-10 pointer-events-none drop-shadow"
+                  :src="
+                    isVideoKeysCompleted(node.videoKeys)
+                      ? guideStatusIcons.done
+                      : guideStatusIcons.undone
+                  "
+                  alt=""
+                />
+              </div>
+              <!-- 标签 -->
+              <div
+                class="mt-2 text-4xl font-bold text-white tracking-wider drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)] whitespace-nowrap"
+              >
+                {{ node.label }}
+              </div>
+            </div>
+
+            <!-- 子节点图标（当点击三大基础要素时显示） -->
+            <Transition
+              name="child-node-pop"
+              @after-enter="handleChildNodeAfterEnter"
+            >
+              <div
+                v-if="node.hasChildren && showChildrenNodeId === node.id"
+                class="child-node-buttons absolute -top-48 left-1/2 z-20 flex -translate-x-1/2 flex-col items-center"
+              >
+                <div
+                  class="relative flex rounded-[30px] bg-[rgba(78,195,217,1)] backdrop-filter px-3 py-2 shadow-[0_0_0_2px_rgba(250,250,250,1),0_0_20px_rgba(121,252,249,1)] after:absolute after:left-1/2 after:top-[calc(100%-9px)] after:h-5 after:w-5 after:-translate-x-1/2 after:rotate-45 after:border-r-2 after:border-b-2 after:border-white after:bg-[rgba(78,195,217,1)]"
+                >
+                  <div
+                    v-for="childNode in node.children"
+                    :key="childNode.id"
+                    class="group/child relative z-10 flex flex-col items-center cursor-pointer"
+                    @click.stop="handleChildNodeClick(childNode, $event)"
+                  >
+                    <!-- 图标 -->
+                    <div
+                      class="relative w-36 flex items-center justify-center transition-all duration-300 hover:scale-110"
+                    >
+                      <div
+                        class="absolute inset-x-5 inset-y-4 rounded-full bg-[#7bfffd]/12 blur-xl opacity-60 transition-opacity duration-300 group-hover/child:opacity-100"
+                      ></div>
+                      <img
+                        class="relative z-10 drop-shadow-[0_0_10px_rgba(123,255,253,0.45)] transition-all duration-300 group-hover/child:brightness-125 group-hover/child:drop-shadow-[0_0_18px_rgba(123,255,253,0.8)]"
+                        :src="getStaticImage(childNode.icon)"
+                        :alt="childNode.label"
+                      />
+                      <!-- 完成状态指示 -->
+                      <img
+                        class="absolute right-6 top-2 z-20 w-9 h-9 pointer-events-none drop-shadow"
+                        :src="
+                          isVideoKeysCompleted(childNode.videoKeys)
+                            ? guideStatusIcons.done
+                            : guideStatusIcons.undone
+                        "
+                        alt=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Transition>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <GuideSteps
+    v-if="activeGuide === 'unlocked'"
+    :steps="unlockedHomeGuideSteps"
+    position-offset-y="82%"
+    @close="emit('guide-complete', 'unlocked')"
+  />
+  <GuideSteps
+    v-if="activeGuide === 'element'"
+    :steps="elementGuideSteps"
+    position-offset-y="82%"
+    @close="emit('guide-complete', 'element')"
+  />
+</template>
+
+<style scoped>
+.child-node-pop-enter-active,
+.child-node-pop-leave-active {
+  transition:
+    opacity 0.22s ease,
+    transform 0.22s cubic-bezier(0.2, 0.9, 0.2, 1.1);
+  transform-origin: bottom center;
+}
+
+.child-node-pop-enter-from,
+.child-node-pop-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(10px) scale(0.86);
+}
+
+.child-node-pop-enter-to,
+.child-node-pop-leave-from {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0) scale(1);
+}
+</style>
diff --git a/src/views/home/components/NewbieNavigation/index.ts b/src/views/home/components/NewbieNavigation/index.ts
new file mode 100644
index 0000000..4e671d6
--- /dev/null
+++ b/src/views/home/components/NewbieNavigation/index.ts
@@ -0,0 +1,2 @@
+export { default as NewbieNavigation } from './NewbieNavigation.vue'
+export * from './navigationNodes'
diff --git a/src/views/home/components/NewbieNavigation/navigationNodes.ts b/src/views/home/components/NewbieNavigation/navigationNodes.ts
new file mode 100644
index 0000000..1c6899d
--- /dev/null
+++ b/src/views/home/components/NewbieNavigation/navigationNodes.ts
@@ -0,0 +1,92 @@
+import type { RouteRecordName } from 'vue-router'
+import {
+  basicElementsFoundationVideoKeys,
+  basicElementsShootingVideoKeys,
+  basicElementsEditingVideoKeys,
+} from '@/config/moduleStepMap'
+
+export type GuideChildNode = {
+  id: number
+  label: string
+  icon: string
+  routeName: RouteRecordName
+  videoKeys: readonly string[]
+}
+
+export type GuideNode = {
+  id: number
+  num: string
+  label: string
+  x: number
+  y: number
+  hasChildren: boolean
+  routeName?: RouteRecordName
+  children?: GuideChildNode[]
+  videoKeys: readonly string[]
+}
+
+const compositionVideoKeys = basicElementsFoundationVideoKeys.filter((key) =>
+  key.startsWith('basic-composition:'),
+)
+const lightVideoKeys = basicElementsFoundationVideoKeys.filter((key) =>
+  key.startsWith('basic-light:'),
+)
+const cameraMovementVideoKeys = basicElementsFoundationVideoKeys.filter((key) =>
+  key.startsWith('basic-camera-movement:'),
+)
+
+// 新手导航节点配置
+export const navigationNodes: GuideNode[] = [
+  {
+    id: 1,
+    num: '1',
+    label: '三大基础要素',
+    x: 20,
+    y: 30,
+    hasChildren: true,
+    videoKeys: basicElementsFoundationVideoKeys,
+    children: [
+      {
+        id: 1,
+        label: '构图',
+        icon: 'home/action/新手导航构图',
+        routeName: 'Composition',
+        videoKeys: compositionVideoKeys,
+      },
+      {
+        id: 2,
+        label: '光',
+        icon: 'home/action/新手导航光',
+        routeName: 'Light',
+        videoKeys: lightVideoKeys,
+      },
+      {
+        id: 3,
+        label: '运镜',
+        icon: 'home/action/新手导航运镜',
+        routeName: 'CameraMovement',
+        videoKeys: cameraMovementVideoKeys,
+      },
+    ],
+  },
+  {
+    id: 2,
+    num: '2',
+    label: '基础拍摄技巧',
+    x: 50,
+    y: 60,
+    hasChildren: false,
+    routeName: 'BasicShootingSkills',
+    videoKeys: basicElementsShootingVideoKeys,
+  },
+  {
+    id: 3,
+    num: '3',
+    label: '短视频剪辑技巧',
+    x: 80,
+    y: 30,
+    hasChildren: false,
+    routeName: 'ShortVideoEditingSkills',
+    videoKeys: basicElementsEditingVideoKeys,
+  },
+]
diff --git a/src/views/home/components/StudyProgressPopup.vue b/src/views/home/components/StudyProgressPopup.vue
deleted file mode 100644
index 30b5ec0..0000000
--- a/src/views/home/components/StudyProgressPopup.vue
+++ /dev/null
@@ -1,347 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { getBackgroundImage, getStaticImage } from '@/utils'
-import {
-  useBasicElementsStore,
-  useFilmStore,
-  useInterviewStore,
-  useVlogStore,
-} from '@/stores'
-import {
-  AnchoredProgressBar,
-  ImgButton,
-  computeSegmentLayout,
-  type ProgressSegment,
-} from '@/components'
-import {
-  studyProgressDisplayConfig,
-  type StudyProgressModuleKey,
-} from './studyProgressConfig'
-import {
-  getBasicElementsProgress,
-  getOverallStudyProgress,
-  getProductionModuleProgress,
-} from './studyProgressUtils'
-
-defineOptions({
-  name: 'StudyProgressPopup',
-})
-
-type ProductionModuleKey = Exclude<StudyProgressModuleKey, 'basic'>
-
-type StudyProgressItem = {
-  key: StudyProgressModuleKey
-  progress: number
-  segments: ProgressSegment[]
-  detailSegments?: ProgressSegment[]
-}
-
-const visible = defineModel<boolean>({ default: false })
-
-const basicElements = useBasicElementsStore()
-const vlog = useVlogStore()
-const interview = useInterviewStore()
-const film = useFilmStore()
-
-const ROW_HEIGHT = {
-  basic: 168,
-  vlog: 148,
-  interview: 146,
-  film: 146,
-} satisfies Record<StudyProgressModuleKey, number>
-
-const PRODUCTION_KEYS = new Set<StudyProgressModuleKey>([
-  'vlog',
-  'interview',
-  'film',
-])
-const isProduction = (
-  key: StudyProgressModuleKey,
-): key is ProductionModuleKey => PRODUCTION_KEYS.has(key)
-
-const labelTextShadow =
-  '0 0 5px rgba(255,255,255,0.95), 0 0 10px rgba(54,111,255,0.75), 0 3px 0 rgba(0, 48, 151, 0.75)'
-const totalTextShadow = '4px 5px 0 rgba(40, 130, 253, 0.75)'
-
-const basicProgress = computed(() =>
-  getBasicElementsProgress(
-    basicElements.basicElementsUnlockProgress,
-    basicElements.isBasicElementsUnlock,
-    basicElements.learningVideosWatched,
-  ),
-)
-const vlogProgress = computed(() =>
-  getProductionModuleProgress(
-    'vlog',
-    vlog.isRouteViewed,
-    vlog.workVideosWatched,
-  ),
-)
-const interviewProgress = computed(() =>
-  getProductionModuleProgress(
-    'interview',
-    interview.isRouteViewed,
-    interview.workVideosWatched,
-  ),
-)
-const filmViewed = computed(() => ({
-  ...film.viewed,
-  FilmOnsiteShooting: film.allOnsiteScenesViewed,
-  FilmEditing: film.allEditingVideosWatched,
-}))
-const filmProgress = computed(() =>
-  getProductionModuleProgress('film', filmViewed.value, film.workVideosWatched),
-)
-const totalProgress = computed(() =>
-  getOverallStudyProgress([
-    basicProgress.value,
-    vlogProgress.value,
-    interviewProgress.value,
-    filmProgress.value,
-  ]),
-)
-
-const buildItem = (
-  key: StudyProgressModuleKey,
-  progress: number,
-): StudyProgressItem => {
-  const config = studyProgressDisplayConfig[key]
-  return {
-    key,
-    progress,
-    segments: config.segments,
-    detailSegments: config.detailSegments,
-  }
-}
-
-const progressItems = computed<StudyProgressItem[]>(() => [
-  buildItem('basic', basicProgress.value),
-  buildItem('vlog', vlogProgress.value),
-  buildItem('interview', interviewProgress.value),
-  buildItem('film', filmProgress.value),
-])
-
-const activeDetailKey = ref<ProductionModuleKey | null>(null)
-const closeTimer = ref<number>()
-
-const openDetail = (key: StudyProgressModuleKey) => {
-  if (!isProduction(key)) return
-  window.clearTimeout(closeTimer.value)
-  activeDetailKey.value = key
-}
-
-const scheduleClose = () => {
-  window.clearTimeout(closeTimer.value)
-  closeTimer.value = window.setTimeout(() => {
-    activeDetailKey.value = null
-  }, 120)
-}
-
-const toggleDetail = (key: StudyProgressModuleKey) => {
-  if (!isProduction(key)) return
-  window.clearTimeout(closeTimer.value)
-  activeDetailKey.value = activeDetailKey.value === key ? null : key
-}
-
-const closeDetail = () => {
-  window.clearTimeout(closeTimer.value)
-  activeDetailKey.value = null
-}
-
-const handleClose = () => {
-  closeDetail()
-  visible.value = false
-}
-
-const ZOOM_SEGMENT_ID = 'zoom'
-const NODE_IMAGE = 'home/stuy/节点圆圈'
-const nodeImageSrc = getStaticImage(NODE_IMAGE)
-
-const detailSegmentLayout = (segments: ProgressSegment[]) =>
-  computeSegmentLayout(segments, 20, 85)
-
-const zoomPhaseProgress = (progress: number) =>
-  Math.round(Math.min(100, Math.max(0, ((progress - 20) / 65) * 100)))
-</script>
-
-<template>
-  <Transition
-    enter-active-class="transition-all duration-300 ease-out"
-    enter-from-class="opacity-0 scale-95 blur-[8px]"
-    enter-to-class="opacity-100 scale-100 blur-none"
-    leave-active-class="transition-all duration-300 ease-in"
-    leave-from-class="opacity-100 scale-100 blur-none"
-    leave-to-class="opacity-0 scale-95 blur-[8px]"
-  >
-    <div
-      v-if="visible"
-      class="fixed inset-0 z-[100] bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: getBackgroundImage('home/stuy/学习进度底图') }"
-      @click="closeDetail"
-    >
-      <ImgButton
-        class="absolute right-0 top-0 z-10"
-        :image="'components/close'"
-        @click="handleClose"
-      />
-
-      <div
-        class="absolute left-1/2 top-[14%] flex -translate-x-1/2 items-end pr-10 text-white font-[1000] tracking-widest"
-        :style="{ textShadow: totalTextShadow }"
-      >
-        <span class="text-[clamp(36px,4.5vw,72px)] leading-none">总进度</span>
-        <span class="text-[clamp(36px,4.5vw,72px)] leading-none">
-          {{ totalProgress }}%
-        </span>
-      </div>
-
-      <div
-        class="mx-auto mt-[215px] flex w-[1580px] flex-col gap-2 pl-[254px] pr-[60px]"
-        @click.stop
-      >
-        <div
-          v-for="item in progressItems"
-          :key="item.key"
-          class="relative w-full"
-          :style="{ height: `${ROW_HEIGHT[item.key]}px` }"
-          @mouseleave="scheduleClose"
-        >
-          <div
-            v-for="seg in item.segments"
-            :key="seg.id"
-            class="absolute whitespace-nowrap font-[1000] tracking-wider text-white text-[clamp(28px,2.4vw,48px)]"
-            :class="[
-              item.key === 'basic' ? '-translate-x-1/2' : '',
-              item.key !== 'basic' && seg.id === ZOOM_SEGMENT_ID
-                ? 'cursor-pointer transition-transform duration-200 hover:scale-105'
-                : '',
-            ]"
-            :style="{
-              top: item.key === 'basic' ? '9%' : '7%',
-              left:
-                item.key === 'basic'
-                  ? `${(seg.start + seg.end) / 2}%`
-                  : `${seg.start}%`,
-              textShadow: labelTextShadow,
-            }"
-            @mouseenter="seg.id === ZOOM_SEGMENT_ID && openDetail(item.key)"
-            @mouseleave="seg.id === ZOOM_SEGMENT_ID && scheduleClose()"
-            @click.stop="seg.id === ZOOM_SEGMENT_ID && toggleDetail(item.key)"
-          >
-            {{ seg.label }}
-          </div>
-
-          <AnchoredProgressBar
-            class="absolute inset-x-0 top-1/2 h-[22%] -translate-y-1/2"
-            :progress="item.progress"
-            :segments="item.segments"
-            segment-class="bg-white/10"
-          />
-
-          <img
-            :src="nodeImageSrc"
-            class="absolute -translate-x-1/2 transition-all duration-700 ease-out"
-            :style="{
-              top: '24%',
-              height: '52%',
-              left: `${Math.min(100, Math.max(0, item.progress))}%`,
-            }"
-            alt=""
-          />
-
-          <div
-            class="absolute -translate-x-1/2 whitespace-nowrap font-[1000] tracking-widest text-white text-[clamp(22px,2vw,38px)] transition-all duration-700 ease-out"
-            :style="{
-              top: '78%',
-              left: `${Math.min(100, Math.max(0, item.progress))}%`,
-              textShadow: totalTextShadow,
-            }"
-          >
-            {{ Math.round(item.progress) }}%
-          </div>
-
-          <Transition
-            enter-active-class="transition-all duration-200 ease-out"
-            enter-from-class="opacity-0 translate-y-2 scale-95"
-            enter-to-class="opacity-100 translate-y-0 scale-100"
-            leave-active-class="transition-all duration-150 ease-in"
-            leave-from-class="opacity-100 translate-y-0 scale-100"
-            leave-to-class="opacity-0 translate-y-2 scale-95"
-          >
-            <div
-              v-if="activeDetailKey === item.key && item.detailSegments"
-              class="absolute bottom-full left-[52.5%] z-20 mb-4 w-[860px] -translate-x-1/2"
-              @mouseenter="openDetail(item.key)"
-              @mouseleave="scheduleClose"
-              @click.stop
-            >
-              <div
-                class="relative rounded-[40px] border-[3px] border-[#43f3f2] bg-gradient-to-br from-[#1e57c8]/80 via-[#0f3da8]/80 to-[#0a2a82]/80 px-12 pb-8 pt-7 shadow-[0_0_44px_rgba(67,243,242,0.7),inset_0_0_24px_rgba(67,243,242,0.28)] backdrop-blur"
-              >
-                <div
-                  class="pointer-events-none absolute inset-[6px] rounded-[34px] border border-white/25"
-                ></div>
-
-                <div
-                  class="mb-7 flex items-baseline justify-between"
-                  :style="{ textShadow: labelTextShadow }"
-                >
-                  <span
-                    class="text-[clamp(28px,2.3vw,42px)] font-[1000] tracking-wider text-white"
-                  >
-                    制作变焦镜
-                  </span>
-                  <span
-                    class="text-[clamp(22px,1.9vw,34px)] font-[1000] tracking-widest text-white"
-                    :style="{ textShadow: totalTextShadow }"
-                  >
-                    {{ zoomPhaseProgress(item.progress) }}%
-                  </span>
-                </div>
-
-                <div class="relative h-[120px] w-full">
-                  <div
-                    v-for="seg in detailSegmentLayout(item.detailSegments)"
-                    :key="seg.id"
-                    class="absolute -translate-x-1/2 whitespace-nowrap text-[clamp(22px,1.85vw,34px)] font-[1000] tracking-wider text-white"
-                    :style="{
-                      top: '4%',
-                      left: `${seg.center}%`,
-                      textShadow: labelTextShadow,
-                    }"
-                  >
-                    {{ seg.label }}
-                  </div>
-                  <AnchoredProgressBar
-                    class="absolute inset-x-0 top-1/2 h-[28%] -translate-y-1/2"
-                    :min="20"
-                    :max="85"
-                    :progress="Math.min(85, Math.max(20, item.progress))"
-                    :segments="item.detailSegments"
-                    track-class="bg-[#021543]/85 rounded-[6px] shadow-[inset_0_0_14px_rgba(0,0,0,0.55)] ring-1 ring-white/25"
-                    fill-class="bg-gradient-to-r from-[#7df8ff] via-[#43f3f2] to-[#1ed7ff] shadow-[0_0_24px_rgba(67,243,242,0.95)]"
-                    segment-class="bg-white/5"
-                  />
-                  <img
-                    :src="nodeImageSrc"
-                    class="absolute -translate-x-1/2 transition-all duration-700 ease-out"
-                    :style="{
-                      top: '24%',
-                      height: '52%',
-                      left: `${
-                        ((Math.min(85, Math.max(20, item.progress)) - 20) /
-                          65) *
-                        100
-                      }%`,
-                    }"
-                    alt=""
-                  />
-                </div>
-              </div>
-            </div>
-          </Transition>
-        </div>
-      </div>
-    </div>
-  </Transition>
-</template>
diff --git a/src/views/home/components/StudyProgressPopup/AnchoredProgressBar/AnchoredProgressBar.vue b/src/views/home/components/StudyProgressPopup/AnchoredProgressBar/AnchoredProgressBar.vue
new file mode 100644
index 0000000..6c0b62e
--- /dev/null
+++ b/src/views/home/components/StudyProgressPopup/AnchoredProgressBar/AnchoredProgressBar.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { computeSegmentLayout } from './computeSegmentLayout'
+import type { AnchoredProgressBarProps } from './types'
+
+defineOptions({
+  name: 'AnchoredProgressBar',
+})
+
+const props = withDefaults(defineProps<AnchoredProgressBarProps>(), {
+  min: 0,
+  max: 100,
+  width: 1266,
+  height: 34,
+  dividerWidth: 8,
+  dividerHeight: 44,
+  segments: () => [],
+  trackClass: 'bg-black/20',
+  fillClass: 'bg-[#31effa] shadow-[0_0_26px_rgba(49,239,250,0.95)]',
+  segmentClass: '',
+  showDividers: true,
+  markerSrc: '',
+  markerSize: 78,
+  markerTop: -22,
+  showPercent: false,
+  percentTop: 44,
+  percentClass:
+    'whitespace-nowrap font-[1000] tracking-widest text-white text-[30px]',
+  percentTextShadow: '',
+})
+
+const clamp = (value: number, lower: number, upper: number) =>
+  Math.min(Math.max(value, lower), upper)
+
+const progressPercent = computed(() => {
+  const range = props.max - props.min
+  if (range <= 0) return 0
+  return clamp(((props.progress - props.min) / range) * 100, 0, 100)
+})
+
+const segmentLayout = computed(() =>
+  computeSegmentLayout(props.segments, props.min, props.max),
+)
+
+const toPx = (percent: number) => Math.round((percent / 100) * props.width)
+
+const segmentPixelLayout = computed(() =>
+  segmentLayout.value.map((segment) => ({
+    ...segment,
+    leftPx: toPx(segment.left),
+    widthPx: toPx(segment.width),
+    dividerLeftPx: toPx(segment.left + segment.width),
+  })),
+)
+
+const fillWidth = computed(() => toPx(progressPercent.value))
+const markerLeft = computed(() => toPx(progressPercent.value))
+const displayProgress = computed(() =>
+  Math.round(clamp(props.progress, props.min, props.max)),
+)
+const dividerTop = computed(() => (props.height - props.dividerHeight) / 2)
+</script>
+
+<template>
+  <div
+    class="relative w-full"
+    :style="{ width: `${props.width}px`, height: `${props.height}px` }"
+  >
+    <div
+      class="absolute inset-0 overflow-hidden"
+      :class="trackClass"
+    >
+      <div
+        v-for="segment in segmentPixelLayout"
+        :key="segment.id"
+        class="absolute top-0 h-full"
+        :class="[segmentClass, segment.className]"
+        :style="{
+          left: `${segment.leftPx}px`,
+          width: `${segment.widthPx}px`,
+          ...(segment.style ?? {}),
+        }"
+      ></div>
+      <div
+        class="absolute left-0 top-0 h-full transition-all duration-700 ease-out"
+        :class="fillClass"
+        :style="{ width: `${fillWidth}px` }"
+      ></div>
+    </div>
+    <template v-if="showDividers">
+      <div
+        v-for="segment in segmentPixelLayout.slice(0, -1)"
+        :key="`${segment.id}-divider`"
+        class="pointer-events-none absolute -translate-x-1/2 rounded-[3px] bg-white"
+        :style="{
+          left: `${segment.dividerLeftPx}px`,
+          top: `${dividerTop}px`,
+          height: `${props.dividerHeight}px`,
+          width: `${props.dividerWidth}px`,
+        }"
+      ></div>
+    </template>
+    <img
+      v-if="markerSrc"
+      :src="markerSrc"
+      class="pointer-events-none absolute -translate-x-1/2 transition-all duration-700 ease-out"
+      :style="{
+        top: `${props.markerTop}px`,
+        left: `${markerLeft}px`,
+        height: `${props.markerSize}px`,
+      }"
+      alt=""
+    />
+    <div
+      v-if="showPercent"
+      class="pointer-events-none absolute -translate-x-1/2 transition-all duration-700 ease-out"
+      :class="percentClass"
+      :style="{
+        top: `${props.percentTop}px`,
+        left: `${markerLeft}px`,
+        textShadow: percentTextShadow,
+      }"
+    >
+      {{ displayProgress }}%
+    </div>
+    <slot
+      :segments="segmentLayout"
+      :progress="progressPercent"
+    />
+  </div>
+</template>
diff --git a/src/components/AnchoredProgressBar/computeSegmentLayout.ts b/src/views/home/components/StudyProgressPopup/AnchoredProgressBar/computeSegmentLayout.ts
similarity index 100%
rename from src/components/AnchoredProgressBar/computeSegmentLayout.ts
rename to src/views/home/components/StudyProgressPopup/AnchoredProgressBar/computeSegmentLayout.ts
diff --git a/src/components/AnchoredProgressBar/index.ts b/src/views/home/components/StudyProgressPopup/AnchoredProgressBar/index.ts
similarity index 100%
rename from src/components/AnchoredProgressBar/index.ts
rename to src/views/home/components/StudyProgressPopup/AnchoredProgressBar/index.ts
diff --git a/src/components/AnchoredProgressBar/types.ts b/src/views/home/components/StudyProgressPopup/AnchoredProgressBar/types.ts
similarity index 65%
rename from src/components/AnchoredProgressBar/types.ts
rename to src/views/home/components/StudyProgressPopup/AnchoredProgressBar/types.ts
index 623bacf..4185b88 100644
--- a/src/components/AnchoredProgressBar/types.ts
+++ b/src/views/home/components/StudyProgressPopup/AnchoredProgressBar/types.ts
@@ -17,9 +17,20 @@ export type AnchoredProgressBarProps = {
   progress: number
   min?: number
   max?: number
+  width?: number
+  height?: number
+  dividerWidth?: number
+  dividerHeight?: number
   segments?: ProgressSegment[]
   trackClass?: string
   fillClass?: string
   segmentClass?: string
   showDividers?: boolean
+  markerSrc?: string
+  markerSize?: number
+  markerTop?: number
+  showPercent?: boolean
+  percentTop?: number
+  percentClass?: string
+  percentTextShadow?: string
 }
diff --git a/src/views/home/components/StudyProgressPopup/CertificateDetailPopup.vue b/src/views/home/components/StudyProgressPopup/CertificateDetailPopup.vue
new file mode 100644
index 0000000..f3249b4
--- /dev/null
+++ b/src/views/home/components/StudyProgressPopup/CertificateDetailPopup.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import { getStaticImage } from '@/utils'
+import { ImgButton } from '@/components'
+
+defineOptions({
+  name: 'CertificateDetailPopup',
+})
+
+defineProps<{
+  date: string // '2026-06-18' 颁发日期
+  certificateNumber: string // '001' 证书编号
+  studentNumber: string // '001' 学员数量
+}>()
+
+const visible = defineModel<boolean>({ default: false })
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const handleClose = () => {
+  visible.value = false
+  emit('close')
+}
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition-all duration-500 ease-out"
+    enter-from-class="opacity-0 scale-95 blur-[6px]"
+    enter-to-class="opacity-100 scale-100 blur-none"
+    leave-active-class="transition-all duration-300 ease-in"
+    leave-from-class="opacity-100 scale-100 blur-none"
+    leave-to-class="opacity-0 scale-95 blur-[6px]"
+  >
+    <div
+      v-if="visible"
+      class="absolute inset-0 z-[120] flex items-center justify-center bg-black/45"
+      @click.stop
+    >
+      <div class="certificate-detail relative text-2xl">
+        <img
+          draggable="false"
+          :src="getStaticImage('components/medal/证书详情')"
+          class="certificate-detail-img object-contain"
+          alt=""
+        />
+        <ImgButton
+          class="absolute right-2 top-0 z-10"
+          :image="'components/close'"
+          @click="handleClose"
+        />
+
+        <!-- 证书编号 -->
+        <span class="absolute bottom-[154px] left-[390px]">
+          {{ certificateNumber }}
+        </span>
+        <!-- 颁发日期 -->
+        <span class="absolute bottom-[122px] left-[390px]">{{ date }}</span>
+        <!-- 多少位学员 -->
+        <span class="absolute bottom-[468px] left-[948px] text-3xl">
+          {{ studentNumber }}
+        </span>
+        <span class="absolute bottom-[380px] left-[1070px]">
+          {{ studentNumber }}
+        </span>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.certificate-detail {
+  animation: certificate-detail-pop 650ms cubic-bezier(0.18, 0.9, 0.24, 1.12)
+    both;
+  filter: drop-shadow(0 0 38px rgba(133, 236, 255, 0.85));
+}
+
+.certificate-detail::before {
+  content: '';
+  position: absolute;
+  inset: 8% 12%;
+  z-index: -1;
+  border-radius: 48px;
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.55) 0%,
+    rgba(117, 235, 255, 0.32) 38%,
+    rgba(117, 235, 255, 0) 72%
+  );
+  animation: certificate-glow 1600ms ease-in-out infinite;
+}
+
+.certificate-detail-img {
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes certificate-detail-pop {
+  0% {
+    opacity: 0;
+    transform: translateY(28px) scale(0.9);
+  }
+  58% {
+    opacity: 1;
+    transform: translateY(-8px) scale(1.025);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes certificate-glow {
+  0%,
+  100% {
+    opacity: 0.45;
+    transform: scale(0.98);
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(1.04);
+  }
+}
+</style>
diff --git a/src/views/home/components/StudyProgressPopup/StudyProgressPopup.vue b/src/views/home/components/StudyProgressPopup/StudyProgressPopup.vue
new file mode 100644
index 0000000..2d17eea
--- /dev/null
+++ b/src/views/home/components/StudyProgressPopup/StudyProgressPopup.vue
@@ -0,0 +1,440 @@
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { getBackgroundImage, getStaticImage } from '@/utils'
+import {
+  useBasicElementsStore,
+  useFilmStore,
+  useInterviewStore,
+  useVlogStore,
+} from '@/stores'
+import {
+  AnchoredProgressBar,
+  computeSegmentLayout,
+  type ProgressSegment,
+} from './AnchoredProgressBar'
+import { ImgButton } from '@/components'
+import CertificateDetailPopup from './CertificateDetailPopup.vue'
+import {
+  studyProgressDisplayConfig,
+  type StudyProgressModuleKey,
+} from './studyProgressConfig'
+import {
+  getBasicElementsProgress,
+  getOverallStudyProgress,
+  getProductionModuleProgress,
+} from '@/config/studyProgress'
+
+defineOptions({
+  name: 'StudyProgressPopup',
+})
+
+type ProductionModuleKey = Exclude<StudyProgressModuleKey, 'basic'>
+
+type StudyProgressItem = {
+  key: StudyProgressModuleKey
+  progress: number
+  unlocked: boolean
+  segments: ProgressSegment[]
+  detailSegments?: ProgressSegment[]
+}
+
+const visible = defineModel<boolean>({ default: false })
+
+const basicElements = useBasicElementsStore()
+const vlog = useVlogStore()
+const interview = useInterviewStore()
+const film = useFilmStore()
+
+const ROW_HEIGHT = {
+  basic: 168,
+  vlog: 148,
+  interview: 146,
+  film: 146,
+} satisfies Record<StudyProgressModuleKey, number>
+
+const MAIN_BAR_WIDTH = 1266
+const MAIN_BAR_HEIGHT = 34
+const MAIN_DIVIDER_HEIGHT = 44
+const DETAIL_BAR_WIDTH = 764
+const DETAIL_BAR_HEIGHT = 34
+const BUBBLE_LEFT = 665
+
+const BADGE_IMAGE = {
+  basic: '新手导航',
+  vlog: 'vlog',
+  interview: '访谈',
+  film: '电影',
+} satisfies Record<StudyProgressModuleKey, string>
+
+const badgeSrc = (item: StudyProgressItem) =>
+  getStaticImage(
+    `home/stuy/${BADGE_IMAGE[item.key]}-${item.unlocked ? '亮' : '灰'}`,
+  )
+
+const toMainPx = (value: number) => Math.round((value / 100) * MAIN_BAR_WIDTH)
+const detailCenterPx = (centerPercent: number) =>
+  Math.round((centerPercent / 100) * DETAIL_BAR_WIDTH)
+const labelLeft = (item: StudyProgressItem, segment: ProgressSegment) =>
+  item.key === 'basic'
+    ? toMainPx((segment.start + segment.end) / 2)
+    : toMainPx(segment.start)
+const labelTop = (key: StudyProgressModuleKey) => (key === 'basic' ? 13 : 3)
+
+const PRODUCTION_KEYS = new Set<StudyProgressModuleKey>([
+  'vlog',
+  'interview',
+  'film',
+])
+const isProduction = (
+  key: StudyProgressModuleKey,
+): key is ProductionModuleKey => PRODUCTION_KEYS.has(key)
+
+const labelTextShadow =
+  '0 0 5px rgba(255,255,255,0.95), 0 0 10px rgba(54,111,255,0.75), 0 3px 0 rgba(0, 48, 151, 0.75)'
+const totalTextShadow = '4px 5px 0 rgba(40, 130, 253, 0.75)'
+
+const basicProgress = computed(() =>
+  getBasicElementsProgress(
+    basicElements.basicElementsUnlockProgress,
+    basicElements.isBasicElementsUnlock,
+    basicElements.learningVideosWatched,
+  ),
+)
+const vlogProgress = computed(() =>
+  getProductionModuleProgress(
+    'vlog',
+    vlog.isRouteViewed,
+    vlog.workVideosWatched,
+    vlog.practiceProgress,
+  ),
+)
+const interviewProgress = computed(() =>
+  getProductionModuleProgress(
+    'interview',
+    interview.isRouteViewed,
+    interview.workVideosWatched,
+    interview.practiceProgress,
+  ),
+)
+const filmProgress = computed(() => film.progressPercent)
+const totalProgress = computed(() =>
+  getOverallStudyProgress([
+    basicProgress.value,
+    vlogProgress.value,
+    interviewProgress.value,
+    filmProgress.value,
+  ]),
+)
+
+const CERTIFICATE_SHOWN_KEY = 'study-progress-certificate-shown'
+const certificateVisible = ref(false)
+const certificateTimer = ref<number>()
+const hasAllBadges = computed(() =>
+  [
+    basicProgress.value,
+    vlogProgress.value,
+    interviewProgress.value,
+    filmProgress.value,
+  ].every((progress) => progress >= 100),
+)
+const hasCertificate = computed(
+  () => basicElements.guideShown[CERTIFICATE_SHOWN_KEY] === true,
+)
+const certificateSrc = computed(() =>
+  getStaticImage(
+    `home/stuy/通关证书-${hasCertificate.value ? '已获取' : '暂未获取'}`,
+  ),
+)
+
+const buildItem = (
+  key: StudyProgressModuleKey,
+  progress: number,
+  unlocked: boolean,
+): StudyProgressItem => {
+  const config = studyProgressDisplayConfig[key]
+  return {
+    key,
+    progress,
+    unlocked,
+    segments: config.segments,
+    detailSegments: config.detailSegments,
+  }
+}
+
+// 徽章点亮与「获得勋章」的条件保持一致：模块完成度达到 100%
+// （basic 因 unlockProgress 恒为 0、isUnlocked 恒为 false，progress=100 等价于所有基础视频看完）
+const progressItems = computed<StudyProgressItem[]>(() => [
+  buildItem('basic', basicProgress.value, basicProgress.value >= 100),
+  buildItem('vlog', vlogProgress.value, vlogProgress.value >= 100),
+  buildItem(
+    'interview',
+    interviewProgress.value,
+    interviewProgress.value >= 100,
+  ),
+  buildItem('film', filmProgress.value, filmProgress.value >= 100),
+])
+
+const activeDetailKey = ref<ProductionModuleKey | null>(null)
+const closeTimer = ref<number>()
+
+const openDetail = (key: StudyProgressModuleKey) => {
+  if (!isProduction(key)) return
+  window.clearTimeout(closeTimer.value)
+  activeDetailKey.value = key
+}
+
+const scheduleClose = () => {
+  window.clearTimeout(closeTimer.value)
+  closeTimer.value = window.setTimeout(() => {
+    activeDetailKey.value = null
+  }, 120)
+}
+
+const toggleDetail = (key: StudyProgressModuleKey) => {
+  if (!isProduction(key)) return
+  window.clearTimeout(closeTimer.value)
+  activeDetailKey.value = activeDetailKey.value === key ? null : key
+}
+
+const closeDetail = () => {
+  window.clearTimeout(closeTimer.value)
+  activeDetailKey.value = null
+}
+
+const clearCertificateTimer = () => {
+  window.clearTimeout(certificateTimer.value)
+  certificateTimer.value = undefined
+}
+
+const scheduleCertificatePopup = () => {
+  clearCertificateTimer()
+  if (!visible.value || !hasAllBadges.value || hasCertificate.value) return
+  certificateTimer.value = window.setTimeout(() => {
+    basicElements.ensureCertificate()
+    certificateVisible.value = true
+  }, 1000)
+}
+
+const closeCertificate = () => {
+  certificateVisible.value = false
+  if (!hasCertificate.value) {
+    basicElements.markGuideShown(CERTIFICATE_SHOWN_KEY)
+  }
+}
+
+watch([visible, hasAllBadges, hasCertificate], scheduleCertificatePopup)
+
+onBeforeUnmount(clearCertificateTimer)
+
+const handleClose = () => {
+  clearCertificateTimer()
+  certificateVisible.value = false
+  closeDetail()
+  visible.value = false
+}
+
+const ZOOM_SEGMENT_ID = 'zoom'
+const NODE_IMAGE = 'home/stuy/节点圆圈'
+const nodeImageSrc = getStaticImage(NODE_IMAGE)
+
+const detailSegmentLayout = (segments: ProgressSegment[]) =>
+  computeSegmentLayout(segments, 20, 85)
+
+const zoomPhaseProgress = (progress: number) =>
+  Math.round(Math.min(100, Math.max(0, ((progress - 20) / 65) * 100)))
+
+const certificateInfo = computed(() => basicElements.certificate)
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition-all duration-300 ease-out"
+    enter-from-class="opacity-0 scale-95 blur-[8px]"
+    enter-to-class="opacity-100 scale-100 blur-none"
+    leave-active-class="transition-all duration-300 ease-in"
+    leave-from-class="opacity-100 scale-100 blur-none"
+    leave-to-class="opacity-0 scale-95 blur-[8px]"
+  >
+    <div
+      v-if="visible"
+      class="absolute inset-0 z-[100] bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage('home/stuy/学习进度底图') }"
+      @click="closeDetail"
+    >
+      <ImgButton
+        class="absolute right-0 top-0 z-10"
+        :image="'components/close'"
+        @click="handleClose"
+      />
+
+      <img
+        draggable="false"
+        :src="certificateSrc"
+        class="absolute -bottom-12 -right-10 object-contain"
+        alt=""
+      />
+
+      <div class="absolute left-0 right-0 top-[150px] flex justify-center">
+        <div
+          class="flex items-end pr-10 text-white font-[1000] tracking-widest"
+          :style="{ textShadow: totalTextShadow }"
+        >
+          <span class="text-[56px] leading-none">总进度</span>
+          <span class="text-[56px] leading-none">{{ totalProgress }}%</span>
+        </div>
+      </div>
+
+      <div
+        class="mx-auto mt-[215px] flex w-[1580px] pr-[60px]"
+        @click.stop
+      >
+        <!-- 解锁的徽章 -->
+        <div class="flex w-[260px] flex-col gap-2 pl-2 pr-3">
+          <div
+            v-for="item in progressItems"
+            :key="item.key"
+            class="flex items-center justify-center"
+            :style="{ height: `${ROW_HEIGHT[item.key]}px` }"
+          >
+            <img
+              :src="badgeSrc(item)"
+              class="w-[144px] object-contain"
+              alt=""
+            />
+          </div>
+        </div>
+        <!--  进度 -->
+        <div class="flex-1 flex flex-col gap-2">
+          <div
+            v-for="item in progressItems"
+            :key="item.key"
+            class="relative w-full pt-4"
+            :style="{ height: `${ROW_HEIGHT[item.key]}px` }"
+            @mouseleave="scheduleClose"
+          >
+            <div
+              v-for="seg in item.segments"
+              :key="seg.id"
+              class="absolute whitespace-nowrap font-[1000] tracking-wider text-white text-[36px]"
+              :class="[
+                item.key === 'basic' ? '-translate-x-1/2' : '',
+                item.key !== 'basic' && seg.id === ZOOM_SEGMENT_ID
+                  ? 'group cursor-pointer'
+                  : '',
+              ]"
+              :style="{
+                top: `${labelTop(item.key)}px`,
+                left: `${labelLeft(item, seg)}px`,
+                textShadow: labelTextShadow,
+              }"
+              @mouseenter="seg.id === ZOOM_SEGMENT_ID && openDetail(item.key)"
+              @mouseleave="seg.id === ZOOM_SEGMENT_ID && scheduleClose()"
+              @click.stop="seg.id === ZOOM_SEGMENT_ID && toggleDetail(item.key)"
+            >
+              <span
+                :class="[
+                  item.key !== 'basic' && seg.id === ZOOM_SEGMENT_ID
+                    ? 'transition-opacity duration-200 group-hover:opacity-75'
+                    : '',
+                ]"
+              >
+                {{ seg.label }}
+              </span>
+            </div>
+
+            <AnchoredProgressBar
+              class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+              :width="MAIN_BAR_WIDTH"
+              :height="MAIN_BAR_HEIGHT"
+              :divider-height="MAIN_DIVIDER_HEIGHT"
+              :progress="item.progress"
+              :segments="item.segments"
+              :marker-src="nodeImageSrc"
+              show-percent
+              :percent-text-shadow="totalTextShadow"
+              segment-class="bg-white/10"
+            />
+
+            <Transition
+              enter-active-class="transition-all duration-200 ease-out"
+              enter-from-class="opacity-0 translate-y-2 scale-95"
+              enter-to-class="opacity-100 translate-y-0 scale-100"
+              leave-active-class="transition-all duration-150 ease-in"
+              leave-from-class="opacity-100 translate-y-0 scale-100"
+              leave-to-class="opacity-0 translate-y-2 scale-95"
+            >
+              <div
+                v-if="activeDetailKey === item.key && item.detailSegments"
+                class="absolute bottom-full z-20 mb-4 w-[860px] -translate-x-1/2"
+                :style="{ left: `${BUBBLE_LEFT}px` }"
+                @mouseenter="openDetail(item.key)"
+                @mouseleave="scheduleClose"
+                @click.stop
+              >
+                <div
+                  class="relative rounded-[40px] border-[3px] border-[#43f3f2] bg-gradient-to-br from-[#1e57c8]/80 via-[#0f3da8]/80 to-[#0a2a82]/80 px-12 pb-8 pt-7 shadow-[0_0_44px_rgba(67,243,242,0.7),inset_0_0_24px_rgba(67,243,242,0.28)] backdrop-blur"
+                >
+                  <div
+                    class="pointer-events-none absolute inset-[6px] rounded-[34px] border border-white/25"
+                  ></div>
+
+                  <div
+                    class="mb-7 flex items-baseline"
+                    :style="{ textShadow: labelTextShadow }"
+                  >
+                    <span
+                      class="text-[34px] font-[1000] tracking-wider text-white"
+                    >
+                      制作变焦镜
+                    </span>
+                    <span
+                      class="text-[28px] font-[1000] tracking-widest text-white"
+                      :style="{ textShadow: totalTextShadow }"
+                    >
+                      （{{ zoomPhaseProgress(item.progress) }}%）
+                    </span>
+                  </div>
+
+                  <div class="relative h-[120px] w-full">
+                    <div
+                      v-for="seg in detailSegmentLayout(item.detailSegments)"
+                      :key="seg.id"
+                      class="absolute -translate-x-1/2 whitespace-nowrap text-[28px] font-[1000] tracking-wider text-white"
+                      :style="{
+                        top: '0px',
+                        left: `${detailCenterPx(seg.center)}px`,
+                        textShadow: labelTextShadow,
+                      }"
+                    >
+                      {{ seg.label }}
+                    </div>
+                    <AnchoredProgressBar
+                      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+                      :width="DETAIL_BAR_WIDTH"
+                      :height="DETAIL_BAR_HEIGHT"
+                      :min="20"
+                      :max="85"
+                      :progress="item.progress"
+                      :segments="item.detailSegments"
+                      :marker-src="nodeImageSrc"
+                      track-class="bg-[#021543]/85 rounded-[6px] shadow-[inset_0_0_14px_rgba(0,0,0,0.55)] ring-1 ring-white/25"
+                      fill-class="bg-gradient-to-r from-[#7df8ff] via-[#43f3f2] to-[#1ed7ff] shadow-[0_0_24px_rgba(67,243,242,0.95)]"
+                      segment-class="bg-white/5"
+                    />
+                  </div>
+                </div>
+              </div>
+            </Transition>
+          </div>
+        </div>
+      </div>
+      <CertificateDetailPopup
+        :date="certificateInfo?.date ?? ''"
+        :certificate-number="certificateInfo?.number ?? ''"
+        :student-number="certificateInfo?.studentNumber ?? ''"
+        v-model="certificateVisible"
+        @close="closeCertificate"
+      />
+    </div>
+  </Transition>
+</template>
diff --git a/src/views/home/components/StudyProgressPopup/index.ts b/src/views/home/components/StudyProgressPopup/index.ts
new file mode 100644
index 0000000..81fa646
--- /dev/null
+++ b/src/views/home/components/StudyProgressPopup/index.ts
@@ -0,0 +1 @@
+export { default as StudyProgressPopup } from './StudyProgressPopup.vue'
diff --git a/src/views/home/components/studyProgressConfig.ts b/src/views/home/components/StudyProgressPopup/studyProgressConfig.ts
similarity index 95%
rename from src/views/home/components/studyProgressConfig.ts
rename to src/views/home/components/StudyProgressPopup/studyProgressConfig.ts
index c75f617..90e9a2b 100644
--- a/src/views/home/components/studyProgressConfig.ts
+++ b/src/views/home/components/StudyProgressPopup/studyProgressConfig.ts
@@ -1,4 +1,4 @@
-import type { ProgressSegment } from '@/components'
+import type { ProgressSegment } from './AnchoredProgressBar'
 
 export type StudyProgressModuleKey = 'basic' | 'vlog' | 'interview' | 'film'
 
diff --git a/src/views/home/components/studyProgressUtils.ts b/src/views/home/components/studyProgressUtils.ts
deleted file mode 100644
index 6cad638..0000000
--- a/src/views/home/components/studyProgressUtils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export {
-  getBasicElementsProgress,
-  getOverallStudyProgress,
-  getProductionModuleProgress,
-  type ProductionModuleKey,
-} from '@/config/studyProgress'
diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx
index 94e4eb7..402d923 100644
--- a/src/views/home/index.tsx
+++ b/src/views/home/index.tsx
@@ -6,7 +6,12 @@ import {
   IMAGE_PATHS,
 } from '@/utils'
 import { ImgButton } from '@/components/Button'
-import { CourseGuidePopup, CourseFrameworkPopup, GuideSteps, Video } from '@/components'
+import {
+  CourseGuidePopup,
+  CourseFrameworkPopup,
+  GuideSteps,
+  Video,
+} from '@/components'
 import Loading from './components/Loading.vue'
 import { useScale } from '@/composables/useScale'
 import { useBasicElementsStore } from '@/stores/modules/basic-elements'
@@ -19,7 +24,7 @@ const CourseFrameGuide = () => (
       src={getStaticImage(IMAGE_PATHS.BUTTONS.COURSE_FRAME)}
       alt=""
     />
-    查看课程结构，快速了解每个模块的学习内容。
+    查看课程整体结构，快速了解每个模块的学习内容。
   </div>
 )
 
@@ -30,7 +35,7 @@ const OperateGuide = () => (
       src={getStaticImage(IMAGE_PATHS.BUTTONS.OPERATE_GUIDE)}
       alt=""
     />
-    包含课程介绍和操作指南，点击即可查看！
+    包含课程介绍和操作指引，点击即可查看！
   </div>
 )
 
@@ -90,12 +95,20 @@ export default defineComponent({
     const { scale, offsetX, offsetY } = useScale()
 
     // 首次进入的视频播放序列
-    const introVideos = computed(() => [getPublicPath('video/start.mp4')])
+    const introVideos = computed(() => [
+      getPublicPath('video/start.mp4'),
+      getPublicPath('video/guide.mp4'),
+    ])
     const introVideoIndex = ref(0)
     const showIntroVideo = ref(isFirstVisit)
     const currentIntroSrc = computed(
       () => introVideos.value[introVideoIndex.value] ?? '',
     )
+    const currentIntroPoster = computed(() =>
+      introVideoIndex.value === 0
+        ? (getStaticImage('cover/start.jpg') as string)
+        : '',
+    )
 
     if (isFirstVisit) {
       basicElementsStore.markGuideShown(guideKey)
@@ -114,6 +127,10 @@ export default defineComponent({
       }
     }
 
+    const handleSkipIntro = () => {
+      showIntroVideo.value = false
+    }
+
     // Loading 加载状态
     const showLoading = ref(isFirstVisit)
     const loadingProgress = ref(0)
@@ -187,7 +204,7 @@ export default defineComponent({
           style={{ backgroundImage: getBackgroundImage(IMAGE_PATHS.HOME_BG) }}
         />
 
-        <div class="absolute right-[420px] bottom-[200px] start-filming-wrapper">
+        <div class="absolute right-[420px] bottom-[200px] start-filming-wrapper animate-start-filming-breath hover:animate-none hover:scale-110 active:scale-95 transition-transform duration-300 ease-out">
           <ImgButton
             image="home/action-btn"
             path={{ name: 'Action' }}
@@ -209,12 +226,14 @@ export default defineComponent({
 
         {showIntroVideo.value && (
           <div class="absolute inset-0 z-[10000] bg-black flex items-center justify-center">
-            <Loading
-              visible={showLoading.value}
-              progress={loadingProgress.value}
-            />
             <Video
+              class={
+                showLoading.value
+                  ? 'opacity-0 pointer-events-none'
+                  : 'opacity-100 transition-opacity duration-300'
+              }
               src={currentIntroSrc.value}
+              poster={currentIntroPoster.value}
               autoplay={true}
               muted={false}
               controls={true}
@@ -228,6 +247,19 @@ export default defineComponent({
               onPlayfailed={finishLoading}
               onEnded={handleIntroVideoEnded}
             />
+            <Loading
+              visible={showLoading.value}
+              progress={loadingProgress.value}
+            />
+            {introVideoIndex.value > 0 && !showLoading.value && (
+              <img
+                class="absolute top-10 right-10 z-[10001] w-32 cursor-pointer transition-[transform,filter] duration-300 hover:scale-105 hover:brightness-110"
+                draggable={false}
+                src={getStaticImage(IMAGE_PATHS.BUTTONS.ESCAPE)}
+                alt="跳过"
+                onClick={handleSkipIntro}
+              />
+            )}
           </div>
         )}
 
diff --git a/src/views/interview/after-editing/editing.vue b/src/views/interview/after-editing/editing.vue
index 9033757..6dc235b 100644
--- a/src/views/interview/after-editing/editing.vue
+++ b/src/views/interview/after-editing/editing.vue
@@ -171,13 +171,13 @@ onBeforeRouteLeave((to) => {
           @click="handleClose"
         />
         <button
-          class="absolute right-4 top-1/2 z-10 -translate-y-1/2 flex h-12 w-12 items-center justify-center rounded-full bg-blue-500/80 pointer-events-auto text-white transition-all duration-200 hover:bg-blue-500"
+          class="absolute right-4 top-1/2 z-10 -translate-y-1/2 flex h-16 w-16 items-center justify-center rounded-full bg-blue-500/80 pointer-events-auto text-white transition-all duration-200 hover:bg-blue-500"
           title="步骤导航"
           @click="showStepNavigation = true"
         >
           <svg
-            width="20"
-            height="20"
+            width="35"
+            height="35"
             viewBox="0 0 20 20"
             fill="none"
           >
diff --git a/src/views/interview/after-editing/sound-effect/index.vue b/src/views/interview/after-editing/sound-effect/index.vue
index 3431c26..a7eda03 100644
--- a/src/views/interview/after-editing/sound-effect/index.vue
+++ b/src/views/interview/after-editing/sound-effect/index.vue
@@ -4,13 +4,19 @@ import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
 import { Video } from '@/components'
 import { IMAGE_PATHS, getPublicPath, getVideoPoster } from '@/utils'
+import { useInterviewStore } from '@/stores'
 
 const router = useRouter()
+const interviewStore = useInterviewStore()
 const playing = ref(false)
 
 const handleBack = () => {
   router.back()
 }
+
+const handleEnded = () => {
+  interviewStore.markViewed('InterviewSoundEffect')
+}
 </script>
 
 <template>
@@ -28,6 +34,7 @@ const handleBack = () => {
       :volume="1"
       :controls="true"
       :hideNativeControls="true"
+      @ended="handleEnded"
     />
     <ImgButton
       class="absolute right-0 top-0 z-20"
diff --git a/src/views/interview/index.vue b/src/views/interview/index.vue
index 0c197db..5d0f375 100644
--- a/src/views/interview/index.vue
+++ b/src/views/interview/index.vue
@@ -3,16 +3,28 @@ defineOptions({ name: 'Interview' })
 import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 
-import { computed, ref, watch, type Ref } from 'vue'
+import { computed, nextTick, onMounted, ref, watch, type Ref } from 'vue'
 import { ProgressBar, Overlay } from '@/components'
 import { GuideSteps, GuideStepsItem, type GuideStep } from '@/components/Guide'
 import { useRoute, useRouter } from 'vue-router'
 import { useInterviewStore } from '@/stores'
+import {
+  ModuleMedalPopup,
+  useModuleMedalPopup,
+} from '@/views/home/components/ModuleMedalPopup'
+import { StudyProgressPopup } from '@/views/home/components/StudyProgressPopup'
 import InterviewMenu from './components/menu.vue'
 
 const route = useRoute()
 const router = useRouter()
 const interview = useInterviewStore()
+const {
+  activeMedalKey,
+  visible: medalPopupVisible,
+  showMedalIfNeeded,
+  closeMedal,
+} = useModuleMedalPopup()
+const pendingInterviewMedal = ref(false)
 
 const showReturnGuide = ref(
   route.query.guide === 'return' && interview.isGuideInterviewReturn,
@@ -114,6 +126,31 @@ const visible = computed({
 
 const currentStep = computed(() => interview.InterviewUnlockProgress)
 const progress = computed(() => interview.progressPercent)
+const isInterviewCompleted = computed(() => progress.value >= 100)
+const showPendingInterviewMedal = () => {
+  if (!pendingInterviewMedal.value) return
+  if (
+    showReturnGuide.value ||
+    stageGuideStep.value ||
+    showPracticeGuide.value
+  ) {
+    return
+  }
+  pendingInterviewMedal.value = false
+  showMedalIfNeeded('interview')
+}
+const handleCloseMedalPopup = () => {
+  closeMedal()
+}
+const studyProgressVisible = ref(false)
+const handleViewProgressFromMedal = () => {
+  closeMedal()
+  studyProgressVisible.value = true
+}
+// 关闭学习进度弹窗后默认返回首页
+watch(studyProgressVisible, (value) => {
+  if (!value) router.push({ name: 'Action' })
+})
 
 const handleComplete = () => {
   // console.log('完成前置条件')
@@ -145,6 +182,23 @@ watch(
   },
   { immediate: true },
 )
+
+watch(isInterviewCompleted, (completed, previousCompleted) => {
+  if (!completed || previousCompleted !== false) return
+  pendingInterviewMedal.value = true
+  nextTick(showPendingInterviewMedal)
+})
+
+watch([showReturnGuide, stageGuideStep, showPracticeGuide], () => {
+  nextTick(showPendingInterviewMedal)
+})
+
+onMounted(() => {
+  if (isInterviewCompleted.value) {
+    pendingInterviewMedal.value = true
+  }
+  showPendingInterviewMedal()
+})
 </script>
 
 <template>
@@ -271,5 +325,14 @@ watch(
       @complete="handleStageGuideComplete"
       @skip="handleStageGuideComplete"
     />
+
+    <ModuleMedalPopup
+      :visible="medalPopupVisible"
+      :module-key="activeMedalKey"
+      @close="handleCloseMedalPopup"
+      @view-progress="handleViewProgressFromMedal"
+    />
+
+    <StudyProgressPopup v-model="studyProgressVisible" />
   </div>
 </template>
diff --git a/src/views/interview/midterm-shooting/on-site/index.vue b/src/views/interview/midterm-shooting/on-site/index.vue
index 8940363..fdcfe29 100644
--- a/src/views/interview/midterm-shooting/on-site/index.vue
+++ b/src/views/interview/midterm-shooting/on-site/index.vue
@@ -207,13 +207,13 @@ onBeforeRouteLeave((to) => {
           @click="back"
         />
         <button
-          class="absolute right-4 top-1/2 z-20 -translate-y-1/2 w-12 h-12 rounded-full bg-blue-500/80 text-white transition-all duration-200 hover:bg-blue-500 pointer-events-auto flex items-center justify-center"
+          class="absolute right-4 top-1/2 z-20 -translate-y-1/2 w-16 h-16 rounded-full bg-blue-500/80 text-white transition-all duration-200 hover:bg-blue-500 pointer-events-auto flex items-center justify-center"
           title="资源列表"
           @click="showStepNavigation = true"
         >
           <svg
-            width="20"
-            height="20"
+            width="35"
+            height="35"
             viewBox="0 0 20 20"
             fill="none"
           >
diff --git a/src/views/interview/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts b/src/views/interview/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
index b3d184e..e97533d 100644
--- a/src/views/interview/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
+++ b/src/views/interview/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
@@ -12,7 +12,7 @@ export function useViewfinderA() {
 
   // 缩放级别 (保留用于点击按钮)
   const zoomLevels = [3, 2, 1]
-  const currentZoom = ref(1)
+  const currentZoom = ref(2)
   const isCapturing = ref(false) // 拍照闪光效果
 
   // 拖拽相关状态
@@ -44,8 +44,14 @@ export function useViewfinderA() {
     const maxOffsetY = (scaledHeight - containerHeight) / 2
 
     // 限制偏移量
-    currentOffsetX.value = Math.max(-maxOffsetX, Math.min(maxOffsetX, currentOffsetX.value))
-    currentOffsetY.value = Math.max(-maxOffsetY, Math.min(maxOffsetY, currentOffsetY.value))
+    currentOffsetX.value = Math.max(
+      -maxOffsetX,
+      Math.min(maxOffsetX, currentOffsetX.value),
+    )
+    currentOffsetY.value = Math.max(
+      -maxOffsetY,
+      Math.min(maxOffsetY, currentOffsetY.value),
+    )
   }
 
   // 设置缩放级别
@@ -144,6 +150,6 @@ export function useViewfinderA() {
     onDrag,
     endDrag,
     handleWheel,
-    getTransform
+    getTransform,
   }
 }
diff --git a/src/views/interview/practice/index.vue b/src/views/interview/practice/index.vue
index 4ea2f92..def35c7 100644
--- a/src/views/interview/practice/index.vue
+++ b/src/views/interview/practice/index.vue
@@ -116,6 +116,7 @@ interface WorkItem {
   title: string
   stars: number
   path: string
+  watchKey: string
   description: string
 }
 
@@ -126,6 +127,7 @@ const worksList = ref<WorkItem[]>([
     title: '匠心育人润物无声',
     stars: 4,
     path: 'video/interview/practice/fangtan_cace1_batch.mp4',
+    watchKey: 'interview-practice-case-1',
     description: '26081 沈佳杰 吴思颖 韩心妍 王梓卉 邱政豪\n25084 张鸿斌',
   },
   // {
@@ -388,7 +390,7 @@ onUnmounted(() => {
                 <ImgButton
                   :class="work.id === worksList[0]?.id ? 'view-btn' : ''"
                   image="vlog/practice/查看"
-                  :path="`/interview/practice/video/${encodeURIComponent(work.path)}`"
+                  :path="`/interview/practice/video/${encodeURIComponent(work.path)}?watchKey=${work.watchKey}`"
                 />
               </div>
             </div>
diff --git a/src/views/interview/practice/video/index.vue b/src/views/interview/practice/video/index.vue
index bbd110b..cc445ef 100644
--- a/src/views/interview/practice/video/index.vue
+++ b/src/views/interview/practice/video/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { Video } from '@/components'
 import { ImgButton } from '@/components/Button'
 import PracticeRatingModal, {
@@ -11,6 +11,7 @@ import { computed, ref } from 'vue'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 
 const router = useRouter()
+const route = useRoute()
 const store = useInterviewStore()
 
 const guideKey = 'interview-practice-video-rating'
@@ -88,6 +89,13 @@ const handleSaveEvaluation = (items: PracticeRatingItem[]): void => {
   store.setPracticeWorkRating(workKey.value, toScores(items))
 }
 
+const handleVideoEnded = (): void => {
+  const watchKey = route.query.watchKey
+  if (typeof watchKey === 'string' && watchKey) {
+    store.markPracticeVideoWatched(watchKey)
+  }
+}
+
 /** 保存弹窗 */
 const showModal = ref<boolean>(false)
 
@@ -105,7 +113,7 @@ const handleBack = (): void => {
       @click="handleBack"
     />
     <ImgButton
-      class="absolute right-0 top-1/2 -translate-y-1/2 z-50"
+      class="btn-1 absolute right-0 top-1/2 -translate-y-1/2 z-50"
       image="vlog/practice/评分"
       @click="showModal = true"
     />
@@ -116,6 +124,7 @@ const handleBack = (): void => {
       :muted="false"
       :controls="true"
       :loop="false"
+      @ended="handleVideoEnded"
     />
 
     <PracticeRatingModal
@@ -130,7 +139,7 @@ const handleBack = (): void => {
     <GuideSteps
       :visible="showGuide"
       highlight-selector=".btn-1"
-      position-offset-y="60%"
+      position-offset-y="85%"
       @complete="handleRatingGuideComplete"
     >
       <GuideStepsItem audio-src="/audio/py_6_008.MP3">
diff --git a/src/views/interview/video/index.vue b/src/views/interview/video/index.vue
index 87fbff5..6e5cc63 100644
--- a/src/views/interview/video/index.vue
+++ b/src/views/interview/video/index.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, defineComponent, h, onMounted, ref } from 'vue'
 import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
+import DownloadButton from '@/components/DownloadButton.vue'
 import { GuideSteps, type GuideStep } from '@/components/Guide'
 import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import UnfinishedLearningPrompt from '@/components/UnfinishedLearningPrompt'
@@ -106,6 +107,46 @@ const getQuestionsForVideo = (index: number): Question[] => {
   return []
 }
 
+const StepNavigationGuideContent = defineComponent({
+  name: 'StepNavigationGuideContent',
+  setup() {
+    return () =>
+      h('div', { class: 'flex flex-wrap items-center justify-start' }, [
+        h('div', { class: 'text-yellow-400' }, [
+          '点击',
+          h(
+            'button',
+            {
+              class:
+                'w-10 h-10 bg-blue-500/80 rounded-full inline-flex items-center justify-center text-white transition-all duration-200',
+              title: '步骤导航',
+            },
+            [
+              h(
+                'svg',
+                {
+                  width: '20',
+                  height: '20',
+                  viewBox: '0 0 20 20',
+                  fill: 'none',
+                },
+                [
+                  h('path', {
+                    d: 'M3 4H17M3 8H17M3 12H17M3 16H17',
+                    stroke: 'currentColor',
+                    'stroke-width': '2',
+                    'stroke-linecap': 'round',
+                  }),
+                ],
+              ),
+            ],
+          ),
+          '可以切换不同的学习内容！',
+        ]),
+      ])
+  },
+})
+
 //引导步骤
 const steps = ref<GuideStep[]>([
   {
@@ -133,6 +174,12 @@ const introGuideSteps = computed<GuideStep[]>(() => {
         audioSrc: getPublicPath('audio/py_3_005.MP3'),
         content: '那么，让我们一起来拆解访谈作品的核心技能吧！',
       },
+      {
+        id: 'profession-intro3',
+        audioSrc: getPublicPath('audio/py_1_008_2.MP3'),
+        highlightSelector: '.step-navigation-btn',
+        content: StepNavigationGuideContent,
+      },
     ]
   }
 
@@ -377,13 +424,13 @@ onBeforeRouteLeave((to) => {
     <!-- 步骤导航按钮 -->
     <button
       v-if="key === 'profession'"
-      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-12 h-12 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
+      class="step-navigation-btn absolute right-4 top-1/2 z-10 -translate-y-1/2 w-16 h-16 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
       @click="showStepNavigation = true"
       title="步骤导航"
     >
       <svg
-        width="20"
-        height="20"
+        width="35"
+        height="35"
         viewBox="0 0 20 20"
         fill="none"
       >
@@ -434,13 +481,17 @@ onBeforeRouteLeave((to) => {
     <div
       v-else-if="key === 'idea'"
       :src="image"
-      class="cursor-pointer"
+      class="relative cursor-pointer"
       @click="handleIdeaImageClick"
     >
       <img
         :src="ideaImage"
         alt=""
       />
+      <DownloadButton
+        :image-url="ideaImage"
+        file-name="访谈思路提点.png"
+      />
     </div>
   </div>
 
diff --git a/src/views/interview/work/components/WorkSideSwitcher.vue b/src/views/interview/work/components/WorkSideSwitcher.vue
index 63806ad..1134009 100644
--- a/src/views/interview/work/components/WorkSideSwitcher.vue
+++ b/src/views/interview/work/components/WorkSideSwitcher.vue
@@ -51,6 +51,7 @@ const items = computed(() => [
     activeImage: 'work/选中_带三角',
     inactiveImage: 'work/未选中_带三角',
     statusImage: getStatusImage('case'),
+    completed: interview.workVideosWatched.case,
   },
   {
     key: 'profession',
@@ -58,6 +59,7 @@ const items = computed(() => [
     activeImage: 'work/选中_带三角',
     inactiveImage: 'work/未选中_带三角',
     statusImage: getStatusImage('profession'),
+    completed: interview.workVideosWatched.profession,
   },
   {
     key: 'idea',
@@ -65,6 +67,7 @@ const items = computed(() => [
     activeImage: 'work/选中_带三角',
     inactiveImage: 'work/未选中_带三角',
     statusImage: getStatusImage('idea'),
+    completed: interview.workVideosWatched.idea,
   },
 ])
 
diff --git a/src/views/skill/index.vue b/src/views/skill/index.vue
index e5c7a3e..7acea0b 100644
--- a/src/views/skill/index.vue
+++ b/src/views/skill/index.vue
@@ -98,7 +98,7 @@ const guideSteps = ref([
     id: 'step-6',
     title: '',
     content: '点击资源即可回顾微课视频或跳转到图文、交互等相关页面。',
-    highlightSelector: '.skill-tree-container',
+    highlightSelector: '.scrollbar-thin',
     audioSrc: getPublicPath('audio/py_5_006.MP3'),
   },
   {
@@ -106,16 +106,16 @@ const guideSteps = ref([
     title: '',
     content:
       '在搜索栏输入关键字，可快速搜索资源，支持按标题、模块、标签等字段搜索。',
-    highlightSelector: '.scrollbar-thin',
+    highlightSelector: '.search-box-container',
     audioSrc: getPublicPath('audio/py_5_007.MP3'),
   },
-  {
-    id: 'step-8',
-    title: '',
-    content: '点击【删除】按钮或【清除筛选】按钮可一键清空筛选内容。',
-    highlightSelector: '.search-box-container',
-    audioSrc: getPublicPath('audio/py_5_008.MP3'),
-  },
+  // {
+  //   id: 'step-8',
+  //   title: '',
+  //   content: '点击【删除】按钮或【清除筛选】按钮可一键清空筛选内容。',
+  //   highlightSelector: '.search-box-container',
+  //   audioSrc: getPublicPath('audio/py_5_008.MP3'),
+  // },
 ])
 
 /**
@@ -235,7 +235,11 @@ const currentFilterText = computed(() => {
     return searchTags.value.map((tag) => tag.name).join(' / ')
   }
 
-  return search.value.trim()
+  if (search.value.trim()) {
+    return search.value.trim()
+  }
+
+  return '技能树总览'
 })
 
 const currentSelectedTagName = computed(() => {
@@ -332,12 +336,14 @@ const resourceLearnedMap = computed(() =>
       viewed: vlogStore.viewed,
       professionVideosWatched: vlogStore.professionVideosWatched,
       workVideosWatched: vlogStore.workVideosWatched,
+      practiceVideosWatched: vlogStore.practiceVideosWatched,
       isRouteViewed: vlogStore.isRouteViewed,
     },
     interview: {
       viewed: interviewStore.viewed,
       professionVideosWatched: interviewStore.professionVideosWatched,
       workVideosWatched: interviewStore.workVideosWatched,
+      practiceVideosWatched: interviewStore.practiceVideosWatched,
       isRouteViewed: interviewStore.isRouteViewed,
     },
     film: {
@@ -345,6 +351,7 @@ const resourceLearnedMap = computed(() =>
       editingVideosWatched: filmStore.editingVideosWatched,
       professionVideosWatched: filmStore.professionVideosWatched,
       workVideosWatched: filmStore.workVideosWatched,
+      practiceVideosWatched: filmStore.practiceVideosWatched,
       isRouteViewed: filmStore.isRouteViewed,
     },
   }),
@@ -496,46 +503,51 @@ const handleGuideSkip = () => {
       @click="handleClose"
     />
 
-    <!-- 搜索框 -->
-    <div
-      class="search-box-container absolute left-10 top-10 w-[547px] h-[84px] bg-cover bg-center pl-[130px] pr-[30px] pt-[20px] pb-[21px] flex items-center gap-2 overflow-hidden"
-      :style="{
-        backgroundImage: getBackgroundImage('skill/搜索框-已搜索.png'),
-        backgroundSize: 'cover',
-      }"
-    >
-      <!-- 搜索标签显示 -->
-      <div class="flex-shrink-0 overflow-x-auto scrollbar-hide">
-        <SearchTags
-          :tags="searchTags"
-          @remove="handleRemoveTag"
+    <!-- 检索 -->
+    <div class="search-box-container absolute left-10 top-10 pb-8">
+      <!-- 搜索框 -->
+      <div
+        class="w-[547px] h-[84px] bg-cover bg-center pl-[130px] pr-[30px] pt-[20px] pb-[21px] flex items-center gap-2 overflow-hidden"
+        :style="{
+          backgroundImage: getBackgroundImage('skill/搜索框-已搜索.png'),
+          backgroundSize: 'cover',
+        }"
+      >
+        <!-- 搜索标签显示 -->
+        <div class="flex-shrink-0 overflow-x-auto scrollbar-hide">
+          <SearchTags
+            :tags="searchTags"
+            @remove="handleRemoveTag"
+          />
+        </div>
+        <!-- 搜索文本输入（可选，用于额外搜索） -->
+        <input
+          v-model="search"
+          type="text"
+          name="skill"
+          :placeholder="searchTags.length === 0 ? '输入关键字检索' : ''"
+          maxlength="14"
+          class="flex-1 min-w-0 h-full bg-transparent border-none placeholder:text-white placeholder:text-2xl outline-none text-white text-2xl"
         />
       </div>
-      <!-- 搜索文本输入（可选，用于额外搜索） -->
-      <input
-        v-model="search"
-        type="text"
-        name="skill"
-        :placeholder="searchTags.length === 0 ? '请搜索检索' : ''"
-        maxlength="14"
-        class="flex-1 min-w-0 h-full bg-transparent border-none placeholder:text-white placeholder:text-2xl outline-none text-white text-2xl"
-      />
-    </div>
 
-    <div
-      v-if="hasActiveFilter"
-      class="absolute left-10 top-[108px] z-20 flex items-center gap-4 rounded-full border-2 border-white/80 bg-[#1b8fd8]/85 px-6 py-3 text-white shadow-lg backdrop-blur-sm"
-    >
-      <span class="text-2xl font-bold">当前查看：{{ currentFilterText }}</span>
-      <span class="text-xl opacity-90">
-        共 {{ filteredResources.length }} 个资源
-      </span>
-      <button
-        class="rounded-full bg-white/25 px-4 py-1 text-xl font-bold transition-all hover:bg-white/40"
-        @click="clearAllFilters"
+      <div
+        class="absolute left-0 top-[70px] z-20 flex items-center gap-4 whitespace-nowrap rounded-full border-2 border-white/80 bg-[#1b8fd8]/85 px-6 py-3 text-white shadow-lg backdrop-blur-sm"
       >
-        清除筛选
-      </button>
+        <span class="text-2xl font-bold">
+          当前查看：{{ currentFilterText }}
+        </span>
+        <span class="text-xl text-white/90">
+          共 {{ filteredResources.length }} 个资源
+        </span>
+        <button
+          v-if="hasActiveFilter"
+          class="rounded-full bg-white/25 px-4 py-1 text-xl font-bold transition-all hover:bg-white/40"
+          @click="clearAllFilters"
+        >
+          清除筛选
+        </button>
+      </div>
     </div>
 
     <!-- 模块列表 -->
@@ -597,12 +609,12 @@ const handleGuideSkip = () => {
             <button
               v-for="subTag in availableSubTags"
               :key="subTag.id"
-              class="flex h-[116px] w-[104px] shrink-0 flex-col items-center justify-center rounded-2xl border-2 transition-all hover:scale-105"
+              class="flex shrink-0 flex-col items-center justify-center rounded-2xl border-2 transition-all hover:scale-105"
               :class="
                 selectedSubTagId === subTag.id ||
                 selectedSubTagId === subTag.name
                   ? 'border-white bg-white/35 shadow-lg'
-                  : 'border-white/45 bg-[#1597d7]/45'
+                  : 'border-white/45 bg-[#1597d7]/15'
               "
               @click="
                 handleSubTagClick(
@@ -613,7 +625,7 @@ const handleGuideSkip = () => {
               "
             >
               <img
-                class="object-contain"
+                :width="104"
                 :src="getStaticImage(getSubTagIcon(subTag.name))"
                 :alt="subTag.name"
               />
diff --git a/src/views/skill/resourceData.ts b/src/views/skill/resourceData.ts
index 39c6cd8..6cab204 100644
--- a/src/views/skill/resourceData.ts
+++ b/src/views/skill/resourceData.ts
@@ -618,10 +618,9 @@ const vlogResources: ResourceItem[] = [
     tagName: '后期制作',
     subTagId: 'subtag-2-3-3',
     subTagName: '调色',
-    type: 'video',
-    videoUrl: '/video/vlog/color/Vlogmk_tsybz_batch.mp4',
-    storeKey: 'VlogColor',
-    completionMode: 'quiz-complete',
+    type: 'page',
+    routeName: 'VlogColor',
+    completionMode: 'aggregate',
   },
   {
     id: 'res-46',
@@ -644,7 +643,7 @@ const vlogResources: ResourceItem[] = [
     tagName: '思路提点与案例赏析',
     type: 'video',
     videoUrl: '/video/vlog/practice/vlog_case1_batch.mp4',
-    storeKey: 'case',
+    storeKey: 'vlog-practice-case-1',
     completionMode: 'video-ended',
   },
   {
@@ -656,7 +655,7 @@ const vlogResources: ResourceItem[] = [
     tagName: '思路提点与案例赏析',
     type: 'video',
     videoUrl: '/video/vlog/practice/vlog_case2_batch.mp4',
-    storeKey: 'profession',
+    storeKey: 'vlog-practice-case-2',
     completionMode: 'video-ended',
   },
 ]
@@ -782,7 +781,7 @@ const interviewResources: ResourceItem[] = [
     type: 'page',
     routeName: 'InterviewScriptWriting',
     step: 1,
-    completionMode: 'video-ended',
+    completionMode: 'stay-3s',
   },
   {
     id: 'res-58',
@@ -960,10 +959,9 @@ const interviewResources: ResourceItem[] = [
     tagName: '后期制作',
     subTagId: 'subtag-3-3-5',
     subTagName: '音效',
-    type: 'video',
-    videoUrl: '/video/interview/editing/ftmk_yx_batch.mp4',
-    storeKey: 'InterviewSoundEffect',
-    completionMode: 'stay-3s',
+    type: 'page',
+    routeName: 'InterviewSoundEffect',
+    completionMode: 'video-ended',
   },
   {
     id: 'res-71',
@@ -986,7 +984,7 @@ const interviewResources: ResourceItem[] = [
     tagName: '思路提点与案例赏析',
     type: 'video',
     videoUrl: '/video/interview/practice/fangtan_cace1_batch.mp4',
-    storeKey: 'case',
+    storeKey: 'interview-practice-case-1',
     completionMode: 'video-ended',
   },
 ]
@@ -1157,7 +1155,7 @@ const filmResources: ResourceItem[] = [
     type: 'page',
     routeName: 'FilmScriptWriting',
     step: 1,
-    completionMode: 'video-ended',
+    completionMode: 'stay-3s',
   },
   // {
   //   id: 'res-85',
@@ -1238,7 +1236,7 @@ const filmResources: ResourceItem[] = [
     subTagName: '拍摄技巧',
     type: 'page',
     routeName: 'FilmOnsiteTimeLapse',
-    completionMode: 'video-ended',
+    completionMode: 'quiz-complete',
   },
 
   // 拍摄执行与后期制作视频
@@ -1440,7 +1438,7 @@ const filmResources: ResourceItem[] = [
     tagName: '思路提点与案例赏析',
     type: 'video',
     videoUrl: '/video/film/practice/film_anli1.mp4',
-    storeKey: 'case',
+    storeKey: 'film-practice-case-1',
     completionMode: 'video-ended',
   },
 ]
diff --git a/src/views/skill/utils.ts b/src/views/skill/utils.ts
index 162aab5..7791e2f 100644
--- a/src/views/skill/utils.ts
+++ b/src/views/skill/utils.ts
@@ -8,12 +8,14 @@ export type SkillStoreState = {
     viewed: Record<string, boolean>
     professionVideosWatched: Record<string, boolean>
     workVideosWatched: Record<string, boolean>
+    practiceVideosWatched: Record<string, boolean>
     isRouteViewed: (name: string) => boolean
   }
   interview: {
     viewed: Record<string, boolean>
     professionVideosWatched: Record<string, boolean>
     workVideosWatched: Record<string, boolean>
+    practiceVideosWatched: Record<string, boolean>
     isRouteViewed: (name: string) => boolean
   }
   film: {
@@ -21,6 +23,7 @@ export type SkillStoreState = {
     editingVideosWatched: Record<string, boolean>
     professionVideosWatched: Record<string, boolean>
     workVideosWatched: Record<string, boolean>
+    practiceVideosWatched: Record<string, boolean>
     isRouteViewed: (name: string) => boolean
   }
 }
@@ -40,12 +43,14 @@ const isModuleVideoUnlocked = (
       return (
         stores.vlog.professionVideosWatched[resource.storeKey] === true ||
         stores.vlog.workVideosWatched[resource.storeKey] === true ||
+        stores.vlog.practiceVideosWatched[resource.storeKey] === true ||
         stores.vlog.isRouteViewed(resource.storeKey)
       )
     case 'module-3':
       return (
         stores.interview.professionVideosWatched[resource.storeKey] === true ||
         stores.interview.workVideosWatched[resource.storeKey] === true ||
+        stores.interview.practiceVideosWatched[resource.storeKey] === true ||
         stores.interview.isRouteViewed(resource.storeKey)
       )
     case 'module-4':
@@ -53,6 +58,7 @@ const isModuleVideoUnlocked = (
         stores.film.editingVideosWatched[resource.storeKey] === true ||
         stores.film.professionVideosWatched[resource.storeKey] === true ||
         stores.film.workVideosWatched[resource.storeKey] === true ||
+        stores.film.practiceVideosWatched[resource.storeKey] === true ||
         stores.film.isRouteViewed(resource.storeKey)
       )
     default:
diff --git a/src/views/vlog/after-editing/editing.vue b/src/views/vlog/after-editing/editing.vue
index 85814b8..7aa4231 100644
--- a/src/views/vlog/after-editing/editing.vue
+++ b/src/views/vlog/after-editing/editing.vue
@@ -189,13 +189,13 @@ onBeforeRouteLeave((to) => {
           @click="handleClose"
         />
         <button
-          class="absolute right-4 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-blue-500/80 text-white transition-all duration-200 hover:bg-blue-500 pointer-events-auto"
+          class="absolute right-4 top-1/2 z-10 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full bg-blue-500/80 text-white transition-all duration-200 hover:bg-blue-500 pointer-events-auto"
           title="步骤导航"
           @click="showStepNavigation = true"
         >
           <svg
-            width="20"
-            height="20"
+            width="35"
+            height="35"
             viewBox="0 0 20 20"
             fill="none"
           >
diff --git a/src/views/vlog/after-editing/export-publish/index.vue b/src/views/vlog/after-editing/export-publish/index.vue
index 8e29f72..aa14c5e 100644
--- a/src/views/vlog/after-editing/export-publish/index.vue
+++ b/src/views/vlog/after-editing/export-publish/index.vue
@@ -10,7 +10,7 @@ const router = useRouter()
 const vlogStore = useVlogStore()
 const guideKey = 'vlog-export-publish-intro'
 
-const videoUrl = getPublicPath('video/vlog/publish/vlog_wdzyzsj.mp4')
+const videoUrl = getPublicPath('video/vlog/publish/Vlog_wdzyzsj.mp4')
 const videoPlaying = ref(false)
 const showGuide = ref(!vlogStore.guideShown[guideKey])
 
diff --git a/src/views/vlog/index.vue b/src/views/vlog/index.vue
index 3160ee4..c7313cf 100644
--- a/src/views/vlog/index.vue
+++ b/src/views/vlog/index.vue
@@ -2,16 +2,28 @@
 import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 
-import { computed, ref, watch, type Ref } from 'vue'
+import { computed, nextTick, onMounted, ref, watch, type Ref } from 'vue'
 import { ProgressBar, Overlay } from '@/components'
 import { GuideSteps, GuideStepsItem, type GuideStep } from '@/components/Guide'
 import { useRoute, useRouter } from 'vue-router'
 import { useVlogStore } from '@/stores'
+import {
+  ModuleMedalPopup,
+  useModuleMedalPopup,
+} from '@/views/home/components/ModuleMedalPopup'
+import { StudyProgressPopup } from '@/views/home/components/StudyProgressPopup'
 import VlogMenu from './components/menu.vue'
 
 const route = useRoute()
 const router = useRouter()
 const vlog = useVlogStore()
+const {
+  activeMedalKey,
+  visible: medalPopupVisible,
+  showMedalIfNeeded,
+  closeMedal,
+} = useModuleMedalPopup()
+const pendingVlogMedal = ref(false)
 
 const visible = computed({
   get: () => vlog.vlogMenuVisible,
@@ -30,6 +42,31 @@ const hasShownPracticeGuide = computed(
 const showPracticeGuide = computed(
   () => currentStep.value === 4 && !hasShownPracticeGuide.value,
 )
+const isVlogCompleted = computed(() => progress.value >= 100)
+const showPendingVlogMedal = () => {
+  if (!pendingVlogMedal.value) return
+  if (
+    showReturnGuide.value ||
+    stageGuideStep.value ||
+    showPracticeGuide.value
+  ) {
+    return
+  }
+  pendingVlogMedal.value = false
+  showMedalIfNeeded('vlog')
+}
+const handleCloseMedalPopup = () => {
+  closeMedal()
+}
+const studyProgressVisible = ref(false)
+const handleViewProgressFromMedal = () => {
+  closeMedal()
+  studyProgressVisible.value = true
+}
+// 关闭学习进度弹窗后默认返回首页
+watch(studyProgressVisible, (value) => {
+  if (!value) router.push({ name: 'Action' })
+})
 
 const showReturnGuide = ref(
   route.query.guide === 'return' && vlog.isGuideVlogReturn,
@@ -176,6 +213,23 @@ watch(
   },
   { immediate: true },
 )
+
+watch(isVlogCompleted, (completed, previousCompleted) => {
+  if (!completed || previousCompleted !== false) return
+  pendingVlogMedal.value = true
+  nextTick(showPendingVlogMedal)
+})
+
+watch([showReturnGuide, stageGuideStep, showPracticeGuide], () => {
+  nextTick(showPendingVlogMedal)
+})
+
+onMounted(() => {
+  if (isVlogCompleted.value) {
+    pendingVlogMedal.value = true
+  }
+  showPendingVlogMedal()
+})
 </script>
 
 <template>
@@ -305,5 +359,14 @@ watch(
       @complete="handleStageGuideComplete"
       @skip="handleStageGuideComplete"
     />
+
+    <ModuleMedalPopup
+      :visible="medalPopupVisible"
+      :module-key="activeMedalKey"
+      @close="handleCloseMedalPopup"
+      @view-progress="handleViewProgressFromMedal"
+    />
+
+    <StudyProgressPopup v-model="studyProgressVisible" />
   </div>
 </template>
diff --git a/src/views/vlog/midterm-shooting/on-site/index.vue b/src/views/vlog/midterm-shooting/on-site/index.vue
index 8b92dd3..fe7b4c8 100644
--- a/src/views/vlog/midterm-shooting/on-site/index.vue
+++ b/src/views/vlog/midterm-shooting/on-site/index.vue
@@ -221,13 +221,13 @@ onBeforeRouteLeave((to) => {
           @click="handleClose"
         />
         <button
-          class="absolute right-4 top-1/2 z-20 -translate-y-1/2 w-12 h-12 rounded-full bg-blue-500/80 text-white transition-all duration-200 hover:bg-blue-500 pointer-events-auto flex items-center justify-center"
+          class="absolute right-4 top-1/2 z-20 -translate-y-1/2 w-16 h-16 rounded-full bg-blue-500/80 text-white transition-all duration-200 hover:bg-blue-500 pointer-events-auto flex items-center justify-center"
           title="资源列表"
           @click="showStepNavigation = true"
         >
           <svg
-            width="20"
-            height="20"
+            width="35"
+            height="35"
             viewBox="0 0 20 20"
             fill="none"
           >
diff --git a/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts b/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
index b3d184e..e97533d 100644
--- a/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
+++ b/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
@@ -12,7 +12,7 @@ export function useViewfinderA() {
 
   // 缩放级别 (保留用于点击按钮)
   const zoomLevels = [3, 2, 1]
-  const currentZoom = ref(1)
+  const currentZoom = ref(2)
   const isCapturing = ref(false) // 拍照闪光效果
 
   // 拖拽相关状态
@@ -44,8 +44,14 @@ export function useViewfinderA() {
     const maxOffsetY = (scaledHeight - containerHeight) / 2
 
     // 限制偏移量
-    currentOffsetX.value = Math.max(-maxOffsetX, Math.min(maxOffsetX, currentOffsetX.value))
-    currentOffsetY.value = Math.max(-maxOffsetY, Math.min(maxOffsetY, currentOffsetY.value))
+    currentOffsetX.value = Math.max(
+      -maxOffsetX,
+      Math.min(maxOffsetX, currentOffsetX.value),
+    )
+    currentOffsetY.value = Math.max(
+      -maxOffsetY,
+      Math.min(maxOffsetY, currentOffsetY.value),
+    )
   }
 
   // 设置缩放级别
@@ -144,6 +150,6 @@ export function useViewfinderA() {
     onDrag,
     endDrag,
     handleWheel,
-    getTransform
+    getTransform,
   }
 }
diff --git a/src/views/vlog/practice/index.vue b/src/views/vlog/practice/index.vue
index 5d6d60d..bf8fc65 100644
--- a/src/views/vlog/practice/index.vue
+++ b/src/views/vlog/practice/index.vue
@@ -116,6 +116,7 @@ interface WorkItem {
   title: string
   stars: number
   path: string
+  watchKey: string
   description: string
 }
 
@@ -126,6 +127,7 @@ const worksList = ref<WorkItem[]>([
     title: '熙熙攘攘我们的劳动',
     stars: 4,
     path: '/video/vlog/practice/vlog_case1_batch.mp4',
+    watchKey: 'vlog-practice-case-1',
     description: '26084 曹毅诚 杨子悦 张馨月 刘政亚 吴若涵 叶雨鑫',
   },
   {
@@ -134,6 +136,7 @@ const worksList = ref<WorkItem[]>([
     title: '匠心精神劳动承匠心',
     stars: 5,
     path: '/video/vlog/practice/vlog_case2_batch.mp4',
+    watchKey: 'vlog-practice-case-2',
     description: '26081 刘欢欢 锁怡雯 苏佳琪 陶恩泽 王子严 史贺元',
   },
 ])
@@ -388,7 +391,7 @@ onUnmounted(() => {
                 <ImgButton
                   :class="work.id === worksList[0]?.id ? 'view-btn' : ''"
                   image="vlog/practice/查看"
-                  :path="`/vlog/practice/video/${encodeURIComponent(work.path)}`"
+                  :path="`/vlog/practice/video/${encodeURIComponent(work.path)}?watchKey=${work.watchKey}`"
                 />
               </div>
             </div>
diff --git a/src/views/vlog/practice/video/index.vue b/src/views/vlog/practice/video/index.vue
index d4697a6..20893a1 100644
--- a/src/views/vlog/practice/video/index.vue
+++ b/src/views/vlog/practice/video/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { Video } from '@/components'
 import { ImgButton } from '@/components/Button'
 import PracticeRatingModal, {
@@ -11,6 +11,7 @@ import { computed, ref } from 'vue'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 
 const router = useRouter()
+const route = useRoute()
 const store = useVlogStore()
 
 const guideKey = 'vlog-practice-video-rating'
@@ -89,6 +90,13 @@ const handleSaveEvaluation = (items: PracticeRatingItem[]): void => {
   store.setPracticeWorkRating(workKey.value, toScores(items))
 }
 
+const handleVideoEnded = (): void => {
+  const watchKey = route.query.watchKey
+  if (typeof watchKey === 'string' && watchKey) {
+    store.markPracticeVideoWatched(watchKey)
+  }
+}
+
 /** 保存弹窗 */
 const showModal = ref<boolean>(false)
 
@@ -106,7 +114,7 @@ const handleBack = (): void => {
       @click="handleBack"
     />
     <ImgButton
-      class="absolute right-0 top-1/2 -translate-y-1/2 z-50"
+      class="btn-1 absolute right-0 top-1/2 -translate-y-1/2 z-50"
       image="vlog/practice/评分"
       @click="showModal = true"
     />
@@ -117,6 +125,7 @@ const handleBack = (): void => {
       :muted="false"
       :controls="true"
       :loop="false"
+      @ended="handleVideoEnded"
     />
 
     <PracticeRatingModal
@@ -131,7 +140,7 @@ const handleBack = (): void => {
     <GuideSteps
       :visible="showGuide"
       highlight-selector=".btn-1"
-      position-offset-y="60%"
+      position-offset-y="85%"
       @complete="handleRatingGuideComplete"
     >
       <GuideStepsItem audio-src="/audio/py_6_008.MP3">
diff --git a/src/views/vlog/video/index.vue b/src/views/vlog/video/index.vue
index 5ac5c8d..5b9099f 100644
--- a/src/views/vlog/video/index.vue
+++ b/src/views/vlog/video/index.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, defineComponent, h, onMounted, ref } from 'vue'
 import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { GuideSteps } from '@/components/Guide'
+import DownloadButton from '@/components/DownloadButton.vue'
+import { GuideSteps, type GuideStep } from '@/components/Guide'
 import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import UnfinishedLearningPrompt from '@/components/UnfinishedLearningPrompt'
 import { Video, ImagePreview } from '@/components'
 import { useScale } from '@/composables/useScale'
 import {
-  getBackgroundImage,
   getPublicPath,
   getStaticImage,
   IMAGE_PATHS,
@@ -26,7 +26,69 @@ const { scale, offsetX, offsetY } = useScale()
 const playing = ref(false)
 const status = ref(false)
 
-const steps = ref<{ id: string; content: string; audioSrc?: string }[]>([])
+const steps = ref<GuideStep[]>([])
+
+const StepNavigationGuideContent = defineComponent({
+  name: 'StepNavigationGuideContent',
+  setup() {
+    return () =>
+      h('div', { class: 'flex flex-wrap items-center justify-start' }, [
+        h('div', { class: 'text-yellow-400' }, [
+          '点击',
+          h(
+            'button',
+            {
+              class:
+                'w-10 h-10 bg-blue-500/80 rounded-full inline-flex items-center justify-center text-white transition-all duration-200',
+              title: '步骤导航',
+            },
+            [
+              h(
+                'svg',
+                {
+                  width: '20',
+                  height: '20',
+                  viewBox: '0 0 20 20',
+                  fill: 'none',
+                },
+                [
+                  h('path', {
+                    d: 'M3 4H17M3 8H17M3 12H17M3 16H17',
+                    stroke: 'currentColor',
+                    'stroke-width': '2',
+                    'stroke-linecap': 'round',
+                  }),
+                ],
+              ),
+            ],
+          ),
+          '可以切换不同的学习内容！',
+        ]),
+      ])
+  },
+})
+
+const introGuideSteps = computed<GuideStep[]>(() => {
+  if (key.value === 'profession' && !vlog.guideShown['work-profession-intro']) {
+    return [
+      {
+        id: 'profession-intro1',
+        audioSrc: getPublicPath('audio/py_1_008_2.MP3'),
+        highlightSelector: '.step-navigation-btn',
+        content: StepNavigationGuideContent,
+      },
+    ]
+  }
+
+  return []
+})
+
+const showIntroGuide = computed(() => introGuideSteps.value.length > 0)
+
+const handleIntroGuideDone = () => {
+  vlog.markGuideShown('work-profession-intro')
+  playing.value = true
+}
 
 // 步骤导航数据
 const navigationSteps = ref([
@@ -165,7 +227,6 @@ const handleIdeaImageClick = () => {
 
 const image = computed(() => route.query.image as string)
 const key = computed(() => route.query.key as string)
-const label = computed(() => route.query.label as string)
 
 // 示例：简单锚点配置（可按需替换为真实题目数据）
 // const anchors = ref([
@@ -226,6 +287,12 @@ const handleConfirmLeave = () => {
   router.push(pendingLeavePath.value)
 }
 
+onMounted(() => {
+  if (!showIntroGuide.value) {
+    playing.value = true
+  }
+})
+
 onBeforeRouteLeave((to) => {
   if (allowRouteLeave.value || !hasUnfinishedLearningVideos.value) return true
   pendingLeavePath.value = to.fullPath
@@ -237,22 +304,6 @@ onBeforeRouteLeave((to) => {
 <template>
   <div class="w-full h-full relative bg-white/10">
     <template v-if="key !== 'case' && key !== 'profession'">
-      <div
-        :class="[
-          'absolute left-4 top-4 z-10 w-[359px] h-[96px] bg-cover bg-center',
-          'flex justify-center items-center',
-        ]"
-        :style="{ backgroundImage: getBackgroundImage(image) }"
-      >
-        <span
-          :class="[
-            'ml-6 text-white [text-shadow:5px_5px_5px_rgba(0,0,0,0.4)] text-5xl font-bold',
-          ]"
-        >
-          {{ label }}
-        </span>
-      </div>
-      <!-- <ImgButton class="absolute left-4 top-4 z-10" :image="image"></ImgButton> -->
       <ImgButton
         class="absolute right-0 top-0 z-10"
         :image="IMAGE_PATHS.COMPONENTS.BACK"
@@ -262,13 +313,13 @@ onBeforeRouteLeave((to) => {
     <!-- 步骤导航按钮 -->
     <button
       v-if="key === 'profession'"
-      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-12 h-12 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
+      class="step-navigation-btn absolute right-4 top-1/2 z-10 -translate-y-1/2 w-16 h-16 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
       @click="showStepNavigation = true"
       title="步骤导航"
     >
       <svg
-        width="20"
-        height="20"
+        width="35"
+        height="35"
         viewBox="0 0 20 20"
         fill="none"
       >
@@ -355,16 +406,29 @@ onBeforeRouteLeave((to) => {
     <div
       v-else-if="key === 'idea'"
       :src="image"
-      class="cursor-pointer"
+      class="relative cursor-pointer"
       @click="handleIdeaImageClick"
     >
       <img
         :src="ideaImage"
         alt=""
       />
+      <DownloadButton
+        :image-url="ideaImage"
+        file-name="Vlog思路提点.png"
+      />
     </div>
   </div>
 
+  <!-- 进入专业剖析时显示引导 -->
+  <GuideSteps
+    v-if="showIntroGuide"
+    :steps="introGuideSteps"
+    position-offset-y="85%"
+    @complete="handleIntroGuideDone"
+    @skip="handleIntroGuideDone"
+  />
+
   <!-- 引导与高亮 -->
   <GuideSteps
     v-if="status"
diff --git a/src/views/vlog/work/components/WorkSideSwitcher.vue b/src/views/vlog/work/components/WorkSideSwitcher.vue
index 6cbbab0..baef1b1 100644
--- a/src/views/vlog/work/components/WorkSideSwitcher.vue
+++ b/src/views/vlog/work/components/WorkSideSwitcher.vue
@@ -51,6 +51,7 @@ const items = computed(() => [
     activeImage: 'work/选中_带三角',
     inactiveImage: 'work/未选中_带三角',
     statusImage: getStatusImage('case'),
+    completed: vlog.workVideosWatched.case,
   },
   {
     key: 'profession',
@@ -58,6 +59,7 @@ const items = computed(() => [
     activeImage: 'work/选中_带三角',
     inactiveImage: 'work/未选中_带三角',
     statusImage: getStatusImage('profession'),
+    completed: vlog.workVideosWatched.profession,
   },
   {
     key: 'idea',
@@ -65,6 +67,7 @@ const items = computed(() => [
     activeImage: 'work/选中_带三角',
     inactiveImage: 'work/未选中_带三角',
     statusImage: getStatusImage('idea'),
+    completed: vlog.workVideosWatched.idea,
   },
 ])
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 0504327..411ca57 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,51 +4,62 @@ import plugin from 'tailwindcss/plugin'
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
-    extend: {}
+    extend: {
+      keyframes: {
+        'start-filming-breath': {
+          '0%, 100%': { transform: 'scale(1)' },
+          '50%': { transform: 'scale(1.08)' },
+        },
+      },
+      animation: {
+        'start-filming-breath':
+          'start-filming-breath 1.6s ease-in-out infinite',
+      },
+    },
   },
   plugins: [
     plugin(function ({ addUtilities, matchUtilities, theme }) {
       addUtilities({
         '.transform-3d': {
-          'transform-style': 'preserve-3d'
+          'transform-style': 'preserve-3d',
         },
         '.backface-hidden': {
-          'backface-visibility': 'hidden'
+          'backface-visibility': 'hidden',
         },
         '.backface-visible': {
-          'backface-visibility': 'visible'
-        }
+          'backface-visibility': 'visible',
+        },
       })
 
       matchUtilities(
         {
-          perspective: value => ({
-            perspective: value
-          })
-        },
-        { values: theme('spacing') }
-      )
-
-      matchUtilities(
-        {
-          'rotate-x': value => ({
-            transform: `rotateX(${value})`
+          perspective: (value) => ({
+            perspective: value,
           }),
-          'rotate-y': value => ({
-            transform: `rotateY(${value})`
-          })
         },
-        { values: theme('rotate') }
+        { values: theme('spacing') },
       )
 
       matchUtilities(
         {
-          'translate-z': value => ({
-            transform: `translateZ(${value})`
-          })
+          'rotate-x': (value) => ({
+            transform: `rotateX(${value})`,
+          }),
+          'rotate-y': (value) => ({
+            transform: `rotateY(${value})`,
+          }),
         },
-        { values: theme('spacing') }
+        { values: theme('rotate') },
       )
-    })
-  ]
+
+      matchUtilities(
+        {
+          'translate-z': (value) => ({
+            transform: `translateZ(${value})`,
+          }),
+        },
+        { values: theme('spacing') },
+      )
+    }),
+  ],
 }
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
index fd046c8..c7c5269 100644
--- a/tsconfig.eslint.json
+++ b/tsconfig.eslint.json
@@ -1,8 +1,27 @@
 {
-  "extends": "./tsconfig.app.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
     "noEmit": true,
-    "allowArbitraryExtensions": true
+    "allowArbitraryExtensions": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.d.ts", "src/vite-env.d.ts"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "src/**/*.d.ts",
+    "src/vite-env.d.ts"
+  ]
 }