feat 媒体信息组件

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">
-          <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>
+        <MediaInfoCard :context="nameTestResult" />
       </VCardItem>
     </vCard>
   </vDialog>