feat: 优化移动端学习与证书体验

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

.gitignore

@@ -15,6 +15,7 @@ dist-ssr
 # 忽略所有 .mp4 文件
 *.mp4
 public/video/*
+public/audio/*
 
 # Editor directories and files
 .vscode/*

.prettierrc

@@ -2,11 +2,14 @@
   "semi": false,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "none",
+  "useTabs": false,
-  "printWidth": 100,
+  "trailingComma": "all",
+  "printWidth": 80,
   "endOfLine": "lf",
-  "arrowParens": "avoid",
+  "arrowParens": "always",
   "bracketSpacing": true,
   "bracketSameLine": false,
-  "vueIndentScriptAndStyle": false
+  "htmlWhitespaceSensitivity": "ignore",
+  "vueIndentScriptAndStyle": false,
+  "singleAttributePerLine": true
 }

.prettierrc.json

@@ -1,15 +0,0 @@
-{
-  "printWidth": 100,
-  "tabWidth": 2,
-  "useTabs": true,
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "bracketSpacing": true,
-  "bracketSameLine": true,
-  "arrowParens": "always",
-  "htmlWhitespaceSensitivity": "ignore",
-  "vueIndentScriptAndStyle": false,
-  "endOfLine": "auto",
-  "singleAttributePerLine": false
-}

SKILL_ARCHITECTURE.md

@@ -0,0 +1,481 @@
+# 📚 Skill 功能架构完整分析
+
+## 🗂️ 文件结构（已清理）
+
+```
+src/views/skill/
+├── index.vue                    # 主页面 - 技能树资源浏览器
+├── resourceData.ts              # 数据层 - 资源数据管理
+├── video.vue                    # 视频播放页面
+└── components/
+    ├── SkillTree.vue           # 技能树可视化组件
+    ├── SearchTags.vue          # 搜索面包屑标签
+    └── ResourceList.vue        # 资源列表展示
+```
+
+---
+
+## 🎯 核心功能定位
+
+**技能树资源浏览系统** - 一个基于树形结构的学习资源导航和筛选平台
+
+---
+
+## 📊 数据架构
+
+### 1. 数据层级结构
+
+```
+模块 (Module)
+  └─ 标签 (Tag)
+      └─ 子标签 (SubTag)
+          └─ 资源 (Resource)
+```
+
+### 2. 数据实体
+
+#### ResourceItem 接口
+
+```typescript
+{
+  id: string              // 资源唯一标识
+  title: string           // 资源标题
+  description?: string    // 资源描述
+  moduleId: string        // 所属模块ID
+  moduleName: string      // 所属模块名称
+  tagId: string          // 所属标签ID
+  tagName: string        // 所属标签名称
+  subTagId?: string      // 所属子标签ID（可选）
+  subTagName?: string    // 所属子标签名称（可选）
+}
+```
+
+### 3. 数据统计
+
+- **4个模块**：
+  1. module-1: 新手导航 (5个资源)
+  2. module-2: vlog发现与记录 (6个资源)
+  3. module-3: 访谈聆听与对话 (3个资源)
+  4. module-4: 电影创作与表达 (7个资源)
+
+- **8种标签类型**：
+  - 视觉素养 (橙色)
+  - 摄影基础 (蓝色)
+  - 剪映基础操作 (紫色)
+  - 内容策划 (橙色)
+  - 拍摄执行 (绿色)
+  - 后期制作 (蓝色)
+  - AI与版权伦理知识 (蓝色)
+  - 思路提点与案例赏析 (蓝色)
+
+- **总资源数**：21个学习资源
+
+### 4. 工具函数
+
+```typescript
+getAllResources() // 获取所有资源
+getResourcesByModule(moduleId) // 按模块筛选
+getResourcesByTag(moduleId, tagId) // 按标签筛选
+getResourcesBySubTag(moduleId, tagId, subTagId) // 按子标签筛选
+getAllModules() // 获取所有模块
+getTagsByModule(moduleId) // 获取模块的标签
+getSubTagsByTag(moduleId, tagId) // 获取标签的子标签
+getTagResourceCount(moduleId, tagId) // 获取标签的资源数量
+```
+
+---
+
+## 🎨 UI 布局
+
+### 页面布局（1920x1080）
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  [搜索框 + 面包屑]        [模块1][模块2][模块3][模块4]  [X] │
+│                                                             │
+│                                                             │
+│  ┌──────────────┐                    ┌──────────────────┐  │
+│  │              │                    │                  │  │
+│  │   资源列表    │                    │     技能树        │  │
+│  │   740x800    │                    │    860x820       │  │
+│  │              │                    │                  │  │
+│  │              │                    │   [标签节点...]   │  │
+│  │  [资源卡片]   │                    │                  │  │
+│  │  [资源卡片]   │                    │  技能树总览       │  │
+│  └──────────────┘                    └──────────────────┘  │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 组件定位
+
+1. **搜索框**：左上角 (left-10, top-10, 547x84px)
+2. **模块图标**：顶部居中 (left-55%, top-10, 4个141x150px)
+3. **资源列表**：左下角 (left-10, bottom-20, 740x800px)
+4. **技能树**：右下角 (right-0, bottom-20, 860x820px)
+5. **关闭按钮**：右上角 (right-0, top-0)
+
+---
+
+## 🔄 交互逻辑流程
+
+### 1. 状态管理
+
+```typescript
+// 核心状态
+selectedModuleId: string | null // 当前选中的模块
+selectedTagId: string | null // 当前选中的标签
+selectedSubTagId: string | null // 当前选中的子标签
+expandedTags: Set<string> // 展开的标签集合
+search: string // 搜索文本（待实现）
+```
+
+### 2. 用户交互流程
+
+#### 流程A：模块筛选
+
+```
+用户点击模块图标
+  ↓
+handleModuleListItemClick(moduleId)
+  ↓
+如果已选中同一模块 → 取消选择（显示所有）
+如果选中新模块 → 设置 selectedModuleId
+  ↓
+清空标签和子标签选择
+  ↓
+技能树只显示该模块的标签
+资源列表只显示该模块的资源
+```
+
+#### 流程B：标签筛选
+
+```
+用户点击技能树标签
+  ↓
+handleTagClick(moduleId, tagId)
+  ↓
+如果已选中同一标签：
+  - 已展开 → 折叠并取消选择
+  - 未展开 → 展开子标签
+如果选中新标签：
+  - 设置 selectedModuleId 和 selectedTagId
+  - 如果有子标签 → 自动展开
+  ↓
+资源列表显示该标签的所有资源
+搜索框显示面包屑：[模块] > [标签]
+```
+
+#### 流程C：子标签筛选
+
+```
+用户点击子标签
+  ↓
+handleSubTagClick(moduleId, tagId, subTagId)
+  ↓
+如果已选中同一子标签 → 取消选择
+如果选中新子标签 → 设置 selectedSubTagId
+  ↓
+资源列表显示该子标签的资源
+搜索框显示面包屑：[模块] > [标签] > [子标签]
+```
+
+### 3. 计算属性逻辑
+
+#### searchTags（面包屑）
+
+```typescript
+根据选择状态生成面包屑数组：
+- 选中模块 → 添加模块标签（蓝色）
+- 选中标签 → 添加标签标签（橙色）
+- 选中子标签 → 添加子标签标签（紫色）
+```
+
+#### filteredResources（资源过滤）
+
+```typescript
+优先级：子标签 > 标签 > 模块 > 全部
+1. 如果选中子标签 → 返回子标签的资源
+2. 否则如果选中标签 → 返回标签的资源
+3. 否则如果选中模块 → 返回模块的资源
+4. 否则 → 返回所有资源
+```
+
+---
+
+## 🌳 技能树组件详解
+
+### 1. 核心功能
+
+- **标签去重**：使用 `displayedTags` 计算属性，通过 `moduleId-tagId` 作为唯一键去重
+- **位置布局**：14个预定义位置，形成树形分布
+- **颜色映射**：根据标签名称返回不同颜色
+- **展开/折叠**：有子标签的标签可以展开显示子标签列表
+- **数字徽章**：显示每个标签下的资源数量
+
+### 2. 标签位置分布
+
+```typescript
+14个预定义位置（百分比定位）：
+顶部区域（树冠）：
+  - (8%, 35%)  - (12%, 55%)  - (18%, 72%)
+中上区域：
+  - (28%, 18%) - (32%, 82%)
+中部区域：
+  - (42%, 10%) - (45%, 28%)  - (48%, 68%)
+中下区域：
+  - (58%, 22%) - (62%, 78%)  - (68%, 85%)
+底部区域（树干）：
+  - (75%, 15%) - (78%, 38%)  - (82%, 65%)
+```
+
+### 3. 标签样式
+
+```css
+基础样式：
+- 圆角矩形：rounded-xl
+- 内边距：px-4 py-2
+- 边框：border-2
+- 尺寸：min-w-[140px] max-w-[200px]
+- 阴影：shadow-lg
+
+交互效果：
+- hover：scale-105
+- 选中：橙色背景 + 白色光圈
+
+颜色映射：
+- 后期制作：蓝色 (bg-blue-500/85)
+- 拍摄执行：绿色 (bg-green-500/85)
+- 内容策划：橙色 (bg-orange-500/85)
+- 视觉素养：橙色 (bg-orange-500/85)
+- 摄影基础：蓝色 (bg-blue-500/85)
+- 剪映基础操作：紫色 (bg-purple-500/85)
+- AI与版权伦理知识：蓝色 (bg-blue-500/85)
+- 思路提点与案例赏析：蓝色 (bg-blue-500/85)
+```
+
+### 4. 子标签展开
+
+```
+父标签被点击且有子标签
+  ↓
+在父标签下方显示子标签列表
+  ↓
+子标签样式：
+- 更小的尺寸 (px-3 py-1)
+- 圆角矩形 (rounded-lg)
+- 蓝色背景（未选中）/ 橙色背景（选中）
+- 垂直排列 (space-y-1)
+```
+
+---
+
+## 📋 资源列表组件
+
+### 功能
+
+- 显示过滤后的资源列表
+- 滚动容器（overflow-y-auto）
+- 空状态提示
+
+### 资源卡片样式
+
+```css
+- 半透明蓝色背景：bg-blue-500/20
+- 圆角：rounded
+- 内边距：p-4
+- hover效果：bg-blue-500/30
+- 标题：text-2xl font-bold
+- 描述：text-lg text-gray-300
+```
+
+---
+
+## 🔍 搜索标签组件
+
+### 功能
+
+- 显示当前选择路径（面包屑导航）
+- 不同类型不同颜色
+
+### 标签样式
+
+```css
+- 圆角胶囊：rounded-full
+- 边框：border border-white/80
+- 内边距：px-3 py-1
+- 颜色映射：
+  - 模块：蓝色 (bg-blue-500/80)
+  - 标签：橙色 (bg-orange-500/80)
+  - 子标签：紫色 (bg-purple-500/80)
+```
+
+---
+
+## 🎬 视频播放页面
+
+### 功能
+
+- 播放学习视频
+- 全屏视频播放器
+- 返回按钮
+
+### 当前问题
+
+- 硬编码视频路径：`/video/xinshou_jiuzhonggoutufa.mp4`
+- 未接收路由参数
+- 无法动态切换视频
+
+### 建议改进
+
+```typescript
+// 应该接收资源ID参数
+const route = useRoute()
+const resourceId = route.params.id
+
+// 根据资源ID获取视频路径
+const videoSrc = getVideoByResourceId(resourceId)
+```
+
+---
+
+## 🚀 功能特点
+
+### ✅ 已实现
+
+1. **多层级筛选**：模块 → 标签 → 子标签
+2. **可视化导航**：技能树形式展示
+3. **实时过滤**：点击即时更新资源列表
+4. **面包屑导航**：清晰显示当前位置
+5. **标签去重**：避免重复显示
+6. **展开/折叠**：子标签动态显示
+7. **资源计数**：显示每个标签的资源数量
+8. **响应式交互**：hover、选中等视觉反馈
+
+### ⚠️ 待完善
+
+1. **搜索功能**：文本搜索未实现
+2. **资源详情**：点击资源卡片无响应
+3. **视频播放**：未与资源数据关联
+4. **学习进度**：无进度追踪
+5. **数据持久化**：刷新后状态丢失
+
+---
+
+## 💡 优化建议
+
+### 1. 完善搜索功能
+
+```typescript
+// 在 filteredResources 中添加文本搜索
+const filteredResources = computed(() => {
+  let resources = /* 现有筛选逻辑 */
+
+  // 添加文本搜索
+  if (search.value.trim()) {
+    resources = resources.filter(r =>
+      r.title.includes(search.value) ||
+      r.description?.includes(search.value)
+    )
+  }
+
+  return resources
+})
+```
+
+### 2. 资源点击跳转
+
+```typescript
+// ResourceList.vue
+const handleResourceClick = (resource: ResourceItem) => {
+  router.push({
+    name: 'SkillVideo',
+    params: { id: resource.id }
+  })
+}
+```
+
+### 3. 动态视频播放
+
+```typescript
+// video.vue
+const route = useRoute()
+const resourceId = route.params.id as string
+const resource = getAllResources().find(r => r.id === resourceId)
+const videoSrc = `/video/${resource?.videoFile || 'default.mp4'}`
+```
+
+### 4. 学习进度追踪
+
+```typescript
+// 添加到 ResourceItem
+interface ResourceItem {
+  // ... 现有字段
+  completed?: boolean
+  progress?: number
+  lastViewedAt?: Date
+}
+```
+
+### 5. 状态持久化
+
+```typescript
+// 使用 localStorage 或 Pinia
+import { useLocalStorage } from '@vueuse/core'
+
+const selectedModuleId = useLocalStorage('skill-module', null)
+const selectedTagId = useLocalStorage('skill-tag', null)
+```
+
+---
+
+## 📈 数据扩展建议
+
+### 1. 添加视频文件字段
+
+```typescript
+interface ResourceItem {
+  // ... 现有字段
+  videoFile?: string // 视频文件名
+  duration?: number // 视频时长（秒）
+  difficulty?: 'easy' | 'medium' | 'hard' // 难度
+}
+```
+
+### 2. 添加标签元数据
+
+```typescript
+interface TagMeta {
+  id: string
+  name: string
+  color: string
+  icon?: string
+  description?: string
+}
+```
+
+### 3. 添加模块元数据
+
+```typescript
+interface ModuleMeta {
+  id: string
+  name: string
+  description: string
+  totalResources: number
+  completedResources: number
+  progress: number
+}
+```
+
+---
+
+## 🎯 总结
+
+这是一个**结构清晰、功能完整的技能树资源浏览系统**，核心特点：
+
+1. **数据驱动**：基于一维数组的资源数据，通过工具函数灵活查询
+2. **层级筛选**：支持模块→标签→子标签的多层级筛选
+3. **可视化导航**：技能树形式直观展示资源结构
+4. **实时反馈**：点击即时更新，面包屑导航清晰
+5. **代码整洁**：已清理冗余代码，结构简洁明了
+
+主要改进方向是完善搜索、资源详情、视频播放和学习进度追踪功能。

SKILL_LOGIC_FLOW.md

@@ -0,0 +1,429 @@
+# 🔄 技能树功能逻辑关系完整梳理
+
+## 📊 核心状态管理
+
+### 状态变量
+
+```typescript
+selectedModuleId: string | null // 当前选中的模块ID（null = 总览模式）
+selectedTagId: string | null // 当前选中的标签ID
+selectedSubTagId: string | null // 当前选中的子标签ID
+expandedTags: Set<string> // 展开的标签集合
+search: string // 搜索文本
+```
+
+---
+
+## 🎯 功能模块详解
+
+### 1. 模块切换与技能树标题
+
+#### 逻辑流程
+
+```
+用户点击模块图标
+  ↓
+handleModuleListItemClick(moduleId)
+  ↓
+如果点击的是已选中的模块 → 取消选择（回到总览）
+如果点击的是新模块 → 选中该模块
+  ↓
+更新 selectedModuleId
+清空 selectedTagId、selectedSubTagId
+清空 expandedTags
+  ↓
+技能树标题更新：
+  - selectedModuleId = null → "技能树总览"
+  - selectedModuleId = "module-1" → "新手导航"
+  - selectedModuleId = "module-2" → "vlog发现与记录"
+  - selectedModuleId = "module-3" → "访谈聆听与对话"
+  - selectedModuleId = "module-4" → "电影创作与表达"
+```
+
+#### 实现位置
+
+- **SkillTree.vue**: `getTreeTitle()` 函数
+- **index.vue**: `handleModuleListItemClick()` 函数
+
+---
+
+### 2. 标签点击逻辑（核心）
+
+#### 逻辑分支
+
+```
+用户点击技能树标签
+  ↓
+handleTagClick(moduleId, tagId)
+  ↓
+检查是否有子标签
+  ↓
+┌─────────────────────────────────────────────────────────┐
+│ 分支A: 有子标签                                          │
+├─────────────────────────────────────────────────────────┤
+│ 如果点击的是已选中的标签：                                │
+│   - 已展开 → 折叠（删除 tagId from expandedTags）        │
+│   - 未展开 → 展开（添加 tagId to expandedTags）          │
+│                                                          │
+│ 如果点击的是新标签：                                      │
+│   - 设置 selectedModuleId = moduleId                    │
+│   - 设置 selectedTagId = tagId                          │
+│   - 清空 selectedSubTagId = null                        │
+│   - 自动展开（添加 tagId to expandedTags）               │
+│                                                          │
+│ 结果：展开/折叠子节点，不触发搜索                          │
+└─────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────┐
+│ 分支B: 无子标签                                          │
+├─────────────────────────────────────────────────────────┤
+│ - 设置 selectedModuleId = moduleId                      │
+│ - 设置 selectedTagId = tagId                            │
+│ - 清空 selectedSubTagId = null                          │
+│ - 清空 expandedTags                                     │
+│                                                          │
+│ 结果：高亮标签 + 触发搜索，其他标签保持可见                │
+└─────────────────────────────────────────────────────────┘
+```
+
+#### 关键特性
+
+- ✅ 有子标签：只展开/折叠，不搜索
+- ✅ 无子标签：高亮并搜索，不隐藏其他标签
+- ✅ 其他标签始终可见（不会因为选择而隐藏）
+
+#### 实现位置
+
+- **index.vue**: `handleTagClick()` 函数
+
+---
+
+### 3. 子标签点击逻辑
+
+#### 逻辑流程
+
+```
+用户点击子标签
+  ↓
+handleSubTagClick(moduleId, tagId, subTagId)
+  ↓
+如果点击的是已选中的子标签 → 取消选择
+如果点击的是新子标签 → 选中该子标签
+  ↓
+更新状态：
+  - selectedModuleId = moduleId
+  - selectedTagId = tagId
+  - selectedSubTagId = subTagId
+  - 确保父标签展开（添加 tagId to expandedTags）
+  ↓
+触发资源过滤（显示该子标签的资源）
+```
+
+#### 实现位置
+
+- **index.vue**: `handleSubTagClick()` 函数
+
+---
+
+### 4. 资源过滤逻辑
+
+#### 过滤优先级
+
+```
+1. 子标签过滤（最精确）
+   ↓
+2. 标签过滤
+   ↓
+3. 模块过滤
+   ↓
+4. 全部资源（默认）
+   ↓
+5. 文本搜索（叠加过滤）
+```
+
+#### 详细流程
+
+```typescript
+filteredResources = computed(() => {
+  let resources = []
+
+  // 第一步：根据选择获取资源
+  if (selectedSubTagId) {
+    resources = getResourcesBySubTag(moduleId, tagId, subTagId)
+  } else if (selectedTagId) {
+    resources = getResourcesByTag(moduleId, tagId)
+  } else if (selectedModuleId) {
+    resources = getResourcesByModule(moduleId)
+  } else {
+    resources = getAllResources()
+  }
+
+  // 第二步：文本搜索（如果有搜索文本）
+  if (search.trim()) {
+    resources = resources.filter(
+      r =>
+        r.title.includes(search) ||
+        r.moduleName.includes(search) ||
+        r.tagName.includes(search) ||
+        r.description?.includes(search)
+    )
+  }
+
+  return resources
+})
+```
+
+#### 搜索字段
+
+- ✅ `title` - 资源标题
+- ✅ `moduleName` - 模块名称
+- ✅ `tagName` - 标签名称
+- ✅ `description` - 资源描述
+
+#### 实现位置
+
+- **index.vue**: `filteredResources` 计算属性
+
+---
+
+### 5. 搜索标签（面包屑）
+
+#### 显示逻辑
+
+```
+searchTags = computed(() => {
+  const tags = []
+
+  if (selectedModuleId) {
+    tags.push({ type: 'module', name: moduleName })
+  }
+
+  if (selectedTagId) {
+    tags.push({ type: 'tag', name: tagName })
+  }
+
+  if (selectedSubTagId) {
+    tags.push({ type: 'subTag', name: subTagName })
+  }
+
+  return tags
+})
+```
+
+#### 标签样式
+
+- **模块标签**：蓝色（`bg-blue-500/80`）
+- **标签标签**：橙色（`bg-orange-500/80`）
+- **子标签标签**：紫色（`bg-purple-500/80`）
+
+#### 删除功能
+
+```
+用户点击标签的 × 按钮
+  ↓
+handleRemoveTag(tagType)
+  ↓
+根据 tagType 清除对应状态：
+  - 'subTag' → 清除 selectedSubTagId
+  - 'tag' → 清除 selectedTagId + selectedSubTagId + expandedTags
+  - 'module' → 清除所有选择状态
+  ↓
+资源列表自动更新
+```
+
+#### 实现位置
+
+- **index.vue**: `searchTags` 计算属性, `handleRemoveTag()` 函数
+- **SearchTags.vue**: 标签显示和删除按钮
+
+---
+
+### 6. 文本搜索
+
+#### 搜索框行为
+
+```
+用户在搜索框输入文本
+  ↓
+v-model 绑定到 search 变量
+  ↓
+filteredResources 自动重新计算
+  ↓
+资源列表实时更新
+```
+
+#### 搜索特性
+
+- ✅ 实时搜索（无需点击搜索按钮）
+- ✅ 多字段搜索（title、moduleName、tagName、description）
+- ✅ 大小写不敏感
+- ✅ 叠加过滤（在已选择的基础上进一步过滤）
+- ✅ 搜索文本为空时，不影响选择过滤
+
+#### 实现位置
+
+- **index.vue**: 搜索框 `v-model="search"`
+
+---
+
+## 🎨 UI 交互状态
+
+### 标签高亮状态
+
+```typescript
+isTagSelected(moduleId, tagId) {
+  return selectedModuleId === moduleId && selectedTagId === tagId
+}
+```
+
+### 标签展开状态
+
+```typescript
+isTagExpanded(tagId) {
+  return expandedTags.has(tagId)
+}
+```
+
+### 子标签选中状态
+
+```typescript
+isSubTagSelected(moduleId, tagId, subTagId) {
+  return selectedModuleId === moduleId &&
+         selectedTagId === tagId &&
+         selectedSubTagId === subTagId
+}
+```
+
+---
+
+## 📈 数据流向图
+
+```
+用户操作
+  ↓
+┌─────────────────────────────────────────────────────────┐
+│ 点击模块图标 → handleModuleListItemClick                 │
+│ 点击标签 → handleTagClick                                │
+│ 点击子标签 → handleSubTagClick                           │
+│ 输入搜索文本 → v-model:search                            │
+│ 删除面包屑标签 → handleRemoveTag                         │
+└─────────────────────────────────────────────────────────┘
+  ↓
+更新状态变量
+  - selectedModuleId
+  - selectedTagId
+  - selectedSubTagId
+  - expandedTags
+  - search
+  ↓
+触发计算属性重新计算
+  - searchTags（面包屑）
+  - filteredResources（资源列表）
+  - displayedTags（技能树标签）
+  - displayedModules（显示的模块）
+  ↓
+UI 自动更新
+  - 技能树标题
+  - 标签高亮状态
+  - 子节点展开/折叠
+  - 面包屑标签
+  - 资源列表
+```
+
+---
+
+## 🔍 关键场景示例
+
+### 场景1：从总览到具体资源
+
+```
+1. 初始状态：总览模式
+   - selectedModuleId = null
+   - 显示 "技能树总览"
+   - 显示所有模块的标签（去重）
+
+2. 点击 "新手导航" 模块
+   - selectedModuleId = "module-1"
+   - 显示 "新手导航"
+   - 只显示新手导航的标签
+
+3. 点击 "视觉素养" 标签（有子标签）
+   - selectedTagId = "tag-1-1"
+   - 展开子标签：构图、光线、运镜
+   - 资源列表显示视觉素养的所有资源
+
+4. 点击 "构图" 子标签
+   - selectedSubTagId = "subtag-1-1-1"
+   - 资源列表只显示构图相关资源
+   - 面包屑：新手导航 > 视觉素养 > 构图
+```
+
+### 场景2：搜索功能
+
+```
+1. 在搜索框输入 "构图"
+   - search = "构图"
+   - 资源列表实时过滤，显示所有包含"构图"的资源
+
+2. 点击面包屑标签的删除按钮
+   - 清除对应的选择
+   - 资源列表更新
+
+3. 清空搜索框
+   - search = ""
+   - 资源列表恢复到选择过滤的结果
+```
+
+### 场景3：标签点击行为
+
+```
+有子标签的标签（如"视觉素养"）：
+  - 第一次点击 → 展开子节点
+  - 第二次点击 → 折叠子节点
+  - 不触发搜索，其他标签保持可见
+
+无子标签的标签（如"摄影基础"）：
+  - 点击 → 高亮标签 + 过滤资源
+  - 其他标签保持可见
+  - 可以继续点击其他标签
+```
+
+---
+
+## ✅ 功能清单
+
+### 已实现功能
+
+- ✅ 模块切换（总览 ↔ 具体模块）
+- ✅ 技能树标题动态更新
+- ✅ 标签点击逻辑（有/无子标签分支）
+- ✅ 子标签展开/折叠
+- ✅ 标签高亮显示
+- ✅ 资源多级过滤（模块 → 标签 → 子标签）
+- ✅ 文本搜索（多字段）
+- ✅ 面包屑导航
+- ✅ 标签删除功能
+- ✅ 实时搜索
+- ✅ 标签去重（总览模式）
+
+### 核心特性
+
+- 🎯 **智能标签点击**：根据是否有子标签自动选择行为
+- 🔍 **多维度搜索**：选择过滤 + 文本搜索
+- 🏷️ **面包屑导航**：清晰显示当前位置
+- 🗑️ **灵活删除**：可以删除任意层级的选择
+- 👁️ **保持可见**：选择标签后其他标签不隐藏
+
+---
+
+## 🎯 总结
+
+这是一个**多层级、多维度的资源浏览和搜索系统**，核心特点：
+
+1. **灵活的导航**：支持模块 → 标签 → 子标签的层级导航
+2. **智能的交互**：根据标签类型自动选择展开或搜索
+3. **强大的搜索**：选择过滤 + 文本搜索双重过滤
+4. **清晰的反馈**：面包屑、高亮、展开状态等多种视觉反馈
+5. **用户友好**：可以随时删除选择，标签始终可见
+
+整个系统通过 Vue 的响应式系统自动同步状态和 UI，用户的每个操作都会立即反映在界面上。

eslint.config.ts

@@ -2,26 +2,74 @@ import globals from 'globals'
 import tseslint from 'typescript-eslint'
 import pluginVue from 'eslint-plugin-vue'
 import { defineConfig } from 'eslint/config'
+import { fileURLToPath } from 'node:url'
+
+// 直接使用 tsconfig 的绝对路径，避免中文路径在 URL/路径互转时被编码导致读取失败
+const tsconfigRootDir = fileURLToPath(new URL('.', import.meta.url))
+const tsconfigEslintPath = fileURLToPath(
+  new URL('./tsconfig.eslint.json', import.meta.url),
+)
 
 export default defineConfig([
-  { files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'], languageOptions: { globals: globals.browser } },
+  // 全局忽略：自身配置文件、产物、第三方静态资源等不参与 lint
+  {
+    ignores: [
+      'eslint.config.ts',
+      'eslint.config.*',
+      'dist/**',
+      'node_modules/**',
+      'public/**',
+      'vite.config.*',
+      'postcss.config.*',
+      'tailwind.config.*',
+    ],
+  },
+  {
+    files: ['**/*.{js,mjs,cjs,ts,mts,cts,tsx,vue}'],
+    languageOptions: { globals: globals.browser },
+  },
   tseslint.configs.recommended,
   {
+    languageOptions: {
+      parserOptions: {
+        // 让 typescript-eslint 使用专用 tsconfig（显式 include .vue）
+        project: [tsconfigEslintPath],
+        tsconfigRootDir,
+      },
+    },
     rules: {
-      '@typescript-eslint/no-explicit-any': 'off'
+      '@typescript-eslint/no-explicit-any': 'off',
-    }
+    },
   },
   pluginVue.configs['flat/essential'],
   {
     files: ['**/*.vue'],
-    languageOptions: { parserOptions: { parser: tseslint.parser } },
+    languageOptions: {
+      parserOptions: {
+        parser: {
+          ts: tseslint.parser,
+          tsx: tseslint.parser,
+        },
+        project: [tsconfigEslintPath],
+        tsconfigRootDir,
+        extraFileExtensions: ['.vue'],
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
     rules: {
       'vue/multi-word-component-names': 'off',
       'vue/no-undef-components': [
         'error',
         {
-          ignorePatterns: ['router-view', 'router-link', 'RouterView', 'RouterLink']
+          ignorePatterns: [
-        }
+            'router-view',
+            'router-link',
+            'RouterView',
+            'RouterLink',
+          ],
+        },
       ],
       '@typescript-eslint/no-unused-vars': 'warn',
       '@typescript-eslint/no-explicit-any': 'off', // 完全禁用 any 检查
@@ -33,7 +81,7 @@ export default defineConfig([
       '@typescript-eslint/no-unsafe-argument': 'off',
       '@typescript-eslint/no-empty-object-type': 'off', // 允许空接口
       '@typescript-eslint/no-unused-expressions': 'warn', // 改为警告而非错误
-      'no-unused-expressions': 'off'
+      'no-unused-expressions': 'off',
-    }
+    },
-  }
+  },
 ])

index.html

@@ -2,16 +2,32 @@
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/logo.png"
+    />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
+      content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
-    <meta name="referrer" content="no-referrer" />
+
-    <title>短视频达人</title>
+    <meta
+      name="referrer"
+      content="no-referrer"
+    />
+    <script
+      type="text/javascript"
+      src="./videoajax/jquery-3.7.1.min.js"
+    ></script>
+    <title>短视频达人养成记</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script
+      type="module"
+      src="/src/main.ts"
+    ></script>
+    <script src="./videoajax/videoajax.js"></script>
   </body>
 </html>

package.json

@@ -17,6 +17,8 @@
     "less": "^4.4.1",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
+    "simple-mind-map": "0.14.0-fix.1",
+    "simple-mind-map-plugin-themes": "^1.0.1",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
   },
@@ -25,9 +27,10 @@
     "@commitlint/config-conventional": "^19.8.1",
     "@types/node": "^24.3.3",
     "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
     "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.21",
+    "autoprefixer": "^10.5.0",
-    "baseline-browser-mapping": "^2.8.28",
+    "baseline-browser-mapping": "^2.10.23",
     "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
@@ -41,6 +44,7 @@
     "tailwindcss": "^3.4.17",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.43.0",
+    "vconsole": "^3.15.1",
     "vite": "^7.1.2",
     "vue-tsc": "^3.0.5"
   },

public/videoajax/jquery-3.7.1.min.js

@@ -0,0 +1,2 @@
+/*! jQuery v3.7.1 | (c) OpenJS Foundation and other contributors | jquery.org/license */
+!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(ie,e){"use strict";var oe=[],r=Object.getPrototypeOf,ae=oe.slice,g=oe.flat?function(e){return oe.flat.call(e)}:function(e){return oe.concat.apply([],e)},s=oe.push,se=oe.indexOf,n={},i=n.toString,ue=n.hasOwnProperty,o=ue.toString,a=o.call(Object),le={},v=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},y=function(e){return null!=e&&e===e.window},C=ie.document,u={type:!0,src:!0,nonce:!0,noModule:!0};function m(e,t,n){var r,i,o=(n=n||C).createElement("script");if(o.text=e,t)for(r in u)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function x(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[i.call(e)]||"object":typeof e}var t="3.7.1",l=/HTML$/i,ce=function(e,t){return new ce.fn.init(e,t)};function c(e){var t=!!e&&"length"in e&&e.length,n=x(e);return!v(e)&&!y(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}function fe(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}ce.fn=ce.prototype={jquery:t,constructor:ce,length:0,toArray:function(){return ae.call(this)},get:function(e){return null==e?ae.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=ce.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return ce.each(this,e)},map:function(n){return this.pushStack(ce.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(ae.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(ce.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(ce.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:s,sort:oe.sort,splice:oe.splice},ce.extend=ce.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||v(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(ce.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||ce.isPlainObject(n)?n:{},i=!1,a[t]=ce.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},ce.extend({expando:"jQuery"+(t+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==i.call(e))&&(!(t=r(e))||"function"==typeof(n=ue.call(t,"constructor")&&t.constructor)&&o.call(n)===a)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){m(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(c(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},text:function(e){var t,n="",r=0,i=e.nodeType;if(!i)while(t=e[r++])n+=ce.text(t);return 1===i||11===i?e.textContent:9===i?e.documentElement.textContent:3===i||4===i?e.nodeValue:n},makeArray:function(e,t){var n=t||[];return null!=e&&(c(Object(e))?ce.merge(n,"string"==typeof e?[e]:e):s.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:se.call(t,e,n)},isXMLDoc:function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!l.test(t||n&&n.nodeName||"HTML")},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(c(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return g(a)},guid:1,support:le}),"function"==typeof Symbol&&(ce.fn[Symbol.iterator]=oe[Symbol.iterator]),ce.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var pe=oe.pop,de=oe.sort,he=oe.splice,ge="[\\x20\\t\\r\\n\\f]",ve=new RegExp("^"+ge+"+|((?:^|[^\\\\])(?:\\\\.)*)"+ge+"+$","g");ce.contains=function(e,t){var n=t&&t.parentNode;return e===n||!(!n||1!==n.nodeType||!(e.contains?e.contains(n):e.compareDocumentPosition&&16&e.compareDocumentPosition(n)))};var f=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g;function p(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e}ce.escapeSelector=function(e){return(e+"").replace(f,p)};var ye=C,me=s;!function(){var e,b,w,o,a,T,r,C,d,i,k=me,S=ce.expando,E=0,n=0,s=W(),c=W(),u=W(),h=W(),l=function(e,t){return e===t&&(a=!0),0},f="checked|selected|async|autofocus|autoplay|conLine truncated

public/videoajax/videoajax.js

@@ -0,0 +1,407 @@
+/*
+ * $Id: base64.js,v 2.15 2014/04/05 12:58:57 dankogai Exp dankogai $
+ *
+ *  Licensed under the MIT license.
+ *    http://opensource.org/licenses/mit-license
+ *
+ *  References:
+ *    http://en.wikipedia.org/wiki/Base64
+ */
+
+(function(global) {
+    'use strict';
+    // existing version for noConflict()
+    var _Base64 = global.Base64;
+    var version = "2.1.5";
+    // if node.js, we use Buffer
+    var buffer;
+    if (typeof module !== 'undefined' && module.exports) {
+        buffer = require('buffer').Buffer;
+    }
+    // constants
+    var b64chars
+        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+    var b64tab = function(bin) {
+        var t = {};
+        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;
+        return t;
+    }(b64chars);
+    var fromCharCode = String.fromCharCode;
+    // encoder stuff
+    var cb_utob = function(c) {
+        if (c.length < 2) {
+            var cc = c.charCodeAt(0);
+            return cc < 0x80 ? c
+                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))
+                                + fromCharCode(0x80 | (cc & 0x3f)))
+                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))
+                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))
+                   + fromCharCode(0x80 | ( cc         & 0x3f)));
+        } else {
+            var cc = 0x10000
+                + (c.charCodeAt(0) - 0xD800) * 0x400
+                + (c.charCodeAt(1) - 0xDC00);
+            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))
+                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))
+                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))
+                    + fromCharCode(0x80 | ( cc         & 0x3f)));
+        }
+    };
+    var re_utob = /[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g;
+    var utob = function(u) {
+        return u.replace(re_utob, cb_utob);
+    };
+    var cb_encode = function(ccc) {
+        var padlen = [0, 2, 1][ccc.length % 3],
+        ord = ccc.charCodeAt(0) << 16
+            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)
+            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),
+        chars = [
+            b64chars.charAt( ord >>> 18),
+            b64chars.charAt((ord >>> 12) & 63),
+            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),
+            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)
+        ];
+        return chars.join('');
+    };
+    var btoa = global.btoa ? function(b) {
+        return global.btoa(b);
+    } : function(b) {
+        return b.replace(/[\s\S]{1,3}/g, cb_encode);
+    };
+    var _encode = buffer
+        ? function (u) { return (new buffer(u)).toString('base64') } 
+    : function (u) { return btoa(utob(u)) }
+    ;
+    var encode = function(u, urisafe) {
+        return !urisafe 
+            ? _encode(u)
+            : _encode(u).replace(/[+\/]/g, function(m0) {
+                return m0 == '+' ? '-' : '_';
+            }).replace(/=/g, '');
+    };
+    var encodeURI = function(u) { return encode(u, true) };
+    // decoder stuff
+    var re_btou = new RegExp([
+        '[\xC0-\xDF][\x80-\xBF]',
+        '[\xE0-\xEF][\x80-\xBF]{2}',
+        '[\xF0-\xF7][\x80-\xBF]{3}'
+    ].join('|'), 'g');
+    var cb_btou = function(cccc) {
+        switch(cccc.length) {
+        case 4:
+            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)
+                |    ((0x3f & cccc.charCodeAt(1)) << 12)
+                |    ((0x3f & cccc.charCodeAt(2)) <<  6)
+                |     (0x3f & cccc.charCodeAt(3)),
+            offset = cp - 0x10000;
+            return (fromCharCode((offset  >>> 10) + 0xD800)
+                    + fromCharCode((offset & 0x3FF) + 0xDC00));
+        case 3:
+            return fromCharCode(
+                ((0x0f & cccc.charCodeAt(0)) << 12)
+                    | ((0x3f & cccc.charCodeAt(1)) << 6)
+                    |  (0x3f & cccc.charCodeAt(2))
+            );
+        default:
+            return  fromCharCode(
+                ((0x1f & cccc.charCodeAt(0)) << 6)
+                    |  (0x3f & cccc.charCodeAt(1))
+            );
+        }
+    };
+    var btou = function(b) {
+        return b.replace(re_btou, cb_btou);
+    };
+    var cb_decode = function(cccc) {
+        var len = cccc.length,
+        padlen = len % 4,
+        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)
+            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)
+            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)
+            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),
+        chars = [
+            fromCharCode( n >>> 16),
+            fromCharCode((n >>>  8) & 0xff),
+            fromCharCode( n         & 0xff)
+        ];
+        chars.length -= [0, 0, 2, 1][padlen];
+        return chars.join('');
+    };
+    var atob = global.atob ? function(a) {
+        return global.atob(a);
+    } : function(a){
+        return a.replace(/[\s\S]{1,4}/g, cb_decode);
+    };
+    var _decode = buffer
+        ? function(a) { return (new buffer(a, 'base64')).toString() }
+    : function(a) { return btou(atob(a)) };
+    var decode = function(a){
+        return _decode(
+            a.replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })
+                .replace(/[^A-Za-z0-9\+\/]/g, '')
+        );
+    };
+    var noConflict = function() {
+        var Base64 = global.Base64;
+        global.Base64 = _Base64;
+        return Base64;
+    };
+    // export Base64
+    global.Base64 = {
+        VERSION: version,
+        atob: atob,
+        btoa: btoa,
+        fromBase64: decode,
+        toBase64: encode,
+        utob: utob,
+        encode: encode,
+        encodeURI: encodeURI,
+        btou: btou,
+        decode: decode,
+        noConflict: noConflict
+    };
+    // if ES5 is available, make Base64.extendString() available
+    if (typeof Object.defineProperty === 'function') {
+        var noEnum = function(v){
+            return {value:v,enumerable:false,writable:true,configurable:true};
+        };
+        global.Base64.extendString = function () {
+            Object.defineProperty(
+                String.prototype, 'fromBase64', noEnum(function () {
+                    return decode(this)
+                }));
+            Object.defineProperty(
+                String.prototype, 'toBase64', noEnum(function (urisafe) {
+                    return encode(this, urisafe)
+                }));
+            Object.defineProperty(
+                String.prototype, 'toBase64URI', noEnum(function () {
+                    return encode(this, true)
+                }));
+        };
+    }
+    // that's it!
+})(this);
+
+if (this['Meteor']) {
+    Base64 = global.Base64; // for normal export in Meteor.js
+}
+
+; (function (root) {
+    // body...
+
+    var videoajax = function (argument) {
+        // body...
+        var host = '/';
+
+        this._setHost=function(hoststr) {
+            host = hoststr;
+        };
+        this._getHost = function(){
+            return host;
+        }
+    };
+
+    $.extend(videoajax.prototype,{
+        /**
+         * 设置主域名
+         * @param hosts {String} default: '/' 主域名字符串
+         */
+        setHost :function(hosts){
+            this._setHost(hosts);
+        },
+        //user_id,course_id,lesson_id，break_point
+        /**
+         * 播放退出时间点
+         * @param data {dataObject} 向后台传递的数据对象，应该包含 
+         *          user_id {Number} 用户ID
+         *          course_id {Number} 课程ID
+         *          lesson_id {Number} 课时ID
+         *          break_point {Number} 断点
+         *@param callback {Function} 回调方法
+         */
+        quitBreakPoint:function(data,callback){
+            var paramfiled = ["user_id","course_id","lesson_id","break_point"];
+            var dataStr = verfiyData(paramfiled,data);
+            getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=addBreakPoint',{
+                userViewPoint:dataStr
+            },function(data){
+                    isFunction(callback) ? callback(data.code == 200,data) : '';
+                }
+            );
+        },
+        /**
+         * user_id:123,course_id:23,lesson_id:3
+         *播放历史记录
+         * @param data {dataObject} 向后台传递的数据对象，应该包含 
+         *          user_id {Number} 用户ID
+         *          course_id {Number} 课程ID
+         *          lesson_id {Number} 课时ID
+         *@param callback {Function} 回调方法
+         */
+        getBreakPoint:function(data,callback){
+            var paramfiled = ["user_id","course_id","lesson_id"];
+            var dataStr = verfiyData(paramfiled,data);
+            getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=userbreakpoint',{
+                userCourseInfo:dataStr
+            },function(data){
+                    isFunction(callback) ? callback(data.code == 200,data) : '';
+                    // isFunction(callback) ? callback(data) : '';
+                }
+            );
+        },
+        /**
+         *用户答题答案
+         * @param data {dataObject} 向后台传递的数据对象，应该包含 
+         *          user_id {Number} 用户ID
+         *          course_id {Number} 课程ID
+         *          lesson_id {Number} 课时ID
+         *          question_order {Number} 问题序号
+         *          answer {String} 问题
+         *@param callback {Function} 回调方法
+         */
+        getUserAnswer:function(data,callback){
+            var paramfiled = ["user_id","lesson_id","course_id","question_order","answer"];
+            var dataStr = verfiyData(paramfiled,data);
+            getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=addUserAnswer',{
+                userAnswerInfo:dataStr
+            },function(data){
+                    isFunction(callback) ? callback(data.code == 200,data) : '';
+                }
+            );
+
+        },
+        /**
+         *播放结束
+         * @param data {dataObject} 向后台传递的数据对象，应该包含 
+         *          order {Number} 排序ID
+         *          co {Number} 课时ID
+         *@param callback {Function} 回调方法
+         */
+        finishCourse:function(data,callback){
+            var paramfiled = ["order","co","process"];
+            var dataStr = verfiyData(paramfiled,data);
+            getDate(this._getHost()+'index.php?m=user&c=learnrecord&a=playcount',data,function(data){
+                    isFunction(callback) ? callback(data.code == 200,data) : '';
+                    // isFunction(callback) ? callback(data) : '';
+                }
+            );
+        },
+        /**
+         *课程进度获取
+         * @param data {dataObject} 向后台传递的数据对象，应该包含 
+         *          order {Number} 排序ID
+         *          co {Number} 课时ID
+         *@param callback {Function} 回调方法
+         *   注回调使用的参数,值类似为: {"status":true,"data":{"process":"91"}}
+         *                        或: {"status":false,"data":'参数丢失'}
+         *                        其中status为true为调用正常, 如果有值则data返回json形式的进度, 没有值则返回[]
+         *                        status为false时, data保存的是错误提示
+         */
+        getfinishCourse:function(data,callback){
+            var paramfiled = ["order","co"];
+            var dataStr = verfiyData(paramfiled,data);
+            getDate(this._getHost()+'index.php?m=user&c=learnrecord&a=getuserlessionprocess',data,function(data){
+                    isFunction(callback) ? callback(data) : '';
+                    // isFunction(callback) ? callback(data) : '';
+                }
+            );
+        },
+        /**
+         *解码加密的breakpoint
+         * @pparam basecode {String} 要解码的字符串
+         */
+        fromBaseCode : function(basecode){
+            return getBreakPoint(basecode);
+        },
+        /**
+         *通过key值和课时值获取自定的数据
+         * @param data {dataObject} 向后台传递的数据对象，应该包含 
+         *          lessonId {Number} 课时ID
+         *          order {Number} 排序ID
+         *@param callback {Function} 回调方法
+         */
+        getUserDefineInfo :function(data,callback){
+            var paramfiled = ["lessonId","order"];
+            var dataStr = verfiyData(paramfiled,data);
+            getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=getUserDefineInfo',{
+            	defineDate:dataStr
+            },function(data){
+                isFunction(callback) ? callback(data) : '';
+            });
+        },
+        /**
+         *通过key值和课时值及用户ID获取自定的数据
+         * @param data {dataObject} 向后台传递的数据对象，应该包含 
+         *          lessonId {Number} 课时ID
+         *          order {Number} 排序ID
+         *@param callback {Function} 回调方法
+         */
+        getUserDefineInfoByUser :function(data,callback){
+            var paramfiled = ["lessonId","order"];
+            var dataStr = verfiyData(paramfiled,data);
+            getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=getUserDefineInfoByUser',{
+                defineUserDate:dataStr
+            },function(data){
+                isFunction(callback) ? callback(data) : '';
+            });
+        },
+        /**
+         *增加自定数据
+         * @param data {dataObject} 向后台传递的数据对象，应该包含 
+         *          lessonId {Number} 课时ID
+         *          key {string} 键值ID
+         *          content {string} 字内容
+         *@param callback {Function} 回调方法
+         */
+        addUserDefine:function(data,callback){
+            var paramfiled = ["lessonId","key","content"];
+            var dataStr = verfiyData(paramfiled,data);
+            getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=addUserDefine',{
+                addDefineDate:dataStr
+            },function(data){
+                isFunction(callback) ? callback(data) : '';
+            });
+        }
+    })
+    
+    var getDate = function(url,data,callback){
+        $.get(url,data,function(data){
+            callback(data);
+        },'json')
+    };
+
+    var isFunction = function(fn){
+        if(typeof fn === 'function')return true;
+        return false;
+    }
+    var verfiyData = function(field,data){
+        var arr=[];
+        console.log(field);
+        console.log('<br/>');
+        console.log(data);
+        for(var i in field){
+        	
+            if(!data[field[i]]){
+                throw new Error('data is error');
+            }
+            arr.push(field[i]+':'+data[field[i]]);
+        }
+        if(root.JSON){
+            return JSON.stringify(data);
+        }else{
+            return '{'+arr.join(',')+'}';
+        }
+
+    }
+
+    var getBreakPoint = function (base64point) {
+        var newbc = base64point.split('').reverse().join('');
+        return Base64.fromBase64(newbc);
+    }
+
+    root.videoAjax = function(){
+        return new videoajax();
+    }
+}(this));

public/videoajax/videoajax.min.js

@@ -0,0 +1 @@
+(function(global){'use strict';var _Base64=global.Base64;var version="2.1.5";var buffer;if(typeof module!=='undefined'&&module.exports){buffer=require('buffer').Buffer}var b64chars='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';var b64tab=function(bin){var t={};for(var i=0,l=bin.length;i<l;i++)t[bin.charAt(i)]=i;return t}(b64chars);var fromCharCode=String.fromCharCode;var cb_utob=function(c){if(c.length<2){var cc=c.charCodeAt(0);return cc<0x80?c:cc<0x800?(fromCharCode(0xc0|(cc>>>6))+fromCharCode(0x80|(cc&0x3f))):(fromCharCode(0xe0|((cc>>>12)&0x0f))+fromCharCode(0x80|((cc>>>6)&0x3f))+fromCharCode(0x80|(cc&0x3f)))}else{var cc=0x10000+(c.charCodeAt(0)-0xD800)*0x400+(c.charCodeAt(1)-0xDC00);return(fromCharCode(0xf0|((cc>>>18)&0x07))+fromCharCode(0x80|((cc>>>12)&0x3f))+fromCharCode(0x80|((cc>>>6)&0x3f))+fromCharCode(0x80|(cc&0x3f)))}};var re_utob=/[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g;var utob=function(u){return u.replace(re_utob,cb_utob)};var cb_encode=function(ccc){var padlen=[0,2,1][ccc.length%3],ord=ccc.charCodeAt(0)<<16|((ccc.length>1?ccc.charCodeAt(1):0)<<8)|((ccc.length>2?ccc.charCodeAt(2):0)),chars=[b64chars.charAt(ord>>>18),b64chars.charAt((ord>>>12)&63),padlen>=2?'=':b64chars.charAt((ord>>>6)&63),padlen>=1?'=':b64chars.charAt(ord&63)];return chars.join('')};var btoa=global.btoa?function(b){return global.btoa(b)}:function(b){return b.replace(/[\s\S]{1,3}/g,cb_encode)};var _encode=buffer?function(u){return(new buffer(u)).toString('base64')}:function(u){return btoa(utob(u))};var encode=function(u,urisafe){return!urisafe?_encode(u):_encode(u).replace(/[+\/]/g,function(m0){return m0=='+'?'-':'_'}).replace(/=/g,'')};var encodeURI=function(u){return encode(u,true)};var re_btou=new RegExp(['[\xC0-\xDF][\x80-\xBF]','[\xE0-\xEF][\x80-\xBF]{2}','[\xF0-\xF7][\x80-\xBF]{3}'].join('|'),'g');var cb_btou=function(cccc){switch(cccc.length){case 4:var cp=((0x07&cccc.charCodeAt(0))<<18)|((0x3f&cccc.charCodeAt(1))<<12)|((0x3f&cccc.charCodeAt(2))<<6)|(0x3f&cccc.charCodeAt(3)),offset=cp-0x10000;return(fromCharCode((offset>>>10)+0xD800)+fromCharCode((offset&0x3FF)+0xDC00));case 3:return fromCharCode(((0x0f&cccc.charCodeAt(0))<<12)|((0x3f&cccc.charCodeAt(1))<<6)|(0x3f&cccc.charCodeAt(2)));default:return fromCharCode(((0x1f&cccc.charCodeAt(0))<<6)|(0x3f&cccc.charCodeAt(1)))}};var btou=function(b){return b.replace(re_btou,cb_btou)};var cb_decode=function(cccc){var len=cccc.length,padlen=len%4,n=(len>0?b64tab[cccc.charAt(0)]<<18:0)|(len>1?b64tab[cccc.charAt(1)]<<12:0)|(len>2?b64tab[cccc.charAt(2)]<<6:0)|(len>3?b64tab[cccc.charAt(3)]:0),chars=[fromCharCode(n>>>16),fromCharCode((n>>>8)&0xff),fromCharCode(n&0xff)];chars.length-=[0,0,2,1][padlen];return chars.join('')};var atob=global.atob?function(a){return global.atob(a)}:function(a){return a.replace(/[\s\S]{1,4}/g,cb_decode)};var _decode=buffer?function(a){return(new buffer(a,'base64')).toString()}:function(a){return btou(atob(a))};var decode=function(a){return _decode(a.replace(/[-_]/g,function(m0){return m0=='-'?'+':'/'}).replace(/[^A-Za-z0-9\+\/]/g,''))};var noConflict=function(){var Base64=global.Base64;global.Base64=_Base64;return Base64};global.Base64={VERSION:version,atob:atob,btoa:btoa,fromBase64:decode,toBase64:encode,utob:utob,encode:encode,encodeURI:encodeURI,btou:btou,decode:decode,noConflict:noConflict};if(typeof Object.defineProperty==='function'){var noEnum=function(v){return{value:v,enumerable:false,writable:true,configurable:true}};global.Base64.extendString=function(){Object.defineProperty(String.prototype,'fromBase64',noEnum(function(){return decode(this)}));Object.defineProperty(String.prototype,'toBase64',noEnum(function(urisafe){return encode(this,urisafe)}));Object.defineProperty(String.prototype,'toBase64URI',noEnum(function(){return encode(this,true)}))}}})(this);if(this['Meteor']){Base64=global.Base64};(function(root){var videoajax=function(argument){var host='/';this._setHost=function(hoststr){host=hoststr};this._getHost=function(){return host}};$.extend(videoajax.prototype,{setHost:function(hosts){this._setHost(hosts)},quitBreakPoint:function(data,callback){var paramfiled=["user_id","course_id","lesson_id","break_point"];var dataStr=verfiyData(paramfiled,data);getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=addBreakPoint',{userViewPoint:dataStr},function(data){isFunction(callback)?callback(data.code==200,data):''})},getBreakPoint:function(data,callback){var paramfiled=["user_id","course_id","lesson_id"];var dataStr=verfiyData(paramfiled,data);getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=userbreakpoint',{userCourseInfo:dataStr},function(data){isFunction(callback)?callback(data.code==200,data):''})},getUserAnswer:function(data,callback){var paramfiled=["user_id","lesson_id","course_id","question_order","answer"];var dataStr=verfiyData(paramfiled,data);getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=addUserAnswer',{userAnswerInfo:dataStr},function(data){isFunction(callback)?callbacLine truncated

public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/App.vue

@@ -1,21 +1,83 @@
 <template>
-  <div class="app-container" :style="containerStyle">
+  <div
-    <div class="app-content" :style="scaleStyle">
+    class="app-container"
-      <router-view v-slot="{ Component }">
+    :style="containerStyle"
-        <KeepAlive :include="[]">
+  >
+    <div
+      class="app-content overflow-hidden"
+      :style="scaleStyle"
+    >
+      <router-view
+        v-if="!bootstrapLoading"
+        v-slot="{ Component }"
+      >
+        <KeepAlive :include="['Action', 'Skill']">
           <component :is="Component" />
         </KeepAlive>
       </router-view>
     </div>
+
+    <div class="rotate-hint">请横屏观看，以获得最佳体验</div>
+
+    <LoadingOverlay
+      :visible="bootstrapLoading"
+      text="正在加载学习数据..."
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useScale } from '@/composables/useScale'
-import { computed } from 'vue'
+import {
+  useUserStore,
+  useVlogStore,
+  useFilmStore,
+  useInterviewStore,
+  useBasicElementsStore,
+} from '@/stores'
+import { onMounted, ref } from 'vue'
+import { syncAllCompletedYibanLessons } from '@/utils/yibanLessonProgress'
+import { initializeStorageBackend } from '@/utils/yiban'
+import LoadingOverlay from '@/components/Loading/LoadingOverlay.vue'
 
 // 使用等比例缩放hook
 const { scaleStyle } = useScale()
+const userStore = useUserStore()
+const vlogStore = useVlogStore()
+const filmStore = useFilmStore()
+const interviewStore = useInterviewStore()
+const basicElementsStore = useBasicElementsStore()
+
+// 易班数据读取期间的全屏 loading
+const bootstrapLoading = ref(true)
+
+onMounted(async () => {
+  const params = new URLSearchParams(window.location.search)
+  const courseId = params.get('courseid')
+  const uid = params.get('uid')
+
+  if (courseId || uid) {
+    userStore.setCourseInfo({
+      courseId: courseId ?? null,
+      uid: uid ?? null,
+    })
+  }
+
+  try {
+    await initializeStorageBackend()
+
+    await Promise.allSettled([
+      vlogStore.loadVlogStore(),
+      filmStore.loadFilmStore(),
+      interviewStore.loadInterviewStore(),
+      basicElementsStore.loadBasicElementsStore(),
+    ])
+  } finally {
+    bootstrapLoading.value = false
+  }
+
+  await syncAllCompletedYibanLessons()
+})
 
 // 容器样式
 const containerStyle = {
@@ -23,14 +85,39 @@ const containerStyle = {
   height: '100vh',
   overflow: 'hidden',
   position: 'relative' as const,
-  background: '#000'
+  background: '#000',
 }
-
-// 只缓存技能树页
-const cachedNames = computed(() => ['SkillPage', 'Work'])
 </script>
 
-<style>
+<style scoped>
+.rotate-hint {
+  position: fixed;
+  inset: 0;
+  z-index: 200000;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  color: #fff;
+  font-size: 20px;
+  line-height: 1.5;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.55)
+    radial-gradient(
+      circle at center,
+      rgba(255, 255, 255, 0.1),
+      rgba(0, 0, 0, 0.6)
+    );
+}
+
+@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
+  .rotate-hint {
+    display: flex;
+  }
+}
+</style>
+
+<!-- <style>
 #app {
   font-family:
     -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
@@ -38,4 +125,4 @@ const cachedNames = computed(() => ['SkillPage', 'Work'])
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-</style>
+</style> -->