From 3b2d5e45bb4e8a2a226945fa38da301e287b8b11 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 29 Dec 2024 14:22:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20MediaInfoDialog=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=9B=B4=E6=96=B0=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cards/MediaInfoCard.vue        |   5 +-
 src/components/cards/SubscribeShareCard.vue   | 194 ++++++++----------
 src/components/dialog/ForkSubscribeDialog.vue | 125 +++++++++++
 src/components/dialog/MediaInfoDialog.vue     |  22 ++
 src/components/filebrowser/FileList.vue       |  16 +-
 5 files changed, 245 insertions(+), 117 deletions(-)
 create mode 100644 src/components/dialog/ForkSubscribeDialog.vue
 create mode 100644 src/components/dialog/MediaInfoDialog.vue

diff --git a/src/components/cards/MediaInfoCard.vue b/src/components/cards/MediaInfoCard.vue
index 42f9bff0..f11c7f90 100644
--- a/src/components/cards/MediaInfoCard.vue
+++ b/src/components/cards/MediaInfoCard.vue
@@ -4,7 +4,7 @@ import type { Context } from '@/api/types'
 import { isNullOrEmptyObject } from '@/@core/utils'
 
 // 输入参数
-const props = defineProps({
+defineProps({
   context: Object as PropType<Context>,
 })
 
@@ -45,8 +45,7 @@ function openTmdbPage(type: string, tmdbId: number) {
             </template>
           </VImg>
         </div>
-
-        <div>
+        <div class="flex-grow">
           <VCardItem class="pb-1">
             <VCardTitle class="text-center text-md-left">
               {{ context?.media_info?.title || context?.meta_info?.name }}
diff --git a/src/components/cards/SubscribeShareCard.vue b/src/components/cards/SubscribeShareCard.vue
index e50f390e..8cec229e 100644
--- a/src/components/cards/SubscribeShareCard.vue
+++ b/src/components/cards/SubscribeShareCard.vue
@@ -1,24 +1,15 @@
 <script lang="ts" setup>
 import { formatDateDifference } from '@/@core/utils/formatters'
-import api from '@/api'
-import { doneNProgress, startNProgress } from '@/api/nprogress'
 import type { SubscribeShare } from '@/api/types'
 import router from '@/router'
-import { useToast } from 'vue-toast-notification'
-import { useConfirm } from 'vuetify-use-dialog'
 import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
+import ForkSubscribeDialog from '../dialog/ForkSubscribeDialog.vue'
 
 // 输入参数
 const props = defineProps({
   media: Object as PropType<SubscribeShare>,
 })
 
-// 提示框
-const $toast = useToast()
-
-// 确认框
-const createConfirm = useConfirm()
-
 // 从 provide 中获取全局设置
 const globalSettings: any = inject('globalSettings')
 
@@ -28,6 +19,9 @@ const imageLoaded = ref(false)
 // 订阅编辑弹窗
 const subscribeEditDialog = ref(false)
 
+// 复用订阅弹窗
+const forkSubscribeDialog = ref(false)
+
 // 订阅ID
 const subscribeId = ref<number>()
 
@@ -69,109 +63,99 @@ async function viewMediaDetail() {
 }
 
 // 复用订阅
-async function forkSubscribe() {
-  // 开始处理
-  startNProgress()
-  try {
-    // 确认
-    const isConfirmed = await createConfirm({
-      title: '确认',
-      content: `是否确认添加来自 ${props.media?.share_user} 分享的订阅：${props.media?.share_title}？`,
-    })
-    if (!isConfirmed) return
+function showForkSubscribe() {
+  forkSubscribeDialog.value = true
+}
 
-    // 请求API
-    const result: { [key: string]: any } = await api.post('subscribe/fork', props.media)
-
-    // 订阅状态
-    if (result.success) {
-      $toast.success(`${props.media?.share_title} 添加订阅成功！`)
-      // 弹出订阅编辑弹窗
-      subscribeId.value = result.data.id
-      subscribeEditDialog.value = true
-    } else {
-      $toast.error(`${props.media?.share_title} 添加订阅失败：${result.message}！`)
-    }
-  } catch (error) {
-    console.error(error)
-  } finally {
-    doneNProgress()
-  }
+// 完成复用订阅
+function finishForkSubscribe(subid: number) {
+  subscribeId.value = subid
+  subscribeEditDialog.value = true
 }
 </script>
 
 <template>
-  <VHover>
-    <template #default="hover">
-      <VCard
-        v-bind="hover.props"
-        :key="props.media?.id"
-        class="flex flex-col rounded-lg"
-        :class="{
-          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
-        }"
-        min-height="170"
-        @click="forkSubscribe"
-      >
-        <template #image>
-          <VImg :src="backdropUrl || posterUrl" aspect-ratio="3/2" cover @load="imageLoadHandler" position="top">
-            <template #placeholder>
-              <div class="w-full h-full">
-                <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
+  <div>
+    <VHover>
+      <template #default="hover">
+        <VCard
+          v-bind="hover.props"
+          :key="props.media?.id"
+          class="flex flex-col rounded-lg"
+          :class="{
+            'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+          }"
+          min-height="170"
+          @click="showForkSubscribe"
+        >
+          <template #image>
+            <VImg :src="backdropUrl || posterUrl" aspect-ratio="3/2" cover @load="imageLoadHandler" position="top">
+              <template #placeholder>
+                <div class="w-full h-full">
+                  <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
+                </div>
+              </template>
+              <div class="absolute inset-0 subscribe-card-background"></div>
+            </VImg>
+          </template>
+          <div>
+            <VCardText class="flex items-center pb-1">
+              <div class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md shadow-lg" v-if="imageLoaded">
+                <VImg :src="posterUrl" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
+                  <template #placeholder>
+                    <div class="w-full h-full">
+                      <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                    </div>
+                  </template>
+                </VImg>
               </div>
-            </template>
-            <div class="absolute inset-0 subscribe-card-background"></div>
-          </VImg>
-        </template>
-        <div>
-          <VCardText class="flex items-center pb-1">
-            <div class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md shadow-lg" v-if="imageLoaded">
-              <VImg :src="posterUrl" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
-                <template #placeholder>
-                  <div class="w-full h-full">
-                    <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
-                  </div>
-                </template>
-              </VImg>
-            </div>
-            <div class="flex flex-col justify-center pl-2 xl:pl-4">
-              <div class="mr-2 min-w-0 text-lg font-bold text-white line-clamp-2 overflow-hidden text-ellipsis ...">
-                {{ props.media?.share_title }}
+              <div class="flex flex-col justify-center pl-2 xl:pl-4">
+                <div class="mr-2 min-w-0 text-lg font-bold text-white line-clamp-2 overflow-hidden text-ellipsis ...">
+                  {{ props.media?.share_title }}
+                </div>
+                <div class="text-sm font-medium text-gray-200 sm:pt-1 line-clamp-3 overflow-hidden text-ellipsis ...">
+                  {{ props.media?.share_comment }}
+                </div>
               </div>
-              <div class="text-sm font-medium text-gray-200 sm:pt-1 line-clamp-3 overflow-hidden text-ellipsis ...">
-                {{ props.media?.share_comment }}
+            </VCardText>
+            <VCardText class="flex justify-space-between align-center flex-wrap">
+              <div class="flex align-center">
+                <IconBtn v-bind="props" icon="mdi-account" color="white" class="me-1" />
+                <div class="text-subtitle-2 me-4 text-white">
+                  {{ props.media?.share_user }}
+                </div>
+                <IconBtn v-if="props.media?.count" icon="mdi-fire" color="error" class="me-1" />
+                <span v-if="props.media?.count" class="text-subtitle-2 me-4 text-white">
+                  {{ props.media?.count.toLocaleString() }}
+                </span>
               </div>
-            </div>
-          </VCardText>
-          <VCardText class="flex justify-space-between align-center flex-wrap">
-            <div class="flex align-center">
-              <IconBtn v-bind="props" icon="mdi-account" color="white" class="me-1" />
-              <div class="text-subtitle-2 me-4 text-white">
-                {{ props.media?.share_user }}
-              </div>
-              <IconBtn v-if="props.media?.count" icon="mdi-fire" color="error" class="me-1" />
-              <span v-if="props.media?.count" class="text-subtitle-2 me-4 text-white">
-                {{ props.media?.count.toLocaleString() }}
-              </span>
-            </div>
-          </VCardText>
-          <VCardText class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
-            <VIcon icon="mdi-calcdar" class="me-1" />
-            {{ dateText }}
-          </VCardText>
-        </div>
-      </VCard>
-    </template>
-  </VHover>
-  <!-- 订阅编辑弹窗 -->
-  <SubscribeEditDialog
-    v-if="subscribeEditDialog"
-    v-model="subscribeEditDialog"
-    :subid="subscribeId"
-    @close="subscribeEditDialog = false"
-    @save="subscribeEditDialog = false"
-    @remove="subscribeEditDialog = false"
-  />
+            </VCardText>
+            <VCardText class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
+              <VIcon icon="mdi-calcdar" class="me-1" />
+              {{ dateText }}
+            </VCardText>
+          </div>
+        </VCard>
+      </template>
+    </VHover>
+    <!-- 订阅编辑弹窗 -->
+    <SubscribeEditDialog
+      v-if="subscribeEditDialog"
+      v-model="subscribeEditDialog"
+      :subid="subscribeId"
+      @close="subscribeEditDialog = false"
+      @save="subscribeEditDialog = false"
+      @remove="subscribeEditDialog = false"
+    />
+    <!-- 复用订阅弹窗 -->
+    <ForkSubscribeDialog
+      v-if="forkSubscribeDialog"
+      v-model="forkSubscribeDialog"
+      :media="props.media"
+      @close="forkSubscribeDialog = false"
+      @done="finishForkSubscribe"
+    />
+  </div>
 </template>
 <style lang="scss">
 .subscribe-card-background {
diff --git a/src/components/dialog/ForkSubscribeDialog.vue b/src/components/dialog/ForkSubscribeDialog.vue
new file mode 100644
index 00000000..33f2139f
--- /dev/null
+++ b/src/components/dialog/ForkSubscribeDialog.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import api from '@/api'
+import { doneNProgress, startNProgress } from '@/api/nprogress'
+import { SubscribeShare } from '@/api/types'
+import router from '@/router'
+import { useToast } from 'vue-toast-notification'
+import { VBtn } from 'vuetify/lib/components/index.mjs'
+
+// 输入参数
+const props = defineProps({
+  media: Object as PropType<SubscribeShare>,
+})
+
+// 定义事件
+const emit = defineEmits(['close', 'done'])
+
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
+// 提示框
+const $toast = useToast()
+
+// 计算海报图片地址
+const posterUrl = computed(() => {
+  const url = props.media?.poster
+  // 使用图片缓存
+  if (globalSettings.GLOBAL_IMAGE_CACHE && url)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
+  return url
+})
+
+// 查看媒体详情
+async function viewMediaDetail() {
+  router.push({
+    path: '/media',
+    query: {
+      mediaid: `${props.media?.tmdbid ? `tmdb:${props.media?.tmdbid}` : `douban:${props.media?.doubanid}`}`,
+      type: props.media?.type,
+    },
+  })
+}
+
+// 复用订阅
+async function doFork() {
+  // 开始处理
+  startNProgress()
+  try {
+    // 请求API
+    const result: { [key: string]: any } = await api.post('subscribe/fork', props.media)
+
+    // 订阅状态
+    if (result.success) {
+      $toast.success(`${props.media?.share_title} 添加订阅成功！`)
+      // 完成
+      emit('done', result.data.id)
+    } else {
+      $toast.error(`${props.media?.share_title} 添加订阅失败：${result.message}！`)
+    }
+  } catch (error) {
+    console.error(error)
+  } finally {
+    doneNProgress()
+  }
+}
+</script>
+<template>
+  <VDialog max-width="40rem">
+    <VCard>
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText>
+        <VCol>
+          <div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
+            <div class="ma-auto">
+              <VImg
+                width="10rem"
+                aspect-ratio="2/3"
+                class="object-cover aspect-w-2 aspect-h-3 rounded-lg ring-1 ring-gray-500"
+                :src="posterUrl"
+                @click="viewMediaDetail"
+                cover
+              >
+                <template #placeholder>
+                  <div class="w-full h-full">
+                    <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                  </div>
+                </template>
+              </VImg>
+            </div>
+            <div class="flex-grow">
+              <VCardItem>
+                <VCardTitle>
+                  {{ props.media?.share_title }}
+                </VCardTitle>
+                <VCardSubtitle
+                  class="break-words whitespace-break-spaces line-clamp-2 overflow-hidden text-ellipsis ..."
+                >
+                  {{ props.media?.share_comment }}
+                </VCardSubtitle>
+                <VList lines="one">
+                  <VListItem class="ps-0">
+                    <VListItemTitle>
+                      <span class="font-weight-medium">分享人：</span>
+                      <span class="text-body-1"> {{ media?.share_user }}</span>
+                    </VListItemTitle>
+                  </VListItem>
+                  <VListItem class="ps-0" v-if="media?.custom_words">
+                    <VListItemTitle
+                      class="break-words whitespace-break-spaces line-clamp-3 overflow-hidden text-ellipsis ..."
+                    >
+                      <span class="font-weight-medium">识别词：</span>
+                      <span class="text-body-1"> {{ media?.custom_words }}</span>
+                    </VListItemTitle>
+                  </VListItem>
+                </VList>
+                <div>
+                  <VBtn color="primary" @click="doFork" prepend-icon="mdi-heart">添加到我的订阅</VBtn>
+                </div>
+              </VCardItem>
+            </div>
+          </div>
+        </VCol>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
diff --git a/src/components/dialog/MediaInfoDialog.vue b/src/components/dialog/MediaInfoDialog.vue
new file mode 100644
index 00000000..6c24931c
--- /dev/null
+++ b/src/components/dialog/MediaInfoDialog.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { Context } from '@/api/types'
+import MediaInfoCard from '../cards/MediaInfoCard.vue'
+
+// 输入参数
+defineProps({
+  context: Object as PropType<Context>,
+})
+
+// 定义事件
+const emit = defineEmits(['close'])
+</script>
+<template>
+  <VDialog max-width="50rem">
+    <VCard>
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardItem>
+        <MediaInfoCard :context="context" />
+      </VCardItem>
+    </VCard>
+  </VDialog>
+</template>
diff --git a/src/components/filebrowser/FileList.vue b/src/components/filebrowser/FileList.vue
index fceea9cb..17f9953a 100644
--- a/src/components/filebrowser/FileList.vue
+++ b/src/components/filebrowser/FileList.vue
@@ -7,9 +7,9 @@ import ReorganizeDialog from '../dialog/ReorganizeDialog.vue'
 import { formatBytes } from '@core/utils/formatters'
 import type { Context, EndPoints, FileItem } from '@/api/types'
 import api from '@/api'
-import MediaInfoCard from '@/components/cards/MediaInfoCard.vue'
 import ProgressDialog from '../dialog/ProgressDialog.vue'
 import { useDisplay } from 'vuetify'
+import MediaInfoDialog from '../dialog/MediaInfoDialog.vue'
 
 // 显示器宽度
 const display = useDisplay()
@@ -735,14 +735,12 @@ onMounted(() => {
   <!-- 进度框 -->
   <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" :value="progressValue" />
   <!-- 识别结果对话框 -->
-  <VDialog v-if="nameTestDialog" v-model="nameTestDialog" width="50rem">
-    <VCard>
-      <DialogCloseBtn @click="nameTestDialog = false" />
-      <VCardItem>
-        <MediaInfoCard :context="nameTestResult" />
-      </VCardItem>
-    </VCard>
-  </VDialog>
+  <MediaInfoDialog
+    v-if="nameTestDialog"
+    v-model="nameTestDialog"
+    :context="nameTestResult"
+    @close="nameTestDialog = false"
+  />
 </template>
 
 <style lang="scss" scoped>