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
@@ -6,8 +6,10 @@ import { StarRating } from '@/components/Rating'
|
||||
import { useRouter } from 'vue-router'
|
||||
import BackToTopIcon from '@/assets/svg/back-to-top.svg'
|
||||
import { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
||||
import { useFilmStore } from '@/stores/modules/film'
|
||||
|
||||
const router = useRouter()
|
||||
const filmStore = useFilmStore()
|
||||
|
||||
const TOTAL_PAGES = 3
|
||||
const PAGE_HEIGHT = 1080
|
||||
@@ -34,6 +36,7 @@ const showSittingPerson = computed<boolean>(() => {
|
||||
})
|
||||
|
||||
const visible = ref<boolean>(false)
|
||||
const guideKeyPrefix = 'film-practice-page'
|
||||
|
||||
//每一页的引导词
|
||||
const steps = ref([
|
||||
@@ -42,10 +45,18 @@ const steps = ref([
|
||||
'点击【查看】按钮,欣赏他人实战作品~'
|
||||
])
|
||||
|
||||
const currentGuideKey = computed(() => `${guideKeyPrefix}-${currentPage.value}`)
|
||||
|
||||
const contentSteps = computed(() => {
|
||||
return steps.value[currentPage.value]
|
||||
})
|
||||
|
||||
const showPageGuide = (): void => {
|
||||
if (filmStore.guideShown[currentGuideKey.value]) return
|
||||
visible.value = true
|
||||
filmStore.markGuideShown(currentGuideKey.value)
|
||||
}
|
||||
|
||||
/** 他人实战作品列表 */
|
||||
interface WorkItem {
|
||||
id: number
|
||||
@@ -62,7 +73,7 @@ const worksList = ref<WorkItem[]>([
|
||||
image: getStaticImage('film/practice/学生案例'),
|
||||
title: '学生案例',
|
||||
stars: 4,
|
||||
path: '/video/practice/film_anli1.mp4',
|
||||
path: '/video/film/practice/film_anli1.mp4',
|
||||
description:
|
||||
'作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介'
|
||||
}
|
||||
@@ -115,7 +126,7 @@ const smoothScrollTo = (toPage: number): void => {
|
||||
} else {
|
||||
isAnimating.value = false
|
||||
currentPage.value = toPage
|
||||
visible.value = true
|
||||
showPageGuide()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -158,7 +169,7 @@ const handleWheel = (event: WheelEvent): void => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
visible.value = true
|
||||
showPageGuide()
|
||||
containerRef.value?.addEventListener('wheel', handleWheel, { passive: false })
|
||||
})
|
||||
|
||||
@@ -333,11 +344,15 @@ onUnmounted(() => {
|
||||
<style scoped>
|
||||
/* 隐藏滚动条但保持可滚动 - 兼容主流浏览器 */
|
||||
.task-panel {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
-ms-overflow-style: none;
|
||||
/* IE/Edge */
|
||||
}
|
||||
|
||||
.task-panel::-webkit-scrollbar {
|
||||
display: none; /* Chrome/Safari/Opera */
|
||||
display: none;
|
||||
/* Chrome/Safari/Opera */
|
||||
}
|
||||
|
||||
/* 第一页人物动画容器 */
|
||||
|
||||
Reference in new issue
Block a user