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="relative w-full flex flex-col rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden shadow-none hover:shadow-sm 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-sm shadow-sm"
          controls
          autoplay
          :src="previewVideoUrl"
        ></video>
      </UCard>
    </UModal>
  </div>
</template>

<style scoped></style>