feat: 完善视频学习进度缓存

完善新手导航和三大创作模块的视频完成缓存、未完成提示与学习进度计算，确保进度按实际学习资源完成情况更新。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 09:05:29 +08:00
1 parent 1f8723aabd
commit 6f289959be
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import { Overlay } from '@/components/Overlay'
+
+interface Props {
+  visible: boolean
+  message?: string
+  continueText?: string
+  leaveText?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  message: '当前页面还有学习资源没有学习完成，建议继续完成后再离开。',
+  continueText: '继续学习',
+  leaveText: '确认离开',
+})
+
+const emit = defineEmits<{
+  (e: 'continue'): void
+  (e: 'leave'): void
+}>()
+</script>
+
+<template>
+  <Overlay
+    :visible="visible"
+    :clickable="false"
+    background="rgba(80, 220, 255, 0.18)"
+    animation="zoom"
+    :z-index="3000"
+  >
+    <div
+      class="relative w-[860px] overflow-hidden rounded-[42px] border-[5px] border-white/80 bg-gradient-to-br from-[#e8fbff]/95 via-[#d8ddff]/95 to-[#ffd8f3]/95 px-16 py-14 text-center shadow-[0_24px_70px_rgba(48,122,255,0.32)]"
+    >
+      <div
+        class="pointer-events-none absolute -left-16 -top-20 h-56 w-56 rounded-full bg-[#5ff3ff]/55 blur-3xl"
+      />
+      <div
+        class="pointer-events-none absolute right-[-70px] top-[-60px] h-60 w-60 rounded-full bg-[#ff65d8]/45 blur-3xl"
+      />
+      <div
+        class="pointer-events-none absolute bottom-[-90px] left-1/2 h-64 w-64 -translate-x-1/2 rounded-full bg-[#ffe96b]/45 blur-3xl"
+      />
+      <div
+        class="pointer-events-none absolute inset-x-10 top-5 h-[3px] rounded-full bg-gradient-to-r from-transparent via-white to-transparent"
+      />
+
+      <div
+        class="relative mx-auto mb-7 flex h-24 w-24 items-center justify-center rounded-[30px] border-[4px] border-white bg-gradient-to-br from-[#36eaff] to-[#7b7cff] shadow-[0_12px_28px_rgba(54,234,255,0.38)] rotate-[-6deg]"
+      >
+        <span
+          class="text-[56px] font-black leading-none text-white drop-shadow-[0_4px_0_rgba(34,80,180,0.45)]"
+        >
+          !
+        </span>
+      </div>
+
+      <p
+        class="relative mx-auto mt-7 max-w-[650px] text-[34px] font-black leading-[1.65] text-[#294579]"
+      >
+        {{ message }}
+      </p>
+
+      <div class="relative mt-12 flex items-center justify-center gap-9">
+        <button
+          class="h-[76px] min-w-[220px] rounded-full border-[3px] border-[#78bfff] bg-white/70 px-10 text-[28px] font-black text-[#3470c8] shadow-[0_10px_0_rgba(70,139,220,0.22)] transition-all duration-200 hover:-translate-y-1 hover:bg-white active:translate-y-1 active:shadow-[0_5px_0_rgba(70,139,220,0.22)]"
+          @click="emit('leave')"
+        >
+          {{ leaveText }}
+        </button>
+
+        <button
+          class="h-[76px] min-w-[220px] rounded-full border-[3px] border-white bg-gradient-to-r from-[#ff82d8] via-[#ff9f4a] to-[#ffd447] px-10 text-[28px] font-black text-white shadow-[0_10px_0_rgba(236,111,40,0.28),0_16px_35px_rgba(255,130,216,0.32)] transition-all duration-200 hover:-translate-y-1 active:translate-y-1 active:shadow-[0_5px_0_rgba(236,111,40,0.28)]"
+          @click="emit('continue')"
+        >
+          {{ continueText }}
+        </button>
+      </div>
+    </div>
+  </Overlay>
+</template>