添加自定义下载器和媒体服务器选项

src/components/cards/DownloaderCard.vue

@@ -6,6 +6,7 @@ import { useToast } from 'vue-toast-notification'
 import type { DownloaderInfo } from '@/api/types'
 import qbittorrent_image from '@images/logos/qbittorrent.png'
 import transmission_image from '@images/logos/transmission.png'
+import custom_image from '@images/logos/downloader.png'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
 
@@ -126,7 +127,7 @@ const getIcon = computed(() => {
     case 'transmission':
       return transmission_image
     default:
-      return qbittorrent_image
+      return custom_image
   }
 })
 
@@ -172,10 +173,13 @@ onUnmounted(() => {
               />
               <span class="text-h6">{{ downloader.name }}</span>
             </div>
-            <div class="mt-1 flex flex-wrap text-sm" v-if="props.downloader.enabled">
+            <div v-if="downloader.type != 'custom' && props.downloader.enabled" class="mt-1 flex flex-wrap text-sm">
               <span class="me-2">{{ `↑ ${formatFileSize(upload_rate, 1)}/s ` }}</span>
               <span>{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
             </div>
+            <div v-else-if="downloader.type == 'custom'" class="mt-1 flex flex-wrap text-sm">
+              <span class="me-2">自定义下载器</span>
+            </div>
           </div>
           <div class="h-20">
             <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
@@ -278,7 +282,7 @@ onUnmounted(() => {
                 />
               </VCol>
             </VRow>
-            <VRow v-if="downloaderInfo.type == 'transmission'">
+            <VRow v-else-if="downloaderInfo.type == 'transmission'">
               <VCol cols="12" md="6">
                 <VTextField
                   v-model="downloaderInfo.name"
@@ -319,6 +323,18 @@ onUnmounted(() => {
                 />
               </VCol>
             </VRow>
+            <VRow v-else>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.name"
+                  :label="t('downloader.name')"
+                  :placeholder="t('downloader.nameRequired')"
+                  :hint="t('downloader.name')"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+            </VRow>
           </VForm>
         </VCardText>
         <VCardActions class="pt-3">

src/components/cards/MediaServerCard.vue

@@ -5,6 +5,7 @@ import emby_image from '@images/logos/emby.png'
 import jellyfin_image from '@images/logos/jellyfin.png'
 import plex_image from '@images/logos/plex.png'
 import trimemedia_image from '@images/logos/trimemedia.png'
+import custom_image from '@images/logos/mediaserver.png'
 import api from '@/api'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
@@ -108,8 +109,10 @@ const getIcon = computed(() => {
       return jellyfin_image
     case 'trimemedia':
       return trimemedia_image
-    default:
+    case 'plex':
       return plex_image
+    default:
+      return custom_image
   }
 })
 
@@ -183,11 +186,14 @@ onMounted(() => {
       <VCardText class="flex justify-space-between align-center gap-3">
         <div class="align-self-start flex-1">
           <div class="text-h6 mb-1">{{ mediaserver.name }}</div>
-          <div class="text-sm mt-5 flex flex-wrap">
+          <div v-if="mediaserver.type != 'custom' && mediaserver.enabled" class="text-sm mt-5 flex flex-wrap">
             <span v-for="item in infoItems" :key="item.title" class="me-2 mb-1">
               <VIcon rounded :icon="item.avatar" class="me-1" />{{ item.amount }}
             </span>
           </div>
+          <div v-else-if="mediaserver.type == 'custom'" class="text-sm mt-5 flex flex-wrap">
+            <span class="me-2 mb-1">自定义媒体服务器</span>
+          </div>
         </div>
         <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
       </VCardText>
@@ -243,8 +249,23 @@ onMounted(() => {
                   active
                 />
               </VCol>
+              <VCol cols="12">
+                <VSelect
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
             </VRow>
-            <VRow v-if="mediaServerInfo.type == 'jellyfin'">
+            <VRow v-else-if="mediaServerInfo.type == 'jellyfin'">
               <VCol cols="12" md="6">
                 <VTextField
                   v-model="mediaServerInfo.name"
@@ -284,8 +305,23 @@ onMounted(() => {
                   active
                 />
               </VCol>
+              <VCol cols="12">
+                <VSelect
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
             </VRow>
-            <VRow v-if="mediaServerInfo.type == 'trimemedia'">
+            <VRow v-else-if="mediaServerInfo.type == 'trimemedia'">
               <VCol cols="12" md="6">
                 <VTextField
                   v-model="mediaServerInfo.name"
@@ -327,8 +363,23 @@ onMounted(() => {
                   active
                 />
               </VCol>
+              <VCol cols="12">
+                <VSelect
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
             </VRow>
-            <VRow v-if="mediaServerInfo.type == 'plex'">
+            <VRow v-else-if="mediaServerInfo.type == 'plex'">
               <VCol cols="12" md="6">
                 <VTextField
                   v-model="mediaServerInfo.name"
@@ -368,8 +419,21 @@ onMounted(() => {
                   active
                 />
               </VCol>
-            </VRow>
-            <VRow>
+              <VCol cols="12">
+                <VSelect
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
               <VCol cols="12">
                 <VSelect
                   v-model="mediaServerInfo.sync_libraries"
@@ -386,6 +450,15 @@ onMounted(() => {
                 />
               </VCol>
             </VRow>
+            <VRow v-else>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.name"
+                  :label="t('common.name')"
+                  :placeholder="t('mediaserver.nameRequired')"
+                />
+              </VCol>
+            </VRow>
           </VForm>
         </VCardText>
         <VCardActions class="pt-3">