forked from zhongyidian/super_video
feat: 完善模块引导与学习进度体验
统一引导提示的持久化控制,补充学习进度入口与模块资源,避免用户返回页面时重复触发提示。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
fc9633f371
commit
6f8252472f
114 files changed
+2758
-1798
No files matched your search
@@ -1,12 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
||||
import { GuideSteps, type GuideStep } from '@/components/Guide'
|
||||
import { Video } from '@/components'
|
||||
import { useFilmStore } from '@/stores'
|
||||
|
||||
const router = useRouter()
|
||||
const film = useFilmStore()
|
||||
|
||||
const handleClose = () => {
|
||||
router.back()
|
||||
@@ -47,6 +49,33 @@ const goAssociation = () => {
|
||||
const goContinuity = () => {
|
||||
router.push({ name: 'FilmEditingContinuity' })
|
||||
}
|
||||
|
||||
// 6 个剪辑子视频学习完成后的一次性引导
|
||||
const editingCompleteSteps: GuideStep[] = [
|
||||
{
|
||||
id: 'editing-complete-step1',
|
||||
content:
|
||||
'刚才我们提到的剪辑方式,并不是孤立存在的技巧,而是针对不同问题的解决方案。所以,理解剪辑逻辑才是最重要的!',
|
||||
audioSrc: getPublicPath('audio/py_4_018.MP3')
|
||||
}
|
||||
]
|
||||
|
||||
const showEditingCompleteGuide = ref(false)
|
||||
|
||||
watch(
|
||||
() => film.allEditingVideosWatched,
|
||||
watched => {
|
||||
if (watched && film.isGuideFilmEditingComplete) {
|
||||
showEditingCompleteGuide.value = true
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const handleEditingCompleteGuideDone = () => {
|
||||
showEditingCompleteGuide.value = false
|
||||
film.setIsGuideFilmEditingComplete(false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -157,9 +186,14 @@ const goContinuity = () => {
|
||||
@click="handleClose"
|
||||
/>
|
||||
|
||||
<GuideSteps :visible="true" position-offset-y="85%">
|
||||
<GuideStepsItem>选择任意图片按钮,进入对应拍摄场景!</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
<!-- 6 个剪辑视频学完后的一次性引导 -->
|
||||
<GuideSteps
|
||||
v-if="showEditingCompleteGuide"
|
||||
:steps="editingCompleteSteps"
|
||||
position-offset-y="85%"
|
||||
@complete="handleEditingCompleteGuideDone"
|
||||
@skip="handleEditingCompleteGuideDone"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in new issue
Block a user