style: Update DownloaderCard, MediaServerCard, and NotificationChannelCard components to include close button functionality

src/components/cards/DownloaderCard.vue

@@ -34,15 +34,24 @@ const getIcon = computed(() => {
       return qbittorrent_image
   }
 })
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close'])
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
 </script>
 <template>
   <VCard variant="tonal">
+    <DialogCloseBtn @click="onClose" />
     <VCardText class="flex justify-space-between align-center gap-3">
       <div class="align-self-start">
-        <h5 class="text-h5 mb-1">{{ downloader.name }}</h5>
+        <h5 class="text-h6 mb-1">{{ downloader.name }}</h5>
         <div class="text-body-1 mb-3">{{ getSpeedText }}</div>
       </div>
-      <VImg :src="getIcon" cover class="m-3" max-width="6rem" />
+      <VImg :src="getIcon" cover class="mt-5 me-7" max-width="4rem" />
     </VCardText>
   </VCard>
 </template>

src/components/cards/MediaServerCard.vue

@@ -23,15 +23,24 @@ const getIcon = computed(() => {
       return plex_image
   }
 })
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close'])
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
 </script>
 <template>
   <VCard variant="tonal">
+    <DialogCloseBtn @click="onClose" />
     <VCardText class="flex justify-space-between align-center gap-3">
       <div class="align-self-start">
-        <h5 class="text-h5 mb-1">{{ mediaserver.name }}</h5>
+        <h5 class="text-h6 mb-1">{{ mediaserver.name }}</h5>
         <div class="text-body-1 mb-3"></div>
       </div>
-      <VImg :src="getIcon" cover class="m-3" max-width="6rem" />
+      <VImg :src="getIcon" cover class="mt-5 me-7" max-width="4rem" />
     </VCardText>
   </VCard>
 </template>

src/components/cards/NotificationChannelCard.vue

@@ -34,15 +34,24 @@ const getIcon = computed(() => {
       return wechat_image
   }
 })
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close'])
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
 </script>
 <template>
   <VCard variant="tonal">
+    <DialogCloseBtn @click="onClose" />
     <VCardText class="flex justify-space-between align-center gap-3">
       <div class="align-self-start">
-        <h5 class="text-h5 mb-1">{{ notification.name }}</h5>
+        <h5 class="text-h6 mb-1">{{ notification.name }}</h5>
         <div class="text-body-1 mb-3">{{ notification.type }}</div>
       </div>
-      <VImg :src="getIcon" cover class="m-3" max-width="6rem" />
+      <VImg :src="getIcon" cover class="mt-5 me-7" max-width="4rem" />
     </VCardText>
   </VCard>
 </template>

src/components/cards/StorageCard.vue

@@ -45,13 +45,13 @@ const usage = computed(() => {
   <VCard variant="tonal">
     <VCardText class="flex justify-space-between align-center gap-3">
       <div class="align-self-start">
-        <h5 class="text-h5 mb-1">{{ storage.name }}</h5>
+        <h5 class="text-h6 mb-1">{{ storage.name }}</h5>
         <div class="text-body-1 mb-3">空间使用率 {{ usage }}%</div>
         <div v-if="available" class="d-flex align-center flex-wrap">
           <h4 class="text-h4">{{ formatBytes(available) }}</h4>
         </div>
       </div>
-      <VImg :src="getIcon" cover class="m-3" max-width="6rem" />
+      <VImg :src="getIcon" cover class="mt-5 me-7" max-width="4rem" />
     </VCardText>
   </VCard>
 </template>

src/views/setting/AccountSettingNotification.vue

@@ -20,6 +20,12 @@ function addNotification(notification: string) {
   })
 }
 
+// 移除媒体服务器
+function removeNotification(notification: NotificationConf) {
+  const index = notifications.value.indexOf(notification)
+  if (index > -1) notifications.value.splice(index, 1)
+}
+
 // 调用API查询通知设置
 async function loadNotificationSetting() {
   try {
@@ -64,7 +70,7 @@ onMounted(() => {
             :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
           >
             <template #item="{ element }">
-              <NotificationChannelCard :notification="element" />
+              <NotificationChannelCard :notification="element" @close="removeNotification(element)" />
             </template>
           </draggable>
         </VCardText>

src/views/setting/AccountSettingSystem.vue

@@ -101,6 +101,12 @@ function addDownloader(downloader: string) {
   })
 }
 
+// 删除下载器
+function removeDownloader(ele: DownloaderConf) {
+  const index = downloaders.value.indexOf(ele)
+  downloaders.value.splice(index, 1)
+}
+
 // 添加媒体服务器
 function addMediaServer(mediaserver: string) {
   mediaServers.value.push({
@@ -110,6 +116,12 @@ function addMediaServer(mediaserver: string) {
   })
 }
 
+// 删除媒体服务器
+function removeMediaServer(ele: MediaServerConf) {
+  const index = mediaServers.value.indexOf(ele)
+  mediaServers.value.splice(index, 1)
+}
+
 // 加载数据
 onMounted(() => {
   loadDownloaderSetting()
@@ -164,7 +176,7 @@ onMounted(() => {
             :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
           >
             <template #item="{ element }">
-              <DownloaderCard :downloader="element" />
+              <DownloaderCard :downloader="element" @close="removeDownloader(element)" />
             </template>
           </draggable>
         </VCardText>
@@ -207,7 +219,7 @@ onMounted(() => {
             :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
           >
             <template #item="{ element }">
-              <MediaServerCard :mediaserver="element" />
+              <MediaServerCard :mediaserver="element" @close="removeMediaServer(element)" />
             </template>
           </draggable>
         </VCardText>