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

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: '新下载器',
-    type: 'qbittorrent',
+    name: `下载器${downloaders.value.length + 1}`,
+    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>