wip

components/ppt/PPTGenerationRecord.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+const props = defineProps({
+  record: {
+    type: Object,
+    required: true,
+  },
+})
+
+const dayjs = useDayjs()
+</script>
+
+<template>
+  <div
+    class="relative w-full aspect-video rounded-lg overflow-hidden shadow"
+  >
+    <NuxtImg :src="record.video_cover"></NuxtImg>
+    <div class="absolute inset-0 flex flex-col justify-between bg-black/10 bg-gradient-to-t from-black/20">
+      <div class="flex justify-between items-start p-2.5 gap-2">
+        <div>
+          <UButton icon="i-solar-play-circle-bold-duotone">预览</UButton>
+        </div>
+        <div class="flex flex-col items-end gap-1">
+          <UTooltip :text="record.task_id" :close-delay="300">
+            <h1 class="text-white text-xs font-bold font-sans">
+              ID: {{ record.task_id.slice(0, 6) }}
+            </h1>
+          </UTooltip>
+          <UTooltip :text="dayjs(record.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')">
+            <h1 class="text-white text-xs font-bold font-sans">
+              {{ dayjs(record.create_time * 1000).fromNow() }}
+            </h1>
+          </UTooltip>
+        </div>
+<!--        <UProgress-->
+<!--          size="md"-->
+<!--          indicator-->
+<!--          :ui="{-->
+<!--          wrapper: 'flex-col-reverse',-->
+<!--            progress: {-->
+<!--              base: '!bg-opacity-50'-->
+<!--            }-->
+<!--          }"-->
+<!--          :value="10"-->
+<!--          :max="100"-->
+<!--          :animation="'carousel'"-->
+<!--        />-->
+      </div>
+      <div class="flex justify-between items-center p-2.5 gap-2">
+        <div class="overflow-hidden whitespace-nowrap">
+          <UTooltip
+            :text="record.title"
+            :popper="{
+              placement: 'bottom-start'
+            }"
+            :open-delay="300"
+            :close-delay="300"
+            class="w-full"
+          >
+            <h1 class="text-white text-base font-bold font-sans drop-shadow overflow-hidden text-ellipsis leading-none">
+              {{ record.title }}
+            </h1>
+          </UTooltip>
+        </div>
+        <div class="flex-1 whitespace-nowrap flex gap-1.5">
+          <UButton
+            size="xs"
+            color="red"
+            variant="soft"
+            icon="i-tabler-trash"
+          />
+          <UButton
+            size="xs"
+            color="primary"
+            variant="soft"
+            icon="i-solar-subtitles-linear"
+          >
+            字幕
+          </UButton>
+          <UButton
+            size="xs"
+            icon="i-tabler-download"
+          >
+            下载
+          </UButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>