style: Update MediaServerCard and NotificationChannelCard to use dynamic icons based on server and notification types

src/components/cards/MediaServerCard.vue

@@ -1,2 +1,37 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
-<template></template>
+import { MediaServerConf } from '@/api/types'
+import emby_image from '@images/logos/emby.png'
+import jellyfin_image from '@images/logos/jellyfin.png'
+import plex_image from '@images/logos/plex.png'
+
+// 定义输入
+const props = defineProps({
+  mediaserver: {
+    type: Object as PropType<MediaServerConf>,
+    required: true,
+  },
+})
+
+// 根据存储类型选择图标
+const getIcon = computed(() => {
+  switch (props.mediaserver.type) {
+    case 'emby':
+      return emby_image
+    case 'jellyfin':
+      return jellyfin_image
+    default:
+      return plex_image
+  }
+})
+</script>
+<template>
+  <VCard variant="tonal">
+    <VCardText class="flex justify-space-between align-center gap-3">
+      <div class="align-self-start">
+        <h5 class="text-h5 mb-1">{{ mediaserver.name }}</h5>
+        <div class="text-body-1 mb-3"></div>
+      </div>
+      <VImg :src="getIcon" cover class="m-3" max-width="6rem" />
+    </VCardText>
+  </VCard>
+</template>

src/components/cards/NotificationChannelCard.vue

@@ -1,2 +1,45 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
-<template></template>
+import { NotificationConf } from '@/api/types'
+import wechat_image from '@images/logos/wechat.png'
+import telegram_image from '@images/logos/telegram.webp'
+import vocechat_image from '@images/logos/vocechat.jpeg'
+import synologychat_image from '@images/logos/synologychat.png'
+import slack_image from '@images/logos/slack.webp'
+
+// 定义输入
+const props = defineProps({
+  notification: {
+    type: Object as PropType<NotificationConf>,
+    required: true,
+  },
+})
+
+// 根据存储类型选择图标
+const getIcon = computed(() => {
+  switch (props.notification.type) {
+    case 'wechat':
+      return wechat_image
+    case 'telegram':
+      return telegram_image
+    case 'vocechat':
+      return vocechat_image
+    case 'synologychat':
+      return synologychat_image
+    case 'slack':
+      return slack_image
+    default:
+      return wechat_image
+  }
+})
+</script>
+<template>
+  <VCard variant="tonal">
+    <VCardText class="flex justify-space-between align-center gap-3">
+      <div class="align-self-start">
+        <h5 class="text-h5 mb-1">{{ notification.name }}</h5>
+        <div class="text-body-1 mb-3"></div>
+      </div>
+      <VImg :src="getIcon" cover class="m-3" max-width="6rem" />
+    </VCardText>
+  </VCard>
+</template>

src/views/setting/AccountSettingNotification.vue

@@ -8,39 +8,43 @@ import NotificationChannelCard from '@/components/cards/NotificationChannelCard.
 // 所有消息渠道
 const notifications = ref<NotificationConf[]>([])
 
-// 消息渠道
-const NotificationChannels = [
-  {
-    title: '微信',
-    value: 'wechat',
-  },
-  {
-    title: 'Telegram',
-    value: 'telegram',
-  },
-  {
-    title: 'Slack',
-    value: 'slack',
-  },
-  {
-    title: 'SynologyChat',
-    value: 'synologychat',
-  },
-  {
-    title: 'VoceChat',
-    value: 'vocechat',
-  },
-  {
-    title: 'WebPush',
-    value: 'webpush',
-  },
-]
-
 // 提示框
 const $toast = useToast()
 
+// 添加媒体服务器
+function addNotification(notification: string) {
+  notifications.value.push({
+    name: `通知${notifications.value.length + 1}`,
+    type: notification,
+    enabled: false,
+  })
+}
+
+// 调用API查询通知设置
+async function loadNotificationSetting() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/Notifications')
+    notifications.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 调用API保存通知设置
+async function saveNotificationSetting() {
+  try {
+    const result: { [key: string]: any } = await api.post('system/setting/Notifications', notifications.value)
+    if (result.success) $toast.success('通知设置保存成功')
+    else $toast.error('通知设置保存失败！')
+  } catch (error) {
+    console.log(error)
+  }
+}
+
 // 加载数据
-onMounted(() => {})
+onMounted(() => {
+  loadNotificationSetting()
+})
 </script>
 
 <template>
@@ -60,16 +64,38 @@ onMounted(() => {})
             :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
           >
             <template #item="{ element }">
-              <NotificationChannelCard notification="element" />
+              <NotificationChannelCard :notification="element" />
             </template>
           </draggable>
         </VCardText>
         <VCardText>
           <VForm @submit.prevent="() => {}">
             <div class="d-flex flex-wrap gap-4 mt-4">
-              <VBtn mtype="submit" @click=""> 保存 </VBtn>
+              <VBtn mtype="submit" @click="saveNotificationSetting"> 保存 </VBtn>
               <VBtn color="success" variant="tonal" @click="">
                 <VIcon icon="mdi-plus" />
+                <VMenu activator="parent" close-on-content-click>
+                  <VList>
+                    <VListItem variant="plain" @click="addNotification('wechat')">
+                      <VListItemTitle>微信</VListItemTitle>
+                    </VListItem>
+                    <VListItem variant="plain" @click="addNotification('telegram')">
+                      <VListItemTitle>Telegram</VListItemTitle>
+                    </VListItem>
+                    <VListItem variant="plain" @click="addNotification('slack')">
+                      <VListItemTitle>Slack</VListItemTitle>
+                    </VListItem>
+                    <VListItem variant="plain" @click="addNotification('synologychat')">
+                      <VListItemTitle>SynologyChat</VListItemTitle>
+                    </VListItem>
+                    <VListItem variant="plain" @click="addNotification('vocechat')">
+                      <VListItemTitle>VoceChat</VListItemTitle>
+                    </VListItem>
+                    <VListItem variant="plain" @click="addNotification('webpush')">
+                      <VListItemTitle>WebPush</VListItemTitle>
+                    </VListItem>
+                  </VList>
+                </VMenu>
               </VBtn>
             </div>
           </VForm>

src/views/setting/AccountSettingSystem.vue

@@ -23,16 +23,46 @@ const downloaders = ref<DownloaderConf[]>([])
 const $toast = useToast()
 
 // 调用API查询下载器设置
-async function loadDownloaderSetting() {}
+async function loadDownloaderSetting() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/Downloaders')
+    downloaders.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
 
 // 调用API保存下载器设置
-async function saveDownloaderSetting() {}
+async function saveDownloaderSetting() {
+  try {
+    const result: { [key: string]: any } = await api.post('system/setting/Downloaders', downloaders.value)
+    if (result.success) $toast.success('下载器设置保存成功')
+    else $toast.error('下载器设置保存失败！')
+  } catch (error) {
+    console.log(error)
+  }
+}
 
 // 调用API查询媒体服务器设置
-async function loadMediaServerSetting() {}
+async function loadMediaServerSetting() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/MediaServers')
+    mediaServers.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
 
 // 调用API保存媒体服务器设置
-async function saveMediaServerSetting() {}
+async function saveMediaServerSetting() {
+  try {
+    const result: { [key: string]: any } = await api.post('system/setting/MediaServers', mediaServers.value)
+    if (result.success) $toast.success('媒体服务器设置保存成功')
+    else $toast.error('媒体服务器设置保存失败！')
+  } catch (error) {
+    console.log(error)
+  }
+}
 
 // 加载系统设置
 async function loadSystemSettings() {
@@ -62,17 +92,23 @@ async function saveSystemSetting() {
 }
 
 // 添加下载器
-function addDownloader() {
+function addDownloader(downloader: string) {
   downloaders.value.push({
-    name: '新下载器',
+    name: `下载器${downloaders.value.length + 1}`,
-    type: 'qbittorrent',
+    type: downloader,
     default: false,
     enabled: false,
   })
 }
 
 // 添加媒体服务器
-function addMediaServer() {}
+function addMediaServer(mediaserver: string) {
+  mediaServers.value.push({
+    name: `服务器${mediaServers.value.length + 1}`,
+    type: mediaserver,
+    enabled: false,
+  })
+}
 
 // 加载数据
 onMounted(() => {
@@ -136,8 +172,18 @@ onMounted(() => {
           <VForm @submit.prevent="() => {}">
             <div class="d-flex flex-wrap gap-4 mt-4">
               <VBtn mtype="submit" @click="saveDownloaderSetting"> 保存 </VBtn>
-              <VBtn color="success" variant="tonal" @click="addDownloader">
+              <VBtn color="success" variant="tonal">
                 <VIcon icon="mdi-plus" />
+                <VMenu activator="parent" close-on-content-click>
+                  <VList>
+                    <VListItem variant="plain" @click="addDownloader('qbittottent')">
+                      <VListItemTitle>Qbittorrent</VListItemTitle>
+                    </VListItem>
+                    <VListItem variant="plain" @click="addDownloader('transmission')">
+                      <VListItemTitle>Transmission</VListItemTitle>
+                    </VListItem>
+                  </VList>
+                </VMenu>
               </VBtn>
             </div>
           </VForm>
@@ -161,7 +207,7 @@ onMounted(() => {
             :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
           >
             <template #item="{ element }">
-              <MediaServerCard :downloader="element" />
+              <MediaServerCard :mediaserver="element" />
             </template>
           </draggable>
         </VCardText>
@@ -169,8 +215,21 @@ onMounted(() => {
           <VForm @submit.prevent="() => {}">
             <div class="d-flex flex-wrap gap-4 mt-4">
               <VBtn mtype="submit" @click="saveMediaServerSetting"> 保存 </VBtn>
-              <VBtn color="success" variant="tonal" @click="addMediaServer">
+              <VBtn color="success" variant="tonal">
                 <VIcon icon="mdi-plus" />
+                <VMenu activator="parent" close-on-content-click>
+                  <VList>
+                    <VListItem variant="plain" @click="addMediaServer('emby')">
+                      <VListItemTitle>Emby</VListItemTitle>
+                    </VListItem>
+                    <VListItem variant="plain" @click="addMediaServer('jellyfin')">
+                      <VListItemTitle>Jellyfin</VListItemTitle>
+                    </VListItem>
+                    <VListItem variant="plain" @click="addMediaServer('plex')">
+                      <VListItemTitle>Plex</VListItemTitle>
+                    </VListItem>
+                  </VList>
+                </VMenu>
               </VBtn>
             </div>
           </VForm>