实现消息记录功能，包括增删改查和标记已读，优化消息列表展示和未读消息计数

Web/src/App.vue

@@ -12,54 +12,30 @@
         <van-tabbar-item name="balance" icon="balance-list" to="/balance" @click="handleTabClick('/balance')">
           账单
         </van-tabbar-item>
-        <van-tabbar-item name="message" icon="comment" to="/message" @click="handleTabClick('/message')">
+        <van-tabbar-item name="message" icon="comment" to="/message" @click="handleTabClick('/message')" :badge="messageStore.unreadCount || null">
           消息
         </van-tabbar-item>
         <van-tabbar-item name="setting" icon="setting" to="/setting">
           设置
         </van-tabbar-item>
       </van-tabbar>
-      
-      <!-- 调试信息覆盖层 -->
-      <div v-if="showDebug" class="debug-overlay" @click="showDebug = false">
-        <div>VH: {{ debugInfo.vh }}</div>
-        <div>InnerHeight: {{ debugInfo.innerHeight }}</div>
-        <div>ClientHeight: {{ debugInfo.clientHeight }}</div>
-        <div>BodyHeight: {{ debugInfo.bodyHeight }}</div>
-        <div>SafeAreaBottom: {{ debugInfo.safeAreaBottom }}</div>
-      </div>
     </div>
   </van-config-provider>
 </template>
 
 <script setup>
 import { RouterView, useRoute } from 'vue-router'
-import { ref, onMounted, onUnmounted, computed, watch, reactive } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
+import { useMessageStore } from '@/stores/message'
 import '@/styles/common.css'
 
-const showDebug = ref(false) // 默认关闭，可以通过特定操作开启，或者先开启让用户看
-const debugInfo = reactive({
-  vh: 0,
-  innerHeight: 0,
-  clientHeight: 0,
-  bodyHeight: 0,
-  safeAreaBottom: 'unknown'
-})
-
-const updateDebugInfo = () => {
-  debugInfo.vh = window.innerHeight
-  debugInfo.innerHeight = window.innerHeight
-  debugInfo.clientHeight = document.documentElement.clientHeight
-  debugInfo.bodyHeight = document.body.clientHeight
-  debugInfo.safeAreaBottom = getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-bottom') || 'env(safe-area-inset-bottom)'
-}
+const messageStore = useMessageStore()
 
 const updateVh = () => {
   // 获取真实的视口高度（PWA 模式下准确）
   const vh = window.innerHeight
   // 设置 CSS 变量，让所有组件使用准确的视口高度
   document.documentElement.style.setProperty('--vh', `${vh}px`)
-  updateDebugInfo()
 }
 
 onMounted(() => {
@@ -101,6 +77,7 @@ const updateTheme = () => {
 let mediaQuery
 onMounted(() => {
   updateTheme()
+  messageStore.updateUnreadCount()
   mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
   mediaQuery.addEventListener('change', updateTheme)
   setActive(route.path)