add Notify

src/layout/MainLayout.vue

@@ -14,23 +14,36 @@
 				</div>
 			</template>
 			<template v-if="navBarStore.customRightVisible || navBarStore.rightIcon || navBarStore.rightText" #right>
-				<div v-if="navBarStore.customRightVisible" id="app-nav-right" class="nav-right-slot" />
-				<button
-					v-else-if="navBarStore.rightIcon"
-					class="nav-btn"
-					type="button"
-					@click="navBarStore.rightAction?.()"
-				>
-					<t-icon :name="navBarStore.rightIcon" size="1.25rem" />
-				</button>
-				<span
-					v-else
-					v-text="navBarStore.rightText"
-					class="nav-text"
-					:style="{ color: navBarStore.rightTextColor ? navBarStore.rightTextColor : '#333' }"
-					:class="{ clickable: !!navBarStore.rightAction }"
-					@click="navBarStore.rightAction?.()"
-				></span>
+				<div class="nav-right-slot">
+					<div v-if="navBarStore.customRightVisible" id="app-nav-right" />
+					<t-badge
+						v-else-if="navBarStore.rightIcon && navBarStore.rightBadge !== undefined"
+						class="badge"
+						:count="navBarStore.rightBadge"
+						:max-count="99"
+						:show-zero="false"
+					>
+						<button class="nav-btn" type="button" @click="navBarStore.rightAction?.()">
+							<t-icon :name="navBarStore.rightIcon" size="1.25rem" />
+						</button>
+					</t-badge>
+					<button
+						v-else-if="navBarStore.rightIcon"
+						class="nav-btn"
+						type="button"
+						@click="navBarStore.rightAction?.()"
+					>
+						<t-icon :name="navBarStore.rightIcon" size="1.25rem" />
+					</button>
+					<span
+						v-else
+						v-text="navBarStore.rightText"
+						class="nav-text"
+						:style="{ color: navBarStore.rightTextColor ? navBarStore.rightTextColor : '#333' }"
+						:class="{ clickable: !!navBarStore.rightAction }"
+						@click="navBarStore.rightAction?.()"
+					></span>
+				</div>
 			</template>
 		</t-navbar>
 		<div class="router-view">
@@ -216,6 +229,14 @@ const tabBarHeight = computed(() => {
 			-webkit-backdrop-filter: blur(10px);
 		}
 
+		.badge {
+
+			:deep(.t-badge__content) {
+				display: flex;
+				align-items: center;
+			}
+		}
+
 		.nav-btn {
 			padding: 0;
 			border: none;
@@ -243,6 +264,10 @@ const tabBarHeight = computed(() => {
 			display: flex;
 			align-items: center;
 			justify-content: flex-end;
+
+			:deep(.t-badge) {
+				display: inline-flex;
+			}
 		}
 
 		.nav-text {