添加预算管理功能，重构账单和消息视图，优化路由和组件交互

Web/src/views/BalanceView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-container-flex">
     <!-- 顶部导航栏 -->
-    <van-nav-bar title="交易记录" placeholder>
+    <van-nav-bar title="账单" placeholder>
       <template #right>
         <van-button 
           v-if="tabActive === 'email'"
@@ -12,27 +12,46 @@
         >
           立即同步
         </van-button>
+        <van-icon 
+            v-if="tabActive === 'message'"
+            name="passed" 
+            size="20" 
+            @click="messageViewRef?.handleMarkAllRead()" 
+        />
       </template>
     </van-nav-bar>
     <van-tabs v-model:active="tabActive" animated>
-      <van-tab title="账单记录" name="balance" />
-      <van-tab title="邮件记录" name="email" />
+      <van-tab title="账单" name="balance" />
+      <van-tab title="邮件" name="email" />
+      <van-tab title="消息" name="message" />
     </van-tabs>
 
     <TransactionsRecord v-if="tabActive === 'balance'" ref="transactionsRecordRef"/>
     <EmailRecord v-else-if="tabActive === 'email'" ref="emailRecordRef" />
+    <MessageView v-else-if="tabActive === 'message'" ref="messageViewRef" :is-component="true" />
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import TransactionsRecord from './TransactionsRecord.vue';
 import EmailRecord from './EmailRecord.vue';
-const tabActive = ref('balance');
+import MessageView from './MessageView.vue';
+
+const route = useRoute();
+const tabActive = ref(route.query.tab || 'balance');
+
+// 监听路由参数变化，用于从 tabbar 点击时切换 tab
+watch(() => route.query.tab, (newTab) => {
+  if (newTab) {
+    tabActive.value = newTab;
+  }
+});
 
 const transactionsRecordRef = ref(null);
 const emailRecordRef = ref(null);
-
+const messageViewRef = ref(null);
 </script>
 
 <style scoped>