feat: 完善课程引导与实战评价体验

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

src/views/film/practice/index.vue

@@ -4,7 +4,7 @@ import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import { StarRating } from '@/components/Rating'
 import { useRouter } from 'vue-router'
-import BackToTopIcon from '@/assets/svg/back-to-top.svg'
+import BackToTopIcon from '@/assets/images/components/置顶.png'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { useFilmStore } from '@/stores/modules/film'
 
@@ -26,7 +26,9 @@ const isLastPage = computed<boolean>(() => currentPage.value >= TOTAL_PAGES - 1)
 
 /** 是否正在从第二页回到第一页 */
 const isScrollingBackToFirst = computed<boolean>(() => {
-  return isAnimating.value && currentPage.value === 1 && animatingToPage.value === 0
+  return (
+    isAnimating.value && currentPage.value === 1 && animatingToPage.value === 0
+  )
 })
 
 /** 第一页坐着的人物是否显示 */
@@ -42,7 +44,7 @@ const guideKeyPrefix = 'film-practice-page'
 const steps = ref([
   '欢迎来到实战操作台！ 这里的内容很丰富，滚动鼠标就能浏览到全部内容啦~',
   '点击【我的创作笔记】，编写创作思路～',
-  '点击【查看】按钮，欣赏他人实战作品～'
+  '点击【查看】按钮，欣赏他人实战作品～',
 ])
 
 const currentGuideKey = computed(() => `${guideKeyPrefix}-${currentPage.value}`)
@@ -75,8 +77,8 @@ const worksList = ref<WorkItem[]>([
     stars: 4,
     path: '/video/film/practice/film_anli1.mp4',
     description:
-      '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介'
-  }
+      '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介',
+  },
 ])
 
 /** 左滑动作品列表 */
@@ -168,18 +170,44 @@ const handleWheel = (event: WheelEvent): void => {
   }
 }
 
+const restoreScrollPage = (): void => {
+  const savedPage = filmStore.practiceScrollPage
+  const targetPage = Math.max(0, Math.min(savedPage, TOTAL_PAGES - 1))
+
+  currentPage.value = targetPage
+  animatingToPage.value = targetPage
+  requestAnimationFrame(() => {
+    if (containerRef.value) {
+      containerRef.value.scrollTop = targetPage * PAGE_HEIGHT
+    }
+  })
+}
+
+const saveScrollPage = (): void => {
+  const page = containerRef.value
+    ? Math.round(containerRef.value.scrollTop / PAGE_HEIGHT)
+    : currentPage.value
+  const targetPage = Math.max(0, Math.min(page, TOTAL_PAGES - 1))
+  filmStore.setPracticeScrollPage(targetPage)
+}
+
 onMounted(() => {
+  restoreScrollPage()
   showPageGuide()
   containerRef.value?.addEventListener('wheel', handleWheel, { passive: false })
 })
 
 onUnmounted(() => {
+  saveScrollPage()
   containerRef.value?.removeEventListener('wheel', handleWheel)
 })
 </script>
 
 <template>
-  <div ref="containerRef" class="w-full h-full overflow-auto">
+  <div
+    ref="containerRef"
+    class="w-full h-full overflow-auto"
+  >
     <div class="relative min-h-full overflow-hidden">
       <!-- 关闭 -->
       <ImgButton
@@ -188,16 +216,19 @@ onUnmounted(() => {
         @click="handleClose"
       />
       <!-- 实战操作台 -->
-      <div
-        class="w-full h-[1080px] bg-cover bg-no-repeat relative"
-        :style="{ backgroundImage: getBackgroundImage('film/practice/实战操作台首页- 电影感') }"
-      >
+      <div class="w-full h-[1080px] bg-[#F5EFE6] relative">
         <ImgButton
-          class="absolute left-40 bottom-28 z-10"
+          class="absolute left-40 bottom-14 z-10"
           image="vlog/practice/查看任务要求"
           @click="scrollToNextPage"
         />
         <!-- img -->
+        <img
+          class="absolute left-0 top-0 z-10"
+          draggable="false"
+          :src="getStaticImage('film/practice/电影')"
+          alt=""
+        />
         <img
           class="absolute right-0"
           draggable="false"
@@ -212,12 +243,18 @@ onUnmounted(() => {
       >
         <ImgButton
           class="absolute right-20 bottom-0 z-99"
-          image="vlog/practice/我的创作笔记"
+          image="vlog/practice/我的创作笔记btn"
           path="/film/practice/my-notes"
         />
 
-        <div class="task-panel w-[757px] h-full ml-10 overflow-y-auto" @wheel.stop>
-          <img :src="getStaticImage('film/practice/滑动任务面板-电影感')" alt="" />
+        <div
+          class="task-panel w-[757px] h-full ml-10 overflow-y-auto"
+          @wheel.stop
+        >
+          <img
+            :src="getStaticImage('film/practice/任务要求')"
+            alt=""
+          />
         </div>
 
         <img
@@ -239,7 +276,9 @@ onUnmounted(() => {
       <!-- 他人实战作品 -->
       <div
         class="w-full h-[1080px] bg-cover bg-no-repeat pt-44 px-16"
-        :style="{ backgroundImage: getBackgroundImage('vlog/practice/他人实战作品') }"
+        :style="{
+          backgroundImage: getBackgroundImage('vlog/practice/他人实战作品'),
+        }"
       >
         <!-- 作品列表 -->
         <div class="w-full overflow-hidden">
@@ -254,15 +293,27 @@ onUnmounted(() => {
             >
               <!-- 作品图片 -->
               <div class="w-full h-[280px] rounded-2xl overflow-hidden">
-                <img class="w-full h-full object-cover" :src="work.image" :alt="work.title" />
+                <img
+                  class="w-full h-full object-cover"
+                  :src="work.image"
+                  :alt="work.title"
+                />
               </div>
               <!-- 作品信息 -->
               <div class="flex flex-col items-center pt-8 space-y-4">
-                <h3 class="text-5xl font-bold text-gray-800 mb-2">{{ work.title }}</h3>
+                <h3 class="text-5xl font-bold text-gray-800 mb-2">
+                  {{ work.title }}
+                </h3>
                 <!-- 星星评分 -->
-                <StarRating :score="work.stars" size="lg" readonly />
+                <StarRating
+                  :score="work.stars"
+                  size="lg"
+                  readonly
+                />
                 <!-- 简介 -->
-                <p class="h-[110px] text-2xl text-gray-600 mb-3 line-clamp-3 leading-relaxed">
+                <p
+                  class="h-[110px] text-2xl text-gray-600 mb-3 line-clamp-3 leading-relaxed"
+                >
                   {{ work.description }}
                 </p>
                 <!-- 查看按钮 -->
@@ -275,7 +326,7 @@ onUnmounted(() => {
           </div>
         </div>
 
-        <!-- 指示按钮 -->
+        <!-- 指示按钮，暂时不要
         <div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex gap-16">
           <img
             class="cursor-pointer hover:scale-110 transition-transform"
@@ -286,19 +337,23 @@ onUnmounted(() => {
           />
           <img
             class="cursor-pointer hover:scale-110 transition-transform rotate-180"
-            :class="{ 'opacity-50 cursor-not-allowed': worksScrollIndex >= worksList.length - 3 }"
+            :class="{
+              'opacity-50 cursor-not-allowed':
+                worksScrollIndex >= worksList.length - 3,
+            }"
             :src="getStaticImage('vlog/practice/滑动左')"
             alt="向右"
             @click="scrollWorksRight"
           />
         </div>
+        -->
       </div>
     </div>
 
     <!-- 下滑按钮 - 最后一页隐藏 -->
     <ImgButton
       v-show="!isLastPage"
-      class="absolute bottom-0 left-1/2 -translate-x-1/2"
+      class="absolute bottom-0 left-1/2 down-scroll-hint"
       :image="'vlog/practice/下滑'"
       @click="scrollToNextPage"
     />
@@ -306,13 +361,16 @@ onUnmounted(() => {
     <!-- 回到顶部按钮 - 最后一页显示 -->
     <img
       v-show="isLastPage"
-      class="absolute bottom-10 right-10 cursor-pointer transition-all duration-300 hover:scale-105"
+      class="absolute bottom-10 left-1/2 -translate-x-1/2 cursor-pointer transition-all duration-300 hover:scale-105"
       :src="BackToTopIcon"
       @click="scrollToTop"
     />
 
     <!-- 跨页人物动画 -->
-    <div v-show="showSittingPerson || isScrollingBackToFirst" class="character-container">
+    <div
+      v-show="showSittingPerson || isScrollingBackToFirst"
+      class="character-container"
+    >
       <!-- 坐着的人物 - 第一页 -->
       <Transition name="fade">
         <img
@@ -335,7 +393,11 @@ onUnmounted(() => {
       </Transition>
     </div>
 
-    <GuideSteps v-if="visible" position-offset-y="70%" @complete="visible = false">
+    <GuideSteps
+      v-if="visible"
+      position-offset-y="70%"
+      @complete="visible = false"
+    >
       <GuideStepsItem>{{ contentSteps }}</GuideStepsItem>
     </GuideSteps>
   </div>
@@ -355,6 +417,22 @@ onUnmounted(() => {
   /* Chrome/Safari/Opera */
 }
 
+.down-scroll-hint {
+  transform: translateX(-50%);
+  animation: down-scroll-hint 1.4s ease-in-out infinite;
+}
+
+@keyframes down-scroll-hint {
+  0%,
+  100% {
+    transform: translate(-50%, 0);
+  }
+
+  50% {
+    transform: translate(-50%, 12px);
+  }
+}
+
 /* 第一页人物动画容器 */
 .character-container {
   position: fixed;

src/views/film/practice/my-notes/index.vue

@@ -3,8 +3,9 @@ import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
-import { Overlay } from '@/components/Overlay'
-import { StarRating } from '@/components/Rating'
+import PracticeRatingModal, {
+  type PracticeRatingItem,
+} from '@/components/PracticeRatingModal'
 
 const router = useRouter()
 
@@ -21,42 +22,33 @@ const handleBack = (): void => {
 
 const disabled = computed<boolean>(() => noteContent.value.trim() === '')
 
-interface EvaluationItem {
-  /** 标题 */
-  title: string
-  /** 描述 */
-  description: string
-  /** 评分 */
-  score: number
-}
-
 /** 评估项目列表 */
-const evaluationItems = ref<EvaluationItem[]>([
+const evaluationItems = ref<PracticeRatingItem[]>([
   {
     title: '画面氛围',
     description: '画面具有明确情绪或空间气质，整体风格统一',
-    score: 4
+    score: 4,
   },
   {
     title: '拍摄方法',
     description: '拍摄方式选择合理，镜头语言服务于画面表达',
-    score: 2
+    score: 2,
   },
   {
     title: '剪辑逻辑',
     description: '剪辑节奏清晰，镜头衔接自然，有整体感',
-    score: 5
+    score: 5,
   },
   {
     title: '创作意识',
     description: '能体现主动构思，而非随拍拼接',
-    score: 0
+    score: 0,
   },
   {
     title: '综合观感',
     description: '作品具有“电影感”，完成度高',
-    score: 5
-  }
+    score: 5,
+  },
 ])
 const handleSave = (): void => {
   console.log('保存笔记')
@@ -67,7 +59,9 @@ const handleSave = (): void => {
 <template>
   <div
     class="w-full h-full bg-no-repeat bg-cover px-8 pt-[400px]"
-    :style="{ backgroundImage: getBackgroundImage('film/practice/创作笔记底图-电影感') }"
+    :style="{
+      backgroundImage: getBackgroundImage('film/practice/我的创作笔记'),
+    }"
   >
     <ImgButton
       class="absolute top-0 right-0"
@@ -83,53 +77,25 @@ const handleSave = (): void => {
     ></textarea>
 
     <div class="absolute bottom-24 left-1/2 -translate-x-1/2 flex gap-60">
-      <ImgButton image="vlog/practice/保存" @click="handleSave" />
-      <ImgButton image="vlog/practice/自评" :disabled="disabled" @click="showModal = true" />
+      <ImgButton
+        image="vlog/practice/保存"
+        @click="handleSave"
+      />
+      <ImgButton
+        image="vlog/practice/自评"
+        :disabled="disabled"
+        @click="showModal = true"
+      />
     </div>
 
-    <!-- 保存图片弹窗 -->
-    <Overlay :visible="showModal" :clickable="false">
-      <div
-        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[100px]"
-        :style="{ backgroundImage: getBackgroundImage('film/practice/评分底板-电影感') }"
-      >
-        <ImgButton
-          class="absolute -top-8 -right-14 z-10"
-          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
-          @click="showModal = false"
-        />
-
-        <div class="relative h-full overflow-y-scroll px-8">
-          <div class="pl-10 space-y-10 mt-10">
-            <p class="glow-text">
-              评分时要关注5个维度哦～每个维度满分5分，能打1-5分，记得对照作品表现来打分呀～
-            </p>
-            <div
-              v-for="(item, index) in evaluationItems"
-              :key="index"
-              class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
-              :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
-            >
-              <div class="pr-8 space-y-10">
-                <h4 class="text-3xl font-bold text-white mb-3">
-                  {{ `0${index + 1}` }} {{ item.title }}
-                </h4>
-                <p class="text-3xl text-gray-800 font-bold leading-relaxed">
-                  {{ item.description }}
-                </p>
-              </div>
-              <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
-            </div>
-            <p class="glow-text">
-              己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～
-            </p>
-            <div class="w-full flex justify-center">
-              <ImgButton image="vlog/practice/保存" @click="showModal = false" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </Overlay>
+    <PracticeRatingModal
+      :visible="showModal"
+      :items="evaluationItems"
+      background-image="film/practice/电影感短视频创作-作品评分表"
+      top-tip="评分时要关注5个维度哦～分别是画面氛围、抽摄方法、剪辑逻辑、创作意识、综合观感，每个维度满分5分，能打1-5分，记得对照作品表现来打分呀～"
+      bottom-tip="己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～"
+      @close="showModal = false"
+    />
   </div>
 </template>
 
@@ -146,25 +112,4 @@ textarea::placeholder {
   color: #5d5b5b;
   font-weight: 700;
 }
-
-.glow-text {
-  color: white;
-  font-size: 2rem;
-  font-weight: bold;
-  text-shadow:
-    /* 描边效果 - 多层阴影模拟描边 */
-    -1px -1px 0 #0066ff,
-    1px -1px 0 #0066ff,
-    -1px 1px 0 #0066ff,
-    1px 1px 0 #0066ff,
-    -2px -2px 0 #0066ff,
-    2px -2px 0 #0066ff,
-    -2px 2px 0 #0066ff,
-    2px 2px 0 #0066ff,
-    /* 发光效果 - 蓝色光晕 */ 0 0 10px #0066ff,
-    0 0 20px #0066ff,
-    0 0 30px #0066ff,
-    0 0 40px #0066ff,
-    0 0 50px #0066ff;
-}
 </style>

src/views/film/practice/video/index.vue

@@ -2,9 +2,10 @@
 import { useRouter } from 'vue-router'
 import { Video } from '@/components'
 import { ImgButton } from '@/components/Button'
-import { StarRating } from '@/components/Rating'
-import { IMAGE_PATHS, getBackgroundImage, getPublicPath } from '@/utils'
-import { Overlay } from '@/components/Overlay'
+import PracticeRatingModal, {
+  type PracticeRatingItem,
+} from '@/components/PracticeRatingModal'
+import { IMAGE_PATHS, getPublicPath } from '@/utils'
 import { ref } from 'vue'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { useFilmStore } from '@/stores/modules/film'
@@ -20,46 +21,37 @@ if (showGuide.value) {
 const props = defineProps({
   path: {
     type: String,
-    required: true
-  }
+    required: true,
+  },
 })
 
-interface EvaluationItem {
-  /** 标题 */
-  title: string
-  /** 描述 */
-  description: string
-  /** 评分 */
-  score: number
-}
-
 /** 评估项目列表 */
-const evaluationItems = ref<EvaluationItem[]>([
+const evaluationItems = ref<PracticeRatingItem[]>([
   {
-    title: '主题与内容',
-    description: '主题明确聚焦"身边美好"，内容真实、有感染力，能让观众感受到日常闪光',
-    score: 3
+    title: '画面氛围',
+    description: '画面具有明确情绪或空间气质，整体风格统一',
+    score: 4,
   },
   {
-    title: '拍摄技巧',
-    description: '运镜自然、光线运用合理、画面清晰饱和度、能辅助主题表达（至少1种运镜+1种光线）',
-    score: 4
+    title: '拍摄方法',
+    description: '拍摄方式选择合理，镜头语言服务于画面表达',
+    score: 2,
   },
   {
-    title: '剪辑与包装',
-    description: '素材拼接流畅，调色/滤镜适配、字幕清晰、音乐不盖人声、整体风格统一',
-    score: 5
+    title: '剪辑逻辑',
+    description: '剪辑节奏清晰，镜头衔接自然，有整体感',
+    score: 5,
   },
   {
-    title: '创意与独特性',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”,避免平淡复刻',
-    score: 4
+    title: '创作意识',
+    description: '能体现主动构思，而非随拍拼接',
+    score: 0,
   },
   {
-    title: '综合感受',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”避免平淡复刻',
-    score: 5
-  }
+    title: '综合观感',
+    description: '作品具有“电影感”，完成度高',
+    score: 5,
+  },
 ])
 
 /** 保存弹窗 */
@@ -91,49 +83,19 @@ const handleBack = (): void => {
       :loop="false"
     />
 
-    <!-- 保存图片弹窗 -->
-    <Overlay :visible="showModal" :clickable="false">
-      <div
-        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[80px]"
-        :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分底板') }"
-      >
-        <ImgButton
-          class="absolute -top-8 -right-14 z-10"
-          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
-          @click="showModal = false"
-        />
-
-        <div class="relative h-full overflow-y-scroll px-8">
-          <div
-            class="w-full bg-no-repeat bg-cover bg-left py-44"
-            :style="{ backgroundImage: getBackgroundImage('vlog/practice/滑动表内文字') }"
-          >
-            <div class="pl-10 space-y-16">
-              <div
-                v-for="(item, index) in evaluationItems"
-                :key="index"
-                class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
-                :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
-              >
-                <div class="pr-8 space-y-10">
-                  <h4 class="text-3xl font-bold text-white mb-3">
-                    {{ `0${index + 1}` }} {{ item.title }}
-                  </h4>
-                  <p class="text-3xl text-gray-800 font-bold leading-relaxed">
-                    {{ item.description }}
-                  </p>
-                </div>
-                <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
-              </div>
-              <div class="w-full flex justify-center">
-                <ImgButton image="vlog/practice/保存" @click="showModal = false" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Overlay>
-    <GuideSteps :visible="showGuide" :highlight-selector="'.btn-1'" position-offset-y="60%">
+    <PracticeRatingModal
+      :visible="showModal"
+      :items="evaluationItems"
+      background-image="film/practice/电影感短视频创作-作品评分表"
+      top-tip="评分时要关注5个维度哦～分别是画面氛围、抽摄方法、剪辑逻辑、创作意识、综合观感，每个维度满分5分，能打1-5分，记得对照作品表现来打分呀～"
+      bottom-tip="己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～"
+      @close="showModal = false"
+    />
+    <GuideSteps
+      :visible="showGuide"
+      :highlight-selector="'.btn-1'"
+      position-offset-y="60%"
+    >
       <GuideStepsItem>点击这里可以给作品评分噢～</GuideStepsItem>
     </GuideSteps>
   </div>