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

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

src/components/PracticeRatingModal/index.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { StarRating } from '@/components/Rating'
+import { IMAGE_PATHS, getBackgroundImage } from '@/utils'
+import type { PracticeRatingItem } from './types'
+
+interface Props {
+  visible: boolean
+  items: PracticeRatingItem[]
+  backgroundImage: string
+  topTip?: string
+  bottomTip?: string
+  itemBackground?: string
+  saveButtonImage?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  itemBackground: 'vlog/practice/评分条',
+  saveButtonImage: 'vlog/practice/保存',
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const hasTips = computed<boolean>(() =>
+  Boolean(props.topTip || props.bottomTip),
+)
+</script>
+
+<template>
+  <Overlay
+    :visible="visible"
+    :clickable="false"
+  >
+    <div
+      class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[100px]"
+      :style="{ backgroundImage: getBackgroundImage(backgroundImage) }"
+    >
+      <ImgButton
+        class="absolute -top-8 -right-14 z-10"
+        :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+        @click="emit('close')"
+      />
+
+      <div class="relative h-full overflow-y-scroll px-8">
+        <div class="pl-10 space-y-10 mt-10">
+          <p
+            v-if="topTip"
+            class="glow-text"
+          >
+            {{ topTip }}
+          </p>
+          <div
+            v-for="(item, index) in items"
+            :key="index"
+            class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
+            :style="{ backgroundImage: getBackgroundImage(itemBackground) }"
+          >
+            <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
+            v-if="bottomTip"
+            class="glow-text"
+          >
+            {{ bottomTip }}
+          </p>
+          <div
+            class="w-full flex justify-center"
+            :class="{ 'mt-16': !hasTips }"
+          >
+            <ImgButton
+              :image="saveButtonImage"
+              @click="emit('close')"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Overlay>
+</template>
+
+<style scoped>
+.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>