diff --git a/PINIA_GUIDE.md b/PINIA_GUIDE.md
new file mode 100644
index 0000000..88371de
--- /dev/null
+++ b/PINIA_GUIDE.md
@@ -0,0 +1,165 @@
+# Pinia 状态管理使用指南
+
+## 概述
+
+项目已集成 Pinia 状态管理库和 `pinia-plugin-persistedstate` 插件,支持自动将状态持久化到 localStorage。
+
+## 安装的依赖
+
+- `pinia`: Vue 官方状态管理库
+- `pinia-plugin-persistedstate`: Pinia 持久化插件
+
+## 目录结构
+
+```
+src/
+├── stores/
+│   ├── modules/          # 模块化 stores 目录
+│   │   ├── counter.ts    # 计数器模块
+│   │   ├── user.ts       # 用户信息模块
+│   │   ├── preferences.ts # 偏好设置模块
+│   │   └── example.ts    # 综合示例模块
+│   └── index.ts          # 统一导出文件
+└── main.ts               # Pinia 配置
+```
+
+## 基本用法
+
+### 1. 创建 Store
+
+在 `src/stores/` 目录下创建新的 store 文件:
+
+```typescript
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useMyStore = defineStore(
+  'myStore', // store id,必须唯一
+  () => {
+    // 使用 Composition API 风格
+    const data = ref<string>('')
+
+    function updateData(newData: string): void {
+      data.value = newData
+    }
+
+    return {
+      data,
+      updateData
+    }
+  },
+  {
+    // 启用持久化到 localStorage
+    persist: true
+  }
+)
+```
+
+### 2. 在组件中使用 Store
+
+```vue
+<script setup lang="ts">
+import { useExampleStore } from '@/stores'
+
+const store = useExampleStore()
+
+// 读取状态
+console.log(store.count)
+console.log(store.userName)
+
+// 调用 actions
+store.increment()
+store.setUserName('张三')
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ store.count }}</p>
+    <p>User: {{ store.userName }}</p>
+    <button @click="store.increment">增加</button>
+  </div>
+</template>
+```
+
+### 3. 高级持久化配置
+
+如果只想持久化部分状态:
+
+```typescript
+export const useMyStore = defineStore(
+  'myStore',
+  () => {
+    const persistedData = ref<string>('')
+    const temporaryData = ref<string>('')
+
+    return {
+      persistedData,
+      temporaryData
+    }
+  },
+  {
+    persist: {
+      // 自定义 localStorage key
+      key: 'my-custom-key',
+      // 只持久化指定的状态
+      paths: ['persistedData'],
+      // 自定义存储方式(默认是 localStorage)
+      storage: localStorage
+    }
+  }
+)
+```
+
+## Store 模块化设计
+
+项目采用**模块化**设计,将不同职责的状态拆分到独立的 stores:
+
+### 已创建的模块化 Stores
+
+#### 1. Counter Store (`src/stores/modules/counter.ts`)
+
+- 管理计数器状态
+- 提供 increment, decrement, reset 方法
+
+#### 2. User Store (`src/stores/modules/user.ts`)
+
+- 管理用户基本信息
+- 提供 setUserName, clearUserName 方法
+
+#### 3. Preferences Store (`src/stores/modules/preferences.ts`)
+
+- 管理用户偏好设置(主题、语言等)
+- 包含 computed getters (isDarkMode, currentLanguage)
+- 提供主题切换、语言设置等方法
+
+#### 4. Example Store (`src/stores/modules/example.ts`)
+
+- 综合示例,展示所有功能
+- 可作为参考模板
+
+### 模块化优势
+
+- ✅ **职责单一**: 每个 store 只管理特定领域的状态
+- ✅ **易于维护**: 代码结构清晰,便于定位和修改
+- ✅ **可复用**: 小模块更容易在不同场景复用
+- ✅ **按需加载**: 组件只导入需要的 stores
+- ✅ **类型安全**: 每个模块有独立的类型定义
+
+## 持久化特性
+
+- 🔄 **自动保存**: 状态变化时自动保存到 localStorage
+- 🚀 **自动恢复**: 页面刷新后自动从 localStorage 恢复状态
+- 🎯 **类型安全**: 完整的 TypeScript 支持
+- ⚙️ **可配置**: 支持自定义持久化策略
+
+## 注意事项
+
+1. **Store ID 必须唯一**: 每个 store 的第一个参数(store id)必须在应用中唯一
+2. **localStorage 限制**: 浏览器 localStorage 通常有 5-10MB 的存储限制
+3. **敏感数据**: 不要在 localStorage 中存储敏感信息(如密码、token 等)
+4. **序列化限制**: 只能存储可序列化的数据(不支持 Function, Symbol 等)
+
+## 参考资源
+
+- [Pinia 官方文档](https://pinia.vuejs.org/)
+- [pinia-plugin-persistedstate 文档](https://prazdevs.github.io/pinia-plugin-persistedstate/)
diff --git a/eslint.config.ts b/eslint.config.ts
index b539dfd..fb2fb92 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -6,12 +6,23 @@ import { defineConfig } from 'eslint/config'
 export default defineConfig([
   { files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'], languageOptions: { globals: globals.browser } },
   tseslint.configs.recommended,
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off'
+    }
+  },
   pluginVue.configs['flat/essential'],
   {
     files: ['**/*.vue'],
     languageOptions: { parserOptions: { parser: tseslint.parser } },
     rules: {
       'vue/multi-word-component-names': 'off',
+      'vue/no-undef-components': [
+        'error',
+        {
+          ignorePatterns: ['router-view', 'router-link', 'RouterView', 'RouterLink']
+        }
+      ],
       '@typescript-eslint/no-unused-vars': 'warn',
       '@typescript-eslint/no-explicit-any': 'off', // 完全禁用 any 检查
       // 关闭所有需要类型信息的规则
diff --git a/index.html b/index.html
index dde16aa..1f36676 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,14 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
+    />
+    <meta name="referrer" content="no-referrer" />
+    <title>短视频达人</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/package.json b/package.json
index c13b9fb..1865b89 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,11 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@zumer/snapdom": "^2.0.0",
+    "html2canvas": "^1.4.1",
     "less": "^4.4.1",
+    "pinia": "^3.0.4",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
   },
@@ -23,6 +27,7 @@
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.21",
+    "baseline-browser-mapping": "^2.8.28",
     "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7a285cc..834f685 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,21 @@ importers:
 
   .:
     dependencies:
+      '@zumer/snapdom':
+        specifier: ^2.0.0
+        version: 2.0.0
+      html2canvas:
+        specifier: ^1.4.1
+        version: 1.4.1
       less:
         specifier: ^4.4.1
         version: 4.4.1
+      pinia:
+        specifier: ^3.0.4
+        version: 3.0.4(typescript@5.8.3)(vue@3.5.21(typescript@5.8.3))
+      pinia-plugin-persistedstate:
+        specifier: ^4.7.1
+        version: 4.7.1(pinia@3.0.4(typescript@5.8.3)(vue@3.5.21(typescript@5.8.3)))
       vue:
         specifier: ^3.5.18
         version: 3.5.21(typescript@5.8.3)
@@ -36,6 +48,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.21
         version: 10.4.21(postcss@8.5.6)
+      baseline-browser-mapping:
+        specifier: ^2.8.28
+        version: 2.8.28
       eslint:
         specifier: ^9.35.0
         version: 9.35.0(jiti@2.5.1)
@@ -649,6 +664,15 @@ packages:
   '@vue/devtools-api@6.6.4':
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
+  '@vue/devtools-api@7.7.9':
+    resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
+
+  '@vue/devtools-kit@7.7.9':
+    resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==}
+
+  '@vue/devtools-shared@7.7.9':
+    resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
+
   '@vue/language-core@3.0.7':
     resolution: {integrity: sha512-0sqqyqJ0Gn33JH3TdIsZLCZZ8Gr4kwlg8iYOnOrDDkJKSjFurlQY/bEFQx5zs7SX2C/bjMkmPYq/NiyY1fTOkw==}
     peerDependencies:
@@ -685,6 +709,9 @@ packages:
       vue:
         optional: true
 
+  '@zumer/snapdom@2.0.0':
+    resolution: {integrity: sha512-e/fkm5wCUd+9CssUIyH09xTeR4DvRTmZLGVOlnXLhr4HeI7sdc6ed8cLPiZKFtiQDRiwD3EKx4RIUrpQOJQY7A==}
+
   JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
@@ -754,14 +781,21 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  baseline-browser-mapping@2.8.2:
-    resolution: {integrity: sha512-NvcIedLxrs9llVpX7wI+Jz4Hn9vJQkCPKrTaHIE0sW/Rj1iq6Fzby4NbyTZjQJNoypBXNaG7tEHkTgONZpwgxQ==}
+  base64-arraybuffer@1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+
+  baseline-browser-mapping@2.8.28:
+    resolution: {integrity: sha512-gYjt7OIqdM0PcttNYP2aVrr2G0bMALkBaoehD4BuRGjAOtipg0b6wHg1yNL+s5zSnLZZrGHOw4IrND8CD+3oIQ==}
     hasBin: true
 
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
+  birpc@2.9.0:
+    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
+
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
@@ -855,6 +889,10 @@ packages:
   copy-anything@2.0.6:
     resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
 
+  copy-anything@4.0.5:
+    resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
+    engines: {node: '>=18'}
+
   cosmiconfig-typescript-loader@6.1.0:
     resolution: {integrity: sha512-tJ1w35ZRUiM5FeTzT7DtYWAFFv37ZLqSRkGi2oeCK1gPhvaWjkAtfXvLmvE1pRfxxp9aQo6ba/Pvg1dKj05D4g==}
     engines: {node: '>=v18'}
@@ -876,6 +914,9 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-line-break@2.1.0:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -903,6 +944,9 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+
   detect-libc@2.0.4:
     resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
@@ -1167,6 +1211,13 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
+  html2canvas@1.4.1:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+
   husky@9.1.7:
     resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
     engines: {node: '>=18'}
@@ -1250,6 +1301,10 @@ packages:
   is-what@3.14.1:
     resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
 
+  is-what@5.5.0:
+    resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
+    engines: {node: '>=18'}
+
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -1470,6 +1525,9 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -1579,6 +1637,9 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -1603,6 +1664,29 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
+  pinia-plugin-persistedstate@4.7.1:
+    resolution: {integrity: sha512-WHOqh2esDlR3eAaknPbqXrkkj0D24h8shrDPqysgCFR6ghqP/fpFfJmMPJp0gETHsvrh9YNNg6dQfo2OEtDnIQ==}
+    peerDependencies:
+      '@nuxt/kit': '>=3.0.0'
+      '@pinia/nuxt': '>=0.10.0'
+      pinia: '>=3.0.0'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@pinia/nuxt':
+        optional: true
+      pinia:
+        optional: true
+
+  pinia@3.0.4:
+    resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
+    peerDependencies:
+      typescript: '>=4.5.0'
+      vue: ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   pirates@4.0.7:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
@@ -1761,6 +1845,10 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+
   split2@4.2.0:
     resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
     engines: {node: '>= 10.x'}
@@ -1798,6 +1886,10 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
+  superjson@2.2.6:
+    resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
+    engines: {node: '>=16'}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -1819,6 +1911,9 @@ packages:
     resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
     engines: {node: '>=8'}
 
+  text-segmentation@1.0.3:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+
   thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}
@@ -1887,6 +1982,9 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  utrie@1.0.2:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+
   vite@7.1.5:
     resolution: {integrity: sha512-4cKBO9wR75r0BeIWWWId9XK9Lj6La5X846Zw9dFfzMRw38IlTk2iCcUt6hsyiDRcPidc55ZParFYDXi0nXOeLQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2536,6 +2634,24 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
+  '@vue/devtools-api@7.7.9':
+    dependencies:
+      '@vue/devtools-kit': 7.7.9
+
+  '@vue/devtools-kit@7.7.9':
+    dependencies:
+      '@vue/devtools-shared': 7.7.9
+      birpc: 2.9.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.6
+
+  '@vue/devtools-shared@7.7.9':
+    dependencies:
+      rfdc: 1.4.1
+
   '@vue/language-core@3.0.7(typescript@5.8.3)':
     dependencies:
       '@volar/language-core': 2.4.23
@@ -2578,6 +2694,8 @@ snapshots:
       typescript: 5.8.3
       vue: 3.5.21(typescript@5.8.3)
 
+  '@zumer/snapdom@2.0.0': {}
+
   JSONStream@1.3.5:
     dependencies:
       jsonparse: 1.3.1
@@ -2644,10 +2762,14 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
-  baseline-browser-mapping@2.8.2: {}
+  base64-arraybuffer@1.0.2: {}
+
+  baseline-browser-mapping@2.8.28: {}
 
   binary-extensions@2.3.0: {}
 
+  birpc@2.9.0: {}
+
   boolbase@1.0.0: {}
 
   brace-expansion@1.1.12:
@@ -2665,7 +2787,7 @@ snapshots:
 
   browserslist@4.26.0:
     dependencies:
-      baseline-browser-mapping: 2.8.2
+      baseline-browser-mapping: 2.8.28
       caniuse-lite: 1.0.30001741
       electron-to-chromium: 1.5.218
       node-releases: 2.0.21
@@ -2749,6 +2871,10 @@ snapshots:
     dependencies:
       is-what: 3.14.1
 
+  copy-anything@4.0.5:
+    dependencies:
+      is-what: 5.5.0
+
   cosmiconfig-typescript-loader@6.1.0(@types/node@24.3.3)(cosmiconfig@9.0.0(typescript@5.8.3))(typescript@5.8.3):
     dependencies:
       '@types/node': 24.3.3
@@ -2771,6 +2897,10 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-line-break@2.1.0:
+    dependencies:
+      utrie: 1.0.2
+
   cssesc@3.0.0: {}
 
   csstype@3.1.3: {}
@@ -2785,6 +2915,8 @@ snapshots:
 
   deep-is@0.1.4: {}
 
+  defu@6.1.4: {}
+
   detect-libc@2.0.4:
     optional: true
 
@@ -3065,6 +3197,13 @@ snapshots:
 
   he@1.2.0: {}
 
+  hookable@5.5.3: {}
+
+  html2canvas@1.4.1:
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+
   husky@9.1.7: {}
 
   iconv-lite@0.6.3:
@@ -3124,6 +3263,8 @@ snapshots:
 
   is-what@3.14.1: {}
 
+  is-what@5.5.0: {}
+
   isexe@2.0.0: {}
 
   jackspeak@3.4.3:
@@ -3323,6 +3464,8 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  mitt@3.0.1: {}
+
   ms@2.1.3: {}
 
   muggle-string@0.4.1: {}
@@ -3418,6 +3561,8 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
+  perfect-debounce@1.0.0: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -3431,6 +3576,19 @@ snapshots:
   pify@4.0.1:
     optional: true
 
+  pinia-plugin-persistedstate@4.7.1(pinia@3.0.4(typescript@5.8.3)(vue@3.5.21(typescript@5.8.3))):
+    dependencies:
+      defu: 6.1.4
+    optionalDependencies:
+      pinia: 3.0.4(typescript@5.8.3)(vue@3.5.21(typescript@5.8.3))
+
+  pinia@3.0.4(typescript@5.8.3)(vue@3.5.21(typescript@5.8.3)):
+    dependencies:
+      '@vue/devtools-api': 7.7.9
+      vue: 3.5.21(typescript@5.8.3)
+    optionalDependencies:
+      typescript: 5.8.3
+
   pirates@4.0.7: {}
 
   postcss-import@15.1.0(postcss@8.5.6):
@@ -3581,6 +3739,8 @@ snapshots:
   source-map@0.6.1:
     optional: true
 
+  speakingurl@14.0.1: {}
+
   split2@4.2.0: {}
 
   string-argv@0.3.2: {}
@@ -3623,6 +3783,10 @@ snapshots:
       pirates: 4.0.7
       ts-interface-checker: 0.1.13
 
+  superjson@2.2.6:
+    dependencies:
+      copy-anything: 4.0.5
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -3662,6 +3826,10 @@ snapshots:
 
   text-extensions@2.4.0: {}
 
+  text-segmentation@1.0.3:
+    dependencies:
+      utrie: 1.0.2
+
   thenify-all@1.6.0:
     dependencies:
       thenify: 3.3.1
@@ -3724,6 +3892,10 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  utrie@1.0.2:
+    dependencies:
+      base64-arraybuffer: 1.0.2
+
   vite@7.1.5(@types/node@24.3.3)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.9
diff --git a/src/App.vue b/src/App.vue
index 06916d3..6d0f9ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
   <div class="app-container" :style="containerStyle">
     <div class="app-content" :style="scaleStyle">
       <router-view v-slot="{ Component }">
-        <KeepAlive :include="cachedNames">
+        <KeepAlive :include="[]">
           <component :is="Component" />
         </KeepAlive>
       </router-view>
diff --git a/src/assets/images/after-editing/color/film_img.png b/src/assets/images/after-editing/color/film_img.png
new file mode 100644
index 0000000..0050700
Binary files /dev/null and b/src/assets/images/after-editing/color/film_img.png differ
diff --git a/src/assets/images/afterditing/color/冬日物语.jpg b/src/assets/images/after-editing/color/冬日物语.jpg
similarity index 100%
rename from src/assets/images/afterditing/color/冬日物语.jpg
rename to src/assets/images/after-editing/color/冬日物语.jpg
diff --git a/src/assets/images/afterditing/color/卡片-冬日物语.png b/src/assets/images/after-editing/color/卡片-冬日物语.png
similarity index 100%
rename from src/assets/images/afterditing/color/卡片-冬日物语.png
rename to src/assets/images/after-editing/color/卡片-冬日物语.png
diff --git a/src/assets/images/afterditing/color/卡片-日落增色.png b/src/assets/images/after-editing/color/卡片-日落增色.png
similarity index 100%
rename from src/assets/images/afterditing/color/卡片-日落增色.png
rename to src/assets/images/after-editing/color/卡片-日落增色.png
diff --git a/src/assets/images/afterditing/color/卡片-智能调色.png b/src/assets/images/after-editing/color/卡片-智能调色.png
similarity index 100%
rename from src/assets/images/afterditing/color/卡片-智能调色.png
rename to src/assets/images/after-editing/color/卡片-智能调色.png
diff --git a/src/assets/images/afterditing/color/卡片-落日余晖.png b/src/assets/images/after-editing/color/卡片-落日余晖.png
similarity index 100%
rename from src/assets/images/afterditing/color/卡片-落日余晖.png
rename to src/assets/images/after-editing/color/卡片-落日余晖.png
diff --git a/src/assets/images/afterditing/color/卡片-落日火烧云.png b/src/assets/images/after-editing/color/卡片-落日火烧云.png
similarity index 100%
rename from src/assets/images/afterditing/color/卡片-落日火烧云.png
rename to src/assets/images/after-editing/color/卡片-落日火烧云.png
diff --git a/src/assets/images/afterditing/color/原图.png b/src/assets/images/after-editing/color/原图.png
similarity index 100%
rename from src/assets/images/afterditing/color/原图.png
rename to src/assets/images/after-editing/color/原图.png
diff --git a/src/assets/images/after-editing/color/图片.png b/src/assets/images/after-editing/color/图片.png
new file mode 100644
index 0000000..e8cf546
Binary files /dev/null and b/src/assets/images/after-editing/color/图片.png differ
diff --git a/src/assets/images/after-editing/color/图片框.png b/src/assets/images/after-editing/color/图片框.png
new file mode 100644
index 0000000..e3a5774
Binary files /dev/null and b/src/assets/images/after-editing/color/图片框.png differ
diff --git a/src/assets/images/after-editing/color/小底板.png b/src/assets/images/after-editing/color/小底板.png
new file mode 100644
index 0000000..fee8504
Binary files /dev/null and b/src/assets/images/after-editing/color/小底板.png differ
diff --git a/src/assets/images/after-editing/color/底图.png b/src/assets/images/after-editing/color/底图.png
new file mode 100644
index 0000000..d171452
Binary files /dev/null and b/src/assets/images/after-editing/color/底图.png differ
diff --git a/src/assets/images/afterditing/color/开启对比 - 不可开启.png b/src/assets/images/after-editing/color/开启对比 - 不可开启.png
similarity index 100%
rename from src/assets/images/afterditing/color/开启对比 - 不可开启.png
rename to src/assets/images/after-editing/color/开启对比 - 不可开启.png
diff --git a/src/assets/images/afterditing/color/开启对比 - 可开启.png b/src/assets/images/after-editing/color/开启对比 - 可开启.png
similarity index 100%
rename from src/assets/images/afterditing/color/开启对比 - 可开启.png
rename to src/assets/images/after-editing/color/开启对比 - 可开启.png
diff --git a/src/assets/images/afterditing/color/按钮-保存.png b/src/assets/images/after-editing/color/按钮-保存.png
similarity index 100%
rename from src/assets/images/afterditing/color/按钮-保存.png
rename to src/assets/images/after-editing/color/按钮-保存.png
diff --git a/src/assets/images/afterditing/color/按钮-结束调色实践.png b/src/assets/images/after-editing/color/按钮-结束调色实践.png
similarity index 100%
rename from src/assets/images/afterditing/color/按钮-结束调色实践.png
rename to src/assets/images/after-editing/color/按钮-结束调色实践.png
diff --git a/src/assets/images/afterditing/color/按钮-试试其他调色.png b/src/assets/images/after-editing/color/按钮-试试其他调色.png
similarity index 100%
rename from src/assets/images/afterditing/color/按钮-试试其他调色.png
rename to src/assets/images/after-editing/color/按钮-试试其他调色.png
diff --git a/src/assets/images/afterditing/color/按钮-调色未选中.png b/src/assets/images/after-editing/color/按钮-调色未选中.png
similarity index 100%
rename from src/assets/images/afterditing/color/按钮-调色未选中.png
rename to src/assets/images/after-editing/color/按钮-调色未选中.png
diff --git a/src/assets/images/afterditing/color/按钮-调色选中.png b/src/assets/images/after-editing/color/按钮-调色选中.png
similarity index 100%
rename from src/assets/images/afterditing/color/按钮-调色选中.png
rename to src/assets/images/after-editing/color/按钮-调色选中.png
diff --git a/src/assets/images/after-editing/color/效果图.png b/src/assets/images/after-editing/color/效果图.png
new file mode 100644
index 0000000..34a0af5
Binary files /dev/null and b/src/assets/images/after-editing/color/效果图.png differ
diff --git a/src/assets/images/afterditing/color/日落增色.png b/src/assets/images/after-editing/color/日落增色.png
similarity index 100%
rename from src/assets/images/afterditing/color/日落增色.png
rename to src/assets/images/after-editing/color/日落增色.png
diff --git a/src/assets/images/afterditing/color/智能调色.png b/src/assets/images/after-editing/color/智能调色.png
similarity index 100%
rename from src/assets/images/afterditing/color/智能调色.png
rename to src/assets/images/after-editing/color/智能调色.png
diff --git a/src/assets/images/afterditing/color/标题-调色.png b/src/assets/images/after-editing/color/标题-调色.png
similarity index 100%
rename from src/assets/images/afterditing/color/标题-调色.png
rename to src/assets/images/after-editing/color/标题-调色.png
diff --git a/src/assets/images/afterditing/color/标题-调色实践.png b/src/assets/images/after-editing/color/标题-调色实践.png
similarity index 100%
rename from src/assets/images/afterditing/color/标题-调色实践.png
rename to src/assets/images/after-editing/color/标题-调色实践.png
diff --git a/src/assets/images/after-editing/color/滑块.png b/src/assets/images/after-editing/color/滑块.png
new file mode 100644
index 0000000..52cd9be
Binary files /dev/null and b/src/assets/images/after-editing/color/滑块.png differ
diff --git a/src/assets/images/after-editing/color/滤镜-亮.png b/src/assets/images/after-editing/color/滤镜-亮.png
new file mode 100644
index 0000000..aa10b46
Binary files /dev/null and b/src/assets/images/after-editing/color/滤镜-亮.png differ
diff --git a/src/assets/images/after-editing/color/滤镜-暗.png b/src/assets/images/after-editing/color/滤镜-暗.png
new file mode 100644
index 0000000..81b16d2
Binary files /dev/null and b/src/assets/images/after-editing/color/滤镜-暗.png differ
diff --git a/src/assets/images/after-editing/color/滤镜-未选中.png b/src/assets/images/after-editing/color/滤镜-未选中.png
new file mode 100644
index 0000000..5c82e97
Binary files /dev/null and b/src/assets/images/after-editing/color/滤镜-未选中.png differ
diff --git a/src/assets/images/after-editing/color/滤镜-选中.png b/src/assets/images/after-editing/color/滤镜-选中.png
new file mode 100644
index 0000000..0427763
Binary files /dev/null and b/src/assets/images/after-editing/color/滤镜-选中.png differ
diff --git a/src/assets/images/after-editing/color/生成.png b/src/assets/images/after-editing/color/生成.png
new file mode 100644
index 0000000..9fd7e2a
Binary files /dev/null and b/src/assets/images/after-editing/color/生成.png differ
diff --git a/src/assets/images/afterditing/color/落日余晖.jpg b/src/assets/images/after-editing/color/落日余晖.jpg
similarity index 100%
rename from src/assets/images/afterditing/color/落日余晖.jpg
rename to src/assets/images/after-editing/color/落日余晖.jpg
diff --git a/src/assets/images/afterditing/color/落日火烧云.png b/src/assets/images/after-editing/color/落日火烧云.png
similarity index 100%
rename from src/assets/images/afterditing/color/落日火烧云.png
rename to src/assets/images/after-editing/color/落日火烧云.png
diff --git a/src/assets/images/after-editing/color/调色-亮.png b/src/assets/images/after-editing/color/调色-亮.png
new file mode 100644
index 0000000..f970f80
Binary files /dev/null and b/src/assets/images/after-editing/color/调色-亮.png differ
diff --git a/src/assets/images/after-editing/color/调色-暗.png b/src/assets/images/after-editing/color/调色-暗.png
new file mode 100644
index 0000000..09f14d2
Binary files /dev/null and b/src/assets/images/after-editing/color/调色-暗.png differ
diff --git a/src/assets/images/afterditing/color/调色实践.png b/src/assets/images/after-editing/color/调色实践.png
similarity index 100%
rename from src/assets/images/afterditing/color/调色实践.png
rename to src/assets/images/after-editing/color/调色实践.png
diff --git a/src/assets/images/after-editing/color/调色效果图.png b/src/assets/images/after-editing/color/调色效果图.png
new file mode 100644
index 0000000..7d9e6b5
Binary files /dev/null and b/src/assets/images/after-editing/color/调色效果图.png differ
diff --git a/src/assets/images/after-editing/color/重置.png b/src/assets/images/after-editing/color/重置.png
new file mode 100644
index 0000000..fea2eb6
Binary files /dev/null and b/src/assets/images/after-editing/color/重置.png differ
diff --git a/src/assets/images/afterditing/后期剪辑.png b/src/assets/images/afterditing/后期剪辑.png
deleted file mode 100644
index c7fed27..0000000
Binary files a/src/assets/images/afterditing/后期剪辑.png and /dev/null differ
diff --git a/src/assets/images/afterditing/后期剪辑底板.png b/src/assets/images/afterditing/后期剪辑底板.png
deleted file mode 100644
index e5b8239..0000000
Binary files a/src/assets/images/afterditing/后期剪辑底板.png and /dev/null differ
diff --git a/src/assets/images/afterditing/按钮-剪辑.png b/src/assets/images/afterditing/按钮-剪辑.png
deleted file mode 100644
index ec5d116..0000000
Binary files a/src/assets/images/afterditing/按钮-剪辑.png and /dev/null differ
diff --git a/src/assets/images/afterditing/按钮-调色.png b/src/assets/images/afterditing/按钮-调色.png
deleted file mode 100644
index 3da1030..0000000
Binary files a/src/assets/images/afterditing/按钮-调色.png and /dev/null differ
diff --git a/src/assets/images/afterditing/按钮选中-剪辑.png b/src/assets/images/afterditing/按钮选中-剪辑.png
deleted file mode 100644
index d5a1373..0000000
Binary files a/src/assets/images/afterditing/按钮选中-剪辑.png and /dev/null differ
diff --git a/src/assets/images/components/long.png b/src/assets/images/components/long.png
new file mode 100644
index 0000000..9d7d8a8
Binary files /dev/null and b/src/assets/images/components/long.png differ
diff --git a/src/assets/images/components/menu-bg.png b/src/assets/images/components/menu-bg.png
new file mode 100644
index 0000000..a918a16
Binary files /dev/null and b/src/assets/images/components/menu-bg.png differ
diff --git a/src/assets/images/components/menu-hover.png b/src/assets/images/components/menu-hover.png
new file mode 100644
index 0000000..34fa753
Binary files /dev/null and b/src/assets/images/components/menu-hover.png differ
diff --git a/src/assets/images/equipment/标题-安卓小米.png b/src/assets/images/equipment/标题-安卓小米.png
index 80a8350..e70e94d 100644
Binary files a/src/assets/images/equipment/标题-安卓小米.png and b/src/assets/images/equipment/标题-安卓小米.png differ
diff --git a/src/assets/images/equipment/标题-苹果.png b/src/assets/images/equipment/标题-苹果.png
index 8cd403c..b2a005a 100644
Binary files a/src/assets/images/equipment/标题-苹果.png and b/src/assets/images/equipment/标题-苹果.png differ
diff --git a/src/assets/images/equipment/设备-手机1.png b/src/assets/images/equipment/设备-手机1.png
index bd2243c..940e758 100644
Binary files a/src/assets/images/equipment/设备-手机1.png and b/src/assets/images/equipment/设备-手机1.png differ
diff --git a/src/assets/images/equipment/设备-手机2.png b/src/assets/images/equipment/设备-手机2.png
index 49839e1..9d9d069 100644
Binary files a/src/assets/images/equipment/设备-手机2.png and b/src/assets/images/equipment/设备-手机2.png differ
diff --git a/src/assets/images/film/equipment/微单产品.png b/src/assets/images/film/equipment/微单产品.png
new file mode 100644
index 0000000..263d729
Binary files /dev/null and b/src/assets/images/film/equipment/微单产品.png differ
diff --git a/src/assets/images/film/equipment/摄像机产品.png b/src/assets/images/film/equipment/摄像机产品.png
new file mode 100644
index 0000000..406ca03
Binary files /dev/null and b/src/assets/images/film/equipment/摄像机产品.png differ
diff --git a/src/assets/images/film/equipment/相机产品.png b/src/assets/images/film/equipment/相机产品.png
new file mode 100644
index 0000000..6ce92cb
Binary files /dev/null and b/src/assets/images/film/equipment/相机产品.png differ
diff --git a/src/assets/images/film/equipment/相机内容.png b/src/assets/images/film/equipment/相机内容.png
new file mode 100644
index 0000000..29e0682
Binary files /dev/null and b/src/assets/images/film/equipment/相机内容.png differ
diff --git a/src/assets/images/film/equipment/相机标题.png b/src/assets/images/film/equipment/相机标题.png
new file mode 100644
index 0000000..76fdfce
Binary files /dev/null and b/src/assets/images/film/equipment/相机标题.png differ
diff --git a/src/assets/images/film/img/分镜制作-标题.png b/src/assets/images/film/img/分镜制作-标题.png
new file mode 100644
index 0000000..d45fd62
Binary files /dev/null and b/src/assets/images/film/img/分镜制作-标题.png differ
diff --git a/src/assets/images/film/img/分镜制作.png b/src/assets/images/film/img/分镜制作.png
new file mode 100644
index 0000000..9a48ef9
Binary files /dev/null and b/src/assets/images/film/img/分镜制作.png differ
diff --git a/src/assets/images/film/img/创意构想-标题.png b/src/assets/images/film/img/创意构想-标题.png
new file mode 100644
index 0000000..024949a
Binary files /dev/null and b/src/assets/images/film/img/创意构想-标题.png differ
diff --git a/src/assets/images/film/img/创意构想.png b/src/assets/images/film/img/创意构想.png
new file mode 100644
index 0000000..da5e8c5
Binary files /dev/null and b/src/assets/images/film/img/创意构想.png differ
diff --git a/src/assets/images/film/img/背景.png b/src/assets/images/film/img/背景.png
new file mode 100644
index 0000000..3cfd0b9
Binary files /dev/null and b/src/assets/images/film/img/背景.png differ
diff --git a/src/assets/images/film/img/脚本编写-标题.png b/src/assets/images/film/img/脚本编写-标题.png
new file mode 100644
index 0000000..74a8114
Binary files /dev/null and b/src/assets/images/film/img/脚本编写-标题.png differ
diff --git a/src/assets/images/film/img/脚本编写.png b/src/assets/images/film/img/脚本编写.png
new file mode 100644
index 0000000..a67ae33
Binary files /dev/null and b/src/assets/images/film/img/脚本编写.png differ
diff --git a/src/assets/images/film/img/调色-标题.png b/src/assets/images/film/img/调色-标题.png
new file mode 100644
index 0000000..f66daf9
Binary files /dev/null and b/src/assets/images/film/img/调色-标题.png differ
diff --git a/src/assets/images/film/img/调色.png b/src/assets/images/film/img/调色.png
new file mode 100644
index 0000000..bf14f40
Binary files /dev/null and b/src/assets/images/film/img/调色.png differ
diff --git a/src/assets/images/film/img/调色插视频示意.png b/src/assets/images/film/img/调色插视频示意.png
new file mode 100644
index 0000000..e3bc68d
Binary files /dev/null and b/src/assets/images/film/img/调色插视频示意.png differ
diff --git a/src/assets/images/film/img/资源筹备-标题.png b/src/assets/images/film/img/资源筹备-标题.png
new file mode 100644
index 0000000..52f5617
Binary files /dev/null and b/src/assets/images/film/img/资源筹备-标题.png differ
diff --git a/src/assets/images/film/img/资源筹备.png b/src/assets/images/film/img/资源筹备.png
new file mode 100644
index 0000000..64dea92
Binary files /dev/null and b/src/assets/images/film/img/资源筹备.png differ
diff --git a/src/assets/images/film/img/音效-标题.png b/src/assets/images/film/img/音效-标题.png
new file mode 100644
index 0000000..9d795a8
Binary files /dev/null and b/src/assets/images/film/img/音效-标题.png differ
diff --git a/src/assets/images/film/img/音效.png b/src/assets/images/film/img/音效.png
new file mode 100644
index 0000000..721ceb4
Binary files /dev/null and b/src/assets/images/film/img/音效.png differ
diff --git a/src/assets/images/film/img/音效插视频示意.png b/src/assets/images/film/img/音效插视频示意.png
new file mode 100644
index 0000000..8340da3
Binary files /dev/null and b/src/assets/images/film/img/音效插视频示意.png differ
diff --git a/src/assets/images/film/on-site/低角度拍摄jh_1.png b/src/assets/images/film/on-site/低角度拍摄jh_1.png
new file mode 100644
index 0000000..da1d7b7
Binary files /dev/null and b/src/assets/images/film/on-site/低角度拍摄jh_1.png differ
diff --git a/src/assets/images/film/on-site/低角度拍摄jh_3.png b/src/assets/images/film/on-site/低角度拍摄jh_3.png
new file mode 100644
index 0000000..5b31422
Binary files /dev/null and b/src/assets/images/film/on-site/低角度拍摄jh_3.png differ
diff --git a/src/assets/images/film/on-site/声音转场jh_2.png b/src/assets/images/film/on-site/声音转场jh_2.png
new file mode 100644
index 0000000..a162458
Binary files /dev/null and b/src/assets/images/film/on-site/声音转场jh_2.png differ
diff --git a/src/assets/images/film/on-site/延时拍摄jh_1.png b/src/assets/images/film/on-site/延时拍摄jh_1.png
new file mode 100644
index 0000000..35c3417
Binary files /dev/null and b/src/assets/images/film/on-site/延时拍摄jh_1.png differ
diff --git a/src/assets/images/film/on-site/白天慢门jh_1.png b/src/assets/images/film/on-site/白天慢门jh_1.png
new file mode 100644
index 0000000..53ee012
Binary files /dev/null and b/src/assets/images/film/on-site/白天慢门jh_1.png differ
diff --git a/src/assets/images/film/on-site/白天慢门jh_3.png b/src/assets/images/film/on-site/白天慢门jh_3.png
new file mode 100644
index 0000000..1018398
Binary files /dev/null and b/src/assets/images/film/on-site/白天慢门jh_3.png differ
diff --git a/src/assets/images/film/practice/创作笔记底图-电影感.png b/src/assets/images/film/practice/创作笔记底图-电影感.png
new file mode 100644
index 0000000..622206e
Binary files /dev/null and b/src/assets/images/film/practice/创作笔记底图-电影感.png differ
diff --git a/src/assets/images/film/practice/实战操作台首页- 电影感.png b/src/assets/images/film/practice/实战操作台首页- 电影感.png
new file mode 100644
index 0000000..d73f905
Binary files /dev/null and b/src/assets/images/film/practice/实战操作台首页- 电影感.png differ
diff --git a/src/assets/images/film/practice/滑动任务面板-电影感.png b/src/assets/images/film/practice/滑动任务面板-电影感.png
new file mode 100644
index 0000000..1cfea36
Binary files /dev/null and b/src/assets/images/film/practice/滑动任务面板-电影感.png differ
diff --git a/src/assets/images/film/practice/评分底板-电影感.png b/src/assets/images/film/practice/评分底板-电影感.png
new file mode 100644
index 0000000..f139c39
Binary files /dev/null and b/src/assets/images/film/practice/评分底板-电影感.png differ
diff --git a/src/assets/images/film/shooting/01框架构图_底图.png b/src/assets/images/film/shooting/01框架构图_底图.png
new file mode 100644
index 0000000..93a51ce
Binary files /dev/null and b/src/assets/images/film/shooting/01框架构图_底图.png differ
diff --git a/src/assets/images/film/shooting/01框架构图_覆盖.png b/src/assets/images/film/shooting/01框架构图_覆盖.png
new file mode 100644
index 0000000..7cd7cc8
Binary files /dev/null and b/src/assets/images/film/shooting/01框架构图_覆盖.png differ
diff --git a/src/assets/images/film/shooting/02框架构图_底图.png b/src/assets/images/film/shooting/02框架构图_底图.png
new file mode 100644
index 0000000..cd1b86a
Binary files /dev/null and b/src/assets/images/film/shooting/02框架构图_底图.png differ
diff --git a/src/assets/images/film/shooting/02框架构图_覆盖.png b/src/assets/images/film/shooting/02框架构图_覆盖.png
new file mode 100644
index 0000000..40b880c
Binary files /dev/null and b/src/assets/images/film/shooting/02框架构图_覆盖.png differ
diff --git a/src/assets/images/film/shooting/03对称构图_底图.png b/src/assets/images/film/shooting/03对称构图_底图.png
new file mode 100644
index 0000000..115d393
Binary files /dev/null and b/src/assets/images/film/shooting/03对称构图_底图.png differ
diff --git a/src/assets/images/film/shooting/03对称构图_覆盖.png b/src/assets/images/film/shooting/03对称构图_覆盖.png
new file mode 100644
index 0000000..d143d7f
Binary files /dev/null and b/src/assets/images/film/shooting/03对称构图_覆盖.png differ
diff --git a/src/assets/images/film/shooting/04对称构图_底图.png b/src/assets/images/film/shooting/04对称构图_底图.png
new file mode 100644
index 0000000..e7c73fb
Binary files /dev/null and b/src/assets/images/film/shooting/04对称构图_底图.png differ
diff --git a/src/assets/images/film/shooting/04对称构图_覆盖.png b/src/assets/images/film/shooting/04对称构图_覆盖.png
new file mode 100644
index 0000000..54910d9
Binary files /dev/null and b/src/assets/images/film/shooting/04对称构图_覆盖.png differ
diff --git a/src/assets/images/film/shooting/05引导线构图_底图.png b/src/assets/images/film/shooting/05引导线构图_底图.png
new file mode 100644
index 0000000..2238e14
Binary files /dev/null and b/src/assets/images/film/shooting/05引导线构图_底图.png differ
diff --git a/src/assets/images/film/shooting/05引导线构图_覆盖.png b/src/assets/images/film/shooting/05引导线构图_覆盖.png
new file mode 100644
index 0000000..0c907ea
Binary files /dev/null and b/src/assets/images/film/shooting/05引导线构图_覆盖.png differ
diff --git a/src/assets/images/film/shooting/06引导线构图_底图.png b/src/assets/images/film/shooting/06引导线构图_底图.png
new file mode 100644
index 0000000..61bc64d
Binary files /dev/null and b/src/assets/images/film/shooting/06引导线构图_底图.png differ
diff --git a/src/assets/images/film/shooting/06引导线构图_覆盖.png b/src/assets/images/film/shooting/06引导线构图_覆盖.png
new file mode 100644
index 0000000..aa58cc2
Binary files /dev/null and b/src/assets/images/film/shooting/06引导线构图_覆盖.png differ
diff --git a/src/assets/images/film/shooting/对称构图.png b/src/assets/images/film/shooting/对称构图.png
new file mode 100644
index 0000000..eb90317
Binary files /dev/null and b/src/assets/images/film/shooting/对称构图.png differ
diff --git a/src/assets/images/film/shooting/引导线构图.png b/src/assets/images/film/shooting/引导线构图.png
new file mode 100644
index 0000000..25ab2bd
Binary files /dev/null and b/src/assets/images/film/shooting/引导线构图.png differ
diff --git a/src/assets/images/film/shooting/徐汇滨江.png b/src/assets/images/film/shooting/徐汇滨江.png
new file mode 100644
index 0000000..8c930ac
Binary files /dev/null and b/src/assets/images/film/shooting/徐汇滨江.png differ
diff --git a/src/assets/images/film/shooting/构图指南底图.png b/src/assets/images/film/shooting/构图指南底图.png
new file mode 100644
index 0000000..faaf60a
Binary files /dev/null and b/src/assets/images/film/shooting/构图指南底图.png differ
diff --git a/src/assets/images/film/shooting/框架构图.png b/src/assets/images/film/shooting/框架构图.png
new file mode 100644
index 0000000..f499fa3
Binary files /dev/null and b/src/assets/images/film/shooting/框架构图.png differ
diff --git a/src/assets/images/film/shooting/油罐艺术公园入口.png b/src/assets/images/film/shooting/油罐艺术公园入口.png
new file mode 100644
index 0000000..d3dfbb6
Binary files /dev/null and b/src/assets/images/film/shooting/油罐艺术公园入口.png differ
diff --git a/src/assets/images/film/shooting/油罐艺术公园拍摄.png b/src/assets/images/film/shooting/油罐艺术公园拍摄.png
new file mode 100644
index 0000000..757dddd
Binary files /dev/null and b/src/assets/images/film/shooting/油罐艺术公园拍摄.png differ
diff --git a/src/assets/images/film/shooting/油罐艺术公园模糊底图.png b/src/assets/images/film/shooting/油罐艺术公园模糊底图.png
new file mode 100644
index 0000000..7da34b9
Binary files /dev/null and b/src/assets/images/film/shooting/油罐艺术公园模糊底图.png differ
diff --git a/src/assets/images/film/shooting/油罐艺术公园清晰底图.png b/src/assets/images/film/shooting/油罐艺术公园清晰底图.png
new file mode 100644
index 0000000..0f031cc
Binary files /dev/null and b/src/assets/images/film/shooting/油罐艺术公园清晰底图.png differ
diff --git a/src/assets/images/film/shooting/示意图-对称.png b/src/assets/images/film/shooting/示意图-对称.png
new file mode 100644
index 0000000..2d726c6
Binary files /dev/null and b/src/assets/images/film/shooting/示意图-对称.png differ
diff --git a/src/assets/images/film/shooting/示意图-引导.png b/src/assets/images/film/shooting/示意图-引导.png
new file mode 100644
index 0000000..f718a25
Binary files /dev/null and b/src/assets/images/film/shooting/示意图-引导.png differ
diff --git a/src/assets/images/film/shooting/示意图-框架.png b/src/assets/images/film/shooting/示意图-框架.png
new file mode 100644
index 0000000..5f5a78d
Binary files /dev/null and b/src/assets/images/film/shooting/示意图-框架.png differ
diff --git a/src/assets/images/film/shooting/龙美术馆入口.png b/src/assets/images/film/shooting/龙美术馆入口.png
new file mode 100644
index 0000000..6b6299e
Binary files /dev/null and b/src/assets/images/film/shooting/龙美术馆入口.png differ
diff --git a/src/assets/images/film/shooting/龙美术馆拍摄.png b/src/assets/images/film/shooting/龙美术馆拍摄.png
new file mode 100644
index 0000000..51e2b0b
Binary files /dev/null and b/src/assets/images/film/shooting/龙美术馆拍摄.png differ
diff --git a/src/assets/images/film/shooting/龙美术馆模糊底图.png b/src/assets/images/film/shooting/龙美术馆模糊底图.png
new file mode 100644
index 0000000..9dabe30
Binary files /dev/null and b/src/assets/images/film/shooting/龙美术馆模糊底图.png differ
diff --git a/src/assets/images/film/shooting/龙美术馆清晰图.png b/src/assets/images/film/shooting/龙美术馆清晰图.png
new file mode 100644
index 0000000..1ec4304
Binary files /dev/null and b/src/assets/images/film/shooting/龙美术馆清晰图.png differ
diff --git a/src/assets/images/film/任务取景框背景.png b/src/assets/images/film/任务取景框背景.png
new file mode 100644
index 0000000..26bd3d4
Binary files /dev/null and b/src/assets/images/film/任务取景框背景.png differ
diff --git a/src/assets/images/film/分镜制作-拍摄分镜.png b/src/assets/images/film/分镜制作-拍摄分镜.png
new file mode 100644
index 0000000..f204982
Binary files /dev/null and b/src/assets/images/film/分镜制作-拍摄分镜.png differ
diff --git a/src/assets/images/film/创意构想-拍摄大纲.png b/src/assets/images/film/创意构想-拍摄大纲.png
new file mode 100644
index 0000000..0b5d8b0
Binary files /dev/null and b/src/assets/images/film/创意构想-拍摄大纲.png differ
diff --git a/src/assets/images/film/制作变焦镜-这里是徐汇滨江.png b/src/assets/images/film/制作变焦镜-这里是徐汇滨江.png
new file mode 100644
index 0000000..7149dd8
Binary files /dev/null and b/src/assets/images/film/制作变焦镜-这里是徐汇滨江.png differ
diff --git a/src/assets/images/film/思路提点全屏.png b/src/assets/images/film/思路提点全屏.png
new file mode 100644
index 0000000..9d8c302
Binary files /dev/null and b/src/assets/images/film/思路提点全屏.png differ
diff --git a/src/assets/images/film/思路提点小屏.png b/src/assets/images/film/思路提点小屏.png
new file mode 100644
index 0000000..b1f307a
Binary files /dev/null and b/src/assets/images/film/思路提点小屏.png differ
diff --git a/src/assets/images/film/案件赏析小屏.png b/src/assets/images/film/案件赏析小屏.png
new file mode 100644
index 0000000..e81026f
Binary files /dev/null and b/src/assets/images/film/案件赏析小屏.png differ
diff --git a/src/assets/images/film/电影-创作与表达.png b/src/assets/images/film/电影-创作与表达.png
new file mode 100644
index 0000000..d7ec16f
Binary files /dev/null and b/src/assets/images/film/电影-创作与表达.png differ
diff --git a/src/assets/images/film/电影模块背景.png b/src/assets/images/film/电影模块背景.png
new file mode 100644
index 0000000..cc16681
Binary files /dev/null and b/src/assets/images/film/电影模块背景.png differ
diff --git a/src/assets/images/film/脚本编写-拍摄脚本.png b/src/assets/images/film/脚本编写-拍摄脚本.png
new file mode 100644
index 0000000..7c492ae
Binary files /dev/null and b/src/assets/images/film/脚本编写-拍摄脚本.png differ
diff --git a/src/assets/images/home/action/光.png b/src/assets/images/home/action/光.png
new file mode 100644
index 0000000..c1d31a5
Binary files /dev/null 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..e34c4c1
Binary files /dev/null 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..6ac4240
Binary files /dev/null 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..91b4cce
Binary files /dev/null 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..efbf778
Binary files /dev/null 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..9a4edc5
Binary files /dev/null and b/src/assets/images/home/action/运镜.png differ
diff --git a/src/assets/images/shooting/shoot.png b/src/assets/images/shooting/shoot.png
new file mode 100644
index 0000000..ac5e81b
Binary files /dev/null and b/src/assets/images/shooting/shoot.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/取景大图.png b/src/assets/images/shooting/取景大图.png
similarity index 100%
rename from src/assets/images/vlog/制作变焦镜/实地取景/取景大图.png
rename to src/assets/images/shooting/取景大图.png
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/取景结果-样式外框.png b/src/assets/images/shooting/取景结果-样式外框.png
similarity index 100%
rename from src/assets/images/vlog/制作变焦镜/实地取景/取景结果-样式外框.png
rename to src/assets/images/shooting/取景结果-样式外框.png
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/拍摄装饰.png b/src/assets/images/shooting/拍摄装饰.png
similarity index 100%
rename from src/assets/images/vlog/制作变焦镜/实地取景/拍摄装饰.png
rename to src/assets/images/shooting/拍摄装饰.png
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/按钮-取景.png b/src/assets/images/shooting/按钮-取景.png
similarity index 100%
rename from src/assets/images/vlog/制作变焦镜/实地取景/按钮-取景.png
rename to src/assets/images/shooting/按钮-取景.png
diff --git a/src/assets/images/vlog/制作变焦镜/实地取景/按钮-拍摄.png b/src/assets/images/shooting/按钮-拍摄.png
similarity index 100%
rename from src/assets/images/vlog/制作变焦镜/实地取景/按钮-拍摄.png
rename to src/assets/images/shooting/按钮-拍摄.png
diff --git a/src/assets/images/afterditing/标题-取景地a.png b/src/assets/images/shooting/标题-取景地a.png
similarity index 100%
rename from src/assets/images/afterditing/标题-取景地a.png
rename to src/assets/images/shooting/标题-取景地a.png
diff --git a/src/assets/images/afterditing/标题-取景地b.png b/src/assets/images/shooting/标题-取景地b.png
similarity index 100%
rename from src/assets/images/afterditing/标题-取景地b.png
rename to src/assets/images/shooting/标题-取景地b.png
diff --git a/src/assets/images/vlog/practice/下滑.png b/src/assets/images/vlog/practice/下滑.png
new file mode 100644
index 0000000..e730cba
Binary files /dev/null and b/src/assets/images/vlog/practice/下滑.png differ
diff --git a/src/assets/images/vlog/practice/他人实战作品.png b/src/assets/images/vlog/practice/他人实战作品.png
new file mode 100644
index 0000000..b912571
Binary files /dev/null and b/src/assets/images/vlog/practice/他人实战作品.png differ
diff --git a/src/assets/images/vlog/practice/作品底板.png b/src/assets/images/vlog/practice/作品底板.png
new file mode 100644
index 0000000..91b9032
Binary files /dev/null and b/src/assets/images/vlog/practice/作品底板.png differ
diff --git a/src/assets/images/vlog/practice/保存.png b/src/assets/images/vlog/practice/保存.png
new file mode 100644
index 0000000..91e9f56
Binary files /dev/null and b/src/assets/images/vlog/practice/保存.png differ
diff --git a/src/assets/images/vlog/practice/创作笔记底图.png b/src/assets/images/vlog/practice/创作笔记底图.png
new file mode 100644
index 0000000..9537bd9
Binary files /dev/null and b/src/assets/images/vlog/practice/创作笔记底图.png differ
diff --git a/src/assets/images/vlog/practice/图片遮罩.png b/src/assets/images/vlog/practice/图片遮罩.png
new file mode 100644
index 0000000..bc7957a
Binary files /dev/null and b/src/assets/images/vlog/practice/图片遮罩.png differ
diff --git a/src/assets/images/vlog/practice/实战操作台效果图.png b/src/assets/images/vlog/practice/实战操作台效果图.png
new file mode 100644
index 0000000..90313f8
Binary files /dev/null and b/src/assets/images/vlog/practice/实战操作台效果图.png differ
diff --git a/src/assets/images/vlog/practice/实战操作台首页.png b/src/assets/images/vlog/practice/实战操作台首页.png
new file mode 100644
index 0000000..ce91fb0
Binary files /dev/null and b/src/assets/images/vlog/practice/实战操作台首页.png differ
diff --git a/src/assets/images/vlog/practice/我的创作笔记.png b/src/assets/images/vlog/practice/我的创作笔记.png
new file mode 100644
index 0000000..9afb2fa
Binary files /dev/null and b/src/assets/images/vlog/practice/我的创作笔记.png differ
diff --git a/src/assets/images/vlog/practice/提交.png b/src/assets/images/vlog/practice/提交.png
new file mode 100644
index 0000000..876d020
Binary files /dev/null and b/src/assets/images/vlog/practice/提交.png differ
diff --git a/src/assets/images/vlog/practice/摄像机-人.png b/src/assets/images/vlog/practice/摄像机-人.png
new file mode 100644
index 0000000..9b08c09
Binary files /dev/null and b/src/assets/images/vlog/practice/摄像机-人.png differ
diff --git a/src/assets/images/vlog/practice/摄像机.png b/src/assets/images/vlog/practice/摄像机.png
new file mode 100644
index 0000000..2398921
Binary files /dev/null and b/src/assets/images/vlog/practice/摄像机.png differ
diff --git a/src/assets/images/vlog/practice/星星-亮.png b/src/assets/images/vlog/practice/星星-亮.png
new file mode 100644
index 0000000..8e9d297
Binary files /dev/null and b/src/assets/images/vlog/practice/星星-亮.png differ
diff --git a/src/assets/images/vlog/practice/星星-灰.png b/src/assets/images/vlog/practice/星星-灰.png
new file mode 100644
index 0000000..b8288eb
Binary files /dev/null and b/src/assets/images/vlog/practice/星星-灰.png differ
diff --git a/src/assets/images/vlog/practice/查看.png b/src/assets/images/vlog/practice/查看.png
new file mode 100644
index 0000000..a8a641a
Binary files /dev/null and b/src/assets/images/vlog/practice/查看.png differ
diff --git a/src/assets/images/vlog/practice/查看任务要求.png b/src/assets/images/vlog/practice/查看任务要求.png
new file mode 100644
index 0000000..92e4e38
Binary files /dev/null and b/src/assets/images/vlog/practice/查看任务要求.png differ
diff --git a/src/assets/images/vlog/practice/滑动任务面板.png b/src/assets/images/vlog/practice/滑动任务面板.png
new file mode 100644
index 0000000..3c27f3b
Binary files /dev/null and b/src/assets/images/vlog/practice/滑动任务面板.png differ
diff --git a/src/assets/images/vlog/practice/滑动右.png b/src/assets/images/vlog/practice/滑动右.png
new file mode 100644
index 0000000..fcc3a56
Binary files /dev/null and b/src/assets/images/vlog/practice/滑动右.png differ
diff --git a/src/assets/images/vlog/practice/滑动左.png b/src/assets/images/vlog/practice/滑动左.png
new file mode 100644
index 0000000..fcca4ea
Binary files /dev/null and b/src/assets/images/vlog/practice/滑动左.png differ
diff --git a/src/assets/images/vlog/practice/滑动表内文字.png b/src/assets/images/vlog/practice/滑动表内文字.png
new file mode 100644
index 0000000..ce91eef
Binary files /dev/null and b/src/assets/images/vlog/practice/滑动表内文字.png differ
diff --git a/src/assets/images/vlog/practice/滑动遮罩.png b/src/assets/images/vlog/practice/滑动遮罩.png
new file mode 100644
index 0000000..b17ce78
Binary files /dev/null and b/src/assets/images/vlog/practice/滑动遮罩.png differ
diff --git a/src/assets/images/vlog/practice/背景1-人.png b/src/assets/images/vlog/practice/背景1-人.png
new file mode 100644
index 0000000..bb4721c
Binary files /dev/null and b/src/assets/images/vlog/practice/背景1-人.png differ
diff --git a/src/assets/images/vlog/practice/背景1.png b/src/assets/images/vlog/practice/背景1.png
new file mode 100644
index 0000000..31be801
Binary files /dev/null and b/src/assets/images/vlog/practice/背景1.png differ
diff --git a/src/assets/images/vlog/practice/背景2.png b/src/assets/images/vlog/practice/背景2.png
new file mode 100644
index 0000000..d08e819
Binary files /dev/null and b/src/assets/images/vlog/practice/背景2.png differ
diff --git a/src/assets/images/vlog/practice/自评.png b/src/assets/images/vlog/practice/自评.png
new file mode 100644
index 0000000..cef282c
Binary files /dev/null and b/src/assets/images/vlog/practice/自评.png differ
diff --git a/src/assets/images/vlog/practice/视频背景.png b/src/assets/images/vlog/practice/视频背景.png
new file mode 100644
index 0000000..fc10873
Binary files /dev/null and b/src/assets/images/vlog/practice/视频背景.png differ
diff --git a/src/assets/images/vlog/practice/评分.png b/src/assets/images/vlog/practice/评分.png
new file mode 100644
index 0000000..4974dea
Binary files /dev/null and b/src/assets/images/vlog/practice/评分.png differ
diff --git a/src/assets/images/vlog/practice/评分底板.png b/src/assets/images/vlog/practice/评分底板.png
new file mode 100644
index 0000000..46fa487
Binary files /dev/null and b/src/assets/images/vlog/practice/评分底板.png differ
diff --git a/src/assets/images/vlog/practice/评分条.png b/src/assets/images/vlog/practice/评分条.png
new file mode 100644
index 0000000..6721841
Binary files /dev/null and b/src/assets/images/vlog/practice/评分条.png differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-取景地a.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-取景地a.png
deleted file mode 100644
index d8a2d0c..0000000
Binary files a/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-取景地a.png and /dev/null differ
diff --git a/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-取景地b.png b/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-取景地b.png
deleted file mode 100644
index 762829b..0000000
Binary files a/src/assets/images/vlog/制作变焦镜/左边导航栏/标题-取景地b.png and /dev/null differ
diff --git a/src/assets/images/work/未选中_带三角.png b/src/assets/images/work/未选中_带三角.png
new file mode 100644
index 0000000..be10b2f
Binary files /dev/null and b/src/assets/images/work/未选中_带三角.png differ
diff --git a/src/assets/images/work/选中_带三角.png b/src/assets/images/work/选中_带三角.png
new file mode 100644
index 0000000..d29cbd1
Binary files /dev/null and b/src/assets/images/work/选中_带三角.png differ
diff --git a/src/assets/svg/back-to-top.svg b/src/assets/svg/back-to-top.svg
new file mode 100644
index 0000000..1423dea
--- /dev/null
+++ b/src/assets/svg/back-to-top.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+  <circle cx="24" cy="24" r="22" fill="url(#bg)" stroke="url(#border)" stroke-width="2"/>
+  <path d="M24 32V18M24 18L16 26M24 18L32 26" stroke="url(#arrow)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#E8F4FC"/>
+      <stop offset="100%" stop-color="#F5E6F0"/>
+    </linearGradient>
+    <linearGradient id="border" x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#60C5FA"/>
+      <stop offset="100%" stop-color="#C4A0E8"/>
+    </linearGradient>
+    <linearGradient id="arrow" x1="16" y1="18" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#3BB5E8"/>
+      <stop offset="100%" stop-color="#A78BFA"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/src/assets/svg/deng.svg b/src/assets/svg/deng.svg
new file mode 100644
index 0000000..bb7f301
--- /dev/null
+++ b/src/assets/svg/deng.svg
@@ -0,0 +1 @@
+<svg t="1766135565304" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8002" width="200" height="200"><path d="M565.096296 289.185185s-0.948148 0 0 0c-110.933333-20.859259-208.592593 40.77037-237.985185 148.859259-14.222222 53.096296-24.651852 101.451852 44.562963 221.866667 14.222222 25.6 11.377778 70.162963 8.533333 95.762963-1.896296 14.222222 64.474074 36.02963 89.125926 42.666667l95.762963-509.155556z" fill="#FDB813" p-id="8003"></path><path d="M732.918519 513.896296c11.377778-111.881481-56.888889-203.851852-166.874075-224.711111h-0.948148L469.333333 798.340741c25.6 2.844444 94.814815 6.637037 98.607408-7.585185 6.637037-25.6 20.859259-67.318519 42.666666-86.281482C719.644444 618.192593 727.22963 568.888889 732.918519 513.896296z" fill="#FD9B13" p-id="8004"></path><path d="M467.437037 806.874074c-7.585185-0.948148-12.325926-7.585185-14.222222-14.222222l-38.874074-256c-0.948148-5.688889 0.948148-11.377778 4.74074-15.170371 3.792593-3.792593 9.481481-5.688889 15.170371-4.74074l167.822222 31.288889c5.688889 0.948148 10.42963 4.740741 12.325926 9.481481 1.896296 4.740741 1.896296 11.377778-0.948148 16.118519L486.4 798.340741c-3.792593 6.637037-11.377778 10.42963-18.962963 8.533333z m-14.222222-251.259259l27.496296 182.992592L572.681481 578.37037l-119.466666-22.755555z" fill="#F12A3F" p-id="8005"></path><path d="M375.466667 709.214815l-25.6 137.481481c0 2.844444 1.896296 5.688889 7.585185 10.42963l65.422222 54.992593c5.688889 4.740741 15.17037 8.533333 23.703704 10.429629l36.029629-193.422222-107.14074-19.911111z" fill="#2D4375" p-id="8006"></path><path d="M482.607407 729.125926l-36.029629 193.422222c9.481481 1.896296 18.014815 1.896296 25.6-0.948148l80.592592-27.496296c6.637037-1.896296 10.42963-4.740741 11.377778-6.637037L589.748148 749.037037l-107.140741-19.911111z" fill="#1E2D4F" p-id="8007"></path><path d="M612.503704 217.125926c-3.792593 18.014815-20.859259 29.392593-38.874074 26.548148-18.014815-3.792593-30.340741-20.859259-26.548149-38.874074l18.962963-100.503704c3.792593-18.014815 20.859259-29.392593 38.874075-26.548148 18.014815 3.792593 30.340741 20.859259 26.548148 38.874074l-18.962963 100.503704z" fill="#FDB813" p-id="8008"></path><path d="M382.103704 228.503704c10.42963 15.17037 6.637037 36.02963-8.533334 46.459259-15.17037 10.42963-36.02963 6.637037-46.459259-8.533333l-57.837037-84.385186c-10.42963-15.17037-6.637037-36.02963 8.533333-46.459259 15.17037-10.42963 36.02963-6.637037 46.45926 8.533334l57.837037 84.385185zM757.57037 298.666667c-15.17037 10.42963-18.962963 31.288889-8.533333 46.459259 10.42963 15.17037 31.288889 18.962963 46.459259 8.533333l84.385185-57.837037c15.17037-10.42963 18.962963-31.288889 8.533334-46.459259-10.42963-15.17037-31.288889-18.962963-46.459259-8.533333l-84.385186 57.837037z" fill="#FDB813" p-id="8009"></path><path d="M252.207407 361.244444c18.014815 3.792593 30.340741 20.859259 26.548149 38.874075-3.792593 18.014815-20.859259 29.392593-38.874075 26.548148l-100.503703-18.962963c-18.014815-3.792593-30.340741-20.859259-26.548148-38.874074 3.792593-18.014815 20.859259-29.392593 38.874074-26.548149l100.503703 18.962963zM931.081481 488.296296c18.014815 3.792593 30.340741 20.859259 26.548149 38.874074-3.792593 18.014815-20.859259 29.392593-38.874074 26.548149l-100.503704-18.962963c-18.014815-3.792593-30.340741-20.859259-26.548148-38.874075 3.792593-18.014815 20.859259-29.392593 38.874074-26.548148l100.503703 18.962963z" fill="#FDB813" p-id="8010"></path><path d="M593.540741 807.822222c1.896296-7.585185-3.792593-15.17037-11.377778-16.118518l-107.140741-19.911111-4.740741 27.496296 107.140741 19.911111c6.637037 0.948148 14.222222-3.792593 16.118519-11.377778z" fill="#CEEFF6" p-id="8011"></path><path d="M366.933333 750.933333c-7.585185-1.896296-15.17037 3.792593-16.118518 11.377778-1.896296 7.585185 3.792593 15.17037 11.377778 16.118519l107.14074 19.911111 4.740741-27.496297-107.140741-19.911111zM356.503704 808.77037c-7.585185-1.896296-15.17037 3.792593-16.118519 11.377778-1.896296 7.585185 3.792593 15.17037 11.377778 16.118519l107.140741 19.911111 4.74074-27.496297-107.14074-19.911111z" fill="#FFFFFF" p-id="8012"></path><path d="M570.785185 848.592593l-107.140741-19.911112-4.74074 27.496297 107.14074 19.911111c7.585185 1.896296 15.17037-3.792593 16.118519-11.377778 1.896296-7.585185-2.844444-15.17037-11.377778-16.118518z" fill="#CEEFF6" p-id="8013"></path></svg>
\ No newline at end of file
diff --git a/src/components/Button/ImgButton.vue b/src/components/Button/ImgButton.vue
index ec9043b..052ad8f 100644
--- a/src/components/Button/ImgButton.vue
+++ b/src/components/Button/ImgButton.vue
@@ -5,7 +5,12 @@
 
 <template>
   <img
-    class="cursor-pointer transition-all duration-300 hover:scale-105 hover:brightness-110"
+    class="transition-all duration-300"
+    :class="[
+      props.disabled
+        ? 'opacity-50 cursor-not-allowed'
+        : 'cursor-pointer hover:scale-105 hover:brightness-110'
+    ]"
     draggable="false"
     :src="getStaticImage(image)"
     @click="handleClick"
@@ -18,12 +23,22 @@ import { useRouter, type RouteLocationRaw } from 'vue-router'
 
 const router = useRouter()
 
-const props = defineProps<{
+interface Props {
+  /** 按钮图片 */
   image: string
+  /** 路由路径 */
   path?: RouteLocationRaw
-}>()
+  /** 是否禁用 */
+  disabled?: boolean
+}
 
-const handleClick = () => {
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false
+})
+
+/** 处理点击事件 */
+const handleClick = (): void => {
+  if (props.disabled) return
   if (props.path) {
     router.push(props.path)
   }
diff --git a/src/components/Guide/GuideStepsItem.vue b/src/components/Guide/GuideStepsItem.vue
index 05929fa..1822f2c 100644
--- a/src/components/Guide/GuideStepsItem.vue
+++ b/src/components/Guide/GuideStepsItem.vue
@@ -26,13 +26,9 @@ withDefaults(defineProps<Props>(), {
   totalSteps: 1
 })
 
-const emit = defineEmits<{
+defineEmits<{
   (e: 'continue'): void
 }>()
-
-const handleContinue = () => {
-  emit('continue')
-}
 </script>
 
 <style scoped>
diff --git a/src/components/Guide/StepNavigation.vue b/src/components/Guide/StepNavigation.vue
index e370f5a..fb3c7b5 100644
--- a/src/components/Guide/StepNavigation.vue
+++ b/src/components/Guide/StepNavigation.vue
@@ -210,6 +210,9 @@ onMounted(() => {
   background: rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(8px);
   animation: fadeIn 0.3s ease-out;
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* padding: 100px 0; */
 }
 
 .drawer-container {
@@ -237,13 +240,19 @@ onMounted(() => {
     rgba(20, 30, 45, 0.85) 100%
   ); */
   width: 648px;
+  height: 1080px;
   background-image: url('@/assets/images/vlog/专业剖析侧边.png');
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
   backdrop-filter: blur(20px);
   display: flex;
   flex-direction: column;
   /* border-left: 1px solid rgba(255, 255, 255, 0.1); */
-  border-radius: 12px 0 0 12px;
-  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
+  /* border-radius: 12px 0 0 12px;
+  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3); */
+
+  padding: 100px 0;
 }
 
 .close-button {
@@ -356,17 +365,26 @@ onMounted(() => {
 }
 
 .step-label--planning {
-  background: linear-gradient(135deg, #f97316, #ea580c);
+  background: linear-gradient(135deg, #e38872, #e38872);
   box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
 }
 
-.step-label--post {
+/* 蓝色 */
+.step-label--blue {
   background: linear-gradient(135deg, #0ea5e9, #0284c7);
   box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
 }
 
+/* 天蓝色 */
+.step-label--post {
+  /* background: linear-gradient(180deg, #9ed5ee, #0ea5e9); */
+  background-color: #70c7ef;
+  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
+}
+
 .step-label--other {
-  background: linear-gradient(135deg, #a855f7, #9333ea);
+  /* background: linear-gradient(135deg, #a855f7, #9445de); */
+  background-color: #5f15d7;
   box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
 }
 
diff --git a/src/components/ImageFilter/ImageFilter.vue b/src/components/ImageFilter/ImageFilter.vue
new file mode 100644
index 0000000..6780c45
--- /dev/null
+++ b/src/components/ImageFilter/ImageFilter.vue
@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import { ref, watch, onMounted } from 'vue'
+
+const props = defineProps<{
+  src: string
+}>()
+
+import { processImage, type FilterOptions } from '@/utils/imageProcessing'
+
+const options = ref<FilterOptions>({})
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+const isRendering = ref(false)
+let imgObj: HTMLImageElement | null = null
+let renderRequestId: number | null = null
+let debounceTimer: number | null = null
+
+// 更新参数方法
+const setOptions = (newOptions: FilterOptions) => {
+  options.value = { ...options.value, ...newOptions }
+}
+
+// 加载图片
+const loadImage = () => {
+  if (!props.src) return
+  const img = new Image()
+  img.crossOrigin = 'anonymous'
+  img.src = props.src
+  img.onload = () => {
+    imgObj = img
+    render()
+  }
+}
+
+watch(() => props.src, loadImage)
+onMounted(loadImage)
+
+// 渲染主逻辑
+const render = async () => {
+  if (!canvasRef.value || !imgObj) return
+  const canvas = canvasRef.value
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })
+  if (!ctx) return
+
+  isRendering.value = true
+
+  // 设置画布尺寸为图片原始尺寸
+  if (canvas.width !== imgObj.naturalWidth || canvas.height !== imgObj.naturalHeight) {
+    canvas.width = imgObj.naturalWidth
+    canvas.height = imgObj.naturalHeight
+  }
+
+  // 清空画布
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+  // 绘制原图
+  ctx.drawImage(imgObj, 0, 0)
+
+  // 获取像素数据
+  let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+
+  // 应用所有滤镜效果（像素级）
+  // 使用优化的处理函数
+  imageData = await processImage(imageData, options.value)
+
+  // 回写像素数据
+  ctx.putImageData(imageData, 0, 0)
+
+  isRendering.value = false
+}
+
+// 监听参数变化触发渲染（使用防抖优化性能）
+watch(
+  options,
+  () => {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    debounceTimer = window.setTimeout(() => {
+      if (renderRequestId) cancelAnimationFrame(renderRequestId)
+      renderRequestId = requestAnimationFrame(render)
+    }, 100) // 100ms 防抖
+  },
+  { deep: true }
+)
+
+// 生成图片方法
+const generate = async (): Promise<string> => {
+  if (!canvasRef.value) throw new Error('Canvas not initialized')
+  // 直接返回当前 Canvas 的内容，因为它是实时渲染的高清图
+  return canvasRef.value.toDataURL('image/png')
+}
+
+defineExpose({
+  generate,
+  setOptions,
+  isRendering
+})
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+    <canvas ref="canvasRef" class="max-w-full max-h-full object-contain"></canvas>
+
+    <!-- Loading 遮罩 -->
+    <div v-if="isRendering" class="absolute inset-0 flex items-center justify-center bg-black/30">
+      <svg
+        class="animate-spin"
+        width="48"
+        height="48"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="white"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="23 4 23 10 17 10"></polyline>
+        <polyline points="1 20 1 14 7 14"></polyline>
+        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+</style>
diff --git a/src/components/ImagePreview/ImagePreview.vue b/src/components/ImagePreview/ImagePreview.vue
index 95c97bd..beb9f9a 100644
--- a/src/components/ImagePreview/ImagePreview.vue
+++ b/src/components/ImagePreview/ImagePreview.vue
@@ -266,6 +266,9 @@ watch(
   z-index: 2;
 }
 .sv-ip-btn {
+  position: absolute;
+  top: 0px;
+  right: 0px;
   width: 36px;
   height: 36px;
   border-radius: 6px;
diff --git a/src/components/KnowledgeCard/FilmKnowledgeCard.vue b/src/components/KnowledgeCard/FilmKnowledgeCard.vue
new file mode 100644
index 0000000..237e4bb
--- /dev/null
+++ b/src/components/KnowledgeCard/FilmKnowledgeCard.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue'
+import { Overlay } from '@/components/Overlay'
+import { ImgButton } from '@/components/Button'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+
+interface Props {
+  visible: boolean
+  title: string
+  desc: string
+  images: string[]
+  compositionKey: '1' | '2' | '3'
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{ (e: 'close'): void }>()
+
+const imageMap = {
+  '1': 'film/shooting/示意图-框架',
+  '2': 'film/shooting/示意图-对称',
+  '3': 'film/shooting/示意图-引导'
+}
+
+const getImage = computed(() => {
+  return getBackgroundImage(imageMap[props.compositionKey])
+})
+
+// 覆盖图映射：根据构图类型和图片索引获取对应的覆盖图
+const getOverlayImage = (index: number) => {
+  const overlayMap: Record<string, string[]> = {
+    '1': ['film/shooting/05引导线构图_覆盖', 'film/shooting/06引导线构图_覆盖'], // 框架构图
+    '2': ['film/shooting/03对称构图_覆盖', 'film/shooting/04对称构图_覆盖'], // 对称构图
+    '3': ['film/shooting/01框架构图_覆盖', 'film/shooting/02框架构图_覆盖'] // 引导线构图
+  }
+  const images = overlayMap[props.compositionKey] || []
+  return images[index] || ''
+}
+
+// 每张图片的辅助线开关状态
+const showBoxLineMap = ref<Record<number, boolean>>({})
+
+watch(
+  () => props.visible,
+  v => {
+    if (v) {
+      showBoxLineMap.value = {}
+    }
+  }
+)
+
+const handleToggle = (index: number) => {
+  showBoxLineMap.value[index] = !showBoxLineMap.value[index]
+}
+
+const show = computed(() => props.visible)
+</script>
+
+<template>
+  <Overlay :visible="show" :clickable="false">
+    <div
+      class="relative w-[1752px] h-[932px]"
+      :style="{ backgroundImage: getBackgroundImage('shooting/知识卡片底板') }"
+    >
+      <div
+        class="absolute top-4 left-1/2 -translate-x-1/2 text-[45px] text-white font-bold tracking-[2px] drop-shadow-[2px_2px_4px_rgba(0,0,139,0.8)]"
+      >
+        {{ props.title }}
+      </div>
+
+      <div
+        class="absolute w-full h-[38px] top-32 left-1/2 -translate-x-1/2 bg-no-repeat bg-center"
+        :style="{ backgroundImage: getBackgroundImage('shooting/文案1') }"
+      ></div>
+
+      <div
+        class="absolute w-[191px] h-[131px] top-[30px] left-[120px] bg-no-repeat bg-center"
+        :style="{ backgroundImage: getImage }"
+      ></div>
+
+      <div
+        class="absolute top-[calc(50%-30px)] -translate-y-1/2"
+        v-for="(image, index) in props.images"
+        :key="index"
+        :style="{ left: index === 0 ? '15%' : '55%' }"
+      >
+        <ImgButton
+          class="absolute right-6 top-6 z-10"
+          :image="showBoxLineMap[index] ? 'shooting/辅助线开' : 'shooting/辅助线关'"
+          @click="handleToggle(index)"
+        />
+        <div class="relative">
+          <img class="w-[560px]" :src="getStaticImage(image)" alt="" />
+
+          <div
+            v-if="showBoxLineMap[index]"
+            class="absolute inset-0 pointer-events-none w-[560px] bg-cover bg-center bg-no-repeat"
+            :style="{ backgroundImage: getBackgroundImage(getOverlayImage(index)) }"
+          ></div>
+        </div>
+      </div>
+
+      <div
+        class="absolute w-full px-20 bottom-32 left-1/2 -translate-x-1/2 text-[#395E66] text-3xl font-bold indent-14 leading-[50px]"
+      >
+        {{ props.desc }}
+      </div>
+
+      <ImgButton
+        class="absolute right-2 top-4 translate-x-1/2 -translate-y-1/2 z-10"
+        :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+        @click="emit('close')"
+      />
+    </div>
+  </Overlay>
+</template>
+
+<style scoped></style>
diff --git a/src/components/Loading/LoadingOverlay.vue b/src/components/Loading/LoadingOverlay.vue
new file mode 100644
index 0000000..6b066ac
--- /dev/null
+++ b/src/components/Loading/LoadingOverlay.vue
@@ -0,0 +1,20 @@
+<template>
+  <div
+    v-if="visible"
+    class="loading-overlay fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+  >
+    <div class="flex flex-col items-center gap-4">
+      <div
+        class="w-12 h-12 border-4 border-white border-t-transparent rounded-full animate-spin"
+      ></div>
+      <div class="text-white text-xl font-bold tracking-wider">{{ text }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  visible: boolean
+  text?: string
+}>()
+</script>
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index 93bf8ba..7bbdb85 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -85,7 +85,7 @@ const handleClose = () => {
   emit('close')
 }
 
-const handleMaskClick = (event: MouseEvent) => {
+const handleMaskClick = () => {
   emit('mask-click')
 }
 </script>
diff --git a/src/components/ProgressBar/ProgressBar.vue b/src/components/ProgressBar/ProgressBar.vue
index 4d8d0a6..eccee0b 100644
--- a/src/components/ProgressBar/ProgressBar.vue
+++ b/src/components/ProgressBar/ProgressBar.vue
@@ -12,6 +12,28 @@
         <!-- 标题区域 -->
         <div class="absolute top-0 left-40" v-if="currentStep > 0">
           <img
+            v-if="moduleName === 'vlog'"
+            :src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.TITLE)"
+            alt="制作变焦镜-我的志愿者手记"
+            class="title-image"
+          />
+
+          <img
+            v-else-if="moduleName === 'film'"
+            :src="getStaticImage('film/制作变焦镜-这里是徐汇滨江')"
+            alt="制作变焦镜-这里是徐汇滨江"
+            class="title-image"
+          />
+
+          <img
+            v-else-if="moduleName === 'interview'"
+            :src="getStaticImage('midterm/中期拍摄')"
+            alt="制作变焦镜-我的志愿者手记"
+            class="title-image"
+          />
+
+          <img
+            v-else
             :src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.TITLE)"
             alt="制作变焦镜-我的志愿者手记"
             class="title-image"
@@ -29,7 +51,11 @@
                 :src="currentStep === index ? steps[index].nameSelect : steps[index].nameselectNot"
                 alt=""
               /> -->
-              <div class="flex items-center">
+              <div
+                class="flex items-center"
+                :class="canComplete ? 'cursor-not-allowed' : 'cursor-pointer'"
+                @click="handleStepClick(index + 1)"
+              >
                 <span
                   :class="[
                     'font-bold text-4xl ',
@@ -67,6 +93,7 @@
       <div class="absolute top-0 left-40" v-else>
         <img
           :src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.UNLOCKED)"
+          draggable="false"
           alt="未解锁"
           class="icon-image"
         />
@@ -93,24 +120,33 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, useModel } from 'vue'
 import { getStaticImage, IMAGE_PATHS } from '@/utils'
 
 // 定义组件属性
 interface Props {
   /** 当前步骤索引 (0-3) */
   currentStep?: number
+  moduleName?: 'film' | 'vlog' | 'interview'
 }
+
 // 定义事件
 interface Emits {
   /** 点击完成按钮时触发 */
   complete: []
+  /** 修改步骤时触发 */
+  stepChange: [number]
+  /** v-model:currentStep 双向绑定时触发 */
+  'update:currentStep': [number]
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  currentStep: 0
+  currentStep: 0,
+  moduleName: 'vlog'
 })
 
+const [currentStep] = useModel(props, 'currentStep')
+
 const emit = defineEmits<Emits>()
 
 // 计算属性：是否可以完成（当前在最后一步）
@@ -123,6 +159,12 @@ const handleComplete = () => {
   }
 }
 
+const handleStepClick = (index: number) => {
+  if (canComplete.value) return
+  currentStep.value = index
+  emit('stepChange', index)
+}
+
 // 步骤配置
 const steps = [
   {
diff --git a/src/components/QuestionQuiz/QuestionQuiz.vue b/src/components/QuestionQuiz/QuestionQuiz.vue
new file mode 100644
index 0000000..15fbd13
--- /dev/null
+++ b/src/components/QuestionQuiz/QuestionQuiz.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { getStaticImage } from '@/utils'
+import { Video } from '@/components'
+
+export interface QuestionOption {
+  id: string
+  label: string
+}
+
+export interface Question {
+  id: number
+  title: string
+  description: string
+  options: QuestionOption[]
+  correctOptionId: string // 单选题的正确答案ID，如果为空字符串，表示引导题，任意选择都可进入下一题
+  correctOptionIds?: string[] // 多选题的正确答案ID数组
+  isMultiple?: boolean // 是否为多选题，默认为 false
+  mediaSrc?: string // 图片路径或视频 URL，通过文件后缀判断类型
+  explanation?: string // 错误答案解析（可选）
+}
+
+interface Props {
+  questions: Question[]
+  showQuestionNumber?: boolean // 是否显示题号，默认为 true
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showQuestionNumber: true
+})
+
+const emit = defineEmits<{
+  complete: []
+}>()
+
+const currentIndex = ref(0)
+const selectedOptionId = ref<string | null>(null) // 单选题选中的选项
+const selectedOptionIds = ref<string[]>([]) // 多选题选中的选项数组
+const showErrorExplanation = ref(false) // 是否显示错误解析
+
+const total = computed(() => props.questions.length)
+const currentQuestion = computed(() => props.questions[currentIndex.value])
+const hasMedia = computed(() => !!currentQuestion.value?.mediaSrc)
+const isMultiple = computed(() => currentQuestion.value?.isMultiple ?? false)
+const correctOption = computed(() => {
+  if (!currentQuestion.value) return null
+  return currentQuestion.value.options.find(opt => opt.id === currentQuestion.value.correctOptionId)
+})
+const correctOptions = computed(() => {
+  if (!currentQuestion.value || !currentQuestion.value.correctOptionIds) return []
+  return currentQuestion.value.options.filter(opt =>
+    currentQuestion.value.correctOptionIds?.includes(opt.id)
+  )
+})
+
+// 判断选项数量是否超过4个
+const hasMoreThanFourOptions = computed(() => {
+  return currentQuestion.value?.options.length > 4
+})
+
+// 切换题目时重置选择状态
+watch(currentIndex, () => {
+  selectedOptionId.value = null
+  selectedOptionIds.value = []
+  showErrorExplanation.value = false
+})
+
+// 通过文件后缀判断媒体类型
+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))
+}
+
+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))
+}
+
+const handleOptionClick = (optionId: string) => {
+  if (isMultiple.value) {
+    // 多选题：切换选中状态
+    const index = selectedOptionIds.value.indexOf(optionId)
+    if (index > -1) {
+      selectedOptionIds.value.splice(index, 1)
+    } else {
+      selectedOptionIds.value.push(optionId)
+    }
+  } else {
+    // 单选题：直接选中
+    selectedOptionId.value = optionId
+  }
+  // 选择新选项时隐藏错误解析
+  showErrorExplanation.value = false
+}
+
+// 交互规则：选对进入下一步，选错显示解析；最后一题选对触发 complete 事件
+// 如果 correctOptionId 为空字符串，表示引导题，任意选择都可进入下一题
+const handleSubmit = () => {
+  const q = currentQuestion.value
+
+  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
+    }
+  }
+
+  // 答对时重置错误解析状态
+  showErrorExplanation.value = false
+
+  if (currentIndex.value < total.value - 1) {
+    currentIndex.value += 1
+    selectedOptionId.value = null
+    selectedOptionIds.value = []
+  } else {
+    emit('complete')
+  }
+}
+</script>
+
+<template>
+  <div class="absolute inset-0 flex items-center justify-center px-20 pointer-events-none z-30">
+    <div
+      class="bg-black/40 backdrop-blur-sm rounded-3xl border border-white/20 p-16 space-y-10 text-white pointer-events-auto"
+    >
+      <!-- 顶部：题号 -->
+      <div v-if="showQuestionNumber" class="flex items-center justify-between mb-2">
+        <div class="text-3xl font-semibold">
+          第
+          <span class="text-4xl font-extrabold mx-1 text-emerald-300">{{
+            currentQuestion.id
+          }}</span>
+          页
+          <span class="text-2xl opacity-70 ml-2">/ 共 {{ total }} 页</span>
+        </div>
+      </div>
+
+      <!-- 中部：左右布局 -->
+      <div
+        :class="[
+          hasMedia ? 'grid grid-cols-[1.2fr,1.3fr] gap-8 items-stretch' : 'flex justify-center'
+        ]"
+      >
+        <!-- 左侧：题干 + 选项 -->
+        <div :class="['flex flex-col gap-10', !hasMedia && 'max-w-2xl w-full']">
+          <div class="space-y-8">
+            <h2 class="text-3xl font-bold leading-relaxed">
+              {{ currentQuestion.title }}
+            </h2>
+            <p class="text-2xl leading-7 opacity-90">
+              {{ currentQuestion.description }}
+            </p>
+          </div>
+
+          <div :class="hasMoreThanFourOptions ? 'grid grid-cols-2 gap-6' : 'space-y-10'">
+            <button
+              v-for="opt in currentQuestion.options"
+              :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'
+              ]"
+              @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>
+
+          <!-- 错误解析提示 -->
+          <Transition name="fade">
+            <div
+              v-if="showErrorExplanation && currentQuestion.explanation"
+              class="mt-4 p-6 rounded-xl bg-amber-500/20 border border-amber-400/30 space-y-3"
+            >
+              <div class="flex items-start gap-3">
+                <span class="text-2xl">💡</span>
+                <div class="flex-1 space-y-2">
+                  <div class="text-xl font-semibold text-amber-300">参考答案</div>
+                  <div
+                    v-if="isMultiple && correctOptions.length > 0"
+                    class="text-lg text-amber-100 leading-relaxed"
+                  >
+                    {{
+                      correctOptions.map(opt => `${opt.id.toUpperCase()}. ${opt.label}`).join('、')
+                    }}
+                  </div>
+                  <div v-else-if="correctOption" class="text-lg text-amber-100 leading-relaxed">
+                    {{ correctOption.id.toUpperCase() }}. {{ correctOption.label }}
+                  </div>
+                  <div class="text-xl font-semibold text-amber-300 mt-4">解析</div>
+                  <div class="text-lg text-amber-100 leading-relaxed">
+                    {{ currentQuestion.explanation }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Transition>
+
+          <div :class="!hasMedia && 'flex justify-center'">
+            <button
+              type="button"
+              :disabled="isMultiple ? selectedOptionIds.length === 0 : !selectedOptionId"
+              class="inline-flex items-center justify-center px-10 py-3 rounded-full bg-emerald-500 hover:bg-emerald-400 active:bg-emerald-600 text-white text-2xl font-bold shadow-lg shadow-emerald-500/40 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-emerald-500 hover:shadow-xl hover:shadow-emerald-500/50 hover:scale-105 active:scale-100"
+              @click="handleSubmit"
+            >
+              确认选择
+            </button>
+          </div>
+        </div>
+
+        <!-- 右侧：参考图片 / 视频 -->
+        <div class="flex flex-col gap-3" v-if="currentQuestion.mediaSrc" :key="currentQuestion.id">
+          <!-- <div class="text-2xl font-semibold text-white/80 px-1">题目参考画面</div> -->
+          <div
+            class="relative rounded-3xl overflow-hidden border border-white/20 bg-black/50 min-h-[500px] shadow-lg"
+          >
+            <template v-if="isImage(currentQuestion.mediaSrc)">
+              <img
+                class="w-full h-full object-contain max-h-[500px]"
+                :src="getStaticImage(currentQuestion.mediaSrc)"
+                alt="题目参考画面"
+              />
+            </template>
+            <template v-else-if="isVideo(currentQuestion.mediaSrc)">
+              <Video
+                class="w-full h-full object-cover"
+                :src="currentQuestion.mediaSrc"
+                :muted="false"
+                :volume="1"
+              ></Video>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/components/QuestionQuiz/index.ts b/src/components/QuestionQuiz/index.ts
new file mode 100644
index 0000000..59de13a
--- /dev/null
+++ b/src/components/QuestionQuiz/index.ts
@@ -0,0 +1,2 @@
+export { default as QuestionQuiz } from './QuestionQuiz.vue'
+export type { Question, QuestionOption } from './QuestionQuiz.vue'
diff --git a/src/components/Rating/index.ts b/src/components/Rating/index.ts
new file mode 100644
index 0000000..69a23fe
--- /dev/null
+++ b/src/components/Rating/index.ts
@@ -0,0 +1 @@
+export { default as StarRating } from './star-rating.vue'
diff --git a/src/components/Rating/star-rating.vue b/src/components/Rating/star-rating.vue
new file mode 100644
index 0000000..50fb116
--- /dev/null
+++ b/src/components/Rating/star-rating.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { getStaticImage } from '@/utils'
+
+interface Props {
+  /** 评分数（1-5） */
+  score: number
+  /** 最大星数 */
+  maxStars?: number
+  /** 星星大小 */
+  size?: 'sm' | 'md' | 'lg'
+  /** 是否只读（不能点击） */
+  readonly?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxStars: 5,
+  size: 'md',
+  readonly: false
+})
+
+const emit = defineEmits<{
+  /** 评分变化事件 */
+  change: [score: number]
+}>()
+
+/** 当前打分值 */
+const currentScore = ref<number>(props.score)
+
+/** 悬停时显示的评分 */
+const hoverScore = ref<number>(0)
+
+/** 星星尺寸映射 */
+const sizeMap = {
+  sm: 'w-10 h-10',
+  md: 'w-14 h-14',
+  lg: 'w-18 h-18'
+}
+
+/** 显示的评分（优先显示悬停评分，否则显示当前评分） */
+const displayScore = computed<number>(() => hoverScore.value || currentScore.value)
+
+/** 处理星星点击 */
+const handleStarClick = (star: number): void => {
+  if (props.readonly) return
+  currentScore.value = star
+  emit('change', star)
+}
+
+/** 处理鼠标进入 */
+const handleMouseEnter = (star: number): void => {
+  if (props.readonly) return
+  hoverScore.value = star
+}
+
+/** 处理鼠标离开 */
+const handleMouseLeave = (): void => {
+  hoverScore.value = 0
+}
+</script>
+
+<template>
+  <div
+    class="flex gap-1"
+    :class="{ 'cursor-pointer': !props.readonly }"
+    @mouseleave="handleMouseLeave"
+  >
+    <img
+      v-for="star in props.maxStars"
+      :key="star"
+      :class="[sizeMap[props.size], !props.readonly && 'transition-transform hover:scale-110']"
+      :src="
+        getStaticImage(star <= displayScore ? 'vlog/practice/星星-亮' : 'vlog/practice/星星-灰')
+      "
+      alt=""
+      @click="handleStarClick(star)"
+      @mouseenter="handleMouseEnter(star)"
+    />
+  </div>
+</template>
diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
index b48ac0a..843b8f3 100644
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, withDefaults, defineProps, defineEmits } from 'vue'
+import { ref, withDefaults } from 'vue'
 import arrowleft from '@/assets/images/equipment/按钮-收缩.png'
 import arrowright from '@/assets/images/equipment/按钮-展开.png'
 // 定义菜单项接口
@@ -76,6 +76,7 @@ const selectItem = (index: number) => {
   top: 0;
   left: 0;
 }
+
 .equipment-arrow-left {
   position: absolute;
   top: 490px;
@@ -101,6 +102,7 @@ const selectItem = (index: number) => {
     object-fit: contain;
   }
 }
+
 .menu-icon {
   display: flex;
   // justify-content: space-between;
diff --git a/src/components/Switcher/ImageSwitchList.vue b/src/components/Switcher/ImageSwitchList.vue
index d7584c6..ce97ebc 100644
--- a/src/components/Switcher/ImageSwitchList.vue
+++ b/src/components/Switcher/ImageSwitchList.vue
@@ -3,11 +3,25 @@
     <div
       v-for="item in items"
       :key="item.key"
-      :class="['img-switch-item', itemClass, `img-switch-item--${item.key}`]"
+      :class="[
+        itemClass,
+        item.key == modelValue
+          ? 'translate-x-[-25%] brightness-100'
+          : 'translate-x-[0] brightness-50',
+        'img-switch-item transition-all duration-500',
+        `img-switch-item--${item.key}`
+      ]"
       :data-key="item.key"
       :style="{ backgroundImage: getBackgroundImage(getItemImage(item)) }"
       @click="onSelect(item.key)"
-    ></div>
+    >
+      <span
+        v-if="item.label"
+        :class="['ml-6 text-white [text-shadow:5px_5px_5px_rgba(0,0,0,0.4)]', labelClass]"
+      >
+        {{ item.label }}
+      </span>
+    </div>
   </div>
 </template>
 
@@ -19,6 +33,7 @@ interface SwitchItem {
   key: string
   activeImage: string
   inactiveImage: string
+  label?: string
 }
 
 interface Props {
@@ -26,6 +41,7 @@ interface Props {
   modelValue?: string
   direction?: 'vertical' | 'horizontal'
   itemClass?: string
+  labelClass?: string
 }
 
 interface Emits {
@@ -36,7 +52,8 @@ interface Emits {
 const props = withDefaults(defineProps<Props>(), {
   modelValue: '',
   direction: 'vertical',
-  itemClass: ''
+  itemClass: '',
+  labelClass: 'text-5xl font-bold'
 })
 
 const emit = defineEmits<Emits>()
@@ -57,7 +74,7 @@ const onSelect = (key: string) => {
 <style scoped>
 .img-switch-list {
   display: flex;
-  gap: 16px;
+  gap: 48px;
   transition: all 0.2s ease;
 }
 
@@ -70,13 +87,16 @@ const onSelect = (key: string) => {
 }
 
 .img-switch-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   cursor: pointer;
 }
 
-/* .img-switch-item:hover {
-  transform: scale(1.05);
-} */
+.img-switch-item:hover {
+  transform: translateX(-25%);
+}
 </style>
diff --git a/src/components/Video/Video.vue b/src/components/Video/Video.vue
index 730e6ad..11ed0be 100644
--- a/src/components/Video/Video.vue
+++ b/src/components/Video/Video.vue
@@ -8,6 +8,14 @@ interface VideoSource {
   type?: string
 }
 
+interface VideoAnchor {
+  id: string
+  time: number // 触发时间（秒）
+  enabled?: boolean
+  afterResume?: 'hide' | 'remove' | 'keep'
+  meta?: Record<string, any>
+}
+
 interface Props {
   // 源：字符串或多源
   src?: string
@@ -23,12 +31,15 @@ interface Props {
   hideNativeControls?: boolean // 隐藏原生控件
   autoHideControls?: boolean // 播放时自动隐藏控制条与插槽
   autoHideDelay?: number // 自动隐藏延迟（毫秒）
+  showCenterPlayIcon?: boolean // 是否显示中间播放图标
   // 行为：受控/回调
   modelValue?: boolean // 外部受控播放状态
   volume?: number // 0~1
   playbackRate?: number
   // 尺寸与适配
   fit?: 'contain' | 'cover' | 'fill'
+  // 锚点配置
+  anchors?: VideoAnchor[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -40,8 +51,10 @@ const props = withDefaults(defineProps<Props>(), {
   hideNativeControls: true,
   autoHideControls: true,
   autoHideDelay: 2000,
+  showCenterPlayIcon: true,
   playbackRate: 1,
-  fit: 'contain'
+  fit: 'contain',
+  anchors: () => []
 })
 
 const emit = defineEmits<{
@@ -66,11 +79,21 @@ const isSeeking = ref(false)
 const currentTime = ref<TimeUnit>(0)
 const duration = ref<TimeUnit>(0)
 const buffered = ref<TimeUnit>(0)
-const internalVolume = ref(props.volume ?? 1)
+const internalVolume = ref(props.volume ?? 0)
 const internalRate = ref(props.playbackRate)
 const showRateOptions = ref(false)
 const rateOptions = [0.5, 0.75, 1, 1.25, 1.5, 2]
 
+// 锚点状态
+const hiddenAnchorIds = ref<Set<string>>(new Set())
+const removedAnchorIds = ref<Set<string>>(new Set())
+const activeAnchorId = ref<string | null>(null)
+const isHandlingAnchor = ref(false)
+
+const activeAnchor = computed(() =>
+  activeAnchorId.value ? (props.anchors.find(a => a.id === activeAnchorId.value) ?? null) : null
+)
+
 // UI 可见性与计时器（控制条与所有插槽一起隐藏/显示）
 const showUi = ref(true)
 let hideTimer: number | undefined
@@ -113,6 +136,31 @@ const bufferedPercent = computed(() =>
   duration.value ? (buffered.value / duration.value) * 100 : 0
 )
 
+const handleAnchorsOnTimeUpdate = (t: number, el: HTMLVideoElement) => {
+  if (!props.anchors.length || isHandlingAnchor.value) return
+
+  for (const anchor of props.anchors) {
+    if (anchor.enabled === false) continue
+    if (removedAnchorIds.value.has(anchor.id)) continue
+    if (hiddenAnchorIds.value.has(anchor.id)) continue
+    if (activeAnchorId.value === anchor.id) continue
+
+    const diff = t - anchor.time
+    if (diff >= 0 && diff < 0.5) {
+      // 命中锚点：先暂停视频
+      el.pause()
+      // Safari 兼容：下一帧再次确认暂停
+      requestAnimationFrame(() => {
+        if (!el.paused) el.pause()
+      })
+
+      isHandlingAnchor.value = true
+      activeAnchorId.value = anchor.id
+      break
+    }
+  }
+}
+
 const togglePlay = async () => {
   if (!videoRef.value) return
   if (videoRef.value.paused) {
@@ -154,6 +202,29 @@ const handleRate = (r: number) => {
   videoRef.value.playbackRate = r
 }
 
+const unmute = () => {
+  if (!videoRef.value) return
+  videoRef.value.muted = false
+}
+
+const resumeFromAnchor = (anchor: VideoAnchor) => {
+  const mode = anchor.afterResume ?? 'hide'
+
+  if (mode === 'hide') {
+    hiddenAnchorIds.value = new Set(hiddenAnchorIds.value).add(anchor.id)
+    activeAnchorId.value = null
+  } else if (mode === 'remove') {
+    removedAnchorIds.value = new Set(removedAnchorIds.value).add(anchor.id)
+    activeAnchorId.value = null
+  }
+  // keep: 不修改 activeAnchorId，由外部自行控制 UI 关闭
+
+  isHandlingAnchor.value = false
+  if (videoRef.value?.paused) {
+    videoRef.value.play().catch(err => emit('error', err))
+  }
+}
+
 // 选择倍速并关闭下拉
 const selectRate = (r: number) => {
   handleRate(r)
@@ -198,6 +269,8 @@ watch(
   }
 )
 
+let onSeeked: (() => void) | undefined
+
 // 监听 video 事件
 onMounted(() => {
   const el = videoRef.value
@@ -224,6 +297,7 @@ onMounted(() => {
     }
     duration.value = el.duration || duration.value
     emit('timeupdate', currentTime.value, duration.value)
+    handleAnchorsOnTimeUpdate(currentTime.value, el)
   }
   const onLoaded = () => {
     duration.value = el.duration || 0
@@ -233,6 +307,24 @@ onMounted(() => {
   const onRate = () => emit('ratechange', el.playbackRate)
   const onVolume = () => emit('volumechange', el.volume, el.muted)
 
+  onSeeked = () => {
+    const cur = el.currentTime
+    // 清理当前时间之后的 hidden 状态，允许重新触发
+    if (props.anchors.length && hiddenAnchorIds.value.size) {
+      const next = new Set(hiddenAnchorIds.value)
+      for (const id of next) {
+        const anchor = props.anchors.find(a => a.id === id)
+        if (anchor && anchor.time > cur) {
+          next.delete(id)
+        }
+      }
+      hiddenAnchorIds.value = next
+    }
+
+    activeAnchorId.value = null
+    isHandlingAnchor.value = false
+  }
+
   el.addEventListener('play', onPlay)
   el.addEventListener('pause', onPause)
   el.addEventListener('ended', onEnded)
@@ -241,6 +333,7 @@ onMounted(() => {
   el.addEventListener('error', onError)
   el.addEventListener('ratechange', onRate)
   el.addEventListener('volumechange', onVolume)
+  el.addEventListener('seeked', onSeeked)
 
   // 初始配置
   el.autoplay = props.autoplay
@@ -254,6 +347,9 @@ onMounted(() => {
 onUnmounted(() => {
   const el = videoRef.value
   if (!el) return
+  if (onSeeked) {
+    el.removeEventListener('seeked', onSeeked)
+  }
   el.src = ''
   el.load()
 })
@@ -270,6 +366,18 @@ const videoStyle = computed(() => ({
     @mousemove="revealTemporarily"
     @touchstart.passive="revealTemporarily"
   >
+    <!-- 锚点遮罩插槽：优先叠在最上层，由业务侧自定义内容 -->
+    <Transition name="sv-fade-fast">
+      <div v-if="activeAnchor" class="pointer-events-auto absolute inset-0 z-20">
+        <slot
+          name="anchor"
+          :anchor="activeAnchor"
+          :resume="() => activeAnchor && resumeFromAnchor(activeAnchor)"
+          :unmute="unmute"
+        />
+      </div>
+    </Transition>
+
     <video
       ref="videoRef"
       :src="!hasMultipleSources ? src : undefined"
@@ -289,6 +397,28 @@ const videoStyle = computed(() => ({
       您的浏览器暂不支持 video 标签
     </video>
 
+    <!-- 中间播放图标 -->
+    <Transition name="sv-fade-fast">
+      <div
+        v-if="showCenterPlayIcon && !isPlaying"
+        class="absolute inset-0 flex items-center justify-center pointer-events-none z-10"
+        @click.stop="togglePlay"
+      >
+        <div
+          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"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M8 5v14l11-7z" />
+          </svg>
+        </div>
+      </div>
+    </Transition>
+
     <!-- 覆盖层插槽：叠在视频之上 -->
     <Transition name="sv-fade-fast">
       <div v-show="showUi" class="pointer-events-none absolute inset-0">
@@ -369,6 +499,15 @@ const videoStyle = computed(() => ({
                   class="absolute inset-y-0 left-0 rounded bg-blue-500"
                   :style="{ width: progressPercent + '%' }"
                 ></div>
+                <!-- 锚点标记（可选增强） -->
+                <template v-if="duration && props.anchors.length">
+                  <div
+                    v-for="a in props.anchors"
+                    :key="a.id"
+                    class="absolute -top-0.5 w-[2px] h-3 bg-yellow-300"
+                    :style="{ left: (a.time / duration) * 100 + '%' }"
+                  ></div>
+                </template>
                 <input
                   class="absolute inset-0 w-full opacity-0 cursor-pointer"
                   type="range"
diff --git a/src/components/index.ts b/src/components/index.ts
index ccbbfb6..011d2a6 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,3 +25,6 @@ export * from './Overlay'
 
 // 视频组件
 export * from './Video'
+
+// 答题组件
+export * from './QuestionQuiz'
diff --git a/src/composables/useScreenshot.ts b/src/composables/useScreenshot.ts
new file mode 100644
index 0000000..f4b894b
--- /dev/null
+++ b/src/composables/useScreenshot.ts
@@ -0,0 +1,124 @@
+import { snapdom } from '@zumer/snapdom'
+import { nextTick } from 'vue'
+
+/**
+ * 统一的高清截图功能
+ * 使用 SnapDOM 提供更好的样式保留和更高的截图质量
+ */
+export function useScreenshot() {
+  /**
+   * 截取指定区域的高清截图
+   * @param options.selector - 要截图的容器选择器
+   * @param options.cropArea - 可选的裁剪区域 { x, y, width, height }
+   * @param options.hideElements - 截图前要隐藏的元素选择器数组（会设置 display: none）
+   * @param options.ignoreElements - 截图时要忽略的元素选择器数组（SnapDOM 会跳过渲染，但元素保持显示）
+   * @param options.scale - 缩放比例，默认 2（高清）
+   * @returns Promise<string> - 图片的 Data URL
+   */
+  const captureArea = async (options: {
+    selector: string
+    cropArea?: { x: number; y: number; width: number; height: number }
+    hideElements?: string[]
+    ignoreElements?: string[]
+    scale?: number
+  }): Promise<string> => {
+    const { selector, cropArea, hideElements = [], ignoreElements = [], scale = 2 } = options
+
+    try {
+      // 1. 隐藏UI元素
+      const hiddenElements: HTMLElement[] = []
+      hideElements.forEach(sel => {
+        const elements = document.querySelectorAll(sel)
+        elements.forEach(el => {
+          const htmlEl = el as HTMLElement
+          if (htmlEl.style.display !== 'none') {
+            hiddenElements.push(htmlEl)
+            htmlEl.style.display = 'none'
+          }
+        })
+      })
+
+      // 2. 等待DOM更新
+      await nextTick()
+
+      // 3. 获取目标元素
+      const targetElement = document.querySelector(selector) as HTMLElement
+      if (!targetElement) {
+        throw new Error(`Target element not found: ${selector}`)
+      }
+
+      // 4. 使用 SnapDOM 截图（高清模式）
+      const canvas = await (snapdom as any).toCanvas(targetElement, {
+        scale: scale,
+        backgroundColor: null,
+        ignore: (element: Element) => {
+          // 检查元素是否匹配 ignoreElements 中的选择器
+          if (ignoreElements.length > 0) {
+            for (const sel of ignoreElements) {
+              if (element.matches && element.matches(sel)) {
+                return true
+              }
+            }
+          }
+          return false
+        }
+      })
+
+      // 5. 恢复隐藏的元素
+      hiddenElements.forEach(el => {
+        el.style.display = ''
+      })
+
+      // 6. 如果需要裁剪
+      if (cropArea) {
+        const croppedCanvas = document.createElement('canvas')
+        const ctx = croppedCanvas.getContext('2d')
+        if (!ctx) {
+          throw new Error('Cannot get canvas context')
+        }
+
+        // 设置裁剪后的canvas尺寸
+        croppedCanvas.width = cropArea.width * scale
+        croppedCanvas.height = cropArea.height * scale
+
+        // 计算缩放比例
+        const scaleX = canvas.width / targetElement.offsetWidth
+        const scaleY = canvas.height / targetElement.offsetHeight
+
+        // 裁剪图像
+        ctx.drawImage(
+          canvas,
+          cropArea.x * scaleX,
+          cropArea.y * scaleY,
+          cropArea.width * scaleX,
+          cropArea.height * scaleY,
+          0,
+          0,
+          cropArea.width * scale,
+          cropArea.height * scale
+        )
+
+        return croppedCanvas.toDataURL('image/png')
+      }
+
+      // 7. 返回完整截图
+      return canvas.toDataURL('image/png')
+    } catch (error) {
+      console.error('Screenshot failed:', error)
+
+      // 确保恢复所有元素
+      hideElements.forEach(sel => {
+        const elements = document.querySelectorAll(sel)
+        elements.forEach(el => {
+          ;(el as HTMLElement).style.display = ''
+        })
+      })
+
+      throw error
+    }
+  }
+
+  return {
+    captureArea
+  }
+}
diff --git a/src/main.ts b/src/main.ts
index e3a485c..197f8bd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,14 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import './style.css'
 import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+
+app.use(pinia)
 app.use(router)
 app.mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
index e7af3d8..5cf6695 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,15 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
+import { BasicElements, Film, Interview, Vlog } from './modules'
+
+const NotFound = {
+  path: '/:pathMatch(.*)*',
+  name: 'NotFound',
+  component: () => import('@/views/not-found.vue'),
+  meta: {
+    title: '404'
+  }
+}
 
 const routes: RouteRecordRaw[] = [
   {
@@ -10,14 +20,14 @@ const routes: RouteRecordRaw[] = [
       title: '首页'
     }
   },
-  {
-    path: '/guide',
-    name: 'Guide',
-    component: () => import('@/views/guide/index.vue'),
-    meta: {
-      title: '使用引导'
-    }
-  },
+  //vlog模块
+  ...Vlog,
+  //电影感模块
+  ...Film,
+  //访谈感模块
+  ...Interview,
+  //三大基础要素
+  ...BasicElements,
   {
     path: '/action',
     name: 'Action',
@@ -26,32 +36,6 @@ const routes: RouteRecordRaw[] = [
       title: '开始拍摄'
     }
   },
-  // vlog 发现与记录
-  {
-    path: '/vlog',
-    name: 'Vlog',
-    component: () => import('@/views/vlog/index.vue'),
-    meta: {
-      title: '发现与记录'
-    }
-  },
-  // vlog 发现与记录
-  {
-    path: '/work',
-    name: 'Work',
-    component: () => import('@/views/vlog/work/index.vue'),
-    meta: {
-      title: '发现与记录'
-    }
-  },
-  {
-    path: '/video',
-    name: 'Video',
-    component: () => import('@/views/vlog/video/index.vue'),
-    meta: {
-      title: '视频'
-    }
-  },
   //技能树
   {
     path: '/skill',
@@ -69,152 +53,7 @@ const routes: RouteRecordRaw[] = [
       title: '技能树视频'
     }
   },
-  //中期拍摄
-  {
-    path: '/midterm',
-    name: 'midterm',
-    component: () => import('@/views/midterm-shooting/midterm/index.vue'),
-    meta: {
-      title: '中期拍摄'
-    }
-  },
-  {
-    path: '/equipment',
-    name: 'equipment',
-    component: () => import('@/views/midterm-shooting/equipment/index.vue'),
-    meta: {
-      title: '设备准备'
-    }
-  },
-  {
-    path: '/prepare',
-    name: 'Prepare',
-    component: () => import('@/views/prepare/index.vue'),
-    meta: {
-      title: '脚本准备'
-    }
-  },
-  {
-    path: '/shooting',
-    name: 'shooting',
-    component: () => import('@/views/midterm-shooting/shooting/index.vue'),
-    meta: {
-      title: '设备准备'
-    }
-  },
-  {
-    path: '/filmingLocation-a',
-    name: 'filmingLocation-a',
-    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-a/index.vue'),
-    meta: {
-      title: '设备准备'
-    }
-  },
-  {
-    path: '/filmingLocation-b',
-    name: 'filmingLocation-b',
-    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-b/index.vue'),
-    meta: {
-      title: ''
-    }
-  },
-  {
-    path: '/a-1',
-    name: 'a-1',
-    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-a/a-1.vue'),
-    meta: {
-      title: ''
-    }
-  },
-  {
-    path: '/a-2',
-    name: 'a-2',
-    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-a/a-2.vue'),
-    meta: {
-      title: ''
-    }
-  },
-  {
-    path: '/a-3',
-    name: 'a-3',
-    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-a/a-3.vue'),
-    meta: {
-      title: ''
-    }
-  },
-  {
-    path: '/b-1',
-    name: 'b-1',
-    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-b/b-1.vue'),
-    meta: {
-      title: ''
-    }
-  },
-  {
-    path: '/b-2',
-    name: 'b-2',
-    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-b/b-2.vue'),
-    meta: {
-      title: ''
-    }
-  },
-  {
-    path: '/b-3',
-    name: 'b-3',
-    component: () => import('@/views/midterm-shooting/shooting/filmingLocation-b/b-3.vue'),
-    meta: {
-      title: ''
-    }
-  },
-  {
-    path: '/preparedetail',
-    name: 'Preparedetail',
-    component: () => import('@/views/preparedetail/index.vue'),
-    meta: {
-      title: '脚本准备详情'
-    }
-  },
-  // 后期剪辑
-  {
-    path: '/afterditing',
-    name: 'afterditing',
-    component: () => import('@/views/afterditing/index.vue'),
-    meta: {
-      title: '后期剪辑'
-    }
-  },
-  {
-    path: '/editing',
-    name: 'editing',
-    component: () => import('@/views/afterditing/editing.vue'),
-    meta: {
-      title: '剪辑'
-    }
-  },
-  {
-    path: '/adjustmentColor',
-    name: 'adjustmentColor',
-    component: () => import('@/views/afterditing/adjustmentColor.vue'),
-    meta: {
-      title: '调色'
-    }
-  },
-  {
-    path: '/script-writing',
-    name: 'script-writing',
-    component: () => import('@/views/prepare/script-writing/index.vue'),
-    meta: {
-      title: '脚本撰写'
-    }
-  },
-  {
-    path: '/color',
-    name: 'Color',
-    component: () => import('@/views/afterditing/color.vue'),
-    meta: {
-      title: '调色'
-    }
-  }
+  NotFound
 ]
 
 const router = createRouter({
diff --git a/src/router/modules/basic-elements.ts b/src/router/modules/basic-elements.ts
new file mode 100644
index 0000000..dcdb6a9
--- /dev/null
+++ b/src/router/modules/basic-elements.ts
@@ -0,0 +1,57 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+/**Basic Elements */
+const BasicElements: RouteRecordRaw[] = [
+  //构图
+  {
+    path: '/basic-elements/composition',
+    name: 'Composition',
+    props: { label: '构图' },
+    component: () => import('@/views/basic-elements/composition/index.vue'),
+    meta: {
+      title: '构图'
+    }
+  },
+  //光
+  {
+    path: '/basic-elements/light',
+    props: { label: '光' },
+    name: 'Light',
+    component: () => import('@/views/basic-elements/light/index.vue'),
+    meta: {
+      title: '光'
+    }
+  },
+  //运镜
+  {
+    path: '/basic-elements/camera-movement',
+    name: 'CameraMovement',
+    props: { label: '运镜' },
+    component: () => import('@/views/basic-elements/camera-movement/index.vue'),
+    meta: {
+      title: '运镜'
+    }
+  },
+  //基础拍摄技巧
+  {
+    path: '/basic-elements/basic-shooting-skills',
+    name: 'BasicShootingSkills',
+    props: { label: '基础拍摄技巧' },
+    component: () => import('@/views/basic-elements/basic-shooting-skills/index.vue'),
+    meta: {
+      title: '基础拍摄技巧'
+    }
+  },
+  //短视频剪辑技巧
+  {
+    path: '/basic-elements/short-video-editing-skills',
+    name: 'ShortVideoEditingSkills',
+    props: { label: '短视频剪辑技巧' },
+    component: () => import('@/views/basic-elements/short-video-editing-skills/index.vue'),
+    meta: {
+      title: '短视频剪辑技巧'
+    }
+  }
+]
+
+export default BasicElements
diff --git a/src/router/modules/film.ts b/src/router/modules/film.ts
new file mode 100644
index 0000000..d000f70
--- /dev/null
+++ b/src/router/modules/film.ts
@@ -0,0 +1,272 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+/**film */
+const Film: RouteRecordRaw[] = [
+  // film 发现与记录
+  {
+    path: '/film',
+    name: 'Film',
+    component: () => import('@/views/film/index.vue'),
+    meta: {
+      title: '发现与记录'
+    }
+  },
+  // film 发现与记录
+  {
+    path: '/film/work',
+    name: 'FilmWork',
+    component: () => import('@/views/film/work/index.vue'),
+    meta: {
+      title: '发现与记录'
+    }
+  },
+  {
+    path: '/film/video',
+    name: 'FilmVideo',
+    component: () => import('@/views/film/video/index.vue'),
+    meta: {
+      title: '发现与记录-视频'
+    }
+  },
+  //前期准备
+  {
+    path: '/film/resource',
+    name: 'FilmResource',
+    component: () => import('@/views/film/resource/index.vue'),
+    meta: {
+      title: '资源筹备'
+    }
+  },
+  {
+    path: '/film/creative',
+    name: 'FilmCreative',
+    component: () => import('@/views/film/creative/index.vue'),
+    meta: {
+      title: '创意构想'
+    }
+  },
+  {
+    path: '/film/script-writing',
+    name: 'FilmScriptWriting',
+    component: () => import('@/views/film/script-writing/index.vue'),
+    meta: {
+      title: '脚本撰写'
+    }
+  },
+  {
+    path: '/film/storyboard',
+    name: 'FilmStoryboard',
+    component: () => import('@/views/film/storyboard/index.vue'),
+    meta: {
+      title: '分镜制作'
+    }
+  },
+  //中期拍摄
+  {
+    path: '/film/equipment',
+    name: 'FilmMidtermEquipment',
+    component: () => import('@/views/film/midterm-shooting/equipment/index.vue'),
+    meta: {
+      title: '设备准备'
+    }
+  },
+  {
+    path: '/film/shooting',
+    name: 'FilmMidtermShooting',
+    component: () => import('@/views/film/midterm-shooting/shooting/index.vue'),
+    meta: {
+      title: '实地取景'
+    }
+  },
+  {
+    path: '/film/on-site-shooting',
+    name: 'FilmOnsiteShooting',
+    component: () => import('@/views/film/midterm-shooting/on-site/index.vue'),
+    meta: {
+      title: '现场拍摄'
+    }
+  },
+  {
+    path: '/film/on-site-shooting/time-lapse',
+    name: 'FilmOnsiteTimeLapse',
+    component: () => import('@/views/film/midterm-shooting/on-site/time-lapse.vue'),
+    meta: {
+      title: '现场拍摄-延时拍摄'
+    }
+  },
+  {
+    path: '/film/on-site-shooting/slider',
+    name: 'FilmOnsiteSlider',
+    component: () => import('@/views/film/midterm-shooting/on-site/slider.vue'),
+    meta: {
+      title: '现场拍摄-滑轨拍摄'
+    }
+  },
+  {
+    path: '/film/on-site-shooting/slow-shutter-day',
+    name: 'FilmOnsiteSlowShutterDay',
+    component: () => import('@/views/film/midterm-shooting/on-site/slow-shutter-day.vue'),
+    meta: {
+      title: '现场拍摄-慢门拍摄（白天）'
+    }
+  },
+  {
+    path: '/film/on-site-shooting/slow-shutter-night',
+    name: 'FilmOnsiteSlowShutterNight',
+    component: () => import('@/views/film/midterm-shooting/on-site/slow-shutter-night.vue'),
+    meta: {
+      title: '现场拍摄-慢门拍摄（夜晚）'
+    }
+  },
+  {
+    path: '/film/on-site-shooting/low-angle',
+    name: 'FilmOnsiteLowAngle',
+    component: () => import('@/views/film/midterm-shooting/on-site/low-angle.vue'),
+    meta: {
+      title: '现场拍摄-低角度拍摄'
+    }
+  },
+  {
+    path: '/film/on-site-shooting/random',
+    name: 'FilmOnsiteRandom',
+    component: () => import('@/views/film/midterm-shooting/on-site/random.vue'),
+    meta: {
+      title: '现场拍摄-创作随机性'
+    }
+  },
+  {
+    path: '/film/filmingLocation-a',
+    name: 'FilmFilmingLocationA',
+    component: () => import('@/views/film/midterm-shooting/shooting/filmingLocation-a/index.vue'),
+    meta: {
+      title: '实地取景-取景地A'
+    }
+  },
+  {
+    path: '/film/filmingLocation-b',
+    name: 'FilmFilmingLocationB',
+    component: () => import('@/views/film/midterm-shooting/shooting/filmingLocation-b/index.vue'),
+    meta: {
+      title: '实地取景-取景地B'
+    }
+  },
+  // 后期剪辑
+  {
+    path: '/film/editing',
+    name: 'FilmEditing',
+    component: () => import('@/views/film/after-editing/editing/index.vue'),
+    meta: {
+      title: '后期剪辑-剪辑'
+    }
+  },
+  {
+    path: '/film/editing/start',
+    name: 'FilmEditingStart',
+    component: () => import('@/views/film/after-editing/editing/start.vue'),
+    meta: {
+      title: '剪辑-剪辑从哪里开始'
+    }
+  },
+  {
+    path: '/film/editing/rhythm',
+    name: 'FilmEditingRhythm',
+    component: () => import('@/views/film/after-editing/editing/rhythm.vue'),
+    meta: {
+      title: '剪辑-节奏型剪辑'
+    }
+  },
+  {
+    path: '/film/editing/sound-transition',
+    name: 'FilmEditingSoundTransition',
+    component: () => import('@/views/film/after-editing/editing/sound-transition.vue'),
+    meta: {
+      title: '剪辑-声音转场'
+    }
+  },
+  {
+    path: '/film/editing/cut',
+    name: 'FilmEditingCut',
+    component: () => import('@/views/film/after-editing/editing/cut.vue'),
+    meta: {
+      title: '剪辑-快切'
+    }
+  },
+  {
+    path: '/film/editing/association',
+    name: 'FilmEditingAssociation',
+    component: () => import('@/views/film/after-editing/editing/association.vue'),
+    meta: {
+      title: '剪辑-关联剪辑'
+    }
+  },
+  {
+    path: '/film/editing/continuity',
+    name: 'FilmEditingContinuity',
+    component: () => import('@/views/film/after-editing/editing/continuity.vue'),
+    meta: {
+      title: '剪辑-连续剪辑'
+    }
+  },
+  {
+    path: '/film/color',
+    name: 'FilmColor',
+    component: () => import('@/views/film/after-editing/color.vue'),
+    meta: {
+      title: '后期剪辑-调色'
+    }
+  },
+  {
+    path: '/film/color-practice',
+    name: 'FilmColorPractice',
+    component: () => import('@/views/film/after-editing/color-practice.vue'),
+    meta: {
+      title: '后期剪辑-调色实践'
+    }
+  },
+  {
+    path: '/film/sound-effect',
+    name: 'FilmSoundEffect',
+    component: () => import('@/views/film/after-editing/sound-effect/index.vue'),
+    meta: {
+      title: '后期剪辑-音效'
+    }
+  },
+  {
+    path: '/film/export-publish',
+    name: 'FilmExportPublish',
+    component: () => import('@/views/film/after-editing/export-publish/index.vue'),
+    meta: {
+      title: '后期剪辑-导出发布'
+    }
+  },
+  // 实战操作台
+  {
+    path: '/film/practice',
+    name: 'FilmPractice',
+    component: () => import('@/views/film/practice/index.vue'),
+    meta: {
+      title: '实战操作台'
+    }
+  },
+  // 我的创作笔记
+  {
+    path: '/film/practice/my-notes',
+    name: 'FilmMyNotes',
+    component: () => import('@/views/film/practice/my-notes/index.vue'),
+    meta: {
+      title: '我的创作笔记'
+    }
+  },
+  // 他人实战作品
+  {
+    path: '/film/practice/video/:path',
+    name: 'FilmPracticeVideo',
+    props: true,
+    component: () => import('@/views/film/practice/video/index.vue'),
+    meta: {
+      title: '他人实战作品'
+    }
+  }
+]
+
+export default Film
diff --git a/src/router/modules/index.ts b/src/router/modules/index.ts
new file mode 100644
index 0000000..a748897
--- /dev/null
+++ b/src/router/modules/index.ts
@@ -0,0 +1,8 @@
+//Vlog
+export { default as Vlog } from './vlog'
+//interview
+export { default as Interview } from './interview'
+//film
+export { default as Film } from './film'
+//basic elements
+export { default as BasicElements } from './basic-elements'
diff --git a/src/router/modules/interview.ts b/src/router/modules/interview.ts
new file mode 100644
index 0000000..2a0c3ec
--- /dev/null
+++ b/src/router/modules/interview.ts
@@ -0,0 +1,130 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+/**interview */
+const Interview: RouteRecordRaw[] = [
+  // interview 发现与记录
+  {
+    path: '/interview',
+    name: 'Interview',
+    component: () => import('@/views/interview/index.vue'),
+    meta: {
+      title: '发现与记录'
+    }
+  },
+  // interview 发现与记录
+  {
+    path: '/interview/work',
+    name: 'InterviewWork',
+    component: () => import('@/views/interview/work/index.vue'),
+    meta: {
+      title: '发现与记录'
+    }
+  },
+  {
+    path: '/interview/video',
+    name: 'InterviewVideo',
+    component: () => import('@/views/interview/video/index.vue'),
+    meta: {
+      title: '发现与记录-视频'
+    }
+  },
+  //前期准备
+  {
+    path: '/interview/script-writing',
+    name: 'InterviewScriptWriting',
+    component: () => import('@/views/interview/script-writing/index.vue'),
+    meta: {
+      title: '脚本撰写'
+    }
+  },
+  //中期拍摄
+  {
+    path: '/interview/equipment',
+    name: 'InterviewEquipment',
+    component: () => import('@/views/interview/midterm-shooting/equipment/index.vue'),
+    meta: {
+      title: '设备准备'
+    }
+  },
+  {
+    path: '/interview/shooting',
+    name: 'InterviewShooting',
+    component: () => import('@/views/interview/midterm-shooting/shooting/index.vue'),
+    meta: {
+      title: '实地取景'
+    }
+  },
+  {
+    path: '/interview/filmingLocation-a',
+    name: 'InterviewFilmingLocationA',
+    component: () =>
+      import('@/views/interview/midterm-shooting/shooting/filmingLocation-a/index.vue'),
+    meta: {
+      title: '实地取景-取景地A'
+    }
+  },
+  {
+    path: '/interview/filmingLocation-b',
+    name: 'InterviewFilmingLocationA',
+    component: () =>
+      import('@/views/interview/midterm-shooting/shooting/filmingLocation-b/index.vue'),
+    meta: {
+      title: '实地取景-取景地B'
+    }
+  },
+  // 后期剪辑
+  {
+    path: '/interview/editing',
+    name: 'InterviewEditing',
+    component: () => import('@/views/interview/after-editing/editing.vue'),
+    meta: {
+      title: '剪辑'
+    }
+  },
+  // {
+  //   path: '/interview/adjustmentColor',
+  //   name: 'InterviewAdjustmentColor',
+  //   component: () => import('@/views/interview/after-editing/adjustmentColor.vue'),
+  //   meta: {
+  //     title: '调色'
+  //   }
+  // },
+  {
+    path: '/interview/color',
+    name: 'InterviewColor',
+    component: () => import('@/views/interview/after-editing/color.vue'),
+    meta: {
+      title: '调色'
+    }
+  },
+  // 实战操作台
+  {
+    path: '/interview/practice',
+    name: 'InterviewPractice',
+    component: () => import('@/views/interview/practice/index.vue'),
+    meta: {
+      title: '实战操作台'
+    }
+  },
+  // 我的创作笔记
+  {
+    path: '/interview/practice/my-notes',
+    name: 'InterviewMyNotes',
+    component: () => import('@/views/interview/practice/my-notes/index.vue'),
+    meta: {
+      title: '我的创作笔记'
+    }
+  },
+  // 他人实战作品
+  {
+    path: '/interview/practice/video/:path',
+    name: 'InterviewPracticeVideo',
+    props: true,
+    component: () => import('@/views/interview/practice/video/index.vue'),
+    meta: {
+      title: '他人实战作品'
+    }
+  }
+]
+
+export default Interview
diff --git a/src/router/modules/vlog.ts b/src/router/modules/vlog.ts
new file mode 100644
index 0000000..1401a38
--- /dev/null
+++ b/src/router/modules/vlog.ts
@@ -0,0 +1,184 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+/**vlog */
+const Vlog: RouteRecordRaw[] = [
+  // vlog 发现与记录
+  {
+    path: '/vlog',
+    name: 'Vlog',
+    component: () => import('@/views/vlog/index.vue'),
+    meta: {
+      title: '发现与记录'
+    }
+  },
+  // vlog 任务取景框
+  {
+    path: '/vlog/work',
+    name: 'VlogWork',
+    component: () => import('@/views/vlog/work/index.vue'),
+    meta: {
+      title: '发现与记录'
+    }
+  },
+  {
+    path: '/vlog/video',
+    name: 'VlogVideo',
+    component: () => import('@/views/vlog/video/index.vue'),
+    meta: {
+      title: '发现与记录-视频'
+    }
+  },
+  //前期准备-脚本撰写
+  {
+    path: '/vlog/script-writing',
+    name: 'VlogScriptWriting',
+    component: () => import('@/views/vlog/script-writing/index.vue'),
+    meta: {
+      title: '脚本撰写'
+    }
+  },
+  //中期拍摄
+  {
+    path: '/vlog/equipment',
+    name: 'VlogMidtermEquipment',
+    component: () => import('@/views/vlog/midterm-shooting/equipment/index.vue'),
+    meta: {
+      title: '设备准备'
+    }
+  },
+  {
+    path: '/vlog/shooting',
+    name: 'VlogMidtermShooting',
+    component: () => import('@/views/vlog/midterm-shooting/shooting/index.vue'),
+    meta: {
+      title: '实地取景'
+    }
+  },
+  {
+    path: '/vlog/on-site-shooting',
+    name: 'VlogShooting',
+    component: () => import('@/views/vlog/midterm-shooting/on-site/index.vue'),
+    meta: {
+      title: '现场拍摄'
+    }
+  },
+  {
+    path: '/vlog/on-site-shooting/time-lapse',
+    name: 'VlogOnsiteTimeLapse',
+    component: () => import('@/views/vlog/midterm-shooting/on-site/time-lapse.vue'),
+    meta: {
+      title: '现场拍摄-延时拍摄'
+    }
+  },
+  {
+    path: '/vlog/on-site-shooting/slider',
+    name: 'VlogOnsiteSlider',
+    component: () => import('@/views/vlog/midterm-shooting/on-site/slider.vue'),
+    meta: {
+      title: '现场拍摄-滑轨拍摄'
+    }
+  },
+  {
+    path: '/vlog/on-site-shooting/slow-shutter-day',
+    name: 'VlogOnsiteSlowShutterDay',
+    component: () => import('@/views/vlog/midterm-shooting/on-site/slow-shutter-day.vue'),
+    meta: {
+      title: '现场拍摄-慢门拍摄（白天）'
+    }
+  },
+  {
+    path: '/vlog/on-site-shooting/slow-shutter-night',
+    name: 'VlogOnsiteSlowShutterNight',
+    component: () => import('@/views/vlog/midterm-shooting/on-site/slow-shutter-night.vue'),
+    meta: {
+      title: '现场拍摄-慢门拍摄（夜晚）'
+    }
+  },
+  {
+    path: '/vlog/on-site-shooting/low-angle',
+    name: 'VlogOnsiteLowAngle',
+    component: () => import('@/views/vlog/midterm-shooting/on-site/low-angle.vue'),
+    meta: {
+      title: '现场拍摄-低角度拍摄'
+    }
+  },
+  {
+    path: '/vlog/on-site-shooting/random',
+    name: 'VlogOnsiteRandom',
+    component: () => import('@/views/vlog/midterm-shooting/on-site/random.vue'),
+    meta: {
+      title: '现场拍摄-创作随机性'
+    }
+  },
+  {
+    path: '/vlog/filmingLocation-a',
+    name: 'VlogFilmingLocationA',
+    component: () => import('@/views/vlog/midterm-shooting/shooting/filmingLocation-a/index.vue'),
+    meta: {
+      title: '实地取景-取景地A'
+    }
+  },
+  {
+    path: '/vlog/filmingLocation-b',
+    name: 'VlogFilmingLocationB',
+    component: () => import('@/views/vlog/midterm-shooting/shooting/filmingLocation-b/index.vue'),
+    meta: {
+      title: '实地取景-取景地B'
+    }
+  },
+  // 后期剪辑
+  {
+    path: '/vlog/editing',
+    name: 'VlogEditing',
+    component: () => import('@/views/vlog/after-editing/editing.vue'),
+    meta: {
+      title: '后期剪辑-剪辑'
+    }
+  },
+  // {
+  //   path: '/vlog/adjustmentColor',
+  //   name: 'VlogAdjustmentColor',
+  //   component: () => import('@/views/vlog/after-editing/adjustmentColor.vue'),
+  //   meta: {
+  //     title: '后期剪辑-调色'
+  //   }
+  // },
+  {
+    path: '/vlog/color',
+    name: 'VlogColor',
+    component: () => import('@/views/vlog/after-editing/color.vue'),
+    meta: {
+      title: '后期剪辑-调色'
+    }
+  },
+  // 实战操作台
+  {
+    path: '/vlog/practice',
+    name: 'VlogPractice',
+    component: () => import('@/views/vlog/practice/index.vue'),
+    meta: {
+      title: '实战操作台'
+    }
+  },
+  // 我的创作笔记
+  {
+    path: '/vlog/practice/my-notes',
+    name: 'VlogMyNotes',
+    component: () => import('@/views/vlog/practice/my-notes/index.vue'),
+    meta: {
+      title: '我的创作笔记'
+    }
+  },
+  // 他人实战作品
+  {
+    path: '/vlog/practice/video/:path',
+    name: 'VlogPracticeVideo',
+    props: true,
+    component: () => import('@/views/vlog/practice/video/index.vue'),
+    meta: {
+      title: '他人实战作品'
+    }
+  }
+]
+
+export default Vlog
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 0000000..ca97d5c
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1,18 @@
+/**
+ * Centralized store exports
+ * Import stores from here for better organization
+ */
+
+// Modular stores
+export { useCounterStore } from './modules/counter'
+export { useUserStore } from './modules/user'
+export { usePreferencesStore } from './modules/preferences'
+
+// Example store (for reference)
+export { useExampleStore } from './modules/example'
+export { useVlogStore } from './modules/vlog'
+export { useFilmStore } from './modules/film'
+export { useInterviewStore } from './modules/interview'
+
+//新手导航
+export { useBasicElementsStore } from './modules/basic-elements'
diff --git a/src/stores/modules/README.md b/src/stores/modules/README.md
new file mode 100644
index 0000000..bbbe755
--- /dev/null
+++ b/src/stores/modules/README.md
@@ -0,0 +1,36 @@
+# Stores Modules
+
+此目录包含所有模块化的 Pinia stores。
+
+## 模块说明
+
+### counter.ts
+
+计数器模块,管理计数状态和相关操作。
+
+### user.ts
+
+用户信息模块,管理用户基本信息。
+
+### preferences.ts
+
+用户偏好设置模块,管理主题、语言等配置。
+
+### example.ts
+
+综合示例模块,展示 Pinia 的各种用法,可作为创建新 store 的参考模板。
+
+## 使用方式
+
+从 `@/stores` 统一导入:
+
+```typescript
+import { useCounterStore, useUserStore, usePreferencesStore } from '@/stores'
+```
+
+## 创建新模块
+
+1. 在此目录下创建新的 `.ts` 文件
+2. 使用 `defineStore` 定义 store
+3. 在 `../index.ts` 中导出
+4. 根据需要配置持久化选项
diff --git a/src/stores/modules/basic-elements.ts b/src/stores/modules/basic-elements.ts
new file mode 100644
index 0000000..05a82db
--- /dev/null
+++ b/src/stores/modules/basic-elements.ts
@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+/**
+ * Basic Elements store - manages Basic Elements information
+ */
+export const useBasicElementsStore = defineStore(
+  'basic-elements',
+  () => {
+    //State
+
+    //basic-elements-任务取景框引导
+    const isGuideBasicElementsTask = ref<boolean>(true)
+    //basic-elements-是否解锁完成前置（观看视频）
+    const isBasicElementsUnlock = ref<boolean>(false)
+    //basic-elements-发现与记录解锁进度
+    const basicElementsUnlockProgress = ref<number>(0)
+
+    //Actions
+    function setIsGuideBasicElementsTask(value: boolean): void {
+      isGuideBasicElementsTask.value = value
+    }
+
+    function setIsBasicElementsUnlock(value: boolean): void {
+      isBasicElementsUnlock.value = value
+    }
+
+    function setBasicElementsUnlockProgress(value: number): void {
+      basicElementsUnlockProgress.value = value
+    }
+
+    return {
+      //State
+      setIsGuideBasicElementsTask,
+      setIsBasicElementsUnlock,
+      setBasicElementsUnlockProgress,
+      //Actions
+      isGuideBasicElementsTask,
+      isBasicElementsUnlock,
+      basicElementsUnlockProgress
+    }
+  },
+  {
+    persist: true
+  }
+)
diff --git a/src/stores/modules/counter.ts b/src/stores/modules/counter.ts
new file mode 100644
index 0000000..8c765fd
--- /dev/null
+++ b/src/stores/modules/counter.ts
@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+/**
+ * Counter store - manages counter state
+ */
+export const useCounterStore = defineStore(
+  'counter',
+  () => {
+    const count = ref<number>(0)
+
+    function increment(): void {
+      count.value++
+    }
+
+    function decrement(): void {
+      count.value--
+    }
+
+    function reset(): void {
+      count.value = 0
+    }
+
+    return {
+      count,
+      increment,
+      decrement,
+      reset
+    }
+  },
+  {
+    persist: true
+  }
+)
diff --git a/src/stores/modules/example.ts b/src/stores/modules/example.ts
new file mode 100644
index 0000000..a995dd3
--- /dev/null
+++ b/src/stores/modules/example.ts
@@ -0,0 +1,70 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+/**
+ * Example store demonstrating localStorage persistence
+ * This store will automatically save and restore data from localStorage
+ */
+export const useExampleStore = defineStore(
+  'example',
+  () => {
+    // State
+    const count = ref<number>(0)
+    const userName = ref<string>('')
+    const userPreferences = ref<{
+      theme: 'light' | 'dark'
+      language: string
+    }>({
+      theme: 'light',
+      language: 'zh-CN'
+    })
+
+    // Actions
+    function increment(): void {
+      count.value++
+    }
+
+    function decrement(): void {
+      count.value--
+    }
+
+    function setUserName(name: string): void {
+      userName.value = name
+    }
+
+    function updateTheme(theme: 'light' | 'dark'): void {
+      userPreferences.value.theme = theme
+    }
+
+    function updateLanguage(language: string): void {
+      userPreferences.value.language = language
+    }
+
+    function reset(): void {
+      count.value = 0
+      userName.value = ''
+      userPreferences.value = {
+        theme: 'light',
+        language: 'zh-CN'
+      }
+    }
+
+    return {
+      // State
+      count,
+      userName,
+      userPreferences,
+      // Actions
+      increment,
+      decrement,
+      setUserName,
+      updateTheme,
+      updateLanguage,
+      reset
+    }
+  },
+  {
+    // Enable persistence to localStorage
+    persist: true
+  }
+)
diff --git a/src/stores/modules/film.ts b/src/stores/modules/film.ts
new file mode 100644
index 0000000..688b963
--- /dev/null
+++ b/src/stores/modules/film.ts
@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+/**
+ * Film store - manages Film information
+ */
+export const useFilmStore = defineStore(
+  'Film',
+  () => {
+    //State
+
+    //Film-任务取景框引导
+    const isGuideFilmTask = ref<boolean>(true)
+    //Film-是否解锁完成前置（观看视频）
+    const isFilmUnlock = ref<boolean>(false)
+    //Film-发现与记录解锁进度
+    const FilmUnlockProgress = ref<number>(0)
+
+    //Actions
+    function setIsGuideFilmTask(value: boolean): void {
+      isGuideFilmTask.value = value
+    }
+
+    function setIsFilmUnlock(value: boolean): void {
+      isFilmUnlock.value = value
+    }
+
+    function setFilmUnlockProgress(value: number): void {
+      FilmUnlockProgress.value = value
+    }
+
+    return {
+      //State
+      setIsGuideFilmTask,
+      setIsFilmUnlock,
+      setFilmUnlockProgress,
+      //Actions
+      isGuideFilmTask,
+      isFilmUnlock,
+      FilmUnlockProgress
+    }
+  },
+  {
+    persist: true
+  }
+)
diff --git a/src/stores/modules/interview.ts b/src/stores/modules/interview.ts
new file mode 100644
index 0000000..5b3010e
--- /dev/null
+++ b/src/stores/modules/interview.ts
@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+/**
+ * I store - manages Interview information
+ */
+export const useInterviewStore = defineStore(
+  'Interview',
+  () => {
+    //State
+
+    //Interview-任务取景框引导
+    const isGuideInterviewTask = ref<boolean>(true)
+    //Interview-是否解锁完成前置（观看视频）
+    const isInterviewUnlock = ref<boolean>(false)
+    //Interview-发现与记录解锁进度
+    const InterviewUnlockProgress = ref<number>(0)
+
+    //Actions
+    function setIsGuideInterviewTask(value: boolean): void {
+      isGuideInterviewTask.value = value
+    }
+
+    function setIsInterviewUnlock(value: boolean): void {
+      isInterviewUnlock.value = value
+    }
+
+    function setInterviewUnlockProgress(value: number): void {
+      InterviewUnlockProgress.value = value
+    }
+
+    return {
+      //State
+      setIsGuideInterviewTask,
+      setIsInterviewUnlock,
+      setInterviewUnlockProgress,
+      //Actions
+      isGuideInterviewTask,
+      isInterviewUnlock,
+      InterviewUnlockProgress
+    }
+  },
+  {
+    persist: true
+  }
+)
diff --git a/src/stores/modules/preferences.ts b/src/stores/modules/preferences.ts
new file mode 100644
index 0000000..46744d5
--- /dev/null
+++ b/src/stores/modules/preferences.ts
@@ -0,0 +1,57 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export interface UserPreferences {
+  theme: 'light' | 'dark'
+  language: string
+}
+
+/**
+ * Preferences store - manages user preferences
+ */
+export const usePreferencesStore = defineStore(
+  'preferences',
+  () => {
+    const preferences = ref<UserPreferences>({
+      theme: 'light',
+      language: 'zh-CN'
+    })
+
+    // Getters
+    const isDarkMode = computed(() => preferences.value.theme === 'dark')
+    const currentLanguage = computed(() => preferences.value.language)
+
+    // Actions
+    function setTheme(theme: 'light' | 'dark'): void {
+      preferences.value.theme = theme
+    }
+
+    function toggleTheme(): void {
+      preferences.value.theme = preferences.value.theme === 'light' ? 'dark' : 'light'
+    }
+
+    function setLanguage(language: string): void {
+      preferences.value.language = language
+    }
+
+    function reset(): void {
+      preferences.value = {
+        theme: 'light',
+        language: 'zh-CN'
+      }
+    }
+
+    return {
+      preferences,
+      isDarkMode,
+      currentLanguage,
+      setTheme,
+      toggleTheme,
+      setLanguage,
+      reset
+    }
+  },
+  {
+    persist: true
+  }
+)
diff --git a/src/stores/modules/user.ts b/src/stores/modules/user.ts
new file mode 100644
index 0000000..9c47c57
--- /dev/null
+++ b/src/stores/modules/user.ts
@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+/**
+ * User store - manages user information
+ */
+export const useUserStore = defineStore(
+  'user',
+  () => {
+    //action-新手导航（是否引导新手导航）
+    const isGuideNewUser = ref<boolean>(true)
+
+    function setIsGuideNewUser(value: boolean): void {
+      isGuideNewUser.value = value
+    }
+
+    return {
+      setIsGuideNewUser,
+      isGuideNewUser
+    }
+  },
+  {
+    persist: true
+  }
+)
diff --git a/src/stores/modules/vlog.ts b/src/stores/modules/vlog.ts
new file mode 100644
index 0000000..b8e6568
--- /dev/null
+++ b/src/stores/modules/vlog.ts
@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+/**
+ * Vlog store - manages Vlog information
+ */
+export const useVlogStore = defineStore(
+  'vlog',
+  () => {
+    //State
+
+    //vlog-任务取景框引导
+    const isGuideVlogTask = ref<boolean>(true)
+    //vlog-是否解锁完成前置（观看视频）
+    const isVlogUnlock = ref<boolean>(false)
+    //vlog-发现与记录解锁进度
+    const vlogUnlockProgress = ref<number>(0)
+
+    //Actions
+    function setIsGuideVlogTask(value: boolean): void {
+      isGuideVlogTask.value = value
+    }
+
+    function setIsVlogUnlock(value: boolean): void {
+      isVlogUnlock.value = value
+    }
+
+    function setVlogUnlockProgress(value: number): void {
+      vlogUnlockProgress.value = value
+    }
+
+    return {
+      //State
+      setIsGuideVlogTask,
+      setIsVlogUnlock,
+      setVlogUnlockProgress,
+      //Actions
+      isGuideVlogTask,
+      isVlogUnlock,
+      vlogUnlockProgress
+    }
+  },
+  {
+    persist: true
+  }
+)
diff --git a/src/style.css b/src/style.css
index 1d00bb4..73a59d4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -18,16 +18,20 @@ body {
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.6;
   color: #333;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
 }
 
 #app {
   width: 100%;
-  height: 100vh;
+  height: 100%;
 }
 
 /* 自定义滚动条 */
 ::-webkit-scrollbar {
   width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
diff --git a/src/utils/imageProcessing.ts b/src/utils/imageProcessing.ts
new file mode 100644
index 0000000..e7e360e
--- /dev/null
+++ b/src/utils/imageProcessing.ts
@@ -0,0 +1,311 @@
+/**
+ * 图像处理工具库
+ * 包含所有像素级滤镜算法
+ */
+
+export interface FilterOptions {
+  brightness?: number
+  contrast?: number
+  saturation?: number
+  exposure?: number
+  hue?: number
+  blur?: number
+  sharpen?: number
+  filter?: string
+}
+
+// RGB 转 HSL
+const rgbToHsl = (r: number, g: number, b: number): [number, number, number] => {
+  r /= 255
+  g /= 255
+  b /= 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const l = (max + min) / 2
+
+  if (max === min) return [0, 0, l]
+
+  const d = max - min
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+
+  let h = 0
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
+  else if (max === g) h = ((b - r) / d + 2) / 6
+  else h = ((r - g) / d + 4) / 6
+
+  return [h * 2 * Math.PI, s, l]
+}
+
+// HSL 转 RGB
+const hslToRgb = (h: number, s: number, l: number): [number, number, number] => {
+  h = h / (2 * Math.PI)
+
+  const hue2rgb = (p: number, q: number, t: number) => {
+    if (t < 0) t += 1
+    if (t > 1) t -= 1
+    if (t < 1 / 6) return p + (q - p) * 6 * t
+    if (t < 1 / 2) return q
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
+    return p
+  }
+
+  if (s === 0) return [l * 255, l * 255, l * 255]
+
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+  const p = 2 * l - q
+
+  const r = hue2rgb(p, q, h + 1 / 3)
+  const g = hue2rgb(p, q, h)
+  const b = hue2rgb(p, q, h - 1 / 3)
+
+  return [r * 255, g * 255, b * 255]
+}
+
+// 应用预设滤镜
+const applyPresetFilter = (data: Uint8ClampedArray, filterStr: string) => {
+  // 解析 CSS filter 字符串
+  const sepiaMatch = filterStr.match(/sepia\(([\d.]+)\)/)
+  const hueMatch = filterStr.match(/hue-rotate\(([\d.-]+)deg\)/)
+  const contrastMatch = filterStr.match(/contrast\(([\d.]+)\)/)
+  const brightnessMatch = filterStr.match(/brightness\(([\d.]+)\)/)
+  const saturateMatch = filterStr.match(/saturate\(([\d.]+)\)/)
+  const grayscaleMatch = filterStr.match(/grayscale\(([\d.]+)\)/)
+
+  const sepiaAmount = sepiaMatch ? parseFloat(sepiaMatch[1]) : 0
+  const hueRotate = hueMatch ? (parseFloat(hueMatch[1]) * Math.PI) / 180 : 0
+  const contrastFactor = contrastMatch ? parseFloat(contrastMatch[1]) : 1
+  const brightnessFactor = brightnessMatch ? parseFloat(brightnessMatch[1]) : 1
+  const saturateFactor = saturateMatch ? parseFloat(saturateMatch[1]) : 1
+  const grayscaleAmount = grayscaleMatch ? parseFloat(grayscaleMatch[1]) : 0
+
+  for (let i = 0; i < data.length; i += 4) {
+    let r = data[i]
+    let g = data[i + 1]
+    let b = data[i + 2]
+
+    // 1. Grayscale
+    if (grayscaleAmount > 0) {
+      const gray = r * 0.299 + g * 0.587 + b * 0.114
+      r = r + (gray - r) * grayscaleAmount
+      g = g + (gray - g) * grayscaleAmount
+      b = b + (gray - b) * grayscaleAmount
+    }
+
+    // 2. Sepia
+    if (sepiaAmount > 0) {
+      const tr = r * 0.393 + g * 0.769 + b * 0.189
+      const tg = r * 0.349 + g * 0.686 + b * 0.168
+      const tb = r * 0.272 + g * 0.534 + b * 0.131
+      r = r + (tr - r) * sepiaAmount
+      g = g + (tg - g) * sepiaAmount
+      b = b + (tb - b) * sepiaAmount
+    }
+
+    // 3. Brightness
+    r *= brightnessFactor
+    g *= brightnessFactor
+    b *= brightnessFactor
+
+    // 4. Contrast
+    r = ((r / 255 - 0.5) * contrastFactor + 0.5) * 255
+    g = ((g / 255 - 0.5) * contrastFactor + 0.5) * 255
+    b = ((b / 255 - 0.5) * contrastFactor + 0.5) * 255
+
+    // 5. Saturate
+    if (saturateFactor !== 1) {
+      const gray = 0.299 * r + 0.587 * g + 0.114 * b
+      r = gray + (r - gray) * saturateFactor
+      g = gray + (g - gray) * saturateFactor
+      b = gray + (b - gray) * saturateFactor
+    }
+
+    // 6. Hue-rotate
+    if (hueRotate !== 0) {
+      const [h, s, l] = rgbToHsl(r, g, b)
+      const newH = (h + hueRotate) % (2 * Math.PI)
+      const [newR, newG, newB] = hslToRgb(newH, s, l)
+      r = newR
+      g = newG
+      b = newB
+    }
+
+    data[i] = Math.max(0, Math.min(255, r))
+    data[i + 1] = Math.max(0, Math.min(255, g))
+    data[i + 2] = Math.max(0, Math.min(255, b))
+  }
+}
+
+// 优化的高斯模糊（可分离卷积）
+// 复杂度从 O(R^2) 降低到 O(R)
+const applyFastBlur = (imageData: ImageData, radius: number) => {
+  if (radius < 1) return
+
+  const width = imageData.width
+  const height = imageData.height
+  const data = imageData.data
+
+  // 水平方向模糊
+  const horizontalBuffer = new Uint8ClampedArray(data)
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      let r = 0,
+        g = 0,
+        b = 0,
+        count = 0
+
+      // 仅在水平方向采样
+      for (let dx = -radius; dx <= radius; dx++) {
+        const nx = Math.min(width - 1, Math.max(0, x + dx))
+        const i = (y * width + nx) * 4
+        r += horizontalBuffer[i]
+        g += horizontalBuffer[i + 1]
+        b += horizontalBuffer[i + 2]
+        count++
+      }
+
+      const i = (y * width + x) * 4
+      data[i] = r / count
+      data[i + 1] = g / count
+      data[i + 2] = b / count
+    }
+  }
+
+  // 垂直方向模糊
+  // 注意：这里直接在已经水平模糊过的 data 上操作
+  const verticalBuffer = new Uint8ClampedArray(data)
+  for (let x = 0; x < width; x++) {
+    for (let y = 0; y < height; y++) {
+      let r = 0,
+        g = 0,
+        b = 0,
+        count = 0
+
+      // 仅在垂直方向采样
+      for (let dy = -radius; dy <= radius; dy++) {
+        const ny = Math.min(height - 1, Math.max(0, y + dy))
+        const i = (ny * width + x) * 4
+        r += verticalBuffer[i]
+        g += verticalBuffer[i + 1]
+        b += verticalBuffer[i + 2]
+        count++
+      }
+
+      const i = (y * width + x) * 4
+      data[i] = r / count
+      data[i + 1] = g / count
+      data[i + 2] = b / count
+    }
+  }
+}
+
+// 锐化
+const applySharpen = (imageData: ImageData, amount: number) => {
+  const w = imageData.width
+  const h = imageData.height
+  const data = imageData.data
+  const buff = new Uint8ClampedArray(data)
+  const k = (amount / 100) * 0.5
+
+  for (let y = 1; y < h - 1; y++) {
+    for (let x = 1; x < w - 1; x++) {
+      const i = (y * w + x) * 4
+      const up = ((y - 1) * w + x) * 4
+      const down = ((y + 1) * w + x) * 4
+      const left = (y * w + (x - 1)) * 4
+      const right = (y * w + (x + 1)) * 4
+
+      for (let c = 0; c < 3; c++) {
+        const val = buff[i + c]
+        const neighbors = buff[up + c] + buff[down + c] + buff[left + c] + buff[right + c]
+        const res = val + k * (4 * val - neighbors)
+        data[i + c] = res
+      }
+    }
+  }
+}
+
+// 主处理函数
+export const processImage = async (
+  imageData: ImageData,
+  opts: FilterOptions
+): Promise<ImageData> => {
+  return new Promise(resolve => {
+    // 使用 setTimeout 将计算推迟到下一个宏任务，避免阻塞 UI 渲染
+    setTimeout(() => {
+      const data = imageData.data
+      const {
+        brightness = 0,
+        contrast = 0,
+        saturation = 0,
+        exposure = 0,
+        hue = 0,
+        blur = 0,
+        sharpen = 0,
+        filter = 'none'
+      } = opts
+
+      // 1. 预设滤镜
+      if (filter && filter !== 'none') {
+        applyPresetFilter(data, filter)
+      }
+
+      // 2. 基础参数调整
+      const brightnessFactor = (100 + brightness + exposure) / 100
+      const contrastFactor = (100 + contrast) / 100
+      const saturationFactor = (100 + saturation) / 100
+      const hueRotation = (hue * 1.8 * Math.PI) / 180
+
+      // 如果有基础参数调整，遍历像素
+      if (brightness !== 0 || contrast !== 0 || saturation !== 0 || exposure !== 0 || hue !== 0) {
+        const tempBuffer = new Uint8ClampedArray(data)
+        for (let i = 0; i < data.length; i += 4) {
+          let r = tempBuffer[i]
+          let g = tempBuffer[i + 1]
+          let b = tempBuffer[i + 2]
+
+          // Brightness
+          r *= brightnessFactor
+          g *= brightnessFactor
+          b *= brightnessFactor
+
+          // Contrast
+          r = ((r / 255 - 0.5) * contrastFactor + 0.5) * 255
+          g = ((g / 255 - 0.5) * contrastFactor + 0.5) * 255
+          b = ((b / 255 - 0.5) * contrastFactor + 0.5) * 255
+
+          // Saturation
+          const gray = 0.299 * r + 0.587 * g + 0.114 * b
+          r = gray + (r - gray) * saturationFactor
+          g = gray + (g - gray) * saturationFactor
+          b = gray + (b - gray) * saturationFactor
+
+          // Hue
+          if (hue !== 0) {
+            const [h, s, l] = rgbToHsl(r, g, b)
+            const newH = (h + hueRotation) % (2 * Math.PI)
+            const [newR, newG, newB] = hslToRgb(newH, s, l)
+            r = newR
+            g = newG
+            b = newB
+          }
+
+          data[i] = Math.max(0, Math.min(255, r))
+          data[i + 1] = Math.max(0, Math.min(255, g))
+          data[i + 2] = Math.max(0, Math.min(255, b))
+        }
+      }
+
+      // 3. 模糊 (优化版)
+      if (blur > 0) {
+        applyFastBlur(imageData, Math.floor(blur / 10))
+      }
+
+      // 4. 锐化
+      if (sharpen > 0) {
+        applySharpen(imageData, sharpen)
+      }
+
+      resolve(imageData)
+    }, 0)
+  })
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index b00bb41..bb9e71f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -213,3 +213,11 @@ export const IMAGE_PATHS = {
     ADJUSTMENTCOLOR: 'afterditing/按钮-调色'
   }
 } as const
+
+// 获取 public 文件夹中的资源路径（用于 Word 文档等）
+export const getPublicPath = (path: string) => {
+  // 移除开头的斜杠（如果有）
+  const cleanPath = path.startsWith('/') ? path.slice(1) : path
+  // 使用 Vite 的 BASE_URL 环境变量来处理基础路径
+  return `${import.meta.env.BASE_URL}${cleanPath}`
+}
diff --git a/src/views/afterditing/color.vue b/src/views/afterditing/color.vue
deleted file mode 100644
index 92a991a..0000000
--- a/src/views/afterditing/color.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<script lang="ts" setup>
-import router from '@/router'
-import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
-import { ImgButton } from '@/components/Button'
-import { Overlay } from '@/components/Overlay'
-import { computed, ref } from 'vue'
-
-const selected = ref<number | undefined>()
-const showColorBar = ref(false)
-const btnState = ref(false)
-const screenshot = ref()
-const showModal = ref(false)
-
-const colorBarList = ref([
-  {
-    id: 1,
-    name: '智能调色',
-    image: getStaticImage('afterditing/color/智能调色.png'),
-    Screenshot: getStaticImage('afterditing/color/卡片-智能调色.png')
-  },
-  {
-    id: 2,
-    name: '滤镜-日落增色',
-    image: getStaticImage('afterditing/color/日落增色.png'),
-    Screenshot: getStaticImage('afterditing/color/卡片-日落增色.png')
-  },
-  {
-    id: 3,
-    name: '滤镜-落日火烧云',
-    image: getStaticImage('afterditing/color/落日火烧云.png'),
-    Screenshot: getStaticImage('afterditing/color/卡片-落日火烧云.png')
-  }
-])
-
-const selectedImage = computed(() => {
-  return !btnState.value && colorBarList.value.find(v => v.id === selected.value)?.image
-})
-
-const changeOriginalImgae = () => {
-  btnState.value = !btnState.value
-}
-
-const handleSave = () => {
-  screenshot.value = colorBarList.value.find(v => v.id === selected.value)?.Screenshot
-  showModal.value = true
-}
-
-const handleModalClose = () => {
-  showModal.value = false
-  screenshot.value = null
-}
-
-const handleTryOther = () => {
-  showModal.value = false
-}
-
-const handleFinish = () => {
-  router.push({
-    name: 'afterditing',
-    query: { step: 4 }
-  })
-}
-
-const handleClose = () => {
-  router.back()
-}
-
-const changeColor = (item: { id: number; name: string }) => {
-  selected.value = item.id
-}
-</script>
-
-<template>
-  <div class="w-full h-full relative">
-    <!-- 返回 -->
-    <ImgButton
-      class="absolute right-0 top-0 z-10"
-      :image="IMAGE_PATHS.COMPONENTS.BACK"
-      @click="handleClose"
-    />
-
-    <!-- 背景图片-center -->
-    <div
-      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-      :style="{
-        backgroundImage: `url(${selectedImage || getStaticImage('afterditing/color/原图')})`
-      }"
-    ></div>
-
-    <!-- 分段控制器 -->
-    <div class="absolute top-10 left-1/2 transform -translate-x-1/2 z-20" v-if="!showColorBar">
-      <div
-        class="flex justify-between w-[800px] bg-white/60 backdrop-blur-sm border-[3px] border-white rounded-[50px] px-4 py-4 text-xl font-bold tracking-[4px]"
-      >
-        <!-- 后期制作选项 -->
-        <button :class="['px-12 py-3 rounded-[50px]  bg-teal-500 text-white shadow-lg']">
-          后期制作
-        </button>
-
-        <!-- 智能调色和滤镜选项 -->
-        <button :class="['px-4  rounded-[50px]  text-[#2F5A84] text-2xl']">智能调色和滤镜</button>
-      </div>
-    </div>
-
-    <!-- title -->
-    <div
-      class="absolute top-0 left-0 w-[332px] h-[153px] bg-cover bg-center bg-no-repeat"
-      :style="{
-        backgroundImage: showColorBar
-          ? getBackgroundImage('afterditing/color/标题-调色实践')
-          : getBackgroundImage('afterditing/color/标题-调色')
-      }"
-    ></div>
-
-    <!-- 调色栏 -->
-    <div class="absolute bottom-0 flex justify-center w-full" v-if="showColorBar">
-      <div class="flex">
-        <div
-          v-for="item in colorBarList"
-          :key="item.id"
-          :style="{
-            backgroundImage:
-              selected == item.id
-                ? getBackgroundImage('afterditing/color/按钮-调色选中')
-                : getBackgroundImage('afterditing/color/按钮-调色未选中')
-          }"
-          class="w-[449px] h-[170px] text-white text-3xl font-bold flex items-center justify-center cursor-pointer bg-no-repeat bg-cover"
-          @click="changeColor(item)"
-        >
-          <span>{{ item.name }}</span>
-        </div>
-      </div>
-      <ImgButton
-        class="flex-[0_0_200px]"
-        @click="changeOriginalImgae"
-        :image="
-          btnState ? 'afterditing/color/开启对比 - 可开启' : 'afterditing/color/开启对比 - 不可开启'
-        "
-      ></ImgButton>
-    </div>
-
-    <!-- 保存 -->
-    <ImgButton
-      v-if="selected"
-      class="absolute right-0 top-1/2 -translate-y-1/2 z-10"
-      image="afterditing/color/按钮-保存"
-      @click="handleSave"
-    />
-
-    <!-- 调色栏显示隐藏按钮 -->
-    <ImgButton
-      v-if="!showColorBar"
-      class="absolute bottom-0 right-0"
-      image="afterditing/color/调色实践"
-      @click="showColorBar = true"
-    ></ImgButton>
-
-    <!-- 保存图片弹窗 -->
-    <Overlay :visible="showModal" @close="handleModalClose">
-      <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
-        <img :src="screenshot" alt="调色结果" class="max-w-full max-h-full object-contain" />
-        <!-- 操作按钮 -->
-        <div class="absolute bottom-1/2 -left-1/3 translate-y-1/2">
-          <ImgButton image="afterditing/color/按钮-试试其他调色" @click="handleTryOther" />
-        </div>
-        <div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
-          <ImgButton image="afterditing/color/按钮-结束调色实践" @click="handleFinish" />
-        </div>
-      </div>
-    </Overlay>
-  </div>
-</template>
diff --git a/src/views/basic-elements/basic-shooting-skills/index.vue b/src/views/basic-elements/basic-shooting-skills/index.vue
new file mode 100644
index 0000000..dc449d2
--- /dev/null
+++ b/src/views/basic-elements/basic-shooting-skills/index.vue
@@ -0,0 +1,303 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+import { StepNavigation } from '@/components/Guide'
+import { Video, QuestionQuiz, type Question } from '@/components'
+import { getStaticImage, IMAGE_PATHS } from '@/utils'
+// 视频导入
+// 手机摄像头介绍
+import video1 from '/video/new/xinshou_shoujishexiangtoujieshao.mp4'
+// 景别概念介绍 - 暂时用其他视频代替
+import video2 from '/video/new/xsdh_jbgnjs_batch.mp4'
+// 手机慢动作 - 暂时用其他视频代替
+import video3 from '/video/new/xsdh_sjmdz_batch.mp4'
+// 延时摄影 - 暂时用其他视频代替
+import video4 from '/video/new/xsdh_yssy_batch.mp4'
+// 神奇的微距摄影
+import video5 from '/video/new/xsdh_sqdwjsy_batch.mp4'
+// 夜景摄影 - 暂时用其他视频代替
+import video6 from '/video/new/xsdh_djmldyjsy_batch.mp4'
+
+const router = useRouter()
+
+// 受控播放开关（用于切换到下一个视频时自动播放）
+const playing = ref(false)
+const status = ref(false)
+const showQuiz = ref(false) // 控制是否显示答题窗口
+
+// 步骤导航数据 - 确保content字段不包含（一）、【Q2】等标记
+const rawSteps = [
+  {
+    id: 'step2',
+    label: '拍摄基础',
+    content: '手机摄像头介绍',
+    type: 'post' as const
+  },
+  {
+    id: 'step3',
+    label: '拍摄基础',
+    content: '景别概念介绍',
+    type: 'post' as const
+  },
+  {
+    id: 'step4',
+    label: '拍摄基础',
+    content: '手机慢动作',
+    type: 'post' as const
+  },
+  {
+    id: 'step5',
+    label: '拍摄基础',
+    content: '延时摄影',
+    type: 'post' as const
+  },
+  {
+    id: 'step6',
+    label: '拍摄基础',
+    content: '神奇的微距摄影',
+    type: 'post' as const
+  },
+  {
+    id: 'step7',
+    label: '拍摄基础',
+    content: '独具魅力的夜景摄影',
+    type: 'post' as const
+  }
+]
+
+const navigationSteps = ref(rawSteps)
+
+// 步骤导航相关状态
+const showStepNavigation = ref(false)
+const currentNavigationStep = ref(0) // 对应视频索引，从0开始
+
+// 视频列表
+const videoList = [video1, video2, video3, video4, video5, video6]
+const currentVideoIndex = ref(0)
+
+// 题目数据：景别概念介绍（index 1）、手机慢动作（index 2）、独具魅力的夜景摄影（index 5）
+const questions = ref<Question[]>([])
+
+// 根据当前视频索引获取对应的题目
+const getQuestionsForVideo = (index: number): Question[] => {
+  // 景别概念介绍（index 1）
+  if (index === 1) {
+    return [
+      {
+        id: 1,
+        title: '',
+        description: '（单选）如果你想让观众“看清环境、理解空间关系”，更适合用哪种镜头？',
+        options: [
+          {
+            id: 'a',
+            label: '面部特写视频'
+          },
+          {
+            id: 'b',
+            label: '中景人物视频'
+          },
+          {
+            id: 'c',
+            label: '全景环境视频'
+          }
+        ],
+        correctOptionId: 'c',
+        explanation: '全景更适合交代故事发生在哪里。'
+      }
+    ]
+  }
+
+  // 手机慢动作（index 2）
+  if (index === 2) {
+    return [
+      {
+        id: 2,
+        title: '',
+        description: '（多选题）下面这些拍摄场景中，哪些更适合使用"慢动作"来表现？',
+        options: [
+          {
+            id: 'a',
+            label: '城市街道上车水马龙，车辆快速穿行'
+          },
+          {
+            id: 'b',
+            label: '甩头发、转身、跳跃等人物动作瞬间'
+          },
+          {
+            id: 'c',
+            label: '水花飞溅、雨滴落地、浪花拍岸'
+          },
+          {
+            id: 'd',
+            label: '风吹动衣摆、窗帘或树叶缓慢摆动'
+          }
+        ],
+        isMultiple: true,
+        correctOptionIds: ['b', 'c', 'd'],
+        correctOptionId: '', // 多选题时此字段不使用
+        explanation: '更适合用慢动作表现的是 B、C、D，它们都包含了"瞬间细节"和"节奏变化"。'
+      }
+    ]
+  }
+
+  // 独具魅力的夜景摄影（index 5）
+  if (index === 5) {
+    return [
+      {
+        id: 3,
+        title: '互动题 4',
+        description: '（单选）你觉得下面哪句话，更接近“新手拍视频的正确思路”？',
+        options: [
+          {
+            id: 'a',
+            label: '哪里好看就拍哪里'
+          },
+          {
+            id: 'b',
+            label: '设备越贵，画面越好'
+          },
+          {
+            id: 'c',
+            label: '在合适的时间，用合适的方式拍'
+          }
+        ],
+        correctOptionId: 'c',
+        explanation: '拍摄要学会判断时间、光线和方式。'
+      }
+    ]
+  }
+
+  return []
+}
+
+//按顺序播放
+const currentVideo = computed(() => videoList[currentVideoIndex.value])
+const handleVideoChange = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+    currentNavigationStep.value = currentVideoIndex.value
+  } else {
+    status.value = true
+    return
+  }
+  nextTick(() => {
+    // 使用受控播放来触发下一个视频自动播放
+    playing.value = true
+  })
+}
+
+const handleClose = () => {
+  router.back()
+}
+
+const handlePlay = () => {}
+
+const onEnded = () => {
+  // 在指定视频结束时弹出答题
+  if (
+    currentVideoIndex.value === 1 ||
+    currentVideoIndex.value === 2 ||
+    currentVideoIndex.value === 5
+  ) {
+    playing.value = false
+    questions.value = getQuestionsForVideo(currentVideoIndex.value)
+    showQuiz.value = true
+  } else {
+    handleVideoChange()
+  }
+}
+
+// 步骤导航事件处理
+const handleStepClick = (index: number) => {
+  // 关闭答题窗口（如果打开）
+  showQuiz.value = false
+  currentVideoIndex.value = index
+  currentNavigationStep.value = index
+  nextTick(() => {
+    playing.value = true
+  })
+}
+
+const handleStepNavigationClose = () => {
+  showStepNavigation.value = false
+}
+
+// 答题完成后的处理
+const handleQuestionsComplete = () => {
+  showQuiz.value = false
+  // 答题完成后继续播放下一个视频
+  handleVideoChange()
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative bg-white/10">
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+    <!-- 步骤导航按钮 -->
+    <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"
+      @click="showStepNavigation = true"
+      title="步骤导航"
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+          d="M3 4H17M3 8H17M3 12H17M3 16H17"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </svg>
+    </button>
+
+    <Video
+      v-if="currentVideo"
+      :src="currentVideo"
+      v-model="playing"
+      :muted="false"
+      :volume="1"
+      :controls="true"
+      :hideNativeControls="true"
+      :anchors="[]"
+      @play="handlePlay"
+      @ended="onEnded"
+    >
+      <template #overlay>
+        <ImgButton
+          class="absolute right-0 top-0 z-10 pointer-events-auto"
+          :image="IMAGE_PATHS.COMPONENTS.BACK"
+          @click="handleClose"
+        />
+        <QuestionQuiz
+          v-if="showQuiz"
+          :show-question-number="false"
+          :questions="questions"
+          @complete="handleQuestionsComplete"
+        />
+      </template>
+    </Video>
+
+    <!-- 步骤导航抽屉 -->
+    <StepNavigation
+      :visible="showStepNavigation"
+      :background-image="getStaticImage('work/vlog背景全屏待定')"
+      :steps="navigationSteps"
+      :current-step-index="currentNavigationStep"
+      @step-click="handleStepClick"
+      @close="handleStepNavigationClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+video {
+  width: 100%;
+  height: 100%;
+  /* 核心：保持视频比例，多余部分被裁剪 */
+  object-fit: cover;
+}
+</style>
diff --git a/src/views/basic-elements/camera-movement/index.vue b/src/views/basic-elements/camera-movement/index.vue
new file mode 100644
index 0000000..bdbc8f8
--- /dev/null
+++ b/src/views/basic-elements/camera-movement/index.vue
@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+import { StepNavigation } from '@/components/Guide'
+import { Video } from '@/components'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+// 运镜初识 - 暂时用运镜的基本方式代替
+import video1 from '/video/new/xinshou_yunjingdejibenfangshi.mp4'
+import video2 from '/video/new/xinshou_zhengquedeshoujipaishe.mp4'
+import video3 from '/video/new/xinshou_yunjingdejibenfangshi.mp4'
+
+const router = useRouter()
+const props = defineProps<{
+  label: string
+}>()
+
+// 受控播放开关（用于切换到下一个视频时自动播放）
+const playing = ref(false)
+const status = ref(false)
+
+// 步骤导航数据
+const navigationSteps = ref([
+  // {
+  //   id: 'step1',
+  //   label: '视觉素养',
+  //   content: '运镜初识',
+  //   type: 'planning' as const
+  // },
+  {
+    id: 'step2',
+    label: '视觉素养',
+    content: '正确的手机拍摄持机姿势',
+    type: 'planning' as const
+  },
+  {
+    id: 'step3',
+    label: '视觉素养',
+    content: '运镜的基本方式',
+    type: 'planning' as const
+  }
+])
+
+// 步骤导航相关状态
+const showStepNavigation = ref(false)
+const currentNavigationStep = ref(0) // 对应视频索引，从0开始
+
+// 视频列表
+const videoList = [video2, video3]
+const currentVideoIndex = ref(0)
+
+//按顺序播放
+const currentVideo = computed(() => videoList[currentVideoIndex.value])
+const handleVideoChange = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+    currentNavigationStep.value = currentVideoIndex.value
+  } else {
+    status.value = true
+    return
+  }
+  nextTick(() => {
+    // 使用受控播放来触发下一个视频自动播放
+    playing.value = true
+  })
+}
+
+const handleClose = () => {
+  router.back()
+}
+
+const label = computed(() => props.label as string)
+
+const handlePlay = () => {}
+
+const onEnded = () => {
+  handleVideoChange()
+}
+
+// 步骤导航事件处理
+const handleStepClick = (index: number) => {
+  currentVideoIndex.value = index
+  currentNavigationStep.value = index
+  nextTick(() => {
+    playing.value = true
+  })
+}
+
+const handleStepNavigationClose = () => {
+  showStepNavigation.value = false
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative bg-white/10">
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+    <!-- 步骤导航按钮 -->
+    <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"
+      @click="showStepNavigation = true"
+      title="步骤导航"
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+          d="M3 4H17M3 8H17M3 12H17M3 16H17"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </svg>
+    </button>
+
+    <Video
+      :src="currentVideo"
+      v-model="playing"
+      :muted="false"
+      :volume="1"
+      :controls="true"
+      :hideNativeControls="true"
+      :anchors="[]"
+      @play="handlePlay"
+      @ended="onEnded"
+    >
+      <template v-slot:overlay>
+        <ImgButton
+          class="absolute right-0 top-0 z-10 pointer-events-auto"
+          :image="IMAGE_PATHS.COMPONENTS.BACK"
+          @click="handleClose"
+        />
+      </template>
+    </Video>
+
+    <!-- 步骤导航抽屉 -->
+    <StepNavigation
+      :visible="showStepNavigation"
+      :background-image="getStaticImage('work/vlog背景全屏待定')"
+      :steps="navigationSteps"
+      :current-step-index="currentNavigationStep"
+      @step-click="handleStepClick"
+      @close="handleStepNavigationClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+video {
+  width: 100%;
+  height: 100%;
+  /* 核心：保持视频比例，多余部分被裁剪 */
+  object-fit: cover;
+}
+</style>
diff --git a/src/views/basic-elements/composition/index.vue b/src/views/basic-elements/composition/index.vue
new file mode 100644
index 0000000..ba3df1c
--- /dev/null
+++ b/src/views/basic-elements/composition/index.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+import { StepNavigation } from '@/components/Guide'
+import { Video } from '@/components'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import video1 from '/video/new/xsdh_rhxzgt_batch.mp4'
+import video2 from '/video/new/xsdh_jzgtf_batch.mp4'
+
+const router = useRouter()
+const props = defineProps<{
+  label: string
+}>()
+
+// 受控播放开关（用于切换到下一个视频时自动播放）
+const playing = ref(false)
+const status = ref(false)
+
+// 步骤导航数据
+const navigationSteps = ref([
+  {
+    id: 'step1',
+    label: '视觉素养',
+    content: '如何选择构图',
+    type: 'planning' as const
+  },
+  {
+    id: 'step2',
+    label: '视觉素养',
+    content: '九种经典构图方式',
+    type: 'planning' as const
+  }
+])
+
+// 步骤导航相关状态
+const showStepNavigation = ref(false)
+const currentNavigationStep = ref(0) // 对应视频索引，从0开始
+
+// 视频列表
+const videoList = [video1, video2]
+const currentVideoIndex = ref(0)
+
+//按顺序播放
+const currentVideo = computed(() => videoList[currentVideoIndex.value])
+const handleVideoChange = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+    currentNavigationStep.value = currentVideoIndex.value
+  } else {
+    status.value = true
+    return
+  }
+  nextTick(() => {
+    // 使用受控播放来触发下一个视频自动播放
+    playing.value = true
+  })
+}
+
+const handleClose = () => {
+  router.back()
+}
+
+const label = computed(() => props.label as string)
+
+const handlePlay = () => {}
+
+const onEnded = () => {
+  handleVideoChange()
+}
+
+// 步骤导航事件处理
+const handleStepClick = (index: number) => {
+  currentVideoIndex.value = index
+  currentNavigationStep.value = index
+  nextTick(() => {
+    playing.value = true
+  })
+}
+
+const handleStepNavigationClose = () => {
+  showStepNavigation.value = false
+}
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="w-full h-full relative bg-white/10">
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+    <!-- 步骤导航按钮 -->
+    <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"
+      @click="showStepNavigation = true"
+      title="步骤导航"
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+          d="M3 4H17M3 8H17M3 12H17M3 16H17"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </svg>
+    </button>
+
+    <Video
+      :src="currentVideo"
+      v-model="playing"
+      :muted="false"
+      :volume="1"
+      :controls="true"
+      :hideNativeControls="true"
+      :anchors="[]"
+      @play="handlePlay"
+      @ended="onEnded"
+    >
+      <template v-slot:overlay>
+        <ImgButton
+          class="absolute right-0 top-0 z-10 pointer-events-auto"
+          :image="IMAGE_PATHS.COMPONENTS.BACK"
+          @click="handleClose"
+        />
+      </template>
+    </Video>
+
+    <!-- 步骤导航抽屉 -->
+    <StepNavigation
+      :visible="showStepNavigation"
+      :background-image="getStaticImage('work/vlog背景全屏待定')"
+      :steps="navigationSteps"
+      :current-step-index="currentNavigationStep"
+      @step-click="handleStepClick"
+      @close="handleStepNavigationClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+video {
+  width: 100%;
+  height: 100%;
+  /* 核心：保持视频比例，多余部分被裁剪 */
+  object-fit: cover;
+}
+</style>
diff --git a/src/views/basic-elements/light/index.vue b/src/views/basic-elements/light/index.vue
new file mode 100644
index 0000000..c184ce8
--- /dev/null
+++ b/src/views/basic-elements/light/index.vue
@@ -0,0 +1,230 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+import { StepNavigation } from '@/components/Guide'
+import { Video, QuestionQuiz, type Question } from '@/components'
+import { getStaticImage, IMAGE_PATHS } from '@/utils'
+import { GuideSteps } from '@/components/Guide'
+// 光初识 - 暂时用光的基础认知代替
+import video1 from '/video/new/xinshou_guangdejichurenzhi.mp4'
+import video2 from '/video/new/xinshou_guangdesidashuxing.mp4'
+import video3 from '/video/new/xsdh_psdhjsj_batch.mp4'
+import GuideStepsItem from '@/components/Guide/GuideStepsItem.vue'
+
+const router = useRouter()
+
+// 受控播放开关（用于切换到下一个视频时自动播放）
+const playing = ref(false)
+const status = ref(false)
+const showQuiz = ref(false) // 控制是否显示答题窗口
+
+const isGuide = ref(true)
+const currentGuideStep = ref(0)
+const handleSkip = (index: number) => {
+  currentGuideStep.value = index
+}
+
+const handleComplete = () => {
+  isGuide.value = false
+}
+
+// 步骤导航数据
+const navigationSteps = ref([
+  {
+    id: 'step2',
+    label: '光的基础',
+    content: '光的基础认知',
+    type: 'planning' as const
+  },
+  {
+    id: 'step3',
+    label: '光的属性',
+    content: '光的四大属性',
+    type: 'planning' as const
+  },
+  {
+    id: 'step4',
+    label: '拍摄技巧',
+    content: '拍摄的黄金时间',
+    type: 'planning' as const
+  }
+])
+
+// 步骤导航相关状态
+const showStepNavigation = ref(false)
+const currentNavigationStep = ref(0) // 对应视频索引，从0开始
+
+// 视频列表
+const videoList = [video1, video2, video3]
+const currentVideoIndex = ref(0)
+
+// 题目数据：拍摄的黄金时间（index 2）
+const questions = ref<Question[]>([])
+
+// 根据当前视频索引获取对应的题目
+const getQuestionsForVideo = (index: number): Question[] => {
+  // 拍摄的黄金时间（index 2）
+  if (index === 2) {
+    return [
+      {
+        id: 1,
+        title: '',
+        description: '(单选)同一条街道,在不同时间拍摄,哪一张画面更适合表现"温暖、舒服的日常感"?',
+        options: [
+          {
+            id: 'a',
+            label: '正午直射光,阴影很硬,路面反光明显'
+          },
+          {
+            id: 'b',
+            label: '傍晚低角度阳光,墙面被染成金色'
+          },
+          {
+            id: 'c',
+            label: '夜晚路灯照明,光源复杂、色温混杂'
+          }
+        ],
+        correctOptionId: 'b',
+        explanation: '光线角度越低,画面柔和,情绪放大'
+      }
+    ]
+  }
+  return []
+}
+
+//按顺序播放
+const currentVideo = computed(() => videoList[currentVideoIndex.value])
+const handleVideoChange = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+    currentNavigationStep.value = currentVideoIndex.value
+  } else {
+    status.value = true
+    return
+  }
+  nextTick(() => {
+    // 使用受控播放来触发下一个视频自动播放
+    playing.value = true
+  })
+}
+
+const handleClose = () => {
+  router.back()
+}
+
+const handlePlay = () => {
+  isGuide.value = false
+}
+
+const onEnded = () => {
+  // 检查是否是"拍摄的黄金时间"（index 2）
+  if (currentVideoIndex.value === 2) {
+    // 暂停播放并显示答题窗口
+    playing.value = false
+    questions.value = getQuestionsForVideo(currentVideoIndex.value)
+    showQuiz.value = true
+  } else {
+    // 其他视频正常切换
+    handleVideoChange()
+  }
+}
+
+// 步骤导航事件处理
+const handleStepClick = (index: number) => {
+  // 关闭答题窗口（如果打开）
+  showQuiz.value = false
+  currentVideoIndex.value = index
+  currentNavigationStep.value = index
+  nextTick(() => {
+    playing.value = true
+  })
+}
+
+const handleStepNavigationClose = () => {
+  showStepNavigation.value = false
+}
+
+// 答题完成后的处理
+const handleQuestionsComplete = () => {
+  showQuiz.value = false
+  // 答题完成后继续播放下一个视频
+  handleVideoChange()
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative bg-white/10">
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+    <!-- 步骤导航按钮 -->
+    <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"
+      @click="showStepNavigation = true"
+      title="步骤导航"
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+          d="M3 4H17M3 8H17M3 12H17M3 16H17"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </svg>
+    </button>
+
+    <Video
+      :src="currentVideo"
+      v-model="playing"
+      :muted="false"
+      :volume="1"
+      :controls="true"
+      :hideNativeControls="true"
+      :anchors="[]"
+      @play="handlePlay"
+      @ended="onEnded"
+    >
+      <template v-slot:overlay>
+        <ImgButton
+          class="absolute right-0 top-0 z-10 pointer-events-auto"
+          :image="IMAGE_PATHS.COMPONENTS.BACK"
+          @click="handleClose"
+        />
+        <QuestionQuiz
+          v-if="showQuiz"
+          :show-question-number="false"
+          :questions="questions"
+          @complete="handleQuestionsComplete"
+        />
+      </template>
+    </Video>
+
+    <!-- 步骤导航抽屉 -->
+    <StepNavigation
+      :visible="showStepNavigation"
+      :background-image="getStaticImage('work/vlog背景全屏待定')"
+      :steps="navigationSteps"
+      :current-step-index="currentNavigationStep"
+      @step-click="handleStepClick"
+      @close="handleStepNavigationClose"
+    />
+
+    <!-- 引导与高亮 -->
+
+    <GuideSteps v-if="isGuide" position-offset-y="85%" @complete="handleComplete">
+      <GuideStepsItem>光是摄影的灵魂，摄影高手一定是用光的高手</GuideStepsItem>
+    </GuideSteps>
+  </div>
+</template>
+
+<style scoped>
+video {
+  width: 100%;
+  height: 100%;
+  /* 核心：保持视频比例，多余部分被裁剪 */
+  object-fit: cover;
+}
+</style>
diff --git a/src/views/basic-elements/short-video-editing-skills/index.vue b/src/views/basic-elements/short-video-editing-skills/index.vue
new file mode 100644
index 0000000..53a4037
--- /dev/null
+++ b/src/views/basic-elements/short-video-editing-skills/index.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+import { StepNavigation } from '@/components/Guide'
+import { Video } from '@/components'
+import { getStaticImage, IMAGE_PATHS } from '@/utils'
+import video from '/video/new/xsdh_CapCut_Tutorial.mp4'
+
+const router = useRouter()
+
+// 受控播放开关（用于切换到下一个视频时自动播放）
+const playing = ref(false)
+const status = ref(false)
+
+// 步骤导航数据 - 确保content字段不包含（一）、【Q2】等标记
+const rawSteps = [
+  {
+    id: 'step2',
+    label: '剪映基础操作',
+    content: '认识剪映剪辑界面',
+    type: 'other' as const
+  },
+  {
+    id: 'step3',
+    label: '剪映基础操作',
+    content: '素材导入及调整',
+    type: 'other' as const
+  },
+  {
+    id: 'step4',
+    label: '剪映基础操作',
+    content: '比例及背景设置',
+    type: 'other' as const
+  },
+  {
+    id: 'step5',
+    label: '剪映基础操作',
+    content: '内容裁剪及组合',
+    type: 'other' as const
+  },
+  {
+    id: 'step6',
+    label: '剪映基础操作',
+    content: '音频添加及调整',
+    type: 'other' as const
+  },
+  {
+    id: 'step7',
+    label: '剪映基础操作',
+    content: '添加字幕和贴纸',
+    type: 'other' as const
+  },
+  {
+    id: 'step8',
+    label: '剪映基础操作',
+    content: '添加特效和滤镜',
+    type: 'other' as const
+  },
+  {
+    id: 'step9',
+    label: '剪映基础操作',
+    content: '添加转场和动画',
+    type: 'other' as const
+  },
+  {
+    id: 'step10',
+    label: '剪映基础操作',
+    content: '封面和视频导出',
+    type: 'other' as const
+  }
+]
+
+const navigationSteps = ref(rawSteps)
+
+// 步骤导航相关状态
+const showStepNavigation = ref(false)
+const currentNavigationStep = ref(0) // 对应视频索引，从0开始
+
+// 视频列表
+const videoList = [video, video, video, video, video, video, video, video, video]
+const currentVideoIndex = ref(0)
+
+//按顺序播放
+const currentVideo = computed(() => videoList[currentVideoIndex.value])
+const handleVideoChange = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+    currentNavigationStep.value = currentVideoIndex.value
+  } else {
+    status.value = true
+    return
+  }
+  nextTick(() => {
+    // 使用受控播放来触发下一个视频自动播放
+    playing.value = true
+  })
+}
+
+const handleClose = () => {
+  router.back()
+}
+
+const handlePlay = () => {}
+
+const onEnded = () => {
+  handleVideoChange()
+}
+
+// 步骤导航事件处理
+const handleStepClick = (index: number) => {
+  currentVideoIndex.value = index
+  currentNavigationStep.value = index
+  nextTick(() => {
+    playing.value = true
+  })
+}
+
+const handleStepNavigationClose = () => {
+  showStepNavigation.value = false
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative bg-white/10">
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+    <!-- 步骤导航按钮 -->
+    <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"
+      @click="showStepNavigation = true"
+      title="步骤导航"
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+          d="M3 4H17M3 8H17M3 12H17M3 16H17"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </svg>
+    </button>
+
+    <Video
+      v-if="currentVideo"
+      :src="currentVideo"
+      v-model="playing"
+      :muted="false"
+      :volume="1"
+      :controls="true"
+      :hideNativeControls="true"
+      :anchors="[]"
+      @play="handlePlay"
+      @ended="onEnded"
+    >
+      <template #overlay>
+        <ImgButton
+          class="absolute right-0 top-0 z-10 pointer-events-auto"
+          :image="IMAGE_PATHS.COMPONENTS.BACK"
+          @click="handleClose"
+        />
+      </template>
+    </Video>
+
+    <!-- 步骤导航抽屉 -->
+    <StepNavigation
+      :visible="showStepNavigation"
+      :background-image="getStaticImage('work/vlog背景全屏待定')"
+      :steps="navigationSteps"
+      :current-step-index="currentNavigationStep"
+      @step-click="handleStepClick"
+      @close="handleStepNavigationClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+video {
+  width: 100%;
+  height: 100%;
+  /* 核心：保持视频比例，多余部分被裁剪 */
+  object-fit: cover;
+}
+</style>
diff --git a/src/views/film/after-editing/color-practice.vue b/src/views/film/after-editing/color-practice.vue
new file mode 100644
index 0000000..2108d32
--- /dev/null
+++ b/src/views/film/after-editing/color-practice.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { IMAGE_PATHS, getStaticImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { useRouter } from 'vue-router'
+import { Video } from '@/components'
+import { getPublicPath } from '@/utils'
+
+const router = useRouter()
+
+const back = () => {
+  router.back()
+}
+</script>
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="back"
+    />
+    <!-- 背景 -->
+    <img class="absolute inset-0" :src="getStaticImage('film/img/背景.png')" alt="" />
+
+    <!-- 标题 -->
+    <img class="absolute top-5 z-10" :src="getStaticImage('film/img/调色-标题.png')" alt="" />
+
+    <!-- 内容 -->
+    <div class="relative h-full pt-28 overflow-y-scroll">
+      <img :src="getStaticImage('film/img/调色.png')" alt="" />
+
+      <div class="absolute top-[6250px] left-36 w-[1670px] h-[1000px] rounded-2xl overflow-hidden">
+        <Video
+          :src="getPublicPath('video/editing/color_jianji_batch.mp4')"
+          playsinline
+          controls
+          :muted="false"
+          :volume="1"
+        />
+      </div>
+
+      <ImgButton
+        class="absolute top-[7830px] left-[51.5%] -translate-x-1/2"
+        image="after-editing/color/调色实践"
+        @click="router.push({ name: 'FilmColor' })"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/views/film/after-editing/color.vue b/src/views/film/after-editing/color.vue
new file mode 100644
index 0000000..65ac15d
--- /dev/null
+++ b/src/views/film/after-editing/color.vue
@@ -0,0 +1,312 @@
+<script lang="ts" setup>
+import router from '@/router'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { ref } from 'vue'
+import ImageFilter from '@/components/ImageFilter/ImageFilter.vue'
+import { useFilmStore } from '@/stores'
+
+const selected = ref<number | undefined>(1)
+const btnState = ref(false)
+const screenshot = ref()
+const showModal = ref(false)
+const activeTab = ref<'color' | 'filter'>('color') // 'color' | 'filter'
+
+const adjustmentList = ref([
+  { name: '亮度', value: 0, min: -100, max: 100 },
+  { name: '对比度', value: 0, min: -100, max: 100 },
+  { name: '饱和度', value: 0, min: -100, max: 100 },
+  { name: '曝光', value: 0, min: -100, max: 100 },
+  { name: '色调', value: 0, min: 0, max: 100 },
+  { name: '锐化', value: 0, min: 0, max: 100 },
+  { name: '模糊', value: 0, min: 0, max: 100 }
+])
+
+const colorBarList = ref([
+  { id: 1, name: '原图', filter: 'none' },
+  { id: 2, name: '暖阳', filter: 'saturate(2.5) contrast(2.1)' },
+  { id: 3, name: '冷调', filter: 'hue-rotate(180deg) contrast(0.9)' },
+  { id: 4, name: '复古', filter: 'sepia(0.6) contrast(1.2) brightness(0.9)' },
+  { id: 5, name: '黑白', filter: 'grayscale(1)' },
+  { id: 6, name: '鲜艳', filter: 'sepia(0.1) saturate(2.5) contrast(2.1) brightness(1)' }
+])
+
+// 获取指定参数的值
+// 获取指定参数的值
+const imageFilterRef = ref<InstanceType<typeof ImageFilter> | null>(null)
+
+// 获取指定参数的值
+const getVal = (name: string) => {
+  const val = adjustmentList.value.find(item => item.name === name)?.value || 0
+  return Number(val)
+}
+
+// 更新滤镜效果
+const updateFilter = () => {
+  if (!imageFilterRef.value) return
+
+  // 如果开启了对比模式（显示原图），则不应用任何滤镜
+  if (btnState.value) {
+    imageFilterRef.value.setOptions({
+      brightness: 0,
+      contrast: 0,
+      saturation: 0,
+      exposure: 0,
+      hue: 0,
+      blur: 0,
+      sharpen: 0,
+      filter: 'none'
+    })
+    return
+  }
+
+  const selectedFilter = colorBarList.value.find(v => v.id === selected.value)?.filter || 'none'
+
+  imageFilterRef.value.setOptions({
+    brightness: getVal('亮度'),
+    contrast: getVal('对比度'),
+    saturation: getVal('饱和度'),
+    exposure: getVal('曝光'),
+    hue: getVal('色调'),
+    blur: getVal('模糊'),
+    sharpen: getVal('锐化'),
+    filter: selectedFilter
+  })
+}
+
+const changeOriginalImgae = () => {
+  btnState.value = !btnState.value
+  updateFilter()
+}
+
+// Tab 切换处理
+const handleTabChange = (tab: 'color' | 'filter') => {
+  activeTab.value = tab
+  // 切换时重置所有参数
+  handleReset()
+}
+
+// 重置所有参数
+const handleReset = () => {
+  adjustmentList.value.forEach(item => (item.value = 0))
+  selected.value = 1
+  updateFilter()
+}
+
+// 生成图片
+const handleGenerate = async () => {
+  if (!imageFilterRef.value) return
+
+  try {
+    const dataUrl = await imageFilterRef.value.generate()
+    screenshot.value = dataUrl
+    showModal.value = true
+  } catch (error) {
+    console.error('生成图片失败:', error)
+  }
+}
+
+const handleModalClose = () => {
+  showModal.value = false
+  screenshot.value = null
+}
+
+const handleTryOther = () => {
+  showModal.value = false
+}
+
+const handleFinish = () => {
+  useFilmStore().setFilmUnlockProgress(4)
+
+  router.push({
+    name: 'Film'
+  })
+}
+
+const handleClose = () => {
+  router.back()
+}
+
+const changeColor = (item: { id: number; name: string }) => {
+  selected.value = item.id
+  updateFilter()
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative pt-44">
+    <!-- 返回 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+
+    <!-- 背景图片-center -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{
+        backgroundImage: getBackgroundImage('after-editing/color/底图')
+      }"
+    ></div>
+
+    <div class="flex h-[759px] justify-center space-x-12">
+      <!-- 效果图 -->
+      <div
+        class="relative w-[1273px] h-[732px] bg-no-repeat bg-cover mt-10 p-2 pb-[26px] pr-[26px]"
+        :style="{ backgroundImage: getBackgroundImage('after-editing/color/图片框.png') }"
+      >
+        <ImageFilter ref="imageFilterRef" :src="getStaticImage('after-editing/color/film_img')" />
+
+        <!-- 开启对比 -->
+        <ImgButton
+          class="absolute top-2 right-6 flex-[0_0_200px]"
+          @click="changeOriginalImgae"
+          :image="
+            btnState
+              ? 'after-editing/color/开启对比 - 可开启'
+              : 'after-editing/color/开启对比 - 不可开启'
+          "
+        ></ImgButton>
+      </div>
+
+      <!-- 滤镜/参数配置 -->
+      <div>
+        <div
+          class="w-[445px] h-[759px] bg-no-repeat bg-cover p-2 rounded-xl"
+          :style="{ backgroundImage: getBackgroundImage('after-editing/color/小底板') }"
+        >
+          <!-- tab切换 -->
+          <header class="flex h-[75px] items-center justify-center space-x-4">
+            <div @click="handleTabChange('color')">
+              <ImgButton
+                :image="
+                  activeTab !== 'color'
+                    ? 'after-editing/color/调色-暗'
+                    : 'after-editing/color/调色-亮'
+                "
+              />
+            </div>
+            <div @click="handleTabChange('filter')">
+              <ImgButton
+                :image="
+                  activeTab !== 'filter'
+                    ? 'after-editing/color/滤镜-暗'
+                    : 'after-editing/color/滤镜-亮'
+                "
+              />
+            </div>
+          </header>
+          <!-- tab-content -->
+          <div class="px-4 h-[calc(100%-75px)]">
+            <!-- 调色内容 -->
+            <div
+              v-show="activeTab === 'color'"
+              class="space-y-6 h-full overflow-y-auto custom-scrollbar pt-4"
+            >
+              <div v-for="item in adjustmentList" :key="item.name" class="px-2">
+                <div class="flex justify-between text-[#648ab2] text-2xl font-bold mb-2">
+                  <span>{{ item.name }}</span>
+                  <span>{{ item.value }}</span>
+                </div>
+                <input
+                  type="range"
+                  v-model.number="item.value"
+                  :min="item.min"
+                  :max="item.max"
+                  @change="updateFilter"
+                  class="w-full h-3 bg-[#b8cfe7] rounded-lg appearance-none cursor-pointer slider-thumb"
+                />
+              </div>
+            </div>
+
+            <!-- 滤镜内容 -->
+            <div
+              v-show="activeTab === 'filter'"
+              class="space-y-10 h-full overflow-y-auto custom-scrollbar pt-10"
+            >
+              <div
+                v-for="item in colorBarList"
+                :key="item.id"
+                :style="{
+                  backgroundImage:
+                    selected == item.id
+                      ? getBackgroundImage('after-editing/color/滤镜-选中')
+                      : getBackgroundImage('after-editing/color/滤镜-未选中')
+                }"
+                :class="[
+                  'mx-auto w-[373px] h-[62px] text-white text-2xl font-bold flex items-center justify-center cursor-pointer bg-no-repeat bg-contain bg-center transition-all hover:scale-105',
+                  selected !== item.id && 'text-gray-700'
+                ]"
+                @click="changeColor(item)"
+              >
+                <span>{{ item.name }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-around mt-4">
+          <!-- 重置 -->
+          <ImgButton image="after-editing/color/重置" @click="handleReset" />
+          <!-- 生成 -->
+          <ImgButton image="after-editing/color/生成" @click="handleGenerate" />
+        </div>
+      </div>
+    </div>
+
+    <!-- title -->
+    <img class="absolute top-0 left-0" :src="getStaticImage('after-editing/color/标题-调色实践')" />
+
+    <!-- 回到顶部按钮 - 最后一页显示 -->
+    <p class="absolute left-40 bottom-10 flex items-center">
+      <img class="rotate-0 w-28 mr-4" src="@/assets/svg/deng.svg" />
+      <span class="text-white text-2xl font-bold"
+        >推荐参数：亮度 90、对比度 100、饱和度 100、曝光 - 90、色调 0、锐化 100、模糊 0</span
+      >
+    </p>
+
+    <!-- 保存图片弹窗 -->
+    <Overlay :visible="showModal" @close="handleModalClose">
+      <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
+        <!-- 截图内容 -->
+        <div class="bg-white p-2 rounded-md -rotate-6">
+          <img :src="screenshot" alt="调色结果" />
+        </div>
+        <!-- <img :src="screenshot" alt="调色结果" class="max-w-full max-h-full object-contain rotate-2" /> -->
+        <!-- 操作按钮 -->
+        <div class="absolute bottom-1/2 -left-1/3 translate-y-1/2">
+          <ImgButton image="after-editing/color/按钮-试试其他调色" @click="handleTryOther" />
+        </div>
+        <div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
+          <ImgButton image="after-editing/color/按钮-结束调色实践" @click="handleFinish" />
+        </div>
+      </div>
+    </Overlay>
+  </div>
+</template>
+
+<style scoped>
+/* 自定义滑块样式 */
+.slider-thumb::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 34px;
+  height: 34px;
+  background: #92c6f2;
+  border: 3px solid #ffffff;
+  border-radius: 4px;
+  cursor: pointer;
+  box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.4);
+}
+
+.slider-thumb::-moz-range-thumb {
+  width: 34px;
+  height: 34px;
+  background: #92c6f2;
+  border: 3px solid #ffffff;
+  border-radius: 4px;
+  cursor: pointer;
+  box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.4);
+}
+</style>
diff --git a/src/views/film/after-editing/editing/association.vue b/src/views/film/after-editing/editing/association.vue
new file mode 100644
index 0000000..d038675
--- /dev/null
+++ b/src/views/film/after-editing/editing/association.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video } from '@/components'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 关联剪辑视频 URL（暂时用其他视频代替）
+const associationVideoUrl = getPublicPath('video/on-site/dygmk_gljj_batch.mp4')
+
+// 视频播放状态
+const videoPlaying = ref(false)
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 视频播放区域 -->
+    <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+      <Video
+        class="w-full h-full"
+        :src="associationVideoUrl"
+        v-model="videoPlaying"
+        :muted="false"
+        :volume="1"
+        :controls="true"
+        :hideNativeControls="true"
+        :autoplay="true"
+        :show-center-play-icon="true"
+      />
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/film/after-editing/editing/continuity.vue b/src/views/film/after-editing/editing/continuity.vue
new file mode 100644
index 0000000..2106a61
--- /dev/null
+++ b/src/views/film/after-editing/editing/continuity.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video } from '@/components'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 连续剪辑视频 URL（暂时用其他视频代替）
+const continuityVideoUrl = getPublicPath('video/on-site/dygmk_lxjj_batch.mp4')
+
+// 视频播放状态
+const videoEnded = ref(false)
+const videoPlaying = ref(false)
+const showSummary = ref(false)
+
+// 视频播放完成
+const handleVideoEnded = () => {
+  videoEnded.value = true
+  showSummary.value = true
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 视频播放区域 -->
+    <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+      <Video
+        class="w-full h-full"
+        :src="continuityVideoUrl"
+        v-model="videoPlaying"
+        :muted="false"
+        :volume="1"
+        :controls="true"
+        :hideNativeControls="true"
+        :autoplay="true"
+        :show-center-play-icon="true"
+        @ended="handleVideoEnded"
+      >
+      </Video>
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/film/after-editing/editing/cut.vue b/src/views/film/after-editing/editing/cut.vue
new file mode 100644
index 0000000..25703f0
--- /dev/null
+++ b/src/views/film/after-editing/editing/cut.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video } from '@/components'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 切块视频 URL（暂时用其他视频代替）
+const cutVideoUrl = getPublicPath('video/on-site/dygmk_kq_batch.mp4')
+
+// 视频播放状态
+const videoPlaying = ref(false)
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 视频播放区域 -->
+    <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+      <Video
+        class="w-full h-full"
+        :src="cutVideoUrl"
+        v-model="videoPlaying"
+        :muted="false"
+        :volume="1"
+        :controls="true"
+        :hideNativeControls="true"
+        :autoplay="true"
+        :show-center-play-icon="true"
+      />
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/film/after-editing/editing/index.vue b/src/views/film/after-editing/editing/index.vue
new file mode 100644
index 0000000..e84acae
--- /dev/null
+++ b/src/views/film/after-editing/editing/index.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Video } from '@/components'
+
+const router = useRouter()
+
+const handleClose = () => {
+  router.back()
+}
+
+// 剪辑介绍视频 URL（暂时用其他视频代替）
+const introVideoUrl = getPublicPath('video/on-site/xianchangpaishe_yanshipaishe.mp4')
+
+// 视频播放状态
+const videoEnded = ref(true)
+const videoPlaying = ref(false)
+
+// 视频播放完成
+const handleVideoEnded = () => {
+  videoEnded.value = true
+}
+
+const goStart = () => {
+  router.push({ name: 'FilmEditingStart' })
+}
+
+const goRhythm = () => {
+  router.push({ name: 'FilmEditingRhythm' })
+}
+
+const goSoundTransition = () => {
+  router.push({ name: 'FilmEditingSoundTransition' })
+}
+
+const goCut = () => {
+  router.push({ name: 'FilmEditingCut' })
+}
+
+const goAssociation = () => {
+  router.push({ name: 'FilmEditingAssociation' })
+}
+
+const goContinuity = () => {
+  router.push({ name: 'FilmEditingContinuity' })
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 视频播放区域 -->
+    <div v-if="!videoEnded" class="absolute inset-0 flex items-center justify-center">
+      <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+        <Video
+          class="w-full h-full"
+          :src="introVideoUrl"
+          v-model="videoPlaying"
+          :muted="false"
+          :volume="1"
+          :controls="true"
+          :hideNativeControls="true"
+          :autoplay="true"
+          :show-center-play-icon="true"
+          @ended="handleVideoEnded"
+        />
+      </div>
+    </div>
+
+    <!-- 内容卡片 + 按钮 -->
+    <div
+      v-if="videoEnded"
+      class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none"
+    >
+      <div
+        class="max-w-screen-2xl w-full bg-black/35 rounded-3xl border border-white/15 p-16 space-y-10 text-white pointer-events-auto"
+      >
+        <div class="flex items-baseline justify-between gap-6">
+          <h1 class="text-5xl font-extrabold tracking-wide">剪辑</h1>
+          <!-- <span class="text-3xl opacity-80">从不同维度练习你的剪辑技巧</span> -->
+        </div>
+        <p class="text-2xl leading-8 opacity-90">
+          选择下面任意一个练习模块，进入对应的剪辑场景，按提示完成小任务，逐步建立自己的剪辑手感和创作节奏。
+        </p>
+
+        <div class="grid grid-cols-3 gap-10">
+          <button type="button" class="onsite-btn" @click="goStart">
+            <span class="onsite-btn-title">剪辑从哪里开始</span>
+            <span class="onsite-btn-desc">通过不同的剪辑起点，营造不同的叙事效果。</span>
+          </button>
+          <button type="button" class="onsite-btn" @click="goRhythm">
+            <span class="onsite-btn-title">节奏型剪辑</span>
+            <span class="onsite-btn-desc">通过剪辑节奏控制画面节奏，营造紧张感或舒缓感。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goSoundTransition">
+            <span class="onsite-btn-title">声音转场</span>
+            <span class="onsite-btn-desc">利用相似声音连接不同场景，实现自然的转场效果。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goCut">
+            <span class="onsite-btn-title">快切</span>
+            <span class="onsite-btn-desc">通过精准的切块技巧，提升画面的节奏感和连贯性。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goAssociation">
+            <span class="onsite-btn-title">关联剪辑</span>
+            <span class="onsite-btn-desc">通过画面元素的关联性，建立场景之间的逻辑联系。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goContinuity">
+            <span class="onsite-btn-title">连续剪辑</span>
+            <span class="onsite-btn-desc">保持动作和空间的连续性，让画面过渡更加自然流畅。</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 关闭 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+.onsite-btn {
+  @apply relative flex flex-col items-start backdrop-blur-md rounded-2xl px-10 py-8 text-left bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/30 transition-all duration-200 cursor-pointer;
+}
+
+.onsite-btn-title {
+  @apply text-4xl font-bold mb-4;
+}
+
+.onsite-btn-desc {
+  @apply text-2xl leading-9 opacity-80;
+}
+</style>
diff --git a/src/views/film/after-editing/editing/rhythm.vue b/src/views/film/after-editing/editing/rhythm.vue
new file mode 100644
index 0000000..9833ec2
--- /dev/null
+++ b/src/views/film/after-editing/editing/rhythm.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video } from '@/components'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 节奏型剪辑视频 URL（暂时用其他视频代替）
+const rhythmVideoUrl = getPublicPath('video/on-site/dygmk_jzxjj_batch.mp4')
+
+// 视频播放状态
+const videoPlaying = ref(false)
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 视频播放区域 -->
+    <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+      <Video
+        class="w-full h-full"
+        :src="rhythmVideoUrl"
+        v-model="videoPlaying"
+        :muted="false"
+        :volume="1"
+        :controls="true"
+        :hideNativeControls="true"
+        :autoplay="true"
+        :show-center-play-icon="true"
+      />
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/film/after-editing/editing/sound-transition.vue b/src/views/film/after-editing/editing/sound-transition.vue
new file mode 100644
index 0000000..0e8630e
--- /dev/null
+++ b/src/views/film/after-editing/editing/sound-transition.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video, QuestionQuiz, type Question } from '@/components'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 声音转场视频 URL（暂时用其他视频代替）
+const soundTransitionVideoUrl = getPublicPath(
+  'video/on-site/xianchangpaishe_shengyingzhuanchang1.mp4'
+)
+// const soundTransitionVideoUrl2 = getPublicPath('video/on-site/xianchangpaishe_yanshipaishe.mp4')
+const soundTransitionVideoUrl3 = getPublicPath(
+  'video/on-site/xianchangpaishe_shengyingzhuanchang3.mp4'
+)
+
+// 视频播放状态
+const videoEnded = ref(false)
+const videoPlaying = ref(false)
+const showQuiz = ref(false)
+const showVerification = ref(false)
+
+// 视频播放完成
+const handleVideoEnded = () => {
+  videoEnded.value = true
+  showQuiz.value = true
+}
+
+// 交互一 & 交互二：选择题
+const questions = ref<Question[]>([
+  {
+    id: 1,
+    title: '画面感受判断',
+    description: '播放视频，听听看，你觉得这个声音，像是用来结束一段画面，还是开启一段新的内容？',
+    options: [
+      { id: 'a', label: '开始' },
+      { id: 'b', label: '结束' }
+    ],
+    correctOptionId: '', // 引导题，无对错
+    mediaSrc: soundTransitionVideoUrl
+  },
+  {
+    id: 2,
+    title: '方法选择',
+    description: '如果下一个画面是火车相关内容，哪种方式更自然？',
+    options: [
+      { id: 'a', label: '直接切画面' },
+      { id: 'b', label: '用相似声音连接' },
+      { id: 'c', label: '用字幕说明' }
+    ],
+    correctOptionId: 'b',
+    mediaSrc: 'film/on-site/声音转场jh_2.png'
+  }
+])
+
+// 答题完成
+const handleQuestionsComplete = () => {
+  showQuiz.value = false
+  showVerification.value = true
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 视频播放区域 -->
+    <!-- <div
+      v-if="!showVerification"
+      class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20"
+    >
+      <Video
+        class="w-full h-full"
+        :src="soundTransitionVideoUrl"
+        v-model="videoPlaying"
+        :muted="false"
+        :volume="1"
+        :controls="true"
+        :hideNativeControls="true"
+        :autoplay="true"
+        :show-center-play-icon="true"
+        @ended="handleVideoEnded"
+      >
+        <template #overlay>
+        </template>
+      </Video>
+    </div> -->
+    <QuestionQuiz
+      v-if="!showVerification"
+      :questions="questions"
+      @complete="handleQuestionsComplete"
+    />
+
+    <!-- 交互三：结果验证 -->
+    <div
+      v-if="showVerification"
+      class="absolute inset-0 flex items-center justify-center px-20 pointer-events-none"
+    >
+      <div
+        class="max-w-[1100px] w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-16 space-y-10 text-white pointer-events-auto"
+      >
+        <h2 class="text-4xl font-bold mb-4 leading-relaxed">结果验证</h2>
+        <div class="rounded-2xl overflow-hidden border border-white/20 bg-black/60 min-h-[500px]">
+          <Video
+            class="w-full h-full"
+            :src="soundTransitionVideoUrl3"
+            playsinline
+            controls
+            :muted="false"
+            :volume="1"
+          />
+        </div>
+        <div class="mt-6 p-6 rounded-xl bg-amber-500/20 border border-amber-400/30">
+          <div class="text-xl font-semibold text-amber-300 mb-2">提示语：</div>
+          <div class="text-lg text-amber-100 leading-relaxed">
+            <p>相似的声音，</p>
+            <p>帮助观众在不知不觉中</p>
+            <p>完成了场景与叙事的转换。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/film/after-editing/editing/start.vue b/src/views/film/after-editing/editing/start.vue
new file mode 100644
index 0000000..49cf350
--- /dev/null
+++ b/src/views/film/after-editing/editing/start.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video } from '@/components'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 连续剪辑视频 URL（暂时用其他视频代替）
+const continuityVideoUrl = getPublicPath('video/on-site/dygmk_jjcnlks_batch.mp4')
+
+// 视频播放状态
+const videoEnded = ref(false)
+const videoPlaying = ref(false)
+
+// 视频播放完成
+const handleVideoEnded = () => {
+  videoEnded.value = true
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 视频播放区域 -->
+    <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+      <Video
+        class="w-full h-full"
+        :src="continuityVideoUrl"
+        v-model="videoPlaying"
+        :muted="false"
+        :volume="1"
+        :controls="true"
+        :hideNativeControls="true"
+        :autoplay="true"
+        :show-center-play-icon="true"
+        @ended="handleVideoEnded"
+      >
+      </Video>
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/film/after-editing/export-publish/index.vue b/src/views/film/after-editing/export-publish/index.vue
new file mode 100644
index 0000000..a3891b8
--- /dev/null
+++ b/src/views/film/after-editing/export-publish/index.vue
@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div></div>
+</template>
diff --git a/src/views/film/after-editing/sound-effect/index.vue b/src/views/film/after-editing/sound-effect/index.vue
new file mode 100644
index 0000000..b8c15d5
--- /dev/null
+++ b/src/views/film/after-editing/sound-effect/index.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { IMAGE_PATHS, getPublicPath, getStaticImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Video } from '@/components'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const back = () => {
+  // 返回上一页
+  router.back()
+}
+</script>
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="back"
+    />
+    <!-- 背景 -->
+    <img class="absolute inset-0" :src="getStaticImage('film/img/背景.png')" alt="" />
+
+    <!-- 标题 -->
+    <img class="absolute top-5 z-10" :src="getStaticImage('film/img/音效-标题.png')" alt="" />
+
+    <!-- 内容 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none]  -->
+    <div class="relative h-full pt-28 overflow-y-scroll">
+      <img :src="getStaticImage('film/img/音效.png')" alt="" />
+
+      <div class="absolute top-[3850px] left-64 w-[1450px] h-[1000px] rounded-2xl overflow-hidden">
+        <Video
+          :src="getPublicPath('video/editing/yingxiao_batch.mp4')"
+          playsinline
+          controls
+          :volume="1"
+          :muted="false"
+        />
+      </div>
+
+      <div class="absolute top-[480px] left-[12%] w-[840px]">
+        <Video
+          :src="getPublicPath('video/editing/yingxiao_wu.mp4')"
+          playsinline
+          controls
+          :volume="1"
+          :muted="false"
+        />
+      </div>
+
+      <div class="absolute top-[1900px] left-[18.5%] w-[1250px]">
+        <Video
+          :src="getPublicPath('video/editing/yingxiao_you.mp4')"
+          playsinline
+          controls
+          :volume="1"
+          :muted="false"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/views/film/components/menu.vue b/src/views/film/components/menu.vue
new file mode 100644
index 0000000..98d45b1
--- /dev/null
+++ b/src/views/film/components/menu.vue
@@ -0,0 +1,178 @@
+<script lang="tsx" setup>
+import { getStaticImage } from '@/utils'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { getBackgroundImage } from '@/utils'
+defineOptions({ name: 'FilmMenu' })
+
+/**
+ * 菜单项 （前期准备、中期拍摄、后期剪辑）
+ * 前期准备-资源筹备、创意构想、脚本撰写、分镜制作
+ * 中期拍摄-设备准备、实地取景、现场拍摄
+ * 后期剪辑-素材管理、剪辑、调色、导出发布
+ */
+const category = ref([
+  {
+    label: '前期准备',
+    value: 1,
+    icon: getStaticImage('midterm/准备图标.png')
+  },
+  {
+    label: '中期拍摄',
+    value: 2,
+    icon: getStaticImage('midterm/拍摄图标.png')
+  },
+  {
+    label: '后期剪辑',
+    value: 3,
+    icon: getStaticImage('midterm/剪辑图标.png')
+  }
+])
+const menuItems = ref([
+  {
+    label: '资源筹备',
+    routeName: 'FilmResource',
+    parentValue: 1,
+    disabled: false
+  },
+  {
+    label: '创意构想',
+    routeName: 'FilmCreative',
+    parentValue: 1,
+    disabled: false
+  },
+  {
+    label: '脚本撰写',
+    routeName: 'FilmScriptWriting',
+    parentValue: 1,
+    disabled: false
+  },
+  {
+    label: '分镜制作',
+    routeName: 'FilmStoryboard',
+    parentValue: 1,
+    disabled: false
+  },
+  {
+    label: '设备准备',
+    routeName: 'FilmMidtermEquipment',
+    parentValue: 2,
+    disabled: false
+  },
+  {
+    label: '实地取景',
+    routeName: 'FilmMidtermShooting',
+    parentValue: 2,
+    disabled: false
+  },
+  {
+    label: '现场拍摄',
+    routeName: 'FilmOnsiteShooting',
+    parentValue: 2,
+    disabled: false
+  },
+  {
+    label: '素材管理',
+    routeName: 'Film素材管理',
+    parentValue: 3,
+    disabled: true
+  },
+  {
+    label: '剪辑',
+    routeName: 'FilmEditing',
+    parentValue: 3,
+    disabled: false
+  },
+  {
+    label: '调色',
+    routeName: 'FilmColorPractice',
+    parentValue: 3,
+    disabled: false
+  },
+  //音效
+  {
+    label: '音效',
+    routeName: 'FilmSoundEffect',
+    parentValue: 3,
+    disabled: false
+  },
+  {
+    label: '导出发布',
+    routeName: 'FilmExportPublish',
+    parentValue: 3,
+    disabled: false
+  }
+])
+
+const props = defineProps<{
+  currentStep: number
+}>()
+
+const router = useRouter()
+
+const currentParentValue = computed<number>(() => {
+  return props.currentStep
+}) // 当前选中的父级菜单项
+
+const currentItemValue = ref<string>('') // 当前选中的子级菜单项
+
+const getMenuItems = computed(() => {
+  return menuItems.value.filter(item => item.parentValue === currentParentValue.value)
+})
+
+const handleItemClick = (item: { routeName: string; disabled: boolean }) => {
+  if (item.disabled) return
+  currentItemValue.value = item.routeName
+  router.push({ name: item.routeName })
+}
+</script>
+
+<template>
+  <div class="absolute left-20 top-0 bottom-0 w-[520px] pt-28" v-if="currentStep">
+    <!-- 分类名称 -->
+    <div class="absolute top-3 left-24 flex items-center space-x-2">
+      <span class="text-4xl text-[#fbbf24] font-black">{{
+        category[currentParentValue - 1].label
+      }}</span>
+      <img class="filter-blue" :src="category[currentParentValue - 1].icon" alt="" />
+    </div>
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-left bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage('components/menu-bg.png') }"
+    ></div>
+    <div class="flex items-center flex-col pl-[60px]">
+      <template v-for="(item, index) in getMenuItems" :key="item.routeName">
+        <div
+          class="relative w-[373px] h-[143px] pl-14 flex items-center justify-center group text-4xl font-black transition-colors"
+          :class="[
+            currentItemValue === item.routeName ? 'text-blue-400' : 'text-white',
+            item.disabled ? 'opacity-20 cursor-not-allowed' : 'cursor-pointer'
+          ]"
+          :style="{ marginLeft: -index * 40 + 'px' }"
+          @click="handleItemClick(item)"
+        >
+          <div
+            v-if="!item.disabled"
+            class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+            :style="{ backgroundImage: getBackgroundImage('components/menu-hover.png') }"
+          ></div>
+          <span :class="[!item.disabled ? 'menu-glow-text' : '']">{{ item.label }}</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.filter-blue {
+  filter: brightness(0) saturate(100%) invert(79%) sepia(29%) saturate(1190%) hue-rotate(330deg)
+    brightness(102%) contrast(98%);
+}
+
+.menu-glow-text {
+  text-shadow:
+    0 0 40px rgba(0, 180, 255, 0.9),
+    0 0 20px rgba(0, 180, 255, 0.7);
+}
+</style>
diff --git a/src/views/film/creative/index.vue b/src/views/film/creative/index.vue
new file mode 100644
index 0000000..d87d8a7
--- /dev/null
+++ b/src/views/film/creative/index.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { IMAGE_PATHS, getStaticImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { useRouter } from 'vue-router'
+import { useScale } from '@/composables/useScale'
+import { ImagePreview } from '@/components'
+
+const router = useRouter()
+
+const back = () => {
+  router.back()
+}
+
+const { scale, offsetX, offsetY } = useScale()
+
+const handleOpenImages = () => {
+  ImagePreview({
+    images: [getStaticImage('film/创意构想-拍摄大纲')],
+    startIndex: 0,
+    maskClosable: true,
+    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
+  })
+}
+</script>
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="back"
+    />
+    <!-- 背景 -->
+    <img class="absolute inset-0" :src="getStaticImage('film/img/背景.png')" alt="" />
+
+    <!-- 标题 -->
+    <img class="absolute top-5 z-10" :src="getStaticImage('film/img/创意构想-标题.png')" alt="" />
+
+    <!-- 内容 -->
+    <div class="relative h-full pt-28 overflow-y-scroll">
+      <img :src="getStaticImage('film/img/创意构想.png')" alt="" />
+
+      <button
+        class="absolute top-[4060px] left-1/2 -translate-x-1/2 w-[240px] h-[80px]"
+        @click="handleOpenImages"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/views/film/index.vue b/src/views/film/index.vue
new file mode 100644
index 0000000..ac4f67a
--- /dev/null
+++ b/src/views/film/index.vue
@@ -0,0 +1,116 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+
+import { computed, onMounted, ref } from 'vue'
+import { ProgressBar, Overlay } from '@/components'
+import { useRouter } from 'vue-router'
+import { useFilmStore } from '@/stores'
+import FilmMenu from './components/menu.vue'
+
+const router = useRouter()
+const film = useFilmStore()
+const visible = ref(false)
+
+const currentStep = computed(() => film.FilmUnlockProgress)
+
+const handleComplete = () => {
+  // console.log('完成前置条件')
+  // 处理完成逻辑
+  router.push({ name: 'FilmPractice' })
+}
+
+const handleStepChange = (step: number) => {
+  // 处理步骤变化逻辑
+  film.setFilmUnlockProgress(step)
+  visible.value = true
+}
+
+const handleWorkClick = () => {
+  console.log('任务取景按钮点击')
+  // 处理任务取景按钮点击逻辑
+  router.push({ name: 'FilmWork' })
+}
+
+const handleClose = () => {
+  router.push({ name: 'Action' })
+}
+
+onMounted(() => {
+  if (currentStep.value !== 0 && currentStep.value !== 4) {
+    visible.value = true
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-full relative">
+    <!-- 背景图片-center -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage('film/电影模块背景') }"
+    ></div>
+
+    <!-- 关闭 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+      @click="handleClose"
+    />
+
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG) }"
+    ></div>
+
+    <!-- 标题 -->
+    <div class="absolute top-2 left-1/2 -translate-x-1/2">
+      <ImgButton image="film/电影-创作与表达" />
+    </div>
+
+    <!-- 任务取景按钮 -->
+    <div
+      class="absolute left-24 top-24"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
+    >
+      <ImgButton
+        :image="currentStep === 4 ? IMAGE_PATHS.VLOG.TASK_BTN_OK : IMAGE_PATHS.VLOG.TASK_BTN"
+        @click="handleWorkClick"
+      />
+    </div>
+
+    <!-- 引导任务 -->
+    <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" />
+
+    <Overlay content-class="w-full h-full" :visible="visible && currentStep < 4">
+      <!-- 关闭按钮 -->
+      <ImgButton
+        class="absolute right-0 top-0 z-20"
+        :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+        @click="visible = false"
+      />
+
+      <!-- 菜单 -->
+      <FilmMenu :current-step="currentStep" />
+
+      <!-- 进度条 -->
+      <div class="absolute left-0 bottom-0 w-full">
+        <ProgressBar
+          module-name="film"
+          :current-step="currentStep"
+          @step-change="handleStepChange"
+        />
+      </div>
+    </Overlay>
+
+    <div class="absolute bottom-0 w-full">
+      <ProgressBar
+        module-name="film"
+        :current-step="currentStep"
+        @complete="handleComplete"
+        @step-change="handleStepChange"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/views/film/midterm-shooting/equipment/index.vue b/src/views/film/midterm-shooting/equipment/index.vue
new file mode 100644
index 0000000..d5d6a7e
--- /dev/null
+++ b/src/views/film/midterm-shooting/equipment/index.vue
@@ -0,0 +1,520 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+
+const router = useRouter()
+
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
+const steps = [
+  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
+  { id: 'step2', content: '这是主要内容区域的边框' }
+]
+const stepIndex = ref(0)
+const hiddenbar = ref(false)
+const currentIndex = ref(0) // 当前显示的图片索引
+const selectedMenuIndex = ref(0) // 当前选中的菜单项索引
+
+// 菜单项数据
+const menuItems = ref([
+  { id: 'phone', name: '相机/摄像机/微单', disabled: false },
+  { id: 'phone-stand', name: '滑轨', disabled: true },
+  { id: 'bluetooth-remote', name: '三脚架', disabled: true },
+  { id: 'stabilizer', name: '稳定器', disabled: true },
+  { id: 'props', name: '灯光', disabled: true },
+  { id: 'phone-lens', name: '滤镜', disabled: true }
+])
+
+const phoneList = ref([
+  { phoneImg: getStaticImage('film/equipment/相机产品.png') },
+  { phoneImg: getStaticImage('film/equipment/摄像机产品.png') },
+  { phoneImg: getStaticImage('film/equipment/微单产品.png') }
+])
+
+const platetitleList = ref([
+  { title: getStaticImage('film/equipment/相机标题.png') },
+  { title: getStaticImage('film/equipment/相机标题.png') },
+  { title: getStaticImage('film/equipment/相机标题.png') }
+])
+
+const platetextList = ref([
+  { text: getStaticImage('film/equipment/相机内容.png') },
+  { text: getStaticImage('film/equipment/相机内容.png') },
+  { text: getStaticImage('film/equipment/相机内容.png') }
+])
+const hiddenbarclick = () => {
+  hiddenbar.value = !hiddenbar.value
+}
+
+// 选择菜单项
+const selectMenuItem = (index: number, item: { id: string; name: string; disabled: boolean }) => {
+  if (item.disabled) {
+    console.log(`菜单项 "${item.name}" 已被禁用`)
+    return
+  }
+  selectedMenuIndex.value = index
+}
+
+// 下一张图片
+const nextPhone = () => {
+  if (currentIndex.value < phoneList.value.length - 1) {
+    currentIndex.value++
+  }
+}
+
+// 上一张图片
+const prevPhone = () => {
+  if (currentIndex.value > 0) {
+    currentIndex.value--
+  }
+}
+
+interface SimpleStep {
+  id: string
+  content: string
+}
+
+const handleStepChange = (_step: SimpleStep | null, index: number) => {
+  stepIndex.value = index
+}
+
+const currentHighlight = computed(() =>
+  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
+)
+</script>
+<template>
+  <div class="equipment-index">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat equipment-bg"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.EQUIPMENT.BG) }"
+    ></div>
+
+    <div class="equipment-bar">
+      <img src="@/assets/images/equipment/侧边导航栏.png" alt="" :hidden="hiddenbar" />
+      <!-- 内容列表 -->
+      <div class="equipment-item" :hidden="hiddenbar">
+        <div class="menu-list">
+          <div
+            v-for="(item, index) in menuItems"
+            :key="item.id"
+            class="menu-item"
+            :class="{
+              'menu-item--active': selectedMenuIndex === index,
+              'menu-item--disabled': item.disabled
+            }"
+            @click="selectMenuItem(index, item)"
+          >
+            <div
+              class="menu-item__indicator"
+              v-if="selectedMenuIndex === index && !item.disabled"
+            ></div>
+            <span class="menu-item__text">{{ item.name }}</span>
+            <div class="menu-item__status" v-if="item.disabled">
+              <!-- <span class="status-text">未解锁</span> -->
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 设备准备按钮 -->
+      <div class="equipment-bt">
+        <img src="@/assets/images/equipment/按钮选中-设备准备.png" alt="" />
+      </div>
+      <div :class="hiddenbar ? 'equipment-unfold1' : 'equipment-unfold2'" @click="hiddenbarclick()">
+        <img
+          :src="
+            hiddenbar
+              ? getStaticImage('equipment/按钮-展开.png')
+              : getStaticImage('equipment/按钮-收缩.png')
+          "
+          alt=""
+        />
+      </div>
+    </div>
+    <div class="equipment-layout">
+      <div class="equipment-home">
+        <div
+          class="equipment-leftbutton"
+          @click="prevPhone"
+          :style="{ visibility: currentIndex > 0 ? 'visible' : 'hidden' }"
+        >
+          <img src="@/assets/images/equipment/按钮-左滑.png" alt="" />
+        </div>
+        <div class="equipment-phoneImg">
+          <img :src="phoneList[currentIndex].phoneImg" alt="" />
+        </div>
+        <div
+          class="equipment-rightbutton"
+          @click="nextPhone"
+          :style="{ visibility: currentIndex < phoneList.length - 1 ? 'visible' : 'hidden' }"
+        >
+          <img src="@/assets/images/equipment/按钮-右滑.png" alt="" />
+        </div>
+      </div>
+      <div class="equipment-purpose">
+        <div class="plate">
+          <img src="@/assets/images/equipment/浮空屏.png" alt="" />
+        </div>
+
+        <div class="title">
+          <img :src="platetitleList[currentIndex].title" alt="" />
+        </div>
+        <div class="plate-content">
+          <div class="text">
+            <img :src="platetextList[currentIndex].text" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ImgButton class="absolute right-0 top-0" :image="IMAGE_PATHS.COMPONENTS.BACK" @click="back" />
+    <!-- 调试按钮组 -->
+    <!-- <div class="debug-controls">
+      <button @click="enableAllMenuItems" class="debug-btn">启用全部</button>
+      <button @click="disableAllMenuItems" class="debug-btn">禁用全部</button>
+      <button @click="toggleMenuItem('bluetooth-remote')" class="debug-btn">切换蓝牙遥控器</button>
+    </div> -->
+
+    <!-- 引导步骤 -->
+    <GuideSteps
+      :steps="steps"
+      :highlight-selector="currentHighlight"
+      :highlight-padding="12"
+      :highlight-radius="20"
+      @step-change="handleStepChange"
+      position-offset-y="85%"
+    >
+      <GuideStepsItem
+        >拍摄工具本身不分好坏，关键在于是否适合当下的拍摄内容和使用习惯。
+        接下来，我们就一起看看在这个模块中会用到哪些常见、实用的拍摄工具。
+      </GuideStepsItem>
+    </GuideSteps>
+  </div>
+</template>
+<style lang="less" scoped>
+.equipment-index {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.equipment-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.equipment-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+
+  .equipment-bt {
+    position: absolute;
+    top: 0;
+    left: -135px;
+    width: 577px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .equipment-unfold1 {
+    position: absolute;
+    top: 490px;
+    left: -41px;
+    width: 150px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .equipment-unfold2 {
+    position: absolute;
+    top: 490px;
+    left: 268px;
+    width: 150px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .equipment-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 220px;
+    padding-left: 20px;
+
+    .menu-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      //background: linear-gradient(135deg, #1a2a4a 0%, #0f1a2e 100%);
+      border-radius: 12px;
+      padding: 16px 12px;
+      // box-shadow:
+      //   0 0 20px rgba(64, 150, 255, 0.3),
+      //   inset 0 0 20px rgba(64, 150, 255, 0.1);
+      // backdrop-filter: blur(10px);
+    }
+
+    .menu-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding: 24px 32px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      min-height: 44px;
+
+      &:hover {
+        // background: rgba(64, 150, 255, 0.1);
+        transform: translateX(4px);
+      }
+
+      &--active {
+        // background: rgba(64, 150, 255, 0.2);
+        // box-shadow: 0 0 15px rgba(64, 150, 255, 0.4);
+
+        .menu-item__text {
+          color: #ffffff;
+          text-shadow:
+            0 0 10px rgba(64, 150, 255, 0.8),
+            0 0 20px rgba(64, 150, 255, 0.6),
+            0 0 30px rgba(64, 150, 255, 0.4);
+          font-weight: 600;
+        }
+      }
+
+      &__indicator {
+        position: absolute;
+        left: 0px;
+        top: 45%;
+        transform: translateY(-50%);
+        width: 6px;
+        height: 38px;
+        background: #ffffff;
+        border-radius: 2px;
+        box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
+      }
+
+      &__text {
+        color: #64a5ff;
+        font-size: 30px;
+        font-weight: 800;
+        text-shadow: 0 0 8px rgba(64, 150, 255, 0.6);
+        transition: all 0.3s ease;
+        user-select: none;
+      }
+
+      &__status {
+        position: absolute;
+        right: 16px;
+        top: 50%;
+        transform: translateY(-50%);
+
+        .status-text {
+          font-size: 12px;
+          color: #999;
+          background: rgba(0, 0, 0, 0.6);
+          padding: 2px 8px;
+          border-radius: 4px;
+          border: 1px solid #333;
+        }
+      }
+
+      // 禁用状态样式
+      &--disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: auto; // 保持可点击以显示禁用提示
+
+        &:hover {
+          transform: none;
+          // background: rgba(255, 0, 0, 0.1);
+        }
+
+        .menu-item__text {
+          color: #666;
+          text-shadow: none;
+        }
+
+        .menu-item__indicator {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .guide-ui {
+    top: 80% !important;
+  }
+
+  .dragon-character {
+    top: 80% !important;
+  }
+}
+
+.equipment-home {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .equipment-leftbutton {
+    position: absolute;
+    top: 511px;
+    left: 350px;
+    width: 200px;
+    height: 200px;
+    cursor: pointer;
+    z-index: 10;
+  }
+
+  .equipment-phoneImg {
+    position: absolute;
+    top: 313px;
+    left: 500px;
+    width: 446px;
+    height: 484px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .equipment-rightbutton {
+    position: absolute;
+    top: 511px;
+    right: 770px;
+    width: 200px;
+    height: 200px;
+    cursor: pointer;
+    z-index: 10;
+  }
+}
+
+.equipment-purpose {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .plate {
+    position: absolute;
+    top: 30px;
+    left: 1200px;
+    width: 600px;
+    /* 调整为你需要的宽度 */
+    height: 1000px;
+    /* 调整为你需要的高度 */
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .plate-content {
+    position: absolute;
+    top: 144px;
+    right: 100px;
+    width: 600px;
+    height: 797px;
+    overflow: hidden;
+    /* 隐藏超出部分 */
+    object-fit: contain;
+
+    // display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+    /* 允许垂直滚动 */
+    scrollbar-width: none;
+    /* Firefox隐藏滚动条 */
+    -ms-overflow-style: none;
+    /* IE和Edge隐藏滚动条 */
+    perspective: 1000px;
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* Chrome, Safari隐藏滚动条 */
+    }
+  }
+
+  .title {
+    // margin-top: 47px;
+    width: 400px;
+    z-index: 2;
+    position: absolute;
+    top: 36px;
+    left: 1304px;
+  }
+
+  .text {
+    position: absolute;
+    top: -9px;
+    left: 8px;
+    z-index: 2;
+    transform: rotate3d(0, 1, 0, -20deg);
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+// 调试控制按钮样式
+.debug-controls {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 1000;
+
+  .debug-btn {
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    border: 1px solid #333;
+    padding: 6px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: background 0.3s ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.9);
+    }
+  }
+}
+</style>
diff --git a/src/views/midterm-shooting/midterm/index.vue b/src/views/film/midterm-shooting/midterm/index.vue
similarity index 100%
rename from src/views/midterm-shooting/midterm/index.vue
rename to src/views/film/midterm-shooting/midterm/index.vue
diff --git a/src/views/film/midterm-shooting/on-site/index.vue b/src/views/film/midterm-shooting/on-site/index.vue
new file mode 100644
index 0000000..2a02021
--- /dev/null
+++ b/src/views/film/midterm-shooting/on-site/index.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+
+const router = useRouter()
+
+const handleClose = () => {
+  router.back()
+}
+
+const goTimeLapse = () => {
+  router.push({ name: 'FilmOnsiteTimeLapse' })
+}
+
+const goSlider = () => {
+  router.push({ name: 'FilmOnsiteSlider' })
+}
+
+const goSlowShutterDay = () => {
+  router.push({ name: 'FilmOnsiteSlowShutterDay' })
+}
+
+const goSlowShutterNight = () => {
+  router.push({ name: 'FilmOnsiteSlowShutterNight' })
+}
+
+const goLowAngle = () => {
+  router.push({ name: 'FilmOnsiteLowAngle' })
+}
+
+const goRandom = () => {
+  router.push({ name: 'FilmOnsiteRandom' })
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 内容卡片 + 按钮 -->
+    <div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
+      <div
+        class="max-w-screen-2xl w-full bg-black/35 rounded-3xl border border-white/15 p-16 space-y-10 text-white pointer-events-auto"
+      >
+        <div class="flex items-baseline justify-between gap-6">
+          <h1 class="text-5xl font-extrabold tracking-wide">现场拍摄</h1>
+          <span class="text-3xl opacity-80">从不同维度练习你的镜头语言</span>
+        </div>
+        <p class="text-2xl leading-8 opacity-90">
+          选择下面任意一个练习模块，进入对应的现场拍摄场景，按提示完成小任务，逐步建立自己的拍摄手感和创作节奏。
+        </p>
+
+        <div class="grid grid-cols-3 gap-10">
+          <button type="button" class="onsite-btn" @click="goTimeLapse">
+            <span class="onsite-btn-title">延时拍摄</span>
+            <span class="onsite-btn-desc">记录时间流动，让平凡场景变得有节奏、有变化。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goSlider">
+            <span class="onsite-btn-title">滑轨拍摄</span>
+            <span class="onsite-btn-desc">通过平稳移动镜头，营造空间感和叙事推进感。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goSlowShutterDay">
+            <span class="onsite-btn-title">慢门拍摄 · 白天</span>
+            <span class="onsite-btn-desc">在白天环境下练习慢门，营造水流、车流等运动轨迹。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goSlowShutterNight">
+            <span class="onsite-btn-title">慢门拍摄 · 夜晚</span>
+            <span class="onsite-btn-desc">利用城市灯光，拍出具有节奏感和氛围感的夜景画面。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goLowAngle">
+            <span class="onsite-btn-title">低角度拍摄</span>
+            <span class="onsite-btn-desc">从低视角观察世界，突出主体气势，改变日常视角。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goRandom">
+            <span class="onsite-btn-title">创作随机性</span>
+            <span class="onsite-btn-desc">跟随直觉自由取景，捕捉那些意料之外的画面惊喜。</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 关闭 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+.onsite-btn {
+  @apply relative flex flex-col items-start backdrop-blur-md rounded-2xl px-10 py-8 text-left bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/30 transition-all duration-200 cursor-pointer;
+}
+
+.onsite-btn-title {
+  @apply text-4xl font-bold mb-4;
+}
+
+.onsite-btn-desc {
+  @apply text-2xl leading-9 opacity-80;
+}
+</style>
diff --git a/src/views/film/midterm-shooting/on-site/low-angle.vue b/src/views/film/midterm-shooting/on-site/low-angle.vue
new file mode 100644
index 0000000..8843e6b
--- /dev/null
+++ b/src/views/film/midterm-shooting/on-site/low-angle.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { QuestionQuiz, type Question } from '@/components'
+import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 交互一 & 交互二：选择题
+const questions = ref<Question[]>([
+  {
+    id: 1,
+    title: '画面感受判断',
+    description: '如果你身处滨江岸边，看到一位正在打太极的老人，你会选择哪个角度拍摄？',
+    options: [
+      { id: 'a', label: '平视拍摄' },
+      { id: 'b', label: '俯拍' },
+      { id: 'c', label: '低角度仰拍' }
+    ],
+    correctOptionId: '', // 引导题，没有正确答案，任意选择都可进入下一题
+    mediaSrc: 'film/on-site/低角度拍摄jh_1.png'
+  },
+  {
+    id: 2,
+    title: '结果理解',
+    description: '这个画面通过低角度拍摄，主要解决了哪一个画面问题？',
+    options: [
+      { id: 'a', label: '放大了人物的真实身高' },
+      { id: 'b', label: '强化了人物动作的力量感与气势' },
+      { id: 'c', label: '让背景元素显得更加丰富' },
+      { id: 'd', label: '让画面信息量变得更多' }
+    ],
+    correctOptionId: 'b',
+    mediaSrc: getPublicPath('video/on-site/xianchangpaishe_dijiaodu.mp4')
+  }
+])
+
+const showSummaryStep = ref(false)
+
+// 答题完成，进入交互三（总结）
+const handleQuestionsComplete = () => {
+  showSummaryStep.value = true
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 交互一 & 交互二：选择题 -->
+    <QuestionQuiz
+      v-if="!showSummaryStep"
+      :questions="questions"
+      @complete="handleQuestionsComplete"
+    />
+
+    <!-- 交互三：总结 -->
+    <div
+      v-if="showSummaryStep"
+      class="absolute inset-0 flex items-center justify-center px-20 pointer-events-none"
+    >
+      <div
+        class="max-w-screen-2xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-16 space-y-10 text-white pointer-events-auto"
+      >
+        <div class="flex gap-8">
+          <!-- 总结文本内容 -->
+          <div class="w-3/6 text-2xl leading-10 opacity-90 space-y-3">
+            <h2 class="text-4xl font-bold mb-4 leading-relaxed">总结</h2>
+            <p>
+              <span>像案例中这样以蹲姿或趴在地上的姿势进行低角度拍摄，</span>
+              <span>并不会改变人物本身，</span>
+              <span>却能借助降低机位的操作，</span>
+              <span>赋予画面里的人物更强的力量感与气势。</span>
+            </p>
+            <p>
+              <span>同时，低角度也减少了，</span>
+              <span>背景中杂乱元素进入画面的可能性，</span>
+              <span>让观众的注意力更集中在人物的动作本身。</span>
+            </p>
+          </div>
+          <!-- 总结图片 -->
+          <div class="flex-1 rounded-2xl overflow-hidden">
+            <img
+              class="w-full object-cover"
+              :src="getStaticImage('film/on-site/低角度拍摄jh_3.png')"
+              alt="低角度拍摄总结"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/film/midterm-shooting/on-site/random.vue b/src/views/film/midterm-shooting/on-site/random.vue
new file mode 100644
index 0000000..65d5647
--- /dev/null
+++ b/src/views/film/midterm-shooting/on-site/random.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video } from '@/components'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 创作随机性视频 URL（暂时用其他视频代替）
+const randomVideoUrl = getPublicPath('video/on-site/dygmk_czsjx_batch.mp4')
+
+// 视频播放状态
+const videoPlaying = ref(false)
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 视频播放区域 -->
+    <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+      <Video
+        class="w-full h-full"
+        :src="randomVideoUrl"
+        v-model="videoPlaying"
+        :muted="false"
+        :volume="1"
+        :controls="true"
+        :hideNativeControls="true"
+        :autoplay="true"
+      />
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/film/midterm-shooting/on-site/slider.vue b/src/views/film/midterm-shooting/on-site/slider.vue
new file mode 100644
index 0000000..6fe2231
--- /dev/null
+++ b/src/views/film/midterm-shooting/on-site/slider.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video, QuestionQuiz, type Question } from '@/components'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 滑轨拍摄视频 URL
+const sliderVideoUrl = getPublicPath('video/on-site/dygmk_hgydjt_batch.mp4')
+
+// 视频播放状态
+const videoEnded = ref(false)
+const videoPlaying = ref(false)
+const showQuiz = ref(false) // 控制是否显示答题窗口
+
+// 视频播放完成
+const handleVideoEnded = () => {
+  videoEnded.value = true
+  showQuiz.value = true // 视频播放完成后显示答题窗口
+}
+
+// 交互一 & 交互二：选择题
+const questions = ref<Question[]>([
+  {
+    id: 1,
+    title: '滑轨拍摄',
+    description: '下面哪一种拍摄情境，最适合使用滑轨拍摄？',
+    options: [
+      {
+        id: 'a',
+        label: '人物正对镜头说话，背景简单，镜头静止人物正对镜头说话，背景简单，镜头静止'
+      },
+      { id: 'b', label: '人物站在窗边，前景有栏杆或墙体，镜头缓慢横向移动' },
+      { id: 'c', label: '人物快速奔跑，摄影师跟着移动拍摄' }
+    ],
+    correctOptionId: 'b',
+    explanation:
+      '滑轨镜头的价值，不在"动"，而在稳定、克制地交代空间关系。当前景—人物—背景同时存在时，缓慢的横向移动，会让画面产生层次和叙事感，而不是分散注意力。'
+  }
+])
+
+// 答题完成
+const handleQuestionsComplete = () => {
+  showQuiz.value = false // 答题成功后关闭答题窗口
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 视频播放区域 -->
+    <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+      <Video
+        class="w-full h-full"
+        :src="sliderVideoUrl"
+        v-model="videoPlaying"
+        :muted="false"
+        :volume="1"
+        :controls="true"
+        :hideNativeControls="true"
+        :autoplay="true"
+        @ended="handleVideoEnded"
+      >
+        <template #overlay>
+          <QuestionQuiz
+            v-if="showQuiz"
+            :show-question-number="false"
+            :questions="questions"
+            @complete="handleQuestionsComplete"
+          />
+        </template>
+      </Video>
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/film/midterm-shooting/on-site/slow-shutter-day.vue b/src/views/film/midterm-shooting/on-site/slow-shutter-day.vue
new file mode 100644
index 0000000..d3e3cd0
--- /dev/null
+++ b/src/views/film/midterm-shooting/on-site/slow-shutter-day.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { QuestionQuiz, type Question } from '@/components'
+import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 交互一 & 交互二：选择题
+const questions = ref<Question[]>([
+  {
+    id: 1,
+    title: '画面判断',
+    description: '在这个白天场景中，画面里的运动变化，是否容易被直接观察到？',
+    options: [
+      { id: 'a', label: '是，变化本身已经很清楚' },
+      { id: 'b', label: '否，变化存在，但不容易被完整感知' }
+    ],
+    correctOptionId: 'b',
+    mediaSrc: 'film/on-site/白天慢门jh_1.png',
+    explanation: '白天光照条件下，许多运动变化存在于连续时间中，并不容易被单帧画面完整呈现。'
+  },
+  {
+    id: 2,
+    title: '拍摄方式选择',
+    description:
+      '在光照较强的环境中，如果希望拉长画面中的运动轨迹，拍出视频中的效果，以下哪种方式更合适？',
+    options: [
+      { id: 'a', label: '提高 ISO' },
+      { id: 'b', label: '加装 ND 镜片，降低快门速度' },
+      { id: 'c', label: '使用连拍模式' }
+    ],
+    correctOptionId: 'b',
+    mediaSrc: getPublicPath('video/on-site/xianchangpaishe_baitianmanmen.mp4')
+  }
+])
+
+const showSummaryStep = ref(false)
+
+// 答题完成，进入交互三（总结）
+const handleQuestionsComplete = () => {
+  showSummaryStep.value = true
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 交互一 & 交互二：选择题 -->
+    <QuestionQuiz
+      v-if="!showSummaryStep"
+      :questions="questions"
+      @complete="handleQuestionsComplete"
+    />
+
+    <!-- 交互三：总结 -->
+    <div
+      v-if="showSummaryStep"
+      class="absolute inset-0 flex items-center justify-center px-20 pointer-events-none"
+    >
+      <div
+        class="max-w-screen-2xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-16 space-y-10 text-white pointer-events-auto"
+      >
+        <div class="flex gap-8">
+          <!-- 总结文本内容 -->
+          <div class="w-2/6 text-2xl leading-10 opacity-90 space-y-3">
+            <h2 class="text-4xl font-bold mb-4 leading-relaxed">总结</h2>
+            <p>
+              <span>通过ND 镜片控制进光量，</span>
+              <span>可以在白天环境下安全降低快门速度，</span>
+              <span>为慢门拍摄创造条件。</span>
+            </p>
+            <p>
+              <span>人为扩大"静止"与"运动"之间的视觉差异，</span>
+              <span>让观众在同一个画面中同时感知，</span>
+              <span>人的运动节奏与空间结构关系。</span>
+            </p>
+          </div>
+          <!-- 总结图片 -->
+          <div
+            class="flex-1 rounded-2xl overflow-hidden border border-white/20 bg-black/60 min-h-[500px]"
+          >
+            <img
+              class="w-full h-full object-cover"
+              :src="getStaticImage('film/on-site/白天慢门jh_3.png')"
+              alt="ND镜片"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/film/midterm-shooting/on-site/slow-shutter-night.vue b/src/views/film/midterm-shooting/on-site/slow-shutter-night.vue
new file mode 100644
index 0000000..6b5bc08
--- /dev/null
+++ b/src/views/film/midterm-shooting/on-site/slow-shutter-night.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video } from '@/components'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 慢门拍摄夜晚视频 URL（暂时用其他视频代替）
+const slowShutterNightVideoUrl = getPublicPath('video/on-site/dygmk_mmps_batch.mp4')
+
+// 视频播放状态
+const videoPlaying = ref(false)
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 视频播放区域 -->
+    <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+      <Video
+        class="w-full h-full"
+        :src="slowShutterNightVideoUrl"
+        v-model="videoPlaying"
+        :muted="false"
+        :volume="1"
+        :controls="true"
+        :hideNativeControls="true"
+        :autoplay="true"
+      />
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/film/midterm-shooting/on-site/time-lapse.vue b/src/views/film/midterm-shooting/on-site/time-lapse.vue
new file mode 100644
index 0000000..20179eb
--- /dev/null
+++ b/src/views/film/midterm-shooting/on-site/time-lapse.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video, QuestionQuiz, type Question } from '@/components'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+// 延时拍摄视频 URL（占位，后续可替换）
+const timeLapseVideoUrl = getPublicPath('video/on-site/xianchangpaishe_yanshipaishe.mp4')
+
+const handleBack = () => {
+  router.back()
+}
+
+// 交互一 & 交互二：选择题
+const questions = ref<Question[]>([
+  {
+    id: 1,
+    title: '观察判断',
+    description: '如果你只用一条普通视频来拍这个场景，你觉得画面最难被感知的是什么？',
+    options: [
+      { id: 'a', label: '建筑的外形结构' },
+      { id: 'b', label: '天空的颜色' },
+      { id: 'c', label: '时间的变化' },
+      { id: 'd', label: '画面的清晰度' }
+    ],
+    correctOptionId: 'c',
+    mediaSrc: 'film/on-site/延时拍摄jh_1.png' // 占位：请按需替换为真实图片
+  },
+  {
+    id: 2,
+    title: '方法选择',
+    description: '如果希望在很短时间内，让观众明显感知“时间正在流动”，你会选择哪种拍摄方式？',
+    options: [
+      { id: 'a', label: '手持拍摄' },
+      { id: 'b', label: '慢动作拍摄' },
+      { id: 'c', label: '延时拍摄' },
+      { id: 'd', label: '推拉镜头' }
+    ],
+    correctOptionId: 'c',
+    mediaSrc: 'film/on-site/延时拍摄jh_1.png' // 占位：请按需替换为真实图片
+  }
+])
+
+const showObserveStep = ref(false)
+const videoPlaying = ref(false) // 视频播放状态
+
+// 答题完成，进入交互三（视频）
+const handleQuestionsComplete = () => {
+  showObserveStep.value = true
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 交互一 & 交互二：选择题 -->
+    <QuestionQuiz
+      v-if="!showObserveStep"
+      :questions="questions"
+      @complete="handleQuestionsComplete"
+    />
+    <!-- 交互三：观察型 - 播放视频 -->
+    <div
+      v-if="showObserveStep"
+      class="absolute inset-0 flex items-center justify-center px-20 pointer-events-none"
+    >
+      <div
+        class="max-w-screen-2xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-16 space-y-10 text-white pointer-events-auto"
+      >
+        <div class="flex gap-8">
+          <!-- 总结文本内容 -->
+          <div class="w-2/6 text-2xl leading-10 opacity-90 space-y-3">
+            <h2 class="text-4xl font-bold mb-4 leading-relaxed">总结</h2>
+            <p>在这个延时画面中，注意天空变化与光影移动的节奏，它们在短时间内被连续呈现出来。</p>
+
+            <p><span>延时拍摄的主要目的</span>，<span>是交代时间流逝与环境状态</span>。</p>
+            <p>
+              <span>这里的拍摄对象是江边的建筑群与天空</span
+              >。<span>通过固定机位的连续拍摄</span>，<span>将原本需要较长时间才能观察到的</span
+              ><span>天空变化和光影移动</span>，<span>压缩到一个较短的镜头中呈现</span>。
+            </p>
+            <p>
+              <span>这种处理方式</span
+              >，<span>非常适合放置在视频片头阶段</span>，<span>用于快速建立时间感与空间环境</span>，<span>而不会占用过多时长</span>。
+            </p>
+          </div>
+          <div
+            class="flex-1 rounded-2xl overflow-hidden border border-white/20 bg-black/60 min-h-[500px]"
+          >
+            <Video
+              class="w-full h-full"
+              :src="timeLapseVideoUrl"
+              v-model="videoPlaying"
+              :muted="false"
+              :volume="1"
+              :controls="true"
+              :hideNativeControls="true"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/film/midterm-shooting/shooting/components/StartOverlay.vue b/src/views/film/midterm-shooting/shooting/components/StartOverlay.vue
new file mode 100644
index 0000000..d26c49f
--- /dev/null
+++ b/src/views/film/midterm-shooting/shooting/components/StartOverlay.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ImgButton } from '@/components/Button'
+import { getStaticImage } from '@/utils'
+
+defineEmits<{
+  start: []
+}>()
+
+const props = defineProps<{
+  scene: 'a' | 'b'
+}>()
+</script>
+
+<template>
+  <div class="absolute bottom-0">
+    <div class="relative">
+      <img
+        :src="
+          getStaticImage(
+            props.scene === 'a'
+              ? 'film/shooting/龙美术馆拍摄.png'
+              : 'film/shooting/油罐艺术公园拍摄.png'
+          )
+        "
+        alt=""
+      />
+      <ImgButton
+        class="absolute bottom-[46%] left-[49%] -translate-x-1/2"
+        image="shooting/按钮-开始取景.png"
+        @click="$emit('start')"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/views/film/midterm-shooting/shooting/composables/useCanvasCapture.ts b/src/views/film/midterm-shooting/shooting/composables/useCanvasCapture.ts
new file mode 100644
index 0000000..81c21bc
--- /dev/null
+++ b/src/views/film/midterm-shooting/shooting/composables/useCanvasCapture.ts
@@ -0,0 +1,77 @@
+import { ref } from 'vue'
+
+interface CaptureOptions {
+  width: number
+  height: number
+  scale?: number
+  delay?: number // 截图前的等待时间（用于 UI 更新）
+  resultDelay?: number // 截图后显示结果的延迟
+  onDraw: (ctx: CanvasRenderingContext2D) => void | Promise<void>
+  onComplete?: () => void
+}
+
+export function useCanvasCapture() {
+  const isLoading = ref(false)
+  const showModal = ref(false)
+  const capturedImageUrl = ref('')
+
+  const capture = async (options: CaptureOptions) => {
+    if (isLoading.value) return
+
+    const { width, height, scale = 2, delay = 50, resultDelay = 0, onDraw, onComplete } = options
+
+    isLoading.value = true
+
+    try {
+      // 等待 UI 更新
+      if (delay > 0) {
+        await new Promise(resolve => setTimeout(resolve, delay))
+      }
+
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+      if (!ctx) {
+        throw new Error('Cannot get canvas context')
+      }
+
+      // 设置画布大小（高清）
+      canvas.width = width * scale
+      canvas.height = height * scale
+
+      // 填充白色背景（防止透明）
+      ctx.fillStyle = '#ffffff'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // 应用缩放
+      ctx.scale(scale, scale)
+
+      // 执行自定义绘制逻辑
+      await onDraw(ctx)
+
+      capturedImageUrl.value = canvas.toDataURL('image/png')
+
+      // 延迟显示结果
+      if (resultDelay > 0) {
+        setTimeout(() => {
+          isLoading.value = false
+          showModal.value = true
+          onComplete?.()
+        }, resultDelay)
+      } else {
+        isLoading.value = false
+        showModal.value = true
+        onComplete?.()
+      }
+    } catch (error) {
+      console.error('Capture failed:', error)
+      isLoading.value = false
+    }
+  }
+
+  return {
+    isLoading,
+    showModal,
+    capturedImageUrl,
+    capture
+  }
+}
diff --git a/src/views/film/midterm-shooting/shooting/filmingLocation-a/index.vue b/src/views/film/midterm-shooting/shooting/filmingLocation-a/index.vue
new file mode 100644
index 0000000..14106ca
--- /dev/null
+++ b/src/views/film/midterm-shooting/shooting/filmingLocation-a/index.vue
@@ -0,0 +1,330 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { getBackgroundImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { useRouter } from 'vue-router'
+import { useViewfinderA } from './useViewfinderA'
+import { useCanvasCapture } from '../composables/useCanvasCapture'
+import StartOverlay from '../components/StartOverlay.vue'
+import LoadingOverlay from '@/components/Loading/LoadingOverlay.vue'
+
+const router = useRouter()
+const start = ref(false)
+
+// 基础逻辑
+const back = () => router.back()
+const handleFinish = () => router.push({ name: 'FilmFilmingLocationB' })
+
+// 截图功能
+const { isLoading, showModal, capturedImageUrl, capture } = useCanvasCapture()
+
+const handleModalClose = () => {
+  showModal.value = false
+}
+
+// 手机模式取景
+const {
+  currentZoom,
+  isCapturing,
+  isDragging,
+  setZoom,
+  startDrag,
+  onDrag,
+  endDrag,
+  getTransform,
+  currentOffsetX,
+  currentOffsetY,
+  handleWheel
+} = useViewfinderA()
+
+// 刻度盘配置常量
+const DIAL_STEP_DEG = 30 // 1x 到 2x 之间的角度差（度）
+const ZOOM_MIN = 1
+const ZOOM_MAX = 3
+const ZOOM_CENTER = 2
+const TICK_STEP = 0.1 // 刻度步长
+const MAJOR_TICK_INTERVAL = 5 // 主刻度间隔（0.5x）
+const INTEGER_TICK_INTERVAL = 10 // 整数刻度间隔（1.0x）
+
+// 刻度数据类型
+interface DialTick {
+  zoom: number
+  angle: number
+  isMajor: boolean
+  isInteger: boolean
+  label: string
+}
+
+// 计算圆盘旋转角度
+// 目标：将当前 zoom 对应的刻度旋转到 0 度位置
+// 3x 在上方（-30deg），1x 在下方（+30deg）
+const dialRotation = computed(() => {
+  return (currentZoom.value - ZOOM_CENTER) * DIAL_STEP_DEG
+})
+
+// 格式化缩放倍数显示
+const formattedZoom = computed(() => {
+  return currentZoom.value.toFixed(1) + 'x'
+})
+
+// 生成刻度数据
+const dialTicks = computed<DialTick[]>(() => {
+  const ticks: DialTick[] = []
+  const minTick = ZOOM_MIN / TICK_STEP
+  const maxTick = ZOOM_MAX / TICK_STEP
+
+  for (let z = minTick; z <= maxTick; z += 1) {
+    const zoom = z * TICK_STEP
+    // 刻度相对于中心（2x）的角度
+    // 3x -> -30deg（上方），1x -> +30deg（下方）
+    const angle = -(zoom - ZOOM_CENTER) * DIAL_STEP_DEG
+
+    const isMajor = z % MAJOR_TICK_INTERVAL === 0
+    const isInteger = z % INTEGER_TICK_INTERVAL === 0
+
+    ticks.push({
+      zoom,
+      angle,
+      isMajor,
+      isInteger,
+      label: isInteger ? zoom + 'x' : ''
+    })
+  }
+  return ticks
+})
+
+const photoImage = ref<HTMLImageElement | null>(null)
+
+// Canvas 截图配置常量
+const CANVAS_WIDTH = 871
+const CANVAS_HEIGHT = 420
+const CANVAS_SCALE = 2 // 2倍高清
+const FLASH_DURATION = 100 // 闪光动画时长（ms）
+const UI_UPDATE_DELAY = 50 // UI 更新延迟（ms）
+const RESULT_DISPLAY_DELAY = 300 // 结果显示延迟（ms）
+
+/**
+ * 拍照功能
+ * 使用 Canvas 手动绘制图片，避免 DOM 截图的兼容性问题
+ */
+/**
+ * 拍照功能
+ * 使用 Canvas 手动绘制图片，避免 DOM 截图的兼容性问题
+ */
+const capturePhoto = async () => {
+  if (isLoading.value) return
+
+  isCapturing.value = true
+  await new Promise(resolve => setTimeout(resolve, FLASH_DURATION))
+
+  await capture({
+    width: CANVAS_WIDTH,
+    height: CANVAS_HEIGHT,
+    scale: CANVAS_SCALE,
+    delay: UI_UPDATE_DELAY,
+    resultDelay: RESULT_DISPLAY_DELAY,
+    onDraw: ctx => {
+      if (!photoImage.value) {
+        throw new Error('Photo image not found')
+      }
+
+      // 计算变换
+      // 1. 移动到中心
+      ctx.translate(CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2)
+      // 2. 应用拖拽偏移
+      ctx.translate(currentOffsetX.value, currentOffsetY.value)
+      // 3. 应用缩放
+      ctx.scale(currentZoom.value, currentZoom.value)
+      // 4. 移回左上角绘制
+      ctx.drawImage(
+        photoImage.value,
+        -CANVAS_WIDTH / 2,
+        -CANVAS_HEIGHT / 2,
+        CANVAS_WIDTH,
+        CANVAS_HEIGHT
+      )
+    },
+    onComplete: () => {
+      isCapturing.value = false
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="w-full h-full">
+    <div
+      class="relative w-full h-full bg-cover bg-center bg-no-repeat shooting-bg"
+      :style="{ backgroundImage: getBackgroundImage('film/shooting/龙美术馆模糊底图.png') }"
+    >
+      <ImgButton image="shooting/标题-取景地a.png" class="title-button absolute left-0" />
+      <ImgButton image="shooting/返回.png" class="back-button absolute right-0" @click="back" />
+
+      <p
+        class="absolute left-1/2 -translate-x-1/2 top-[260px] text-red-500 text-4xl leading-normal font-bold"
+      >
+        操作说明：在手机取景框区域，滚动鼠标滚轮可缩放画面，按住鼠标左键拖动可调整画面位置。
+      </p>
+
+      <StartOverlay scene="a" v-if="!start" @start="start = true" />
+
+      <!-- 手机拍照界面 -->
+      <div class="absolute bottom-0 w-full h-[766px]" v-else>
+        <img
+          class="phone-frame absolute w-full h-[766px] z-10 pointer-events-none"
+          src="@/assets/images/shooting/shoot.png"
+          alt=""
+        />
+
+        <!-- 拍摄区域 -->
+        <div
+          class="photo-wrapper absolute pointer-events-none top-[19.2%] left-[48.3%] -translate-x-1/2 w-[871px] h-[420px]"
+        >
+          <div class="photo-container w-full h-full overflow-hidden relative">
+            <!-- 拍摄图片 -->
+            <img
+              ref="photoImage"
+              class="absolute pointer-events-auto w-[871px] h-[420px] ease-out select-none cursor-move touch-none"
+              :class="{
+                'transition-transform duration-300': !isDragging,
+                'cursor-grab': !isDragging,
+                'cursor-grabbing': isDragging
+              }"
+              :style="{ transform: getTransform() }"
+              src="@/assets/images/film/shooting/龙美术馆清晰图.png"
+              alt=""
+              crossorigin="anonymous"
+              @mousedown="startDrag"
+              @mousemove="onDrag"
+              @mouseup="endDrag"
+              @mouseleave="endDrag"
+              @wheel="handleWheel"
+              @touchstart="startDrag"
+              @touchmove="onDrag"
+              @touchend="endDrag"
+              draggable="false"
+            />
+
+            <!-- 拍照闪光效果 -->
+            <div
+              v-if="isCapturing"
+              class="flash-overlay absolute inset-0 bg-white animate-flash"
+            ></div>
+          </div>
+        </div>
+
+        <div
+          class="shooting-decor relative pointer-events-none top-[19.2%] left-[48.3%] -translate-x-1/2 w-[871px] h-[420px] bg-cover bg-center bg-no-repeat"
+          :style="{ backgroundImage: getBackgroundImage('shooting/拍摄装饰.png') }"
+        >
+          <!-- 仿苹果半圆盘缩放控件 -->
+          <div
+            class="zoom-dial-container absolute pointer-events-auto w-[150px] h-[300px] top-1/2 -translate-y-1/2 -rotate-2 right-[179px] overflow-hidden select-none mask-gradient"
+          >
+            <!-- 指示器 (固定在中心) -->
+            <div
+              class="absolute top-1/2 left-0 w-full -translate-y-1/2 z-20 flex items-center pointer-events-none"
+            >
+              <div
+                class="w-0 h-0 border-t-[8px] border-t-transparent border-l-[14px] border-l-yellow-400 border-b-[8px] border-b-transparent ml-3"
+              ></div>
+              <div
+                class="ml-3 bg-black/70 backdrop-blur-md text-yellow-400 font-bold px-3 py-1 rounded text-lg shadow-lg"
+              >
+                {{ formattedZoom }}
+              </div>
+            </div>
+
+            <!-- 旋转圆盘 -->
+            <!-- 圆心在容器右侧外部，形成左侧弧形 -->
+            <div
+              class="dial-wheel absolute top-1/2 right-[-480px] w-[600px] h-[600px] rounded-full bg-black/30 backdrop-blur-md border-[5px] border-white/20 transition-transform duration-100 ease-out origin-center cursor-grab active:cursor-grabbing"
+              :style="{ transform: `translateY(-50%) rotate(${dialRotation}deg)` }"
+            >
+              <div
+                v-for="tick in dialTicks"
+                :key="tick.zoom"
+                class="absolute top-1/2 left-0 w-full h-0 flex justify-start items-center origin-center pointer-events-auto"
+                :style="{ transform: `translate(0, -50%) rotate(${tick.angle}deg)` }"
+                @click.stop="setZoom(tick.zoom)"
+              >
+                <!-- 刻度线本体 (位于圆盘左边缘) -->
+                <div
+                  class="absolute left-3 bg-white/90 transition-all duration-200"
+                  :class="{
+                    'w-10 h-1 opacity-90': tick.isInteger,
+                    'w-6 h-0.5 opacity-60': !tick.isInteger && tick.isMajor,
+                    'w-3 h-[1px] opacity-40': !tick.isMajor
+                  }"
+                ></div>
+                <!-- 刻度文字 -->
+                <div
+                  v-if="tick.isInteger"
+                  class="absolute left-[52px] text-white/90 font-bold text-lg drop-shadow-md"
+                  :style="{ transform: `rotate(${-tick.angle - dialRotation}deg)` }"
+                >
+                  <span
+                    :class="{ 'text-yellow-400 scale-110': currentZoom === tick.zoom }"
+                    class="block transition-all duration-200"
+                  >
+                    {{ tick.label }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 拍摄按钮 -->
+          <ImgButton
+            image="shooting/按钮-拍摄.png"
+            class="capture-button absolute pointer-events-auto right-14 top-1/2 -translate-y-1/2 transition-transform active:scale-95"
+            @click="capturePhoto"
+          />
+        </div>
+      </div>
+
+      <!-- 结果弹窗 -->
+      <Overlay :visible="showModal" @close="handleModalClose">
+        <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
+          <!-- 截图内容 -->
+          <div v-if="capturedImageUrl" class="bg-white p-2 rounded-md -rotate-6">
+            <img :src="capturedImageUrl" alt="拍摄结果" />
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
+            <ImgButton image="shooting/按钮-前往下一个取景地" @click="handleFinish" />
+          </div>
+        </div>
+      </Overlay>
+    </div>
+
+    <LoadingOverlay :visible="isLoading" text="正在出片中..." />
+  </div>
+</template>
+
+<style lang="less">
+@keyframes flash {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0.8;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.animate-flash {
+  animation: flash 0.3s ease-out;
+}
+
+.mask-gradient {
+  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
+  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
+}
+</style>
diff --git a/src/views/film/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts b/src/views/film/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
new file mode 100644
index 0000000..b3d184e
--- /dev/null
+++ b/src/views/film/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
@@ -0,0 +1,149 @@
+import { ref } from 'vue'
+import { getTouchDistance, getClientPosition } from '../utils/touchGestures'
+
+/**
+ * 手机拍照模式的取景逻辑
+ * 支持缩放和拖拽功能
+ */
+export function useViewfinderA() {
+  // 缩放限制
+  const MIN_ZOOM = 1
+  const MAX_ZOOM = 3
+
+  // 缩放级别 (保留用于点击按钮)
+  const zoomLevels = [3, 2, 1]
+  const currentZoom = ref(1)
+  const isCapturing = ref(false) // 拍照闪光效果
+
+  // 拖拽相关状态
+  const isDragging = ref(false)
+  const dragStartX = ref(0)
+  const dragStartY = ref(0)
+  const offsetX = ref(0)
+  const offsetY = ref(0)
+  const currentOffsetX = ref(0)
+  const currentOffsetY = ref(0)
+
+  // 双指缩放相关
+  const isPinching = ref(false)
+  const pinchStartDistance = ref(0)
+  const pinchStartZoom = ref(1)
+
+  // 计算边界限制
+  const limitOffset = () => {
+    const containerWidth = 871
+    const containerHeight = 420
+    const scale = currentZoom.value
+
+    // 计算图片缩放后的尺寸
+    const scaledWidth = containerWidth * scale
+    const scaledHeight = containerHeight * scale
+
+    // 计算最大偏移量（图片边缘不能超出容器中心）
+    const maxOffsetX = (scaledWidth - containerWidth) / 2
+    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))
+  }
+
+  // 设置缩放级别
+  const setZoom = (zoom: number) => {
+    currentZoom.value = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom))
+    limitOffset()
+  }
+
+  // 鼠标滚轮缩放
+  const handleWheel = (e: WheelEvent) => {
+    e.preventDefault()
+    // 滚轮向下是正数（缩小），向上是负数（放大）
+    const delta = -e.deltaY * 0.001
+    const newZoom = currentZoom.value + delta
+    setZoom(newZoom)
+  }
+
+  // 开始拖拽 / 触摸
+  const startDrag = (e: MouseEvent | TouchEvent) => {
+    // 双指缩放
+    if ('touches' in e && e.touches.length === 2) {
+      isPinching.value = true
+      isDragging.value = false
+      pinchStartDistance.value = getTouchDistance(e.touches[0], e.touches[1])
+      pinchStartZoom.value = currentZoom.value
+      e.preventDefault()
+      return
+    }
+
+    // 单指拖拽
+    if ('touches' in e && e.touches.length !== 1) return
+
+    isDragging.value = true
+    isPinching.value = false
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    dragStartX.value = clientX
+    dragStartY.value = clientY
+    offsetX.value = currentOffsetX.value
+    offsetY.value = currentOffsetY.value
+  }
+
+  // 拖拽中 / 缩放中
+  const onDrag = (e: MouseEvent | TouchEvent) => {
+    // 处理双指缩放
+    if (isPinching.value && 'touches' in e && e.touches.length === 2) {
+      const currentDistance = getTouchDistance(e.touches[0], e.touches[1])
+      const scale = currentDistance / pinchStartDistance.value
+      setZoom(pinchStartZoom.value * scale)
+      e.preventDefault()
+      return
+    }
+
+    if (!isDragging.value) return
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const deltaX = clientX - dragStartX.value
+    const deltaY = clientY - dragStartY.value
+
+    currentOffsetX.value = offsetX.value + deltaX
+    currentOffsetY.value = offsetY.value + deltaY
+
+    limitOffset()
+
+    // 防止滚动
+    if (e.cancelable) {
+      e.preventDefault()
+    }
+  }
+
+  // 结束拖拽
+  const endDrag = () => {
+    isDragging.value = false
+    isPinching.value = false
+  }
+
+  // 计算transform样式
+  const getTransform = () => {
+    return `translate(${currentOffsetX.value}px, ${currentOffsetY.value}px) scale(${currentZoom.value})`
+  }
+
+  return {
+    // 状态
+    zoomLevels,
+    currentZoom,
+    isCapturing,
+    isDragging,
+    currentOffsetX,
+    currentOffsetY,
+
+    // 方法
+    setZoom,
+    startDrag,
+    onDrag,
+    endDrag,
+    handleWheel,
+    getTransform
+  }
+}
diff --git a/src/views/film/midterm-shooting/shooting/filmingLocation-b/index.vue b/src/views/film/midterm-shooting/shooting/filmingLocation-b/index.vue
new file mode 100644
index 0000000..ff9bd96
--- /dev/null
+++ b/src/views/film/midterm-shooting/shooting/filmingLocation-b/index.vue
@@ -0,0 +1,287 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { getBackgroundImage, getStaticImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { useViewfinderB } from './useViewfinderB'
+import { useCanvasCapture } from '../composables/useCanvasCapture'
+import StartOverlay from '../components/StartOverlay.vue'
+import LoadingOverlay from '@/components/Loading/LoadingOverlay.vue'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { useRouter } from 'vue-router'
+import { useFilmStore } from '@/stores'
+
+const router = useRouter()
+const start = ref(false)
+const showInstruction = ref<boolean>(false)
+
+type ResizeDirection = 'nw' | 'ne' | 'sw' | 'se'
+
+// 基础逻辑
+const back = (): void => router.back()
+
+const hideInstruction = (): void => {
+  showInstruction.value = false
+}
+
+const handleStart = (): void => {
+  start.value = true
+  showInstruction.value = true
+}
+
+// 截图功能
+const { isLoading, showModal, capturedImageUrl, capture } = useCanvasCapture()
+
+const handleModalClose = () => {
+  showModal.value = false
+}
+
+// 自由取景框模式
+const { viewfinderContainer, viewfinderBox, viewfinder, startDrag, startResize } = useViewfinderB()
+
+const handleStartDrag = (event: MouseEvent | TouchEvent): void => {
+  hideInstruction()
+  startDrag(event)
+}
+
+const handleStartResize = (direction: ResizeDirection, event: MouseEvent | TouchEvent): void => {
+  hideInstruction()
+  startResize(direction, event)
+}
+
+const showGuide = ref(false)
+const backgroundImage = ref<HTMLImageElement | null>(null)
+
+// Canvas 截图配置常量
+const UI_UPDATE_DELAY = 50 // UI 更新延迟（ms）
+const CANVAS_SCALE = 2 // Canvas 缩放比例（2倍高清）
+const GUIDE_SHOW_DELAY = 1000 // 引导显示延迟（ms）
+
+/**
+ * 截取场景
+ * 使用 Canvas 手动绘制，确保移动端兼容性
+ */
+/**
+ * 截取场景
+ * 使用 Canvas 手动绘制，确保移动端兼容性
+ */
+const captureScene = async (): Promise<void> => {
+  if (isLoading.value) return
+
+  hideInstruction()
+
+  await capture({
+    width: viewfinder.value.width,
+    height: viewfinder.value.height,
+    scale: CANVAS_SCALE,
+    delay: UI_UPDATE_DELAY,
+    onDraw: ctx => {
+      if (!backgroundImage.value) {
+        throw new Error('Background image not found')
+      }
+
+      // 计算图片实际尺寸和设计稿尺寸的缩放比例
+      // viewfinder 的坐标是基于设计稿尺寸（1920x1080）
+      // 但 backgroundImage 的实际尺寸可能不同
+      const imageScaleX = backgroundImage.value.naturalWidth / 1920
+      const imageScaleY = backgroundImage.value.naturalHeight / 1080
+
+      // 绘制背景图片的裁剪区域
+      // 将设计稿坐标转换为图片实际坐标
+      ctx.drawImage(
+        backgroundImage.value,
+        viewfinder.value.x * imageScaleX, // 源图 x（转换为实际坐标）
+        viewfinder.value.y * imageScaleY, // 源图 y（转换为实际坐标）
+        viewfinder.value.width * imageScaleX, // 源图 width（转换为实际坐标）
+        viewfinder.value.height * imageScaleY, // 源图 height（转换为实际坐标）
+        0, // 目标 x
+        0, // 目标 y
+        viewfinder.value.width, // 目标 width
+        viewfinder.value.height // 目标 height
+      )
+    },
+    onComplete: () => {
+      // 延迟显示引导
+      setTimeout(() => {
+        showGuide.value = true
+      }, GUIDE_SHOW_DELAY)
+    }
+  })
+}
+
+/**
+ * 完成引导，跳转到 Vlog 页面
+ */
+const handleComplete = () => {
+  showGuide.value = false
+  useFilmStore().setFilmUnlockProgress(3)
+  router.push({
+    name: 'Film'
+  })
+}
+</script>
+
+<template>
+  <div class="w-full h-full">
+    <div
+      class="relative w-full h-full bg-cover bg-center bg-no-repeat shooting-bg"
+      :style="{
+        backgroundImage: getBackgroundImage('film/shooting/油罐艺术公园模糊底图.png')
+      }"
+    >
+      <!-- 标题 -->
+      <ImgButton image="shooting/标题-取景地b.png" class="title-button absolute left-0" />
+
+      <!-- 返回按钮 -->
+      <ImgButton
+        image="shooting/返回.png"
+        class="back-button absolute right-0 z-50"
+        @click="back"
+      />
+
+      <p
+        v-if="start && showInstruction"
+        class="absolute left-1/2 -translate-x-1/2 top-[220px] z-30 text-red-500 text-4xl leading-normal font-bold"
+      >
+        操作说明：拖动取景框四角调整裁剪范围，点击“取景”键就完成啦！
+      </p>
+
+      <StartOverlay scene="b" v-if="!start" @start="handleStart" />
+
+      <!-- 取景 -->
+      <div class="absolute bottom-0 w-full h-full" v-else>
+        <!-- 隐藏的背景图片，用于 Canvas 绘制 -->
+        <img
+          ref="backgroundImage"
+          class="absolute inset-0 w-full h-full object-cover pointer-events-none opacity-0"
+          :src="getStaticImage('film/shooting/龙美术馆清晰图.png')"
+          alt=""
+          crossorigin="anonymous"
+        />
+
+        <!-- 取景框容器 -->
+        <div ref="viewfinderContainer" class="relative w-full h-full">
+          <!-- 四个方向的遮罩层 -->
+          <!-- 上遮罩 -->
+          <div
+            class="mask-layer absolute left-0 right-0 bg-black/60 pointer-events-none z-10"
+            :style="{
+              top: 0,
+              height: viewfinder.y + 'px'
+            }"
+          ></div>
+          <!-- 下遮罩 -->
+          <div
+            class="mask-layer absolute left-0 right-0 bg-black/60 pointer-events-none z-10"
+            :style="{
+              top: viewfinder.y + viewfinder.height + 'px',
+              bottom: 0
+            }"
+          ></div>
+          <!-- 左遮罩 -->
+          <div
+            class="mask-layer absolute left-0 bg-black/60 pointer-events-none z-10"
+            :style="{
+              top: viewfinder.y + 'px',
+              width: viewfinder.x + 'px',
+              height: viewfinder.height + 'px'
+            }"
+          ></div>
+          <!-- 右遮罩 -->
+          <div
+            class="mask-layer absolute right-0 bg-black/60 pointer-events-none z-10"
+            :style="{
+              top: viewfinder.y + 'px',
+              left: viewfinder.x + viewfinder.width + 'px',
+              height: viewfinder.height + 'px'
+            }"
+          ></div>
+
+          <!-- 可拖动调整的取景框 -->
+          <div
+            ref="viewfinderBox"
+            class="viewfinder-frame absolute border-4 border-white cursor-move z-20"
+            :style="{
+              left: viewfinder.x + 'px',
+              top: viewfinder.y + 'px',
+              width: viewfinder.width + 'px',
+              height: viewfinder.height + 'px'
+            }"
+            @mousedown="handleStartDrag"
+            @touchstart="handleStartDrag"
+          >
+            <!-- 九宫格辅助线 -->
+            <div class="grid-lines absolute inset-0 grid grid-cols-3 grid-rows-3">
+              <div
+                v-for="i in 9"
+                :key="i"
+                class="border border-white/40"
+                :class="{
+                  'border-t-0': i <= 3,
+                  'border-b-0': i >= 7,
+                  'border-l-0': (i - 1) % 3 === 0,
+                  'border-r-0': i % 3 === 0
+                }"
+              ></div>
+            </div>
+
+            <!-- 四个角的调整手柄 -->
+            <div
+              class="resize-handle absolute w-6 h-6 bg-white rounded-full -left-3 -top-3 cursor-nwse-resize"
+              @mousedown.stop="handleStartResize('nw', $event)"
+              @touchstart.stop="handleStartResize('nw', $event)"
+            ></div>
+            <div
+              class="resize-handle absolute w-6 h-6 bg-white rounded-full -right-3 -top-3 cursor-nesw-resize"
+              @mousedown.stop="handleStartResize('ne', $event)"
+              @touchstart.stop="handleStartResize('ne', $event)"
+            ></div>
+            <div
+              class="resize-handle absolute w-6 h-6 bg-white rounded-full -left-3 -bottom-3 cursor-nesw-resize"
+              @mousedown.stop="handleStartResize('sw', $event)"
+              @touchstart.stop="handleStartResize('sw', $event)"
+            ></div>
+            <div
+              class="resize-handle absolute w-6 h-6 bg-white rounded-full -right-3 -bottom-3 cursor-nwse-resize"
+              @mousedown.stop="handleStartResize('se', $event)"
+              @touchstart.stop="handleStartResize('se', $event)"
+            ></div>
+          </div>
+        </div>
+
+        <!-- 底部取景按钮 - 跟随取景框 -->
+        <div
+          class="capture-button-container absolute z-20 -translate-x-1/2 -translate-y-1/2"
+          :style="{
+            left: viewfinder.x + viewfinder.width / 2 + 'px',
+            top: viewfinder.y + viewfinder.height + 'px'
+          }"
+        >
+          <ImgButton class="w-36" image="shooting/按钮-取景" @click="captureScene" />
+        </div>
+      </div>
+
+      <!-- 结果弹窗 -->
+      <Overlay :visible="showModal" @close="handleModalClose">
+        <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
+          <!-- 截图内容 -->
+          <div v-if="capturedImageUrl" class="bg-white p-2 rounded-md -rotate-6">
+            <img :src="capturedImageUrl" alt="拍摄结果" />
+          </div>
+
+          <!-- 操作按钮 -->
+          <!-- <div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
+            <ImgButton image="shooting/按钮-前往下一个取景地" @click="handleFinish" />
+          </div> -->
+        </div>
+      </Overlay>
+    </div>
+
+    <LoadingOverlay :visible="isLoading" text="正在出片中..." />
+
+    <!-- 引导步骤 -->
+    <GuideSteps v-if="showGuide" positionOffsetY="80%" @complete="handleComplete">
+      <GuideStepsItem> 实地取景已全部完成，现在跟着我走进现场开始正式的拍摄吧~ </GuideStepsItem>
+    </GuideSteps>
+  </div>
+</template>
diff --git a/src/views/film/midterm-shooting/shooting/filmingLocation-b/useViewfinderB.ts b/src/views/film/midterm-shooting/shooting/filmingLocation-b/useViewfinderB.ts
new file mode 100644
index 0000000..9e4d4cd
--- /dev/null
+++ b/src/views/film/midterm-shooting/shooting/filmingLocation-b/useViewfinderB.ts
@@ -0,0 +1,291 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+import { getTouchDistance, getTouchCenter, getClientPosition } from '../utils/touchGestures'
+
+// 设计稿尺寸常量
+const DESIGN_WIDTH = 1920
+const DESIGN_HEIGHT = 1080
+
+/**
+ * 自由取景框模式的逻辑
+ * 支持拖动、四角调整大小、双指缩放
+ */
+export function useViewfinderB() {
+  // 取景框相关
+  const viewfinderContainer = ref<HTMLElement>()
+  const viewfinderBox = ref<HTMLElement>()
+  const viewfinder = ref({
+    x: 660, // (1920 - 600) / 2 = 660，居中
+    y: 340, // (1080 - 400) / 2 = 340，居中
+    width: 600,
+    height: 400
+  })
+
+  // 拖动相关状态
+  const isDragging = ref(false)
+  const dragStart = ref({ x: 0, y: 0 })
+
+  // 调整大小相关状态
+  const isResizing = ref(false)
+  const resizeCorner = ref<'nw' | 'ne' | 'sw' | 'se' | null>(null)
+  const resizeStart = ref({
+    x: 0,
+    y: 0,
+    boxX: 0,
+    boxY: 0,
+    boxWidth: 0,
+    boxHeight: 0
+  })
+
+  // 双指缩放相关状态
+  const isPinching = ref(false)
+  const pinchStart = ref({
+    distance: 0,
+    centerX: 0,
+    centerY: 0,
+    boxWidth: 0,
+    boxHeight: 0,
+    boxX: 0,
+    boxY: 0
+  })
+
+  // 将屏幕坐标转换为缩放后的本地坐标
+  const convertClientToLocal = (clientX: number, clientY: number) => {
+    if (!viewfinderContainer.value) return { x: clientX, y: clientY }
+
+    const containerRect = viewfinderContainer.value.getBoundingClientRect()
+
+    // 计算缩放比例
+    const scaleX = containerRect.width / DESIGN_WIDTH
+    const scaleY = containerRect.height / DESIGN_HEIGHT
+
+    // 计算相对于容器的坐标，并转换为设计稿坐标系
+    const localX = (clientX - containerRect.left) / scaleX
+    const localY = (clientY - containerRect.top) / scaleY
+
+    return { x: localX, y: localY }
+  }
+
+  // 开始拖动取景框
+  const startDrag = (e: MouseEvent | TouchEvent) => {
+    if (isResizing.value || isPinching.value) return
+
+    // 检测双指触摸
+    if ('touches' in e && e.touches.length === 2) {
+      // 双指缩放
+      isPinching.value = true
+      const touch1 = e.touches[0]
+      const touch2 = e.touches[1]
+
+      pinchStart.value = {
+        distance: getTouchDistance(touch1, touch2),
+        centerX: (touch1.clientX + touch2.clientX) / 2,
+        centerY: (touch1.clientY + touch2.clientY) / 2,
+        boxWidth: viewfinder.value.width,
+        boxHeight: viewfinder.value.height,
+        boxX: viewfinder.value.x,
+        boxY: viewfinder.value.y
+      }
+      e.preventDefault()
+      return
+    }
+
+    // 单指拖动
+    if ('touches' in e && e.touches.length !== 1) return
+
+    isDragging.value = true
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const localPos = convertClientToLocal(clientX, clientY)
+
+    dragStart.value = {
+      x: localPos.x - viewfinder.value.x,
+      y: localPos.y - viewfinder.value.y
+    }
+
+    e.preventDefault()
+  }
+
+  // 开始调整大小
+  const startResize = (corner: 'nw' | 'ne' | 'sw' | 'se', e: MouseEvent | TouchEvent) => {
+    isResizing.value = true
+    resizeCorner.value = corner
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const localPos = convertClientToLocal(clientX, clientY)
+
+    resizeStart.value = {
+      x: localPos.x,
+      y: localPos.y,
+      boxX: viewfinder.value.x,
+      boxY: viewfinder.value.y,
+      boxWidth: viewfinder.value.width,
+      boxHeight: viewfinder.value.height
+    }
+
+    e.preventDefault()
+  }
+
+  // 处理移动
+  const handleMove = (e: MouseEvent | TouchEvent) => {
+    if (!isDragging.value && !isResizing.value && !isPinching.value) return
+
+    // 处理双指缩放
+    if (isPinching.value && 'touches' in e && e.touches.length === 2) {
+      const touch1 = e.touches[0]
+      const touch2 = e.touches[1]
+
+      const currentDistance = getTouchDistance(touch1, touch2)
+      const scale = currentDistance / pinchStart.value.distance
+
+      // 计算新的尺寸
+      let newWidth = pinchStart.value.boxWidth * scale
+      let newHeight = pinchStart.value.boxHeight * scale
+
+      const minSize = 200
+
+      // 限制最小和最大尺寸
+      newWidth = Math.max(minSize, Math.min(newWidth, DESIGN_WIDTH))
+      newHeight = Math.max(minSize, Math.min(newHeight, DESIGN_HEIGHT))
+
+      // 保持中心点不变，计算新的位置
+      const center = getTouchCenter(touch1, touch2)
+      const localCenter = convertClientToLocal(center.x, center.y)
+
+      let newX = localCenter.x - newWidth / 2
+      let newY = localCenter.y - newHeight / 2
+
+      // 边界检测
+      newX = Math.max(0, Math.min(newX, DESIGN_WIDTH - newWidth))
+      newY = Math.max(0, Math.min(newY, DESIGN_HEIGHT - newHeight))
+
+      viewfinder.value.width = newWidth
+      viewfinder.value.height = newHeight
+      viewfinder.value.x = newX
+      viewfinder.value.y = newY
+
+      e.preventDefault()
+      return
+    }
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const localPos = convertClientToLocal(clientX, clientY)
+
+    if (isDragging.value && viewfinderContainer.value) {
+      // 拖动取景框
+      let newX = localPos.x - dragStart.value.x
+      let newY = localPos.y - dragStart.value.y
+
+      // 边界检测 - 使用设计稿尺寸
+      newX = Math.max(0, Math.min(newX, DESIGN_WIDTH - viewfinder.value.width))
+      newY = Math.max(0, Math.min(newY, DESIGN_HEIGHT - viewfinder.value.height))
+
+      viewfinder.value.x = newX
+      viewfinder.value.y = newY
+    } else if (isResizing.value && viewfinderContainer.value) {
+      // 调整取景框大小
+      const deltaX = localPos.x - resizeStart.value.x
+      const deltaY = localPos.y - resizeStart.value.y
+
+      const minSize = 200 // 最小尺寸
+
+      if (resizeCorner.value === 'se') {
+        // 右下角 - 使用设计稿尺寸限制
+        viewfinder.value.width = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxWidth + deltaX, DESIGN_WIDTH - viewfinder.value.x)
+        )
+        viewfinder.value.height = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxHeight + deltaY, DESIGN_HEIGHT - viewfinder.value.y)
+        )
+      } else if (resizeCorner.value === 'sw') {
+        // 左下角 - 使用设计稿尺寸限制
+        const newWidth = resizeStart.value.boxWidth - deltaX
+        const newX = resizeStart.value.boxX + deltaX
+        if (newWidth >= minSize && newX >= 0) {
+          viewfinder.value.x = newX
+          viewfinder.value.width = newWidth
+        }
+        viewfinder.value.height = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxHeight + deltaY, DESIGN_HEIGHT - viewfinder.value.y)
+        )
+      } else if (resizeCorner.value === 'ne') {
+        // 右上角 - 使用设计稿尺寸限制
+        const newHeight = resizeStart.value.boxHeight - deltaY
+        const newY = resizeStart.value.boxY + deltaY
+        if (newHeight >= minSize && newY >= 0) {
+          viewfinder.value.y = newY
+          viewfinder.value.height = newHeight
+        }
+        viewfinder.value.width = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxWidth + deltaX, DESIGN_WIDTH - viewfinder.value.x)
+        )
+      } else if (resizeCorner.value === 'nw') {
+        // 左上角 - 使用设计稿尺寸限制
+        const newWidth = resizeStart.value.boxWidth - deltaX
+        const newHeight = resizeStart.value.boxHeight - deltaY
+        const newX = resizeStart.value.boxX + deltaX
+        const newY = resizeStart.value.boxY + deltaY
+
+        if (newWidth >= minSize && newX >= 0) {
+          viewfinder.value.x = newX
+          viewfinder.value.width = newWidth
+        }
+        if (newHeight >= minSize && newY >= 0) {
+          viewfinder.value.y = newY
+          viewfinder.value.height = newHeight
+        }
+      }
+    }
+
+    e.preventDefault()
+  }
+
+  // 结束拖动或调整
+  const handleEnd = () => {
+    isDragging.value = false
+    isResizing.value = false
+    isPinching.value = false
+    resizeCorner.value = null
+  }
+
+  // 挂载时添加全局事件监听
+  onMounted(() => {
+    document.addEventListener('mousemove', handleMove)
+    document.addEventListener('mouseup', handleEnd)
+    document.addEventListener('touchmove', handleMove)
+    document.addEventListener('touchend', handleEnd)
+  })
+
+  // 卸载时移除事件监听
+  onUnmounted(() => {
+    document.removeEventListener('mousemove', handleMove)
+    document.removeEventListener('mouseup', handleEnd)
+    document.removeEventListener('touchmove', handleMove)
+    document.removeEventListener('touchend', handleEnd)
+  })
+
+  return {
+    // Refs
+    viewfinderContainer,
+    viewfinderBox,
+
+    // 状态
+    viewfinder,
+    isDragging,
+    isResizing,
+    isPinching,
+
+    // 方法
+    startDrag,
+    startResize,
+
+    // 常量
+    DESIGN_WIDTH,
+    DESIGN_HEIGHT
+  }
+}
diff --git a/src/views/film/midterm-shooting/shooting/index.vue b/src/views/film/midterm-shooting/shooting/index.vue
new file mode 100644
index 0000000..ecb0e6c
--- /dev/null
+++ b/src/views/film/midterm-shooting/shooting/index.vue
@@ -0,0 +1,210 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { Overlay } from '@/components/Overlay'
+import { ImgButton } from '@/components/Button'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
+import videoSrc from '/video/xinshou_jiuzhonggoutufa.mp4'
+import KnowledgeCard from '@/components/KnowledgeCard/FilmKnowledgeCard.vue'
+
+type Btn = {
+  key: string
+  name: string
+  btnImage: string
+  images: string[]
+  desc: string
+}
+
+const router = useRouter()
+
+const showModal = ref(false)
+
+const showModal2 = ref(false)
+const showModal3 = ref(false)
+const currentItem = ref<Btn>({
+  key: '',
+  name: '',
+  btnImage: '',
+  images: [],
+  desc: ''
+})
+
+const btnList = ref<Btn[]>([
+  {
+    key: '1',
+    name: '引导线构图',
+    btnImage: 'film/shooting/框架构图',
+    desc: '引导线构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用',
+    images: ['film/shooting/05引导线构图_底图', 'film/shooting/06引导线构图_底图']
+  },
+  {
+    key: '2',
+    name: '对称构图',
+    btnImage: 'film/shooting/对称构图',
+    desc: '对称构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调',
+    images: ['film/shooting/03对称构图_底图', 'film/shooting/04对称构图_底图']
+  },
+  {
+    key: '3',
+    name: '框架构图',
+    btnImage: 'film/shooting/引导线构图',
+    desc: '框架构图属于引导线构图的一种，所以也是借助引导线的视觉引导效果来突出强调主体。另外对角线构图在画面中制造出对角线的走向即可。',
+    images: ['film/shooting/01框架构图_底图', 'film/shooting/02框架构图_底图']
+  }
+])
+
+const handleModalClose = () => {
+  showModal.value = false
+}
+
+const handleClick = (item: any) => {
+  currentItem.value = item
+  showModal2.value = true
+}
+const currentCompositionKey = computed(() => {
+  const k = currentItem.value.key
+  if (k === '1' || k === '2' || k === '3') return k
+  return '1'
+})
+
+const handleClickA = () => {
+  // 跳转设备准备
+  router.push({ name: 'FilmFilmingLocationA' })
+}
+const handleClickB = () => {
+  // 跳转设备准备
+  router.push({ name: 'FilmFilmingLocationB' })
+}
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
+</script>
+<template>
+  <div class="relative w-full h-full">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat shooting-bg"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <div class="shooting-title">
+      <img :src="shootingtitle" alt="" />
+    </div>
+    <div class="shooting-return">
+      <ImgButton image="shooting/返回.png" @click="back" />
+    </div>
+    <div class="absolute left-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
+      <ImgButton image="film/shooting/龙美术馆入口.png" @click="handleClickA" />
+    </div>
+    <div class="absolute right-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
+      <ImgButton image="film/shooting/油罐艺术公园入口.png" @click="handleClickB" />
+    </div>
+    <div class="shooting-composition">
+      <ImgButton image="shooting/构图指南.png" @click="showModal = true" />
+    </div>
+
+    <!-- 引导步骤 -->
+    <GuideSteps
+      :highlight-selector="'.mybutton'"
+      :highlight-padding="12"
+      :highlight-radius="20"
+      position-offset-y="85%"
+    >
+      <GuideStepsItem> 哇，徐汇滨江真的超适合取景！一起看看可以运用哪些构图方法吧~ </GuideStepsItem>
+    </GuideSteps>
+
+    <!-- 保存图片弹窗 -->
+    <Overlay
+      :visible="showModal"
+      :clickable="false"
+      :customStyle="{
+        backgroundImage: getBackgroundImage('film/shooting/构图指南底图')
+      }"
+      customClass="inset-0 bg-cover bg-center bg-no-repeat"
+      contentClass="relative w-full h-full"
+    >
+      <!-- 返回 -->
+      <ImgButton
+        class="absolute right-0 top-0 z-10"
+        :image="IMAGE_PATHS.COMPONENTS.BACK"
+        @click="handleModalClose"
+      />
+
+      <!-- 构图指南 -->
+      <ImgButton class="absolute left-0 top-0 z-10" image="shooting/标题-构图指南" />
+
+      <!-- 新手导航视频 -->
+      <ImgButton
+        class="absolute left-28 top-[calc(50%-40px)] -translate-y-1/2"
+        image="shooting/新手导航-视频回顾"
+        @click="showModal3 = true"
+      />
+
+      <div class="absolute top-[30%] right-10">
+        <ImgButton
+          v-for="item in btnList"
+          :key="item.key"
+          :image="item.btnImage"
+          @click="handleClick(item)"
+        />
+      </div>
+
+      <!-- 知识卡片 -->
+      <KnowledgeCard
+        v-if="showModal2 && currentItem.key"
+        :visible="showModal2"
+        :title="currentItem.name"
+        :desc="currentItem.desc"
+        :images="currentItem.images"
+        :compositionKey="currentCompositionKey"
+        @close="showModal2 = false"
+      />
+      <!-- 视频 -->
+      <Overlay :visible="showModal3" :clickable="false">
+        <video :src="videoSrc" controls></video>
+        <!-- 返回 -->
+        <ImgButton
+          class="absolute right-0 top-0 z-10"
+          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+          @click="showModal3 = false"
+        />
+      </Overlay>
+    </Overlay>
+  </div>
+</template>
+<style lang="less" scoped>
+.shooting-title {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.shooting-return {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.shooting-left {
+  position: absolute;
+  left: 16%;
+  top: 50%;
+}
+
+.shooting-right {
+  position: absolute;
+  right: 16%;
+  top: 50%;
+}
+
+.shooting-composition {
+  position: absolute;
+  left: 2rem;
+  bottom: 1rem;
+}
+</style>
diff --git a/src/views/film/midterm-shooting/shooting/utils/touchGestures.ts b/src/views/film/midterm-shooting/shooting/utils/touchGestures.ts
new file mode 100644
index 0000000..ce27a3a
--- /dev/null
+++ b/src/views/film/midterm-shooting/shooting/utils/touchGestures.ts
@@ -0,0 +1,47 @@
+/**
+ * 触摸手势工具函数
+ * 用于处理触摸事件的通用计算
+ */
+
+/**
+ * 计算两个触摸点之间的距离
+ * @param touch1 第一个触摸点
+ * @param touch2 第二个触摸点
+ * @returns 两点之间的欧氏距离
+ */
+export const getTouchDistance = (touch1: Touch, touch2: Touch): number => {
+  const dx = touch1.clientX - touch2.clientX
+  const dy = touch1.clientY - touch2.clientY
+  return Math.sqrt(dx * dx + dy * dy)
+}
+
+/**
+ * 计算两个触摸点的中心坐标
+ * @param touch1 第一个触摸点
+ * @param touch2 第二个触摸点
+ * @returns 中心点坐标 {x, y}
+ */
+export const getTouchCenter = (touch1: Touch, touch2: Touch) => {
+  return {
+    x: (touch1.clientX + touch2.clientX) / 2,
+    y: (touch1.clientY + touch2.clientY) / 2
+  }
+}
+
+/**
+ * 从鼠标或触摸事件中获取客户端坐标
+ * @param e 鼠标事件或触摸事件
+ * @returns 客户端坐标 {x, y}
+ */
+export const getClientPosition = (e: MouseEvent | TouchEvent) => {
+  if ('touches' in e && e.touches.length > 0) {
+    return {
+      x: e.touches[0].clientX,
+      y: e.touches[0].clientY
+    }
+  }
+  return {
+    x: (e as MouseEvent).clientX,
+    y: (e as MouseEvent).clientY
+  }
+}
diff --git a/src/views/film/practice/index.vue b/src/views/film/practice/index.vue
new file mode 100644
index 0000000..f12dcfd
--- /dev/null
+++ b/src/views/film/practice/index.vue
@@ -0,0 +1,349 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { StarRating } from '@/components/Rating'
+import { useRouter } from 'vue-router'
+import BackToTopIcon from '@/assets/svg/back-to-top.svg'
+
+const router = useRouter()
+
+const TOTAL_PAGES = 3
+const PAGE_HEIGHT = 1080
+const SCROLL_DURATION = 1000
+
+const currentPage = ref<number>(0)
+const worksScrollIndex = ref<number>(0)
+const animatingToPage = ref<number>(0)
+const containerRef = ref<HTMLElement | null>(null)
+const isAnimating = ref<boolean>(false)
+
+/** 是否为最后一页 */
+const isLastPage = computed<boolean>(() => currentPage.value >= TOTAL_PAGES - 1)
+
+/** 是否正在从第二页回到第一页 */
+const isScrollingBackToFirst = computed<boolean>(() => {
+  return isAnimating.value && currentPage.value === 1 && animatingToPage.value === 0
+})
+
+/** 第一页坐着的人物是否显示 */
+const showSittingPerson = computed<boolean>(() => {
+  // 当前在第一页，且不是正在回滚中
+  return currentPage.value === 0 && !isScrollingBackToFirst.value
+})
+
+/** 他人实战作品列表 */
+interface WorkItem {
+  id: number
+  image: string
+  title: string
+  stars: number
+  path: string
+  description: string
+}
+
+const worksList = ref<WorkItem[]>([
+  {
+    id: 1,
+    image: 'https://picsum.photos/400/300?random=1',
+    title: '作品名称',
+    stars: 4,
+    path: '/video/practice/film_anli1.mp4',
+    description:
+      '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介'
+  }
+])
+
+/** 左滑动作品列表 */
+const scrollWorksLeft = (): void => {
+  if (worksScrollIndex.value > 0) {
+    worksScrollIndex.value--
+  }
+}
+
+/** 右滑动作品列表 */
+const scrollWorksRight = (): void => {
+  if (worksScrollIndex.value < worksList.value.length - 3) {
+    worksScrollIndex.value++
+  }
+}
+
+const handleClose = (): void => {
+  router.back()
+}
+
+/** 自定义平滑滚动动画 */
+const smoothScrollTo = (toPage: number): void => {
+  const container = containerRef.value
+  if (!container || isAnimating.value) return
+
+  isAnimating.value = true
+  animatingToPage.value = toPage
+  const startTop = container.scrollTop
+  const targetTop = toPage * PAGE_HEIGHT
+  const distance = targetTop - startTop
+  const startTime = performance.now()
+
+  /** easeInOutQuart 缓动函数 - 更平滑 */
+  const easeInOutQuart = (t: number): number => {
+    return t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2
+  }
+
+  const animateScroll = (currentTime: number): void => {
+    const elapsed = currentTime - startTime
+    const progress = Math.min(elapsed / SCROLL_DURATION, 1)
+    const easeProgress = easeInOutQuart(progress)
+
+    container.scrollTop = startTop + distance * easeProgress
+
+    if (progress < 1) {
+      requestAnimationFrame(animateScroll)
+    } else {
+      isAnimating.value = false
+      currentPage.value = toPage
+    }
+  }
+
+  requestAnimationFrame(animateScroll)
+}
+
+/** 滚动到指定页 */
+const scrollToPage = (page: number): void => {
+  const targetPage = Math.max(0, Math.min(page, TOTAL_PAGES - 1))
+  if (targetPage !== currentPage.value && !isAnimating.value) {
+    smoothScrollTo(targetPage)
+  }
+}
+
+/** 滚动到下一页 */
+const scrollToNextPage = (): void => {
+  scrollToPage(currentPage.value + 1)
+}
+
+/** 滚动到上一页 */
+const scrollToPrevPage = (): void => {
+  scrollToPage(currentPage.value - 1)
+}
+
+/** 回到顶部 */
+const scrollToTop = (): void => {
+  scrollToPage(0)
+}
+
+/** 处理鼠标滚轮事件 */
+const handleWheel = (event: WheelEvent): void => {
+  event.preventDefault()
+  if (isAnimating.value) return
+
+  if (event.deltaY > 0) {
+    scrollToNextPage()
+  } else if (event.deltaY < 0) {
+    scrollToPrevPage()
+  }
+}
+
+onMounted(() => {
+  containerRef.value?.addEventListener('wheel', handleWheel, { passive: false })
+})
+
+onUnmounted(() => {
+  containerRef.value?.removeEventListener('wheel', handleWheel)
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="w-full h-full overflow-auto">
+    <div class="relative min-h-full overflow-hidden">
+      <!-- 关闭 -->
+      <ImgButton
+        class="absolute right-0 top-0 z-50"
+        :image="IMAGE_PATHS.COMPONENTS.BACK"
+        @click="handleClose"
+      />
+      <!-- 实战操作台 -->
+      <div
+        class="w-full h-[1080px] bg-cover bg-no-repeat relative"
+        :style="{ backgroundImage: getBackgroundImage('film/practice/实战操作台首页- 电影感') }"
+      >
+        <ImgButton
+          class="absolute left-40 bottom-28 z-10"
+          image="vlog/practice/查看任务要求"
+          @click="scrollToNextPage"
+        />
+        <!-- img -->
+        <img
+          class="absolute right-0"
+          draggable="false"
+          :src="getStaticImage('vlog/practice/背景1')"
+          alt=""
+        />
+      </div>
+      <!-- 任务要求 -->
+      <div
+        class="w-full h-[1080px] bg-cover bg-no-repeat relative overflow-hidden"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/背景2') }"
+      >
+        <ImgButton
+          class="absolute right-20 bottom-0 z-99"
+          image="vlog/practice/我的创作笔记"
+          path="/film/practice/my-notes"
+        />
+
+        <div class="task-panel w-[757px] h-full ml-10 overflow-y-auto" @wheel.stop>
+          <img :src="getStaticImage('film/practice/滑动任务面板-电影感')" alt="" />
+        </div>
+
+        <img
+          class="absolute right-0 bottom-0 pointer-events-none"
+          :src="getStaticImage('vlog/practice/摄像机')"
+          alt=""
+        />
+        <!-- 站着的人物 - 第二页固定在此（不在回滚动画中） -->
+        <Transition name="fade">
+          <img
+            v-show="currentPage === 1 && !isScrollingBackToFirst"
+            class="absolute right-8 bottom-0 max-h-[90%] pointer-events-none"
+            draggable="false"
+            :src="getStaticImage('vlog/practice/摄像机-人')"
+            alt=""
+          />
+        </Transition>
+      </div>
+      <!-- 他人实战作品 -->
+      <div
+        class="w-full h-[1080px] bg-cover bg-no-repeat pt-44 px-16"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/他人实战作品') }"
+      >
+        <!-- 作品列表 -->
+        <div class="w-full overflow-hidden">
+          <div
+            class="flex gap-6 transition-transform duration-500"
+            :style="{ transform: `translateX(-${worksScrollIndex * 509}px)` }"
+          >
+            <div
+              v-for="work in worksList"
+              :key="work.id"
+              class="w-[503px] h-[722px] flex-shrink-0 rounded-[40px] overflow-hidden bg-[#FFF8F0] py-8 px-6"
+            >
+              <!-- 作品图片 -->
+              <div class="w-full h-[280px] rounded-2xl overflow-hidden">
+                <img class="w-full h-full object-cover" :src="work.image" :alt="work.title" />
+              </div>
+              <!-- 作品信息 -->
+              <div class="flex flex-col items-center pt-8 space-y-4">
+                <h3 class="text-5xl font-bold text-gray-800 mb-2">{{ work.title }}</h3>
+                <!-- 星星评分 -->
+                <StarRating :score="work.stars" size="lg" readonly />
+                <!-- 简介 -->
+                <p class="h-[110px] text-2xl text-gray-600 mb-3 line-clamp-3 leading-relaxed">
+                  {{ work.description }}
+                </p>
+                <!-- 查看按钮 -->
+                <ImgButton
+                  image="vlog/practice/查看"
+                  :path="`/film/practice/video/${encodeURIComponent(work.path)}`"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 指示按钮 -->
+        <div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex gap-16">
+          <img
+            class="cursor-pointer hover:scale-110 transition-transform"
+            :class="{ 'opacity-50 cursor-not-allowed': worksScrollIndex === 0 }"
+            :src="getStaticImage('vlog/practice/滑动左')"
+            alt="向左"
+            @click="scrollWorksLeft"
+          />
+          <img
+            class="cursor-pointer hover:scale-110 transition-transform rotate-180"
+            :class="{ 'opacity-50 cursor-not-allowed': worksScrollIndex >= worksList.length - 3 }"
+            :src="getStaticImage('vlog/practice/滑动左')"
+            alt="向右"
+            @click="scrollWorksRight"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 下滑按钮 - 最后一页隐藏 -->
+    <ImgButton
+      v-show="!isLastPage"
+      class="absolute bottom-0 left-1/2 -translate-x-1/2"
+      :image="'vlog/practice/下滑'"
+      @click="scrollToNextPage"
+    />
+
+    <!-- 回到顶部按钮 - 最后一页显示 -->
+    <img
+      v-show="isLastPage"
+      class="absolute bottom-10 right-10 cursor-pointer transition-all duration-300 hover:scale-105"
+      :src="BackToTopIcon"
+      @click="scrollToTop"
+    />
+
+    <!-- 跨页人物动画 -->
+    <div v-show="showSittingPerson || isScrollingBackToFirst" class="character-container">
+      <!-- 坐着的人物 - 第一页 -->
+      <Transition name="fade">
+        <img
+          v-show="showSittingPerson"
+          class="character-img right-20 bottom-10"
+          draggable="false"
+          :src="getStaticImage('vlog/practice/背景1-人')"
+          alt=""
+        />
+      </Transition>
+      <!-- 站着的人物 - 回滚动画中 -->
+      <Transition name="fade">
+        <img
+          v-show="isScrollingBackToFirst"
+          class="character-img right-8 bottom-0"
+          draggable="false"
+          :src="getStaticImage('vlog/practice/摄像机-人')"
+          alt=""
+        />
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 隐藏滚动条但保持可滚动 - 兼容主流浏览器 */
+.task-panel {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+.task-panel::-webkit-scrollbar {
+  display: none; /* Chrome/Safari/Opera */
+}
+
+/* 第一页人物动画容器 */
+.character-container {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 20;
+}
+
+.character-img {
+  position: absolute;
+  max-height: 90%;
+}
+
+/* 淡入淡出动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/views/film/practice/my-notes/index.vue b/src/views/film/practice/my-notes/index.vue
new file mode 100644
index 0000000..9c84e47
--- /dev/null
+++ b/src/views/film/practice/my-notes/index.vue
@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { StarRating } from '@/components/Rating'
+
+const router = useRouter()
+
+/** 笔记内容 */
+const noteContent = ref<string>('')
+
+/** 保存弹窗 */
+const showModal = ref<boolean>(false)
+
+/** 返回上一页 */
+const handleBack = (): void => {
+  router.back()
+}
+
+const disabled = computed<boolean>(() => noteContent.value.trim() === '')
+
+interface EvaluationItem {
+  /** 标题 */
+  title: string
+  /** 描述 */
+  description: string
+  /** 评分 */
+  score: number
+}
+
+/** 评估项目列表 */
+const evaluationItems = ref<EvaluationItem[]>([
+  {
+    title: '画面氛围',
+    description: '画面具有明确情绪或空间气质，整体风格统一',
+    score: 4
+  },
+  {
+    title: '拍摄方法',
+    description: '拍摄方式选择合理，镜头语言服务于画面表达',
+    score: 2
+  },
+  {
+    title: '剪辑逻辑',
+    description: '剪辑节奏清晰，镜头衔接自然，有整体感',
+    score: 5
+  },
+  {
+    title: '创作意识',
+    description: '能体现主动构思，而非随拍拼接',
+    score: 0
+  },
+  {
+    title: '综合观感',
+    description: '作品具有“电影感”，完成度高',
+    score: 5
+  }
+])
+const handleSave = (): void => {
+  console.log('保存笔记')
+  handleBack()
+}
+</script>
+
+<template>
+  <div
+    class="w-full h-full bg-no-repeat bg-cover px-8 pt-[400px]"
+    :style="{ backgroundImage: getBackgroundImage('film/practice/创作笔记底图-电影感') }"
+  >
+    <ImgButton
+      class="absolute top-0 right-0"
+      :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+      @click="handleBack"
+    />
+
+    <textarea
+      v-model="noteContent"
+      class="w-full h-[300px]"
+      name="myNotes"
+      placeholder="点击输入创作笔记"
+    ></textarea>
+
+    <div class="absolute bottom-24 left-1/2 -translate-x-1/2 flex gap-60">
+      <ImgButton image="vlog/practice/保存" @click="handleSave" />
+      <ImgButton image="vlog/practice/自评" :disabled="disabled" @click="showModal = true" />
+    </div>
+
+    <!-- 保存图片弹窗 -->
+    <Overlay :visible="showModal" :clickable="false">
+      <div
+        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[100px]"
+        :style="{ backgroundImage: getBackgroundImage('film/practice/评分底板-电影感') }"
+      >
+        <ImgButton
+          class="absolute -top-8 -right-14 z-10"
+          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+          @click="showModal = false"
+        />
+
+        <div class="relative h-full overflow-y-scroll px-8">
+          <div class="pl-10 space-y-10 mt-10">
+            <p class="glow-text">
+              评分时要关注5个维度哦～每个维度满分5分，能打1-5分，记得对照作品表现来打分呀～
+            </p>
+            <div
+              v-for="(item, index) in evaluationItems"
+              :key="index"
+              class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
+              :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
+            >
+              <div class="pr-8 space-y-10">
+                <h4 class="text-3xl font-bold text-white mb-3">
+                  {{ `0${index + 1}` }} {{ item.title }}
+                </h4>
+                <p class="text-3xl text-gray-800 font-bold leading-relaxed">
+                  {{ item.description }}
+                </p>
+              </div>
+              <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
+            </div>
+            <p class="glow-text">
+              己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～
+            </p>
+            <div class="w-full flex justify-center">
+              <ImgButton image="vlog/practice/保存" @click="showModal = false" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Overlay>
+  </div>
+</template>
+
+<style scoped>
+textarea {
+  border: none;
+  outline: none;
+  resize: none;
+  font-size: 36px;
+  background-color: transparent;
+}
+
+textarea::placeholder {
+  color: #5d5b5b;
+  font-weight: 700;
+}
+
+.glow-text {
+  color: white;
+  font-size: 2rem;
+  font-weight: bold;
+  text-shadow:
+    /* 描边效果 - 多层阴影模拟描边 */
+    -1px -1px 0 #0066ff,
+    1px -1px 0 #0066ff,
+    -1px 1px 0 #0066ff,
+    1px 1px 0 #0066ff,
+    -2px -2px 0 #0066ff,
+    2px -2px 0 #0066ff,
+    -2px 2px 0 #0066ff,
+    2px 2px 0 #0066ff,
+    /* 发光效果 - 蓝色光晕 */ 0 0 10px #0066ff,
+    0 0 20px #0066ff,
+    0 0 30px #0066ff,
+    0 0 40px #0066ff,
+    0 0 50px #0066ff;
+}
+</style>
diff --git a/src/views/film/practice/video/index.vue b/src/views/film/practice/video/index.vue
new file mode 100644
index 0000000..4120c50
--- /dev/null
+++ b/src/views/film/practice/video/index.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { Video } from '@/components'
+import { ImgButton } from '@/components/Button'
+import { StarRating } from '@/components/Rating'
+import { IMAGE_PATHS, getBackgroundImage } from '@/utils'
+import { Overlay } from '@/components/Overlay'
+import { ref } from 'vue'
+
+const router = useRouter()
+
+const props = defineProps({
+  path: {
+    type: String,
+    required: true
+  }
+})
+
+interface EvaluationItem {
+  /** 标题 */
+  title: string
+  /** 描述 */
+  description: string
+  /** 评分 */
+  score: number
+}
+
+/** 评估项目列表 */
+const evaluationItems = ref<EvaluationItem[]>([
+  {
+    title: '主题与内容',
+    description: '主题明确聚焦"身边美好"，内容真实、有感染力，能让观众感受到日常闪光',
+    score: 3
+  },
+  {
+    title: '拍摄技巧',
+    description: '运镜自然、光线运用合理、画面清晰饱和度、能辅助主题表达（至少1种运镜+1种光线）',
+    score: 4
+  },
+  {
+    title: '剪辑与包装',
+    description: '素材拼接流畅，调色/滤镜适配、字幕清晰、音乐不盖人声、整体风格统一',
+    score: 5
+  },
+  {
+    title: '创意与独特性',
+    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”,避免平淡复刻',
+    score: 4
+  },
+  {
+    title: '综合感受',
+    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”避免平淡复刻',
+    score: 5
+  }
+])
+
+/** 保存弹窗 */
+const showModal = ref<boolean>(false)
+
+/** 返回上一页 */
+const handleBack = (): void => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <ImgButton
+      class="absolute right-0 top-0 z-50"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+    <ImgButton
+      class="absolute right-0 bottom-10 z-50"
+      image="vlog/practice/评分"
+      @click="showModal = true"
+    />
+    <Video
+      :src="decodeURIComponent(props.path)"
+      :volume="1"
+      :muted="false"
+      :controls="true"
+      :loop="false"
+    />
+
+    <!-- 保存图片弹窗 -->
+    <Overlay :visible="showModal" :clickable="false">
+      <div
+        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[80px]"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分底板') }"
+      >
+        <ImgButton
+          class="absolute -top-8 -right-14 z-10"
+          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+          @click="showModal = false"
+        />
+
+        <div class="relative h-full overflow-y-scroll px-8">
+          <div
+            class="w-full bg-no-repeat bg-cover bg-left py-44"
+            :style="{ backgroundImage: getBackgroundImage('vlog/practice/滑动表内文字') }"
+          >
+            <div class="pl-10 space-y-16">
+              <div
+                v-for="(item, index) in evaluationItems"
+                :key="index"
+                class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
+                :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
+              >
+                <div class="pr-8 space-y-10">
+                  <h4 class="text-3xl font-bold text-white mb-3">
+                    {{ `0${index + 1}` }} {{ item.title }}
+                  </h4>
+                  <p class="text-3xl text-gray-800 font-bold leading-relaxed">
+                    {{ item.description }}
+                  </p>
+                </div>
+                <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
+              </div>
+              <div class="w-full flex justify-center">
+                <ImgButton image="vlog/practice/保存" @click="showModal = false" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Overlay>
+  </div>
+</template>
diff --git a/src/views/film/resource/index.vue b/src/views/film/resource/index.vue
new file mode 100644
index 0000000..45b2962
--- /dev/null
+++ b/src/views/film/resource/index.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { IMAGE_PATHS, getStaticImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const back = () => {
+  router.back()
+}
+</script>
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="back"
+    />
+    <!-- 背景 -->
+    <img class="absolute inset-0" :src="getStaticImage('film/img/背景.png')" alt="" />
+
+    <!-- 标题 -->
+    <img class="absolute top-5 z-10" :src="getStaticImage('film/img/资源筹备-标题.png')" alt="" />
+
+    <!-- 内容 -->
+    <div class="relative h-full pt-28 overflow-y-scroll">
+      <img :src="getStaticImage('film/img/资源筹备.png')" alt="" />
+    </div>
+  </div>
+</template>
diff --git a/src/views/prepare/script-writing/doubao.vue b/src/views/film/script-writing/doubao.vue
similarity index 100%
rename from src/views/prepare/script-writing/doubao.vue
rename to src/views/film/script-writing/doubao.vue
diff --git a/src/views/film/script-writing/index.vue b/src/views/film/script-writing/index.vue
new file mode 100644
index 0000000..410304c
--- /dev/null
+++ b/src/views/film/script-writing/index.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { IMAGE_PATHS, getPublicPath, getStaticImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Video } from '@/components'
+import { useRouter } from 'vue-router'
+import { ImagePreview } from '@/components'
+import { useScale } from '@/composables/useScale'
+
+const router = useRouter()
+
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
+
+const { scale, offsetX, offsetY } = useScale()
+const handleOpenImages = () => {
+  ImagePreview({
+    images: [getStaticImage('film/脚本编写-拍摄脚本')],
+    startIndex: 0,
+    maskClosable: true,
+    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
+  })
+}
+</script>
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="back"
+    />
+    <!-- 背景 -->
+    <img class="absolute inset-0" :src="getStaticImage('film/img/背景.png')" alt="" />
+
+    <!-- 标题 -->
+    <img class="absolute top-5 z-10" :src="getStaticImage('film/img/脚本编写-标题.png')" alt="" />
+
+    <!-- 内容 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none]  -->
+    <div class="relative h-full pt-28 overflow-y-scroll">
+      <img :src="getStaticImage('film/img/脚本编写.png')" alt="" />
+
+      <div class="absolute top-60 left-36 w-[1000px] h-[700px] rounded-2xl overflow-hidden">
+        <Video
+          :src="getPublicPath('video/jiaoben.mp4')"
+          playsinline
+          controls
+          :volume="1"
+          :muted="false"
+        />
+      </div>
+
+      <button
+        class="absolute top-[1480px] left-[calc(50%+55px)] -translate-x-1/2 w-[240px] h-[80px]"
+        @click="handleOpenImages"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/views/film/script-writing/sample.vue b/src/views/film/script-writing/sample.vue
new file mode 100644
index 0000000..8dd6635
--- /dev/null
+++ b/src/views/film/script-writing/sample.vue
@@ -0,0 +1,180 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImagePreview } from '@/components'
+import { useScale } from '@/composables/useScale'
+import { useFilmStore } from '@/stores'
+const router = useRouter()
+const showDoubao = ref(false)
+const film = useFilmStore()
+const steps = [
+  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
+  { id: 'step2', content: '这是主要内容区域的边框' }
+]
+
+const stepIndex = ref(1)
+const back = () => {
+  router.back()
+}
+
+interface SimpleStep {
+  id: string
+  content: string
+}
+
+const handleStepChange = (_step: SimpleStep | null, index: number) => {
+  stepIndex.value = index
+}
+
+const currentHighlight = computed(() =>
+  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
+)
+
+const clickdoubao = () => {
+  film.setFilmUnlockProgress(2)
+  router.push({
+    name: 'Film'
+  })
+}
+
+function openImages(urls: string[], startIndex = 0) {
+  ImagePreview({
+    images: urls,
+    startIndex,
+    maskClosable: true,
+    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value }),
+    onClose: () => {
+      showDoubao.value = true
+    }
+  })
+}
+
+const { scale, offsetX, offsetY } = useScale()
+onMounted(() => {
+  openImages([getStaticImage('vlog/脚本切图/我的志愿者手记拍摄脚本.png')])
+})
+</script>
+<template>
+  <div class="writing-index">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat writing-bg"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BIAOGEBG) }"
+    >
+      <div>
+        <div class="writing-title">
+          <img src="@/assets/images/vlog/标题栏-中间.png" alt="" class="titledibu" />
+          <img
+            src="@/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》分镜头脚本.png"
+            alt=""
+            class="titletext"
+          />
+        </div>
+        <div class="doubao" @click="clickdoubao">
+          <img
+            src="@/assets/images/vlog/制作变焦镜/ai脚本视频占位图.png"
+            alt=""
+            class="doubao-img"
+          />
+        </div>
+        <div class="shooting-return">
+          <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
+        </div>
+      </div>
+
+      <!-- <div v-else>
+        <div class="writing-title">
+          <img src="@/assets/images/vlog/标题栏-中间.png" alt="" class="titledibu" />
+          <img
+            src="@/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》分镜头脚本.png"
+            alt=""
+            class="titletext"
+          />
+        </div>
+        <div class="biaogehome" @click="deletebiaoge()">
+          <img
+            src="@/assets/images/vlog/脚本切图/我的志愿者手记拍摄脚本.png"
+            alt=""
+            class="biaoge-img"
+          />
+          <img src="@/assets/images/midterm/叉.png" alt="" class="biaoge-x" />
+        </div>
+        <div class="shooting-return">
+          <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
+        </div>
+      </div> -->
+
+      <!-- 引导步骤 -->
+      <GuideSteps
+        v-if="showDoubao"
+        :steps="steps"
+        :highlight-selector="currentHighlight"
+        :highlight-padding="12"
+        :highlight-radius="20"
+        @step-change="handleStepChange"
+        position-offset-y="85%"
+      >
+        <GuideStepsItem>
+          <img src="@/assets/images/components/引导/ai脚本工具引导.png" alt="" />
+        </GuideStepsItem>
+      </GuideSteps>
+    </div>
+  </div>
+</template>
+<style lang="less" scoped>
+.writing-index {
+  width: 100%;
+  height: 100%;
+}
+
+.shooting-return {
+  position: absolute;
+  right: -90%;
+  top: 0;
+  width: 50%;
+  height: 50%;
+}
+
+.doubao .doubao-img {
+  width: 100%;
+  height: 100%;
+}
+
+.biaoge-x {
+  position: absolute;
+  top: -20px;
+  right: 0px;
+  width: 70px;
+  cursor: pointer;
+  z-index: 9999999;
+}
+
+.writing-title {
+  .titledibu {
+    position: absolute;
+    top: 17px;
+    left: 30%;
+  }
+
+  .titletext {
+    position: absolute;
+    top: 30px;
+    left: 40%;
+  }
+}
+
+.biaogehome {
+  position: absolute;
+  top: 165px;
+  left: 5%;
+  width: 94%;
+}
+
+.biaogehome .biaoge-img {
+  height: 896px !important;
+  width: 1800px;
+  display: block;
+}
+</style>
diff --git a/src/views/film/script-writing/writing.vue b/src/views/film/script-writing/writing.vue
new file mode 100644
index 0000000..99524ee
--- /dev/null
+++ b/src/views/film/script-writing/writing.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="writing-index">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat writing-bg"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.SCRIPTING) }"
+    >
+      <div class="geshi-title">
+        <img src="@/assets/images/vlog/标题栏-中间.png" alt="" class="titledibu" />
+        <img
+          src="@/assets/images/vlog/制作变焦镜/文字标题/脚本的概念和基本要素.png"
+          alt=""
+          class="titletext"
+        />
+      </div>
+      <video :src="fourth" controls></video>
+      <!-- <div class="shooting-return">
+        <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
+      </div> -->
+      <!-- 引导步骤 -->
+      <!-- <GuideSteps :steps="steps" :highlight-selector="currentHighlight" :highlight-padding="12"
+                :highlight-radius="20" @step-change="handleStepChange" position-offset-y="85%" hidden:false>
+                <GuideStepsItem>
+                    <img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
+                </GuideStepsItem>
+            </GuideSteps> -->
+    </div>
+  </div>
+</template>
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import fourth from '/video/vlog_renwuqujing_jiaobencehua.mp4'
+</script>
+<style lang="less" scoped>
+.writing-index {
+  width: 100%;
+  height: 100%;
+}
+
+.geshi-title {
+  .titledibu {
+    position: absolute;
+    top: 17px;
+    left: 30%;
+  }
+
+  .titletext {
+    position: absolute;
+    top: 30px;
+    left: 45%;
+  }
+}
+
+.shooting-return {
+  position: absolute;
+  right: -90%;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/film/storyboard/index.vue b/src/views/film/storyboard/index.vue
new file mode 100644
index 0000000..3123671
--- /dev/null
+++ b/src/views/film/storyboard/index.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { IMAGE_PATHS, getStaticImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { useRouter } from 'vue-router'
+import { useScale } from '@/composables/useScale'
+import { ImagePreview } from '@/components'
+
+const { scale, offsetX, offsetY } = useScale()
+
+const router = useRouter()
+
+const back = () => {
+  router.back()
+}
+
+const handleOpenImages = () => {
+  ImagePreview({
+    images: [getStaticImage('film/分镜制作-拍摄分镜')],
+    startIndex: 0,
+    maskClosable: true,
+    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
+  })
+}
+</script>
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="back"
+    />
+    <!-- 背景 -->
+    <img class="absolute inset-0" :src="getStaticImage('film/img/背景.png')" alt="" />
+
+    <!-- 标题 -->
+    <img class="absolute top-5 z-10" :src="getStaticImage('film/img/分镜制作-标题.png')" alt="" />
+
+    <!-- 内容 -->
+    <div class="relative h-full pt-28 overflow-y-scroll">
+      <img :src="getStaticImage('film/img/分镜制作.png')" alt="" />
+
+      <button
+        class="absolute top-[2510px] left-[calc(50%+22px)] -translate-x-1/2 w-[240px] h-[80px]"
+        @click="handleOpenImages"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/views/film/video/index.vue b/src/views/film/video/index.vue
new file mode 100644
index 0000000..67d7cd0
--- /dev/null
+++ b/src/views/film/video/index.vue
@@ -0,0 +1,316 @@
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+import { GuideSteps, StepNavigation } from '@/components/Guide'
+import { Video, QuestionQuiz, type Question } from '@/components'
+import { getStaticImage, IMAGE_PATHS } from '@/utils'
+import second from '/video/vlog_renwuqujing_jichujingbieyunyong.mp4'
+import third from '/video/vlog_renwuqujing_huamiangoutu.mp4'
+import fourth from '/video/vlog_renwuqujing_jiaobencehua.mp4'
+import five from '/video/vlog_renwuqujing_zhuapai.mp4'
+import six from '/video/vlog_renwuqujing_jianjipingjie.mp4'
+import { useFilmStore } from '@/stores'
+
+const router = useRouter()
+const route = useRoute()
+
+const film = useFilmStore()
+
+// 受控播放开关（用于切换到下一个视频时自动播放）
+const playing = ref(false)
+const status = ref(false)
+const showQuiz = ref(false) // 控制是否显示答题窗口
+
+//引导步骤
+const steps = ref([
+  {
+    id: 'step1',
+    content: '试着用这些方法记录身边的小事，你会发现，原来平凡的日子里有这么多值得捕捉的瞬间。'
+  }
+])
+
+// 步骤导航数据
+const navigationSteps = ref([
+  {
+    id: 'step1',
+    label: '',
+    content: '遮幅',
+    type: 'shooting' as const
+  },
+  {
+    id: 'step2',
+    label: '',
+    content: '光线',
+    type: 'shooting' as const
+  },
+  {
+    id: 'step3',
+    label: '',
+    content: '虚实',
+    type: 'planning' as const
+  },
+  {
+    id: 'step4',
+    label: '',
+    content: '特写镜头',
+    type: 'shooting' as const
+  },
+  {
+    id: 'step5',
+    label: '',
+    content: '分镜头',
+    type: 'post' as const
+  },
+  {
+    id: 'step5',
+    label: '',
+    content: '滤镜',
+    type: 'post' as const
+  },
+  {
+    id: 'step5',
+    label: '',
+    content: '同期声',
+    type: 'post' as const
+  }
+])
+
+// 步骤导航相关状态
+const showStepNavigation = ref(false)
+const currentNavigationStep = ref(1) // 对应视频索引，从0开始
+
+// 视频列表
+const videoList = [second, third, fourth, five, six, five, six]
+const currentVideoIndex = ref(0)
+
+// 题目数据：虚实（index 2）和分镜头（index 4）
+const questions = ref<Question[]>([])
+
+// 根据当前视频索引获取对应的题目
+const getQuestionsForVideo = (index: number): Question[] => {
+  // 虚实（index 2）
+  if (index === 2) {
+    return [
+      {
+        id: 1,
+        title: '交互题 1',
+        description: '下面两个画面,哪一个更具电影叙事感?',
+        options: [
+          {
+            id: 'a',
+            label: '前景、人物、背景全部清晰'
+          },
+          {
+            id: 'b',
+            label: '前景虚化,人物清晰,背景有层次'
+          }
+        ],
+        correctOptionId: 'b',
+        explanation:
+          '电影感的画面,往往会主动模糊一部分信息。这是为了把观众的注意力,留给正在发生的情绪。'
+      }
+    ]
+  }
+  // 分镜头（index 4）
+  if (index === 4) {
+    return [
+      {
+        id: 2,
+        title: '交互题2',
+        description: '下面哪一组镜头顺序,更符合电影叙事逻辑?',
+        options: [
+          {
+            id: 'a',
+            label: '特写→中景→ 全景'
+          },
+          {
+            id: 'b',
+            label: '全景→ 中景→ 特写'
+          }
+        ],
+        correctOptionId: 'b',
+        explanation: '电影里的镜头, 往往是从环境进入人物,再进入情绪。'
+      }
+    ]
+  }
+  return []
+}
+
+//按顺序播放
+const currentVideo = computed(() => videoList[currentVideoIndex.value])
+const resolvedSrc = computed(() => {
+  if (key.value === 'case') return '/video/anlishangxi_meishi_xiaoyuanzi.mp4'
+  if (key.value === 'profession') return currentVideo.value
+  return ''
+})
+const handleVideoChange = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+    currentNavigationStep.value = currentVideoIndex.value
+  } else {
+    status.value = true
+    steps.value = [
+      {
+        id: 'step1',
+        content: '恭喜你，已完成专业剖析的学习，点击【查看脚本】回顾视频脚本吧!'
+      }
+    ]
+    return
+  }
+  nextTick(() => {
+    // 使用受控播放来触发下一个视频自动播放
+    playing.value = true
+  })
+}
+
+const handleClose = () => {
+  router.back()
+}
+
+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 handleClick = () => {}
+
+const handlePlay = () => {
+  console.log(1)
+}
+
+const onEnded = () => {
+  if (key.value === 'profession') {
+    // 检查是否是"虚实"（index 2）或"分镜头"（index 4）
+    if (currentVideoIndex.value === 2 || currentVideoIndex.value === 4) {
+      // 暂停播放并显示答题窗口
+      playing.value = false
+      questions.value = getQuestionsForVideo(currentVideoIndex.value)
+      showQuiz.value = true
+    } else {
+      // 其他视频正常切换
+      handleVideoChange()
+    }
+  }
+}
+
+const handleComplete = () => {
+  if (key.value === 'profession') {
+    if (!film.isFilmUnlock) film.setIsFilmUnlock(true)
+    router.push({
+      name: 'FilmWork'
+    })
+  } else {
+    if (film.FilmUnlockProgress == 0) film.setFilmUnlockProgress(1)
+    router.push({
+      name: 'Film'
+    })
+  }
+}
+
+// 步骤导航事件处理
+const handleStepClick = (index: number) => {
+  // 关闭答题窗口（如果打开）
+  showQuiz.value = false
+  currentVideoIndex.value = index
+  currentNavigationStep.value = index
+  nextTick(() => {
+    playing.value = true
+  })
+}
+
+const handleStepNavigationClose = () => {
+  showStepNavigation.value = false
+}
+
+// 答题完成后的处理
+const handleQuestionsComplete = () => {
+  showQuiz.value = false
+  // 答题完成后继续播放下一个视频
+  handleVideoChange()
+}
+
+onMounted(() => {
+  if (key.value === 'idea') {
+    status.value = true
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-full relative bg-white/10" @click="handleClick">
+    <template v-if="key !== 'case' && key !== 'profession'">
+      <ImgButton
+        class="absolute right-0 top-0 z-10"
+        :image="IMAGE_PATHS.COMPONENTS.BACK"
+        @click="handleClose"
+      />
+    </template>
+    <!-- 步骤导航按钮 -->
+    <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"
+      @click="showStepNavigation = true"
+      title="步骤导航"
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+          d="M3 4H17M3 8H17M3 12H17M3 16H17"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </svg>
+    </button>
+
+    <Video
+      v-if="key === 'case' || key === 'profession'"
+      :src="resolvedSrc"
+      v-model="playing"
+      :muted="false"
+      :volume="1"
+      :controls="true"
+      :hideNativeControls="true"
+      @play="handlePlay"
+      @ended="onEnded"
+    >
+      <template #overlay>
+        <ImgButton
+          class="absolute right-0 top-0 z-10 pointer-events-auto"
+          :image="IMAGE_PATHS.COMPONENTS.BACK"
+          @click="handleClose"
+        />
+        <QuestionQuiz
+          v-if="showQuiz && key === 'profession'"
+          :show-question-number="false"
+          :questions="questions"
+          @complete="handleQuestionsComplete"
+        />
+      </template>
+    </Video>
+    <div v-else-if="key === 'idea'" :src="image">
+      <img :src="getStaticImage('film/思路提点全屏')" alt="" />
+    </div>
+  </div>
+
+  <!-- 引导与高亮 -->
+  <GuideSteps v-if="status" :steps="steps" position-offset-y="85%" @complete="handleComplete" />
+
+  <!-- 步骤导航抽屉 -->
+  <StepNavigation
+    :visible="showStepNavigation && key === 'profession'"
+    :background-image="getStaticImage('work/vlog背景全屏待定')"
+    :steps="navigationSteps"
+    :current-step-index="currentNavigationStep"
+    @step-click="handleStepClick"
+    @close="handleStepNavigationClose"
+  />
+</template>
+
+<style scoped>
+video {
+  width: 100%;
+  height: 100%;
+  /* 核心：保持视频比例，多余部分被裁剪 */
+  object-fit: cover;
+}
+</style>
diff --git a/src/views/film/work/components/WorkSideSwitcher.vue b/src/views/film/work/components/WorkSideSwitcher.vue
new file mode 100644
index 0000000..6bc3bc8
--- /dev/null
+++ b/src/views/film/work/components/WorkSideSwitcher.vue
@@ -0,0 +1,66 @@
+<template>
+  <ImageSwitchList
+    v-model="innerValue"
+    :items="items"
+    direction="vertical"
+    :item-class="itemClass"
+    @change="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { ImageSwitchList } from '@/components/Switcher'
+import { computed } from 'vue'
+
+type WorkTab = 'case' | 'profession' | 'idea'
+
+interface Props {
+  modelValue?: WorkTab
+  itemClass?: string
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: WorkTab): void
+  (e: 'change', value: WorkTab): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 'case',
+  itemClass: 'w-[260px] h-[64px] rounded-[18px]'
+})
+
+const emit = defineEmits<Emits>()
+
+const innerValue = computed({
+  get: () => props.modelValue as WorkTab,
+  set: (val: WorkTab) => emit('update:modelValue', val)
+})
+
+const items = [
+  // { key: 'vlog', activeImage: 'work/vlog初识-当前', inactiveImage: 'work/vlog初识-未选中' },
+  {
+    key: 'case',
+    label: '案例赏析',
+    activeImage: 'work/选中_带三角',
+    inactiveImage: 'work/未选中_带三角'
+  },
+  {
+    key: 'profession',
+    label: '专业剖析',
+    activeImage: 'work/选中_带三角',
+    inactiveImage: 'work/未选中_带三角'
+  },
+  {
+    key: 'idea',
+    label: '思路提点',
+    activeImage: 'work/选中_带三角',
+    inactiveImage: 'work/未选中_带三角'
+  }
+]
+
+const onChange = (val: string) => emit('change', val as WorkTab)
+
+defineExpose({
+  items
+})
+</script>
diff --git a/src/views/film/work/index.vue b/src/views/film/work/index.vue
new file mode 100644
index 0000000..96badd1
--- /dev/null
+++ b/src/views/film/work/index.vue
@@ -0,0 +1,194 @@
+<script lang="tsx" name="Work" setup>
+defineOptions({ name: 'Work' })
+import { ref, computed } from 'vue'
+import { getBackgroundImage, IMAGE_PATHS, getStaticImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import WorkSideSwitcher from './components/WorkSideSwitcher.vue'
+import { GuideSteps } from '@/components/Guide'
+import { useRouter } from 'vue-router'
+import { useScale } from '@/composables/useScale'
+import { ImagePreview } from '@/components'
+import { useFilmStore } from '@/stores'
+
+const router = useRouter()
+
+const film = useFilmStore()
+
+type WorkTab = 'case' | 'profession' | 'idea'
+
+const selected = ref<WorkTab>('case')
+const stepIndex = ref(0)
+const workSideSwitcherRef = ref<InstanceType<typeof WorkSideSwitcher>>()
+
+const isGuideFilmTask = computed(() => film.isGuideFilmTask)
+const isFilmUnlock = computed(() => film.isFilmUnlock)
+
+//引导步骤
+const steps = [
+  {
+    id: 'step1',
+    content: '经常听到有人赞叹：“这个镜头真高级。”'
+  },
+  { id: 'step2', content: '那么什么样的镜头才算是好镜头？又是什么让画面显得更高级？' }
+]
+
+//切换图片
+const sideSwitcherItems = ref([
+  {
+    key: 'case',
+    name: '案例赏析',
+    description: '物件春秋-上海钟表文化科普馆',
+    image: 'film/案件赏析小屏'
+  },
+  {
+    key: 'profession',
+    name: '专业剖析',
+    description: '物件春秋-上海钟表文化科普馆',
+    image: 'film/案件赏析小屏'
+  },
+  {
+    key: 'idea',
+    name: '思路提点',
+    description: '物件春秋-上海钟表文化科普馆',
+    image: 'film/思路提点小屏'
+  }
+])
+
+//当前选中的item
+const currentItem = computed(() => {
+  return sideSwitcherItems.value.find(item => item.key === selected.value)
+})
+
+const currentHighlight = computed(() =>
+  stepIndex.value === 0 ? '.img-switch-item--case' : '.work-border'
+)
+
+interface SimpleStep {
+  id: string
+  content: string
+}
+const handleStepChange = (_step: SimpleStep | null, index: number) => {
+  stepIndex.value = index
+}
+
+const handleSideSwitcherChange = (value: WorkTab) => {
+  if (selected.value === value) return
+}
+
+const handleImageClick = () => {
+  const currentItem = workSideSwitcherRef.value?.items.find(item => item.key === selected.value)
+  router.push({
+    name: 'FilmVideo',
+    query: {
+      image: currentItem?.activeImage || '',
+      key: selected.value,
+      label: currentItem?.label || ''
+    }
+  })
+}
+
+const handleClose = () => {
+  router.push({ name: 'Film' })
+}
+
+const handleWorkClick = () => {
+  if (!isFilmUnlock.value) return
+  openImages([getStaticImage('work/桂花酒酿小圆子')])
+}
+const handleGuideComplete = () => {
+  film.setIsGuideFilmTask(false)
+}
+
+const handleOpenGuide = () => {
+  stepIndex.value = 0
+  film.setIsGuideFilmTask(true)
+}
+
+const { scale, offsetX, offsetY } = useScale()
+
+function openImages(urls: string[], startIndex = 0) {
+  ImagePreview({
+    images: urls,
+    startIndex,
+    maskClosable: true,
+    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
+  })
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative">
+    <!-- 背景图片-center -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage('film/任务取景框背景') }"
+    ></div>
+
+    <!-- 关闭 -->
+    <ImgButton
+      class="absolute right-0 top-0"
+      :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+      @click="handleClose"
+    />
+
+    <!-- border图片 -->
+    <div
+      class="work-border absolute top-[140px] left-24 inset-0 bg-cover bg-center bg-no-repeat z-10 w-[1360px] h-[800px] p-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.BORDER) }"
+    >
+      <div
+        class="flex items-center pl-16 w-[1357px] h-[265px] absolute -bottom-16 left-0 bg-cover bg-center bg-no-repeat z-20"
+        :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.TITLE) }"
+      >
+        <span
+          class="mt-24 text-white font-bold text-6xl [text-shadow:0_2px_4px_rgba(0,0,0,0.2),0_0_6px_rgba(0,207,255,0.9),0_0_14px_rgba(0,207,255,0.7)]"
+        >
+          {{ currentItem?.description }}</span
+        >
+      </div>
+      <img
+        @click="handleImageClick"
+        class="rounded-[62px] cursor-pointer"
+        :src="getStaticImage(currentItem?.image || '')"
+        alt=""
+      />
+    </div>
+
+    <!-- 左侧选项切换 -->
+    <div class="absolute right-4 top-56 z-20">
+      <WorkSideSwitcher
+        ref="workSideSwitcherRef"
+        v-model="selected"
+        @change="handleSideSwitcherChange"
+        :item-class="'w-[359px] h-[96px]'"
+      />
+    </div>
+
+    <!-- 任务取景按钮 -->
+    <ImgButton
+      class="absolute right-14 bottom-10"
+      :image="isFilmUnlock ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
+      @click="handleWorkClick"
+    />
+
+    <!-- 引导与高亮 -->
+    <GuideSteps
+      v-if="isGuideFilmTask"
+      :steps="steps"
+      :highlight-selector="currentHighlight"
+      :highlight-padding="12"
+      :highlight-radius="20"
+      @step-change="handleStepChange"
+      @complete="handleGuideComplete"
+      @skip="handleGuideComplete"
+      position-offset-y="85%"
+    />
+
+    <!-- 引导词按钮 -->
+    <ImgButton
+      class="absolute w-[120px] bottom-0 right-0 z-10"
+      image="components/long"
+      @click="handleOpenGuide"
+    />
+  </div>
+</template>
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
deleted file mode 100644
index 80726e0..0000000
--- a/src/views/guide/index.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="guide-page w-full h-full relative"></div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped>
-.guide-page {
-  @apply bg-black;
-}
-</style>
diff --git a/src/views/home/action.vue b/src/views/home/action.vue
index fad8304..0f55b17 100644
--- a/src/views/home/action.vue
+++ b/src/views/home/action.vue
@@ -1,25 +1,29 @@
 <script lang="ts" setup>
-import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { getBackgroundImage, IMAGE_PATHS, getStaticImage } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import { ModuleSwitcher } from './components/ModuleSwitcher'
-import { computed, ref, onMounted } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores'
 
 const router = useRouter()
+const user = useUserStore()
 
 // 响应式状态
-const status = ref(false)
 const guideShow = ref(false)
-const selectedModule = ref<'vlog' | 'film' | 'interview'>('vlog')
+const selectedModule = ref<'vlog' | 'film' | 'interview'>('film')
 const isImageLoading = ref(false)
 
 // 预加载图片映射
 const imageMap = {
   vlog: IMAGE_PATHS.ACTION.VIDEO1,
-  film: IMAGE_PATHS.ACTION.VIDEO3,
-  interview: IMAGE_PATHS.ACTION.VIDEO2
+  film: IMAGE_PATHS.ACTION.VIDEO2,
+  interview: IMAGE_PATHS.ACTION.VIDEO3
 }
 
+//获取新手导航引导状态
+const isGuideNewUser = computed(() => user.isGuideNewUser)
+
 // 预加载所有图片
 const preloadImages = () => {
   const imageUrls = Object.values(imageMap).map(path => getBackgroundImage(path))
@@ -36,7 +40,9 @@ const handleOpenGuide = () => {
 
 const handleCloseGuide = () => {
   guideShow.value = false
-  status.value = true
+  if (isGuideNewUser.value) {
+    user.setIsGuideNewUser(false)
+  }
 }
 
 const handleModuleChange = (module: 'vlog' | 'film' | 'interview') => {
@@ -52,6 +58,7 @@ const handleModuleChange = (module: 'vlog' | 'film' | 'interview') => {
 }
 
 const handleClick = () => {
+  console.log(selectedModule.value.charAt(0).toUpperCase() + selectedModule.value.slice(1))
   router.push({
     //首字母大写
     name: selectedModule.value.charAt(0).toUpperCase() + selectedModule.value.slice(1)
@@ -69,10 +76,86 @@ const handleSkill = () => {
   })
 }
 
+// 新手导航数据
+const nodes = [
+  {
+    id: 1,
+    num: '1',
+    label: '三大基础要素',
+    x: 20,
+    y: 30,
+    hasChildren: true,
+    children: [
+      { id: 1, label: '构图', icon: 'home/action/新手导航构图', routeName: 'Composition' },
+      { id: 2, label: '光', icon: 'home/action/新手导航光', routeName: 'Light' },
+      { id: 3, label: '运镜', icon: 'home/action/新手导航运镜', routeName: 'CameraMovement' }
+    ]
+  },
+  {
+    id: 2,
+    num: '2',
+    label: '基础拍摄技巧',
+    x: 50,
+    y: 60,
+    hasChildren: false,
+    routeName: 'BasicShootingSkills'
+  },
+  {
+    id: 3,
+    num: '3',
+    label: '短视频剪辑技巧',
+    x: 80,
+    y: 30,
+    hasChildren: false,
+    routeName: 'ShortVideoEditingSkills'
+  }
+]
+
+// 显示子节点的节点ID
+const showChildrenNodeId = ref<number | null>(null)
+
+// 处理节点点击
+const handleNodeClick = (node: any, event?: MouseEvent) => {
+  if (event) {
+    event.stopPropagation()
+  }
+
+  if (node.hasChildren) {
+    // 如果点击的是有子节点的节点，切换显示状态
+    if (showChildrenNodeId.value === node.id) {
+      showChildrenNodeId.value = null
+    } else {
+      showChildrenNodeId.value = node.id
+    }
+  } else {
+    // 如果点击的是没有子节点的节点，直接跳转
+    if (node.routeName) {
+      router.push({ name: node.routeName })
+    }
+  }
+}
+
+// 处理子节点点击
+const handleChildNodeClick = (childNode: any, event: MouseEvent) => {
+  event.stopPropagation()
+  if (childNode.routeName) {
+    router.push({ name: childNode.routeName })
+  }
+}
+
+// 点击外部关闭子节点
+const handleClickOutside = () => {
+  showChildrenNodeId.value = null
+}
+
 // 生命周期
 onMounted(() => {
   preloadImages()
 })
+
+onUnmounted(() => {
+  // 清理工作
+})
 </script>
 
 <template>
@@ -98,14 +181,14 @@ onMounted(() => {
 
     <!-- 技能树 按钮 -->
     <ImgButton
-      v-if="status"
+      v-if="!isGuideNewUser"
       @click="handleSkill"
       :image="IMAGE_PATHS.ACTION.SKILLS_BTN"
       class="absolute bottom-0 right-0 z-30"
     />
 
     <!-- 新手指导遮罩 -->
-    <div v-if="!status" class="absolute inset-0 bg-black/50 z-10"></div>
+    <div v-if="isGuideNewUser" class="absolute inset-0 bg-black/50 z-10"></div>
 
     <!-- 新手指导 -->
     <div
@@ -120,20 +203,131 @@ onMounted(() => {
     </div>
 
     <div
-      class="cursor-pointer absolute bottom-0 left-0 w-full h-[911px] bg-cover bg-center bg-no-repeat z-40"
+      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"
+        class="absolute top-60 right-1/2 translate-x-1/2 z-50"
         @click="handleCloseGuide"
       />
-      <img
-        class="absolute bottom-0 left-1/2 -translate-x-1/2"
-        :src="getStaticImage('home/新手导航')"
-        alt=""
-      />
+
+      <!-- 新手导航内容 -->
+      <div class="relative w-[880px] h-[400px] mt-20">
+        <div class="w-full h-full relative" @click="handleClickOutside">
+          <!-- 标题区域 -->
+          <div class="text-center mt-10 mb-8">
+            <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]">
+            <!-- 连线 (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"
+              />
+              <!-- 节点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"
+              />
+              <!-- 节点3 -> 右侧装饰线 -->
+              <line
+                :x1="nodes[2].x + '%'"
+                :y1="nodes[2].y + '%'"
+                x2="100%"
+                y2="45%"
+                stroke="#7bfffd"
+                stroke-width="5"
+                stroke-linecap="round"
+              />
+            </svg>
+
+            <!-- 节点 -->
+            <div
+              v-for="node in nodes"
+              :key="node.id"
+              class="absolute transform -translate-x-1/2 -translate-y-1/2"
+              :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="w-24 h-24 rounded-full flex items-center justify-center text-5xl font-bold text-white z-10 relative 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>
+                </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>
+
+              <!-- 子节点图标（当点击三大基础要素时显示） -->
+              <div
+                v-if="node.hasChildren && showChildrenNodeId === node.id"
+                class="absolute -top-40 left-1/2 transform -translate-x-1/2 flex z-20"
+              >
+                <div
+                  v-for="childNode in node.children"
+                  :key="childNode.id"
+                  class="flex flex-col items-center cursor-pointer"
+                  @click.stop="handleChildNodeClick(childNode, $event)"
+                >
+                  <!-- 图标 -->
+                  <div
+                    class="w-36 flex items-center justify-center transition-all duration-300 hover:scale-110"
+                  >
+                    <img :src="getStaticImage(childNode.icon)" :alt="childNode.label" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/views/home/components/ModuleSwitcher/ModuleSwitcher.vue b/src/views/home/components/ModuleSwitcher/ModuleSwitcher.vue
index 588046b..dce30c3 100644
--- a/src/views/home/components/ModuleSwitcher/ModuleSwitcher.vue
+++ b/src/views/home/components/ModuleSwitcher/ModuleSwitcher.vue
@@ -67,7 +67,7 @@ const moduleConfigs: ModuleConfig[] = [
     }
   },
   {
-    type: 'film',
+    type: 'interview',
     normalImage: IMAGE_PATHS.ACTION.MODULE_BTN2,
     selectedImage: IMAGE_PATHS.ACTION.SELECTED_BTN2,
     className: 'w-[1087px] h-[822px] left-[calc(50%+50px)] -translate-x-1/2 -bottom-4',
@@ -86,7 +86,7 @@ const moduleConfigs: ModuleConfig[] = [
     }
   },
   {
-    type: 'interview',
+    type: 'film',
     normalImage: IMAGE_PATHS.ACTION.MODULE_BTN3,
     selectedImage: IMAGE_PATHS.ACTION.SELECTED_BTN3,
     className: 'w-[943px] h-[822px] right-[320px] -bottom-4',
diff --git a/src/views/afterditing/adjustmentColor.vue b/src/views/interview/after-editing/adjustmentColor.vue
similarity index 96%
rename from src/views/afterditing/adjustmentColor.vue
rename to src/views/interview/after-editing/adjustmentColor.vue
index 23c364d..baa3ab4 100644
--- a/src/views/afterditing/adjustmentColor.vue
+++ b/src/views/interview/after-editing/adjustmentColor.vue
@@ -7,7 +7,7 @@ import { IMAGE_PATHS } from '@/utils'
 const router = useRouter()
 
 // 导入视频文件
-import videoadjustmentColor from '/video/Vlog模块_制作变焦镜_后期剪辑_调色.mp4'
+import videoadjustmentColor from '/video/vlog_renwuqujing_tiaose.mp4'
 const videoList = [videoadjustmentColor]
 
 const videoRef = ref<HTMLVideoElement>()
diff --git a/src/views/interview/after-editing/color.vue b/src/views/interview/after-editing/color.vue
new file mode 100644
index 0000000..b4a15d8
--- /dev/null
+++ b/src/views/interview/after-editing/color.vue
@@ -0,0 +1,304 @@
+<script lang="ts" setup>
+import router from '@/router'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { ref } from 'vue'
+import ImageFilter from '@/components/ImageFilter/ImageFilter.vue'
+import { useInterviewStore } from '@/stores'
+
+const selected = ref<number | undefined>(1)
+const btnState = ref(false)
+const screenshot = ref()
+const showModal = ref(false)
+const activeTab = ref<'color' | 'filter'>('color') // 'color' | 'filter'
+
+const adjustmentList = ref([
+  { name: '亮度', value: 0, min: -100, max: 100 },
+  { name: '对比度', value: 0, min: -100, max: 100 },
+  { name: '饱和度', value: 0, min: -100, max: 100 },
+  { name: '曝光', value: 0, min: -100, max: 100 },
+  { name: '色调', value: 0, min: 0, max: 100 },
+  { name: '锐化', value: 0, min: 0, max: 100 },
+  { name: '模糊', value: 0, min: 0, max: 100 }
+])
+
+const colorBarList = ref([
+  { id: 1, name: '原图', filter: 'none' },
+  { id: 2, name: '暖阳', filter: 'sepia(0.3) contrast(1.1) brightness(1.1)' },
+  { id: 3, name: '冷调', filter: 'hue-rotate(180deg) contrast(0.9)' },
+  { id: 4, name: '复古', filter: 'sepia(0.6) contrast(1.2) brightness(0.9)' },
+  { id: 5, name: '黑白', filter: 'grayscale(1)' },
+  { id: 6, name: '鲜艳', filter: 'saturate(1.5) contrast(1.1)' }
+])
+
+// 获取指定参数的值
+// 获取指定参数的值
+const imageFilterRef = ref<InstanceType<typeof ImageFilter> | null>(null)
+
+// 获取指定参数的值
+const getVal = (name: string) => {
+  const val = adjustmentList.value.find(item => item.name === name)?.value || 0
+  return Number(val)
+}
+
+// 更新滤镜效果
+const updateFilter = () => {
+  if (!imageFilterRef.value) return
+
+  // 如果开启了对比模式（显示原图），则不应用任何滤镜
+  if (btnState.value) {
+    imageFilterRef.value.setOptions({
+      brightness: 0,
+      contrast: 0,
+      saturation: 0,
+      exposure: 0,
+      hue: 0,
+      blur: 0,
+      sharpen: 0,
+      filter: 'none'
+    })
+    return
+  }
+
+  const selectedFilter = colorBarList.value.find(v => v.id === selected.value)?.filter || 'none'
+
+  imageFilterRef.value.setOptions({
+    brightness: getVal('亮度'),
+    contrast: getVal('对比度'),
+    saturation: getVal('饱和度'),
+    exposure: getVal('曝光'),
+    hue: getVal('色调'),
+    blur: getVal('模糊'),
+    sharpen: getVal('锐化'),
+    filter: selectedFilter
+  })
+}
+
+const changeOriginalImgae = () => {
+  btnState.value = !btnState.value
+  updateFilter()
+}
+
+// Tab 切换处理
+const handleTabChange = (tab: 'color' | 'filter') => {
+  activeTab.value = tab
+  // 切换时重置所有参数
+  handleReset()
+}
+
+// 重置所有参数
+const handleReset = () => {
+  adjustmentList.value.forEach(item => (item.value = 0))
+  selected.value = 1
+  updateFilter()
+}
+
+// 生成图片
+const handleGenerate = async () => {
+  if (!imageFilterRef.value) return
+
+  try {
+    const dataUrl = await imageFilterRef.value.generate()
+    screenshot.value = dataUrl
+    showModal.value = true
+  } catch (error) {
+    console.error('生成图片失败:', error)
+  }
+}
+
+const handleModalClose = () => {
+  showModal.value = false
+  screenshot.value = null
+}
+
+const handleTryOther = () => {
+  showModal.value = false
+}
+
+const handleFinish = () => {
+  useInterviewStore().setInterviewUnlockProgress(4)
+
+  router.push({
+    name: 'Interview'
+  })
+}
+
+const handleClose = () => {
+  router.back()
+}
+
+const changeColor = (item: { id: number; name: string }) => {
+  selected.value = item.id
+  updateFilter()
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative pt-44">
+    <!-- 返回 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+
+    <!-- 背景图片-center -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{
+        backgroundImage: getBackgroundImage('after-editing/color/底图')
+      }"
+    ></div>
+
+    <div class="flex h-[759px] justify-center space-x-12">
+      <!-- 效果图 -->
+      <div
+        class="relative w-[1273px] h-[732px] bg-no-repeat bg-cover mt-10 p-2 pb-[26px] pr-[26px]"
+        :style="{ backgroundImage: getBackgroundImage('after-editing/color/图片框.png') }"
+      >
+        <ImageFilter ref="imageFilterRef" :src="getStaticImage('after-editing/color/图片')" />
+
+        <!-- 开启对比 -->
+        <ImgButton
+          class="absolute top-2 right-6 flex-[0_0_200px]"
+          @click="changeOriginalImgae"
+          :image="
+            btnState
+              ? 'after-editing/color/开启对比 - 可开启'
+              : 'after-editing/color/开启对比 - 不可开启'
+          "
+        ></ImgButton>
+      </div>
+
+      <!-- 滤镜/参数配置 -->
+      <div>
+        <div
+          class="w-[445px] h-[759px] bg-no-repeat bg-cover p-2 rounded-xl"
+          :style="{ backgroundImage: getBackgroundImage('after-editing/color/小底板') }"
+        >
+          <!-- tab切换 -->
+          <header class="flex h-[75px] items-center justify-center space-x-4">
+            <div @click="handleTabChange('color')">
+              <ImgButton
+                :image="
+                  activeTab !== 'color'
+                    ? 'after-editing/color/调色-暗'
+                    : 'after-editing/color/调色-亮'
+                "
+              />
+            </div>
+            <div @click="handleTabChange('filter')">
+              <ImgButton
+                :image="
+                  activeTab !== 'filter'
+                    ? 'after-editing/color/滤镜-暗'
+                    : 'after-editing/color/滤镜-亮'
+                "
+              />
+            </div>
+          </header>
+          <!-- tab-content -->
+          <div class="px-4 h-[calc(100%-75px)]">
+            <!-- 调色内容 -->
+            <div
+              v-show="activeTab === 'color'"
+              class="space-y-6 h-full overflow-y-auto custom-scrollbar pt-4"
+            >
+              <div v-for="item in adjustmentList" :key="item.name" class="px-2">
+                <div class="flex justify-between text-[#648ab2] text-2xl font-bold mb-2">
+                  <span>{{ item.name }}</span>
+                  <span>{{ item.value }}</span>
+                </div>
+                <input
+                  type="range"
+                  v-model.number="item.value"
+                  :min="item.min"
+                  :max="item.max"
+                  @change="updateFilter"
+                  class="w-full h-3 bg-[#b8cfe7] rounded-lg appearance-none cursor-pointer slider-thumb"
+                />
+              </div>
+            </div>
+
+            <!-- 滤镜内容 -->
+            <div
+              v-show="activeTab === 'filter'"
+              class="space-y-10 h-full overflow-y-auto custom-scrollbar pt-10"
+            >
+              <div
+                v-for="item in colorBarList"
+                :key="item.id"
+                :style="{
+                  backgroundImage:
+                    selected == item.id
+                      ? getBackgroundImage('after-editing/color/滤镜-选中')
+                      : getBackgroundImage('after-editing/color/滤镜-未选中')
+                }"
+                :class="[
+                  'mx-auto w-[373px] h-[62px] text-white text-2xl font-bold flex items-center justify-center cursor-pointer bg-no-repeat bg-contain bg-center transition-all hover:scale-105',
+                  selected !== item.id && 'text-gray-700'
+                ]"
+                @click="changeColor(item)"
+              >
+                <span>{{ item.name }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-around mt-4">
+          <!-- 重置 -->
+          <ImgButton image="after-editing/color/重置" @click="handleReset" />
+          <!-- 生成 -->
+          <ImgButton image="after-editing/color/生成" @click="handleGenerate" />
+        </div>
+      </div>
+    </div>
+
+    <!-- title -->
+    <img class="absolute top-0 left-0" :src="getStaticImage('after-editing/color/标题-调色实践')" />
+
+    <!-- 保存图片弹窗 -->
+    <Overlay :visible="showModal" @close="handleModalClose">
+      <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
+        <!-- 截图内容 -->
+        <div class="bg-white p-2 rounded-md -rotate-6">
+          <img :src="screenshot" alt="调色结果" />
+        </div>
+        <!-- <img :src="screenshot" alt="调色结果" class="max-w-full max-h-full object-contain rotate-2" /> -->
+        <!-- 操作按钮 -->
+        <div class="absolute bottom-1/2 -left-1/3 translate-y-1/2">
+          <ImgButton image="after-editing/color/按钮-试试其他调色" @click="handleTryOther" />
+        </div>
+        <div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
+          <ImgButton image="after-editing/color/按钮-结束调色实践" @click="handleFinish" />
+        </div>
+      </div>
+    </Overlay>
+  </div>
+</template>
+
+<style scoped>
+/* 自定义滑块样式 */
+.slider-thumb::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 34px;
+  height: 34px;
+  background: #92c6f2;
+  border: 3px solid #ffffff;
+  border-radius: 4px;
+  cursor: pointer;
+  box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.4);
+}
+
+.slider-thumb::-moz-range-thumb {
+  width: 34px;
+  height: 34px;
+  background: #92c6f2;
+  border: 3px solid #ffffff;
+  border-radius: 4px;
+  cursor: pointer;
+  box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.4);
+}
+</style>
diff --git a/src/views/afterditing/editing.vue b/src/views/interview/after-editing/editing.vue
similarity index 84%
rename from src/views/afterditing/editing.vue
rename to src/views/interview/after-editing/editing.vue
index 5c8a7fa..266edb4 100644
--- a/src/views/afterditing/editing.vue
+++ b/src/views/interview/after-editing/editing.vue
@@ -7,10 +7,10 @@ import { IMAGE_PATHS } from '@/utils'
 const router = useRouter()
 
 // 导入视频文件
-import videoBasic from '/video/Vlog模块_制作变焦镜_后期剪辑_基础剪辑操作.mp4'
-import videoSoundeffect from '/video/Vlog模块_制作变焦镜_后期剪辑_音效处理.mp4'
-import videoPackaging from '/video/Vlog模块_制作变焦镜_后期剪辑_包装(AI 字幕生成与样式调整).mp4'
-import videoCopyright from '/video/Vlog模块_制作变焦镜_后期剪辑_版权伦理规范.mp4'
+import videoBasic from '/video/vlog_zhizuobianjiaojing_jichujianji.mp4'
+import videoSoundeffect from '/video/vlog_renwuqujing_yingxiaochuli.mp4'
+import videoPackaging from '/video/vlog_renwuqujing_baozhuang.mp4'
+import videoCopyright from '/video/vlog_renwuqujing_banquanguifan.mp4'
 const videoList = [videoBasic, videoSoundeffect, videoPackaging, videoCopyright]
 
 const videoRef = ref<HTMLVideoElement>()
diff --git a/src/views/interview/components/menu.vue b/src/views/interview/components/menu.vue
new file mode 100644
index 0000000..764680d
--- /dev/null
+++ b/src/views/interview/components/menu.vue
@@ -0,0 +1,171 @@
+<script lang="tsx" setup>
+import { getStaticImage } from '@/utils'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { getBackgroundImage } from '@/utils'
+defineOptions({ name: 'VlogMenu' })
+
+/**
+ * 菜单项 （前期准备、中期拍摄、后期剪辑）
+ * 前期准备-资源筹备、创意构想、脚本撰写、分镜制作
+ * 中期拍摄-设备准备、实地取景、现场拍摄
+ * 后期剪辑-素材管理、剪辑、调色、导出发布
+ */
+const category = ref([
+  {
+    label: '前期准备',
+    value: 1,
+    icon: getStaticImage('midterm/准备图标.png')
+  },
+  {
+    label: '中期拍摄',
+    value: 2,
+    icon: getStaticImage('midterm/拍摄图标.png')
+  },
+  {
+    label: '后期剪辑',
+    value: 3,
+    icon: getStaticImage('midterm/剪辑图标.png')
+  }
+])
+const menuItems = ref([
+  {
+    label: '资源筹备',
+    routeName: 'InterviewResource',
+    parentValue: 1,
+    disabled: true
+  },
+  {
+    label: '创意构想',
+    routeName: 'InterviewCreative',
+    parentValue: 1,
+    disabled: true
+  },
+  {
+    label: '脚本撰写',
+    routeName: 'InterviewScriptWriting',
+    parentValue: 1,
+    disabled: false
+  },
+  {
+    label: '分镜制作',
+    routeName: 'InterviewStoryboard',
+    parentValue: 1,
+    disabled: true
+  },
+  {
+    label: '设备准备',
+    routeName: 'InterviewMidtermEquipment',
+    parentValue: 2,
+    disabled: false
+  },
+  {
+    label: '实地取景',
+    routeName: 'InterviewMidtermShooting',
+    parentValue: 2,
+    disabled: false
+  },
+  {
+    label: '现场拍摄',
+    routeName: 'Interview现场拍摄',
+    parentValue: 2,
+    disabled: true
+  },
+  {
+    label: '素材管理',
+    routeName: 'Interview素材管理',
+    parentValue: 3,
+    disabled: true
+  },
+  {
+    label: '剪辑',
+    routeName: 'InterviewEditing',
+    parentValue: 3,
+    disabled: false
+  },
+  {
+    label: '调色',
+    routeName: 'InterviewColor',
+    parentValue: 3,
+    disabled: false
+  },
+  {
+    label: '导出发布',
+    routeName: 'Interview导出发布',
+    parentValue: 3,
+    disabled: true
+  }
+])
+
+const props = defineProps<{
+  currentStep: number
+}>()
+
+const router = useRouter()
+
+const currentParentValue = computed<number>(() => {
+  return props.currentStep
+}) // 当前选中的父级菜单项
+
+const currentItemValue = ref<string>('') // 当前选中的子级菜单项
+
+const getMenuItems = computed(() => {
+  return menuItems.value.filter(item => item.parentValue === currentParentValue.value)
+})
+
+const handleItemClick = (item: { routeName: string; disabled: boolean }) => {
+  if (item.disabled) return
+  currentItemValue.value = item.routeName
+  router.push({ name: item.routeName })
+}
+</script>
+
+<template>
+  <div class="absolute left-20 top-0 bottom-0 w-[520px] pt-28" v-if="currentStep">
+    <!-- 分类名称 -->
+    <div class="absolute top-3 left-24 flex items-center space-x-2">
+      <span class="text-4xl text-[#fbbf24] font-black">{{
+        category[currentParentValue - 1].label
+      }}</span>
+      <img class="filter-blue" :src="category[currentParentValue - 1].icon" alt="" />
+    </div>
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-left bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage('components/menu-bg.png') }"
+    ></div>
+    <div class="flex items-center flex-col pl-[60px]">
+      <template v-for="(item, index) in getMenuItems" :key="item.routeName">
+        <div
+          class="relative w-[373px] h-[143px] pl-14 flex items-center justify-center group text-4xl font-black transition-colors"
+          :class="[
+            currentItemValue === item.routeName ? 'text-blue-400' : 'text-white',
+            item.disabled ? 'opacity-20 cursor-not-allowed' : 'cursor-pointer'
+          ]"
+          :style="{ marginLeft: -index * 40 + 'px' }"
+          @click="handleItemClick(item)"
+        >
+          <div
+            v-if="!item.disabled"
+            class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+            :style="{ backgroundImage: getBackgroundImage('components/menu-hover.png') }"
+          ></div>
+          <span :class="[!item.disabled ? 'menu-glow-text' : '']">{{ item.label }}</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.filter-blue {
+  filter: brightness(0) saturate(100%) invert(79%) sepia(29%) saturate(1190%) hue-rotate(330deg)
+    brightness(102%) contrast(98%);
+}
+
+.menu-glow-text {
+  text-shadow:
+    0 0 40px rgba(0, 180, 255, 0.9),
+    0 0 20px rgba(0, 180, 255, 0.7);
+}
+</style>
diff --git a/src/views/interview/index.vue b/src/views/interview/index.vue
new file mode 100644
index 0000000..01a8ea4
--- /dev/null
+++ b/src/views/interview/index.vue
@@ -0,0 +1,111 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+
+import { onMounted, ref } from 'vue'
+import { ProgressBar, Overlay } from '@/components'
+import { useRouter } from 'vue-router'
+import { useInterviewStore } from '@/stores'
+import InterviewMenu from './components/menu.vue'
+
+const router = useRouter()
+const interview = useInterviewStore()
+const visible = ref(false)
+
+const currentStep = ref(interview.InterviewUnlockProgress)
+
+const handleComplete = () => {
+  // console.log('完成前置条件')
+  // 处理完成逻辑
+  router.push({ name: 'InterviewPractice' })
+}
+
+const handleStepChange = (step: number) => {
+  // 处理步骤变化逻辑
+  currentStep.value = step
+  visible.value = true
+}
+
+const handleWorkClick = () => {
+  console.log('任务取景按钮点击')
+  // 处理任务取景按钮点击逻辑
+  router.push({ name: 'InterviewWork' })
+}
+
+const handleClose = () => {
+  router.push({ name: 'Action' })
+}
+
+onMounted(() => {
+  if (currentStep.value !== 0 && currentStep.value !== 4) {
+    visible.value = true
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-full relative">
+    <!-- 背景图片-center -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
+    ></div>
+
+    <!-- 关闭 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+      @click="handleClose"
+    />
+
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG) }"
+    ></div>
+
+    <!-- 标题 -->
+    <div class="absolute top-2 left-1/2 -translate-x-1/2">
+      <ImgButton :image="IMAGE_PATHS.VLOG.TITLE" />
+    </div>
+
+    <!-- 任务取景按钮 -->
+    <div
+      class="absolute left-24 top-24"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
+    >
+      <ImgButton
+        :image="currentStep === 4 ? IMAGE_PATHS.VLOG.TASK_BTN_OK : IMAGE_PATHS.VLOG.TASK_BTN"
+        @click="handleWorkClick"
+      />
+    </div>
+
+    <!-- 引导任务 -->
+    <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" />
+
+    <Overlay content-class="w-full h-full" :visible="visible && currentStep < 4">
+      <!-- 关闭按钮 -->
+      <ImgButton
+        class="absolute right-0 top-0 z-20"
+        :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+        @click="visible = false"
+      />
+
+      <!-- 菜单 -->
+      <InterviewMenu :current-step="currentStep" />
+
+      <!-- 进度条 -->
+      <div class="absolute left-0 bottom-0 w-full">
+        <ProgressBar :current-step="currentStep" @step-change="handleStepChange" />
+      </div>
+    </Overlay>
+
+    <div class="absolute bottom-0 w-full">
+      <ProgressBar
+        :current-step="currentStep"
+        @complete="handleComplete"
+        @step-change="handleStepChange"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/views/midterm-shooting/equipment/index.vue b/src/views/interview/midterm-shooting/equipment/index.vue
similarity index 90%
rename from src/views/midterm-shooting/equipment/index.vue
rename to src/views/interview/midterm-shooting/equipment/index.vue
index 4ef0c5d..b6d02f7 100644
--- a/src/views/midterm-shooting/equipment/index.vue
+++ b/src/views/interview/midterm-shooting/equipment/index.vue
@@ -1,3 +1,89 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+
+const router = useRouter()
+
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
+const steps = [
+  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
+  { id: 'step2', content: '这是主要内容区域的边框' }
+]
+const stepIndex = ref(0)
+const hiddenbar = ref(false)
+const currentIndex = ref(0) // 当前显示的图片索引
+const selectedMenuIndex = ref(0) // 当前选中的菜单项索引
+
+// 菜单项数据
+const menuItems = ref([
+  { id: 'phone', name: '手机', disabled: false },
+  { id: 'phone-stand', name: '手机支架', disabled: true },
+  { id: 'bluetooth-remote', name: '蓝牙遥控器', disabled: true },
+  { id: 'stabilizer', name: '稳定器', disabled: true },
+  { id: 'props', name: '常用道具', disabled: true },
+  { id: 'phone-lens', name: '手机辅助箱头', disabled: true }
+])
+
+const phoneList = ref([
+  { phoneImg: getStaticImage('equipment/设备-手机1.png') },
+  { phoneImg: getStaticImage('equipment/设备-手机2.png') }
+])
+
+const platetitleList = ref([
+  { title: getStaticImage('equipment/标题-苹果.png') },
+  { title: getStaticImage('equipment/标题-安卓小米.png') }
+])
+
+const platetextList = ref([
+  { text: getStaticImage('equipment/内容-苹果.png') },
+  { text: getStaticImage('equipment/内容-安卓小米.png') }
+])
+const hiddenbarclick = () => {
+  hiddenbar.value = !hiddenbar.value
+}
+
+// 选择菜单项
+const selectMenuItem = (index: number, item: { id: string; name: string; disabled: boolean }) => {
+  if (item.disabled) {
+    console.log(`菜单项 "${item.name}" 已被禁用`)
+    return
+  }
+  selectedMenuIndex.value = index
+}
+
+// 下一张图片
+const nextPhone = () => {
+  if (currentIndex.value < phoneList.value.length - 1) {
+    currentIndex.value++
+  }
+}
+
+// 上一张图片
+const prevPhone = () => {
+  if (currentIndex.value > 0) {
+    currentIndex.value--
+  }
+}
+
+interface SimpleStep {
+  id: string
+  content: string
+}
+
+const handleStepChange = (_step: SimpleStep | null, index: number) => {
+  stepIndex.value = index
+}
+
+const currentHighlight = computed(() =>
+  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
+)
+</script>
 <template>
   <div class="equipment-index">
     <!-- 背景图片 -->
@@ -83,10 +169,8 @@
         </div>
       </div>
     </div>
-    <div class="absolute right-0 top-0">
-      <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
-    </div>
 
+    <ImgButton class="absolute right-0 top-0" :image="IMAGE_PATHS.COMPONENTS.BACK" @click="back" />
     <!-- 调试按钮组 -->
     <!-- <div class="debug-controls">
       <button @click="enableAllMenuItems" class="debug-btn">启用全部</button>
@@ -109,134 +193,6 @@
     </GuideSteps>
   </div>
 </template>
-<script lang="tsx" setup>
-import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
-import { GuideSteps, GuideStepsItem } from '@/components/Guide'
-import { ref, computed } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
-const back = () => {
-  // 跳转设备准备
-  router.back()
-}
-const steps = [
-  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
-  { id: 'step2', content: '这是主要内容区域的边框' }
-]
-const stepIndex = ref(0)
-const hiddenbar = ref(false)
-const currentIndex = ref(0) // 当前显示的图片索引
-const selectedMenuIndex = ref(0) // 当前选中的菜单项索引
-
-// 菜单项数据
-const menuItems = ref([
-  { id: 'phone', name: '手机', disabled: false },
-  { id: 'phone-stand', name: '手机支架', disabled: true },
-  { id: 'bluetooth-remote', name: '蓝牙遥控器', disabled: true },
-  { id: 'stabilizer', name: '稳定器', disabled: true },
-  { id: 'props', name: '常用道具', disabled: true },
-  { id: 'phone-lens', name: '手机辅助箱头', disabled: true }
-])
-
-const phoneList = ref([
-  { phoneImg: getStaticImage('equipment/设备-手机1.png') },
-  { phoneImg: getStaticImage('equipment/设备-手机2.png') }
-])
-
-const platetitleList = ref([
-  { title: getStaticImage('equipment/标题-苹果.png') },
-  { title: getStaticImage('equipment/标题-安卓小米.png') }
-])
-
-const platetextList = ref([
-  { text: getStaticImage('equipment/内容-苹果.png') },
-  { text: getStaticImage('equipment/内容-安卓小米.png') }
-])
-const hiddenbarclick = () => {
-  hiddenbar.value = !hiddenbar.value
-}
-
-// 选择菜单项
-const selectMenuItem = (index: number, item: { id: string; name: string; disabled: boolean }) => {
-  if (item.disabled) {
-    console.log(`菜单项 "${item.name}" 已被禁用`)
-    return
-  }
-  selectedMenuIndex.value = index
-}
-
-// 启用菜单项
-const enableMenuItem = (id: string) => {
-  const item = menuItems.value.find(item => item.id === id)
-  if (item) {
-    item.disabled = false
-    console.log(`菜单项 "${item.name}" 已启用`)
-  }
-}
-
-// 禁用菜单项
-const disableMenuItem = (id: string) => {
-  const item = menuItems.value.find(item => item.id === id)
-  if (item) {
-    item.disabled = true
-    console.log(`菜单项 "${item.name}" 已禁用`)
-  }
-}
-
-// 切换菜单项状态
-const toggleMenuItem = (id: string) => {
-  const item = menuItems.value.find(item => item.id === id)
-  if (item) {
-    item.disabled = !item.disabled
-    console.log(`菜单项 "${item.name}" 状态已切换为: ${item.disabled ? '禁用' : '启用'}`)
-  }
-}
-
-// 启用所有菜单项
-const enableAllMenuItems = () => {
-  menuItems.value.forEach(item => {
-    item.disabled = false
-  })
-  console.log('所有菜单项已启用')
-}
-
-// 禁用所有菜单项
-const disableAllMenuItems = () => {
-  menuItems.value.forEach(item => {
-    item.disabled = true
-  })
-  console.log('所有菜单项已禁用')
-}
-
-// 下一张图片
-const nextPhone = () => {
-  if (currentIndex.value < phoneList.value.length - 1) {
-    currentIndex.value++
-  }
-}
-
-// 上一张图片
-const prevPhone = () => {
-  if (currentIndex.value > 0) {
-    currentIndex.value--
-  }
-}
-
-interface SimpleStep {
-  id: string
-  content: string
-}
-
-const handleStepChange = (_step: SimpleStep | null, index: number) => {
-  stepIndex.value = index
-}
-
-const currentHighlight = computed(() =>
-  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
-)
-</script>
 <style lang="less" scoped>
 .equipment-index {
   position: relative;
diff --git a/src/views/afterditing/index.vue b/src/views/interview/midterm-shooting/midterm/index.vue
similarity index 73%
rename from src/views/afterditing/index.vue
rename to src/views/interview/midterm-shooting/midterm/index.vue
index 3251f52..89a8f47 100644
--- a/src/views/afterditing/index.vue
+++ b/src/views/interview/midterm-shooting/midterm/index.vue
@@ -1,39 +1,40 @@
 <script lang="tsx" setup>
 import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
-import { onMounted, ref } from 'vue'
+
+import { ref } from 'vue'
 import { ProgressBar } from '@/components'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 
 const router = useRouter()
-const route = useRoute()
-//  当前步骤
-const currentStep = ref(3)
-const highlightShow = ref(true)
+
+const currentStep = ref(2)
 
 const handleComplete = () => {
   console.log('完成前置条件')
-  window.open('http://101.132.152.157/dspdr/vlog.html', '_self')
+  // 处理完成逻辑
 }
 
 const handleStepChange = (step: number) => {
   console.log('步骤变化:', step)
+  // 处理步骤变化逻辑
 }
 
 const handleWorkClick = () => {
   console.log('任务取景按钮点击')
+  // 处理任务取景按钮点击逻辑
   router.push({ name: 'Work' })
 }
 
-const navigateTo = (routeName: string) => {
-  console.log('任务取景按钮点击')
-  router.push({ name: routeName })
+const handleClick = () => {
+  // 跳转设备准备
+  router.push({ name: 'equipment' })
 }
-
-onMounted(() => {
-  // 页面加载时的逻辑
-  currentStep.value = Number(route.query.step) || 3
-})
+const shooting = () => {
+  // 跳转实地取景
+  router.push({ name: 'shooting' })
+}
+const highlightShow = ref(true)
 </script>
 
 <template>
@@ -62,12 +63,10 @@ onMounted(() => {
     >
       <ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" @click="handleWorkClick" />
     </div>
-
     <!-- 中期拍摄底板 -->
     <div v-if="highlightShow" class="absolute right-90 ml-[135px]" style="z-index: 998">
-      <img :src="getStaticImage(IMAGE_PATHS.AFTEREDITING.MIDTERM)" />
+      <img :src="getStaticImage(IMAGE_PATHS.VLOG.Midterm)" />
     </div>
-
     <!-- 进度百分比 -->
     <div
       v-if="highlightShow"
@@ -80,33 +79,27 @@ onMounted(() => {
         <ImgButton :image="IMAGE_PATHS.VLOG.Percentage" />
       </div>
     </div>
-
-    <!-- 后期准备按钮文字 -->
+    <!-- 中期准备按钮文字 -->
     <div
       v-if="highlightShow"
-      class="absolute left-[21%] top-[9%] -translate-x-1/2 space-y-[-30px]"
-      style="z-index: 998; margin-top: 120px"
+      class="absolute left-[21%] top-[9%] -translate-x-1/2"
+      style="z-index: 998"
     >
       <ImgButton
-        :image="IMAGE_PATHS.AFTEREDITING.EDITING"
-        @click="navigateTo('editing')"
+        :image="IMAGE_PATHS.VLOG.MidtermEquipment"
+        @click="handleClick"
         class="ml-[60px]"
       />
-      <ImgButton
-        :image="IMAGE_PATHS.AFTEREDITING.ADJUSTMENTCOLOR"
-        @click="navigateTo('Color')"
-        class="ml-[40px]"
-      />
+      <ImgButton :image="IMAGE_PATHS.VLOG.MidtermFraming" @click="shooting" class="ml-[40px]" />
+      <ImgButton :image="IMAGE_PATHS.VLOG.MidtermShoot" class="ml-[20px]" />
     </div>
-
     <!-- 遮罩层 -->
-    <div class="Shadow">
+    <div class="Shadow" v-if="highlightShow">
       <div>
         <img src="" alt="" />
       </div>
       <img src="@/assets/images/midterm/引导遮罩.png" alt="" />
     </div>
-
     <!-- 叉 -->
     <div
       v-if="highlightShow"
@@ -116,6 +109,8 @@ onMounted(() => {
     >
       <img src="@/assets/images/midterm/叉.png" alt="" />
     </div>
+    <!-- 引导任务 -->
+    <!-- <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" /> -->
 
     <div class="absolute bottom-0 w-full bright">
       <ProgressBar
@@ -126,8 +121,7 @@ onMounted(() => {
     </div>
   </div>
 </template>
-
-<style lang="less" scoped>
+<style lang="less" scopeds>
 .Shadow {
   width: 100%;
   height: 100%;
diff --git a/src/views/interview/midterm-shooting/shooting/components/StartOverlay.vue b/src/views/interview/midterm-shooting/shooting/components/StartOverlay.vue
new file mode 100644
index 0000000..074f557
--- /dev/null
+++ b/src/views/interview/midterm-shooting/shooting/components/StartOverlay.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="absolute bottom-0">
+    <div class="relative">
+      <img src="@/assets/images/shooting/开始取景.png" alt="" />
+      <ImgButton
+        class="absolute bottom-[46%] left-[49%] -translate-x-1/2"
+        image="shooting/按钮-开始取景.png"
+        @click="$emit('start')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ImgButton } from '@/components/Button'
+
+defineEmits<{
+  start: []
+}>()
+</script>
diff --git a/src/views/interview/midterm-shooting/shooting/composables/useCanvasCapture.ts b/src/views/interview/midterm-shooting/shooting/composables/useCanvasCapture.ts
new file mode 100644
index 0000000..81c21bc
--- /dev/null
+++ b/src/views/interview/midterm-shooting/shooting/composables/useCanvasCapture.ts
@@ -0,0 +1,77 @@
+import { ref } from 'vue'
+
+interface CaptureOptions {
+  width: number
+  height: number
+  scale?: number
+  delay?: number // 截图前的等待时间（用于 UI 更新）
+  resultDelay?: number // 截图后显示结果的延迟
+  onDraw: (ctx: CanvasRenderingContext2D) => void | Promise<void>
+  onComplete?: () => void
+}
+
+export function useCanvasCapture() {
+  const isLoading = ref(false)
+  const showModal = ref(false)
+  const capturedImageUrl = ref('')
+
+  const capture = async (options: CaptureOptions) => {
+    if (isLoading.value) return
+
+    const { width, height, scale = 2, delay = 50, resultDelay = 0, onDraw, onComplete } = options
+
+    isLoading.value = true
+
+    try {
+      // 等待 UI 更新
+      if (delay > 0) {
+        await new Promise(resolve => setTimeout(resolve, delay))
+      }
+
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+      if (!ctx) {
+        throw new Error('Cannot get canvas context')
+      }
+
+      // 设置画布大小（高清）
+      canvas.width = width * scale
+      canvas.height = height * scale
+
+      // 填充白色背景（防止透明）
+      ctx.fillStyle = '#ffffff'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // 应用缩放
+      ctx.scale(scale, scale)
+
+      // 执行自定义绘制逻辑
+      await onDraw(ctx)
+
+      capturedImageUrl.value = canvas.toDataURL('image/png')
+
+      // 延迟显示结果
+      if (resultDelay > 0) {
+        setTimeout(() => {
+          isLoading.value = false
+          showModal.value = true
+          onComplete?.()
+        }, resultDelay)
+      } else {
+        isLoading.value = false
+        showModal.value = true
+        onComplete?.()
+      }
+    } catch (error) {
+      console.error('Capture failed:', error)
+      isLoading.value = false
+    }
+  }
+
+  return {
+    isLoading,
+    showModal,
+    capturedImageUrl,
+    capture
+  }
+}
diff --git a/src/views/interview/midterm-shooting/shooting/filmingLocation-a/index.vue b/src/views/interview/midterm-shooting/shooting/filmingLocation-a/index.vue
new file mode 100644
index 0000000..3a653e9
--- /dev/null
+++ b/src/views/interview/midterm-shooting/shooting/filmingLocation-a/index.vue
@@ -0,0 +1,324 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { getBackgroundImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { useRouter } from 'vue-router'
+import { useViewfinderA } from './useViewfinderA'
+import { useCanvasCapture } from '../composables/useCanvasCapture'
+import StartOverlay from '../components/StartOverlay.vue'
+import LoadingOverlay from '@/components/Loading/LoadingOverlay.vue'
+
+const router = useRouter()
+const start = ref(false)
+
+// 基础逻辑
+const back = () => router.back()
+const handleFinish = () => router.push({ name: 'InterviewFilmingLocationB' })
+
+// 截图功能
+const { isLoading, showModal, capturedImageUrl, capture } = useCanvasCapture()
+
+const handleModalClose = () => {
+  showModal.value = false
+}
+
+// 手机模式取景
+const {
+  currentZoom,
+  isCapturing,
+  isDragging,
+  setZoom,
+  startDrag,
+  onDrag,
+  endDrag,
+  getTransform,
+  currentOffsetX,
+  currentOffsetY,
+  handleWheel
+} = useViewfinderA()
+
+// 刻度盘配置常量
+const DIAL_STEP_DEG = 30 // 1x 到 2x 之间的角度差（度）
+const ZOOM_MIN = 1
+const ZOOM_MAX = 3
+const ZOOM_CENTER = 2
+const TICK_STEP = 0.1 // 刻度步长
+const MAJOR_TICK_INTERVAL = 5 // 主刻度间隔（0.5x）
+const INTEGER_TICK_INTERVAL = 10 // 整数刻度间隔（1.0x）
+
+// 刻度数据类型
+interface DialTick {
+  zoom: number
+  angle: number
+  isMajor: boolean
+  isInteger: boolean
+  label: string
+}
+
+// 计算圆盘旋转角度
+// 目标：将当前 zoom 对应的刻度旋转到 0 度位置
+// 3x 在上方（-30deg），1x 在下方（+30deg）
+const dialRotation = computed(() => {
+  return (currentZoom.value - ZOOM_CENTER) * DIAL_STEP_DEG
+})
+
+// 格式化缩放倍数显示
+const formattedZoom = computed(() => {
+  return currentZoom.value.toFixed(1) + 'x'
+})
+
+// 生成刻度数据
+const dialTicks = computed<DialTick[]>(() => {
+  const ticks: DialTick[] = []
+  const minTick = ZOOM_MIN / TICK_STEP
+  const maxTick = ZOOM_MAX / TICK_STEP
+
+  for (let z = minTick; z <= maxTick; z += 1) {
+    const zoom = z * TICK_STEP
+    // 刻度相对于中心（2x）的角度
+    // 3x -> -30deg（上方），1x -> +30deg（下方）
+    const angle = -(zoom - ZOOM_CENTER) * DIAL_STEP_DEG
+
+    const isMajor = z % MAJOR_TICK_INTERVAL === 0
+    const isInteger = z % INTEGER_TICK_INTERVAL === 0
+
+    ticks.push({
+      zoom,
+      angle,
+      isMajor,
+      isInteger,
+      label: isInteger ? zoom + 'x' : ''
+    })
+  }
+  return ticks
+})
+
+const photoImage = ref<HTMLImageElement | null>(null)
+
+// Canvas 截图配置常量
+const CANVAS_WIDTH = 871
+const CANVAS_HEIGHT = 420
+const CANVAS_SCALE = 2 // 2倍高清
+const FLASH_DURATION = 100 // 闪光动画时长（ms）
+const UI_UPDATE_DELAY = 50 // UI 更新延迟（ms）
+const RESULT_DISPLAY_DELAY = 300 // 结果显示延迟（ms）
+
+/**
+ * 拍照功能
+ * 使用 Canvas 手动绘制图片，避免 DOM 截图的兼容性问题
+ */
+/**
+ * 拍照功能
+ * 使用 Canvas 手动绘制图片，避免 DOM 截图的兼容性问题
+ */
+const capturePhoto = async () => {
+  if (isLoading.value) return
+
+  isCapturing.value = true
+  await new Promise(resolve => setTimeout(resolve, FLASH_DURATION))
+
+  await capture({
+    width: CANVAS_WIDTH,
+    height: CANVAS_HEIGHT,
+    scale: CANVAS_SCALE,
+    delay: UI_UPDATE_DELAY,
+    resultDelay: RESULT_DISPLAY_DELAY,
+    onDraw: ctx => {
+      if (!photoImage.value) {
+        throw new Error('Photo image not found')
+      }
+
+      // 计算变换
+      // 1. 移动到中心
+      ctx.translate(CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2)
+      // 2. 应用拖拽偏移
+      ctx.translate(currentOffsetX.value, currentOffsetY.value)
+      // 3. 应用缩放
+      ctx.scale(currentZoom.value, currentZoom.value)
+      // 4. 移回左上角绘制
+      ctx.drawImage(
+        photoImage.value,
+        -CANVAS_WIDTH / 2,
+        -CANVAS_HEIGHT / 2,
+        CANVAS_WIDTH,
+        CANVAS_HEIGHT
+      )
+    },
+    onComplete: () => {
+      isCapturing.value = false
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="w-full h-full">
+    <div
+      class="relative w-full h-full bg-cover bg-center bg-no-repeat shooting-bg"
+      :style="{ backgroundImage: getBackgroundImage('shooting/取景地模糊背景.png') }"
+    >
+      <ImgButton image="shooting/标题-取景地a.png" class="title-button absolute left-0" />
+      <ImgButton image="shooting/返回.png" class="back-button absolute right-0" @click="back" />
+
+      <StartOverlay v-if="!start" @start="start = true" />
+
+      <!-- 手机拍照界面 -->
+      <div class="absolute bottom-0 w-full h-[766px]" v-else>
+        <img
+          class="phone-frame absolute w-full h-[766px] z-10 pointer-events-none"
+          src="@/assets/images/shooting/shoot.png"
+          alt=""
+        />
+
+        <!-- 拍摄区域 -->
+        <div
+          class="photo-wrapper absolute pointer-events-none top-[19.2%] left-[48.3%] -translate-x-1/2 w-[871px] h-[420px]"
+        >
+          <div class="photo-container w-full h-full overflow-hidden relative">
+            <!-- 拍摄图片 -->
+            <img
+              ref="photoImage"
+              class="absolute pointer-events-auto w-[871px] h-[420px] ease-out select-none cursor-move touch-none"
+              :class="{
+                'transition-transform duration-300': !isDragging,
+                'cursor-grab': !isDragging,
+                'cursor-grabbing': isDragging
+              }"
+              :style="{ transform: getTransform() }"
+              src="@/assets/images/shooting/取景大图.png"
+              alt=""
+              crossorigin="anonymous"
+              @mousedown="startDrag"
+              @mousemove="onDrag"
+              @mouseup="endDrag"
+              @mouseleave="endDrag"
+              @wheel="handleWheel"
+              @touchstart="startDrag"
+              @touchmove="onDrag"
+              @touchend="endDrag"
+              draggable="false"
+            />
+
+            <!-- 拍照闪光效果 -->
+            <div
+              v-if="isCapturing"
+              class="flash-overlay absolute inset-0 bg-white animate-flash"
+            ></div>
+          </div>
+        </div>
+
+        <div
+          class="shooting-decor relative pointer-events-none top-[19.2%] left-[48.3%] -translate-x-1/2 w-[871px] h-[420px] bg-cover bg-center bg-no-repeat"
+          :style="{ backgroundImage: getBackgroundImage('shooting/拍摄装饰.png') }"
+        >
+          <!-- 仿苹果半圆盘缩放控件 -->
+          <div
+            class="zoom-dial-container absolute pointer-events-auto w-[150px] h-[300px] top-1/2 -translate-y-1/2 -rotate-2 right-[179px] overflow-hidden select-none mask-gradient"
+          >
+            <!-- 指示器 (固定在中心) -->
+            <div
+              class="absolute top-1/2 left-0 w-full -translate-y-1/2 z-20 flex items-center pointer-events-none"
+            >
+              <div
+                class="w-0 h-0 border-t-[8px] border-t-transparent border-l-[14px] border-l-yellow-400 border-b-[8px] border-b-transparent ml-3"
+              ></div>
+              <div
+                class="ml-3 bg-black/70 backdrop-blur-md text-yellow-400 font-bold px-3 py-1 rounded text-lg shadow-lg"
+              >
+                {{ formattedZoom }}
+              </div>
+            </div>
+
+            <!-- 旋转圆盘 -->
+            <!-- 圆心在容器右侧外部，形成左侧弧形 -->
+            <div
+              class="dial-wheel absolute top-1/2 right-[-480px] w-[600px] h-[600px] rounded-full bg-black/30 backdrop-blur-md border-[5px] border-white/20 transition-transform duration-100 ease-out origin-center cursor-grab active:cursor-grabbing"
+              :style="{ transform: `translateY(-50%) rotate(${dialRotation}deg)` }"
+            >
+              <div
+                v-for="tick in dialTicks"
+                :key="tick.zoom"
+                class="absolute top-1/2 left-0 w-full h-0 flex justify-start items-center origin-center pointer-events-auto"
+                :style="{ transform: `translate(0, -50%) rotate(${tick.angle}deg)` }"
+                @click.stop="setZoom(tick.zoom)"
+              >
+                <!-- 刻度线本体 (位于圆盘左边缘) -->
+                <div
+                  class="absolute left-3 bg-white/90 transition-all duration-200"
+                  :class="{
+                    'w-10 h-1 opacity-90': tick.isInteger,
+                    'w-6 h-0.5 opacity-60': !tick.isInteger && tick.isMajor,
+                    'w-3 h-[1px] opacity-40': !tick.isMajor
+                  }"
+                ></div>
+                <!-- 刻度文字 -->
+                <div
+                  v-if="tick.isInteger"
+                  class="absolute left-[52px] text-white/90 font-bold text-lg drop-shadow-md"
+                  :style="{ transform: `rotate(${-tick.angle - dialRotation}deg)` }"
+                >
+                  <span
+                    :class="{ 'text-yellow-400 scale-110': currentZoom === tick.zoom }"
+                    class="block transition-all duration-200"
+                  >
+                    {{ tick.label }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 拍摄按钮 -->
+          <ImgButton
+            image="shooting/按钮-拍摄.png"
+            class="capture-button absolute pointer-events-auto right-14 top-1/2 -translate-y-1/2 transition-transform active:scale-95"
+            @click="capturePhoto"
+          />
+        </div>
+      </div>
+
+      <!-- 结果弹窗 -->
+      <Overlay :visible="showModal" @close="handleModalClose">
+        <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
+          <!-- 截图内容 -->
+          <div v-if="capturedImageUrl" class="bg-white p-2 rounded-md -rotate-6">
+            <img :src="capturedImageUrl" alt="拍摄结果" />
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
+            <ImgButton image="shooting/按钮-前往下一个取景地" @click="handleFinish" />
+          </div>
+        </div>
+      </Overlay>
+    </div>
+
+    <LoadingOverlay :visible="isLoading" text="正在出片中..." />
+  </div>
+</template>
+
+<style lang="less">
+@keyframes flash {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0.8;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.animate-flash {
+  animation: flash 0.3s ease-out;
+}
+
+.mask-gradient {
+  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
+  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
+}
+</style>
diff --git a/src/views/interview/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts b/src/views/interview/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
new file mode 100644
index 0000000..b3d184e
--- /dev/null
+++ b/src/views/interview/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
@@ -0,0 +1,149 @@
+import { ref } from 'vue'
+import { getTouchDistance, getClientPosition } from '../utils/touchGestures'
+
+/**
+ * 手机拍照模式的取景逻辑
+ * 支持缩放和拖拽功能
+ */
+export function useViewfinderA() {
+  // 缩放限制
+  const MIN_ZOOM = 1
+  const MAX_ZOOM = 3
+
+  // 缩放级别 (保留用于点击按钮)
+  const zoomLevels = [3, 2, 1]
+  const currentZoom = ref(1)
+  const isCapturing = ref(false) // 拍照闪光效果
+
+  // 拖拽相关状态
+  const isDragging = ref(false)
+  const dragStartX = ref(0)
+  const dragStartY = ref(0)
+  const offsetX = ref(0)
+  const offsetY = ref(0)
+  const currentOffsetX = ref(0)
+  const currentOffsetY = ref(0)
+
+  // 双指缩放相关
+  const isPinching = ref(false)
+  const pinchStartDistance = ref(0)
+  const pinchStartZoom = ref(1)
+
+  // 计算边界限制
+  const limitOffset = () => {
+    const containerWidth = 871
+    const containerHeight = 420
+    const scale = currentZoom.value
+
+    // 计算图片缩放后的尺寸
+    const scaledWidth = containerWidth * scale
+    const scaledHeight = containerHeight * scale
+
+    // 计算最大偏移量（图片边缘不能超出容器中心）
+    const maxOffsetX = (scaledWidth - containerWidth) / 2
+    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))
+  }
+
+  // 设置缩放级别
+  const setZoom = (zoom: number) => {
+    currentZoom.value = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom))
+    limitOffset()
+  }
+
+  // 鼠标滚轮缩放
+  const handleWheel = (e: WheelEvent) => {
+    e.preventDefault()
+    // 滚轮向下是正数（缩小），向上是负数（放大）
+    const delta = -e.deltaY * 0.001
+    const newZoom = currentZoom.value + delta
+    setZoom(newZoom)
+  }
+
+  // 开始拖拽 / 触摸
+  const startDrag = (e: MouseEvent | TouchEvent) => {
+    // 双指缩放
+    if ('touches' in e && e.touches.length === 2) {
+      isPinching.value = true
+      isDragging.value = false
+      pinchStartDistance.value = getTouchDistance(e.touches[0], e.touches[1])
+      pinchStartZoom.value = currentZoom.value
+      e.preventDefault()
+      return
+    }
+
+    // 单指拖拽
+    if ('touches' in e && e.touches.length !== 1) return
+
+    isDragging.value = true
+    isPinching.value = false
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    dragStartX.value = clientX
+    dragStartY.value = clientY
+    offsetX.value = currentOffsetX.value
+    offsetY.value = currentOffsetY.value
+  }
+
+  // 拖拽中 / 缩放中
+  const onDrag = (e: MouseEvent | TouchEvent) => {
+    // 处理双指缩放
+    if (isPinching.value && 'touches' in e && e.touches.length === 2) {
+      const currentDistance = getTouchDistance(e.touches[0], e.touches[1])
+      const scale = currentDistance / pinchStartDistance.value
+      setZoom(pinchStartZoom.value * scale)
+      e.preventDefault()
+      return
+    }
+
+    if (!isDragging.value) return
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const deltaX = clientX - dragStartX.value
+    const deltaY = clientY - dragStartY.value
+
+    currentOffsetX.value = offsetX.value + deltaX
+    currentOffsetY.value = offsetY.value + deltaY
+
+    limitOffset()
+
+    // 防止滚动
+    if (e.cancelable) {
+      e.preventDefault()
+    }
+  }
+
+  // 结束拖拽
+  const endDrag = () => {
+    isDragging.value = false
+    isPinching.value = false
+  }
+
+  // 计算transform样式
+  const getTransform = () => {
+    return `translate(${currentOffsetX.value}px, ${currentOffsetY.value}px) scale(${currentZoom.value})`
+  }
+
+  return {
+    // 状态
+    zoomLevels,
+    currentZoom,
+    isCapturing,
+    isDragging,
+    currentOffsetX,
+    currentOffsetY,
+
+    // 方法
+    setZoom,
+    startDrag,
+    onDrag,
+    endDrag,
+    handleWheel,
+    getTransform
+  }
+}
diff --git a/src/views/interview/midterm-shooting/shooting/filmingLocation-b/index.vue b/src/views/interview/midterm-shooting/shooting/filmingLocation-b/index.vue
new file mode 100644
index 0000000..3235dec
--- /dev/null
+++ b/src/views/interview/midterm-shooting/shooting/filmingLocation-b/index.vue
@@ -0,0 +1,258 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { getBackgroundImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { useViewfinderB } from './useViewfinderB'
+import { useCanvasCapture } from '../composables/useCanvasCapture'
+import StartOverlay from '../components/StartOverlay.vue'
+import LoadingOverlay from '@/components/Loading/LoadingOverlay.vue'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { useRouter } from 'vue-router'
+import { useInterviewStore } from '@/stores'
+
+const router = useRouter()
+const start = ref(false)
+
+// 基础逻辑
+const back = () => router.back()
+
+// 截图功能
+const { isLoading, showModal, capturedImageUrl, capture } = useCanvasCapture()
+
+const handleModalClose = () => {
+  showModal.value = false
+}
+
+// 自由取景框模式
+const { viewfinderContainer, viewfinderBox, viewfinder, startDrag, startResize } = useViewfinderB()
+
+const showGuide = ref(false)
+const backgroundImage = ref<HTMLImageElement | null>(null)
+
+// Canvas 截图配置常量
+const UI_UPDATE_DELAY = 50 // UI 更新延迟（ms）
+const CANVAS_SCALE = 2 // Canvas 缩放比例（2倍高清）
+const GUIDE_SHOW_DELAY = 1000 // 引导显示延迟（ms）
+
+/**
+ * 截取场景
+ * 使用 Canvas 手动绘制，确保移动端兼容性
+ */
+/**
+ * 截取场景
+ * 使用 Canvas 手动绘制，确保移动端兼容性
+ */
+const captureScene = async () => {
+  if (isLoading.value) return
+
+  await capture({
+    width: viewfinder.value.width,
+    height: viewfinder.value.height,
+    scale: CANVAS_SCALE,
+    delay: UI_UPDATE_DELAY,
+    onDraw: ctx => {
+      if (!backgroundImage.value) {
+        throw new Error('Background image not found')
+      }
+
+      // 计算图片实际尺寸和设计稿尺寸的缩放比例
+      // viewfinder 的坐标是基于设计稿尺寸（1920x1080）
+      // 但 backgroundImage 的实际尺寸可能不同
+      const imageScaleX = backgroundImage.value.naturalWidth / 1920
+      const imageScaleY = backgroundImage.value.naturalHeight / 1080
+
+      // 绘制背景图片的裁剪区域
+      // 将设计稿坐标转换为图片实际坐标
+      ctx.drawImage(
+        backgroundImage.value,
+        viewfinder.value.x * imageScaleX, // 源图 x（转换为实际坐标）
+        viewfinder.value.y * imageScaleY, // 源图 y（转换为实际坐标）
+        viewfinder.value.width * imageScaleX, // 源图 width（转换为实际坐标）
+        viewfinder.value.height * imageScaleY, // 源图 height（转换为实际坐标）
+        0, // 目标 x
+        0, // 目标 y
+        viewfinder.value.width, // 目标 width
+        viewfinder.value.height // 目标 height
+      )
+    },
+    onComplete: () => {
+      // 延迟显示引导
+      setTimeout(() => {
+        showGuide.value = true
+      }, GUIDE_SHOW_DELAY)
+    }
+  })
+}
+
+/**
+ * 完成引导，跳转到 Vlog 页面
+ */
+const handleComplete = () => {
+  showGuide.value = false
+  useInterviewStore().setInterviewUnlockProgress(3)
+  router.push({
+    name: 'Interview'
+  })
+}
+</script>
+
+<template>
+  <div class="w-full h-full">
+    <div
+      class="relative w-full h-full bg-cover bg-center bg-no-repeat shooting-bg"
+      :style="{
+        backgroundImage: start
+          ? getBackgroundImage('shooting/取景大图.png')
+          : getBackgroundImage('shooting/取景地模糊背景.png')
+      }"
+    >
+      <!-- 标题 -->
+      <ImgButton image="shooting/标题-取景地b.png" class="title-button absolute left-0" />
+
+      <!-- 返回按钮 -->
+      <ImgButton
+        image="shooting/返回.png"
+        class="back-button absolute right-0 z-50"
+        @click="back"
+      />
+
+      <StartOverlay v-if="!start" @start="start = true" />
+
+      <!-- 取景 -->
+      <div class="absolute bottom-0 w-full h-full" v-else>
+        <!-- 隐藏的背景图片，用于 Canvas 绘制 -->
+        <img
+          ref="backgroundImage"
+          class="absolute inset-0 w-full h-full object-cover pointer-events-none opacity-0"
+          src="@/assets/images/shooting/取景大图.png"
+          alt=""
+          crossorigin="anonymous"
+        />
+
+        <!-- 取景框容器 -->
+        <div ref="viewfinderContainer" class="relative w-full h-full">
+          <!-- 四个方向的遮罩层 -->
+          <!-- 上遮罩 -->
+          <div
+            class="mask-layer absolute left-0 right-0 bg-black/60 pointer-events-none z-10"
+            :style="{
+              top: 0,
+              height: viewfinder.y + 'px'
+            }"
+          ></div>
+          <!-- 下遮罩 -->
+          <div
+            class="mask-layer absolute left-0 right-0 bg-black/60 pointer-events-none z-10"
+            :style="{
+              top: viewfinder.y + viewfinder.height + 'px',
+              bottom: 0
+            }"
+          ></div>
+          <!-- 左遮罩 -->
+          <div
+            class="mask-layer absolute left-0 bg-black/60 pointer-events-none z-10"
+            :style="{
+              top: viewfinder.y + 'px',
+              width: viewfinder.x + 'px',
+              height: viewfinder.height + 'px'
+            }"
+          ></div>
+          <!-- 右遮罩 -->
+          <div
+            class="mask-layer absolute right-0 bg-black/60 pointer-events-none z-10"
+            :style="{
+              top: viewfinder.y + 'px',
+              left: viewfinder.x + viewfinder.width + 'px',
+              height: viewfinder.height + 'px'
+            }"
+          ></div>
+
+          <!-- 可拖动调整的取景框 -->
+          <div
+            ref="viewfinderBox"
+            class="viewfinder-frame absolute border-4 border-white cursor-move z-20"
+            :style="{
+              left: viewfinder.x + 'px',
+              top: viewfinder.y + 'px',
+              width: viewfinder.width + 'px',
+              height: viewfinder.height + 'px'
+            }"
+            @mousedown="startDrag"
+            @touchstart="startDrag"
+          >
+            <!-- 九宫格辅助线 -->
+            <div class="grid-lines absolute inset-0 grid grid-cols-3 grid-rows-3">
+              <div
+                v-for="i in 9"
+                :key="i"
+                class="border border-white/40"
+                :class="{
+                  'border-t-0': i <= 3,
+                  'border-b-0': i >= 7,
+                  'border-l-0': (i - 1) % 3 === 0,
+                  'border-r-0': i % 3 === 0
+                }"
+              ></div>
+            </div>
+
+            <!-- 四个角的调整手柄 -->
+            <div
+              class="resize-handle absolute w-6 h-6 bg-white rounded-full -left-3 -top-3 cursor-nwse-resize"
+              @mousedown.stop="startResize('nw', $event)"
+              @touchstart.stop="startResize('nw', $event)"
+            ></div>
+            <div
+              class="resize-handle absolute w-6 h-6 bg-white rounded-full -right-3 -top-3 cursor-nesw-resize"
+              @mousedown.stop="startResize('ne', $event)"
+              @touchstart.stop="startResize('ne', $event)"
+            ></div>
+            <div
+              class="resize-handle absolute w-6 h-6 bg-white rounded-full -left-3 -bottom-3 cursor-nesw-resize"
+              @mousedown.stop="startResize('sw', $event)"
+              @touchstart.stop="startResize('sw', $event)"
+            ></div>
+            <div
+              class="resize-handle absolute w-6 h-6 bg-white rounded-full -right-3 -bottom-3 cursor-nwse-resize"
+              @mousedown.stop="startResize('se', $event)"
+              @touchstart.stop="startResize('se', $event)"
+            ></div>
+          </div>
+        </div>
+
+        <!-- 底部取景按钮 - 跟随取景框 -->
+        <div
+          class="capture-button-container absolute z-20 -translate-x-1/2 -translate-y-1/2"
+          :style="{
+            left: viewfinder.x + viewfinder.width / 2 + 'px',
+            top: viewfinder.y + viewfinder.height + 'px'
+          }"
+        >
+          <ImgButton class="w-36" image="shooting/按钮-取景" @click="captureScene" />
+        </div>
+      </div>
+
+      <!-- 结果弹窗 -->
+      <Overlay :visible="showModal" @close="handleModalClose">
+        <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
+          <!-- 截图内容 -->
+          <div v-if="capturedImageUrl" class="bg-white p-2 rounded-md -rotate-6">
+            <img :src="capturedImageUrl" alt="拍摄结果" />
+          </div>
+
+          <!-- 操作按钮 -->
+          <!-- <div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
+            <ImgButton image="shooting/按钮-前往下一个取景地" @click="handleFinish" />
+          </div> -->
+        </div>
+      </Overlay>
+    </div>
+
+    <LoadingOverlay :visible="isLoading" text="正在出片中..." />
+
+    <!-- 引导步骤 -->
+    <GuideSteps v-if="showGuide" positionOffsetY="80%" @complete="handleComplete">
+      <GuideStepsItem> 实地取景已全部完成，现在跟着我走进现场开始正式的拍摄吧~ </GuideStepsItem>
+    </GuideSteps>
+  </div>
+</template>
diff --git a/src/views/interview/midterm-shooting/shooting/filmingLocation-b/useViewfinderB.ts b/src/views/interview/midterm-shooting/shooting/filmingLocation-b/useViewfinderB.ts
new file mode 100644
index 0000000..9e4d4cd
--- /dev/null
+++ b/src/views/interview/midterm-shooting/shooting/filmingLocation-b/useViewfinderB.ts
@@ -0,0 +1,291 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+import { getTouchDistance, getTouchCenter, getClientPosition } from '../utils/touchGestures'
+
+// 设计稿尺寸常量
+const DESIGN_WIDTH = 1920
+const DESIGN_HEIGHT = 1080
+
+/**
+ * 自由取景框模式的逻辑
+ * 支持拖动、四角调整大小、双指缩放
+ */
+export function useViewfinderB() {
+  // 取景框相关
+  const viewfinderContainer = ref<HTMLElement>()
+  const viewfinderBox = ref<HTMLElement>()
+  const viewfinder = ref({
+    x: 660, // (1920 - 600) / 2 = 660，居中
+    y: 340, // (1080 - 400) / 2 = 340，居中
+    width: 600,
+    height: 400
+  })
+
+  // 拖动相关状态
+  const isDragging = ref(false)
+  const dragStart = ref({ x: 0, y: 0 })
+
+  // 调整大小相关状态
+  const isResizing = ref(false)
+  const resizeCorner = ref<'nw' | 'ne' | 'sw' | 'se' | null>(null)
+  const resizeStart = ref({
+    x: 0,
+    y: 0,
+    boxX: 0,
+    boxY: 0,
+    boxWidth: 0,
+    boxHeight: 0
+  })
+
+  // 双指缩放相关状态
+  const isPinching = ref(false)
+  const pinchStart = ref({
+    distance: 0,
+    centerX: 0,
+    centerY: 0,
+    boxWidth: 0,
+    boxHeight: 0,
+    boxX: 0,
+    boxY: 0
+  })
+
+  // 将屏幕坐标转换为缩放后的本地坐标
+  const convertClientToLocal = (clientX: number, clientY: number) => {
+    if (!viewfinderContainer.value) return { x: clientX, y: clientY }
+
+    const containerRect = viewfinderContainer.value.getBoundingClientRect()
+
+    // 计算缩放比例
+    const scaleX = containerRect.width / DESIGN_WIDTH
+    const scaleY = containerRect.height / DESIGN_HEIGHT
+
+    // 计算相对于容器的坐标，并转换为设计稿坐标系
+    const localX = (clientX - containerRect.left) / scaleX
+    const localY = (clientY - containerRect.top) / scaleY
+
+    return { x: localX, y: localY }
+  }
+
+  // 开始拖动取景框
+  const startDrag = (e: MouseEvent | TouchEvent) => {
+    if (isResizing.value || isPinching.value) return
+
+    // 检测双指触摸
+    if ('touches' in e && e.touches.length === 2) {
+      // 双指缩放
+      isPinching.value = true
+      const touch1 = e.touches[0]
+      const touch2 = e.touches[1]
+
+      pinchStart.value = {
+        distance: getTouchDistance(touch1, touch2),
+        centerX: (touch1.clientX + touch2.clientX) / 2,
+        centerY: (touch1.clientY + touch2.clientY) / 2,
+        boxWidth: viewfinder.value.width,
+        boxHeight: viewfinder.value.height,
+        boxX: viewfinder.value.x,
+        boxY: viewfinder.value.y
+      }
+      e.preventDefault()
+      return
+    }
+
+    // 单指拖动
+    if ('touches' in e && e.touches.length !== 1) return
+
+    isDragging.value = true
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const localPos = convertClientToLocal(clientX, clientY)
+
+    dragStart.value = {
+      x: localPos.x - viewfinder.value.x,
+      y: localPos.y - viewfinder.value.y
+    }
+
+    e.preventDefault()
+  }
+
+  // 开始调整大小
+  const startResize = (corner: 'nw' | 'ne' | 'sw' | 'se', e: MouseEvent | TouchEvent) => {
+    isResizing.value = true
+    resizeCorner.value = corner
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const localPos = convertClientToLocal(clientX, clientY)
+
+    resizeStart.value = {
+      x: localPos.x,
+      y: localPos.y,
+      boxX: viewfinder.value.x,
+      boxY: viewfinder.value.y,
+      boxWidth: viewfinder.value.width,
+      boxHeight: viewfinder.value.height
+    }
+
+    e.preventDefault()
+  }
+
+  // 处理移动
+  const handleMove = (e: MouseEvent | TouchEvent) => {
+    if (!isDragging.value && !isResizing.value && !isPinching.value) return
+
+    // 处理双指缩放
+    if (isPinching.value && 'touches' in e && e.touches.length === 2) {
+      const touch1 = e.touches[0]
+      const touch2 = e.touches[1]
+
+      const currentDistance = getTouchDistance(touch1, touch2)
+      const scale = currentDistance / pinchStart.value.distance
+
+      // 计算新的尺寸
+      let newWidth = pinchStart.value.boxWidth * scale
+      let newHeight = pinchStart.value.boxHeight * scale
+
+      const minSize = 200
+
+      // 限制最小和最大尺寸
+      newWidth = Math.max(minSize, Math.min(newWidth, DESIGN_WIDTH))
+      newHeight = Math.max(minSize, Math.min(newHeight, DESIGN_HEIGHT))
+
+      // 保持中心点不变，计算新的位置
+      const center = getTouchCenter(touch1, touch2)
+      const localCenter = convertClientToLocal(center.x, center.y)
+
+      let newX = localCenter.x - newWidth / 2
+      let newY = localCenter.y - newHeight / 2
+
+      // 边界检测
+      newX = Math.max(0, Math.min(newX, DESIGN_WIDTH - newWidth))
+      newY = Math.max(0, Math.min(newY, DESIGN_HEIGHT - newHeight))
+
+      viewfinder.value.width = newWidth
+      viewfinder.value.height = newHeight
+      viewfinder.value.x = newX
+      viewfinder.value.y = newY
+
+      e.preventDefault()
+      return
+    }
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const localPos = convertClientToLocal(clientX, clientY)
+
+    if (isDragging.value && viewfinderContainer.value) {
+      // 拖动取景框
+      let newX = localPos.x - dragStart.value.x
+      let newY = localPos.y - dragStart.value.y
+
+      // 边界检测 - 使用设计稿尺寸
+      newX = Math.max(0, Math.min(newX, DESIGN_WIDTH - viewfinder.value.width))
+      newY = Math.max(0, Math.min(newY, DESIGN_HEIGHT - viewfinder.value.height))
+
+      viewfinder.value.x = newX
+      viewfinder.value.y = newY
+    } else if (isResizing.value && viewfinderContainer.value) {
+      // 调整取景框大小
+      const deltaX = localPos.x - resizeStart.value.x
+      const deltaY = localPos.y - resizeStart.value.y
+
+      const minSize = 200 // 最小尺寸
+
+      if (resizeCorner.value === 'se') {
+        // 右下角 - 使用设计稿尺寸限制
+        viewfinder.value.width = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxWidth + deltaX, DESIGN_WIDTH - viewfinder.value.x)
+        )
+        viewfinder.value.height = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxHeight + deltaY, DESIGN_HEIGHT - viewfinder.value.y)
+        )
+      } else if (resizeCorner.value === 'sw') {
+        // 左下角 - 使用设计稿尺寸限制
+        const newWidth = resizeStart.value.boxWidth - deltaX
+        const newX = resizeStart.value.boxX + deltaX
+        if (newWidth >= minSize && newX >= 0) {
+          viewfinder.value.x = newX
+          viewfinder.value.width = newWidth
+        }
+        viewfinder.value.height = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxHeight + deltaY, DESIGN_HEIGHT - viewfinder.value.y)
+        )
+      } else if (resizeCorner.value === 'ne') {
+        // 右上角 - 使用设计稿尺寸限制
+        const newHeight = resizeStart.value.boxHeight - deltaY
+        const newY = resizeStart.value.boxY + deltaY
+        if (newHeight >= minSize && newY >= 0) {
+          viewfinder.value.y = newY
+          viewfinder.value.height = newHeight
+        }
+        viewfinder.value.width = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxWidth + deltaX, DESIGN_WIDTH - viewfinder.value.x)
+        )
+      } else if (resizeCorner.value === 'nw') {
+        // 左上角 - 使用设计稿尺寸限制
+        const newWidth = resizeStart.value.boxWidth - deltaX
+        const newHeight = resizeStart.value.boxHeight - deltaY
+        const newX = resizeStart.value.boxX + deltaX
+        const newY = resizeStart.value.boxY + deltaY
+
+        if (newWidth >= minSize && newX >= 0) {
+          viewfinder.value.x = newX
+          viewfinder.value.width = newWidth
+        }
+        if (newHeight >= minSize && newY >= 0) {
+          viewfinder.value.y = newY
+          viewfinder.value.height = newHeight
+        }
+      }
+    }
+
+    e.preventDefault()
+  }
+
+  // 结束拖动或调整
+  const handleEnd = () => {
+    isDragging.value = false
+    isResizing.value = false
+    isPinching.value = false
+    resizeCorner.value = null
+  }
+
+  // 挂载时添加全局事件监听
+  onMounted(() => {
+    document.addEventListener('mousemove', handleMove)
+    document.addEventListener('mouseup', handleEnd)
+    document.addEventListener('touchmove', handleMove)
+    document.addEventListener('touchend', handleEnd)
+  })
+
+  // 卸载时移除事件监听
+  onUnmounted(() => {
+    document.removeEventListener('mousemove', handleMove)
+    document.removeEventListener('mouseup', handleEnd)
+    document.removeEventListener('touchmove', handleMove)
+    document.removeEventListener('touchend', handleEnd)
+  })
+
+  return {
+    // Refs
+    viewfinderContainer,
+    viewfinderBox,
+
+    // 状态
+    viewfinder,
+    isDragging,
+    isResizing,
+    isPinching,
+
+    // 方法
+    startDrag,
+    startResize,
+
+    // 常量
+    DESIGN_WIDTH,
+    DESIGN_HEIGHT
+  }
+}
diff --git a/src/views/midterm-shooting/shooting/index.vue b/src/views/interview/midterm-shooting/shooting/index.vue
similarity index 90%
rename from src/views/midterm-shooting/shooting/index.vue
rename to src/views/interview/midterm-shooting/shooting/index.vue
index 4886fc3..ab8085f 100644
--- a/src/views/midterm-shooting/shooting/index.vue
+++ b/src/views/interview/midterm-shooting/shooting/index.vue
@@ -6,7 +6,7 @@ import { Overlay } from '@/components/Overlay'
 import { ImgButton } from '@/components/Button'
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
-import videoSrc from '/video/新手导航_九种构图法.mp4'
+import videoSrc from '/video/xinshou_jiuzhonggoutufa.mp4'
 import KnowledgeCard from '@/components/KnowledgeCard/KnowledgeCard.vue'
 
 type Btn = {
@@ -71,11 +71,11 @@ const currentCompositionKey = computed(() => {
 
 const handleClickA = () => {
   // 跳转设备准备
-  router.push({ name: 'filmingLocation-a' })
+  router.push({ name: 'InterviewFilmingLocationA' })
 }
 const handleClickB = () => {
   // 跳转设备准备
-  router.push({ name: 'filmingLocation-b' })
+  router.push({ name: 'InterviewFilmingLocationB' })
 }
 const back = () => {
   // 跳转设备准备
@@ -93,21 +93,16 @@ const back = () => {
         <img :src="shootingtitle" alt="" />
       </div>
       <div class="shooting-return">
-        <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
+        <ImgButton image="shooting/返回.png" @click="back" />
       </div>
       <div class="shooting-left">
-        <img src="@/assets/images/shooting/按钮-取景地A.png" alt="" @click="handleClickA" />
+        <ImgButton image="shooting/按钮-取景地A.png" @click="handleClickA" />
       </div>
       <div class="shooting-right">
-        <img src="@/assets/images/shooting/按钮-取景地B.png" alt="" @click="handleClickB" />
+        <ImgButton image="shooting/按钮-取景地B.png" @click="handleClickB" />
       </div>
       <div class="shooting-composition">
-        <img
-          class="mybutton cursor-pointer"
-          src="@/assets/images/shooting/构图指南.png"
-          alt=""
-          @click="showModal = true"
-        />
+        <ImgButton image="shooting/构图指南.png" @click="showModal = true" />
       </div>
     </div>
 
@@ -116,7 +111,7 @@ const back = () => {
       :highlight-selector="'.mybutton'"
       :highlight-padding="12"
       :highlight-radius="20"
-      position-offset-y="70%"
+      position-offset-y="85%"
     >
       <GuideStepsItem> 在走进拍摄场景之前，我们先来查看一下构图指南。 </GuideStepsItem>
     </GuideSteps>
diff --git a/src/views/interview/midterm-shooting/shooting/utils/touchGestures.ts b/src/views/interview/midterm-shooting/shooting/utils/touchGestures.ts
new file mode 100644
index 0000000..ce27a3a
--- /dev/null
+++ b/src/views/interview/midterm-shooting/shooting/utils/touchGestures.ts
@@ -0,0 +1,47 @@
+/**
+ * 触摸手势工具函数
+ * 用于处理触摸事件的通用计算
+ */
+
+/**
+ * 计算两个触摸点之间的距离
+ * @param touch1 第一个触摸点
+ * @param touch2 第二个触摸点
+ * @returns 两点之间的欧氏距离
+ */
+export const getTouchDistance = (touch1: Touch, touch2: Touch): number => {
+  const dx = touch1.clientX - touch2.clientX
+  const dy = touch1.clientY - touch2.clientY
+  return Math.sqrt(dx * dx + dy * dy)
+}
+
+/**
+ * 计算两个触摸点的中心坐标
+ * @param touch1 第一个触摸点
+ * @param touch2 第二个触摸点
+ * @returns 中心点坐标 {x, y}
+ */
+export const getTouchCenter = (touch1: Touch, touch2: Touch) => {
+  return {
+    x: (touch1.clientX + touch2.clientX) / 2,
+    y: (touch1.clientY + touch2.clientY) / 2
+  }
+}
+
+/**
+ * 从鼠标或触摸事件中获取客户端坐标
+ * @param e 鼠标事件或触摸事件
+ * @returns 客户端坐标 {x, y}
+ */
+export const getClientPosition = (e: MouseEvent | TouchEvent) => {
+  if ('touches' in e && e.touches.length > 0) {
+    return {
+      x: e.touches[0].clientX,
+      y: e.touches[0].clientY
+    }
+  }
+  return {
+    x: (e as MouseEvent).clientX,
+    y: (e as MouseEvent).clientY
+  }
+}
diff --git a/src/views/interview/practice/index.vue b/src/views/interview/practice/index.vue
new file mode 100644
index 0000000..091690b
--- /dev/null
+++ b/src/views/interview/practice/index.vue
@@ -0,0 +1,357 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { StarRating } from '@/components/Rating'
+import { useRouter } from 'vue-router'
+import BackToTopIcon from '@/assets/svg/back-to-top.svg'
+
+const router = useRouter()
+
+const TOTAL_PAGES = 3
+const PAGE_HEIGHT = 1080
+const SCROLL_DURATION = 1000
+
+const currentPage = ref<number>(0)
+const worksScrollIndex = ref<number>(0)
+const animatingToPage = ref<number>(0)
+const containerRef = ref<HTMLElement | null>(null)
+const isAnimating = ref<boolean>(false)
+
+/** 是否为最后一页 */
+const isLastPage = computed<boolean>(() => currentPage.value >= TOTAL_PAGES - 1)
+
+/** 是否正在从第二页回到第一页 */
+const isScrollingBackToFirst = computed<boolean>(() => {
+  return isAnimating.value && currentPage.value === 1 && animatingToPage.value === 0
+})
+
+/** 第一页坐着的人物是否显示 */
+const showSittingPerson = computed<boolean>(() => {
+  // 当前在第一页，且不是正在回滚中
+  return currentPage.value === 0 && !isScrollingBackToFirst.value
+})
+
+/** 他人实战作品列表 */
+interface WorkItem {
+  id: number
+  image: string
+  title: string
+  stars: number
+  path: string
+  description: string
+}
+
+const worksList = ref<WorkItem[]>([
+  // {
+  //   id: 1,
+  //   image: 'https://picsum.photos/400/300?random=1',
+  //   title: '作品名称',
+  //   stars: 4,
+  //   path: '/video/practice/vlog_anli1.mp4',
+  //   description:
+  //     '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介'
+  // },
+  // {
+  //   id: 2,
+  //   image: 'https://picsum.photos/400/300?random=2',
+  //   title: '作品名称',
+  //   stars: 5,
+  //   path: '/video/practice/vlog_anli2.mp4',
+  //   description: '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介'
+  // }
+])
+
+/** 左滑动作品列表 */
+const scrollWorksLeft = (): void => {
+  if (worksScrollIndex.value > 0) {
+    worksScrollIndex.value--
+  }
+}
+
+/** 右滑动作品列表 */
+const scrollWorksRight = (): void => {
+  if (worksScrollIndex.value < worksList.value.length - 3) {
+    worksScrollIndex.value++
+  }
+}
+
+const handleClose = (): void => {
+  router.back()
+}
+
+/** 自定义平滑滚动动画 */
+const smoothScrollTo = (toPage: number): void => {
+  const container = containerRef.value
+  if (!container || isAnimating.value) return
+
+  isAnimating.value = true
+  animatingToPage.value = toPage
+  const startTop = container.scrollTop
+  const targetTop = toPage * PAGE_HEIGHT
+  const distance = targetTop - startTop
+  const startTime = performance.now()
+
+  /** easeInOutQuart 缓动函数 - 更平滑 */
+  const easeInOutQuart = (t: number): number => {
+    return t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2
+  }
+
+  const animateScroll = (currentTime: number): void => {
+    const elapsed = currentTime - startTime
+    const progress = Math.min(elapsed / SCROLL_DURATION, 1)
+    const easeProgress = easeInOutQuart(progress)
+
+    container.scrollTop = startTop + distance * easeProgress
+
+    if (progress < 1) {
+      requestAnimationFrame(animateScroll)
+    } else {
+      isAnimating.value = false
+      currentPage.value = toPage
+    }
+  }
+
+  requestAnimationFrame(animateScroll)
+}
+
+/** 滚动到指定页 */
+const scrollToPage = (page: number): void => {
+  const targetPage = Math.max(0, Math.min(page, TOTAL_PAGES - 1))
+  if (targetPage !== currentPage.value && !isAnimating.value) {
+    smoothScrollTo(targetPage)
+  }
+}
+
+/** 滚动到下一页 */
+const scrollToNextPage = (): void => {
+  scrollToPage(currentPage.value + 1)
+}
+
+/** 滚动到上一页 */
+const scrollToPrevPage = (): void => {
+  scrollToPage(currentPage.value - 1)
+}
+
+/** 回到顶部 */
+const scrollToTop = (): void => {
+  scrollToPage(0)
+}
+
+/** 处理鼠标滚轮事件 */
+const handleWheel = (event: WheelEvent): void => {
+  event.preventDefault()
+  if (isAnimating.value) return
+
+  if (event.deltaY > 0) {
+    scrollToNextPage()
+  } else if (event.deltaY < 0) {
+    scrollToPrevPage()
+  }
+}
+
+onMounted(() => {
+  containerRef.value?.addEventListener('wheel', handleWheel, { passive: false })
+})
+
+onUnmounted(() => {
+  containerRef.value?.removeEventListener('wheel', handleWheel)
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="w-full h-full overflow-auto">
+    <div class="relative min-h-full overflow-hidden">
+      <!-- 关闭 -->
+      <ImgButton
+        class="absolute right-0 top-0 z-50"
+        :image="IMAGE_PATHS.COMPONENTS.BACK"
+        @click="handleClose"
+      />
+      <!-- 实战操作台 -->
+      <div
+        class="w-full h-[1080px] bg-cover bg-no-repeat relative"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/实战操作台首页') }"
+      >
+        <ImgButton
+          class="absolute left-40 bottom-28 z-10"
+          image="vlog/practice/查看任务要求"
+          @click="scrollToNextPage"
+        />
+        <!-- img -->
+        <img
+          class="absolute right-0"
+          draggable="false"
+          :src="getStaticImage('vlog/practice/背景1')"
+          alt=""
+        />
+      </div>
+      <!-- 任务要求 -->
+      <div
+        class="w-full h-[1080px] bg-cover bg-no-repeat relative overflow-hidden"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/背景2') }"
+      >
+        <ImgButton
+          class="absolute right-20 bottom-0 z-99"
+          image="vlog/practice/我的创作笔记"
+          path="/practice/my-notes"
+        />
+
+        <div class="task-panel w-[757px] h-full ml-10 overflow-y-auto" @wheel.stop>
+          <img :src="getStaticImage('vlog/practice/滑动任务面板')" alt="" />
+        </div>
+
+        <img
+          class="absolute right-0 bottom-0 pointer-events-none"
+          :src="getStaticImage('vlog/practice/摄像机')"
+          alt=""
+        />
+        <!-- 站着的人物 - 第二页固定在此（不在回滚动画中） -->
+        <Transition name="fade">
+          <img
+            v-show="currentPage === 1 && !isScrollingBackToFirst"
+            class="absolute right-8 bottom-0 max-h-[90%] pointer-events-none"
+            draggable="false"
+            :src="getStaticImage('vlog/practice/摄像机-人')"
+            alt=""
+          />
+        </Transition>
+      </div>
+      <!-- 他人实战作品 -->
+      <div
+        class="w-full h-[1080px] bg-cover bg-no-repeat pt-44 px-16"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/他人实战作品') }"
+      >
+        <!-- 作品列表 -->
+        <div class="w-full overflow-hidden">
+          <div
+            class="flex gap-6 transition-transform duration-500"
+            :style="{ transform: `translateX(-${worksScrollIndex * 509}px)` }"
+          >
+            <div
+              v-for="work in worksList"
+              :key="work.id"
+              class="w-[503px] h-[722px] flex-shrink-0 rounded-[40px] overflow-hidden bg-[#FFF8F0] py-8 px-6"
+            >
+              <!-- 作品图片 -->
+              <div class="w-full h-[280px] rounded-2xl overflow-hidden">
+                <img class="w-full h-full object-cover" :src="work.image" :alt="work.title" />
+              </div>
+              <!-- 作品信息 -->
+              <div class="flex flex-col items-center pt-8 space-y-4">
+                <h3 class="text-5xl font-bold text-gray-800 mb-2">{{ work.title }}</h3>
+                <!-- 星星评分 -->
+                <StarRating :score="work.stars" size="lg" readonly />
+                <!-- 简介 -->
+                <p class="h-[110px] text-2xl text-gray-600 mb-3 line-clamp-3 leading-relaxed">
+                  {{ work.description }}
+                </p>
+                <!-- 查看按钮 -->
+                <ImgButton
+                  image="vlog/practice/查看"
+                  :path="`/practice/video/${encodeURIComponent(work.path)}`"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 指示按钮 -->
+        <div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex gap-16">
+          <img
+            class="cursor-pointer hover:scale-110 transition-transform"
+            :class="{ 'opacity-50 cursor-not-allowed': worksScrollIndex === 0 }"
+            :src="getStaticImage('vlog/practice/滑动左')"
+            alt="向左"
+            @click="scrollWorksLeft"
+          />
+          <img
+            class="cursor-pointer hover:scale-110 transition-transform rotate-180"
+            :class="{ 'opacity-50 cursor-not-allowed': worksScrollIndex >= worksList.length - 3 }"
+            :src="getStaticImage('vlog/practice/滑动左')"
+            alt="向右"
+            @click="scrollWorksRight"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 下滑按钮 - 最后一页隐藏 -->
+    <ImgButton
+      v-show="!isLastPage"
+      class="absolute bottom-0 left-1/2 -translate-x-1/2"
+      :image="'vlog/practice/下滑'"
+      @click="scrollToNextPage"
+    />
+
+    <!-- 回到顶部按钮 - 最后一页显示 -->
+    <img
+      v-show="isLastPage"
+      class="absolute bottom-10 right-10 cursor-pointer transition-all duration-300 hover:scale-105"
+      :src="BackToTopIcon"
+      @click="scrollToTop"
+    />
+
+    <!-- 跨页人物动画 -->
+    <div v-show="showSittingPerson || isScrollingBackToFirst" class="character-container">
+      <!-- 坐着的人物 - 第一页 -->
+      <Transition name="fade">
+        <img
+          v-show="showSittingPerson"
+          class="character-img right-20 bottom-10"
+          draggable="false"
+          :src="getStaticImage('vlog/practice/背景1-人')"
+          alt=""
+        />
+      </Transition>
+      <!-- 站着的人物 - 回滚动画中 -->
+      <Transition name="fade">
+        <img
+          v-show="isScrollingBackToFirst"
+          class="character-img right-8 bottom-0"
+          draggable="false"
+          :src="getStaticImage('vlog/practice/摄像机-人')"
+          alt=""
+        />
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 隐藏滚动条但保持可滚动 - 兼容主流浏览器 */
+.task-panel {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+.task-panel::-webkit-scrollbar {
+  display: none; /* Chrome/Safari/Opera */
+}
+
+/* 第一页人物动画容器 */
+.character-container {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 20;
+}
+
+.character-img {
+  position: absolute;
+  max-height: 90%;
+}
+
+/* 淡入淡出动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/views/interview/practice/my-notes/index.vue b/src/views/interview/practice/my-notes/index.vue
new file mode 100644
index 0000000..290aa8b
--- /dev/null
+++ b/src/views/interview/practice/my-notes/index.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { StarRating } from '@/components/Rating'
+
+const router = useRouter()
+
+/** 笔记内容 */
+const noteContent = ref<string>('')
+
+/** 保存弹窗 */
+const showModal = ref<boolean>(false)
+
+/** 返回上一页 */
+const handleBack = (): void => {
+  router.back()
+}
+
+const disabled = computed<boolean>(() => noteContent.value.trim() === '')
+
+interface EvaluationItem {
+  /** 标题 */
+  title: string
+  /** 描述 */
+  description: string
+  /** 评分 */
+  score: number
+}
+
+/** 评估项目列表 */
+const evaluationItems = ref<EvaluationItem[]>([
+  {
+    title: '主题与内容',
+    description: '主题明确聚焦"身边美好"，内容真实、有感染力，能让观众感受到日常闪光',
+    score: 3
+  },
+  {
+    title: '拍摄技巧',
+    description: '运镜自然、光线运用合理、画面清晰饱和度、能辅助主题表达（至少1种运镜+1种光线）',
+    score: 4
+  },
+  {
+    title: '剪辑与包装',
+    description: '素材拼接流畅，调色/滤镜适配、字幕清晰、音乐不盖人声、整体风格统一',
+    score: 5
+  },
+  {
+    title: '创意与独特性',
+    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”,避免平淡复刻',
+    score: 4
+  },
+  {
+    title: '综合感受',
+    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”避免平淡复刻',
+    score: 5
+  }
+])
+const handleSave = (): void => {
+  console.log('保存笔记')
+  handleBack()
+}
+</script>
+
+<template>
+  <div
+    class="w-full h-full bg-no-repeat bg-cover px-8 pt-[400px]"
+    :style="{ backgroundImage: getBackgroundImage('vlog/practice/创作笔记底图') }"
+  >
+    <ImgButton
+      class="absolute top-0 right-0"
+      :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+      @click="handleBack"
+    />
+
+    <textarea
+      v-model="noteContent"
+      class="w-full h-[300px]"
+      name="myNotes"
+      placeholder="点击输入创作笔记"
+    ></textarea>
+
+    <div class="absolute bottom-24 left-1/2 -translate-x-1/2 flex gap-60">
+      <ImgButton image="vlog/practice/保存" @click="handleSave" />
+      <ImgButton image="vlog/practice/自评" :disabled="disabled" @click="showModal = true" />
+    </div>
+
+    <!-- 保存图片弹窗 -->
+    <Overlay :visible="showModal" :clickable="false">
+      <div
+        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[100px]"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分底板') }"
+      >
+        <ImgButton
+          class="absolute -top-8 -right-14 z-10"
+          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+          @click="showModal = false"
+        />
+
+        <div class="relative h-full overflow-y-scroll px-8">
+          <div
+            class="w-full bg-no-repeat bg-cover bg-left py-44"
+            :style="{ backgroundImage: getBackgroundImage('vlog/practice/滑动表内文字') }"
+          >
+            <div class="pl-10 space-y-16">
+              <div
+                v-for="(item, index) in evaluationItems"
+                :key="index"
+                class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
+                :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
+              >
+                <div class="pr-8 space-y-10">
+                  <h4 class="text-3xl font-bold text-white mb-3">
+                    {{ `0${index + 1}` }} {{ item.title }}
+                  </h4>
+                  <p class="text-3xl text-gray-800 font-bold leading-relaxed">
+                    {{ item.description }}
+                  </p>
+                </div>
+                <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
+              </div>
+              <div class="w-full flex justify-center">
+                <ImgButton image="vlog/practice/保存" @click="showModal = false" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Overlay>
+  </div>
+</template>
+
+<style scoped>
+textarea {
+  border: none;
+  outline: none;
+  resize: none;
+  font-size: 36px;
+  background-color: transparent;
+}
+
+textarea::placeholder {
+  color: #5d5b5b;
+  font-weight: 700;
+}
+</style>
diff --git a/src/views/interview/practice/video/index.vue b/src/views/interview/practice/video/index.vue
new file mode 100644
index 0000000..4120c50
--- /dev/null
+++ b/src/views/interview/practice/video/index.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { Video } from '@/components'
+import { ImgButton } from '@/components/Button'
+import { StarRating } from '@/components/Rating'
+import { IMAGE_PATHS, getBackgroundImage } from '@/utils'
+import { Overlay } from '@/components/Overlay'
+import { ref } from 'vue'
+
+const router = useRouter()
+
+const props = defineProps({
+  path: {
+    type: String,
+    required: true
+  }
+})
+
+interface EvaluationItem {
+  /** 标题 */
+  title: string
+  /** 描述 */
+  description: string
+  /** 评分 */
+  score: number
+}
+
+/** 评估项目列表 */
+const evaluationItems = ref<EvaluationItem[]>([
+  {
+    title: '主题与内容',
+    description: '主题明确聚焦"身边美好"，内容真实、有感染力，能让观众感受到日常闪光',
+    score: 3
+  },
+  {
+    title: '拍摄技巧',
+    description: '运镜自然、光线运用合理、画面清晰饱和度、能辅助主题表达（至少1种运镜+1种光线）',
+    score: 4
+  },
+  {
+    title: '剪辑与包装',
+    description: '素材拼接流畅，调色/滤镜适配、字幕清晰、音乐不盖人声、整体风格统一',
+    score: 5
+  },
+  {
+    title: '创意与独特性',
+    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”,避免平淡复刻',
+    score: 4
+  },
+  {
+    title: '综合感受',
+    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”避免平淡复刻',
+    score: 5
+  }
+])
+
+/** 保存弹窗 */
+const showModal = ref<boolean>(false)
+
+/** 返回上一页 */
+const handleBack = (): void => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <ImgButton
+      class="absolute right-0 top-0 z-50"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+    <ImgButton
+      class="absolute right-0 bottom-10 z-50"
+      image="vlog/practice/评分"
+      @click="showModal = true"
+    />
+    <Video
+      :src="decodeURIComponent(props.path)"
+      :volume="1"
+      :muted="false"
+      :controls="true"
+      :loop="false"
+    />
+
+    <!-- 保存图片弹窗 -->
+    <Overlay :visible="showModal" :clickable="false">
+      <div
+        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[80px]"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分底板') }"
+      >
+        <ImgButton
+          class="absolute -top-8 -right-14 z-10"
+          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+          @click="showModal = false"
+        />
+
+        <div class="relative h-full overflow-y-scroll px-8">
+          <div
+            class="w-full bg-no-repeat bg-cover bg-left py-44"
+            :style="{ backgroundImage: getBackgroundImage('vlog/practice/滑动表内文字') }"
+          >
+            <div class="pl-10 space-y-16">
+              <div
+                v-for="(item, index) in evaluationItems"
+                :key="index"
+                class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
+                :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
+              >
+                <div class="pr-8 space-y-10">
+                  <h4 class="text-3xl font-bold text-white mb-3">
+                    {{ `0${index + 1}` }} {{ item.title }}
+                  </h4>
+                  <p class="text-3xl text-gray-800 font-bold leading-relaxed">
+                    {{ item.description }}
+                  </p>
+                </div>
+                <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
+              </div>
+              <div class="w-full flex justify-center">
+                <ImgButton image="vlog/practice/保存" @click="showModal = false" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Overlay>
+  </div>
+</template>
diff --git a/src/views/interview/script-writing/doubao.vue b/src/views/interview/script-writing/doubao.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/interview/script-writing/index.vue b/src/views/interview/script-writing/index.vue
new file mode 100644
index 0000000..29851f1
--- /dev/null
+++ b/src/views/interview/script-writing/index.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { ref } from 'vue'
+import sample from './sample.vue'
+import writing from './writing.vue'
+import { useRouter } from 'vue-router'
+import { getStaticImage } from '@/utils'
+
+const router = useRouter()
+
+const writingtext = ref('撰写格式')
+const hiddenbar = ref(false)
+const formatClick = () => {
+  writingtext.value = '撰写格式'
+}
+const sampleanClick = () => {
+  writingtext.value = '样例展示'
+  // router.push({ name: 'sample' })
+}
+
+const hiddenbarclick = () => {
+  hiddenbar.value = !hiddenbar.value
+}
+
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
+</script>
+<template>
+  <div class="relative w-full h-full">
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="back"
+    />
+    <!-- 侧边栏 -->
+    <div
+      :class="[
+        'absolute h-full left-0 top-0 transition-transform duration-300 z-10',
+        hiddenbar ? 'translate-x-[-400px]' : 'translate-x-[0px]'
+      ]"
+    >
+      <img class="absolute inset-0 -z-10" src="@/assets/images/equipment/侧边导航栏.png" alt="" />
+
+      <!-- 脚本撰写 -->
+      <img class="" :src="getStaticImage(IMAGE_PATHS.VLOG.SCRIPTINGTITLE)" />
+
+      <img
+        class="absolute bottom-4 left-6"
+        src="@/assets/images/vlog/制作变焦镜/左边导航栏/ai分镜工具.png"
+        alt=""
+      />
+
+      <div class="absolute left-0 top-36">
+        <ImgButton
+          :image="
+            writingtext == '撰写格式' ? IMAGE_PATHS.VLOG.FORMATLIANG : IMAGE_PATHS.VLOG.FORMATAN
+          "
+          @click="formatClick"
+        />
+        <ImgButton
+          :image="
+            writingtext == '样例展示' ? IMAGE_PATHS.VLOG.SAMPLELANG : IMAGE_PATHS.VLOG.SAMPLEAN
+          "
+          @click="sampleanClick"
+        />
+      </div>
+    </div>
+
+    <div
+      :class="[
+        'absolute transition-transform duration-200  top-1/2 -translate-y-1/2 z-20',
+        hiddenbar ? ' translate-x-[-38px]' : 'absolute translate-x-[270px]'
+      ]"
+      @click="hiddenbarclick()"
+    >
+      <ImgButton :image="hiddenbar ? 'equipment/按钮-展开' : 'equipment/按钮-收缩'" />
+    </div>
+
+    <div class="absolute w-full h-full left-0 top-0">
+      <writing v-if="writingtext == '撰写格式'"></writing>
+      <sample v-else-if="writingtext == '样例展示'"></sample>
+    </div>
+  </div>
+</template>
diff --git a/src/views/interview/script-writing/sample.vue b/src/views/interview/script-writing/sample.vue
new file mode 100644
index 0000000..10d41e2
--- /dev/null
+++ b/src/views/interview/script-writing/sample.vue
@@ -0,0 +1,180 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImagePreview } from '@/components'
+import { useScale } from '@/composables/useScale'
+import { useInterviewStore } from '@/stores'
+const router = useRouter()
+const showDoubao = ref(false)
+const interview = useInterviewStore()
+const steps = [
+  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
+  { id: 'step2', content: '这是主要内容区域的边框' }
+]
+
+const stepIndex = ref(1)
+const back = () => {
+  router.back()
+}
+
+interface SimpleStep {
+  id: string
+  content: string
+}
+
+const handleStepChange = (_step: SimpleStep | null, index: number) => {
+  stepIndex.value = index
+}
+
+const currentHighlight = computed(() =>
+  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
+)
+
+const clickdoubao = () => {
+  interview.setInterviewUnlockProgress(2)
+  router.push({
+    name: 'Interview'
+  })
+}
+
+function openImages(urls: string[], startIndex = 0) {
+  ImagePreview({
+    images: urls,
+    startIndex,
+    maskClosable: true,
+    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value }),
+    onClose: () => {
+      showDoubao.value = true
+    }
+  })
+}
+
+const { scale, offsetX, offsetY } = useScale()
+onMounted(() => {
+  openImages([getStaticImage('vlog/脚本切图/我的志愿者手记拍摄脚本.png')])
+})
+</script>
+<template>
+  <div class="writing-index">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat writing-bg"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BIAOGEBG) }"
+    >
+      <div>
+        <div class="writing-title">
+          <img src="@/assets/images/vlog/标题栏-中间.png" alt="" class="titledibu" />
+          <img
+            src="@/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》分镜头脚本.png"
+            alt=""
+            class="titletext"
+          />
+        </div>
+        <div class="doubao" @click="clickdoubao">
+          <img
+            src="@/assets/images/vlog/制作变焦镜/ai脚本视频占位图.png"
+            alt=""
+            class="doubao-img"
+          />
+        </div>
+        <div class="shooting-return">
+          <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
+        </div>
+      </div>
+
+      <!-- <div v-else>
+        <div class="writing-title">
+          <img src="@/assets/images/vlog/标题栏-中间.png" alt="" class="titledibu" />
+          <img
+            src="@/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》分镜头脚本.png"
+            alt=""
+            class="titletext"
+          />
+        </div>
+        <div class="biaogehome" @click="deletebiaoge()">
+          <img
+            src="@/assets/images/vlog/脚本切图/我的志愿者手记拍摄脚本.png"
+            alt=""
+            class="biaoge-img"
+          />
+          <img src="@/assets/images/midterm/叉.png" alt="" class="biaoge-x" />
+        </div>
+        <div class="shooting-return">
+          <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
+        </div>
+      </div> -->
+
+      <!-- 引导步骤 -->
+      <GuideSteps
+        v-if="showDoubao"
+        :steps="steps"
+        :highlight-selector="currentHighlight"
+        :highlight-padding="12"
+        :highlight-radius="20"
+        @step-change="handleStepChange"
+        position-offset-y="85%"
+      >
+        <GuideStepsItem>
+          <img src="@/assets/images/components/引导/ai脚本工具引导.png" alt="" />
+        </GuideStepsItem>
+      </GuideSteps>
+    </div>
+  </div>
+</template>
+<style lang="less" scoped>
+.writing-index {
+  width: 100%;
+  height: 100%;
+}
+
+.shooting-return {
+  position: absolute;
+  right: -90%;
+  top: 0;
+  width: 50%;
+  height: 50%;
+}
+
+.doubao .doubao-img {
+  width: 100%;
+  height: 100%;
+}
+
+.biaoge-x {
+  position: absolute;
+  top: -20px;
+  right: 0px;
+  width: 70px;
+  cursor: pointer;
+  z-index: 9999999;
+}
+
+.writing-title {
+  .titledibu {
+    position: absolute;
+    top: 17px;
+    left: 30%;
+  }
+
+  .titletext {
+    position: absolute;
+    top: 30px;
+    left: 40%;
+  }
+}
+
+.biaogehome {
+  position: absolute;
+  top: 165px;
+  left: 5%;
+  width: 94%;
+}
+
+.biaogehome .biaoge-img {
+  height: 896px !important;
+  width: 1800px;
+  display: block;
+}
+</style>
diff --git a/src/views/interview/script-writing/writing.vue b/src/views/interview/script-writing/writing.vue
new file mode 100644
index 0000000..99524ee
--- /dev/null
+++ b/src/views/interview/script-writing/writing.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="writing-index">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat writing-bg"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.SCRIPTING) }"
+    >
+      <div class="geshi-title">
+        <img src="@/assets/images/vlog/标题栏-中间.png" alt="" class="titledibu" />
+        <img
+          src="@/assets/images/vlog/制作变焦镜/文字标题/脚本的概念和基本要素.png"
+          alt=""
+          class="titletext"
+        />
+      </div>
+      <video :src="fourth" controls></video>
+      <!-- <div class="shooting-return">
+        <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
+      </div> -->
+      <!-- 引导步骤 -->
+      <!-- <GuideSteps :steps="steps" :highlight-selector="currentHighlight" :highlight-padding="12"
+                :highlight-radius="20" @step-change="handleStepChange" position-offset-y="85%" hidden:false>
+                <GuideStepsItem>
+                    <img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
+                </GuideStepsItem>
+            </GuideSteps> -->
+    </div>
+  </div>
+</template>
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import fourth from '/video/vlog_renwuqujing_jiaobencehua.mp4'
+</script>
+<style lang="less" scoped>
+.writing-index {
+  width: 100%;
+  height: 100%;
+}
+
+.geshi-title {
+  .titledibu {
+    position: absolute;
+    top: 17px;
+    left: 30%;
+  }
+
+  .titletext {
+    position: absolute;
+    top: 30px;
+    left: 45%;
+  }
+}
+
+.shooting-return {
+  position: absolute;
+  right: -90%;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/interview/video/index.vue b/src/views/interview/video/index.vue
new file mode 100644
index 0000000..5ec7250
--- /dev/null
+++ b/src/views/interview/video/index.vue
@@ -0,0 +1,229 @@
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+import { GuideSteps, StepNavigation } from '@/components/Guide'
+import { Video } from '@/components'
+import { getStaticImage, IMAGE_PATHS } from '@/utils'
+import second from '/video/vlog_renwuqujing_jichujingbieyunyong.mp4'
+import third from '/video/vlog_renwuqujing_huamiangoutu.mp4'
+import fourth from '/video/vlog_renwuqujing_jiaobencehua.mp4'
+import five from '/video/vlog_renwuqujing_zhuapai.mp4'
+import six from '/video/vlog_renwuqujing_jianjipingjie.mp4'
+import { useInterviewStore } from '@/stores'
+
+const router = useRouter()
+const route = useRoute()
+
+const interview = useInterviewStore()
+
+// 受控播放开关（用于切换到下一个视频时自动播放）
+const playing = ref(false)
+const status = ref(false)
+
+//引导步骤
+const steps = ref([
+  {
+    id: 'step1',
+    content: '试着用这些方法记录身边的小事，你会发现，原来平凡的日子里有这么多值得捕捉的瞬间。'
+  }
+])
+
+// 步骤导航数据
+const navigationSteps = ref([
+  {
+    id: 'step1',
+    label: '拍摄执行',
+    content: '基础景别应用',
+    type: 'shooting' as const
+  },
+  {
+    id: 'step2',
+    label: '拍摄执行',
+    content: '画面构图',
+    type: 'shooting' as const
+  },
+  {
+    id: 'step3',
+    label: '内容策划',
+    content: '简单脚本策划',
+    type: 'planning' as const
+  },
+  {
+    id: 'step4',
+    label: '拍摄执行',
+    content: '动态事件跟拍与抓拍',
+    type: 'shooting' as const
+  },
+  {
+    id: 'step5',
+    label: '后期制作',
+    content: '素材导入、剪辑拼接',
+    type: 'post' as const
+  }
+])
+
+// 步骤导航相关状态
+const showStepNavigation = ref(false)
+const currentNavigationStep = ref(1) // 对应视频索引，从0开始
+
+// 视频列表
+const videoList = [second, third, fourth, five, six]
+const currentVideoIndex = ref(0)
+
+//按顺序播放
+const currentVideo = computed(() => videoList[currentVideoIndex.value])
+const resolvedSrc = computed(() => {
+  if (key.value === 'case') return '/video/anlishangxi_meishi_xiaoyuanzi.mp4'
+  if (key.value === 'profession') return currentVideo.value
+  return ''
+})
+const handleVideoChange = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+    currentNavigationStep.value = currentVideoIndex.value
+  } else {
+    status.value = true
+    steps.value = [
+      {
+        id: 'step1',
+        content: '恭喜你，已完成专业剖析的学习，点击【查看脚本】回顾视频脚本吧!'
+      }
+    ]
+    return
+  }
+  nextTick(() => {
+    // 使用受控播放来触发下一个视频自动播放
+    playing.value = true
+  })
+}
+
+const handleClose = () => {
+  router.back()
+}
+
+const image = computed(() => route.query.image as string)
+const key = computed(() => route.query.key as string)
+
+const handleClick = () => {}
+
+const handlePlay = () => {}
+
+const onEnded = () => {
+  if (key.value === 'profession') handleVideoChange()
+}
+
+const handleComplete = () => {
+  if (key.value === 'profession') {
+    if (!interview.isInterviewUnlock) interview.setIsInterviewUnlock(true)
+    router.push({
+      name: 'InterviewWork'
+    })
+  } else {
+    if (interview.InterviewUnlockProgress == 0) interview.setInterviewUnlockProgress(1)
+    router.push({
+      name: 'Interview'
+    })
+  }
+}
+
+// 步骤导航事件处理
+const handleStepClick = (index: number) => {
+  currentVideoIndex.value = index
+  currentNavigationStep.value = index
+  nextTick(() => {
+    playing.value = true
+  })
+}
+
+const handleStepNavigationClose = () => {
+  showStepNavigation.value = false
+}
+
+onMounted(() => {
+  if (key.value === 'idea') {
+    status.value = true
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-full relative bg-white/10" @click="handleClick">
+    <template v-if="key !== 'case' && key !== 'profession'">
+      <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"
+        @click="handleClose"
+      />
+    </template>
+    <!-- 步骤导航按钮 -->
+    <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"
+      @click="showStepNavigation = true"
+      title="步骤导航"
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+          d="M3 4H17M3 8H17M3 12H17M3 16H17"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </svg>
+    </button>
+
+    <div v-if="key === 'vlog'" :src="image">
+      <img :src="getStaticImage('work/vlog背景全屏待定')" alt="" />
+    </div>
+    <Video
+      v-else-if="key === 'case' || key === 'profession'"
+      :src="resolvedSrc"
+      v-model="playing"
+      :muted="false"
+      :volume="1"
+      :controls="true"
+      :hideNativeControls="true"
+      @play="handlePlay"
+      @ended="onEnded"
+    >
+      <template v-slot:overlay>
+        <ImgButton
+          class="absolute left-4 top-4 z-10 pointer-events-auto"
+          :image="image"
+        ></ImgButton>
+        <ImgButton
+          class="absolute right-0 top-0 z-10 pointer-events-auto"
+          :image="IMAGE_PATHS.COMPONENTS.BACK"
+          @click="handleClose"
+        />
+      </template>
+    </Video>
+    <div v-else-if="key === 'idea'" :src="image">
+      <img :src="getStaticImage('work/思路提点全屏')" alt="" />
+    </div>
+  </div>
+
+  <!-- 引导与高亮 -->
+  <GuideSteps v-if="status" :steps="steps" position-offset-y="85%" @complete="handleComplete" />
+
+  <!-- 步骤导航抽屉 -->
+  <StepNavigation
+    :visible="showStepNavigation && key === 'profession'"
+    :background-image="getStaticImage('work/vlog背景全屏待定')"
+    :steps="navigationSteps"
+    :current-step-index="currentNavigationStep"
+    @step-click="handleStepClick"
+    @close="handleStepNavigationClose"
+  />
+</template>
+
+<style scoped>
+video {
+  width: 100%;
+  height: 100%;
+  /* 核心：保持视频比例，多余部分被裁剪 */
+  object-fit: cover;
+}
+</style>
diff --git a/src/views/interview/work/components/WorkSideSwitcher.vue b/src/views/interview/work/components/WorkSideSwitcher.vue
new file mode 100644
index 0000000..c8e38ff
--- /dev/null
+++ b/src/views/interview/work/components/WorkSideSwitcher.vue
@@ -0,0 +1,66 @@
+<template>
+  <ImageSwitchList
+    v-model="innerValue"
+    :items="items"
+    direction="vertical"
+    :item-class="itemClass"
+    @change="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { ImageSwitchList } from '@/components/Switcher'
+import { computed } from 'vue'
+
+type WorkTab = 'vlog' | 'case' | 'profession' | 'idea'
+
+interface Props {
+  modelValue?: WorkTab
+  itemClass?: string
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: WorkTab): void
+  (e: 'change', value: WorkTab): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 'case',
+  itemClass: 'w-[260px] h-[64px] rounded-[18px]'
+})
+
+const emit = defineEmits<Emits>()
+
+const innerValue = computed({
+  get: () => props.modelValue as WorkTab,
+  set: (val: WorkTab) => emit('update:modelValue', val)
+})
+
+const items = [
+  // { key: 'vlog', activeImage: 'work/vlog初识-当前', inactiveImage: 'work/vlog初识-未选中' },
+  {
+    key: 'case',
+    label: '案例赏析',
+    activeImage: 'work/选中_带三角',
+    inactiveImage: 'work/未选中_带三角'
+  },
+  {
+    key: 'profession',
+    label: '专业剖析',
+    activeImage: 'work/选中_带三角',
+    inactiveImage: 'work/未选中_带三角'
+  },
+  {
+    key: 'idea',
+    label: '思路提点',
+    activeImage: 'work/选中_带三角',
+    inactiveImage: 'work/未选中_带三角'
+  }
+]
+
+const onChange = (val: string) => emit('change', val as WorkTab)
+
+defineExpose({
+  items
+})
+</script>
diff --git a/src/views/interview/work/index.vue b/src/views/interview/work/index.vue
new file mode 100644
index 0000000..0d677de
--- /dev/null
+++ b/src/views/interview/work/index.vue
@@ -0,0 +1,197 @@
+<script lang="tsx" name="Work" setup>
+defineOptions({ name: 'Work' })
+import { ref, computed } from 'vue'
+import { getBackgroundImage, IMAGE_PATHS, getStaticImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import WorkSideSwitcher from './components/WorkSideSwitcher.vue'
+import { GuideSteps } from '@/components/Guide'
+import { useRouter } from 'vue-router'
+import { useScale } from '@/composables/useScale'
+import { ImagePreview } from '@/components'
+import { useInterviewStore } from '@/stores'
+
+const router = useRouter()
+
+const interview = useInterviewStore()
+
+type WorkTab = 'vlog' | 'case' | 'profession' | 'idea'
+
+const selected = ref<WorkTab>('case')
+const stepIndex = ref(0)
+const workSideSwitcherRef = ref<InstanceType<typeof WorkSideSwitcher>>()
+
+const isGuideInterviewTask = computed(() => interview.isGuideInterviewTask)
+const isInterviewUnlock = computed(() => interview.isInterviewUnlock)
+
+//引导步骤
+const steps = [
+  {
+    id: 'step1',
+    content:
+      '现在我们要一起走进 Vlog 的世界。简单说，Vlog 就是用视频记录生活的一种方式 —— 它像一本会动的日记，能把我们身边的小事、瞬间的心情，通过镜头变得生动又具体。'
+  },
+  { id: 'step2', content: '接下来，我们就通过一个具体的案例，看看 Vlog 是怎么“捕捉美好” 的吧。' }
+]
+
+//切换图片
+const sideSwitcherItems = ref([
+  {
+    key: 'vlog',
+    description: '记录身边的美好',
+    image: 'work/vlog背景全屏待定'
+  },
+  {
+    key: 'case',
+    description: '案例赏析-桂花酒酿小圆子',
+    image: 'work/案例背景待定'
+  },
+  {
+    key: 'profession',
+    description: '专业剖析-桂花酒酿小圆子',
+    image: 'work/专业剖析小屏'
+  },
+  {
+    key: 'idea',
+    description: '思路提点-桂花酒酿小圆子',
+    image: 'work/思路提点小屏'
+  }
+])
+
+//当前选中的item
+const currentItem = computed(() => {
+  return sideSwitcherItems.value.find(item => item.key === selected.value)
+})
+
+const currentHighlight = computed(() =>
+  stepIndex.value === 0 ? '.img-switch-item--case' : '.work-border'
+)
+
+interface SimpleStep {
+  id: string
+  content: string
+}
+const handleStepChange = (_step: SimpleStep | null, index: number) => {
+  stepIndex.value = index
+}
+
+const handleSideSwitcherChange = (value: WorkTab) => {
+  if (selected.value === value) return
+}
+
+const handleImageClick = () => {
+  router.push({
+    name: 'FilmVideo',
+    query: {
+      image:
+        workSideSwitcherRef.value?.items.find(item => item.key === selected.value)?.activeImage ||
+        '',
+      key: selected.value
+    }
+  })
+}
+
+const handleClose = () => {
+  router.push({ name: 'Film' })
+}
+
+const handleWorkClick = () => {
+  if (!isInterviewUnlock.value) return
+  openImages([getStaticImage('work/桂花酒酿小圆子')])
+}
+const handleGuideComplete = () => {
+  interview.setIsGuideInterviewTask(false)
+}
+
+const handleOpenGuide = () => {
+  stepIndex.value = 0
+  interview.setIsGuideInterviewTask(true)
+}
+
+const { scale, offsetX, offsetY } = useScale()
+
+function openImages(urls: string[], startIndex = 0) {
+  ImagePreview({
+    images: urls,
+    startIndex,
+    maskClosable: true,
+    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
+  })
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative">
+    <!-- 背景图片-center -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.BG) }"
+    ></div>
+
+    <!-- 关闭 -->
+    <ImgButton
+      class="absolute right-0 top-0"
+      :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+      @click="handleClose"
+    />
+
+    <!-- border图片 -->
+    <div
+      class="work-border absolute top-[140px] left-24 inset-0 bg-cover bg-center bg-no-repeat z-10 w-[1360px] h-[800px] p-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.BORDER) }"
+    >
+      <div
+        class="flex items-center pl-16 w-[1357px] h-[265px] absolute -bottom-16 left-0 bg-cover bg-center bg-no-repeat z-20"
+        :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.TITLE) }"
+      >
+        <span
+          class="mt-24 text-white font-bold text-6xl [text-shadow:0_2px_4px_rgba(0,0,0,0.2),0_0_6px_rgba(0,207,255,0.9),0_0_14px_rgba(0,207,255,0.7)]"
+        >
+          {{ currentItem?.description }}</span
+        >
+      </div>
+      <img
+        @click="handleImageClick"
+        class="rounded-[62px] cursor-pointer"
+        :src="getStaticImage(currentItem?.image || '')"
+        alt=""
+      />
+    </div>
+
+    <!-- 左侧选项切换 -->
+    <div class="absolute right-4 top-56 z-20">
+      <WorkSideSwitcher
+        ref="workSideSwitcherRef"
+        v-model="selected"
+        @change="handleSideSwitcherChange"
+        :item-class="'w-[359px] h-[96px]'"
+      />
+    </div>
+
+    <!-- 任务取景按钮 -->
+    <ImgButton
+      class="absolute right-14 bottom-10"
+      :image="isInterviewUnlock ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
+      @click="handleWorkClick"
+    />
+
+    <!-- 引导与高亮 -->
+    <GuideSteps
+      v-if="isGuideInterviewTask"
+      :steps="steps"
+      :highlight-selector="currentHighlight"
+      :highlight-padding="12"
+      :highlight-radius="20"
+      @step-change="handleStepChange"
+      @complete="handleGuideComplete"
+      @skip="handleGuideComplete"
+      position-offset-y="85%"
+    />
+
+    <!-- 引导词按钮 -->
+    <ImgButton
+      class="absolute w-[120px] bottom-0 right-0 z-10"
+      image="components/long"
+      @click="handleOpenGuide"
+    />
+  </div>
+</template>
diff --git a/src/views/midterm-shooting/shooting/filmingLocation-a/a-1.vue b/src/views/midterm-shooting/shooting/filmingLocation-a/a-1.vue
deleted file mode 100644
index ecc8c5b..0000000
--- a/src/views/midterm-shooting/shooting/filmingLocation-a/a-1.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const handleClicka2 = () => {
-  // 跳转设备准备
-  router.push({ name: 'a-2' })
-}
-const back = () => {
-  // 跳转设备准备
-  router.back()
-}
-</script>
-<template>
-  <div>
-    <img src="@/assets/images/shooting/取景地a合图1.png" alt="" @click="handleClicka2" />
-  </div>
-  <div class="shooting-return">
-    <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
-  </div>
-</template>
-<style>
-.shooting-return {
-  position: absolute;
-  right: -90%;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/src/views/midterm-shooting/shooting/filmingLocation-a/a-2.vue b/src/views/midterm-shooting/shooting/filmingLocation-a/a-2.vue
deleted file mode 100644
index 39bfff4..0000000
--- a/src/views/midterm-shooting/shooting/filmingLocation-a/a-2.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const handleClicka3 = () => {
-  // 跳转设备准备
-  router.push({ name: 'a-3' })
-}
-const back = () => {
-  // 跳转设备准备
-  router.back()
-}
-</script>
-<template>
-  <div>
-    <img src="@/assets/images/shooting/取景地a合图2.png" alt="" @click="handleClicka3" />
-  </div>
-  <div class="shooting-return">
-    <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
-  </div>
-</template>
-<style>
-.shooting-return {
-  position: absolute;
-  right: -90%;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/src/views/midterm-shooting/shooting/filmingLocation-a/a-3.vue b/src/views/midterm-shooting/shooting/filmingLocation-a/a-3.vue
deleted file mode 100644
index a30e325..0000000
--- a/src/views/midterm-shooting/shooting/filmingLocation-a/a-3.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-// const handleClicka2 = () => {
-//   // 跳转设备准备
-//   router.push({ name: 'a-2' })
-// }
-const back = () => {
-  // 跳转设备准备
-  router.back()
-}
-</script>
-<template>
-  <div>
-    <img src="@/assets/images/shooting/取景地a合图3.png" alt="" />
-  </div>
-  <div class="shooting-return">
-    <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
-  </div>
-</template>
-<style>
-.shooting-return {
-  position: absolute;
-  right: -90%;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/src/views/midterm-shooting/shooting/filmingLocation-a/index.vue b/src/views/midterm-shooting/shooting/filmingLocation-a/index.vue
deleted file mode 100644
index 5eb3931..0000000
--- a/src/views/midterm-shooting/shooting/filmingLocation-a/index.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts" setup>
-import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
-const handleClicka1 = () => {
-  // 跳转设备准备
-  router.push({ name: 'a-1' })
-}
-const back = () => {
-  // 跳转设备准备
-  router.back()
-}
-</script>
-<template>
-  <div class="shooting-index">
-    <!-- 背景图片 -->
-    <div
-      class="absolute inset-0 bg-cover bg-center bg-no-repeat shooting-bg"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.FILMINGLOCATIONA.BG) }"
-    >
-      <div class="start">
-        <img src="@/assets/images/shooting/开始取景.png" alt="" />
-      </div>
-      <div class="text">
-        <img src="@/assets/images/shooting/按钮-开始取景.png" alt="" @click="handleClicka1" />
-      </div>
-      <div class="shooting-return">
-        <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
-      </div>
-    </div>
-  </div>
-</template>
-<style lang="less">
-.shooting-index {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-
-  .start {
-    position: absolute;
-    left: 0;
-    bottom: -29%;
-    width: 100%;
-    height: 100%;
-  }
-
-  .text {
-    position: absolute;
-    left: 40%;
-    bottom: -56%;
-    width: 100%;
-    height: 100%;
-  }
-
-  .shooting-return {
-    position: absolute;
-    right: -90%;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
diff --git a/src/views/midterm-shooting/shooting/filmingLocation-b/b-1.vue b/src/views/midterm-shooting/shooting/filmingLocation-b/b-1.vue
deleted file mode 100644
index 8ce1978..0000000
--- a/src/views/midterm-shooting/shooting/filmingLocation-b/b-1.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
-const back = () => {
-  // 跳转设备准备
-  router.back()
-}
-const handleClickb2 = () => {
-  // 跳转设备准备
-  router.push({ name: 'b-2' })
-}
-</script>
-<template>
-  <div>
-    <img src="@/assets/images/shooting/取景地b合图1.png" alt="" @click="handleClickb2" />
-  </div>
-  <div class="shooting-return">
-    <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
-  </div>
-</template>
-<style>
-.shooting-return {
-  position: absolute;
-  right: -90%;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/src/views/midterm-shooting/shooting/filmingLocation-b/b-2.vue b/src/views/midterm-shooting/shooting/filmingLocation-b/b-2.vue
deleted file mode 100644
index 6269c71..0000000
--- a/src/views/midterm-shooting/shooting/filmingLocation-b/b-2.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const handleClickb3 = () => {
-  // 跳转设备准备
-  router.push({ name: 'b-3' })
-}
-const back = () => {
-  // 跳转设备准备
-  router.back()
-}
-</script>
-<template>
-  <div>
-    <img src="@/assets/images/shooting/取景地b合图2.png" alt="" @click="handleClickb3" />
-  </div>
-  <div class="shooting-return">
-    <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
-  </div>
-</template>
-<style>
-.shooting-return {
-  position: absolute;
-  right: -90%;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/src/views/midterm-shooting/shooting/filmingLocation-b/b-3.vue b/src/views/midterm-shooting/shooting/filmingLocation-b/b-3.vue
deleted file mode 100644
index 2f6e15d..0000000
--- a/src/views/midterm-shooting/shooting/filmingLocation-b/b-3.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-// const handleClickb2 = () => {
-//   // 跳转设备准备
-//   router.push({ name: 'b-2' })
-// }
-const back = () => {
-  // 跳转设备准备
-  router.back()
-}
-
-const tiaohouqi = () => {
-  router.push('afterditing')
-}
-</script>
-<template>
-  <div>
-    <img src="@/assets/images/shooting/取景地b合图3.png" alt="" @click="tiaohouqi" />
-  </div>
-  <div class="shooting-return">
-    <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
-  </div>
-</template>
-<style>
-.shooting-return {
-  position: absolute;
-  right: -90%;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/src/views/midterm-shooting/shooting/filmingLocation-b/index.vue b/src/views/midterm-shooting/shooting/filmingLocation-b/index.vue
deleted file mode 100644
index 5f389ac..0000000
--- a/src/views/midterm-shooting/shooting/filmingLocation-b/index.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts" setup>
-import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const handleClickb1 = () => {
-  // 跳转设备准备
-  router.push({ name: 'b-1' })
-}
-const back = () => {
-  // 跳转设备准备
-  router.back()
-}
-</script>
-<template>
-  <div class="shooting-index">
-    <!-- 背景图片 -->
-    <div
-      class="absolute inset-0 bg-cover bg-center bg-no-repeat shooting-bg"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.FILMINGLOCATIONA.BG) }"
-    >
-      <div class="start">
-        <img src="@/assets/images/shooting/开始取景.png" alt="" />
-      </div>
-      <div class="text">
-        <img src="@/assets/images/shooting/按钮-开始取景.png" alt="" @click="handleClickb1" />
-      </div>
-      <div class="shooting-return">
-        <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
-      </div>
-    </div>
-  </div>
-</template>
-<style lang="less">
-.shooting-index {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-
-  .start {
-    position: absolute;
-    left: 0;
-    bottom: -29%;
-    width: 100%;
-    height: 100%;
-  }
-
-  .text {
-    position: absolute;
-    left: 40%;
-    bottom: -56%;
-    width: 100%;
-    height: 100%;
-  }
-
-  .shooting-return {
-    position: absolute;
-    right: -90%;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
diff --git a/src/views/not-found.vue b/src/views/not-found.vue
new file mode 100644
index 0000000..faceeca
--- /dev/null
+++ b/src/views/not-found.vue
@@ -0,0 +1,17 @@
+<script lang="tsx" setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const handleGoHome = () => {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="bg-white h-full flex flex-col items-center justify-center space-y-2">
+    <h1 class="text-4xl font-bold">404</h1>
+    <p class="text-2xl">页面不存在</p>
+    <button @click="handleGoHome">返回首页</button>
+  </div>
+</template>
diff --git a/src/views/prepare/index.vue b/src/views/prepare/index.vue
deleted file mode 100644
index 48592b8..0000000
--- a/src/views/prepare/index.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<script lang="tsx" setup>
-import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
-import { ImgButton } from '@/components/Button'
-
-import { ref, computed } from 'vue'
-import { ProgressBar } from '@/components'
-import { useRouter } from 'vue-router'
-
-import { GuideSteps, GuideStepsItem } from '@/components/Guide'
-const steps = [
-  {
-    id: 'step1',
-    content:
-      '引导词：前期准备要做好四件事，【资源筹备】【创意构想】【脚本撰写】【分镜制作】，画面中高亮的按钮是我们可以展开学习的内容。点击进入学习吧！'
-  },
-  { id: 'step2', content: '这是主要内容区域的边框' }
-]
-// const selected = ref<WorkTab>('vlog')
-const stepIndex = ref(0)
-const currentHighlight = computed(() =>
-  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
-)
-
-const router = useRouter()
-
-const currentStep = ref(1)
-
-const handleComplete = () => {
-  console.log('完成前置条件')
-  // 处理完成逻辑
-}
-
-const handleStepChange = (step: number) => {
-  console.log('步骤变化:', step)
-  // 处理步骤变化逻辑
-}
-
-const handleWorkClick = () => {
-  console.log('任务取景按钮点击')
-  // 处理任务取景按钮点击逻辑
-  router.push({ name: 'Work' })
-}
-interface SimpleStep {
-  id: string
-  content: string
-}
-const handleStepChangeGui = (_step: SimpleStep | null, index: number) => {
-  stepIndex.value = index
-}
-const highlightShow = ref(true)
-// const StoryboardButton = ref()
-const SelectArrowtext = ref('脚本撰写')
-const ScriptingClick = (routeName: string) => {
-  SelectArrowtext.value = '脚本撰写'
-  router.push({ name: routeName })
-}
-const StoryboardClick = (routeName: string) => {
-  SelectArrowtext.value = '分镜制作'
-  router.push({ name: routeName })
-  // IMAGE_PATHS.VLOG.Storyboard
-  // IMAGE_PATHS.VLOG.SelectedStoryboard
-}
-const currentPage = ref(0)
-</script>
-
-<template>
-  <div class="w-full h-full relative">
-    <!-- 背景图片-center -->
-    <div
-      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
-    ></div>
-
-    <!-- 背景图片 -->
-    <div
-      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG) }"
-    ></div>
-
-    <!-- 标题 -->
-    <div class="absolute top-2 left-1/2 -translate-x-1/2">
-      <ImgButton :image="IMAGE_PATHS.VLOG.TITLE" />
-    </div>
-
-    <!-- 任务取景按钮 -->
-    <div
-      class="absolute left-24 top-24"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
-    >
-      <ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN_OK" />
-    </div>
-    <!-- 前期准备底板 -->
-    <div v-if="highlightShow" class="absolute right-90 ml-[135px]">
-      <img :src="getStaticImage(IMAGE_PATHS.VLOG.PREPARE)" />
-    </div>
-    <!-- 脚本撰写按钮 -->
-    <div v-if="highlightShow" class="absolute left-[13%] top-1/3">
-      <ImgButton
-        :image="
-          SelectArrowtext == '脚本撰写'
-            ? IMAGE_PATHS.VLOG.SelectedScripting
-            : IMAGE_PATHS.VLOG.Scripting
-        "
-        @click="ScriptingClick('script-writing')"
-      />
-    </div>
-
-    <!-- 选中箭头 -->
-    <div
-      v-if="highlightShow"
-      class="absolute left-[13%] top-[37%] -translate-x-1/2"
-      :class="SelectArrowtext == '脚本撰写' ? 'SelectArrow-Scripting' : 'SelectArrow-Storyboard'"
-    >
-      <ImgButton :image="IMAGE_PATHS.VLOG.SelectArrow" />
-    </div>
-
-    <!-- 分镜制作 -->
-    <div v-if="highlightShow" class="absolute left-[20%] top-[47%] -translate-x-1/2">
-      <ImgButton
-        :image="
-          SelectArrowtext == '分镜制作'
-            ? IMAGE_PATHS.VLOG.SelectedStoryboard
-            : IMAGE_PATHS.VLOG.Storyboard
-        "
-        @click="StoryboardClick"
-      />
-    </div>
-
-    <!-- 进度百分比 -->
-    <div v-if="highlightShow" class="absolute left-1/2 top-[12%] -translate-x-1/2">
-      <div class="flex">
-        <ImgButton :image="IMAGE_PATHS.VLOG.Progress" />
-        <ImgButton :image="IMAGE_PATHS.VLOG.Four" />
-        <ImgButton :image="IMAGE_PATHS.VLOG.Zero" />
-        <ImgButton :image="IMAGE_PATHS.VLOG.Percentage" />
-      </div>
-    </div>
-    <!-- 引导任务 -->
-    <!-- <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" /> -->
-
-    <div class="absolute bottom-0 w-full">
-      <ProgressBar
-        :current-step="currentStep"
-        @complete="handleComplete"
-        @step-change="handleStepChange"
-      />
-    </div>
-    <GuideSteps
-      :steps="steps"
-      :highlight-selector="currentHighlight"
-      :highlight-padding="12"
-      :highlight-radius="20"
-      @step-change="handleStepChangeGui"
-    >
-      <GuideStepsItem>
-        <img src="@/assets/images/midterm/前期准备引导1.png" alt="" />
-      </GuideStepsItem>
-    </GuideSteps>
-  </div>
-  <!-- 叉 -->
-  <div
-    v-if="highlightShow"
-    class="absolute right-0 top-0"
-    style="z-index: 998; cursor: pointer"
-    @click="router.back()"
-  >
-    <img src="@/assets/images/midterm/叉.png" alt="" />
-  </div>
-</template>
-<style>
-.guide-ui {
-  top: 80% !important;
-}
-
-.dragon-character {
-  top: 80% !important;
-}
-
-.SelectArrow-Scripting {
-  position: absolute;
-  left: 13%;
-  top: 37%;
-}
-
-.SelectArrow-Storyboard {
-  position: absolute;
-  left: 11%;
-  top: 51%;
-}
-</style>
diff --git a/src/views/prepare/script-writing/index.vue b/src/views/prepare/script-writing/index.vue
deleted file mode 100644
index 1af4d35..0000000
--- a/src/views/prepare/script-writing/index.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<script lang="ts" setup>
-import { IMAGE_PATHS, getStaticImage } from '@/utils'
-import { ImgButton } from '@/components/Button'
-import { useRouter } from 'vue-router'
-import { ref } from 'vue'
-import sample from './sample.vue'
-import writing from './writing.vue'
-const router = useRouter()
-const writingtext = ref('撰写格式')
-const hiddenbar = ref(false)
-const formatClick = () => {
-  writingtext.value = '撰写格式'
-}
-const sampleanClick = () => {
-  writingtext.value = '样例展示'
-  // router.push({ name: 'sample' })
-}
-
-const hiddenbarclick = () => {
-  hiddenbar.value = !hiddenbar.value
-}
-</script>
-<template>
-  <div class="writing-bar">
-    <img src="@/assets/images/equipment/侧边导航栏.png" alt="" :hidden="hiddenbar" />
-    <div class="writing-item" :hidden="hiddenbar">
-      <ImgButton
-        :image="
-          writingtext == '撰写格式' ? IMAGE_PATHS.VLOG.FORMATLIANG : IMAGE_PATHS.VLOG.FORMATAN
-        "
-        @click="formatClick"
-      />
-      <ImgButton
-        :image="writingtext == '样例展示' ? IMAGE_PATHS.VLOG.SAMPLELANG : IMAGE_PATHS.VLOG.SAMPLEAN"
-        @click="sampleanClick"
-      />
-      <img
-        class="writing-ai"
-        src="@/assets/images/vlog/制作变焦镜/左边导航栏/ai分镜工具.png"
-        alt=""
-      />
-    </div>
-    <!-- 设备准备按钮 -->
-    <div class="writing-bt">
-      <ImgButton :image="IMAGE_PATHS.VLOG.SCRIPTINGTITLE" />
-    </div>
-    <div :class="hiddenbar ? 'writing-unfold1' : 'writing-unfold2'" @click="hiddenbarclick()">
-      <ImgButton :image="hiddenbar ? 'equipment/按钮-展开' : 'equipment/按钮-收缩'" />
-    </div>
-  </div>
-
-  <writing v-if="writingtext == '撰写格式'"></writing>
-  <sample v-else-if="writingtext == '样例展示'"></sample>
-</template>
-<style lang="less">
-.writing-bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-
-  .writing-bt {
-    position: absolute;
-    top: 0;
-    left: -34px;
-    width: 476px;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .writing-unfold1 {
-    position: absolute;
-    top: 490px;
-    left: -41px;
-    width: 150px;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-  }
-
-  .writing-unfold2 {
-    position: absolute;
-    top: 490px;
-    left: 268px;
-    width: 150px;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-  }
-
-  .writing-item {
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding-top: 220px;
-    padding-left: 20px;
-
-    span {
-      display: flex;
-    }
-  }
-
-  .guide-ui {
-    top: 80% !important;
-  }
-
-  .dragon-character {
-    top: 80% !important;
-  }
-
-  .writing-ai {
-    position: absolute;
-    bottom: -600px;
-    left: 10px;
-    // width: 100%;
-  }
-}
-</style>
diff --git a/src/views/preparedetail/index.vue b/src/views/preparedetail/index.vue
deleted file mode 100644
index 724673d..0000000
--- a/src/views/preparedetail/index.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <div
-    class="absolute inset-0 bg-cover bg-center bg-no-repeat equipment-bg"
-    :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.EQUIPMENT.BG) }"
-  >
-    <Sidebar
-      :menu-items="menuItems"
-      :default-active="defaultActive"
-      @item-selected="handleMenuItemSelected"
-      @toggle="handleSidebarToggle"
-    />
-  </div>
-</template>
-
-<script setup lang="tsx">
-import { ref } from 'vue'
-import Sidebar from '@/components/Sidebar/Sidebar.vue'
-import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
-import equipmentPhone from '@/assets/images/equipment/手机-亮.png'
-import equipmentPhone2 from '@/assets/images/equipment/手机-暗.png'
-const menuItems = ref([
-  {
-    activeIcon: equipmentPhone,
-    inactiveIcon: equipmentPhone2,
-    title: '手机'
-  },
-  {
-    activeIcon: equipmentPhone,
-    inactiveIcon: equipmentPhone2,
-    title: '手机2'
-  },
-  {
-    activeIcon: equipmentPhone,
-    inactiveIcon: equipmentPhone2,
-    title: '手机3'
-  }
-])
-const defaultActive = ref(0)
-const handleMenuItemSelected = (index: number) => {
-  defaultActive.value = index
-  console.log('选中了菜单项:', index)
-  // 根据选中的菜单项更新页面内容
-}
-const handleSidebarToggle = (collapsed: boolean) => {
-  console.log('侧边栏状态:', collapsed ? '已折叠' : '已展开')
-}
-</script>
-
-<style scoped lang="less"></style>
diff --git a/src/views/skill/components/CategoryTags.vue b/src/views/skill/components/CategoryTags.vue
index ecbcad4..955e256 100644
--- a/src/views/skill/components/CategoryTags.vue
+++ b/src/views/skill/components/CategoryTags.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { defineProps, defineEmits } from 'vue'
-
 type CategoryName = '拍摄基础' | '内容策划' | '拍摄执行' | '后期制作' | '版权伦理意识'
 
 const props = defineProps<{
@@ -15,7 +13,10 @@ const emit = defineEmits<{ (e: 'select', name: CategoryName): void }>()
 <template>
   <div
     v-show="props.sideStatus || props.selectedCategory === '拍摄基础'"
-    class="module module-left-bottom module-vertical"
+    :class="[
+      'module module-left-bottom module-vertical',
+      { active: props.selectedCategory === '拍摄基础' }
+    ]"
     @click="emit('select', '拍摄基础')"
   >
     <div
@@ -31,7 +32,10 @@ const emit = defineEmits<{ (e: 'select', name: CategoryName): void }>()
 
   <div
     v-show="props.sideStatus || props.selectedCategory === '内容策划'"
-    class="module module-left-middle module-vertical"
+    :class="[
+      'module module-left-middle module-vertical',
+      { active: props.selectedCategory === '内容策划' }
+    ]"
     @click="emit('select', '内容策划')"
   >
     <div
@@ -47,7 +51,10 @@ const emit = defineEmits<{ (e: 'select', name: CategoryName): void }>()
 
   <div
     v-show="props.sideStatus || props.selectedCategory === '拍摄执行'"
-    class="module module-right-middle module-vertical"
+    :class="[
+      'module module-right-middle module-vertical',
+      { active: props.selectedCategory === '拍摄执行' }
+    ]"
     @click="emit('select', '拍摄执行')"
   >
     <div
@@ -63,7 +70,10 @@ const emit = defineEmits<{ (e: 'select', name: CategoryName): void }>()
 
   <div
     v-show="props.sideStatus || props.selectedCategory === '后期制作'"
-    class="module module-right-upper module-vertical"
+    :class="[
+      'module module-right-upper module-vertical',
+      { active: props.selectedCategory === '后期制作' }
+    ]"
     @click="emit('select', '后期制作')"
   >
     <div
@@ -79,7 +89,10 @@ const emit = defineEmits<{ (e: 'select', name: CategoryName): void }>()
 
   <div
     v-show="props.sideStatus || props.selectedCategory === '版权伦理意识'"
-    class="module module-right-far module-vertical"
+    :class="[
+      'module module-right-far module-vertical',
+      { active: props.selectedCategory === '版权伦理意识' }
+    ]"
     @click="emit('select', '版权伦理意识')"
   >
     <div
@@ -102,49 +115,61 @@ const emit = defineEmits<{ (e: 'select', name: CategoryName): void }>()
   gap: 8px;
   transition: all 0.3s ease;
 }
+
 .module:hover {
   transform: scale(1.05);
   filter: brightness(1.2);
 }
+
 .module-vertical {
   cursor: pointer;
   align-items: flex-end;
 }
+
 .module-vertical .module-text {
   writing-mode: vertical-rl;
   text-orientation: upright;
 }
+
 .module-vertical .module-percent {
   transform: translateY(6px);
 }
+
 .module-text {
   font-size: 36px;
   letter-spacing: 8px;
 }
+
 .module-percent {
   color: #ffffff;
   font-size: 28px;
 }
+
 .module-left-bottom {
   left: 10%;
   bottom: 22%;
 }
+
 .module-left-middle {
   left: 25%;
   top: 48%;
 }
+
 .module-right-middle {
   right: 26%;
   top: 52%;
 }
+
 .module-right-upper {
   right: 18%;
   top: 42%;
 }
+
 .module-right-far {
   right: 8%;
   top: 50%;
 }
+
 .blue-text {
   background: linear-gradient(180deg, #cfffff 0%, #9ff3ff 40%, #6ee7ff 100%);
   -webkit-background-clip: text;
@@ -157,6 +182,7 @@ const emit = defineEmits<{ (e: 'select', name: CategoryName): void }>()
     0 0 28px rgba(0, 199, 255, 0.6),
     0 0 46px rgba(0, 199, 255, 0.45);
 }
+
 .red-text {
   background: linear-gradient(180deg, #ffffff 0%, #ffe9e9 55%, #ffd1d1 100%);
   -webkit-background-clip: text;
@@ -168,4 +194,19 @@ const emit = defineEmits<{ (e: 'select', name: CategoryName): void }>()
     0 0 18px rgba(255, 135, 135, 0.65),
     0 0 32px rgba(255, 110, 110, 0.55);
 }
+
+/* 选中高亮样式 */
+.module.active {
+  transform: scale(1.15);
+  filter: brightness(1.3);
+  z-index: 10;
+}
+
+.module.active .module-text {
+  text-shadow:
+    0 0 4px rgba(255, 255, 255, 1),
+    0 0 10px rgba(79, 241, 255, 1),
+    0 0 20px rgba(79, 241, 255, 0.9),
+    0 0 40px rgba(0, 199, 255, 0.8);
+}
 </style>
diff --git a/src/views/skill/components/IconLayer.vue b/src/views/skill/components/IconLayer.vue
index a29b484..de51c93 100644
--- a/src/views/skill/components/IconLayer.vue
+++ b/src/views/skill/components/IconLayer.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps, defineEmits, computed } from 'vue'
 import { ImgButton } from '@/components/Button'
 
 const props = defineProps<{
@@ -15,7 +14,6 @@ const emit = defineEmits<{ (e: 'iconClick', icon: string): void }>()
   <ImgButton
     v-for="(icon, index) in props.displayedIcons"
     :key="index"
-    v-show="!props.sideStatus"
     @click="emit('iconClick', icon)"
     class="absolute z-10"
     :style="{ top: props.positions[index]?.top, left: props.positions[index]?.left }"
diff --git a/src/views/skill/components/ModuleSwitcher.vue b/src/views/skill/components/ModuleSwitcher.vue
index 872704a..9e61062 100644
--- a/src/views/skill/components/ModuleSwitcher.vue
+++ b/src/views/skill/components/ModuleSwitcher.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineEmits, defineProps } from 'vue'
 import { ImgButton } from '@/components/Button'
 
 const props = defineProps<{ moduleName: string }>()
diff --git a/src/views/skill/index.vue b/src/views/skill/index.vue
index 5f8d635..838b903 100644
--- a/src/views/skill/index.vue
+++ b/src/views/skill/index.vue
@@ -68,33 +68,28 @@ const onPrevModule = () => {
 // 分类选择（保持原交互）
 const onCategorySelect = (categoryName: string) => {
   handleCategoryClick(categoryName)
-  sideStatus.value = false
+  // 如果已解锁(status=true)，则不隐藏侧边栏；否则隐藏
+  sideStatus.value = status.value ? true : false
   showSubIcons.value = false
   selectedPrimaryIcon.value = null
 }
 
 // 返回按钮相关
-const handleBackToMain = () => {
-  selectedCategory.value = ''
-  sideStatus.value = true
-  showSubIcons.value = false
-  selectedPrimaryIcon.value = null
-}
 const backButtonTooltip = computed(() => {
   if (showSubIcons.value) return '返回上一步'
   return selectedCategory.value ? '返回主视图' : '退出页面'
 })
 const handleClose = () => {
-  if (showSubIcons.value) {
-    showSubIcons.value = false
-    selectedPrimaryIcon.value = null
-    return
-  }
-  if (selectedCategory.value) {
-    handleBackToMain()
-  } else {
-    router.back()
-  }
+  // if (showSubIcons.value) {
+  //   showSubIcons.value = false
+  //   selectedPrimaryIcon.value = null
+  //   return
+  // }
+  // if (selectedCategory.value) {
+  //   handleBackToMain()
+  // } else {
+  router.back()
+  // }
 }
 
 // 知识卡片（本地维护）
@@ -276,10 +271,12 @@ const handleIconClick = (icon: string) => {
   cursor: pointer;
   align-items: flex-end;
 }
+
 .module-vertical .module-text {
   writing-mode: vertical-rl;
   text-orientation: upright;
 }
+
 .module-vertical .module-percent {
   transform: translateY(6px);
 }
diff --git a/src/views/skill/useSkillState.ts b/src/views/skill/useSkillState.ts
index d4bef74..4cd4755 100644
--- a/src/views/skill/useSkillState.ts
+++ b/src/views/skill/useSkillState.ts
@@ -35,49 +35,24 @@ export function useSkillState() {
       value: 1,
       categories: {
         拍摄基础: {
-          icons: ['skill/画面构图未选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
-          positions: [
-            { top: '36%', left: '23%' },
-            { top: '15%', left: '34%' },
-            { top: '20%', left: '45%' },
-            { top: '28%', left: '58%' }
-          ]
+          icons: [],
+          positions: []
         },
         内容策划: {
-          icons: ['skill/画面构图未选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
-          positions: [
-            { top: '36%', left: '23%' },
-            { top: '15%', left: '34%' },
-            { top: '20%', left: '45%' },
-            { top: '28%', left: '58%' }
-          ]
+          icons: [],
+          positions: []
         },
         拍摄执行: {
-          icons: ['skill/画面构图未选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
-          positions: [
-            { top: '36%', left: '23%' },
-            { top: '15%', left: '34%' },
-            { top: '20%', left: '45%' },
-            { top: '28%', left: '58%' }
-          ]
+          icons: [],
+          positions: []
         },
         后期制作: {
-          icons: ['skill/画面构图未选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
-          positions: [
-            { top: '36%', left: '23%' },
-            { top: '15%', left: '34%' },
-            { top: '20%', left: '45%' },
-            { top: '28%', left: '58%' }
-          ]
+          icons: [],
+          positions: []
         },
         版权伦理意识: {
-          icons: ['skill/画面构图未选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
-          positions: [
-            { top: '36%', left: '23%' },
-            { top: '15%', left: '34%' },
-            { top: '20%', left: '45%' },
-            { top: '28%', left: '58%' }
-          ]
+          icons: [],
+          positions: []
         }
       }
     },
@@ -86,22 +61,12 @@ export function useSkillState() {
       value: 2,
       categories: {
         拍摄基础: {
-          icons: ['skill/画面构图未选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
-          positions: [
-            { top: '36%', left: '23%' },
-            { top: '15%', left: '34%' },
-            { top: '20%', left: '45%' },
-            { top: '28%', left: '58%' }
-          ]
+          icons: [],
+          positions: []
         },
         内容策划: {
-          icons: ['skill/画面构图未选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
-          positions: [
-            { top: '36%', left: '23%' },
-            { top: '15%', left: '34%' },
-            { top: '20%', left: '45%' },
-            { top: '28%', left: '58%' }
-          ]
+          icons: [],
+          positions: []
         },
         拍摄执行: {
           icons: ['skill/画面构图未选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
@@ -113,22 +78,12 @@ export function useSkillState() {
           ]
         },
         后期制作: {
-          icons: ['skill/画面构图未选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
-          positions: [
-            { top: '36%', left: '23%' },
-            { top: '15%', left: '34%' },
-            { top: '20%', left: '45%' },
-            { top: '28%', left: '58%' }
-          ]
+          icons: [],
+          positions: []
         },
         版权伦理意识: {
-          icons: ['skill/画面构图未选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
-          positions: [
-            { top: '36%', left: '23%' },
-            { top: '15%', left: '34%' },
-            { top: '20%', left: '45%' },
-            { top: '28%', left: '58%' }
-          ]
+          icons: [],
+          positions: []
         }
       }
     }
diff --git a/src/views/skill/video.vue b/src/views/skill/video.vue
index b097650..b6780b3 100644
--- a/src/views/skill/video.vue
+++ b/src/views/skill/video.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
 import { IMAGE_PATHS } from '@/utils'
-import six from '/video/新手导航_九种构图法.mp4'
+import six from '/video/xinshou_jiuzhonggoutufa.mp4'
 
 const router = useRouter()
 
diff --git a/src/views/vlog/after-editing/adjustmentColor.vue b/src/views/vlog/after-editing/adjustmentColor.vue
new file mode 100644
index 0000000..baa3ab4
--- /dev/null
+++ b/src/views/vlog/after-editing/adjustmentColor.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+// import { GuideSteps } from '@/components/Guide'
+import { IMAGE_PATHS } from '@/utils'
+const router = useRouter()
+
+// 导入视频文件
+import videoadjustmentColor from '/video/vlog_renwuqujing_tiaose.mp4'
+const videoList = [videoadjustmentColor]
+
+const videoRef = ref<HTMLVideoElement>()
+const currentVideoIndex = ref(0)
+
+onMounted(() => {
+  // 确保视频元素加载并自动播放
+  if (videoRef.value) {
+    videoRef.value.src = videoList[currentVideoIndex.value]
+    videoRef.value.load()
+
+    // 尝试自动播放
+    const playPromise = videoRef.value.play()
+
+    if (playPromise !== undefined) {
+      playPromise.catch(error => {
+        // 自动播放失败，可能是浏览器策略阻止，需要用户交互
+        console.log('自动播放被阻止:', error)
+      })
+    }
+
+    // 监听视频结束事件
+    videoRef.value.addEventListener('ended', playNextVideo)
+  }
+})
+
+// 播放下一个视频
+const playNextVideo = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+    if (videoRef.value) {
+      videoRef.value.src = videoList[currentVideoIndex.value]
+      videoRef.value.load()
+
+      // 自动播放下一个视频
+      const playPromise = videoRef.value.play()
+
+      if (playPromise !== undefined) {
+        playPromise.catch(error => {
+          console.log('自动播放被阻止:', error)
+        })
+      }
+    }
+  }
+}
+
+// 监听当前视频索引变化
+watch(currentVideoIndex, newIndex => {
+  if (videoRef.value) {
+    videoRef.value.src = videoList[newIndex]
+    videoRef.value.load()
+  }
+})
+
+const handleClose = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div>
+    <!--使用动态绑定和ref-->
+    <video
+      ref="videoRef"
+      :src="videoList[currentVideoIndex]"
+      type="video/mp4"
+      controls
+      preload="auto"
+      class="video-player"
+      autoplay
+    >
+      <p>你的浏览器不支持video标签.</p>
+    </video>
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+.video-player {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+</style>
diff --git a/src/views/vlog/after-editing/color.vue b/src/views/vlog/after-editing/color.vue
new file mode 100644
index 0000000..224bcf5
--- /dev/null
+++ b/src/views/vlog/after-editing/color.vue
@@ -0,0 +1,304 @@
+<script lang="ts" setup>
+import router from '@/router'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { ref } from 'vue'
+import ImageFilter from '@/components/ImageFilter/ImageFilter.vue'
+import { useVlogStore } from '@/stores'
+
+const selected = ref<number | undefined>(1)
+const btnState = ref(false)
+const screenshot = ref()
+const showModal = ref(false)
+const activeTab = ref<'color' | 'filter'>('color') // 'color' | 'filter'
+
+const adjustmentList = ref([
+  { name: '亮度', value: 0, min: -100, max: 100 },
+  { name: '对比度', value: 0, min: -100, max: 100 },
+  { name: '饱和度', value: 0, min: -100, max: 100 },
+  { name: '曝光', value: 0, min: -100, max: 100 },
+  { name: '色调', value: 0, min: 0, max: 100 },
+  { name: '锐化', value: 0, min: 0, max: 100 },
+  { name: '模糊', value: 0, min: 0, max: 100 }
+])
+
+const colorBarList = ref([
+  { id: 1, name: '原图', filter: 'none' },
+  { id: 2, name: '暖阳', filter: 'sepia(0.3) contrast(1.1) brightness(1.1)' },
+  { id: 3, name: '冷调', filter: 'hue-rotate(180deg) contrast(0.9)' },
+  { id: 4, name: '复古', filter: 'sepia(0.6) contrast(1.2) brightness(0.9)' },
+  { id: 5, name: '黑白', filter: 'grayscale(1)' },
+  { id: 6, name: '鲜艳', filter: 'saturate(1.5) contrast(1.1)' }
+])
+
+// 获取指定参数的值
+// 获取指定参数的值
+const imageFilterRef = ref<InstanceType<typeof ImageFilter> | null>(null)
+
+// 获取指定参数的值
+const getVal = (name: string) => {
+  const val = adjustmentList.value.find(item => item.name === name)?.value || 0
+  return Number(val)
+}
+
+// 更新滤镜效果
+const updateFilter = () => {
+  if (!imageFilterRef.value) return
+
+  // 如果开启了对比模式（显示原图），则不应用任何滤镜
+  if (btnState.value) {
+    imageFilterRef.value.setOptions({
+      brightness: 0,
+      contrast: 0,
+      saturation: 0,
+      exposure: 0,
+      hue: 0,
+      blur: 0,
+      sharpen: 0,
+      filter: 'none'
+    })
+    return
+  }
+
+  const selectedFilter = colorBarList.value.find(v => v.id === selected.value)?.filter || 'none'
+
+  imageFilterRef.value.setOptions({
+    brightness: getVal('亮度'),
+    contrast: getVal('对比度'),
+    saturation: getVal('饱和度'),
+    exposure: getVal('曝光'),
+    hue: getVal('色调'),
+    blur: getVal('模糊'),
+    sharpen: getVal('锐化'),
+    filter: selectedFilter
+  })
+}
+
+const changeOriginalImgae = () => {
+  btnState.value = !btnState.value
+  updateFilter()
+}
+
+// Tab 切换处理
+const handleTabChange = (tab: 'color' | 'filter') => {
+  activeTab.value = tab
+  // 切换时重置所有参数
+  handleReset()
+}
+
+// 重置所有参数
+const handleReset = () => {
+  adjustmentList.value.forEach(item => (item.value = 0))
+  selected.value = 1
+  updateFilter()
+}
+
+// 生成图片
+const handleGenerate = async () => {
+  if (!imageFilterRef.value) return
+
+  try {
+    const dataUrl = await imageFilterRef.value.generate()
+    screenshot.value = dataUrl
+    showModal.value = true
+  } catch (error) {
+    console.error('生成图片失败:', error)
+  }
+}
+
+const handleModalClose = () => {
+  showModal.value = false
+  screenshot.value = null
+}
+
+const handleTryOther = () => {
+  showModal.value = false
+}
+
+const handleFinish = () => {
+  useVlogStore().setVlogUnlockProgress(4)
+
+  router.push({
+    name: 'Vlog'
+  })
+}
+
+const handleClose = () => {
+  router.back()
+}
+
+const changeColor = (item: { id: number; name: string }) => {
+  selected.value = item.id
+  updateFilter()
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative pt-44">
+    <!-- 返回 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+
+    <!-- 背景图片-center -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{
+        backgroundImage: getBackgroundImage('after-editing/color/底图')
+      }"
+    ></div>
+
+    <div class="flex h-[759px] justify-center space-x-12">
+      <!-- 效果图 -->
+      <div
+        class="relative w-[1273px] h-[732px] bg-no-repeat bg-cover mt-10 p-2 pb-[26px] pr-[26px]"
+        :style="{ backgroundImage: getBackgroundImage('after-editing/color/图片框.png') }"
+      >
+        <ImageFilter ref="imageFilterRef" :src="getStaticImage('after-editing/color/图片')" />
+
+        <!-- 开启对比 -->
+        <ImgButton
+          class="absolute top-2 right-6 flex-[0_0_200px]"
+          @click="changeOriginalImgae"
+          :image="
+            btnState
+              ? 'after-editing/color/开启对比 - 可开启'
+              : 'after-editing/color/开启对比 - 不可开启'
+          "
+        ></ImgButton>
+      </div>
+
+      <!-- 滤镜/参数配置 -->
+      <div>
+        <div
+          class="w-[445px] h-[759px] bg-no-repeat bg-cover p-2 rounded-xl"
+          :style="{ backgroundImage: getBackgroundImage('after-editing/color/小底板') }"
+        >
+          <!-- tab切换 -->
+          <header class="flex h-[75px] items-center justify-center space-x-4">
+            <div @click="handleTabChange('color')">
+              <ImgButton
+                :image="
+                  activeTab !== 'color'
+                    ? 'after-editing/color/调色-暗'
+                    : 'after-editing/color/调色-亮'
+                "
+              />
+            </div>
+            <div @click="handleTabChange('filter')">
+              <ImgButton
+                :image="
+                  activeTab !== 'filter'
+                    ? 'after-editing/color/滤镜-暗'
+                    : 'after-editing/color/滤镜-亮'
+                "
+              />
+            </div>
+          </header>
+          <!-- tab-content -->
+          <div class="px-4 h-[calc(100%-75px)]">
+            <!-- 调色内容 -->
+            <div
+              v-show="activeTab === 'color'"
+              class="space-y-6 h-full overflow-y-auto custom-scrollbar pt-4"
+            >
+              <div v-for="item in adjustmentList" :key="item.name" class="px-2">
+                <div class="flex justify-between text-[#648ab2] text-2xl font-bold mb-2">
+                  <span>{{ item.name }}</span>
+                  <span>{{ item.value }}</span>
+                </div>
+                <input
+                  type="range"
+                  v-model.number="item.value"
+                  :min="item.min"
+                  :max="item.max"
+                  @change="updateFilter"
+                  class="w-full h-3 bg-[#b8cfe7] rounded-lg appearance-none cursor-pointer slider-thumb"
+                />
+              </div>
+            </div>
+
+            <!-- 滤镜内容 -->
+            <div
+              v-show="activeTab === 'filter'"
+              class="space-y-10 h-full overflow-y-auto custom-scrollbar pt-10"
+            >
+              <div
+                v-for="item in colorBarList"
+                :key="item.id"
+                :style="{
+                  backgroundImage:
+                    selected == item.id
+                      ? getBackgroundImage('after-editing/color/滤镜-选中')
+                      : getBackgroundImage('after-editing/color/滤镜-未选中')
+                }"
+                :class="[
+                  'mx-auto w-[373px] h-[62px] text-white text-2xl font-bold flex items-center justify-center cursor-pointer bg-no-repeat bg-contain bg-center transition-all hover:scale-105',
+                  selected !== item.id && 'text-gray-700'
+                ]"
+                @click="changeColor(item)"
+              >
+                <span>{{ item.name }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-around mt-4">
+          <!-- 重置 -->
+          <ImgButton image="after-editing/color/重置" @click="handleReset" />
+          <!-- 生成 -->
+          <ImgButton image="after-editing/color/生成" @click="handleGenerate" />
+        </div>
+      </div>
+    </div>
+
+    <!-- title -->
+    <img class="absolute top-0 left-0" :src="getStaticImage('after-editing/color/标题-调色实践')" />
+
+    <!-- 保存图片弹窗 -->
+    <Overlay :visible="showModal" @close="handleModalClose">
+      <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
+        <!-- 截图内容 -->
+        <div class="bg-white p-2 rounded-md -rotate-6">
+          <img :src="screenshot" alt="调色结果" />
+        </div>
+        <!-- <img :src="screenshot" alt="调色结果" class="max-w-full max-h-full object-contain rotate-2" /> -->
+        <!-- 操作按钮 -->
+        <div class="absolute bottom-1/2 -left-1/3 translate-y-1/2">
+          <ImgButton image="after-editing/color/按钮-试试其他调色" @click="handleTryOther" />
+        </div>
+        <div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
+          <ImgButton image="after-editing/color/按钮-结束调色实践" @click="handleFinish" />
+        </div>
+      </div>
+    </Overlay>
+  </div>
+</template>
+
+<style scoped>
+/* 自定义滑块样式 */
+.slider-thumb::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 34px;
+  height: 34px;
+  background: #92c6f2;
+  border: 3px solid #ffffff;
+  border-radius: 4px;
+  cursor: pointer;
+  box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.4);
+}
+
+.slider-thumb::-moz-range-thumb {
+  width: 34px;
+  height: 34px;
+  background: #92c6f2;
+  border: 3px solid #ffffff;
+  border-radius: 4px;
+  cursor: pointer;
+  box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.4);
+}
+</style>
diff --git a/src/views/vlog/after-editing/editing.vue b/src/views/vlog/after-editing/editing.vue
new file mode 100644
index 0000000..266edb4
--- /dev/null
+++ b/src/views/vlog/after-editing/editing.vue
@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+// import { GuideSteps } from '@/components/Guide'
+import { IMAGE_PATHS } from '@/utils'
+const router = useRouter()
+
+// 导入视频文件
+import videoBasic from '/video/vlog_zhizuobianjiaojing_jichujianji.mp4'
+import videoSoundeffect from '/video/vlog_renwuqujing_yingxiaochuli.mp4'
+import videoPackaging from '/video/vlog_renwuqujing_baozhuang.mp4'
+import videoCopyright from '/video/vlog_renwuqujing_banquanguifan.mp4'
+const videoList = [videoBasic, videoSoundeffect, videoPackaging, videoCopyright]
+
+const videoRef = ref<HTMLVideoElement>()
+const currentVideoIndex = ref(0)
+
+onMounted(() => {
+  // 确保视频元素加载并自动播放
+  if (videoRef.value) {
+    videoRef.value.src = videoList[currentVideoIndex.value]
+    videoRef.value.load()
+
+    // 尝试自动播放
+    const playPromise = videoRef.value.play()
+
+    if (playPromise !== undefined) {
+      playPromise.catch(error => {
+        // 自动播放失败，可能是浏览器策略阻止，需要用户交互
+        console.log('自动播放被阻止:', error)
+      })
+    }
+
+    // 监听视频结束事件
+    videoRef.value.addEventListener('ended', playNextVideo)
+  }
+})
+
+// 播放下一个视频
+const playNextVideo = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+    if (videoRef.value) {
+      videoRef.value.src = videoList[currentVideoIndex.value]
+      videoRef.value.load()
+
+      // 自动播放下一个视频
+      const playPromise = videoRef.value.play()
+
+      if (playPromise !== undefined) {
+        playPromise.catch(error => {
+          console.log('自动播放被阻止:', error)
+        })
+      }
+    }
+  }
+}
+
+// 监听当前视频索引变化
+watch(currentVideoIndex, newIndex => {
+  if (videoRef.value) {
+    videoRef.value.src = videoList[newIndex]
+    videoRef.value.load()
+  }
+})
+
+const handleClose = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div>
+    <!--使用动态绑定和ref-->
+    <video
+      ref="videoRef"
+      :src="videoList[currentVideoIndex]"
+      type="video/mp4"
+      controls
+      preload="auto"
+      class="video-player"
+      autoplay
+    ></video>
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+.video-player {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+</style>
diff --git a/src/views/vlog/components/menu.vue b/src/views/vlog/components/menu.vue
new file mode 100644
index 0000000..9c0ed9d
--- /dev/null
+++ b/src/views/vlog/components/menu.vue
@@ -0,0 +1,172 @@
+<script lang="tsx" setup>
+import { getStaticImage } from '@/utils'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { getBackgroundImage } from '@/utils'
+defineOptions({ name: 'InterviewMenu' })
+
+/**
+ * 菜单项 （前期准备、中期拍摄、后期剪辑）
+ * 前期准备-资源筹备、创意构想、脚本撰写、分镜制作
+ * 中期拍摄-设备准备、实地取景、现场拍摄
+ * 后期剪辑-素材管理、剪辑、调色、导出发布
+ */
+const category = ref([
+  {
+    label: '前期准备',
+    value: 1,
+    icon: getStaticImage('midterm/准备图标.png')
+  },
+  {
+    label: '中期拍摄',
+    value: 2,
+    icon: getStaticImage('midterm/拍摄图标.png')
+  },
+  {
+    label: '后期剪辑',
+    value: 3,
+    icon: getStaticImage('midterm/剪辑图标.png')
+  }
+])
+
+const menuItems = ref([
+  {
+    label: '资源筹备',
+    routeName: 'VlogResource',
+    parentValue: 1,
+    disabled: true
+  },
+  {
+    label: '创意构想',
+    routeName: 'VlogCreative',
+    parentValue: 1,
+    disabled: true
+  },
+  {
+    label: '脚本撰写',
+    routeName: 'VlogScriptWriting',
+    parentValue: 1,
+    disabled: false
+  },
+  {
+    label: '分镜制作',
+    routeName: 'VlogStoryboard',
+    parentValue: 1,
+    disabled: true
+  },
+  {
+    label: '设备准备',
+    routeName: 'VlogMidtermEquipment',
+    parentValue: 2,
+    disabled: false
+  },
+  {
+    label: '实地取景',
+    routeName: 'VlogMidtermShooting',
+    parentValue: 2,
+    disabled: false
+  },
+  {
+    label: '现场拍摄',
+    routeName: 'VlogShooting',
+    parentValue: 2,
+    disabled: true
+  },
+  {
+    label: '素材管理',
+    routeName: 'Vlog素材管理',
+    parentValue: 3,
+    disabled: true
+  },
+  {
+    label: '剪辑',
+    routeName: 'VlogEditing',
+    parentValue: 3,
+    disabled: false
+  },
+  {
+    label: '调色',
+    routeName: 'VlogColor',
+    parentValue: 3,
+    disabled: false
+  },
+  {
+    label: '导出发布',
+    routeName: 'Vlog导出发布',
+    parentValue: 3,
+    disabled: true
+  }
+])
+
+const props = defineProps<{
+  currentStep: number
+}>()
+
+const router = useRouter()
+
+const currentParentValue = computed<number>(() => {
+  return props.currentStep
+}) // 当前选中的父级菜单项
+
+const currentItemValue = ref<string>('') // 当前选中的子级菜单项
+
+const getMenuItems = computed(() => {
+  return menuItems.value.filter(item => item.parentValue === currentParentValue.value)
+})
+
+const handleItemClick = (item: { routeName: string; disabled: boolean }) => {
+  if (item.disabled) return
+  currentItemValue.value = item.routeName
+  router.push({ name: item.routeName })
+}
+</script>
+
+<template>
+  <div class="absolute left-20 top-0 bottom-0 w-[520px] pt-28" v-if="currentStep">
+    <!-- 分类名称 -->
+    <div class="absolute top-3 left-24 flex items-center space-x-2">
+      <span class="text-4xl text-[#fbbf24] font-black">{{
+        category[currentParentValue - 1].label
+      }}</span>
+      <img class="filter-blue" :src="category[currentParentValue - 1].icon" alt="" />
+    </div>
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-left bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage('components/menu-bg.png') }"
+    ></div>
+    <div class="flex items-center flex-col pl-[60px]">
+      <template v-for="(item, index) in getMenuItems" :key="item.routeName">
+        <div
+          class="relative w-[373px] h-[143px] pl-14 flex items-center justify-center group text-4xl font-black transition-colors"
+          :class="[
+            currentItemValue === item.routeName ? 'text-blue-400' : 'text-white',
+            item.disabled ? 'opacity-20 cursor-not-allowed' : 'cursor-pointer'
+          ]"
+          :style="{ marginLeft: -index * 40 + 'px' }"
+          @click="handleItemClick(item)"
+        >
+          <div
+            v-if="!item.disabled"
+            class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+            :style="{ backgroundImage: getBackgroundImage('components/menu-hover.png') }"
+          ></div>
+          <span :class="[!item.disabled ? 'menu-glow-text' : '']">{{ item.label }}</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.filter-blue {
+  filter: brightness(0) saturate(100%) invert(79%) sepia(29%) saturate(1190%) hue-rotate(330deg)
+    brightness(102%) contrast(98%);
+}
+
+.menu-glow-text {
+  text-shadow:
+    0 0 40px rgba(0, 180, 255, 0.9),
+    0 0 20px rgba(0, 180, 255, 0.7);
+}
+</style>
diff --git a/src/views/vlog/index.vue b/src/views/vlog/index.vue
index e0a200f..7662926 100644
--- a/src/views/vlog/index.vue
+++ b/src/views/vlog/index.vue
@@ -2,38 +2,52 @@
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 
-import { onMounted, ref } from 'vue'
-import { ProgressBar } from '@/components'
-import { useRouter, useRoute } from 'vue-router'
+import { computed, onMounted, ref, watch } from 'vue'
+import { ProgressBar, Overlay } from '@/components'
+import { useRouter } from 'vue-router'
+import { useVlogStore } from '@/stores'
+import VlogMenu from './components/menu.vue'
 
 const router = useRouter()
-const route = useRoute()
+const vlog = useVlogStore()
+const visible = ref(false)
 
-const currentStep = ref(0)
+const currentStep = computed(() => vlog.vlogUnlockProgress)
 
 const handleComplete = () => {
-  console.log('完成前置条件')
+  // console.log('完成前置条件')
   // 处理完成逻辑
+  router.push({ name: 'VlogPractice' })
 }
 
 const handleStepChange = (step: number) => {
-  console.log('步骤变化:', step)
   // 处理步骤变化逻辑
+  vlog.setVlogUnlockProgress(step)
+  visible.value = true
 }
 
 const handleWorkClick = () => {
   console.log('任务取景按钮点击')
   // 处理任务取景按钮点击逻辑
-  router.push({ name: 'Work' })
+  router.push({ name: 'VlogWork' })
 }
 
 const handleClose = () => {
-  router.back()
+  router.push({ name: 'Action' })
 }
 
+// watch(
+//   () => currentStep.value,
+//   newVal => {
+//     if (newVal !== 0 && newVal !== 4) {
+//       visible.value = true
+//     }
+//   }
+// )
+
 onMounted(() => {
-  if (route.query.key === 'video') {
-    currentStep.value = 1
+  if (currentStep.value !== 0 && currentStep.value !== 4) {
+    visible.value = true
   }
 })
 </script>
@@ -70,7 +84,7 @@ onMounted(() => {
       :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
     >
       <ImgButton
-        :image="currentStep === 1 ? IMAGE_PATHS.VLOG.TASK_BTN_OK : IMAGE_PATHS.VLOG.TASK_BTN"
+        :image="currentStep === 4 ? IMAGE_PATHS.VLOG.TASK_BTN_OK : IMAGE_PATHS.VLOG.TASK_BTN"
         @click="handleWorkClick"
       />
     </div>
@@ -78,6 +92,23 @@ onMounted(() => {
     <!-- 引导任务 -->
     <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" />
 
+    <Overlay content-class="w-full h-full" :visible="visible && currentStep < 4">
+      <!-- 关闭按钮 -->
+      <ImgButton
+        class="absolute right-0 top-0 z-20"
+        :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+        @click="visible = false"
+      />
+
+      <!-- 菜单 -->
+      <VlogMenu :current-step="currentStep" />
+
+      <!-- 进度条 -->
+      <div class="absolute left-0 bottom-0 w-full">
+        <ProgressBar :current-step="currentStep" @step-change="handleStepChange" />
+      </div>
+    </Overlay>
+
     <div class="absolute bottom-0 w-full">
       <ProgressBar
         :current-step="currentStep"
diff --git a/src/views/vlog/midterm-shooting/equipment/index.vue b/src/views/vlog/midterm-shooting/equipment/index.vue
new file mode 100644
index 0000000..b6d02f7
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/equipment/index.vue
@@ -0,0 +1,516 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+
+const router = useRouter()
+
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
+const steps = [
+  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
+  { id: 'step2', content: '这是主要内容区域的边框' }
+]
+const stepIndex = ref(0)
+const hiddenbar = ref(false)
+const currentIndex = ref(0) // 当前显示的图片索引
+const selectedMenuIndex = ref(0) // 当前选中的菜单项索引
+
+// 菜单项数据
+const menuItems = ref([
+  { id: 'phone', name: '手机', disabled: false },
+  { id: 'phone-stand', name: '手机支架', disabled: true },
+  { id: 'bluetooth-remote', name: '蓝牙遥控器', disabled: true },
+  { id: 'stabilizer', name: '稳定器', disabled: true },
+  { id: 'props', name: '常用道具', disabled: true },
+  { id: 'phone-lens', name: '手机辅助箱头', disabled: true }
+])
+
+const phoneList = ref([
+  { phoneImg: getStaticImage('equipment/设备-手机1.png') },
+  { phoneImg: getStaticImage('equipment/设备-手机2.png') }
+])
+
+const platetitleList = ref([
+  { title: getStaticImage('equipment/标题-苹果.png') },
+  { title: getStaticImage('equipment/标题-安卓小米.png') }
+])
+
+const platetextList = ref([
+  { text: getStaticImage('equipment/内容-苹果.png') },
+  { text: getStaticImage('equipment/内容-安卓小米.png') }
+])
+const hiddenbarclick = () => {
+  hiddenbar.value = !hiddenbar.value
+}
+
+// 选择菜单项
+const selectMenuItem = (index: number, item: { id: string; name: string; disabled: boolean }) => {
+  if (item.disabled) {
+    console.log(`菜单项 "${item.name}" 已被禁用`)
+    return
+  }
+  selectedMenuIndex.value = index
+}
+
+// 下一张图片
+const nextPhone = () => {
+  if (currentIndex.value < phoneList.value.length - 1) {
+    currentIndex.value++
+  }
+}
+
+// 上一张图片
+const prevPhone = () => {
+  if (currentIndex.value > 0) {
+    currentIndex.value--
+  }
+}
+
+interface SimpleStep {
+  id: string
+  content: string
+}
+
+const handleStepChange = (_step: SimpleStep | null, index: number) => {
+  stepIndex.value = index
+}
+
+const currentHighlight = computed(() =>
+  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
+)
+</script>
+<template>
+  <div class="equipment-index">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat equipment-bg"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.EQUIPMENT.BG) }"
+    ></div>
+
+    <div class="equipment-bar">
+      <img src="@/assets/images/equipment/侧边导航栏.png" alt="" :hidden="hiddenbar" />
+      <!-- 内容列表 -->
+      <div class="equipment-item" :hidden="hiddenbar">
+        <div class="menu-list">
+          <div
+            v-for="(item, index) in menuItems"
+            :key="item.id"
+            class="menu-item"
+            :class="{
+              'menu-item--active': selectedMenuIndex === index,
+              'menu-item--disabled': item.disabled
+            }"
+            @click="selectMenuItem(index, item)"
+          >
+            <div
+              class="menu-item__indicator"
+              v-if="selectedMenuIndex === index && !item.disabled"
+            ></div>
+            <span class="menu-item__text">{{ item.name }}</span>
+            <div class="menu-item__status" v-if="item.disabled">
+              <!-- <span class="status-text">未解锁</span> -->
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 设备准备按钮 -->
+      <div class="equipment-bt">
+        <img src="@/assets/images/equipment/按钮选中-设备准备.png" alt="" />
+      </div>
+      <div :class="hiddenbar ? 'equipment-unfold1' : 'equipment-unfold2'" @click="hiddenbarclick()">
+        <img
+          :src="
+            hiddenbar
+              ? getStaticImage('equipment/按钮-展开.png')
+              : getStaticImage('equipment/按钮-收缩.png')
+          "
+          alt=""
+        />
+      </div>
+    </div>
+    <div class="equipment-layout">
+      <div class="equipment-home">
+        <div
+          class="equipment-leftbutton"
+          @click="prevPhone"
+          :style="{ visibility: currentIndex > 0 ? 'visible' : 'hidden' }"
+        >
+          <img src="@/assets/images/equipment/按钮-左滑.png" alt="" />
+        </div>
+        <div class="equipment-phoneImg">
+          <img :src="phoneList[currentIndex].phoneImg" alt="" />
+        </div>
+        <div
+          class="equipment-rightbutton"
+          @click="nextPhone"
+          :style="{ visibility: currentIndex < phoneList.length - 1 ? 'visible' : 'hidden' }"
+        >
+          <img src="@/assets/images/equipment/按钮-右滑.png" alt="" />
+        </div>
+      </div>
+      <div class="equipment-purpose">
+        <div class="plate">
+          <img src="@/assets/images/equipment/浮空屏.png" alt="" />
+        </div>
+
+        <div class="title">
+          <img :src="platetitleList[currentIndex].title" alt="" />
+        </div>
+        <div class="plate-content">
+          <div class="text">
+            <img :src="platetextList[currentIndex].text" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ImgButton class="absolute right-0 top-0" :image="IMAGE_PATHS.COMPONENTS.BACK" @click="back" />
+    <!-- 调试按钮组 -->
+    <!-- <div class="debug-controls">
+      <button @click="enableAllMenuItems" class="debug-btn">启用全部</button>
+      <button @click="disableAllMenuItems" class="debug-btn">禁用全部</button>
+      <button @click="toggleMenuItem('bluetooth-remote')" class="debug-btn">切换蓝牙遥控器</button>
+    </div> -->
+
+    <!-- 引导步骤 -->
+    <GuideSteps
+      :steps="steps"
+      :highlight-selector="currentHighlight"
+      :highlight-padding="12"
+      :highlight-radius="20"
+      @step-change="handleStepChange"
+      position-offset-y="85%"
+    >
+      <GuideStepsItem>
+        <img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
+      </GuideStepsItem>
+    </GuideSteps>
+  </div>
+</template>
+<style lang="less" scoped>
+.equipment-index {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.equipment-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.equipment-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+
+  .equipment-bt {
+    position: absolute;
+    top: 0;
+    left: -135px;
+    width: 577px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .equipment-unfold1 {
+    position: absolute;
+    top: 490px;
+    left: -41px;
+    width: 150px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .equipment-unfold2 {
+    position: absolute;
+    top: 490px;
+    left: 268px;
+    width: 150px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .equipment-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 220px;
+    padding-left: 20px;
+
+    .menu-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      //background: linear-gradient(135deg, #1a2a4a 0%, #0f1a2e 100%);
+      border-radius: 12px;
+      padding: 16px 12px;
+      // box-shadow:
+      //   0 0 20px rgba(64, 150, 255, 0.3),
+      //   inset 0 0 20px rgba(64, 150, 255, 0.1);
+      // backdrop-filter: blur(10px);
+    }
+
+    .menu-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding: 24px 32px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      min-height: 44px;
+
+      &:hover {
+        // background: rgba(64, 150, 255, 0.1);
+        transform: translateX(4px);
+      }
+
+      &--active {
+        // background: rgba(64, 150, 255, 0.2);
+        // box-shadow: 0 0 15px rgba(64, 150, 255, 0.4);
+
+        .menu-item__text {
+          color: #ffffff;
+          text-shadow:
+            0 0 10px rgba(64, 150, 255, 0.8),
+            0 0 20px rgba(64, 150, 255, 0.6),
+            0 0 30px rgba(64, 150, 255, 0.4);
+          font-weight: 600;
+        }
+      }
+
+      &__indicator {
+        position: absolute;
+        left: 0px;
+        top: 45%;
+        transform: translateY(-50%);
+        width: 6px;
+        height: 38px;
+        background: #ffffff;
+        border-radius: 2px;
+        box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
+      }
+
+      &__text {
+        color: #64a5ff;
+        font-size: 30px;
+        font-weight: 800;
+        text-shadow: 0 0 8px rgba(64, 150, 255, 0.6);
+        transition: all 0.3s ease;
+        user-select: none;
+      }
+
+      &__status {
+        position: absolute;
+        right: 16px;
+        top: 50%;
+        transform: translateY(-50%);
+
+        .status-text {
+          font-size: 12px;
+          color: #999;
+          background: rgba(0, 0, 0, 0.6);
+          padding: 2px 8px;
+          border-radius: 4px;
+          border: 1px solid #333;
+        }
+      }
+
+      // 禁用状态样式
+      &--disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: auto; // 保持可点击以显示禁用提示
+
+        &:hover {
+          transform: none;
+          // background: rgba(255, 0, 0, 0.1);
+        }
+
+        .menu-item__text {
+          color: #666;
+          text-shadow: none;
+        }
+
+        .menu-item__indicator {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .guide-ui {
+    top: 80% !important;
+  }
+
+  .dragon-character {
+    top: 80% !important;
+  }
+}
+
+.equipment-home {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .equipment-leftbutton {
+    position: absolute;
+    top: 511px;
+    left: 350px;
+    width: 200px;
+    height: 200px;
+    cursor: pointer;
+    z-index: 10;
+  }
+
+  .equipment-phoneImg {
+    position: absolute;
+    top: 313px;
+    left: 500px;
+    width: 446px;
+    height: 484px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .equipment-rightbutton {
+    position: absolute;
+    top: 511px;
+    right: 770px;
+    width: 200px;
+    height: 200px;
+    cursor: pointer;
+    z-index: 10;
+  }
+}
+
+.equipment-purpose {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .plate {
+    position: absolute;
+    top: 30px;
+    left: 1200px;
+    width: 600px;
+    /* 调整为你需要的宽度 */
+    height: 1000px;
+    /* 调整为你需要的高度 */
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .plate-content {
+    position: absolute;
+    top: 144px;
+    right: 100px;
+    width: 600px;
+    height: 797px;
+    overflow: hidden;
+    /* 隐藏超出部分 */
+    object-fit: contain;
+
+    // display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+    /* 允许垂直滚动 */
+    scrollbar-width: none;
+    /* Firefox隐藏滚动条 */
+    -ms-overflow-style: none;
+    /* IE和Edge隐藏滚动条 */
+    perspective: 1000px;
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* Chrome, Safari隐藏滚动条 */
+    }
+  }
+
+  .title {
+    // margin-top: 47px;
+    width: 400px;
+    z-index: 2;
+    position: absolute;
+    top: 36px;
+    left: 1304px;
+  }
+
+  .text {
+    position: absolute;
+    top: -9px;
+    left: 8px;
+    z-index: 2;
+    transform: rotate3d(0, 1, 0, -20deg);
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+// 调试控制按钮样式
+.debug-controls {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 1000;
+
+  .debug-btn {
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    border: 1px solid #333;
+    padding: 6px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: background 0.3s ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.9);
+    }
+  }
+}
+</style>
diff --git a/src/views/vlog/midterm-shooting/midterm/index.vue b/src/views/vlog/midterm-shooting/midterm/index.vue
new file mode 100644
index 0000000..89a8f47
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/midterm/index.vue
@@ -0,0 +1,140 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+
+import { ref } from 'vue'
+import { ProgressBar } from '@/components'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const currentStep = ref(2)
+
+const handleComplete = () => {
+  console.log('完成前置条件')
+  // 处理完成逻辑
+}
+
+const handleStepChange = (step: number) => {
+  console.log('步骤变化:', step)
+  // 处理步骤变化逻辑
+}
+
+const handleWorkClick = () => {
+  console.log('任务取景按钮点击')
+  // 处理任务取景按钮点击逻辑
+  router.push({ name: 'Work' })
+}
+
+const handleClick = () => {
+  // 跳转设备准备
+  router.push({ name: 'equipment' })
+}
+const shooting = () => {
+  // 跳转实地取景
+  router.push({ name: 'shooting' })
+}
+const highlightShow = ref(true)
+</script>
+
+<template>
+  <div class="w-full h-full relative">
+    <!-- 背景图片-center -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
+    ></div>
+
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG) }"
+    ></div>
+
+    <!-- 标题 -->
+    <div class="absolute top-2 left-1/2 -translate-x-1/2">
+      <ImgButton :image="IMAGE_PATHS.VLOG.TITLE" />
+    </div>
+
+    <!-- 任务取景按钮 -->
+    <div
+      class="absolute left-24 top-24"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
+    >
+      <ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" @click="handleWorkClick" />
+    </div>
+    <!-- 中期拍摄底板 -->
+    <div v-if="highlightShow" class="absolute right-90 ml-[135px]" style="z-index: 998">
+      <img :src="getStaticImage(IMAGE_PATHS.VLOG.Midterm)" />
+    </div>
+    <!-- 进度百分比 -->
+    <div
+      v-if="highlightShow"
+      class="absolute left-1/2 top-[12%] -translate-x-1/2 pointer-events-none"
+    >
+      <div class="flex">
+        <ImgButton :image="IMAGE_PATHS.VLOG.Progress" />
+        <ImgButton :image="IMAGE_PATHS.VLOG.Four" />
+        <ImgButton :image="IMAGE_PATHS.VLOG.Zero" />
+        <ImgButton :image="IMAGE_PATHS.VLOG.Percentage" />
+      </div>
+    </div>
+    <!-- 中期准备按钮文字 -->
+    <div
+      v-if="highlightShow"
+      class="absolute left-[21%] top-[9%] -translate-x-1/2"
+      style="z-index: 998"
+    >
+      <ImgButton
+        :image="IMAGE_PATHS.VLOG.MidtermEquipment"
+        @click="handleClick"
+        class="ml-[60px]"
+      />
+      <ImgButton :image="IMAGE_PATHS.VLOG.MidtermFraming" @click="shooting" class="ml-[40px]" />
+      <ImgButton :image="IMAGE_PATHS.VLOG.MidtermShoot" class="ml-[20px]" />
+    </div>
+    <!-- 遮罩层 -->
+    <div class="Shadow" v-if="highlightShow">
+      <div>
+        <img src="" alt="" />
+      </div>
+      <img src="@/assets/images/midterm/引导遮罩.png" alt="" />
+    </div>
+    <!-- 叉 -->
+    <div
+      v-if="highlightShow"
+      class="absolute right-0 top-0"
+      style="z-index: 998; cursor: pointer"
+      @click="highlightShow = false"
+    >
+      <img src="@/assets/images/midterm/叉.png" alt="" />
+    </div>
+    <!-- 引导任务 -->
+    <!-- <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" /> -->
+
+    <div class="absolute bottom-0 w-full bright">
+      <ProgressBar
+        :current-step="currentStep"
+        @complete="handleComplete"
+        @step-change="handleStepChange"
+      />
+    </div>
+  </div>
+</template>
+<style lang="less" scopeds>
+.Shadow {
+  width: 100%;
+  height: 100%;
+
+  img {
+    width: 100%;
+    height: 100%;
+    z-index: 997 !important;
+    position: absolute;
+  }
+}
+
+.bright {
+  z-index: 999 !important;
+}
+</style>
diff --git a/src/views/vlog/midterm-shooting/on-site/index.vue b/src/views/vlog/midterm-shooting/on-site/index.vue
new file mode 100644
index 0000000..c04f364
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/on-site/index.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+
+const router = useRouter()
+
+const handleClose = () => {
+  router.back()
+}
+
+const goTimeLapse = () => {
+  router.push({ name: 'VlogOnsiteTimeLapse' })
+}
+
+const goSlider = () => {
+  router.push({ name: 'VlogOnsiteSlider' })
+}
+
+const goSlowShutterDay = () => {
+  router.push({ name: 'VlogOnsiteSlowShutterDay' })
+}
+
+const goSlowShutterNight = () => {
+  router.push({ name: 'VlogOnsiteSlowShutterNight' })
+}
+
+const goLowAngle = () => {
+  router.push({ name: 'VlogOnsiteLowAngle' })
+}
+
+const goRandom = () => {
+  router.push({ name: 'VlogOnsiteRandom' })
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 内容卡片 + 按钮 -->
+    <div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
+      <div
+        class="max-w-6xl w-full bg-black/35 backdrop-blur-md rounded-3xl border border-white/15 p-10 space-y-8 text-white pointer-events-auto"
+      >
+        <div class="flex items-baseline justify-between gap-6">
+          <h1 class="text-5xl font-extrabold tracking-wide">现场拍摄</h1>
+          <span class="text-xl opacity-80">从不同维度练习你的镜头语言</span>
+        </div>
+        <p class="text-xl leading-8 opacity-90">
+          选择下面任意一个练习模块，进入对应的现场拍摄场景，按提示完成小任务，逐步建立自己的拍摄手感和创作节奏。
+        </p>
+
+        <div class="grid grid-cols-3 gap-6">
+          <button type="button" class="onsite-btn" @click="goTimeLapse">
+            <span class="onsite-btn-title">延时拍摄</span>
+            <span class="onsite-btn-desc">记录时间流动，让平凡场景变得有节奏、有变化。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goSlider">
+            <span class="onsite-btn-title">滑轨拍摄</span>
+            <span class="onsite-btn-desc">通过平稳移动镜头，营造空间感和叙事推进感。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goSlowShutterDay">
+            <span class="onsite-btn-title">慢门拍摄 · 白天</span>
+            <span class="onsite-btn-desc">在白天环境下练习慢门，营造水流、车流等运动轨迹。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goSlowShutterNight">
+            <span class="onsite-btn-title">慢门拍摄 · 夜晚</span>
+            <span class="onsite-btn-desc">利用城市灯光，拍出具有节奏感和氛围感的夜景画面。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goLowAngle">
+            <span class="onsite-btn-title">低角度拍摄</span>
+            <span class="onsite-btn-desc">从低视角观察世界，突出主体气势，改变日常视角。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goRandom">
+            <span class="onsite-btn-title">创作随机性</span>
+            <span class="onsite-btn-desc">跟随直觉自由取景，捕捉那些意料之外的画面惊喜。</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 关闭 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+.onsite-btn {
+  @apply relative flex flex-col items-start justify-between rounded-2xl px-6 py-5 text-left bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/30 transition-all duration-200 cursor-pointer;
+}
+
+.onsite-btn-title {
+  @apply text-2xl font-bold mb-2;
+}
+
+.onsite-btn-desc {
+  @apply text-base leading-7 opacity-80;
+}
+</style>
diff --git a/src/views/vlog/midterm-shooting/on-site/low-angle.vue b/src/views/vlog/midterm-shooting/on-site/low-angle.vue
new file mode 100644
index 0000000..0ac19d0
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/on-site/low-angle.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
+      <div
+        class="max-w-5xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-10 space-y-6 text-white pointer-events-auto"
+      >
+        <h1 class="text-4xl font-extrabold tracking-wide">低角度拍摄</h1>
+        <p class="text-lg leading-8 opacity-90">
+          尝试把镜头放低，接近地面或桌面，从下往上看主体，观察画面气势和空间的变化。
+        </p>
+        <p class="text-base leading-7 opacity-80">
+          你可以拍摄人物、建筑或生活小物件，注意前景、主体与背景的组合，让画面更具故事感和张力。
+        </p>
+      </div>
+    </div>
+
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/vlog/midterm-shooting/on-site/random.vue b/src/views/vlog/midterm-shooting/on-site/random.vue
new file mode 100644
index 0000000..629e2fa
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/on-site/random.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
+      <div
+        class="max-w-5xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-10 space-y-6 text-white pointer-events-auto"
+      >
+        <h1 class="text-4xl font-extrabold tracking-wide">创作随机性</h1>
+        <p class="text-lg leading-8 opacity-90">
+          不预设太多规则，带着手机走一圈，只要看到有感觉的光线、人物或场景，就果断按下录制键。
+        </p>
+        <p class="text-base leading-7 opacity-80">
+          可以从“声音”“光线”“动作”这三个维度去寻找灵感，把这些零散片段记录下来，之后再在剪辑中重新组合，形成属于你的故事。
+        </p>
+      </div>
+    </div>
+
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/vlog/midterm-shooting/on-site/slider.vue b/src/views/vlog/midterm-shooting/on-site/slider.vue
new file mode 100644
index 0000000..fc9231c
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/on-site/slider.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
+      <div
+        class="max-w-5xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-10 space-y-6 text-white pointer-events-auto"
+      >
+        <h1 class="text-4xl font-extrabold tracking-wide">滑轨拍摄</h1>
+        <p class="text-lg leading-8 opacity-90">
+          使用滑轨或模拟滑轨移动（例如沿桌面平移手机），练习横向、前后、环绕等不同方向的移动镜头。
+        </p>
+        <p class="text-base leading-7 opacity-80">
+          重点关注移动速度的稳定性，以及前景、主体和背景在画面中的关系，尝试拍出有空间层次感的镜头。
+        </p>
+      </div>
+    </div>
+
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/vlog/midterm-shooting/on-site/slow-shutter-day.vue b/src/views/vlog/midterm-shooting/on-site/slow-shutter-day.vue
new file mode 100644
index 0000000..626184a
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/on-site/slow-shutter-day.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
+      <div
+        class="max-w-5xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-10 space-y-6 text-white pointer-events-auto"
+      >
+        <h1 class="text-4xl font-extrabold tracking-wide">慢门拍摄 · 白天</h1>
+        <p class="text-lg leading-8 opacity-90">
+          在白天选择有连续运动元素的场景（如喷泉、水流、人群、车流等），尝试使用慢门制造“运动模糊”的效果。
+        </p>
+        <p class="text-base leading-7 opacity-80">
+          建议：固定机位，尽量降低感光度，必要时使用减光配件；注意避免画面过曝，同时保留主体的清晰度与背景的动感。
+        </p>
+      </div>
+    </div>
+
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/vlog/midterm-shooting/on-site/slow-shutter-night.vue b/src/views/vlog/midterm-shooting/on-site/slow-shutter-night.vue
new file mode 100644
index 0000000..af48399
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/on-site/slow-shutter-night.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
+      <div
+        class="max-w-5xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-10 space-y-6 text-white pointer-events-auto"
+      >
+        <h1 class="text-4xl font-extrabold tracking-wide">慢门拍摄 · 夜晚</h1>
+        <p class="text-lg leading-8 opacity-90">
+          在夜晚的城市路口、桥上或高处，尝试记录车流灯轨、行人轨迹等富有节奏感的光线运动。
+        </p>
+        <p class="text-base leading-7 opacity-80">
+          建议：寻找安全稳定的拍摄点，将设备固定好，控制好曝光时间与
+          ISO，避免过度抖动，让光轨清晰流畅。
+        </p>
+      </div>
+    </div>
+
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/vlog/midterm-shooting/on-site/time-lapse.vue b/src/views/vlog/midterm-shooting/on-site/time-lapse.vue
new file mode 100644
index 0000000..8d2c5e0
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/on-site/time-lapse.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video, QuestionQuiz, type Question } from '@/components'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+// 延时拍摄视频 URL（占位，后续可替换）
+const timeLapseVideoUrl =
+  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
+
+const handleBack = () => {
+  router.back()
+}
+
+// 交互一 & 交互二：选择题
+const questions = ref<Question[]>([
+  {
+    id: 1,
+    title: '交互一｜观察判断（引导问题）',
+    description:
+      '画面状态：展示一张「江边建筑 + 天空」的静态画面截图（不播放视频）。如果你只用一条普通视频来拍这个场景，你觉得画面最难被感知的是什么？',
+    options: [
+      { id: 'a', label: '建筑的外形结构' },
+      { id: 'b', label: '天空的颜色' },
+      { id: 'c', label: '时间的变化' },
+      { id: 'd', label: '画面的清晰度' }
+    ],
+    correctOptionId: 'c',
+    mediaSrc: 'shooting/延时场景静帧.png' // 占位：请按需替换为真实图片
+  },
+  {
+    id: 2,
+    title: '交互二｜方法选择（技术判断）',
+    description:
+      '画面状态：同一场景的短视频首帧（仍未播放）。如果希望在很短时间内，让观众明显感知"时间正在流动"，你会选择哪种拍摄方式？',
+    options: [
+      { id: 'a', label: '手持拍摄' },
+      { id: 'b', label: '慢动作拍摄' },
+      { id: 'c', label: '延时拍摄' },
+      { id: 'd', label: '推拉镜头' }
+    ],
+    correctOptionId: 'c',
+    mediaSrc: 'shooting/延时场景静帧.png' // 占位：请按需替换为真实图片
+  }
+])
+
+const showObserveStep = ref(false)
+const showSummary = ref(false) // 是否显示交互四总结
+const videoPlaying = ref(false) // 视频播放状态
+
+// 答题完成，进入交互三（视频）
+const handleQuestionsComplete = () => {
+  showObserveStep.value = true
+  showSummary.value = false // 先显示交互三（视频）
+}
+
+// 视频播放完成，进入交互四总结
+const handleVideoEnded = () => {
+  showSummary.value = true
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 交互一 & 交互二：选择题 -->
+    <QuestionQuiz
+      v-if="!showObserveStep"
+      :questions="questions"
+      @complete="handleQuestionsComplete"
+    />
+    <!-- 交互三：观察型 - 播放视频 -->
+    <div
+      v-if="showObserveStep && !showSummary"
+      class="absolute inset-0 flex items-center justify-center px-20 pointer-events-none"
+    >
+      <div
+        class="max-w-7xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-12 space-y-8 text-white pointer-events-auto"
+      >
+        <div>
+          <h2 class="text-2xl font-bold mb-4">交互三｜观察型（无选项）</h2>
+          <p class="text-xl leading-7 opacity-90 mb-5">
+            播放延时拍摄视频（延时拍摄 .mp4）。在这个延时画面中，请注意天空变化与光影移动的节奏 ——
+            它们在短时间内被连续表现出来，这就是延时拍摄让「时间流动」变得可见的关键。
+          </p>
+          <div class="rounded-2xl overflow-hidden border border-white/20 bg-black/60 min-h-[500px]">
+            <Video
+              :src="timeLapseVideoUrl"
+              v-model="videoPlaying"
+              :muted="false"
+              :volume="1"
+              :controls="true"
+              :hideNativeControls="true"
+              fit="contain"
+              @ended="handleVideoEnded"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 交互四：总结 - 显示文本内容 -->
+    <div
+      v-if="showObserveStep && showSummary"
+      class="absolute inset-0 flex items-center justify-center px-20 pointer-events-none"
+    >
+      <div
+        class="max-w-6xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-12 space-y-6 text-white pointer-events-auto"
+      >
+        <div>
+          <h2 class="text-2xl font-bold mb-5">交互四｜总结</h2>
+
+          <!-- 总结文本内容 -->
+          <div class="space-y-3">
+            <p class="text-xl leading-7 opacity-90">
+              <span class="px-1 rounded">延时拍摄的主要目的</span>，<span class="px-1 rounded"
+                >是交代时间流逝与环境状态</span
+              >。
+            </p>
+            <p class="text-xl leading-7 opacity-90">
+              <span class="px-1 rounded">这里的拍摄对象是江边的建筑群与天空</span>。<span
+                class="px-1 rounded"
+                >通过固定机位的连续拍摄</span
+              >，<span class="px-1 rounded">将原本需要较长时间才能观察到的</span
+              ><span class="px-1 rounded">天空变化和光影移动</span>，<span class="px-1 rounded"
+                >压缩到一个较短的镜头中呈现</span
+              >。
+            </p>
+            <p class="text-xl leading-7 opacity-90">
+              <span class="px-1 rounded">这种处理方式</span>，<span class="px-1 rounded"
+                >非常适合放置在视频片头阶段</span
+              >，<span class="px-1 rounded">用于快速建立时间感与空间环境</span>，<span
+                class="px-1 rounded"
+                >而不会占用过多时长</span
+              >。
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
diff --git a/src/views/vlog/midterm-shooting/shooting/components/StartOverlay.vue b/src/views/vlog/midterm-shooting/shooting/components/StartOverlay.vue
new file mode 100644
index 0000000..074f557
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/shooting/components/StartOverlay.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="absolute bottom-0">
+    <div class="relative">
+      <img src="@/assets/images/shooting/开始取景.png" alt="" />
+      <ImgButton
+        class="absolute bottom-[46%] left-[49%] -translate-x-1/2"
+        image="shooting/按钮-开始取景.png"
+        @click="$emit('start')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ImgButton } from '@/components/Button'
+
+defineEmits<{
+  start: []
+}>()
+</script>
diff --git a/src/views/vlog/midterm-shooting/shooting/composables/useCanvasCapture.ts b/src/views/vlog/midterm-shooting/shooting/composables/useCanvasCapture.ts
new file mode 100644
index 0000000..81c21bc
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/shooting/composables/useCanvasCapture.ts
@@ -0,0 +1,77 @@
+import { ref } from 'vue'
+
+interface CaptureOptions {
+  width: number
+  height: number
+  scale?: number
+  delay?: number // 截图前的等待时间（用于 UI 更新）
+  resultDelay?: number // 截图后显示结果的延迟
+  onDraw: (ctx: CanvasRenderingContext2D) => void | Promise<void>
+  onComplete?: () => void
+}
+
+export function useCanvasCapture() {
+  const isLoading = ref(false)
+  const showModal = ref(false)
+  const capturedImageUrl = ref('')
+
+  const capture = async (options: CaptureOptions) => {
+    if (isLoading.value) return
+
+    const { width, height, scale = 2, delay = 50, resultDelay = 0, onDraw, onComplete } = options
+
+    isLoading.value = true
+
+    try {
+      // 等待 UI 更新
+      if (delay > 0) {
+        await new Promise(resolve => setTimeout(resolve, delay))
+      }
+
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+      if (!ctx) {
+        throw new Error('Cannot get canvas context')
+      }
+
+      // 设置画布大小（高清）
+      canvas.width = width * scale
+      canvas.height = height * scale
+
+      // 填充白色背景（防止透明）
+      ctx.fillStyle = '#ffffff'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // 应用缩放
+      ctx.scale(scale, scale)
+
+      // 执行自定义绘制逻辑
+      await onDraw(ctx)
+
+      capturedImageUrl.value = canvas.toDataURL('image/png')
+
+      // 延迟显示结果
+      if (resultDelay > 0) {
+        setTimeout(() => {
+          isLoading.value = false
+          showModal.value = true
+          onComplete?.()
+        }, resultDelay)
+      } else {
+        isLoading.value = false
+        showModal.value = true
+        onComplete?.()
+      }
+    } catch (error) {
+      console.error('Capture failed:', error)
+      isLoading.value = false
+    }
+  }
+
+  return {
+    isLoading,
+    showModal,
+    capturedImageUrl,
+    capture
+  }
+}
diff --git a/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/index.vue b/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/index.vue
new file mode 100644
index 0000000..ddaf8a3
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/index.vue
@@ -0,0 +1,330 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { getBackgroundImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { useRouter } from 'vue-router'
+import { useViewfinderA } from './useViewfinderA'
+import { useCanvasCapture } from '../composables/useCanvasCapture'
+import StartOverlay from '../components/StartOverlay.vue'
+import LoadingOverlay from '@/components/Loading/LoadingOverlay.vue'
+
+const router = useRouter()
+const start = ref(false)
+
+// 基础逻辑
+const back = () => router.back()
+const handleFinish = () => router.push({ name: 'VlogFilmingLocationB' })
+
+// 截图功能
+const { isLoading, showModal, capturedImageUrl, capture } = useCanvasCapture()
+
+const handleModalClose = () => {
+  showModal.value = false
+}
+
+// 手机模式取景
+const {
+  currentZoom,
+  isCapturing,
+  isDragging,
+  setZoom,
+  startDrag,
+  onDrag,
+  endDrag,
+  getTransform,
+  currentOffsetX,
+  currentOffsetY,
+  handleWheel
+} = useViewfinderA()
+
+// 刻度盘配置常量
+const DIAL_STEP_DEG = 30 // 1x 到 2x 之间的角度差（度）
+const ZOOM_MIN = 1
+const ZOOM_MAX = 3
+const ZOOM_CENTER = 2
+const TICK_STEP = 0.1 // 刻度步长
+const MAJOR_TICK_INTERVAL = 5 // 主刻度间隔（0.5x）
+const INTEGER_TICK_INTERVAL = 10 // 整数刻度间隔（1.0x）
+
+// 刻度数据类型
+interface DialTick {
+  zoom: number
+  angle: number
+  isMajor: boolean
+  isInteger: boolean
+  label: string
+}
+
+// 计算圆盘旋转角度
+// 目标：将当前 zoom 对应的刻度旋转到 0 度位置
+// 3x 在上方（-30deg），1x 在下方（+30deg）
+const dialRotation = computed(() => {
+  return (currentZoom.value - ZOOM_CENTER) * DIAL_STEP_DEG
+})
+
+// 格式化缩放倍数显示
+const formattedZoom = computed(() => {
+  return currentZoom.value.toFixed(1) + 'x'
+})
+
+// 生成刻度数据
+const dialTicks = computed<DialTick[]>(() => {
+  const ticks: DialTick[] = []
+  const minTick = ZOOM_MIN / TICK_STEP
+  const maxTick = ZOOM_MAX / TICK_STEP
+
+  for (let z = minTick; z <= maxTick; z += 1) {
+    const zoom = z * TICK_STEP
+    // 刻度相对于中心（2x）的角度
+    // 3x -> -30deg（上方），1x -> +30deg（下方）
+    const angle = -(zoom - ZOOM_CENTER) * DIAL_STEP_DEG
+
+    const isMajor = z % MAJOR_TICK_INTERVAL === 0
+    const isInteger = z % INTEGER_TICK_INTERVAL === 0
+
+    ticks.push({
+      zoom,
+      angle,
+      isMajor,
+      isInteger,
+      label: isInteger ? zoom + 'x' : ''
+    })
+  }
+  return ticks
+})
+
+const photoImage = ref<HTMLImageElement | null>(null)
+
+// Canvas 截图配置常量
+const CANVAS_WIDTH = 871
+const CANVAS_HEIGHT = 420
+const CANVAS_SCALE = 2 // 2倍高清
+const FLASH_DURATION = 100 // 闪光动画时长（ms）
+const UI_UPDATE_DELAY = 50 // UI 更新延迟（ms）
+const RESULT_DISPLAY_DELAY = 300 // 结果显示延迟（ms）
+
+/**
+ * 拍照功能
+ * 使用 Canvas 手动绘制图片，避免 DOM 截图的兼容性问题
+ */
+/**
+ * 拍照功能
+ * 使用 Canvas 手动绘制图片，避免 DOM 截图的兼容性问题
+ */
+const capturePhoto = async () => {
+  if (isLoading.value) return
+
+  isCapturing.value = true
+  await new Promise(resolve => setTimeout(resolve, FLASH_DURATION))
+
+  await capture({
+    width: CANVAS_WIDTH,
+    height: CANVAS_HEIGHT,
+    scale: CANVAS_SCALE,
+    delay: UI_UPDATE_DELAY,
+    resultDelay: RESULT_DISPLAY_DELAY,
+    onDraw: ctx => {
+      if (!photoImage.value) {
+        throw new Error('Photo image not found')
+      }
+
+      // 计算变换
+      // 1. 移动到中心
+      ctx.translate(CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2)
+      // 2. 应用拖拽偏移
+      ctx.translate(currentOffsetX.value, currentOffsetY.value)
+      // 3. 应用缩放
+      ctx.scale(currentZoom.value, currentZoom.value)
+      // 4. 移回左上角绘制
+      ctx.drawImage(
+        photoImage.value,
+        -CANVAS_WIDTH / 2,
+        -CANVAS_HEIGHT / 2,
+        CANVAS_WIDTH,
+        CANVAS_HEIGHT
+      )
+    },
+    onComplete: () => {
+      isCapturing.value = false
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="w-full h-full">
+    <div
+      class="relative w-full h-full bg-cover bg-center bg-no-repeat shooting-bg"
+      :style="{ backgroundImage: getBackgroundImage('shooting/取景地模糊背景.png') }"
+    >
+      <ImgButton image="shooting/标题-取景地a.png" class="title-button absolute left-0" />
+      <ImgButton image="shooting/返回.png" class="back-button absolute right-0" @click="back" />
+
+      <p
+        class="absolute left-1/2 -translate-x-1/2 top-[260px] text-red-500 text-4xl leading-normal font-bold"
+      >
+        操作说明：在手机取景框区域，滚动鼠标滚轮可缩放画面，按住鼠标左键拖动可调整画面位置。
+      </p>
+
+      <StartOverlay v-if="!start" @start="start = true" />
+
+      <!-- 手机拍照界面 -->
+      <div class="absolute bottom-0 w-full h-[766px]" v-else>
+        <img
+          class="phone-frame absolute w-full h-[766px] z-10 pointer-events-none"
+          src="@/assets/images/shooting/shoot.png"
+          alt=""
+        />
+
+        <!-- 拍摄区域 -->
+        <div
+          class="photo-wrapper absolute pointer-events-none top-[19.2%] left-[48.3%] -translate-x-1/2 w-[871px] h-[420px]"
+        >
+          <div class="photo-container w-full h-full overflow-hidden relative">
+            <!-- 拍摄图片 -->
+            <img
+              ref="photoImage"
+              class="absolute pointer-events-auto w-[871px] h-[420px] ease-out select-none cursor-move touch-none"
+              :class="{
+                'transition-transform duration-300': !isDragging,
+                'cursor-grab': !isDragging,
+                'cursor-grabbing': isDragging
+              }"
+              :style="{ transform: getTransform() }"
+              src="@/assets/images/shooting/取景大图.png"
+              alt=""
+              crossorigin="anonymous"
+              @mousedown="startDrag"
+              @mousemove="onDrag"
+              @mouseup="endDrag"
+              @mouseleave="endDrag"
+              @wheel="handleWheel"
+              @touchstart="startDrag"
+              @touchmove="onDrag"
+              @touchend="endDrag"
+              draggable="false"
+            />
+
+            <!-- 拍照闪光效果 -->
+            <div
+              v-if="isCapturing"
+              class="flash-overlay absolute inset-0 bg-white animate-flash"
+            ></div>
+          </div>
+        </div>
+
+        <div
+          class="shooting-decor relative pointer-events-none top-[19.2%] left-[48.3%] -translate-x-1/2 w-[871px] h-[420px] bg-cover bg-center bg-no-repeat"
+          :style="{ backgroundImage: getBackgroundImage('shooting/拍摄装饰.png') }"
+        >
+          <!-- 仿苹果半圆盘缩放控件 -->
+          <div
+            class="zoom-dial-container absolute pointer-events-auto w-[150px] h-[300px] top-1/2 -translate-y-1/2 -rotate-2 right-[179px] overflow-hidden select-none mask-gradient"
+          >
+            <!-- 指示器 (固定在中心) -->
+            <div
+              class="absolute top-1/2 left-0 w-full -translate-y-1/2 z-20 flex items-center pointer-events-none"
+            >
+              <div
+                class="w-0 h-0 border-t-[8px] border-t-transparent border-l-[14px] border-l-yellow-400 border-b-[8px] border-b-transparent ml-3"
+              ></div>
+              <div
+                class="ml-3 bg-black/70 backdrop-blur-md text-yellow-400 font-bold px-3 py-1 rounded text-lg shadow-lg"
+              >
+                {{ formattedZoom }}
+              </div>
+            </div>
+
+            <!-- 旋转圆盘 -->
+            <!-- 圆心在容器右侧外部，形成左侧弧形 -->
+            <div
+              class="dial-wheel absolute top-1/2 right-[-480px] w-[600px] h-[600px] rounded-full bg-black/30 backdrop-blur-md border-[5px] border-white/20 transition-transform duration-100 ease-out origin-center cursor-grab active:cursor-grabbing"
+              :style="{ transform: `translateY(-50%) rotate(${dialRotation}deg)` }"
+            >
+              <div
+                v-for="tick in dialTicks"
+                :key="tick.zoom"
+                class="absolute top-1/2 left-0 w-full h-0 flex justify-start items-center origin-center pointer-events-auto"
+                :style="{ transform: `translate(0, -50%) rotate(${tick.angle}deg)` }"
+                @click.stop="setZoom(tick.zoom)"
+              >
+                <!-- 刻度线本体 (位于圆盘左边缘) -->
+                <div
+                  class="absolute left-3 bg-white/90 transition-all duration-200"
+                  :class="{
+                    'w-10 h-1 opacity-90': tick.isInteger,
+                    'w-6 h-0.5 opacity-60': !tick.isInteger && tick.isMajor,
+                    'w-3 h-[1px] opacity-40': !tick.isMajor
+                  }"
+                ></div>
+                <!-- 刻度文字 -->
+                <div
+                  v-if="tick.isInteger"
+                  class="absolute left-[52px] text-white/90 font-bold text-lg drop-shadow-md"
+                  :style="{ transform: `rotate(${-tick.angle - dialRotation}deg)` }"
+                >
+                  <span
+                    :class="{ 'text-yellow-400 scale-110': currentZoom === tick.zoom }"
+                    class="block transition-all duration-200"
+                  >
+                    {{ tick.label }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 拍摄按钮 -->
+          <ImgButton
+            image="shooting/按钮-拍摄.png"
+            class="capture-button absolute pointer-events-auto right-14 top-1/2 -translate-y-1/2 transition-transform active:scale-95"
+            @click="capturePhoto"
+          />
+        </div>
+      </div>
+
+      <!-- 结果弹窗 -->
+      <Overlay :visible="showModal" @close="handleModalClose">
+        <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
+          <!-- 截图内容 -->
+          <div v-if="capturedImageUrl" class="bg-white p-2 rounded-md -rotate-6">
+            <img :src="capturedImageUrl" alt="拍摄结果" />
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
+            <ImgButton image="shooting/按钮-前往下一个取景地" @click="handleFinish" />
+          </div>
+        </div>
+      </Overlay>
+    </div>
+
+    <LoadingOverlay :visible="isLoading" text="正在出片中..." />
+  </div>
+</template>
+
+<style lang="less">
+@keyframes flash {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0.8;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.animate-flash {
+  animation: flash 0.3s ease-out;
+}
+
+.mask-gradient {
+  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
+  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
+}
+</style>
diff --git a/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts b/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
new file mode 100644
index 0000000..b3d184e
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/useViewfinderA.ts
@@ -0,0 +1,149 @@
+import { ref } from 'vue'
+import { getTouchDistance, getClientPosition } from '../utils/touchGestures'
+
+/**
+ * 手机拍照模式的取景逻辑
+ * 支持缩放和拖拽功能
+ */
+export function useViewfinderA() {
+  // 缩放限制
+  const MIN_ZOOM = 1
+  const MAX_ZOOM = 3
+
+  // 缩放级别 (保留用于点击按钮)
+  const zoomLevels = [3, 2, 1]
+  const currentZoom = ref(1)
+  const isCapturing = ref(false) // 拍照闪光效果
+
+  // 拖拽相关状态
+  const isDragging = ref(false)
+  const dragStartX = ref(0)
+  const dragStartY = ref(0)
+  const offsetX = ref(0)
+  const offsetY = ref(0)
+  const currentOffsetX = ref(0)
+  const currentOffsetY = ref(0)
+
+  // 双指缩放相关
+  const isPinching = ref(false)
+  const pinchStartDistance = ref(0)
+  const pinchStartZoom = ref(1)
+
+  // 计算边界限制
+  const limitOffset = () => {
+    const containerWidth = 871
+    const containerHeight = 420
+    const scale = currentZoom.value
+
+    // 计算图片缩放后的尺寸
+    const scaledWidth = containerWidth * scale
+    const scaledHeight = containerHeight * scale
+
+    // 计算最大偏移量（图片边缘不能超出容器中心）
+    const maxOffsetX = (scaledWidth - containerWidth) / 2
+    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))
+  }
+
+  // 设置缩放级别
+  const setZoom = (zoom: number) => {
+    currentZoom.value = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom))
+    limitOffset()
+  }
+
+  // 鼠标滚轮缩放
+  const handleWheel = (e: WheelEvent) => {
+    e.preventDefault()
+    // 滚轮向下是正数（缩小），向上是负数（放大）
+    const delta = -e.deltaY * 0.001
+    const newZoom = currentZoom.value + delta
+    setZoom(newZoom)
+  }
+
+  // 开始拖拽 / 触摸
+  const startDrag = (e: MouseEvent | TouchEvent) => {
+    // 双指缩放
+    if ('touches' in e && e.touches.length === 2) {
+      isPinching.value = true
+      isDragging.value = false
+      pinchStartDistance.value = getTouchDistance(e.touches[0], e.touches[1])
+      pinchStartZoom.value = currentZoom.value
+      e.preventDefault()
+      return
+    }
+
+    // 单指拖拽
+    if ('touches' in e && e.touches.length !== 1) return
+
+    isDragging.value = true
+    isPinching.value = false
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    dragStartX.value = clientX
+    dragStartY.value = clientY
+    offsetX.value = currentOffsetX.value
+    offsetY.value = currentOffsetY.value
+  }
+
+  // 拖拽中 / 缩放中
+  const onDrag = (e: MouseEvent | TouchEvent) => {
+    // 处理双指缩放
+    if (isPinching.value && 'touches' in e && e.touches.length === 2) {
+      const currentDistance = getTouchDistance(e.touches[0], e.touches[1])
+      const scale = currentDistance / pinchStartDistance.value
+      setZoom(pinchStartZoom.value * scale)
+      e.preventDefault()
+      return
+    }
+
+    if (!isDragging.value) return
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const deltaX = clientX - dragStartX.value
+    const deltaY = clientY - dragStartY.value
+
+    currentOffsetX.value = offsetX.value + deltaX
+    currentOffsetY.value = offsetY.value + deltaY
+
+    limitOffset()
+
+    // 防止滚动
+    if (e.cancelable) {
+      e.preventDefault()
+    }
+  }
+
+  // 结束拖拽
+  const endDrag = () => {
+    isDragging.value = false
+    isPinching.value = false
+  }
+
+  // 计算transform样式
+  const getTransform = () => {
+    return `translate(${currentOffsetX.value}px, ${currentOffsetY.value}px) scale(${currentZoom.value})`
+  }
+
+  return {
+    // 状态
+    zoomLevels,
+    currentZoom,
+    isCapturing,
+    isDragging,
+    currentOffsetX,
+    currentOffsetY,
+
+    // 方法
+    setZoom,
+    startDrag,
+    onDrag,
+    endDrag,
+    handleWheel,
+    getTransform
+  }
+}
diff --git a/src/views/vlog/midterm-shooting/shooting/filmingLocation-b/index.vue b/src/views/vlog/midterm-shooting/shooting/filmingLocation-b/index.vue
new file mode 100644
index 0000000..ea8f711
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/shooting/filmingLocation-b/index.vue
@@ -0,0 +1,289 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { getBackgroundImage } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { useViewfinderB } from './useViewfinderB'
+import { useCanvasCapture } from '../composables/useCanvasCapture'
+import StartOverlay from '../components/StartOverlay.vue'
+import LoadingOverlay from '@/components/Loading/LoadingOverlay.vue'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { useRouter } from 'vue-router'
+import { useVlogStore } from '@/stores'
+
+const router = useRouter()
+const start = ref(false)
+const showInstruction = ref<boolean>(false)
+
+type ResizeDirection = 'nw' | 'ne' | 'sw' | 'se'
+
+// 基础逻辑
+const back = (): void => router.back()
+
+const hideInstruction = (): void => {
+  showInstruction.value = false
+}
+
+const handleStart = (): void => {
+  start.value = true
+  showInstruction.value = true
+}
+
+// 截图功能
+const { isLoading, showModal, capturedImageUrl, capture } = useCanvasCapture()
+
+const handleModalClose = () => {
+  showModal.value = false
+}
+
+// 自由取景框模式
+const { viewfinderContainer, viewfinderBox, viewfinder, startDrag, startResize } = useViewfinderB()
+
+const handleStartDrag = (event: MouseEvent | TouchEvent): void => {
+  hideInstruction()
+  startDrag(event)
+}
+
+const handleStartResize = (direction: ResizeDirection, event: MouseEvent | TouchEvent): void => {
+  hideInstruction()
+  startResize(direction, event)
+}
+
+const showGuide = ref(false)
+const backgroundImage = ref<HTMLImageElement | null>(null)
+
+// Canvas 截图配置常量
+const UI_UPDATE_DELAY = 50 // UI 更新延迟（ms）
+const CANVAS_SCALE = 2 // Canvas 缩放比例（2倍高清）
+const GUIDE_SHOW_DELAY = 1000 // 引导显示延迟（ms）
+
+/**
+ * 截取场景
+ * 使用 Canvas 手动绘制，确保移动端兼容性
+ */
+/**
+ * 截取场景
+ * 使用 Canvas 手动绘制，确保移动端兼容性
+ */
+const captureScene = async (): Promise<void> => {
+  if (isLoading.value) return
+
+  hideInstruction()
+
+  await capture({
+    width: viewfinder.value.width,
+    height: viewfinder.value.height,
+    scale: CANVAS_SCALE,
+    delay: UI_UPDATE_DELAY,
+    onDraw: ctx => {
+      if (!backgroundImage.value) {
+        throw new Error('Background image not found')
+      }
+
+      // 计算图片实际尺寸和设计稿尺寸的缩放比例
+      // viewfinder 的坐标是基于设计稿尺寸（1920x1080）
+      // 但 backgroundImage 的实际尺寸可能不同
+      const imageScaleX = backgroundImage.value.naturalWidth / 1920
+      const imageScaleY = backgroundImage.value.naturalHeight / 1080
+
+      // 绘制背景图片的裁剪区域
+      // 将设计稿坐标转换为图片实际坐标
+      ctx.drawImage(
+        backgroundImage.value,
+        viewfinder.value.x * imageScaleX, // 源图 x（转换为实际坐标）
+        viewfinder.value.y * imageScaleY, // 源图 y（转换为实际坐标）
+        viewfinder.value.width * imageScaleX, // 源图 width（转换为实际坐标）
+        viewfinder.value.height * imageScaleY, // 源图 height（转换为实际坐标）
+        0, // 目标 x
+        0, // 目标 y
+        viewfinder.value.width, // 目标 width
+        viewfinder.value.height // 目标 height
+      )
+    },
+    onComplete: () => {
+      // 延迟显示引导
+      setTimeout(() => {
+        showGuide.value = true
+      }, GUIDE_SHOW_DELAY)
+    }
+  })
+}
+
+/**
+ * 完成引导，跳转到 Vlog 页面
+ */
+const handleComplete = (): void => {
+  showGuide.value = false
+  useVlogStore().setVlogUnlockProgress(3)
+  router.push({
+    name: 'Vlog'
+  })
+}
+</script>
+
+<template>
+  <div class="w-full h-full">
+    <div
+      class="relative w-full h-full bg-cover bg-center bg-no-repeat shooting-bg"
+      :style="{
+        backgroundImage: start
+          ? getBackgroundImage('shooting/取景大图.png')
+          : getBackgroundImage('shooting/取景地模糊背景.png')
+      }"
+    >
+      <!-- 标题 -->
+      <ImgButton image="shooting/标题-取景地b.png" class="title-button absolute left-0" />
+
+      <!-- 返回按钮 -->
+      <ImgButton
+        image="shooting/返回.png"
+        class="back-button absolute right-0 z-50"
+        @click="back"
+      />
+
+      <p
+        v-if="start && showInstruction"
+        class="absolute left-1/2 -translate-x-1/2 top-[220px] z-30 text-red-500 text-4xl leading-normal font-bold"
+      >
+        操作说明：拖动取景框四角调整裁剪范围，点击“取景”键就完成啦！
+      </p>
+
+      <StartOverlay v-if="!start" @start="handleStart" />
+
+      <!-- 取景 -->
+      <div class="absolute bottom-0 w-full h-full" v-else>
+        <!-- 隐藏的背景图片，用于 Canvas 绘制 -->
+        <img
+          ref="backgroundImage"
+          class="absolute inset-0 w-full h-full object-cover pointer-events-none opacity-0"
+          src="@/assets/images/shooting/取景大图.png"
+          alt=""
+          crossorigin="anonymous"
+        />
+
+        <!-- 取景框容器 -->
+        <div ref="viewfinderContainer" class="relative w-full h-full">
+          <!-- 四个方向的遮罩层 -->
+          <!-- 上遮罩 -->
+          <div
+            class="mask-layer absolute left-0 right-0 bg-black/60 pointer-events-none z-10"
+            :style="{
+              top: 0,
+              height: viewfinder.y + 'px'
+            }"
+          ></div>
+          <!-- 下遮罩 -->
+          <div
+            class="mask-layer absolute left-0 right-0 bg-black/60 pointer-events-none z-10"
+            :style="{
+              top: viewfinder.y + viewfinder.height + 'px',
+              bottom: 0
+            }"
+          ></div>
+          <!-- 左遮罩 -->
+          <div
+            class="mask-layer absolute left-0 bg-black/60 pointer-events-none z-10"
+            :style="{
+              top: viewfinder.y + 'px',
+              width: viewfinder.x + 'px',
+              height: viewfinder.height + 'px'
+            }"
+          ></div>
+          <!-- 右遮罩 -->
+          <div
+            class="mask-layer absolute right-0 bg-black/60 pointer-events-none z-10"
+            :style="{
+              top: viewfinder.y + 'px',
+              left: viewfinder.x + viewfinder.width + 'px',
+              height: viewfinder.height + 'px'
+            }"
+          ></div>
+
+          <!-- 可拖动调整的取景框 -->
+          <div
+            ref="viewfinderBox"
+            class="viewfinder-frame absolute border-4 border-white cursor-move z-20"
+            :style="{
+              left: viewfinder.x + 'px',
+              top: viewfinder.y + 'px',
+              width: viewfinder.width + 'px',
+              height: viewfinder.height + 'px'
+            }"
+            @mousedown="handleStartDrag"
+            @touchstart="handleStartDrag"
+          >
+            <!-- 九宫格辅助线 -->
+            <div class="grid-lines absolute inset-0 grid grid-cols-3 grid-rows-3">
+              <div
+                v-for="i in 9"
+                :key="i"
+                class="border border-white/40"
+                :class="{
+                  'border-t-0': i <= 3,
+                  'border-b-0': i >= 7,
+                  'border-l-0': (i - 1) % 3 === 0,
+                  'border-r-0': i % 3 === 0
+                }"
+              ></div>
+            </div>
+
+            <!-- 四个角的调整手柄 -->
+            <div
+              class="resize-handle absolute w-6 h-6 bg-white rounded-full -left-3 -top-3 cursor-nwse-resize"
+              @mousedown.stop="handleStartResize('nw', $event)"
+              @touchstart.stop="handleStartResize('nw', $event)"
+            ></div>
+            <div
+              class="resize-handle absolute w-6 h-6 bg-white rounded-full -right-3 -top-3 cursor-nesw-resize"
+              @mousedown.stop="handleStartResize('ne', $event)"
+              @touchstart.stop="handleStartResize('ne', $event)"
+            ></div>
+            <div
+              class="resize-handle absolute w-6 h-6 bg-white rounded-full -left-3 -bottom-3 cursor-nesw-resize"
+              @mousedown.stop="handleStartResize('sw', $event)"
+              @touchstart.stop="handleStartResize('sw', $event)"
+            ></div>
+            <div
+              class="resize-handle absolute w-6 h-6 bg-white rounded-full -right-3 -bottom-3 cursor-nwse-resize"
+              @mousedown.stop="handleStartResize('se', $event)"
+              @touchstart.stop="handleStartResize('se', $event)"
+            ></div>
+          </div>
+        </div>
+
+        <!-- 底部取景按钮 - 跟随取景框 -->
+        <div
+          class="capture-button-container absolute z-20 -translate-x-1/2 -translate-y-1/2"
+          :style="{
+            left: viewfinder.x + viewfinder.width / 2 + 'px',
+            top: viewfinder.y + viewfinder.height + 'px'
+          }"
+        >
+          <ImgButton class="w-36" image="shooting/按钮-取景" @click="captureScene" />
+        </div>
+      </div>
+
+      <!-- 结果弹窗 -->
+      <Overlay :visible="showModal" @close="handleModalClose">
+        <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
+          <!-- 截图内容 -->
+          <div v-if="capturedImageUrl" class="bg-white p-2 rounded-md -rotate-6">
+            <img :src="capturedImageUrl" alt="拍摄结果" />
+          </div>
+
+          <!-- 操作按钮 -->
+          <!-- <div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
+            <ImgButton image="shooting/按钮-前往下一个取景地" @click="handleFinish" />
+          </div> -->
+        </div>
+      </Overlay>
+    </div>
+
+    <LoadingOverlay :visible="isLoading" text="正在出片中..." />
+
+    <!-- 引导步骤 -->
+    <GuideSteps v-if="showGuide" positionOffsetY="80%" @complete="handleComplete">
+      <GuideStepsItem> 实地取景已全部完成，现在跟着我走进现场开始正式的拍摄吧~ </GuideStepsItem>
+    </GuideSteps>
+  </div>
+</template>
diff --git a/src/views/vlog/midterm-shooting/shooting/filmingLocation-b/useViewfinderB.ts b/src/views/vlog/midterm-shooting/shooting/filmingLocation-b/useViewfinderB.ts
new file mode 100644
index 0000000..9e4d4cd
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/shooting/filmingLocation-b/useViewfinderB.ts
@@ -0,0 +1,291 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+import { getTouchDistance, getTouchCenter, getClientPosition } from '../utils/touchGestures'
+
+// 设计稿尺寸常量
+const DESIGN_WIDTH = 1920
+const DESIGN_HEIGHT = 1080
+
+/**
+ * 自由取景框模式的逻辑
+ * 支持拖动、四角调整大小、双指缩放
+ */
+export function useViewfinderB() {
+  // 取景框相关
+  const viewfinderContainer = ref<HTMLElement>()
+  const viewfinderBox = ref<HTMLElement>()
+  const viewfinder = ref({
+    x: 660, // (1920 - 600) / 2 = 660，居中
+    y: 340, // (1080 - 400) / 2 = 340，居中
+    width: 600,
+    height: 400
+  })
+
+  // 拖动相关状态
+  const isDragging = ref(false)
+  const dragStart = ref({ x: 0, y: 0 })
+
+  // 调整大小相关状态
+  const isResizing = ref(false)
+  const resizeCorner = ref<'nw' | 'ne' | 'sw' | 'se' | null>(null)
+  const resizeStart = ref({
+    x: 0,
+    y: 0,
+    boxX: 0,
+    boxY: 0,
+    boxWidth: 0,
+    boxHeight: 0
+  })
+
+  // 双指缩放相关状态
+  const isPinching = ref(false)
+  const pinchStart = ref({
+    distance: 0,
+    centerX: 0,
+    centerY: 0,
+    boxWidth: 0,
+    boxHeight: 0,
+    boxX: 0,
+    boxY: 0
+  })
+
+  // 将屏幕坐标转换为缩放后的本地坐标
+  const convertClientToLocal = (clientX: number, clientY: number) => {
+    if (!viewfinderContainer.value) return { x: clientX, y: clientY }
+
+    const containerRect = viewfinderContainer.value.getBoundingClientRect()
+
+    // 计算缩放比例
+    const scaleX = containerRect.width / DESIGN_WIDTH
+    const scaleY = containerRect.height / DESIGN_HEIGHT
+
+    // 计算相对于容器的坐标，并转换为设计稿坐标系
+    const localX = (clientX - containerRect.left) / scaleX
+    const localY = (clientY - containerRect.top) / scaleY
+
+    return { x: localX, y: localY }
+  }
+
+  // 开始拖动取景框
+  const startDrag = (e: MouseEvent | TouchEvent) => {
+    if (isResizing.value || isPinching.value) return
+
+    // 检测双指触摸
+    if ('touches' in e && e.touches.length === 2) {
+      // 双指缩放
+      isPinching.value = true
+      const touch1 = e.touches[0]
+      const touch2 = e.touches[1]
+
+      pinchStart.value = {
+        distance: getTouchDistance(touch1, touch2),
+        centerX: (touch1.clientX + touch2.clientX) / 2,
+        centerY: (touch1.clientY + touch2.clientY) / 2,
+        boxWidth: viewfinder.value.width,
+        boxHeight: viewfinder.value.height,
+        boxX: viewfinder.value.x,
+        boxY: viewfinder.value.y
+      }
+      e.preventDefault()
+      return
+    }
+
+    // 单指拖动
+    if ('touches' in e && e.touches.length !== 1) return
+
+    isDragging.value = true
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const localPos = convertClientToLocal(clientX, clientY)
+
+    dragStart.value = {
+      x: localPos.x - viewfinder.value.x,
+      y: localPos.y - viewfinder.value.y
+    }
+
+    e.preventDefault()
+  }
+
+  // 开始调整大小
+  const startResize = (corner: 'nw' | 'ne' | 'sw' | 'se', e: MouseEvent | TouchEvent) => {
+    isResizing.value = true
+    resizeCorner.value = corner
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const localPos = convertClientToLocal(clientX, clientY)
+
+    resizeStart.value = {
+      x: localPos.x,
+      y: localPos.y,
+      boxX: viewfinder.value.x,
+      boxY: viewfinder.value.y,
+      boxWidth: viewfinder.value.width,
+      boxHeight: viewfinder.value.height
+    }
+
+    e.preventDefault()
+  }
+
+  // 处理移动
+  const handleMove = (e: MouseEvent | TouchEvent) => {
+    if (!isDragging.value && !isResizing.value && !isPinching.value) return
+
+    // 处理双指缩放
+    if (isPinching.value && 'touches' in e && e.touches.length === 2) {
+      const touch1 = e.touches[0]
+      const touch2 = e.touches[1]
+
+      const currentDistance = getTouchDistance(touch1, touch2)
+      const scale = currentDistance / pinchStart.value.distance
+
+      // 计算新的尺寸
+      let newWidth = pinchStart.value.boxWidth * scale
+      let newHeight = pinchStart.value.boxHeight * scale
+
+      const minSize = 200
+
+      // 限制最小和最大尺寸
+      newWidth = Math.max(minSize, Math.min(newWidth, DESIGN_WIDTH))
+      newHeight = Math.max(minSize, Math.min(newHeight, DESIGN_HEIGHT))
+
+      // 保持中心点不变，计算新的位置
+      const center = getTouchCenter(touch1, touch2)
+      const localCenter = convertClientToLocal(center.x, center.y)
+
+      let newX = localCenter.x - newWidth / 2
+      let newY = localCenter.y - newHeight / 2
+
+      // 边界检测
+      newX = Math.max(0, Math.min(newX, DESIGN_WIDTH - newWidth))
+      newY = Math.max(0, Math.min(newY, DESIGN_HEIGHT - newHeight))
+
+      viewfinder.value.width = newWidth
+      viewfinder.value.height = newHeight
+      viewfinder.value.x = newX
+      viewfinder.value.y = newY
+
+      e.preventDefault()
+      return
+    }
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const localPos = convertClientToLocal(clientX, clientY)
+
+    if (isDragging.value && viewfinderContainer.value) {
+      // 拖动取景框
+      let newX = localPos.x - dragStart.value.x
+      let newY = localPos.y - dragStart.value.y
+
+      // 边界检测 - 使用设计稿尺寸
+      newX = Math.max(0, Math.min(newX, DESIGN_WIDTH - viewfinder.value.width))
+      newY = Math.max(0, Math.min(newY, DESIGN_HEIGHT - viewfinder.value.height))
+
+      viewfinder.value.x = newX
+      viewfinder.value.y = newY
+    } else if (isResizing.value && viewfinderContainer.value) {
+      // 调整取景框大小
+      const deltaX = localPos.x - resizeStart.value.x
+      const deltaY = localPos.y - resizeStart.value.y
+
+      const minSize = 200 // 最小尺寸
+
+      if (resizeCorner.value === 'se') {
+        // 右下角 - 使用设计稿尺寸限制
+        viewfinder.value.width = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxWidth + deltaX, DESIGN_WIDTH - viewfinder.value.x)
+        )
+        viewfinder.value.height = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxHeight + deltaY, DESIGN_HEIGHT - viewfinder.value.y)
+        )
+      } else if (resizeCorner.value === 'sw') {
+        // 左下角 - 使用设计稿尺寸限制
+        const newWidth = resizeStart.value.boxWidth - deltaX
+        const newX = resizeStart.value.boxX + deltaX
+        if (newWidth >= minSize && newX >= 0) {
+          viewfinder.value.x = newX
+          viewfinder.value.width = newWidth
+        }
+        viewfinder.value.height = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxHeight + deltaY, DESIGN_HEIGHT - viewfinder.value.y)
+        )
+      } else if (resizeCorner.value === 'ne') {
+        // 右上角 - 使用设计稿尺寸限制
+        const newHeight = resizeStart.value.boxHeight - deltaY
+        const newY = resizeStart.value.boxY + deltaY
+        if (newHeight >= minSize && newY >= 0) {
+          viewfinder.value.y = newY
+          viewfinder.value.height = newHeight
+        }
+        viewfinder.value.width = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxWidth + deltaX, DESIGN_WIDTH - viewfinder.value.x)
+        )
+      } else if (resizeCorner.value === 'nw') {
+        // 左上角 - 使用设计稿尺寸限制
+        const newWidth = resizeStart.value.boxWidth - deltaX
+        const newHeight = resizeStart.value.boxHeight - deltaY
+        const newX = resizeStart.value.boxX + deltaX
+        const newY = resizeStart.value.boxY + deltaY
+
+        if (newWidth >= minSize && newX >= 0) {
+          viewfinder.value.x = newX
+          viewfinder.value.width = newWidth
+        }
+        if (newHeight >= minSize && newY >= 0) {
+          viewfinder.value.y = newY
+          viewfinder.value.height = newHeight
+        }
+      }
+    }
+
+    e.preventDefault()
+  }
+
+  // 结束拖动或调整
+  const handleEnd = () => {
+    isDragging.value = false
+    isResizing.value = false
+    isPinching.value = false
+    resizeCorner.value = null
+  }
+
+  // 挂载时添加全局事件监听
+  onMounted(() => {
+    document.addEventListener('mousemove', handleMove)
+    document.addEventListener('mouseup', handleEnd)
+    document.addEventListener('touchmove', handleMove)
+    document.addEventListener('touchend', handleEnd)
+  })
+
+  // 卸载时移除事件监听
+  onUnmounted(() => {
+    document.removeEventListener('mousemove', handleMove)
+    document.removeEventListener('mouseup', handleEnd)
+    document.removeEventListener('touchmove', handleMove)
+    document.removeEventListener('touchend', handleEnd)
+  })
+
+  return {
+    // Refs
+    viewfinderContainer,
+    viewfinderBox,
+
+    // 状态
+    viewfinder,
+    isDragging,
+    isResizing,
+    isPinching,
+
+    // 方法
+    startDrag,
+    startResize,
+
+    // 常量
+    DESIGN_WIDTH,
+    DESIGN_HEIGHT
+  }
+}
diff --git a/src/views/vlog/midterm-shooting/shooting/index.vue b/src/views/vlog/midterm-shooting/shooting/index.vue
new file mode 100644
index 0000000..01ddc5f
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/shooting/index.vue
@@ -0,0 +1,222 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { Overlay } from '@/components/Overlay'
+import { ImgButton } from '@/components/Button'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
+import videoSrc from '/video/xinshou_jiuzhonggoutufa.mp4'
+import KnowledgeCard from '@/components/KnowledgeCard/KnowledgeCard.vue'
+
+type Btn = {
+  key: string
+  name: string
+  btnImage: string
+  images: string[]
+  desc: string
+}
+
+const router = useRouter()
+
+const showModal = ref(false)
+
+const showModal2 = ref(false)
+const showModal3 = ref(false)
+const currentItem = ref<Btn>({
+  key: '',
+  name: '',
+  btnImage: '',
+  images: [],
+  desc: ''
+})
+
+const btnList = ref<Btn[]>([
+  {
+    key: '1',
+    name: '居中构图',
+    btnImage: 'shooting/居中构图底板',
+    desc: '居中构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用',
+    images: ['shooting/居中构图1', 'shooting/居中构图2']
+  },
+  {
+    key: '2',
+    name: '三分法构图',
+    btnImage: 'shooting/三分法构图底板',
+    desc: '三分法构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调',
+    images: ['shooting/图片待定1', 'shooting/图片待定2']
+  },
+  {
+    key: '3',
+    name: '对角线构图',
+    btnImage: 'shooting/对角线构图底板',
+    desc: '对角线构图属于引导线构图的一种，所以也是借助引导线的视觉引导效果来突出强调主体。另外对角线构图在画面中制造出对角线的走向即可。',
+    images: ['shooting/对角线构图1', 'shooting/对角线构图2']
+  }
+])
+
+const handleModalClose = () => {
+  showModal.value = false
+}
+
+const handleClick = (item: any) => {
+  currentItem.value = item
+  showModal2.value = true
+}
+const currentCompositionKey = computed(() => {
+  const k = currentItem.value.key
+  if (k === '1' || k === '2' || k === '3') return k
+  return '1'
+})
+
+const handleClickA = () => {
+  // 跳转设备准备
+  router.push({ name: 'VlogFilmingLocationA' })
+}
+const handleClickB = () => {
+  // 跳转设备准备
+  router.push({ name: 'VlogFilmingLocationB' })
+}
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
+</script>
+<template>
+  <div class="shooting-index">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat shooting-bg"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    >
+      <div class="shooting-title">
+        <img :src="shootingtitle" alt="" />
+      </div>
+      <div class="shooting-return">
+        <ImgButton image="shooting/返回.png" @click="back" />
+      </div>
+      <div class="shooting-left">
+        <ImgButton image="shooting/按钮-取景地A.png" @click="handleClickA" />
+      </div>
+      <div class="shooting-right">
+        <ImgButton image="shooting/按钮-取景地B.png" @click="handleClickB" />
+      </div>
+      <div class="shooting-composition">
+        <ImgButton image="shooting/构图指南.png" @click="showModal = true" />
+      </div>
+    </div>
+
+    <!-- 引导步骤 -->
+    <GuideSteps
+      :highlight-selector="'.mybutton'"
+      :highlight-padding="12"
+      :highlight-radius="20"
+      position-offset-y="85%"
+    >
+      <GuideStepsItem> 在走进拍摄场景之前，我们先来查看一下构图指南。 </GuideStepsItem>
+    </GuideSteps>
+
+    <!-- 保存图片弹窗 -->
+    <Overlay
+      :visible="showModal"
+      :clickable="false"
+      :customStyle="{
+        backgroundImage: getBackgroundImage('shooting/构图指南底图')
+      }"
+      customClass="inset-0 bg-cover bg-center bg-no-repeat"
+      contentClass="relative w-full h-full"
+    >
+      <!-- 返回 -->
+      <ImgButton
+        class="absolute right-0 top-0 z-10"
+        :image="IMAGE_PATHS.COMPONENTS.BACK"
+        @click="handleModalClose"
+      />
+
+      <!-- 构图指南 -->
+      <ImgButton class="absolute left-0 top-0 z-10" image="shooting/标题-构图指南" />
+
+      <!-- 新手导航视频 -->
+      <ImgButton
+        class="absolute left-28 top-[calc(50%-40px)] -translate-y-1/2"
+        image="shooting/新手导航-视频回顾"
+        @click="showModal3 = true"
+      />
+
+      <div class="absolute top-[30%] right-10">
+        <ImgButton
+          v-for="item in btnList"
+          :key="item.key"
+          :image="item.btnImage"
+          @click="handleClick(item)"
+        />
+      </div>
+
+      <!-- 知识卡片 -->
+      <KnowledgeCard
+        v-if="showModal2 && currentItem.key"
+        :visible="showModal2"
+        :title="currentItem.name"
+        :desc="currentItem.desc"
+        :images="currentItem.images"
+        :compositionKey="currentCompositionKey"
+        @close="showModal2 = false"
+      />
+      <!-- 视频 -->
+      <Overlay :visible="showModal3" :clickable="false">
+        <video :src="videoSrc" controls></video>
+        <!-- 返回 -->
+        <ImgButton
+          class="absolute right-0 top-0 z-10"
+          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+          @click="showModal3 = false"
+        />
+      </Overlay>
+    </Overlay>
+  </div>
+</template>
+<style lang="less" scoped>
+.shooting-bg {
+  position: absolute;
+
+  .shooting-title {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .shooting-return {
+    position: absolute;
+    right: -90%;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .shooting-left {
+    position: absolute;
+    left: 16%;
+    top: 50%;
+    width: 100%;
+    height: 100%;
+  }
+
+  .shooting-right {
+    position: absolute;
+    right: -55%;
+    top: 50%;
+    width: 100%;
+    height: 100%;
+  }
+
+  .shooting-composition {
+    position: absolute;
+    left: 24px;
+    bottom: -90%;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/vlog/midterm-shooting/shooting/utils/touchGestures.ts b/src/views/vlog/midterm-shooting/shooting/utils/touchGestures.ts
new file mode 100644
index 0000000..ce27a3a
--- /dev/null
+++ b/src/views/vlog/midterm-shooting/shooting/utils/touchGestures.ts
@@ -0,0 +1,47 @@
+/**
+ * 触摸手势工具函数
+ * 用于处理触摸事件的通用计算
+ */
+
+/**
+ * 计算两个触摸点之间的距离
+ * @param touch1 第一个触摸点
+ * @param touch2 第二个触摸点
+ * @returns 两点之间的欧氏距离
+ */
+export const getTouchDistance = (touch1: Touch, touch2: Touch): number => {
+  const dx = touch1.clientX - touch2.clientX
+  const dy = touch1.clientY - touch2.clientY
+  return Math.sqrt(dx * dx + dy * dy)
+}
+
+/**
+ * 计算两个触摸点的中心坐标
+ * @param touch1 第一个触摸点
+ * @param touch2 第二个触摸点
+ * @returns 中心点坐标 {x, y}
+ */
+export const getTouchCenter = (touch1: Touch, touch2: Touch) => {
+  return {
+    x: (touch1.clientX + touch2.clientX) / 2,
+    y: (touch1.clientY + touch2.clientY) / 2
+  }
+}
+
+/**
+ * 从鼠标或触摸事件中获取客户端坐标
+ * @param e 鼠标事件或触摸事件
+ * @returns 客户端坐标 {x, y}
+ */
+export const getClientPosition = (e: MouseEvent | TouchEvent) => {
+  if ('touches' in e && e.touches.length > 0) {
+    return {
+      x: e.touches[0].clientX,
+      y: e.touches[0].clientY
+    }
+  }
+  return {
+    x: (e as MouseEvent).clientX,
+    y: (e as MouseEvent).clientY
+  }
+}
diff --git a/src/views/vlog/practice/index.vue b/src/views/vlog/practice/index.vue
new file mode 100644
index 0000000..61dbbf3
--- /dev/null
+++ b/src/views/vlog/practice/index.vue
@@ -0,0 +1,357 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { StarRating } from '@/components/Rating'
+import { useRouter } from 'vue-router'
+import BackToTopIcon from '@/assets/svg/back-to-top.svg'
+
+const router = useRouter()
+
+const TOTAL_PAGES = 3
+const PAGE_HEIGHT = 1080
+const SCROLL_DURATION = 1000
+
+const currentPage = ref<number>(0)
+const worksScrollIndex = ref<number>(0)
+const animatingToPage = ref<number>(0)
+const containerRef = ref<HTMLElement | null>(null)
+const isAnimating = ref<boolean>(false)
+
+/** 是否为最后一页 */
+const isLastPage = computed<boolean>(() => currentPage.value >= TOTAL_PAGES - 1)
+
+/** 是否正在从第二页回到第一页 */
+const isScrollingBackToFirst = computed<boolean>(() => {
+  return isAnimating.value && currentPage.value === 1 && animatingToPage.value === 0
+})
+
+/** 第一页坐着的人物是否显示 */
+const showSittingPerson = computed<boolean>(() => {
+  // 当前在第一页，且不是正在回滚中
+  return currentPage.value === 0 && !isScrollingBackToFirst.value
+})
+
+/** 他人实战作品列表 */
+interface WorkItem {
+  id: number
+  image: string
+  title: string
+  stars: number
+  path: string
+  description: string
+}
+
+const worksList = ref<WorkItem[]>([
+  {
+    id: 1,
+    image: 'https://picsum.photos/400/300?random=1',
+    title: '作品名称',
+    stars: 4,
+    path: '/video/practice/vlog_anli1.mp4',
+    description:
+      '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介'
+  },
+  {
+    id: 2,
+    image: 'https://picsum.photos/400/300?random=2',
+    title: '作品名称',
+    stars: 5,
+    path: '/video/practice/vlog_anli2.mp4',
+    description: '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介'
+  }
+])
+
+/** 左滑动作品列表 */
+const scrollWorksLeft = (): void => {
+  if (worksScrollIndex.value > 0) {
+    worksScrollIndex.value--
+  }
+}
+
+/** 右滑动作品列表 */
+const scrollWorksRight = (): void => {
+  if (worksScrollIndex.value < worksList.value.length - 3) {
+    worksScrollIndex.value++
+  }
+}
+
+const handleClose = (): void => {
+  router.back()
+}
+
+/** 自定义平滑滚动动画 */
+const smoothScrollTo = (toPage: number): void => {
+  const container = containerRef.value
+  if (!container || isAnimating.value) return
+
+  isAnimating.value = true
+  animatingToPage.value = toPage
+  const startTop = container.scrollTop
+  const targetTop = toPage * PAGE_HEIGHT
+  const distance = targetTop - startTop
+  const startTime = performance.now()
+
+  /** easeInOutQuart 缓动函数 - 更平滑 */
+  const easeInOutQuart = (t: number): number => {
+    return t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2
+  }
+
+  const animateScroll = (currentTime: number): void => {
+    const elapsed = currentTime - startTime
+    const progress = Math.min(elapsed / SCROLL_DURATION, 1)
+    const easeProgress = easeInOutQuart(progress)
+
+    container.scrollTop = startTop + distance * easeProgress
+
+    if (progress < 1) {
+      requestAnimationFrame(animateScroll)
+    } else {
+      isAnimating.value = false
+      currentPage.value = toPage
+    }
+  }
+
+  requestAnimationFrame(animateScroll)
+}
+
+/** 滚动到指定页 */
+const scrollToPage = (page: number): void => {
+  const targetPage = Math.max(0, Math.min(page, TOTAL_PAGES - 1))
+  if (targetPage !== currentPage.value && !isAnimating.value) {
+    smoothScrollTo(targetPage)
+  }
+}
+
+/** 滚动到下一页 */
+const scrollToNextPage = (): void => {
+  scrollToPage(currentPage.value + 1)
+}
+
+/** 滚动到上一页 */
+const scrollToPrevPage = (): void => {
+  scrollToPage(currentPage.value - 1)
+}
+
+/** 回到顶部 */
+const scrollToTop = (): void => {
+  scrollToPage(0)
+}
+
+/** 处理鼠标滚轮事件 */
+const handleWheel = (event: WheelEvent): void => {
+  event.preventDefault()
+  if (isAnimating.value) return
+
+  if (event.deltaY > 0) {
+    scrollToNextPage()
+  } else if (event.deltaY < 0) {
+    scrollToPrevPage()
+  }
+}
+
+onMounted(() => {
+  containerRef.value?.addEventListener('wheel', handleWheel, { passive: false })
+})
+
+onUnmounted(() => {
+  containerRef.value?.removeEventListener('wheel', handleWheel)
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="w-full h-full overflow-auto">
+    <div class="relative min-h-full overflow-hidden">
+      <!-- 关闭 -->
+      <ImgButton
+        class="absolute right-0 top-0 z-50"
+        :image="IMAGE_PATHS.COMPONENTS.BACK"
+        @click="handleClose"
+      />
+      <!-- 实战操作台 -->
+      <div
+        class="w-full h-[1080px] bg-cover bg-no-repeat relative"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/实战操作台首页') }"
+      >
+        <ImgButton
+          class="absolute left-40 bottom-28 z-10"
+          image="vlog/practice/查看任务要求"
+          @click="scrollToNextPage"
+        />
+        <!-- img -->
+        <img
+          class="absolute right-0"
+          draggable="false"
+          :src="getStaticImage('vlog/practice/背景1')"
+          alt=""
+        />
+      </div>
+      <!-- 任务要求 -->
+      <div
+        class="w-full h-[1080px] bg-cover bg-no-repeat relative overflow-hidden"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/背景2') }"
+      >
+        <ImgButton
+          class="absolute right-20 bottom-0 z-99"
+          image="vlog/practice/我的创作笔记"
+          path="/vlog/practice/my-notes"
+        />
+
+        <div class="task-panel w-[757px] h-full ml-10 overflow-y-auto" @wheel.stop>
+          <img :src="getStaticImage('vlog/practice/滑动任务面板')" alt="" />
+        </div>
+
+        <img
+          class="absolute right-0 bottom-0 pointer-events-none"
+          :src="getStaticImage('vlog/practice/摄像机')"
+          alt=""
+        />
+        <!-- 站着的人物 - 第二页固定在此（不在回滚动画中） -->
+        <Transition name="fade">
+          <img
+            v-show="currentPage === 1 && !isScrollingBackToFirst"
+            class="absolute right-8 bottom-0 max-h-[90%] pointer-events-none"
+            draggable="false"
+            :src="getStaticImage('vlog/practice/摄像机-人')"
+            alt=""
+          />
+        </Transition>
+      </div>
+      <!-- 他人实战作品 -->
+      <div
+        class="w-full h-[1080px] bg-cover bg-no-repeat pt-44 px-16"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/他人实战作品') }"
+      >
+        <!-- 作品列表 -->
+        <div class="w-full overflow-hidden">
+          <div
+            class="flex gap-6 transition-transform duration-500"
+            :style="{ transform: `translateX(-${worksScrollIndex * 509}px)` }"
+          >
+            <div
+              v-for="work in worksList"
+              :key="work.id"
+              class="w-[503px] h-[722px] flex-shrink-0 rounded-[40px] overflow-hidden bg-[#FFF8F0] py-8 px-6"
+            >
+              <!-- 作品图片 -->
+              <div class="w-full h-[280px] rounded-2xl overflow-hidden">
+                <img class="w-full h-full object-cover" :src="work.image" :alt="work.title" />
+              </div>
+              <!-- 作品信息 -->
+              <div class="flex flex-col items-center pt-8 space-y-4">
+                <h3 class="text-5xl font-bold text-gray-800 mb-2">{{ work.title }}</h3>
+                <!-- 星星评分 -->
+                <StarRating :score="work.stars" size="lg" readonly />
+                <!-- 简介 -->
+                <p class="h-[110px] text-2xl text-gray-600 mb-3 line-clamp-3 leading-relaxed">
+                  {{ work.description }}
+                </p>
+                <!-- 查看按钮 -->
+                <ImgButton
+                  image="vlog/practice/查看"
+                  :path="`/vlog/practice/video/${encodeURIComponent(work.path)}`"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 指示按钮 -->
+        <div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex gap-16">
+          <img
+            class="cursor-pointer hover:scale-110 transition-transform"
+            :class="{ 'opacity-50 cursor-not-allowed': worksScrollIndex === 0 }"
+            :src="getStaticImage('vlog/practice/滑动左')"
+            alt="向左"
+            @click="scrollWorksLeft"
+          />
+          <img
+            class="cursor-pointer hover:scale-110 transition-transform rotate-180"
+            :class="{ 'opacity-50 cursor-not-allowed': worksScrollIndex >= worksList.length - 3 }"
+            :src="getStaticImage('vlog/practice/滑动左')"
+            alt="向右"
+            @click="scrollWorksRight"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 下滑按钮 - 最后一页隐藏 -->
+    <ImgButton
+      v-show="!isLastPage"
+      class="absolute bottom-0 left-1/2 -translate-x-1/2"
+      :image="'vlog/practice/下滑'"
+      @click="scrollToNextPage"
+    />
+
+    <!-- 回到顶部按钮 - 最后一页显示 -->
+    <img
+      v-show="isLastPage"
+      class="absolute bottom-10 right-10 cursor-pointer transition-all duration-300 hover:scale-105"
+      :src="BackToTopIcon"
+      @click="scrollToTop"
+    />
+
+    <!-- 跨页人物动画 -->
+    <div v-show="showSittingPerson || isScrollingBackToFirst" class="character-container">
+      <!-- 坐着的人物 - 第一页 -->
+      <Transition name="fade">
+        <img
+          v-show="showSittingPerson"
+          class="character-img right-20 bottom-10"
+          draggable="false"
+          :src="getStaticImage('vlog/practice/背景1-人')"
+          alt=""
+        />
+      </Transition>
+      <!-- 站着的人物 - 回滚动画中 -->
+      <Transition name="fade">
+        <img
+          v-show="isScrollingBackToFirst"
+          class="character-img right-8 bottom-0"
+          draggable="false"
+          :src="getStaticImage('vlog/practice/摄像机-人')"
+          alt=""
+        />
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 隐藏滚动条但保持可滚动 - 兼容主流浏览器 */
+.task-panel {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+.task-panel::-webkit-scrollbar {
+  display: none; /* Chrome/Safari/Opera */
+}
+
+/* 第一页人物动画容器 */
+.character-container {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 20;
+}
+
+.character-img {
+  position: absolute;
+  max-height: 90%;
+}
+
+/* 淡入淡出动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/views/vlog/practice/my-notes/index.vue b/src/views/vlog/practice/my-notes/index.vue
new file mode 100644
index 0000000..7e4a09c
--- /dev/null
+++ b/src/views/vlog/practice/my-notes/index.vue
@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { StarRating } from '@/components/Rating'
+
+const router = useRouter()
+
+/** 笔记内容 */
+const noteContent = ref<string>('')
+
+/** 保存弹窗 */
+const showModal = ref<boolean>(false)
+
+/** 返回上一页 */
+const handleBack = (): void => {
+  router.back()
+}
+
+const disabled = computed<boolean>(() => noteContent.value.trim() === '')
+
+interface EvaluationItem {
+  /** 标题 */
+  title: string
+  /** 描述 */
+  description: string
+  /** 评分 */
+  score: number
+}
+
+/** 评估项目列表 */
+const evaluationItems = ref<EvaluationItem[]>([
+  {
+    title: '主题与内容',
+    description: '主题明确聚焦"身边美好"，内容真实、有感染力，能让观众感受到日常闪光',
+    score: 3
+  },
+  {
+    title: '拍摄技巧',
+    description: '运镜自然、光线运用合理、画面清晰饱和度、能辅助主题表达（至少1种运镜+1种光线）',
+    score: 4
+  },
+  {
+    title: '剪辑与包装',
+    description: '素材拼接流畅，调色/滤镜适配、字幕清晰、音乐不盖人声、整体风格统一',
+    score: 5
+  },
+  {
+    title: '创意与独特性',
+    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”,避免平淡复刻',
+    score: 4
+  },
+  {
+    title: '综合感受',
+    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”避免平淡复刻',
+    score: 5
+  }
+])
+const handleSave = (): void => {
+  console.log('保存笔记')
+  handleBack()
+}
+</script>
+
+<template>
+  <div
+    class="w-full h-full bg-no-repeat bg-cover px-8 pt-[400px]"
+    :style="{ backgroundImage: getBackgroundImage('vlog/practice/创作笔记底图') }"
+  >
+    <ImgButton
+      class="absolute top-0 right-0"
+      :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+      @click="handleBack"
+    />
+
+    <textarea
+      v-model="noteContent"
+      class="w-full h-[300px]"
+      name="myNotes"
+      placeholder="点击输入创作笔记"
+    ></textarea>
+
+    <div class="absolute bottom-24 left-1/2 -translate-x-1/2 flex gap-60">
+      <ImgButton image="vlog/practice/保存" @click="handleSave" />
+      <ImgButton image="vlog/practice/自评" :disabled="disabled" @click="showModal = true" />
+    </div>
+
+    <!-- 保存图片弹窗 -->
+    <Overlay :visible="showModal" :clickable="false">
+      <div
+        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[100px]"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分底板') }"
+      >
+        <ImgButton
+          class="absolute -top-8 -right-14 z-10"
+          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+          @click="showModal = false"
+        />
+
+        <div class="relative h-full overflow-y-scroll px-8">
+          <div class="pl-10 space-y-10 mt-10">
+            <p class="glow-text">
+              评分时要关注5个维度哦～每个维度满分5分，能打1-5分，记得对照作品表现来打分呀～
+            </p>
+            <div
+              v-for="(item, index) in evaluationItems"
+              :key="index"
+              class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
+              :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
+            >
+              <div class="pr-8 space-y-10">
+                <h4 class="text-3xl font-bold text-white mb-3">
+                  {{ `0${index + 1}` }} {{ item.title }}
+                </h4>
+                <p class="text-3xl text-gray-800 font-bold leading-relaxed">
+                  {{ item.description }}
+                </p>
+              </div>
+              <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
+            </div>
+            <p class="glow-text">
+              己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～
+            </p>
+            <div class="w-full flex justify-center">
+              <ImgButton image="vlog/practice/保存" @click="showModal = false" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Overlay>
+  </div>
+</template>
+
+<style scoped>
+textarea {
+  border: none;
+  outline: none;
+  resize: none;
+  font-size: 36px;
+  background-color: transparent;
+}
+
+textarea::placeholder {
+  color: #5d5b5b;
+  font-weight: 700;
+}
+
+.glow-text {
+  color: white;
+  font-size: 2rem;
+  font-weight: bold;
+  text-shadow:
+    /* 描边效果 - 多层阴影模拟描边 */
+    -1px -1px 0 #0066ff,
+    1px -1px 0 #0066ff,
+    -1px 1px 0 #0066ff,
+    1px 1px 0 #0066ff,
+    -2px -2px 0 #0066ff,
+    2px -2px 0 #0066ff,
+    -2px 2px 0 #0066ff,
+    2px 2px 0 #0066ff,
+    /* 发光效果 - 蓝色光晕 */ 0 0 10px #0066ff,
+    0 0 20px #0066ff,
+    0 0 30px #0066ff,
+    0 0 40px #0066ff,
+    0 0 50px #0066ff;
+}
+</style>
diff --git a/src/views/vlog/practice/video/index.vue b/src/views/vlog/practice/video/index.vue
new file mode 100644
index 0000000..4120c50
--- /dev/null
+++ b/src/views/vlog/practice/video/index.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { Video } from '@/components'
+import { ImgButton } from '@/components/Button'
+import { StarRating } from '@/components/Rating'
+import { IMAGE_PATHS, getBackgroundImage } from '@/utils'
+import { Overlay } from '@/components/Overlay'
+import { ref } from 'vue'
+
+const router = useRouter()
+
+const props = defineProps({
+  path: {
+    type: String,
+    required: true
+  }
+})
+
+interface EvaluationItem {
+  /** 标题 */
+  title: string
+  /** 描述 */
+  description: string
+  /** 评分 */
+  score: number
+}
+
+/** 评估项目列表 */
+const evaluationItems = ref<EvaluationItem[]>([
+  {
+    title: '主题与内容',
+    description: '主题明确聚焦"身边美好"，内容真实、有感染力，能让观众感受到日常闪光',
+    score: 3
+  },
+  {
+    title: '拍摄技巧',
+    description: '运镜自然、光线运用合理、画面清晰饱和度、能辅助主题表达（至少1种运镜+1种光线）',
+    score: 4
+  },
+  {
+    title: '剪辑与包装',
+    description: '素材拼接流畅，调色/滤镜适配、字幕清晰、音乐不盖人声、整体风格统一',
+    score: 5
+  },
+  {
+    title: '创意与独特性',
+    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”,避免平淡复刻',
+    score: 4
+  },
+  {
+    title: '综合感受',
+    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”避免平淡复刻',
+    score: 5
+  }
+])
+
+/** 保存弹窗 */
+const showModal = ref<boolean>(false)
+
+/** 返回上一页 */
+const handleBack = (): void => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <ImgButton
+      class="absolute right-0 top-0 z-50"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+    <ImgButton
+      class="absolute right-0 bottom-10 z-50"
+      image="vlog/practice/评分"
+      @click="showModal = true"
+    />
+    <Video
+      :src="decodeURIComponent(props.path)"
+      :volume="1"
+      :muted="false"
+      :controls="true"
+      :loop="false"
+    />
+
+    <!-- 保存图片弹窗 -->
+    <Overlay :visible="showModal" :clickable="false">
+      <div
+        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[80px]"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分底板') }"
+      >
+        <ImgButton
+          class="absolute -top-8 -right-14 z-10"
+          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+          @click="showModal = false"
+        />
+
+        <div class="relative h-full overflow-y-scroll px-8">
+          <div
+            class="w-full bg-no-repeat bg-cover bg-left py-44"
+            :style="{ backgroundImage: getBackgroundImage('vlog/practice/滑动表内文字') }"
+          >
+            <div class="pl-10 space-y-16">
+              <div
+                v-for="(item, index) in evaluationItems"
+                :key="index"
+                class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
+                :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
+              >
+                <div class="pr-8 space-y-10">
+                  <h4 class="text-3xl font-bold text-white mb-3">
+                    {{ `0${index + 1}` }} {{ item.title }}
+                  </h4>
+                  <p class="text-3xl text-gray-800 font-bold leading-relaxed">
+                    {{ item.description }}
+                  </p>
+                </div>
+                <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
+              </div>
+              <div class="w-full flex justify-center">
+                <ImgButton image="vlog/practice/保存" @click="showModal = false" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Overlay>
+  </div>
+</template>
diff --git a/src/views/vlog/script-writing/doubao.vue b/src/views/vlog/script-writing/doubao.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/vlog/script-writing/index.vue b/src/views/vlog/script-writing/index.vue
new file mode 100644
index 0000000..29851f1
--- /dev/null
+++ b/src/views/vlog/script-writing/index.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { ref } from 'vue'
+import sample from './sample.vue'
+import writing from './writing.vue'
+import { useRouter } from 'vue-router'
+import { getStaticImage } from '@/utils'
+
+const router = useRouter()
+
+const writingtext = ref('撰写格式')
+const hiddenbar = ref(false)
+const formatClick = () => {
+  writingtext.value = '撰写格式'
+}
+const sampleanClick = () => {
+  writingtext.value = '样例展示'
+  // router.push({ name: 'sample' })
+}
+
+const hiddenbarclick = () => {
+  hiddenbar.value = !hiddenbar.value
+}
+
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
+</script>
+<template>
+  <div class="relative w-full h-full">
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="back"
+    />
+    <!-- 侧边栏 -->
+    <div
+      :class="[
+        'absolute h-full left-0 top-0 transition-transform duration-300 z-10',
+        hiddenbar ? 'translate-x-[-400px]' : 'translate-x-[0px]'
+      ]"
+    >
+      <img class="absolute inset-0 -z-10" src="@/assets/images/equipment/侧边导航栏.png" alt="" />
+
+      <!-- 脚本撰写 -->
+      <img class="" :src="getStaticImage(IMAGE_PATHS.VLOG.SCRIPTINGTITLE)" />
+
+      <img
+        class="absolute bottom-4 left-6"
+        src="@/assets/images/vlog/制作变焦镜/左边导航栏/ai分镜工具.png"
+        alt=""
+      />
+
+      <div class="absolute left-0 top-36">
+        <ImgButton
+          :image="
+            writingtext == '撰写格式' ? IMAGE_PATHS.VLOG.FORMATLIANG : IMAGE_PATHS.VLOG.FORMATAN
+          "
+          @click="formatClick"
+        />
+        <ImgButton
+          :image="
+            writingtext == '样例展示' ? IMAGE_PATHS.VLOG.SAMPLELANG : IMAGE_PATHS.VLOG.SAMPLEAN
+          "
+          @click="sampleanClick"
+        />
+      </div>
+    </div>
+
+    <div
+      :class="[
+        'absolute transition-transform duration-200  top-1/2 -translate-y-1/2 z-20',
+        hiddenbar ? ' translate-x-[-38px]' : 'absolute translate-x-[270px]'
+      ]"
+      @click="hiddenbarclick()"
+    >
+      <ImgButton :image="hiddenbar ? 'equipment/按钮-展开' : 'equipment/按钮-收缩'" />
+    </div>
+
+    <div class="absolute w-full h-full left-0 top-0">
+      <writing v-if="writingtext == '撰写格式'"></writing>
+      <sample v-else-if="writingtext == '样例展示'"></sample>
+    </div>
+  </div>
+</template>
diff --git a/src/views/prepare/script-writing/sample.vue b/src/views/vlog/script-writing/sample.vue
similarity index 96%
rename from src/views/prepare/script-writing/sample.vue
rename to src/views/vlog/script-writing/sample.vue
index ff3c109..ea9b6f4 100644
--- a/src/views/prepare/script-writing/sample.vue
+++ b/src/views/vlog/script-writing/sample.vue
@@ -1,3 +1,57 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImagePreview } from '@/components'
+import { useScale } from '@/composables/useScale'
+import { useVlogStore } from '@/stores'
+const router = useRouter()
+const showDoubao = ref(false)
+const vlog = useVlogStore()
+const steps = [
+  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
+  { id: 'step2', content: '这是主要内容区域的边框' }
+]
+
+const stepIndex = ref(1)
+const back = () => {
+  router.back()
+}
+
+interface SimpleStep {
+  id: string
+  content: string
+}
+
+const handleStepChange = (_step: SimpleStep | null, index: number) => {
+  stepIndex.value = index
+}
+
+const currentHighlight = computed(() =>
+  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
+)
+
+const clickdoubao = () => {
+  vlog.setVlogUnlockProgress(2)
+  router.push({
+    name: 'Vlog'
+  })
+}
+
+const { scale, offsetX, offsetY } = useScale()
+onMounted(() => {
+  ImagePreview({
+    images: [getStaticImage('vlog/脚本切图/我的志愿者手记拍摄脚本.png')],
+    startIndex: 0,
+    maskClosable: true,
+    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value }),
+    onClose: () => {
+      showDoubao.value = true
+    }
+  })
+})
+</script>
 <template>
   <div class="writing-index">
     <!-- 背景图片 -->
@@ -66,55 +120,6 @@
     </div>
   </div>
 </template>
-<script lang="tsx" setup>
-import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
-import { GuideSteps, GuideStepsItem } from '@/components/Guide'
-import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { ImagePreview } from '@/components'
-import { useScale } from '@/composables/useScale'
-const router = useRouter()
-const showDoubao = ref(false)
-const steps = [
-  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
-  { id: 'step2', content: '这是主要内容区域的边框' }
-]
-
-const stepIndex = ref(1)
-const back = () => {
-  router.back()
-}
-
-interface SimpleStep {
-  id: string
-  content: string
-}
-
-const handleStepChange = (_step: SimpleStep | null, index: number) => {
-  stepIndex.value = index
-}
-
-const currentHighlight = computed(() =>
-  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
-)
-
-const clickdoubao = () => {
-  router.push('midterm')
-}
-
-const { scale, offsetX, offsetY } = useScale()
-onMounted(() => {
-  ImagePreview({
-    images: [getStaticImage('vlog/脚本切图/我的志愿者手记拍摄脚本.png')],
-    startIndex: 0,
-    maskClosable: true,
-    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value }),
-    onClose: () => {
-      showDoubao.value = true
-    }
-  })
-})
-</script>
 <style lang="less" scoped>
 .writing-index {
   width: 100%;
diff --git a/src/views/prepare/script-writing/writing.vue b/src/views/vlog/script-writing/writing.vue
similarity index 62%
rename from src/views/prepare/script-writing/writing.vue
rename to src/views/vlog/script-writing/writing.vue
index 10cb082..ffa4993 100644
--- a/src/views/prepare/script-writing/writing.vue
+++ b/src/views/vlog/script-writing/writing.vue
@@ -29,45 +29,7 @@
 </template>
 <script lang="tsx" setup>
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
-import { GuideSteps, GuideStepsItem } from '@/components/Guide'
-import { ref, computed } from 'vue'
-import { ImgButton } from '@/components/Button'
-import { useRouter } from 'vue-router'
-import fourth from '/video/Vlog模块_任务取景框_专业剖析_脚本策划.mp4'
-const router = useRouter()
-
-const back = () => {
-  // 跳转设备准备
-  router.back()
-}
-
-const stepIndex = ref(0)
-const hiddenbar = ref(false)
-const writingtext = ref('撰写格式')
-const formatClick = () => {
-  writingtext.value = '撰写格式'
-}
-const sampleanClick = () => {
-  writingtext.value = '样例展示'
-  router.push({ name: 'sample' })
-}
-
-const hiddenbarclick = () => {
-  hiddenbar.value = !hiddenbar.value
-}
-
-interface SimpleStep {
-  id: string
-  content: string
-}
-
-const handleStepChange = (_step: SimpleStep | null, index: number) => {
-  stepIndex.value = index
-}
-
-const currentHighlight = computed(() =>
-  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
-)
+import fourth from '/video/vlog_renwuqujing_jiaobencehua.mp4'
 </script>
 <style lang="less">
 .writing-index {
diff --git a/src/views/vlog/video/index.vue b/src/views/vlog/video/index.vue
index c78b4d0..f4f8b1f 100644
--- a/src/views/vlog/video/index.vue
+++ b/src/views/vlog/video/index.vue
@@ -4,16 +4,19 @@ import { useRouter, useRoute } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
 import { GuideSteps, StepNavigation } from '@/components/Guide'
 import { Video } from '@/components'
-import { getStaticImage, IMAGE_PATHS } from '@/utils'
-import second from '/video/Vlog模块_任务取景框_专业剖析_基础景别运用.mp4'
-import third from '/video/Vlog模块_任务取景框_专业剖析_画面构图.mp4'
-import fourth from '/video/Vlog模块_任务取景框_专业剖析_脚本策划.mp4'
-import five from '/video/Vlog模块_任务取景框_专业剖析_动态事件跟拍与抓拍.mp4'
-import six from '/video/Vlog模块_任务取景框_专业剖析_素材导入、剪辑拼接.mp4'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import second from '/video/vlog_renwuqujing_jichujingbieyunyong.mp4'
+import third from '/video/vlog_renwuqujing_huamiangoutu.mp4'
+import fourth from '/video/vlog_renwuqujing_jiaobencehua.mp4'
+import five from '/video/vlog_renwuqujing_zhuapai.mp4'
+import six from '/video/vlog_renwuqujing_jianjipingjie.mp4'
+import { useVlogStore } from '@/stores'
 
 const router = useRouter()
 const route = useRoute()
 
+const vlog = useVlogStore()
+
 // 受控播放开关（用于切换到下一个视频时自动播放）
 const playing = ref(false)
 const status = ref(false)
@@ -71,7 +74,7 @@ const currentVideoIndex = ref(0)
 //按顺序播放
 const currentVideo = computed(() => videoList[currentVideoIndex.value])
 const resolvedSrc = computed(() => {
-  if (key.value === 'case') return '/video/案例赏析-美食小确幸：桂花酒酿小圆子.mp4'
+  if (key.value === 'case') return '/video/anlishangxi_meishi_xiaoyuanzi.mp4'
   if (key.value === 'profession') return currentVideo.value
   return ''
 })
@@ -101,29 +104,38 @@ const handleClose = () => {
 
 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 handleClick = () => {}
 
 const handlePlay = () => {}
 
+// 示例：简单锚点配置（可按需替换为真实题目数据）
+// const anchors = ref([
+//   {
+//     id: 'example-1',
+//     time: 5,
+//     meta: {
+//       title: '第 1 个锚点示例',
+//       options: ['继续观看']
+//     }
+//   }
+// ])
+
 const onEnded = () => {
   if (key.value === 'profession') handleVideoChange()
 }
 
 const handleComplete = () => {
   if (key.value === 'profession') {
+    if (!vlog.isVlogUnlock) vlog.setIsVlogUnlock(true)
     router.push({
-      name: 'Work',
-      query: {
-        key: 'work'
-      }
+      name: 'Work'
     })
   } else {
+    if (vlog.vlogUnlockProgress == 0) vlog.setVlogUnlockProgress(1)
     router.push({
-      name: 'Prepare',
-      query: {
-        key: 'prepare'
-      }
+      name: 'Vlog'
     })
   }
 }
@@ -149,9 +161,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="w-full h-full relative bg-white/10" @click="handleClick">
+  <div class="w-full h-full relative bg-white/10">
     <template v-if="key !== 'case' && key !== 'profession'">
-      <ImgButton class="absolute left-4 top-4 z-10" :image="image"></ImgButton>
+      <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"
@@ -186,14 +211,53 @@ onMounted(() => {
       :volume="1"
       :controls="true"
       :hideNativeControls="true"
+      :anchors="[]"
       @play="handlePlay"
       @ended="onEnded"
     >
-      <template #overlay>
-        <ImgButton
+      <!-- <template #anchor="{ anchor, resume, unmute }">
+        <div class="absolute inset-0 bg-black/50 flex items-center justify-center text-white">
+          <div class="bg-black/80 rounded-lg p-4 w-[320px]">
+            <div class="mb-3 font-bold">
+              {{ anchor.meta?.title || `锚点：${anchor.id}` }}
+            </div>
+            <div class="space-y-2">
+              <button
+                v-for="opt in anchor.meta?.options || []"
+                :key="opt"
+                class="w-full py-2 rounded bg-white/10 hover:bg-white/20"
+                @click="resume()"
+              >
+                {{ opt }}
+              </button>
+            </div>
+            <div class="mt-4 flex justify-end gap-2 text-xs opacity-70">
+              <button @click="unmute()">取消静音并继续</button>
+              <button @click="resume()">直接继续播放</button>
+            </div>
+          </div>
+        </div>
+      </template> -->
+      <template v-slot:overlay>
+        <div
+          :class="[
+            'absolute left-4 top-4 z-10 pointer-events-auto 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 pointer-events-auto"
           :image="image"
-        ></ImgButton>
+        ></ImgButton> -->
         <ImgButton
           class="absolute right-0 top-0 z-10 pointer-events-auto"
           :image="IMAGE_PATHS.COMPONENTS.BACK"
diff --git a/src/views/vlog/work/components/WorkSideSwitcher.vue b/src/views/vlog/work/components/WorkSideSwitcher.vue
index 18cf1e1..c8e38ff 100644
--- a/src/views/vlog/work/components/WorkSideSwitcher.vue
+++ b/src/views/vlog/work/components/WorkSideSwitcher.vue
@@ -25,7 +25,7 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: 'vlog',
+  modelValue: 'case',
   itemClass: 'w-[260px] h-[64px] rounded-[18px]'
 })
 
@@ -37,10 +37,25 @@ const innerValue = computed({
 })
 
 const items = [
-  { key: 'vlog', activeImage: 'work/vlog初识-当前', inactiveImage: 'work/vlog初识-未选中' },
-  { key: 'case', activeImage: 'work/案例赏析-当前', inactiveImage: 'work/案例赏析-未选中' },
-  { key: 'profession', activeImage: 'work/专业剖析-当前', inactiveImage: 'work/专业剖析-未选中' },
-  { key: 'idea', activeImage: 'work/思路提点-当前', inactiveImage: 'work/思路提点-未选中' }
+  // { key: 'vlog', activeImage: 'work/vlog初识-当前', inactiveImage: 'work/vlog初识-未选中' },
+  {
+    key: 'case',
+    label: '案例赏析',
+    activeImage: 'work/选中_带三角',
+    inactiveImage: 'work/未选中_带三角'
+  },
+  {
+    key: 'profession',
+    label: '专业剖析',
+    activeImage: 'work/选中_带三角',
+    inactiveImage: 'work/未选中_带三角'
+  },
+  {
+    key: 'idea',
+    label: '思路提点',
+    activeImage: 'work/选中_带三角',
+    inactiveImage: 'work/未选中_带三角'
+  }
 ]
 
 const onChange = (val: string) => emit('change', val as WorkTab)
diff --git a/src/views/vlog/work/index.vue b/src/views/vlog/work/index.vue
index a66a64b..3d2c6e9 100644
--- a/src/views/vlog/work/index.vue
+++ b/src/views/vlog/work/index.vue
@@ -1,24 +1,27 @@
 <script lang="tsx" name="Work" setup>
 defineOptions({ name: 'Work' })
-import { ref, computed, onActivated } from 'vue'
+import { ref, computed } from 'vue'
 import { getBackgroundImage, IMAGE_PATHS, getStaticImage } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import WorkSideSwitcher from './components/WorkSideSwitcher.vue'
 import { GuideSteps } from '@/components/Guide'
-import { useRouter, useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { useScale } from '@/composables/useScale'
 import { ImagePreview } from '@/components'
+import { useVlogStore } from '@/stores'
 
 const router = useRouter()
-const route = useRoute()
+
+const vlog = useVlogStore()
 
 type WorkTab = 'vlog' | 'case' | 'profession' | 'idea'
 
-const selected = ref<WorkTab>('vlog')
+const selected = ref<WorkTab>('case')
 const stepIndex = ref(0)
 const workSideSwitcherRef = ref<InstanceType<typeof WorkSideSwitcher>>()
 
-const status = ref(false)
+const isGuideVlogTask = computed(() => vlog.isGuideVlogTask)
+const isVlogUnlock = computed(() => vlog.isVlogUnlock)
 
 //引导步骤
 const steps = [
@@ -60,7 +63,7 @@ const currentItem = computed(() => {
 })
 
 const currentHighlight = computed(() =>
-  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
+  stepIndex.value === 0 ? '.img-switch-item--case' : '.work-border'
 )
 
 interface SimpleStep {
@@ -76,28 +79,34 @@ const handleSideSwitcherChange = (value: WorkTab) => {
 }
 
 const handleImageClick = () => {
+  const currentItem = workSideSwitcherRef.value?.items.find(item => item.key === selected.value)
   router.push({
-    name: 'Video',
+    name: 'VlogVideo',
     query: {
-      image:
-        workSideSwitcherRef.value?.items.find(item => item.key === selected.value)?.activeImage ||
-        '',
-      key: selected.value
+      image: currentItem?.activeImage || '',
+      key: selected.value,
+      label: currentItem?.label || ''
     }
   })
 }
 
 const handleClose = () => {
-  router.back()
+  router.push({ name: 'Vlog' })
 }
 
-//状态是否完成前置
-const isComplete = ref(false)
-
 const handleWorkClick = () => {
-  if (!isComplete.value) return
+  if (!isVlogUnlock.value) return
   openImages([getStaticImage('work/桂花酒酿小圆子')])
 }
+const handleGuideComplete = () => {
+  vlog.setIsGuideVlogTask(false)
+}
+
+const handleOpenGuide = () => {
+  stepIndex.value = 0
+  vlog.setIsGuideVlogTask(true)
+}
+
 const { scale, offsetX, offsetY } = useScale()
 
 function openImages(urls: string[], startIndex = 0) {
@@ -108,15 +117,6 @@ function openImages(urls: string[], startIndex = 0) {
     getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
   })
 }
-
-onActivated(() => {
-  if (route.query.key === 'work') {
-    // selected.value = 'profession'
-    isComplete.value = true
-  } else {
-    status.value = true
-  }
-})
 </script>
 
 <template>
@@ -158,31 +158,40 @@ onActivated(() => {
     </div>
 
     <!-- 左侧选项切换 -->
-    <div class="absolute right-4 top-32 z-20">
+    <div class="absolute right-0 top-60 z-20">
       <WorkSideSwitcher
         ref="workSideSwitcherRef"
         v-model="selected"
         @change="handleSideSwitcherChange"
-        :item-class="'w-[462px] h-[142px] '"
+        :item-class="'w-[359px] h-[96px]'"
       />
     </div>
 
     <!-- 任务取景按钮 -->
     <ImgButton
       class="absolute right-14 bottom-10"
-      :image="isComplete ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
+      :image="isVlogUnlock ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
       @click="handleWorkClick"
     />
 
     <!-- 引导与高亮 -->
     <GuideSteps
-      v-if="status"
+      v-if="isGuideVlogTask"
       :steps="steps"
       :highlight-selector="currentHighlight"
       :highlight-padding="12"
       :highlight-radius="20"
       @step-change="handleStepChange"
+      @complete="handleGuideComplete"
+      @skip="handleGuideComplete"
       position-offset-y="85%"
     />
+
+    <!-- 引导词按钮 -->
+    <ImgButton
+      class="absolute w-[120px] bottom-0 right-0 z-10"
+      image="components/long"
+      @click="handleOpenGuide"
+    />
   </div>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index 2c057d7..0504327 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,54 @@
 /** @type {import('tailwindcss').Config} */
+import plugin from 'tailwindcss/plugin'
+
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {}
   },
-  plugins: []
+  plugins: [
+    plugin(function ({ addUtilities, matchUtilities, theme }) {
+      addUtilities({
+        '.transform-3d': {
+          'transform-style': 'preserve-3d'
+        },
+        '.backface-hidden': {
+          'backface-visibility': 'hidden'
+        },
+        '.backface-visible': {
+          'backface-visibility': 'visible'
+        }
+      })
+
+      matchUtilities(
+        {
+          perspective: value => ({
+            perspective: value
+          })
+        },
+        { values: theme('spacing') }
+      )
+
+      matchUtilities(
+        {
+          'rotate-x': value => ({
+            transform: `rotateX(${value})`
+          }),
+          'rotate-y': value => ({
+            transform: `rotateY(${value})`
+          })
+        },
+        { values: theme('rotate') }
+      )
+
+      matchUtilities(
+        {
+          'translate-z': value => ({
+            transform: `translateZ(${value})`
+          })
+        },
+        { values: theme('spacing') }
+      )
+    })
+  ]
 }
diff --git a/tsconfig.app.json b/tsconfig.app.json
index bf52128..7be02d8 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,6 +1,7 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
+    "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "baseUrl": ".",
     "paths": {
@@ -14,9 +15,7 @@
     "strict": true,
     "noUnusedLocals": false,
     "noUnusedParameters": false,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["env.d.ts", "src/**/*"]
 }