feat: 添加 MediaInfoDialog 组件并更新相关引用

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 }}

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 {