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

chore: bypass pre-commit for now

Browse Source
This commit is contained in:
zhongyingmin committed 2025-09-26 00:11:15 +08:00
1 parent 10e97670a5
commit c4ba322e32
76 files changed
+2253 -218
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/skill/index.vue
+243 -34
View File
@@ -13,17 +13,156 @@ const sideStatus = ref(true)
const status = ref(false)
// const selectedButton = ref('拍摄基础')
// //按钮 {key: '拍摄基础', value: '拍摄基础'}
// const buttons = ref([
// { key: '拍摄基础', value: '拍摄基础' },
// { key: '内容策划', value: '内容策划' },
// { key: '拍摄执行', value: '拍摄执行' },
// { key: '后期制作', value: '后期制作' },
// { key: '版权伦理意识', value: '版权伦理意识' }
// ])
const selectedModule = ref(1)
const selectedCategory = ref('') // 新增：选中的分类
// 预留：按钮选中状态（如需启用再恢复逻辑）
// 新增：分类配置类型定义
interface CategoryConfig {
icons: string[]
positions: { top: string; left: string }[]
}
// 新增：模块配置类型定义
interface ModuleConfig {
name: string
value: number
categories: Record<string, CategoryConfig>
}
const moduleList = ref<ModuleConfig[]>([
{
name: '技能书-新手启航',
value: 1,
categories: {
拍摄基础: {
icons: ['skill/画面构图选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
positions: [
{ top: '25%', left: '25%' },
{ top: '15%', left: '34%' },
{ top: '20%', left: '45%' },
{ top: '28%', left: '58%' }
]
},
内容策划: {
icons: ['skill/画面构图选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
positions: [
{ top: '25%', left: '25%' },
{ top: '15%', left: '34%' },
{ top: '20%', left: '45%' },
{ top: '28%', left: '58%' }
]
},
拍摄执行: {
icons: ['skill/画面构图选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
positions: [
{ top: '25%', left: '25%' },
{ top: '15%', left: '34%' },
{ top: '20%', left: '45%' },
{ top: '28%', left: '58%' }
]
},
后期制作: {
icons: ['skill/画面构图选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
positions: [
{ top: '25%', left: '25%' },
{ top: '15%', left: '34%' },
{ top: '20%', left: '45%' },
{ top: '28%', left: '58%' }
]
},
版权伦理意识: {
icons: ['skill/画面构图选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
positions: [
{ top: '25%', left: '25%' },
{ top: '15%', left: '34%' },
{ top: '20%', left: '45%' },
{ top: '28%', left: '58%' }
]
}
}
},
{
name: '技能书-vlog',
value: 2,
categories: {
拍摄基础: {
icons: ['skill/画面构图选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
positions: [
{ top: '25%', left: '25%' },
{ top: '15%', left: '34%' },
{ top: '20%', left: '45%' },
{ top: '28%', left: '58%' }
]
},
内容策划: {
icons: ['skill/画面构图选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
positions: [
{ top: '25%', left: '25%' },
{ top: '15%', left: '34%' },
{ top: '20%', left: '45%' },
{ top: '28%', left: '58%' }
]
},
拍摄执行: {
icons: ['skill/画面构图选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
positions: [
{ top: '25%', left: '25%' },
{ top: '15%', left: '34%' },
{ top: '20%', left: '45%' },
{ top: '28%', left: '58%' }
]
},
后期制作: {
icons: ['skill/画面构图选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
positions: [
{ top: '25%', left: '25%' },
{ top: '15%', left: '34%' },
{ top: '20%', left: '45%' },
{ top: '28%', left: '58%' }
]
},
版权伦理意识: {
icons: ['skill/画面构图选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
positions: [
{ top: '25%', left: '25%' },
{ top: '15%', left: '34%' },
{ top: '20%', left: '45%' },
{ top: '28%', left: '58%' }
]
}
}
}
])
const currentModule = computed(() => {
return moduleList.value.find(item => item.value === selectedModule.value) || moduleList.value[0]
})
const nextModule = () => {
if (selectedModule.value === moduleList.value.length) {
selectedModule.value = 1
} else {
selectedModule.value++
}
// 切换模块时重置分类选择
if (selectedCategory.value) {
selectedCategory.value = ''
sideStatus.value = true
}
}
const prevModule = () => {
if (selectedModule.value === 1) {
selectedModule.value = moduleList.value.length
} else {
selectedModule.value--
}
// 切换模块时重置分类选择
if (selectedCategory.value) {
selectedCategory.value = ''
sideStatus.value = true
}
}
//引导步骤
const steps = [
@@ -39,9 +178,9 @@ const currentHighlight = computed(() =>
stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
)
const selectedImage = computed(() => {
return selected.value ? 'skill/画面构图选中' : 'skill/画面构图未选中'
})
// const selectedImage = computed(() => {
// return selected.value ? 'skill/画面构图选中' : 'skill/画面构图未选中'
// })
interface SimpleStep {
id: string
@@ -53,7 +192,13 @@ const handleStepChange = (_step: SimpleStep | null, index: number) => {
}
const handleClose = () => {
router.back()
// 如果当前在分类选中状态，则退出选中回到主视图
if (selectedCategory.value) {
handleBackToMain()
} else {
// 否则退出页面
router.back()
}
}
const handleClick = () => {
@@ -63,6 +208,29 @@ const handleClick = () => {
})
}
// 新增：处理分类点击事件
const handleCategoryClick = (categoryName: string) => {
selectedCategory.value = categoryName
sideStatus.value = false // 隐藏其他模块标签
}
// 新增：返回主视图
const handleBackToMain = () => {
selectedCategory.value = ''
sideStatus.value = true
}
// 新增：获取当前分类的配置
const currentCategoryConfig = computed(() => {
if (!selectedCategory.value) return null
return currentModule.value.categories[selectedCategory.value] || null
})
// 新增：返回按钮提示文本
const backButtonTooltip = computed(() => {
return selectedCategory.value ? '返回主视图' : '退出页面'
})
setTimeout(() => {
status.value = true
}, 1000)
@@ -76,17 +244,26 @@ setTimeout(() => {
:style="{ backgroundImage: getBackgroundImage('skill/技能树背景') }"
></div>
<ImgButton class="absolute left-0 top-1/2 -translate-y-1/2" :image="'skill/左滑'"> </ImgButton>
<ImgButton
@click="prevModule"
class="absolute left-0 top-1/2 -translate-y-1/2"
:image="'skill/左滑'"
>
</ImgButton>
<ImgButton
@click="sideStatus = false"
@click="nextModule"
class="absolute right-0 top-1/2 -translate-y-1/2"
:image="'skill/右滑'"
>
</ImgButton>
<!-- 周围模块标签（静态绘制） -->
<div v-show="sideStatus" class="module module-left-bottom module-vertical">
<div
v-show="sideStatus || selectedCategory === '拍摄基础'"
class="module module-left-bottom module-vertical"
@click="handleCategoryClick('拍摄基础')"
>
<div
:class="['module-text blue-text', status ? 'text-white' : 'text-[#969696e6_!important]']"
>
@@ -95,7 +272,11 @@ setTimeout(() => {
<div :class="['module-percent', status ? 'red-text' : 'blue-text']">0%</div>
</div>
<div v-show="sideStatus" class="module module-left-middle module-vertical">
<div
v-show="sideStatus || selectedCategory === '内容策划'"
class="module module-left-middle module-vertical"
@click="handleCategoryClick('内容策划')"
>
<div
:class="['module-text blue-text', status ? 'text-white' : 'text-[#969696e6_!important]']"
>
@@ -104,7 +285,11 @@ setTimeout(() => {
<div :class="['module-percent', status ? 'red-text' : 'blue-text']">0%</div>
</div>
<div v-show="!sideStatus" class="module module-right-middle module-vertical">
<div
v-show="sideStatus || selectedCategory === '拍摄执行'"
class="module module-right-middle module-vertical"
@click="handleCategoryClick('拍摄执行')"
>
<div
:class="['module-text blue-text', status ? 'text-white' : 'text-[#969696e6_!important]']"
>
@@ -113,7 +298,11 @@ setTimeout(() => {
<div :class="['module-percent', status ? 'red-text' : 'blue-text']">0%</div>
</div>
<div v-show="sideStatus" class="module module-right-upper module-vertical">
<div
v-show="sideStatus || selectedCategory === '后期制作'"
class="module module-right-upper module-vertical"
@click="handleCategoryClick('后期制作')"
>
<div
:class="['module-text blue-text', status ? 'text-white' : 'text-[#969696e6_!important]']"
>
@@ -122,7 +311,11 @@ setTimeout(() => {
<div :class="['module-percent', status ? 'red-text' : 'blue-text']">0%</div>
</div>
<div v-show="sideStatus" class="module module-right-far module-vertical">
<div
v-show="sideStatus || selectedCategory === '版权伦理意识'"
class="module module-right-far module-vertical"
@click="handleCategoryClick('版权伦理意识')"
>
<div
:class="['module-text blue-text', status ? 'text-white' : 'text-[#969696e6_!important]']"
>
@@ -131,21 +324,27 @@ setTimeout(() => {
<div :class="['module-percent', status ? 'red-text' : 'blue-text']">0%</div>
</div>
<!-- 画面构图 -->
<ImgButton
v-show="!sideStatus"
@click="handleClick"
class="absolute top-[38%] left-[23%] z-10"
:image="selectedImage"
/>
<!-- 动态显示分类对应的icon -->
<template v-if="currentCategoryConfig">
<ImgButton
v-for="(icon, index) in currentCategoryConfig.icons"
:key="index"
v-show="!sideStatus"
@click="handleClick"
class="absolute z-10"
:style="{
top: currentCategoryConfig.positions[index].top,
left: currentCategoryConfig.positions[index].left
}"
:image="icon"
/>
</template>
<!-- 景别 -->
<ImgButton v-show="!sideStatus" class="absolute top-[15%] left-[33%] z-10" image="skill/景别" />
<!-- 返回 -->
<!-- 返回按钮 -->
<ImgButton
class="absolute right-0 top-0"
:image="IMAGE_PATHS.COMPONENTS.BACK"
:title="backButtonTooltip"
@click="handleClose"
/>
@@ -161,12 +360,16 @@ setTimeout(() => {
<div class="absolute bottom-28 left-1/2 -translate-x-1/2">
<span class="blue-text tracking-[18px] text-5xl">
{{ !sideStatus ? '技能树-vlog' : '技能树-新手启航' }}
{{ selectedCategory || currentModule.name }}
</span>
</div>
<div class="absolute bottom-10 left-1/2 -translate-x-1/2">
<span class="red-text text-4xl">{{
status ? '当前尚未收集任何知识点,快去学习收集知识点吧' : '当前已全部解锁'
!status
? '当前尚未收集任何知识点,快去学习收集知识点吧'
: selectedCategory
? `当前${selectedCategory}模块已全部解锁`
: '当前已全部解锁'
}}</span>
</div>
@@ -219,6 +422,12 @@ setTimeout(() => {
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.module:hover {
transform: scale(1.05);
filter: brightness(1.2);
}
/* 竖排布局 */