feat: 片头片尾库预览

components/aigc/generation/TitlesTemplate.vue

@@ -17,18 +17,55 @@ const emit = defineEmits({
 })
 
 const loginState = useLoginState()
+
+const isPreviewModalOpen = ref(false)
+const previewVideoUrl = ref<string | null>(null)
+
+const previewVideo = (url: string) => {
+  previewVideoUrl.value = url
+  setTimeout(() => {
+    isPreviewModalOpen.value = true
+  }, 100)
+}
+
+const closePreview = () => {
+  isPreviewModalOpen.value = false
+  setTimeout(() => {
+    previewVideoUrl.value = null
+  }, 100)
+}
 </script>
 
 <template>
   <div
     class="relative w-full flex flex-col rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden shadow-none hover:shadow transition-shadow"
   >
+    <div class="relative w-full aspect-[16/9] group">
       <NuxtImg
         placeholder
         placeholder-class="w-full aspect-[16/9] object-cover bg-neutral-200 dark:bg-neutral-800"
-      class="w-full aspect-[16/9] object-cover relative"
+        class="object-cover relative"
         :src="data.opening_url"
       />
+      <div
+        class="absolute inset-0 bg-black/10 backdrop-blur-md opacity-0 group-hover:opacity-100 duration-300 flex flex-col gap-2 justify-center items-center"
+      >
+        <UButton
+          icon="tabler:play"
+          color="primary"
+          variant="soft"
+          label="预览片头"
+          @click="previewVideo(data.opening_file)"
+        />
+        <UButton
+          icon="tabler:play"
+          color="primary"
+          variant="soft"
+          label="预览片尾"
+          @click="previewVideo(data.ending_file)"
+        />
+      </div>
+    </div>
     <div class="relative p-2 flex justify-between items-center gap-2">
       <div class="flex-1">
         <h1
@@ -55,10 +92,7 @@ const loginState = useLoginState()
             icon="tabler:trash"
             color="red"
             @click="emit('system-titles-delete', data)"
-            v-if="
-              /** TODO: Temporarily disable this button */ false &&
-              loginState.user.auth_code === 2
-            "
+            v-if="loginState.user.auth_code === 2"
           />
         </UButtonGroup>
         <UButtonGroup
@@ -75,6 +109,43 @@ const loginState = useLoginState()
         </UButtonGroup>
       </div>
     </div>
+
+    <UModal
+      v-model="isPreviewModalOpen"
+      :ui="{ width: 'w-full sm:max-w-4xl' }"
+    >
+      <UCard
+        :ui="{
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
+            >
+              <p>视频预览</p>
+            </div>
+            <UButton
+              class="-my-1"
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isPreviewModalOpen = false"
+            />
+          </div>
+        </template>
+
+        <video
+          v-if="previewVideoUrl"
+          class="w-full rounded shadow"
+          controls
+          autoplay
+          :src="previewVideoUrl"
+        ></video>
+      </UCard>
+    </UModal>
   </div>
 </template>