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

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

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>