feat 媒体信息组件

src/components/cards/MediaInfoCard.vue

@@ -0,0 +1,147 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { Context } from '@/api/types'
+
+// 输入参数
+const props = defineProps({
+  context: Object as PropType<Context>,
+})
+
+// TMDB图片转换为w500大小
+function getW500Image(url = '') {
+  if (!url)
+    return ''
+  return url.replace('original', 'w500')
+}
+
+// 打开TMDB详情页面
+function openTmdbPage(type: string, tmdbId: number) {
+  if (!type || !tmdbId)
+    return
+
+  const url = `https://www.themoviedb.org/${type === '电影' ? 'movie' : 'tv'}/${tmdbId}`
+  window.open(url, '_blank')
+}
+</script>
+
+<template>
+  <div v-show="context">
+    <VCol>
+      <div
+        v-if="context?.meta_info?.name"
+        class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row"
+      >
+        <div
+          v-if="context?.media_info?.poster_path"
+          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="getW500Image(context?.media_info?.poster_path)"
+            cover
+          >
+            <template #placeholder>
+              <div class="w-full h-full">
+                <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+              </div>
+            </template>
+          </VImg>
+        </div>
+
+        <div>
+          <VCardItem class="pb-1">
+            <VCardTitle>
+              {{ context?.media_info?.title || context?.meta_info?.name }}
+              {{ context?.meta_info?.season_episode }}
+            </VCardTitle>
+            <VCardSubtitle>
+              {{ context?.media_info?.year || context?.meta_info?.year }}
+            </VCardSubtitle>
+          </VCardItem>
+
+          <VCardText
+            v-if="context?.media_info?.overview"
+            class="line-clamp-4 overflow-hidden text-ellipsis ..."
+          >
+            {{ context?.media_info?.overview }}
+          </VCardText>
+
+          <VCardItem>
+            <!-- 类型 -->
+            <VChip
+              v-if="context?.media_info?.type || context?.meta_info?.type"
+              variant="elevated"
+              class="me-1 mb-1 text-white bg-blue-500"
+            >
+              {{
+                context?.media_info?.type || context?.meta_info?.type
+              }}
+            </VChip>
+            <!-- 二级分类 -->
+            <VChip
+              v-if="context?.media_info?.category"
+              variant="elevated"
+              class="me-1 mb-1 text-white bg-blue-500"
+            >
+              {{ context?.media_info?.category }}
+            </VChip>
+            <!-- TMDBID -->
+            <VChip
+              v-if="context?.media_info?.tmdb_id"
+              variant="elevated"
+              color="success"
+              class="me-1 mb-1"
+              @click="openTmdbPage(context?.media_info?.type || '', context?.media_info?.tmdb_id)"
+            >
+              {{ context?.media_info?.tmdb_id }}
+            </VChip>
+            <!-- meta_info -->
+            <VChip
+              v-if="context?.meta_info?.edition"
+              variant="elevated"
+              class="me-1 mb-1 text-white bg-red-500"
+            >
+              {{ context?.meta_info?.edition }}
+            </VChip>
+            <VChip
+              v-if="context?.meta_info?.resource_pix"
+              variant="elevated"
+              class="me-1 mb-1 text-white bg-red-500"
+            >
+              {{ context?.meta_info?.resource_pix }}
+            </VChip>
+            <VChip
+              v-if="context?.meta_info?.video_encode"
+              variant="elevated"
+              class="me-1 mb-1 text-white bg-orange-500"
+            >
+              {{ context?.meta_info?.video_encode }}
+            </VChip>
+            <VChip
+              v-if="context?.meta_info?.audio_encode"
+              variant="elevated"
+              class="me-1 mb-1 text-white bg-orange-500"
+            >
+              {{ context?.meta_info?.audio_encode }}
+            </VChip>
+            <VChip
+              v-if="context?.meta_info?.resource_team"
+              variant="elevated"
+              class="me-1 mb-1 text-white bg-cyan-500"
+            >
+              {{ context?.meta_info?.resource_team }}
+            </VChip>
+          </VCardItem>
+        </div>
+      </div>
+      <VAlert
+        v-if="!context?.meta_info?.name"
+        icon="mdi-alert-circle-outline"
+      >
+        识别失败，无法识别到有效信息！
+      </VAlert>
+    </VCol>
+  </div>
+</template>

src/components/filebrowser/List.vue

@@ -9,6 +9,7 @@ import { formatBytes } from '@core/utils/formatters'
 import type { Context, EndPoints, FileItem } from '@/api/types'
 import store from '@/store'
 import api from '@/api'
+import MediaInfoCard from '@/components/cards/MediaInfoCard.vue'
 
 // 输入参数
 const inProps = defineProps({
@@ -341,13 +342,6 @@ async function recognize(path: string) {
   }
 }
 
-// TMDB图片转换为w500大小
-function getW500Image(url = '') {
-  if (!url)
-    return ''
-  return url.replace('original', 'w500')
-}
-
 // 弹出菜单
 const dropdownItems = ref([
   {
@@ -759,124 +753,7 @@ onMounted(() => {
     <vCard>
       <DialogCloseBtn @click="nameTestDialog = false" />
       <VCardItem>
-        <div v-show="nameTestResult">
+        <MediaInfoCard :context="nameTestResult" />
-          <VCol>
-            <div
-              v-if="nameTestResult?.meta_info?.name"
-              class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row"
-            >
-              <div
-                v-if="nameTestResult?.media_info?.poster_path"
-                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="getW500Image(nameTestResult?.media_info?.poster_path)"
-                  cover
-                >
-                  <template #placeholder>
-                    <div class="w-full h-full">
-                      <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
-                    </div>
-                  </template>
-                </VImg>
-              </div>
-
-              <div>
-                <VCardItem class="pb-1">
-                  <VCardTitle>
-                    {{ nameTestResult?.media_info?.title || nameTestResult?.meta_info?.name }}
-                    {{ nameTestResult?.meta_info?.season_episode }}
-                  </VCardTitle>
-                  <VCardSubtitle>
-                    {{ nameTestResult?.media_info?.year || nameTestResult?.meta_info?.year }}
-                  </VCardSubtitle>
-                </VCardItem>
-
-                <VCardText
-                  v-if="nameTestResult?.media_info?.overview"
-                  class="line-clamp-4 overflow-hidden text-ellipsis ..."
-                >
-                  {{ nameTestResult?.media_info?.overview }}
-                </VCardText>
-
-                <VCardItem>
-                  <!-- 类型 -->
-                  <VChip
-                    v-if="nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type"
-                    variant="elevated"
-                    class="me-1 mb-1 text-white bg-blue-500"
-                  >
-                    {{
-                      nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type
-                    }}
-                  </VChip>
-                  <!-- 二级分类 -->
-                  <VChip
-                    v-if="nameTestResult?.media_info?.category"
-                    variant="elevated"
-                    class="me-1 mb-1 text-white bg-blue-500"
-                  >
-                    {{ nameTestResult?.media_info?.category }}
-                  </VChip>
-                  <!-- TMDBID -->
-                  <VChip
-                    v-if="nameTestResult?.media_info?.tmdb_id"
-                    variant="elevated"
-                    color="success"
-                    class="me-1 mb-1"
-                  >
-                    {{ nameTestResult?.media_info?.tmdb_id }}
-                  </VChip>
-                  <!-- meta_info -->
-                  <VChip
-                    v-if="nameTestResult?.meta_info?.edition"
-                    variant="elevated"
-                    class="me-1 mb-1 text-white bg-red-500"
-                  >
-                    {{ nameTestResult?.meta_info?.edition }}
-                  </VChip>
-                  <VChip
-                    v-if="nameTestResult?.meta_info?.resource_pix"
-                    variant="elevated"
-                    class="me-1 mb-1 text-white bg-red-500"
-                  >
-                    {{ nameTestResult?.meta_info?.resource_pix }}
-                  </VChip>
-                  <VChip
-                    v-if="nameTestResult?.meta_info?.video_encode"
-                    variant="elevated"
-                    class="me-1 mb-1 text-white bg-orange-500"
-                  >
-                    {{ nameTestResult?.meta_info?.video_encode }}
-                  </VChip>
-                  <VChip
-                    v-if="nameTestResult?.meta_info?.audio_encode"
-                    variant="elevated"
-                    class="me-1 mb-1 text-white bg-orange-500"
-                  >
-                    {{ nameTestResult?.meta_info?.audio_encode }}
-                  </VChip>
-                  <VChip
-                    v-if="nameTestResult?.meta_info?.resource_team"
-                    variant="elevated"
-                    class="me-1 mb-1 text-white bg-cyan-500"
-                  >
-                    {{ nameTestResult?.meta_info?.resource_team }}
-                  </VChip>
-                </VCardItem>
-              </div>
-            </div>
-            <VAlert
-              v-if="!nameTestResult?.meta_info?.name"
-              icon="mdi-alert-circle-outline"
-            >
-              识别失败，无法识别到有效信息！
-            </VAlert>
-          </VCol>
-        </div>
       </VCardItem>
     </vCard>
   </vDialog>

src/views/system/NameTestView.vue

@@ -3,6 +3,7 @@ import { reactive, ref } from 'vue'
 import { requiredValidator } from '@/@validators'
 import api from '@/api'
 import type { Context } from '@/api/types'
+import MediaInfoCard from '@/components/cards/MediaInfoCard.vue'
 
 // 识别结果
 const nameTestResult = ref<Context>()
@@ -45,22 +46,6 @@ async function nameTest() {
     console.error(error)
   }
 }
-
-// 打开TMDB详情页面
-function openTmdbPage(type: string, tmdbId: number) {
-  if (!type || !tmdbId)
-    return
-
-  const url = `https://www.themoviedb.org/${type === '电影' ? 'movie' : 'tv'}/${tmdbId}`
-  window.open(url, '_blank')
-}
-
-// TMDB图片转换为w500大小
-function getW500Image(url = '') {
-  if (!url)
-    return ''
-  return url.replace('original', 'w500')
-}
 </script>
 
 <template>
@@ -101,123 +86,7 @@ function getW500Image(url = '') {
   </VForm>
   <VExpandTransition>
     <div v-show="showResult">
-      <VCol>
+      <MediaInfoCard :context="nameTestResult" />
-        <div
-          v-if="nameTestResult?.meta_info?.name"
-          class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row"
-        >
-          <div
-            v-if="nameTestResult?.media_info?.poster_path"
-            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="getW500Image(nameTestResult?.media_info?.poster_path)"
-              cover
-            >
-              <template #placeholder>
-                <div class="w-full h-full">
-                  <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
-                </div>
-              </template>
-            </VImg>
-          </div>
-
-          <div>
-            <VCardItem class="pb-1">
-              <VCardTitle>
-                {{ nameTestResult?.media_info?.title || nameTestResult?.meta_info?.name }}
-                {{ nameTestResult?.meta_info?.season_episode }}
-              </VCardTitle>
-              <VCardSubtitle>
-                {{ nameTestResult?.media_info?.year || nameTestResult?.meta_info?.year }}
-              </VCardSubtitle>
-            </VCardItem>
-
-            <VCardText
-              v-if="nameTestResult?.media_info?.overview"
-              class="line-clamp-4 overflow-hidden text-ellipsis ..."
-            >
-              {{ nameTestResult?.media_info?.overview }}
-            </VCardText>
-
-            <VCardItem>
-              <!-- 类型 -->
-              <VChip
-                v-if="nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type"
-                variant="elevated"
-                class="me-1 mb-1 text-white bg-blue-500"
-              >
-                {{
-                  nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type
-                }}
-              </VChip>
-              <!-- 二级分类 -->
-              <VChip
-                v-if="nameTestResult?.media_info?.category"
-                variant="elevated"
-                class="me-1 mb-1 text-white bg-blue-500"
-              >
-                {{ nameTestResult?.media_info?.category }}
-              </VChip>
-              <!-- TMDBID -->
-              <VChip
-                v-if="nameTestResult?.media_info?.tmdb_id"
-                variant="elevated"
-                color="success"
-                class="me-1 mb-1"
-                @click="openTmdbPage(nameTestResult?.media_info?.type || '', nameTestResult?.media_info?.tmdb_id)"
-              >
-                {{ nameTestResult?.media_info?.tmdb_id }}
-              </VChip>
-              <!-- meta_info -->
-              <VChip
-                v-if="nameTestResult?.meta_info?.edition"
-                variant="elevated"
-                class="me-1 mb-1 text-white bg-red-500"
-              >
-                {{ nameTestResult?.meta_info?.edition }}
-              </VChip>
-              <VChip
-                v-if="nameTestResult?.meta_info?.resource_pix"
-                variant="elevated"
-                class="me-1 mb-1 text-white bg-red-500"
-              >
-                {{ nameTestResult?.meta_info?.resource_pix }}
-              </VChip>
-              <VChip
-                v-if="nameTestResult?.meta_info?.video_encode"
-                variant="elevated"
-                class="me-1 mb-1 text-white bg-orange-500"
-              >
-                {{ nameTestResult?.meta_info?.video_encode }}
-              </VChip>
-              <VChip
-                v-if="nameTestResult?.meta_info?.audio_encode"
-                variant="elevated"
-                class="me-1 mb-1 text-white bg-orange-500"
-              >
-                {{ nameTestResult?.meta_info?.audio_encode }}
-              </VChip>
-              <VChip
-                v-if="nameTestResult?.meta_info?.resource_team"
-                variant="elevated"
-                class="me-1 mb-1 text-white bg-cyan-500"
-              >
-                {{ nameTestResult?.meta_info?.resource_team }}
-              </VChip>
-            </VCardItem>
-          </div>
-        </div>
-        <VAlert
-          v-if="!nameTestResult?.meta_info?.name"
-          icon="mdi-alert-circle-outline"
-        >
-          识别失败，无法识别到有效信息！
-        </VAlert>
-      </VCol>
     </div>
   </VExpandTransition>
 </template>