feat(mobile): 接入移动端订单与消息中心

frontend/src/layouts/MobileLayout.tsx

@@ -5,6 +5,7 @@ import { AppOutline, MessageOutline, UnorderedListOutline, UserOutline } from 'a
 import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom'
 
 import { BrandLogo } from '@/components/BrandLogo'
+import { useChatUnreadCount } from '@/features/messages/api'
 import { useSessionStore } from '@/stores/session'
 
 const tabs = [
@@ -25,10 +26,15 @@ export function MobileLayout() {
   const location = useLocation()
   const navigate = useNavigate()
   const user = useSessionStore(state => state.user)
-  const hideTabbar = /^\/m\/listings\/[^/]+$/.test(location.pathname)
+  const chatUnread = useChatUnreadCount(Boolean(user))
+  const unreadBadge = chatUnread.data && chatUnread.data > 0 ? chatUnread.data : undefined
+  const hideTabbar =
+    /^\/m\/listings\/[^/]+$/.test(location.pathname) ||
+    /^\/m\/orders\/[^/]+$/.test(location.pathname) ||
+    /^\/m\/messages\/[^/]+$/.test(location.pathname)
 
   return (
-    <div className="mobile-shell">
+    <div className={`mobile-shell${hideTabbar ? ' mobile-shell--no-tabbar' : ''}`}>
       <header className="mobile-header">
         <Link to="/m" className="mobile-header__brand" aria-label="解忧商行移动端首页">
           <BrandLogo height={30} />
@@ -57,7 +63,12 @@ export function MobileLayout() {
           safeArea
         >
           {tabs.map(tab => (
-            <TabBar.Item key={tab.key} icon={tab.icon} title={tab.title} />
+            <TabBar.Item
+              key={tab.key}
+              icon={tab.icon}
+              title={tab.title}
+              badge={tab.key === '/m/messages' ? unreadBadge : undefined}
+            />
           ))}
         </TabBar>
       </div>