Merge pull request #190 from Aqr-K/dev-cards

src/components/cards/CustomRuleCard.vue

@@ -102,7 +102,7 @@ function onClose() {
         <VImg :src="filter_svg" cover class="mt-7" max-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-model="ruleInfoDialog" scrollable max-width="40rem">
+    <VDialog v-model="ruleInfoDialog" scrollable max-width="40rem" persistent >
       <VCard :title="`${props.rule.id} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="ruleInfoDialog" />
         <VDivider />

src/components/cards/DownloaderCard.vue

@@ -175,7 +175,7 @@ onUnmounted(() => {
         </div>
       </VCardText>
     </VCard>
-    <VDialog v-model="downloaderInfoDialog" scrollable max-width="40rem" persistent>
+    <VDialog v-model="downloaderInfoDialog" scrollable max-width="40rem" persistent >
       <VCard :title="`${props.downloader.name} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="downloaderInfoDialog" />
         <VDivider />

src/components/cards/FilterRuleGroupCard.vue

@@ -221,7 +221,7 @@ function onClose() {
         <VImg :src="filter_group_svg" cover class="mt-10" max-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-model="groupInfoDialog" scrollable max-width="80rem">
+    <VDialog v-model="groupInfoDialog" scrollable max-width="80rem" persistent >
       <VCard :title="`${props.group.name} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="groupInfoDialog" />
         <VDivider />

src/components/cards/MediaServerCard.vue

@@ -174,7 +174,7 @@ onMounted(() => {
         <VImg :src="getIcon" cover class="mt-5 me-3" max-width="3rem" min-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-model="mediaServerInfoDialog" scrollable max-width="40rem">
+    <VDialog v-model="mediaServerInfoDialog" scrollable max-width="40rem" persistent >
       <VCard :title="`${props.mediaserver.name} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="mediaServerInfoDialog" />
         <VDivider />

src/components/cards/NotificationChannelCard.vue

@@ -6,18 +6,28 @@ import vocechat_image from '@images/logos/vocechat.png'
 import synologychat_image from '@images/logos/synologychat.png'
 import slack_image from '@images/logos/slack.webp'
 import chrome_image from '@images/logos/chrome.png'
+import { useToast } from 'vue-toast-notification'
 
 // 定义输入
 const props = defineProps({
+  // 单个通知
   notification: {
     type: Object as PropType<NotificationConf>,
     required: true,
   },
+  // 所有通知
+  notifications: {
+    type: Array as PropType<NotificationConf[]>,
+    required: true,
+  },
 })
 
 // 定义触发的自定义事件
 const emit = defineEmits(['close', 'change', 'done'])
 
+// 提示框
+const $toast = useToast()
+
 // 通知详情弹窗
 const notificationInfoDialog = ref(false)
 
@@ -63,6 +73,16 @@ function openNotificationInfoDialog() {
 
 // 保存详情数据
 function saveNotificationInfo() {
+  // 为空不保存，跳出警告框
+  if (!notificationName.value) {
+    $toast.error('名称不能为空，请输入后再确定')
+    return
+  }
+  // 重名判断
+  if (props.notifications.some(item => item.name === notificationName.value && item!== props.notification)) {
+    $toast.error(`【${notificationName.value}】已存在，请替换为其他名称`)
+    return
+  }
   notificationInfoDialog.value = false
   notificationInfo.value.name = notificationName.value
   emit('change', notificationInfo.value)
@@ -109,7 +129,7 @@ function onClose() {
         <VImg :src="getIcon" cover class="mt-5 me-7" max-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-model="notificationInfoDialog" scrollable max-width="40rem">
+    <VDialog v-model="notificationInfoDialog" scrollable max-width="40rem" persistent >
       <VCard :title="`${props.notification.name} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="notificationInfoDialog" />
         <VDivider />

src/views/setting/AccountSettingNotification.vue

@@ -60,8 +60,12 @@ async function reloadSystem() {
 
 // 添加媒体服务器
 function addNotification(notification: string) {
+  let name = `通知${notifications.value.length + 1}`;
+  while (notifications.value.some(item => item.name === name)) {
+    name = `通知${parseInt(name.split('通知')[1]) + 1}`;
+  }
   notifications.value.push({
-    name: `通知${notifications.value.length + 1}`,
+    name: name,
     type: notification,
     enabled: false,
     config: {},
@@ -147,6 +151,7 @@ onMounted(() => {
             <template #item="{ element }">
               <NotificationChannelCard
                 :notification="element"
+                :notifications="notifications"
                 @close="removeNotification(element)"
               />
             </template>