refactor(deps): migrate to nuxt v4

app/components/aigc/generation/TitlesTemplate.vue

@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+defineProps({
+  type: {
+    type: String as PropType<'system' | 'user'>,
+    required: true,
+  },
+  data: {
+    type: Object as PropType<TitlesTemplate>,
+    required: true,
+  },
+})
+
+const emit = defineEmits({
+  'user-titles-request': (_titles: TitlesTemplate) => true,
+  'user-titles-delete': (_titles: TitlesTemplate) => true,
+  'system-titles-delete': (_titles: TitlesTemplate) => true,
+})
+
+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="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
+          class="text-base font-medium line-clamp-1"
+          :title="data.title"
+        >
+          {{ data.title }}
+        </h1>
+        <p class="text-xs font-medium text-gray-400">
+          {{ data.description }}
+        </p>
+      </div>
+      <div>
+        <UButtonGroup
+          size="xs"
+          v-if="type === 'system'"
+        >
+          <UButton
+            label="使用模板"
+            color="white"
+            @click="emit('user-titles-request', data)"
+          />
+          <!-- <UButton
+            icon="tabler:trash"
+            color="red"
+            @click="emit('system-titles-delete', data)"
+            v-if="loginState.user.auth_code === 2"
+          /> -->
+          <UPopover v-if="loginState.user.auth_code === 2">
+            <UButton
+              icon="tabler:trash"
+              color="red"
+            />
+
+            <template #panel="{ close }">
+              <div class="flex flex-col p-2 gap-2">
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  素材删除后不可恢复，确认删除？
+                </p>
+                <UButton
+                  class="w-fit"
+                  icon="tabler:trash"
+                  label="确认删除"
+                  color="red"
+                  size="xs"
+                  @click="emit('system-titles-delete', data)"
+                />
+              </div>
+            </template>
+          </UPopover>
+        </UButtonGroup>
+        <div v-if="type === 'user'">
+          <!-- <UButton
+            icon="tabler:trash"
+            label="删除素材"
+            variant="soft"
+            color="red"
+            @click="emit('user-titles-delete', data)"
+          /> -->
+          <UPopover>
+            <UButton
+              icon="tabler:trash"
+              label="删除素材"
+              variant="soft"
+              color="red"
+              size="xs"
+            />
+
+            <template #panel="{ close }">
+              <div class="flex flex-col p-2 gap-2">
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  素材删除后不可恢复，确认删除？
+                </p>
+                <UButton
+                  class="w-fit"
+                  icon="tabler:trash"
+                  label="确认删除"
+                  color="red"
+                  size="xs"
+                  @click="emit('user-titles-delete', data)"
+                />
+              </div>
+            </template>
+          </UPopover>
+        </div>
+      </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>
+
+<style scoped></style>