feat:

1. 更新框架
2. 修复框架更新后导致的问题
3. 消息系统升级

packages/effects/layouts/src/widgets/notification/notification.vue

@@ -19,11 +19,14 @@ withDefaults(
   defineProps<{
     /** 显示圆点 */
     dot?: boolean;
+    /** 未读数量角标（优先于圆点） */
+    count?: number;
     /** 消息列表 */
     notifications?: NotificationItem[];
   }>(),
   {
     dot: false,
+    count: 0,
     notifications: () => [],
   },
 );
@@ -64,7 +67,13 @@ defineExpose({ toggle });
       <div class="mr-2 flex-center h-full" @click.stop="toggle()">
         <VbenIconButton class="bell-button relative text-foreground">
           <span
-            v-if="dot"
+            v-if="count > 0"
+            class="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] leading-none text-primary-foreground"
+          >
+            {{ count > 99 ? '99+' : count }}
+          </span>
+          <span
+            v-else-if="dot"
             class="absolute top-0.5 right-0.5 size-2 rounded-sm bg-primary"
           ></span>
           <Bell class="size-4" />
@@ -97,19 +106,20 @@ defineExpose({ toggle });
                 ></span>
 
                 <span
-                  class="relative flex size-10 shrink-0 overflow-hidden rounded-full"
+                  class="relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted"
                 >
                   <component
                     :is="item.icon"
                     v-if="item.icon"
-                    :class="item.status === 1 ? 'text-gray-400 group-hover:text-gray-600': item.color"
-                    class="aspect-square h-full w-full object-cover"
+                    :class="
+                      item.status === 1
+                        ? 'text-gray-400 group-hover:text-gray-600'
+                        : item.color
+                    "
+                    class="size-5"
                     role="img"
                   />
-<!--                  <img-->
-<!--                    :src="item.avatar"-->
-<!--                    class="aspect-square size-full object-cover"-->
-<!--                  />-->
+                  <Bell v-else class="size-5 text-muted-foreground" />
                 </span>
                 <div class="flex flex-col gap-1 leading-none">
                   <p class="font-semibold">{{ item.title }}</p>