fix: 生成视频快速预览、AIGC 导航新增 DS

components/aigc/generation/CGTaskCard.client.vue

@@ -161,7 +161,7 @@ const onCombination = () => {
 <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">
+    <div class="relative w-full aspect-video group">
       <NuxtImg class="w-full aspect-video object-cover pointer-events-none absolute inset-0" v-if="!!course.video_cover"
         :src="course.video_cover" alt="image" loading="lazy" />
       <div v-else
@@ -177,6 +177,11 @@ const onCombination = () => {
           </UBadge>
         </UTooltip>
       </div>
+      <div v-if="isDownloadable" class="absolute inset-0 bg-black/10 backdrop-blur-md flex justify-center items-center opacity-0 group-hover:opacity-100 duration-300">
+        <div class="rounded-full w-14 aspect-square bg-gray-300/50 backdrop-blur-md flex justify-center items-center cursor-pointer" @click="isPreviewModalOpen = true">
+          <Icon name="i-tabler-play" class="text-white text-3xl" />
+        </div>
+      </div>
     </div>
     <div class="px-2 pt-1 pb-2 flex justify-between">
       <div class="flex-1 overflow-hidden pt-1">
@@ -189,7 +194,7 @@ const onCombination = () => {
           <span>{{ dayjs(course.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
           <button v-if="course.task_id" class="hover:text-primary font-medium" tabindex="-1" :title="course.task_id"
             @click="copyTaskId(isFailed ? `\n\n${course.message}\n${course.ppt_url}` : '')">
-            复制ID
+            {{ isFailed ? '复制错误报告' : '复制 ID' }}
           </button>
         </p>
       </div>
@@ -238,7 +243,7 @@ const onCombination = () => {
         </UButtonGroup>
       </div>
     </div>
-    <UModal v-model="isPreviewModalOpen">
+    <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">

components/aigc/generation/GBTaskCard.vue

@@ -15,6 +15,7 @@ const emit = defineEmits({
 const dayjs = useDayjs()
 const toast = useToast()
 
+const isPreviewModalOpen = ref(false)
 const isFullContentOpen = ref(false)
 const downloadingState = reactive({
   subtitle: 0,
@@ -82,7 +83,7 @@ const onClick = () => {
   <div
     class="w-full flex gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden p-3"
   >
-    <div class="flex-0 h-48 aspect-[10/16] flex flex-col items-center justify-center rounded-lg shadow overflow-hidden">
+    <div class="flex-0 h-48 aspect-[10/16] flex flex-col items-center justify-center rounded-lg shadow overflow-hidden relative group">
       <div v-if="!video.video_cover" class="w-full h-full bg-primary flex flex-col justify-center items-center gap-2">
         <UIcon class="animate-spin text-4xl text-white" name="tabler:loader"/>
         <div class="flex flex-col items-center gap-0.5">
@@ -91,6 +92,11 @@ const onClick = () => {
         </div>
       </div>
       <NuxtImg v-else :src="video.video_cover" class="w-full h-full brightness-90 object-cover"/>
+      <div class="absolute inset-0 bg-black/10 backdrop-blur-md flex justify-center items-center rounded-lg opacity-0 group-hover:opacity-100 duration-300">
+        <div class="rounded-full w-14 aspect-square bg-gray-300/50 backdrop-blur-md flex justify-center items-center cursor-pointer" @click="isPreviewModalOpen = true">
+          <Icon name="i-tabler-play" class="text-white text-3xl" />
+        </div>
+      </div>
     </div>
     <div class="flex-1 flex flex-col justify-between gap-2">
       <div class="flex-1 rounded-lg bg-neutral-100 dark:bg-neutral-800 p-2 px-2.5">
@@ -186,6 +192,23 @@ const onClick = () => {
         </template>
       </UCard>
     </UModal>
+    <UModal v-model="isPreviewModalOpen">
+      <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>
+              <p class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis">
+                {{ video.title }}
+              </p>
+            </div>
+            <UButton class="-my-1" color="gray" icon="i-tabler-x" variant="ghost" @click="isPreviewModalOpen = false" />
+          </div>
+        </template>
+
+        <video class="w-full rounded shadow" controls autoplay :src="video.video_url" />
+      </UCard>
+    </UModal>
   </div>
 </template>
 

pages/aigc/navigation.vue

@@ -19,6 +19,13 @@ const toolCats = ref<ToolCategory[]>([
     category: 'LLM 对话',
     icon: 'tabler:message-circle',
     links: [
+      {
+        id: 'deepseek',
+        label: 'DeepSeek',
+        description:
+          '深度求索人工智能基础技术研究有限公司(简称“深度求索”或“DeepSeek”)，成立于2023年，是一家专注于实现AGI的中国公司。',
+        url: 'https://chat.deepseek.com/',
+      },
       {
         id: 'doubao',
         label: '豆包',