xsh-assistant-next/app/components/aigc/generation/TitlesTemplate.vue

<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="hover:shadow-xs relative flex w-full flex-col overflow-hidden rounded-lg border border-neutral-200 shadow-none transition-shadow dark:border-neutral-700"
  >
    <div class="aspect-16/9 group relative w-full">
      <NuxtImg
        placeholder
        placeholder-class="w-full aspect-16/9 object-cover bg-neutral-200 dark:bg-neutral-800"
        class="relative object-cover"
        :src="data.opening_url"
      />
      <div
        class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-black/10 opacity-0 backdrop-blur-md duration-300 group-hover:opacity-100"
      >
        <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 flex items-center justify-between gap-2 p-2">
      <div class="flex-1">
        <h1
          class="line-clamp-1 text-base font-medium"
          :title="data.title"
        >
          {{ data.title }}
        </h1>
        <p class="text-xs font-medium text-gray-400">
          {{ data.description }}
        </p>
      </div>
      <div>
        <UFieldGroup
          size="xs"
          v-if="type === 'system'"
        >
          <UButton
            label="使用模板"
            color="neutral"
            variant="outline"
            @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="error"
            />

            <template #content="{ close }">
              <div class="flex flex-col gap-2 p-2">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                  素材删除后不可恢复，确认删除？
                </p>
                <UButton
                  class="w-fit"
                  icon="tabler:trash"
                  label="确认删除"
                  color="error"
                  size="xs"
                  @click="emit('system-titles-delete', data)"
                />
              </div>
            </template>
          </UPopover>
        </UFieldGroup>
        <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="error"
              size="xs"
            />

            <template #content="{ close }">
              <div class="flex flex-col gap-2 p-2">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                  素材删除后不可恢复，确认删除？
                </p>
                <UButton
                  class="w-fit"
                  icon="tabler:trash"
                  label="确认删除"
                  color="error"
                  size="xs"
                  @click="emit('user-titles-delete', data)"
                />
              </div>
            </template>
          </UPopover>
        </div>
      </div>
    </div>

    <UModal
      v-model:open="isPreviewModalOpen"
      :ui="{ content: 'w-full sm:max-w-4xl' }"
    >
      <template #content>
        <UCard>
          <template #header>
            <div class="flex items-center justify-between">
              <div
                class="overflow-hidden text-base font-semibold leading-6 text-gray-900 dark:text-white"
              >
                <p>视频预览</p>
              </div>
              <UButton
                class="-my-1"
                color="neutral"
                icon="i-tabler-x"
                variant="ghost"
                @click="isPreviewModalOpen = false"
              />
            </div>
          </template>

          <video
            v-if="previewVideoUrl"
            class="rounded-xs shadow-xs w-full"
            controls
            autoplay
            :src="previewVideoUrl"
          ></video>
        </UCard>
      </template>
    </UModal>
  </div>
</template>

<style scoped></style>