优化了消息数量,筛选和顶部部分

frontend/src/components/MobileBottomNav.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useRoute, RouterLink } from 'vue-router'
+import { useChatUnreadCount } from '@/features/chats/composables/useChatUnreadCount'
 
 const route = useRoute()
+const { unreadCount, unreadLabel } = useChatUnreadCount(route)
 
 function isNavActive(path: string) {
   if (path === '/m') return route.path === '/m'
@@ -16,7 +18,10 @@ function isNavActive(path: string) {
       <span>首页</span>
     </RouterLink>
     <RouterLink to="/m/messages" class="nav-item" :class="{ active: isNavActive('/m/messages') }">
-      <van-icon name="chat-o" :size="22" />
+      <span class="nav-icon-wrap">
+        <van-icon name="chat-o" :size="22" />
+        <em v-if="unreadCount > 0" class="nav-badge">{{ unreadLabel }}</em>
+      </span>
       <span>消息</span>
     </RouterLink>
     <RouterLink to="/m/seller/listings/create" class="nav-item nav-publish">
@@ -39,16 +44,26 @@ function isNavActive(path: string) {
   position: fixed;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: -1px;
   z-index: 100;
   display: flex;
   background: #fff;
   border-top: 1px solid #eee;
   padding-bottom: env(safe-area-inset-bottom);
-  height: calc(50px + env(safe-area-inset-bottom));
+  height: calc(52px + env(safe-area-inset-bottom));
   box-sizing: border-box;
 }
 
+.bottom-nav::after {
+  position: absolute;
+  right: 0;
+  bottom: -18px;
+  left: 0;
+  height: 18px;
+  background: #fff;
+  content: '';
+}
+
 .nav-item {
   flex: 1;
   display: flex;
@@ -69,6 +84,33 @@ function isNavActive(path: string) {
   font-weight: 600;
 }
 
+.nav-icon-wrap {
+  position: relative;
+  display: grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+}
+
+.nav-badge {
+  position: absolute;
+  top: -5px;
+  right: -10px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  box-sizing: border-box;
+  border: 2px solid #fff;
+  border-radius: 999px;
+  background: #ef4444;
+  color: #fff;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 12px;
+  text-align: center;
+}
+
 .publish-pill {
   width: 36px;
   height: 26px;