feat: wip Course Generate

components/aigc/course-generate/CGTaskCard.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div
+    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden">
+    <div class="relative w-full aspect-video">
+      <NuxtImg
+        :src="`http://localhost:3000/${Math.random() > 0.5 ? 'demo' : 'demo2'}.jpg`"
+        alt="image"
+        class="w-full h-full object-cover pointer-events-none absolute inset-0"
+      />
+      <div class="absolute inset-2 flex justify-end items-start">
+        <UTooltip :prevent="false" :shortcuts="['Ctrl', 'C']" text="出现错误">
+          <UBadge class="shadow" color="green" size="sm" variant="soft">
+            已完成
+          </UBadge>
+        </UTooltip>
+      </div>
+    </div>
+    <div class="px-2 pt-1 pb-2 flex justify-between">
+      <div class="flex-1 overflow-hidden pt-1">
+        <h1 class="text-sm font-medium overflow-hidden text-ellipsis text-nowrap"
+            title="课程名字课程名字课程名字课程名字课程名字课程名字课程名字课程名字">
+          <Icon class="-mt-0.5 -ml-0.5 text-base" name="i-tabler-book-2"/>
+          <span>课程名字</span>
+        </h1>
+        <p class="text-xs pt-0.5 text-neutral-400 space-x-2">
+          <span>2024-06-20 17:34:20</span>
+          <button
+            class="hover:text-primary font-medium"
+            tabindex="-1"
+            title="5cb35fbd-4f8a-4105-9b10-d828f3b0f553"
+          >
+            复制ID
+          </button>
+        </p>
+      </div>
+      <div class="flex items-center gap-1">
+        <UButtonGroup>
+          <UButton color="white" label="下载" leading-icon="i-tabler-download" size="xs"/>
+          <UDropdown
+            :items="[
+              [{
+                label: '预览课程',
+                icon: 'i-tabler-play',
+                shortcuts: ['空格'],
+              }, {
+                label: '下载字幕',
+                icon: 'i-tabler-file-download',
+                shortcuts: ['Alt', 'S'],
+              }], [{
+                label: '删除记录',
+                icon: 'i-tabler-trash-x',
+                shortcuts: ['Delete'],
+              }],
+            ]"
+            :popper="{ placement: 'bottom-start' }"
+          >
+            <UButton color="white" size="xs" trailing-icon="i-tabler-dots"/>
+          </UDropdown>
+        </UButtonGroup>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>