style: Update NotificationChannelCard to include web push notification support

This commit is contained in:
jxxghp
2024-07-26 12:49:32 +08:00
parent c191b12514
commit 2c74dc0ccd
5 changed files with 5 additions and 2 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

@@ -2,9 +2,10 @@
import { NotificationConf } from '@/api/types' import { NotificationConf } from '@/api/types'
import wechat_image from '@images/logos/wechat.png' import wechat_image from '@images/logos/wechat.png'
import telegram_image from '@images/logos/telegram.webp' import telegram_image from '@images/logos/telegram.webp'
import vocechat_image from '@images/logos/vocechat.jpeg' import vocechat_image from '@images/logos/vocechat.png'
import synologychat_image from '@images/logos/synologychat.png' import synologychat_image from '@images/logos/synologychat.png'
import slack_image from '@images/logos/slack.webp' import slack_image from '@images/logos/slack.webp'
import chrome_image from '@images/logos/chrome.png'
// 定义输入 // 定义输入
const props = defineProps({ const props = defineProps({
@@ -27,6 +28,8 @@ const getIcon = computed(() => {
return synologychat_image return synologychat_image
case 'slack': case 'slack':
return slack_image return slack_image
case 'webpush':
return chrome_image
default: default:
return wechat_image return wechat_image
} }
@@ -37,7 +40,7 @@ const getIcon = computed(() => {
<VCardText class="flex justify-space-between align-center gap-3"> <VCardText class="flex justify-space-between align-center gap-3">
<div class="align-self-start"> <div class="align-self-start">
<h5 class="text-h5 mb-1">{{ notification.name }}</h5> <h5 class="text-h5 mb-1">{{ notification.name }}</h5>
<div class="text-body-1 mb-3"></div> <div class="text-body-1 mb-3">{{ notification.type }}</div>
</div> </div>
<VImg :src="getIcon" cover class="m-3" max-width="6rem" /> <VImg :src="getIcon" cover class="m-3" max-width="6rem" />
</VCardText> </VCardText>