fix ui

src/components/cards/LibraryCard.vue

@@ -35,36 +35,28 @@ function imageErrorHandler() {
 
 // 默认图片
 function getDefaultImage() {
-  if (props.media?.server === 'plex')
-    return plex
-  else if (props.media?.server === 'emby')
-    return emby
-  else if (props.media?.server === 'jellyfin')
-    return jellyfin
-  else
-    return plex
+  if (props.media?.server === 'plex') return plex
+  else if (props.media?.server === 'emby') return emby
+  else if (props.media?.server === 'jellyfin') return jellyfin
+  else return plex
 }
 
 // 跳转播放
 function goPlay() {
-  if (props.media?.link)
-    window.open(props.media?.link, '_blank')
+  if (props.media?.link) window.open(props.media?.link, '_blank')
 }
 
 // 生成图片代理路径
 function getImgUrl(url: string) {
-  if (!url)
-    return getDefaultImage()
-  else
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(url)}`
+  if (!url) return getDefaultImage()
+  else return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(url)}`
 }
 
 // 根据多张图片生成媒体库封面
 async function drawImages(imageList: string[]) {
   // 图片
   const IMAGES = imageList
-  if (IMAGES.length === 0)
-    return getDefaultImage()
+  if (IMAGES.length === 0) return getDefaultImage()
 
   // 为所有图片添加system/img前缀
   for (let i = 0; i < IMAGES.length; i++)
@@ -72,8 +64,7 @@ async function drawImages(imageList: string[]) {
 
   // canvas
   const canvas = canvasRef.value
-  if (!canvas)
-    return getDefaultImage()
+  if (!canvas) return getDefaultImage()
 
   // 画布参数
   const POSTER_WIDTH = (canvas.width - 32) / 4
@@ -85,8 +76,7 @@ async function drawImages(imageList: string[]) {
 
   // 获取画布上下文
   const ctx = canvas.getContext('2d')
-  if (!ctx)
-    return getDefaultImage()
+  if (!ctx) return getDefaultImage()
 
   // 设置背景色为黑色
   ctx.fillStyle = '#000000'
@@ -94,16 +84,14 @@ async function drawImages(imageList: string[]) {
 
   // 绘制图片
   async function drawImageWithReflection(imgSrc: string, index: number) {
-    if (!canvas)
-      return
+    if (!canvas) return
 
-    if (!ctx)
-      return
+    if (!ctx) return
 
     const img = new Image()
     img.setAttribute('crossorigin', 'anonymous')
     img.src = imgSrc
-    await new Promise(resolve => img.onload = resolve)
+    await new Promise(resolve => (img.onload = resolve))
 
     const x = MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1)
     const y = MARGIN_HEIGHT
@@ -125,12 +113,7 @@ async function drawImages(imageList: string[]) {
       REFLECTION_HEIGHT,
     )
 
-    const gradient = ctx.createLinearGradient(
-      0,
-      REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT,
-      0,
-      REFLECTION_HEIGHT,
-    )
+    const gradient = ctx.createLinearGradient(0, REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT, 0, REFLECTION_HEIGHT)
 
     gradient.addColorStop(0, 'rgba(0, 0, 0, 1)')
     gradient.addColorStop(1, 'rgba(0, 0, 0, 0.3)')
@@ -142,8 +125,7 @@ async function drawImages(imageList: string[]) {
 
   // 绘制多张图片
   const loopCount = Math.min(4, IMAGES.length)
-  for (let i = 0; i < loopCount; i++)
-    await drawImageWithReflection(IMAGES[i], i + 1)
+  for (let i = 0; i < loopCount; i++) await drawImageWithReflection(IMAGES[i], i + 1)
 
   // 转换为图片地址
   return canvas.toDataURL('image/png')
@@ -152,17 +134,12 @@ async function drawImages(imageList: string[]) {
 onMounted(async () => {
   if (props.media?.image_list && props.media?.image_list.length > 0)
     imgUrl.value = await drawImages(props.media?.image_list || [])
-  else
-    imgUrl.value = getImgUrl(props.media?.image || '')
+  else imgUrl.value = getImgUrl(props.media?.image || '')
 })
 </script>
 
 <template>
-  <VHover
-    v-bind="props"
-    :height="props.height"
-    :width="props.width"
-  >
+  <VHover v-bind="props" :height="props.height" :width="props.width">
     <template #default="hover">
       <VCard
         v-bind="hover.props"
@@ -175,13 +152,7 @@ onMounted(async () => {
       >
         <template #image>
           <canvas ref="canvasRef" class="w-full h-full hidden" />
-          <VImg
-            :src="imgUrl"
-            aspect-ratio="2/3"
-            cover
-            @load="imageLoadHandler"
-            @error="imageErrorHandler"
-          >
+          <VImg :src="imgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler" @error="imageErrorHandler">
             <template #placeholder>
               <div class="w-full h-full">
                 <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
@@ -190,7 +161,7 @@ onMounted(async () => {
             <VCardText
               class="w-full flex flex-col flex-wrap justify-end align-center text-white absolute bottom-0 cursor-pointer pa-2"
             >
-              <h1 class="mb-1 text-white font-bold line-clamp-2 overflow-hidden text-ellipsis ...">
+              <h1 class="mb-1 text-white text-shadow font-bold line-clamp-2 overflow-hidden text-ellipsis ...">
                 {{ props.media?.name }}
               </h1>
             </VCardText>
@@ -200,3 +171,9 @@ onMounted(async () => {
     </template>
   </VHover>
 </template>
+
+<style lang="scss">
+.text-shadow {
+  text-shadow: 1px 1px #777;
+}
+</style>