zhongyidian/super_video
1
0 Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完善技能树功能架构与逻辑流程文档，新增视频播放与学习进度追踪功能

Browse Source
This commit is contained in:
zhongyidian committed 2026-01-03 17:31:24 +08:00
1 parent 6090abf955
commit e9a1fee27f
42 files changed
+1849 -760
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/skill/resourceData.ts
+212 -49
View File
@@ -13,11 +13,16 @@ export interface ResourceItem {
subTagName?: string
// 资源数量（用于技能树显示）
resourceCount?: number
// 资源类型和链接
type: 'video' | 'page' | 'image' // video: 视频播放, page: 页面跳转, image: 图文展示
videoUrl?: string // 视频URL（type为video时使用）
routeName?: string // 路由名称（type为page时使用）
images?: string[] // 图片URL数组（type为image时使用）
}
// 一维数组格式的资源数据
export const resourceData: ResourceItem[] = [
// 新手导航模块
// 新手导航模块 - 保持原有标签
{
id: 'res-1',
title: '九种构图法',
@@ -27,7 +32,9 @@ export const resourceData: ResourceItem[] = [
tagId: 'tag-1-1',
tagName: '视觉素养',
subTagId: 'subtag-1-1-1',
subTagName: '构图'
subTagName: '构图',
type: 'video',
videoUrl: '/video/构图法.mp4'
},
{
id: 'res-2',
@@ -38,7 +45,9 @@ export const resourceData: ResourceItem[] = [
tagId: 'tag-1-1',
tagName: '视觉素养',
subTagId: 'subtag-1-1-2',
subTagName: '光线'
subTagName: '光线',
type: 'video',
videoUrl: '/video/光线运用.mp4'
},
{
id: 'res-3',
@@ -49,7 +58,9 @@ export const resourceData: ResourceItem[] = [
tagId: 'tag-1-1',
tagName: '视觉素养',
subTagId: 'subtag-1-1-3',
subTagName: '运镜'
subTagName: '运镜',
type: 'video',
videoUrl: '/video/运镜技巧.mp4'
},
{
id: 'res-4',
@@ -58,7 +69,9 @@ export const resourceData: ResourceItem[] = [
moduleId: 'module-1',
moduleName: '新手导航',
tagId: 'tag-1-2',
tagName: '摄影基础'
tagName: '摄影基础',
type: 'image',
images: ['/images/skill/摄影基础1.png', '/images/skill/摄影基础2.png']
},
{
id: 'res-5',
@@ -67,33 +80,53 @@ export const resourceData: ResourceItem[] = [
moduleId: 'module-1',
moduleName: '新手导航',
tagId: 'tag-1-3',
tagName: '剪映基础操作'
tagName: '剪映基础操作',
type: 'video',
videoUrl: '/video/剪映入门.mp4'
},
// vlog发现与记录模块
// vlog发现与记录模块 - 使用统一标签体系
{
id: 'res-6',
title: '设备准备指南',
description: 'vlog拍摄设备准备',
title: 'vlog设备准备',
description: 'vlog拍摄设备准备指南',
moduleId: 'module-2',
moduleName: 'vlog发现与记录',
tagId: 'tag-2-1',
tagName: '内容策划',
subTagId: 'subtag-2-1-1',
subTagName: '设备准备'
subTagName: '设备准备',
type: 'video',
videoUrl: '/video/vlog设备准备.mp4'
},
{
id: 'res-7',
title: 'vlog选题构思',
description: 'vlog选题与创意构思',
moduleId: 'module-2',
moduleName: 'vlog发现与记录',
tagId: 'tag-2-1',
tagName: '内容策划',
subTagId: 'subtag-2-1-2',
subTagName: '选题与构思',
type: 'video',
videoUrl: '/video/vlog选题构思.mp4'
},
{
id: 'res-8',
title: 'vlog脚本撰写',
description: '如何撰写vlog脚本',
moduleId: 'module-2',
moduleName: 'vlog发现与记录',
tagId: 'tag-2-1',
tagName: '内容策划',
subTagId: 'subtag-2-1-2',
subTagName: '脚本制作'
subTagId: 'subtag-2-1-3',
subTagName: '脚本与分镜制作',
type: 'video',
videoUrl: '/video/vlog脚本撰写.mp4'
},
{
id: 'res-8',
id: 'res-9',
title: 'vlog构图技巧',
description: 'vlog拍摄构图方法',
moduleId: 'module-2',
@@ -101,10 +134,12 @@ export const resourceData: ResourceItem[] = [
tagId: 'tag-2-2',
tagName: '拍摄执行',
subTagId: 'subtag-2-2-1',
subTagName: '构图'
subTagName: '构图',
type: 'video',
videoUrl: '/video/vlog构图技巧.mp4'
},
{
id: 'res-9',
id: 'res-10',
title: 'vlog光线控制',
description: 'vlog拍摄光线运用',
moduleId: 'module-2',
@@ -112,10 +147,12 @@ export const resourceData: ResourceItem[] = [
tagId: 'tag-2-2',
tagName: '拍摄执行',
subTagId: 'subtag-2-2-2',
subTagName: '光线运用'
subTagName: '光线运用',
type: 'video',
videoUrl: '/video/vlog光线控制.mp4'
},
{
id: 'res-10',
id: 'res-11',
title: 'vlog运镜方法',
description: 'vlog拍摄运镜技巧',
moduleId: 'module-2',
@@ -123,52 +160,164 @@ export const resourceData: ResourceItem[] = [
tagId: 'tag-2-2',
tagName: '拍摄执行',
subTagId: 'subtag-2-2-3',
subTagName: '运镜技巧'
subTagName: '运镜技巧',
type: 'video',
videoUrl: '/video/vlog运镜方法.mp4'
},
{
id: 'res-11',
title: 'vlog后期剪辑',
description: 'vlog视频后期制作',
id: 'res-12',
title: 'vlog剪辑技巧',
description: 'vlog视频剪辑方法',
moduleId: 'module-2',
moduleName: 'vlog发现与记录',
tagId: 'tag-2-3',
tagName: '后期制作'
tagName: '后期制作',
subTagId: 'subtag-2-3-1',
subTagName: '剪辑技巧',
type: 'video',
videoUrl: '/video/vlog剪辑技巧.mp4'
},
// 访谈聆听与对话模块
{
id: 'res-12',
id: 'res-13',
title: 'vlog调色技巧',
description: 'vlog视频调色方法',
moduleId: 'module-2',
moduleName: 'vlog发现与记录',
tagId: 'tag-2-3',
tagName: '后期制作',
subTagId: 'subtag-2-3-2',
subTagName: '调色',
type: 'video',
videoUrl: '/video/vlog调色技巧.mp4'
},
{
id: 'res-14',
title: 'vlog音效处理',
description: 'vlog音效添加与处理',
moduleId: 'module-2',
moduleName: 'vlog发现与记录',
tagId: 'tag-2-3',
tagName: '后期制作',
subTagId: 'subtag-2-3-3',
subTagName: '音效',
type: 'video',
videoUrl: '/video/vlog音效处理.mp4'
},
{
id: 'res-15',
title: 'vlog版权规范',
description: 'vlog创作版权注意事项',
moduleId: 'module-2',
moduleName: 'vlog发现与记录',
tagId: 'tag-2-4',
tagName: 'AI与版权伦理知识',
type: 'image',
images: [
'/images/skill/版权规范1.png',
'/images/skill/版权规范2.png',
'/images/skill/版权规范3.png'
]
},
{
id: 'res-16',
title: 'vlog案例赏析',
description: '优秀vlog作品分析',
moduleId: 'module-2',
moduleName: 'vlog发现与记录',
tagId: 'tag-2-5',
tagName: '思路提点与案例赏析',
type: 'video',
videoUrl: '/video/vlog案例赏析.mp4'
},
// 访谈聆听与对话模块 - 使用统一标签体系
{
id: 'res-17',
title: '访谈设备准备',
description: '访谈拍摄设备清单',
moduleId: 'module-3',
moduleName: '访谈聆听与对话',
tagId: 'tag-3-1',
tagName: '内容策划',
subTagId: 'subtag-3-1-1',
subTagName: '设备准备',
type: 'video',
videoUrl: '/video/访谈设备准备.mp4'
},
{
id: 'res-18',
title: '访谈选题方法',
description: '如何选择访谈主题',
moduleId: 'module-3',
moduleName: '访谈聆听与对话',
tagId: 'tag-3-1',
tagName: '内容策划',
subTagId: 'subtag-3-1-1',
subTagName: '选题与构思'
subTagId: 'subtag-3-1-2',
subTagName: '选题与构思',
type: 'video',
videoUrl: '/video/访谈选题方法.mp4'
},
{
id: 'res-13',
id: 'res-19',
title: '访谈脚本制作',
description: '访谈脚本撰写技巧',
moduleId: 'module-3',
moduleName: '访谈聆听与对话',
tagId: 'tag-3-1',
tagName: '内容策划',
subTagId: 'subtag-3-1-2',
subTagName: '脚本与分镜制作'
subTagId: 'subtag-3-1-3',
subTagName: '脚本与分镜制作',
type: 'video',
videoUrl: '/video/访谈脚本制作.mp4'
},
{
id: 'res-14',
id: 'res-20',
title: '访谈拍摄技巧',
description: '访谈视频拍摄方法',
moduleId: 'module-3',
moduleName: '访谈聆听与对话',
tagId: 'tag-3-2',
tagName: '拍摄执行'
tagName: '拍摄执行',
type: 'video',
videoUrl: '/video/访谈拍摄技巧.mp4'
},
// 电影创作与表达模块
{
id: 'res-15',
id: 'res-21',
title: '访谈后期剪辑',
description: '访谈视频后期制作',
moduleId: 'module-3',
moduleName: '访谈聆听与对话',
tagId: 'tag-3-3',
tagName: '后期制作',
type: 'video',
videoUrl: '/video/访谈后期剪辑.mp4'
},
{
id: 'res-22',
title: '访谈版权规范',
description: '访谈创作版权注意事项',
moduleId: 'module-3',
moduleName: '访谈聆听与对话',
tagId: 'tag-3-4',
tagName: 'AI与版权伦理知识',
type: 'video',
videoUrl: '/video/访谈版权规范.mp4'
},
{
id: 'res-23',
title: '访谈案例赏析',
description: '优秀访谈作品分析',
moduleId: 'module-3',
moduleName: '访谈聆听与对话',
tagId: 'tag-3-5',
tagName: '思路提点与案例赏析',
type: 'video',
videoUrl: '/video/访谈案例赏析.mp4'
},
// 电影创作与表达模块 - 使用统一标签体系
{
id: 'res-24',
title: '电影设备准备',
description: '电影拍摄设备清单',
moduleId: 'module-4',
@@ -176,10 +325,12 @@ export const resourceData: ResourceItem[] = [
tagId: 'tag-4-1',
tagName: '内容策划',
subTagId: 'subtag-4-1-1',
subTagName: '设备准备'
subTagName: '设备准备',
type: 'page',
routeName: 'FilmResource'
},
{
id: 'res-16',
id: 'res-25',
title: '电影选题构思',
description: '电影创作选题方法',
moduleId: 'module-4',
@@ -187,10 +338,12 @@ export const resourceData: ResourceItem[] = [
tagId: 'tag-4-1',
tagName: '内容策划',
subTagId: 'subtag-4-1-2',
subTagName: '选题与构思'
subTagName: '选题与构思',
type: 'video',
videoUrl: '/video/电影选题构思.mp4'
},
{
id: 'res-17',
id: 'res-26',
title: '电影脚本分镜',
description: '电影脚本和分镜制作',
moduleId: 'module-4',
@@ -198,43 +351,53 @@ export const resourceData: ResourceItem[] = [
tagId: 'tag-4-1',
tagName: '内容策划',
subTagId: 'subtag-4-1-3',
subTagName: '脚本与分镜制作'
subTagName: '脚本与分镜制作',
type: 'video',
videoUrl: '/video/电影脚本分镜.mp4'
},
{
id: 'res-18',
id: 'res-27',
title: '电影拍摄执行',
description: '电影拍摄执行技巧',
moduleId: 'module-4',
moduleName: '电影创作与表达',
tagId: 'tag-4-2',
tagName: '拍摄执行'
tagName: '拍摄执行',
type: 'video',
videoUrl: '/video/电影拍摄执行.mp4'
},
{
id: 'res-19',
id: 'res-28',
title: '电影后期制作',
description: '电影后期剪辑与特效',
moduleId: 'module-4',
moduleName: '电影创作与表达',
tagId: 'tag-4-3',
tagName: '后期制作'
tagName: '后期制作',
type: 'video',
videoUrl: '/video/电影后期制作.mp4'
},
{
id: 'res-20',
title: 'AI与版权伦理',
description: 'AI工具使用与版权规范',
id: 'res-29',
title: '电影AI工具应用',
description: 'AI工具在电影创作中的应用',
moduleId: 'module-4',
moduleName: '电影创作与表达',
tagId: 'tag-4-4',
tagName: 'AI与版权伦理知识'
tagName: 'AI与版权伦理知识',
type: 'video',
videoUrl: '/video/电影AI工具应用.mp4'
},
{
id: 'res-21',
title: '创作思路与案例',
id: 'res-30',
title: '电影创作思路与案例',
description: '电影创作思路和案例分析',
moduleId: 'module-4',
moduleName: '电影创作与表达',
tagId: 'tag-4-5',
tagName: '思路提点与案例赏析'
tagName: '思路提点与案例赏析',
type: 'video',
videoUrl: '/video/电影创作思路与案例.mp4'
}
]