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

Web/src/App.vue

@@ -9,11 +9,17 @@
         <van-tabbar-item name="statistics" icon="chart-trending-o" to="/" @click="handleTabClick('/statistics')">
           统计
         </van-tabbar-item>
-        <van-tabbar-item name="balance" icon="balance-list" to="/balance" @click="handleTabClick('/balance')">
-          账单
+        <van-tabbar-item name="budget" icon="bill-o" to="/budget" @click="handleTabClick('/budget')">
+          预算
         </van-tabbar-item>
-        <van-tabbar-item name="message" icon="comment" to="/message" @click="handleTabClick('/message')" :badge="messageStore.unreadCount || null">
-          消息
+        <van-tabbar-item 
+          name="balance" 
+          icon="balance-list" 
+          :to="messageStore.unreadCount > 0 ? '/balance?tab=message' : '/balance'" 
+          @click="handleTabClick('/balance')" 
+          :badge="messageStore.unreadCount || null"
+        >
+          账单
         </van-tabbar-item>
         <van-tabbar-item name="setting" icon="setting" to="/setting">
           设置
@@ -69,7 +75,8 @@ const showTabbar = computed(() => {
     route.path === '/calendar' ||
     route.path === '/message' ||
     route.path === '/setting' ||
-    route.path === '/balance'
+    route.path === '/balance' ||
+    route.path === '/budget'
 })
 
 const active = ref('')
@@ -105,11 +112,12 @@ const setActive = (path) => {
       case '/calendar':
         return 'ccalendar'
       case '/balance':
-        return 'balance'
       case '/message':
-        return 'message'
+        return 'balance'
       case '/setting':
         return 'setting'
+      case '/budget':
+        return 'budget'
       default:
         return 'statistics'
     }

Web/src/router/index.js

@@ -73,7 +73,7 @@ const router = createRouter({
     {
       path: '/message',
       name: 'message',
-      component: () => import('../views/MessageView.vue'),
+      redirect: { path: '/balance', query: { tab: 'message' } },
       meta: { requiresAuth: true },
     },
     {
@@ -87,6 +87,12 @@ const router = createRouter({
       name: 'log',
       component: () => import('../views/LogView.vue'),
       meta: { requiresAuth: true },
+    },
+    {
+      path: '/budget',
+      name: 'budget',
+      component: () => import('../views/BudgetView.vue'),
+      meta: { requiresAuth: true },
     }
   ],
 })

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>

Web/src/views/BudgetView.vue

@@ -0,0 +1,769 @@
+<template>
+  <div class="page-container">
+    <van-nav-bar title="预算管理" placeholder fixed z-index="100">
+      <template #right>
+        <van-icon name="plus" size="20" @click="showAddPopup = true" />
+      </template>
+    </van-nav-bar>
+
+    <div class="page-content">
+      <van-tabs v-model:active="activeTab" sticky offset-top="46" type="card">
+        <van-tab title="支出" name="expense">
+          <div class="budget-list">
+            <template v-if="expenseBudgets?.length > 0">
+              <van-swipe-cell v-for="budget in expenseBudgets" :key="budget.id">
+                <div class="common-card budget-card">
+                  <div class="card-header">
+                    <div class="budget-info">
+                      <h3 class="card-title">{{ budget.name }}</h3>
+                      <van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
+                      <van-tag v-else type="success" size="small" plain>进行中</van-tag>
+                    </div>
+                    <div class="header-actions">
+                      <van-button icon="replay" size="mini" plain round @click="handleSync(budget)" :loading="budget.syncing" />
+                      <van-button :icon="budget.isStopped ? 'play' : 'pause'" size="mini" plain round @click="handleToggleStop(budget)" />
+                    </div>
+                  </div>
+                  
+                  <div class="budget-body">
+                    <div class="amount-info">
+                      <div class="info-item">
+                        <div class="label">当前</div>
+                        <div class="value expense">¥{{ formatMoney(budget.current) }}</div>
+                      </div>
+                      <div class="info-item">
+                        <div class="label">预算</div>
+                        <div class="value">¥{{ formatMoney(budget.limit) }}</div>
+                      </div>
+                      <div class="info-item">
+                        <div class="label">结余</div>
+                        <div class="value" :class="budget.limit - budget.current >= 0 ? 'income' : 'expense'">
+                          ¥{{ formatMoney(budget.limit - budget.current) }}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="progress-section">
+                      <div class="progress-info">
+                        <span class="period-type">{{ getPeriodLabel(budget.type) }}进度</span>
+                        <span class="percent" :class="{ 'warning': (budget.current / budget.limit) > 0.8 }">
+                          {{ Math.round((budget.current / budget.limit) * 100) }}%
+                        </span>
+                      </div>
+                      <van-progress 
+                        :percentage="Math.min(Math.round((budget.current / budget.limit) * 100), 100)" 
+                        stroke-width="8"
+                        :color="getProgressColor(budget)"
+                        :show-pivot="false"
+                      />
+                    </div>
+                  </div>
+
+                  <div class="card-footer">
+                    <div class="period-navigation">
+                      <van-icon name="arrow-left" class="nav-icon" @click="handleSwitchPeriod(budget, -1)" />
+                      <span class="period-text">{{ budget.period }}</span>
+                      <van-icon name="arrow" class="nav-icon" @click="handleSwitchPeriod(budget, 1)" />
+                    </div>
+                    <span class="sync-time">上次同步: {{ budget.lastSync }}</span>
+                  </div>
+                </div>
+                <template #right>
+                  <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
+                </template>
+              </van-swipe-cell>
+            </template>
+            <van-empty v-else description="暂无支出预算" />
+          </div>
+        </van-tab>
+
+        <van-tab title="收入" name="income">
+          <div class="budget-list">
+            <template v-if="incomeBudgets?.length > 0">
+              <van-swipe-cell v-for="budget in incomeBudgets" :key="budget.id">
+                <div class="common-card budget-card">
+                  <div class="card-header">
+                    <div class="budget-info">
+                      <h3 class="card-title">{{ budget.name }}</h3>
+                      <van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
+                      <van-tag v-else type="success" size="small" plain>进行中</van-tag>
+                    </div>
+                    <div class="header-actions">
+                      <van-button icon="replay" size="mini" plain round @click="handleSync(budget)" :loading="budget.syncing" />
+                      <van-button :icon="budget.isStopped ? 'play' : 'pause'" size="mini" plain round @click="handleToggleStop(budget)" />
+                    </div>
+                  </div>
+                  
+                  <div class="budget-body">
+                    <div class="amount-info">
+                      <div class="info-item">
+                        <div class="label">当前已收</div>
+                        <div class="value income">¥{{ formatMoney(budget.current) }}</div>
+                      </div>
+                      <div class="info-item">
+                        <div class="label">目标收入</div>
+                        <div class="value">¥{{ formatMoney(budget.limit) }}</div>
+                      </div>
+                      <div class="info-item">
+                        <div class="label">差额</div>
+                        <div class="value" :class="budget.current >= budget.limit ? 'income' : 'expense'">
+                          ¥{{ formatMoney(Math.abs(budget.limit - budget.current)) }}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="progress-section">
+                      <div class="progress-info">
+                        <span class="period-type">{{ getPeriodLabel(budget.type) }}达成度</span>
+                        <span class="percent" :class="{ 'income': (budget.current / budget.limit) >= 1 }">
+                          {{ Math.round((budget.current / budget.limit) * 100) }}%
+                        </span>
+                      </div>
+                      <van-progress 
+                        :percentage="Math.min(Math.round((budget.current / budget.limit) * 100), 100)" 
+                        stroke-width="8"
+                        :color="getIncomeProgressColor(budget)"
+                        :show-pivot="false"
+                      />
+                    </div>
+                  </div>
+
+                  <div class="card-footer">
+                    <div class="period-navigation">
+                      <van-icon name="arrow-left" class="nav-icon" @click="handleSwitchPeriod(budget, -1)" />
+                      <span class="period-text">{{ budget.period }}</span>
+                      <van-icon name="arrow" class="nav-icon" @click="handleSwitchPeriod(budget, 1)" />
+                    </div>
+                    <span class="sync-time">上次同步: {{ budget.lastSync }}</span>
+                  </div>
+                </div>
+                <template #right>
+                  <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
+                </template>
+              </van-swipe-cell>
+            </template>
+            <van-empty v-else description="暂无收入预算" />
+          </div>
+        </van-tab>
+
+        <van-tab title="存款" name="savings">
+          <div class="budget-list">
+            <template v-if="savingsBudgets?.length > 0">
+              <van-swipe-cell v-for="budget in savingsBudgets" :key="budget.id">
+                <div class="common-card budget-card">
+                  <div class="card-header">
+                    <div class="budget-info">
+                      <h3 class="card-title">{{ budget.name }}</h3>
+                      <van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
+                      <van-tag v-else type="success" size="small" plain>积累中</van-tag>
+                    </div>
+                    <div class="header-actions">
+                      <van-button icon="replay" size="mini" plain round @click="handleSync(budget)" :loading="budget.syncing" />
+                      <van-button :icon="budget.isStopped ? 'play' : 'pause'" size="mini" plain round @click="handleToggleStop(budget)" />
+                    </div>
+                  </div>
+                  
+                  <div class="budget-body">
+                    <div class="amount-info">
+                      <div class="info-item">
+                        <div class="label">已存</div>
+                        <div class="value income">¥{{ formatMoney(budget.current) }}</div>
+                      </div>
+                      <div class="info-item">
+                        <div class="label">目标</div>
+                        <div class="value">¥{{ formatMoney(budget.limit) }}</div>
+                      </div>
+                      <div class="info-item">
+                        <div class="label">还差</div>
+                        <div class="value expense">
+                          ¥{{ formatMoney(Math.max(0, budget.limit - budget.current)) }}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="progress-section">
+                      <div class="progress-info">
+                        <span class="period-type">储蓄进度</span>
+                        <span class="percent" :class="{ 'income': (budget.current / budget.limit) >= 1 }">
+                          {{ Math.round((budget.current / budget.limit) * 100) }}%
+                        </span>
+                      </div>
+                      <van-progress 
+                        :percentage="Math.min(Math.round((budget.current / budget.limit) * 100), 100)" 
+                        stroke-width="8"
+                        color="#07c160"
+                        :show-pivot="false"
+                      />
+                    </div>
+                  </div>
+
+                  <div class="card-footer">
+                    <div class="period-navigation">
+                      <van-icon name="arrow-left" class="nav-icon" @click="handleSwitchPeriod(budget, -1)" />
+                      <span class="period-text">
+                        {{ budget.period }}
+                      </span>
+                      <van-icon name="arrow" class="nav-icon" @click="handleSwitchPeriod(budget, 1)" />
+                    </div>
+                    <span class="sync-time">上次同步: {{ budget.lastSync }}</span>
+                  </div>
+                </div>
+                <template #right>
+                  <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
+                </template>
+              </van-swipe-cell>
+            </template>
+            <van-empty v-else description="暂无存款计划" />
+          </div>
+        </van-tab>
+      </van-tabs>
+    </div>
+
+    <!-- 添加预算弹窗 -->
+    <PopupContainer v-model="showAddPopup" title="新增预算" height="70%">
+      <div class="add-budget-form">
+        <van-form @submit="onSubmit">
+          <van-cell-group inset>
+            <van-field
+              v-model="form.name"
+              name="name"
+              label="预算名称"
+              placeholder="例如：每月餐饮、年度奖金"
+              :rules="[{ required: true, message: '请填写预算名称' }]"
+            />
+            <van-field name="type" label="统计周期">
+              <template #input>
+                <van-radio-group v-model="form.type" direction="horizontal">
+                  <van-radio name="week">周</van-radio>
+                  <van-radio name="month">月</van-radio>
+                  <van-radio name="year">年</van-radio>
+                  <van-radio name="longterm">长期</van-radio>
+                </van-radio-group>
+              </template>
+            </van-field>
+            <van-field
+              v-model="form.limit"
+              type="number"
+              name="limit"
+              label="预算金额"
+              placeholder="0.00"
+              :rules="[{ required: true, message: '请填写预算金额' }]"
+            >
+              <template #extra>
+                <span>元</span>
+              </template>
+            </van-field>
+            <van-field name="category" label="类型">
+              <template #input>
+                <van-radio-group v-model="form.category" direction="horizontal">
+                  <van-radio name="expense">支出</van-radio>
+                  <van-radio name="income">收入</van-radio>
+                  <van-radio name="savings">存款</van-radio>
+                </van-radio-group>
+              </template>
+            </van-field>
+            <van-field label="相关分类">
+              <template #input>
+                <div v-if="form.selectedCategories.length === 0" style="color: #c8c9cc;">可多选分类</div>
+                <div v-else class="selected-categories">
+                  <span class="ellipsis-text">
+                    {{ form.selectedCategories.join('、') }}
+                  </span>
+                </div>
+              </template>
+            </van-field>
+            <div class="classify-buttons">
+              <van-button
+                v-if="filteredCategories.length > 0"
+                :type="isAllSelected ? 'primary' : 'default'"
+                size="small"
+                class="classify-btn all-btn"
+                @click="toggleAll"
+              >
+                {{ isAllSelected ? '取消全选' : '全选' }}
+              </van-button>
+              <van-button
+                v-for="item in filteredCategories"
+                :key="item.id"
+                :type="form.selectedCategories.includes(item.name) ? 'primary' : 'default'"
+                size="small"
+                class="classify-btn"
+                @click="toggleCategory(item.name)"
+              >
+                {{ item.name }}
+              </van-button>
+              <div v-if="filteredCategories.length === 0" class="no-data">暂无分类</div>
+            </div>
+            
+          </van-cell-group>
+          <div style="margin: 32px 16px;">
+            <van-button round block type="primary" native-type="submit">
+              保 存
+            </van-button>
+          </div>
+        </van-form>
+      </div>
+    </PopupContainer>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed, watch } from 'vue'
+import { showToast, showConfirmDialog } from 'vant'
+import PopupContainer from '@/components/PopupContainer.vue'
+import { getCategoryList } from '@/api/transactionCategory'
+
+const activeTab = ref('expense')
+const showAddPopup = ref(false)
+const categories = ref([])
+
+// 模拟数据 (提前定义以防止模板渲染时 undefined)
+const expenseBudgets = ref([
+  {
+    id: 1,
+    name: '总支出预算',
+    type: 'month',
+    limit: 5000,
+    current: 3250.5,
+    isStopped: false,
+    startDate: '2026-01-01',
+    period: '2026-01-01 ~ 2026-01-31',
+    lastSync: '2026-01-06 10:00',
+    syncing: false
+  },
+  {
+    id: 2,
+    name: '餐饮美食',
+    type: 'month',
+    limit: 1500,
+    current: 1420,
+    isStopped: false,
+    startDate: '2026-01-01',
+    period: '2026-01-01 ~ 2026-01-31',
+    lastSync: '2026-01-06 09:30',
+    syncing: false
+  },
+  {
+    id: 3,
+    name: '年度旅游',
+    type: 'year',
+    limit: 10000,
+    current: 0,
+    isStopped: true,
+    startDate: '2026-01-01',
+    period: '2026-01-01 ~ 2026-12-31',
+    lastSync: '2026-01-01 00:00',
+    syncing: false
+  }
+])
+
+const incomeBudgets = ref([
+  {
+    id: 101,
+    name: '月度薪资',
+    type: 'month',
+    limit: 10000,
+    current: 10000,
+    isStopped: false,
+    startDate: '2026-01-01',
+    period: '2026-01-01 ~ 2026-01-31',
+    lastSync: '2026-01-06 10:05',
+    syncing: false
+  },
+  {
+    id: 102,
+    name: '理财收益',
+    type: 'year',
+    limit: 2000,
+    current: 450.8,
+    isStopped: false,
+    startDate: '2026-01-01',
+    period: '2026-01-01 ~ 2026-12-31',
+    lastSync: '2026-01-06 10:05',
+    syncing: false
+  }
+])
+
+const savingsBudgets = ref([
+  {
+    id: 201,
+    name: '买房基金',
+    type: 'year',
+    limit: 500000,
+    current: 125000,
+    isStopped: false,
+    startDate: '2025-01-01',
+    period: '2025-01-01 ~ 2030-12-31',
+    lastSync: '2026-01-06 11:00',
+    syncing: false
+  },
+  {
+    id: 202,
+    name: '养老金',
+    type: 'year',
+    limit: 1000000,
+    current: 50000,
+    isStopped: false,
+    startDate: '2026-01-01',
+    period: '长期',
+    lastSync: '2026-01-06 11:00',
+    syncing: false
+  }
+])
+
+const form = reactive({
+  name: '',
+  type: 'month',
+  category: 'expense',
+  limit: '',
+  selectedCategories: []
+})
+
+const categoryTypeMap = {
+  expense: 0,
+  income: 1,
+  savings: 2
+}
+
+const filteredCategories = computed(() => {
+  const targetType = categoryTypeMap[form.category]
+  return categories.value.filter(c => c.type === targetType)
+})
+
+const toggleCategory = (name) => {
+  const index = form.selectedCategories.indexOf(name)
+  if (index > -1) {
+    form.selectedCategories.splice(index, 1)
+  } else {
+    form.selectedCategories.push(name)
+  }
+}
+
+const isAllSelected = computed(() => {
+  return filteredCategories.value.length > 0 && 
+         filteredCategories.value.every(c => form.selectedCategories.includes(c.name))
+})
+
+const toggleAll = () => {
+  if (isAllSelected.value) {
+    form.selectedCategories = []
+  } else {
+    form.selectedCategories = filteredCategories.value.map(c => c.name)
+  }
+}
+
+onMounted(async () => {
+  try {
+    const res = await getCategoryList()
+    if (res.success) {
+      categories.value = res.data || []
+    }
+  } catch (err) {
+    console.error('加载分类失败', err)
+  }
+})
+
+watch(() => form.category, () => {
+  form.selectedCategories = []
+})
+
+const formatMoney = (val) => {
+  return parseFloat(val).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+}
+
+const getPeriodLabel = (type) => {
+  const map = {
+    week: '本周',
+    month: '本月',
+    year: '本年'
+  }
+  return map[type] || '周期'
+}
+
+const getProgressColor = (budget) => {
+  const ratio = budget.current / budget.limit
+  if (ratio >= 1) return '#ee0a24' // 危险红色
+  if (ratio > 0.8) return '#ff976a' // 警告橙色
+  return '#1989fa' // 正常蓝色
+}
+
+const getIncomeProgressColor = (budget) => {
+  const ratio = budget.current / budget.limit
+  if (ratio >= 1) return '#07c160' // 完成绿色
+  return '#1989fa' // 蓝色
+}
+
+const getPeriodRange = (startDate, type) => {
+  if (!startDate || startDate === '长期') return startDate
+  const start = new Date(startDate)
+  let end = new Date(startDate)
+  
+  if (type === 'week') {
+    end.setDate(start.getDate() + 6)
+  } else if (type === 'month') {
+    end = new Date(start.getFullYear(), start.getMonth() + 1, 0)
+  } else if (type === 'year') {
+    end = new Date(start.getFullYear(), 11, 31)
+  }
+  
+  const format = (d) => d.toISOString().split('T')[0]
+  return `${format(start)} ~ ${format(end)}`
+}
+
+const handleSwitchPeriod = (budget, direction) => {
+  if (!budget.startDate || budget.period === '长期') return
+  
+  const currentStart = new Date(budget.startDate)
+  if (budget.type === 'week') {
+    currentStart.setDate(currentStart.getDate() + direction * 7)
+  } else if (budget.type === 'month') {
+    currentStart.setMonth(currentStart.getMonth() + direction)
+    currentStart.setDate(1)
+  } else if (budget.type === 'year') {
+    currentStart.setFullYear(currentStart.getFullYear() + direction)
+    currentStart.setMonth(0)
+    currentStart.setDate(1)
+  }
+  
+  budget.startDate = currentStart.toISOString().split('T')[0]
+  budget.period = getPeriodRange(budget.startDate, budget.type)
+  
+  // 模拟数据更新
+  budget.current = Math.floor(Math.random() * budget.limit * 1.2 * 100) / 100
+  budget.lastSync = new Date().toLocaleString()
+}
+
+const handleDelete = (budget) => {
+  showConfirmDialog({
+    title: '确认删除',
+    message: `确定要删除预算 "${budget.name}" 吗？`,
+  }).then(() => {
+    expenseBudgets.value = expenseBudgets.value.filter(b => b.id !== budget.id)
+    incomeBudgets.value = incomeBudgets.value.filter(b => b.id !== budget.id)
+    savingsBudgets.value = savingsBudgets.value.filter(b => b.id !== budget.id)
+    showToast('已删除')
+  }).catch(() => {})
+}
+
+const handleSync = (budget) => {
+  budget.syncing = true
+  setTimeout(() => {
+    budget.syncing = false
+    budget.lastSync = new Date().toLocaleString()
+    showToast('同步成功')
+  }, 1000)
+}
+
+const handleToggleStop = (budget) => {
+  budget.isStopped = !budget.isStopped
+  showToast(budget.isStopped ? '已停止' : '已恢复')
+}
+
+const onSubmit = () => {
+  const startDate = new Date()
+  if (form.type === 'month') startDate.setDate(1)
+  if (form.type === 'year') {
+    startDate.setMonth(0)
+    startDate.setDate(1)
+  }
+  const startDateStr = startDate.toISOString().split('T')[0]
+
+  const newBudget = {
+    id: Date.now(),
+    name: form.name,
+    type: form.type,
+    limit: parseFloat(form.limit),
+    categories: [...form.selectedCategories],
+    current: 0,
+    isStopped: false,
+    startDate: startDateStr,
+    period: getPeriodRange(startDateStr, form.type),
+    lastSync: '刚刚',
+    syncing: false
+  }
+
+  if (form.category === 'expense') {
+    expenseBudgets.value.unshift(newBudget)
+    activeTab.value = 'expense'
+  } else if (form.category === 'income') {
+    incomeBudgets.value.unshift(newBudget)
+    activeTab.value = 'income'
+  } else {
+    savingsBudgets.value.unshift(newBudget)
+    activeTab.value = 'savings'
+  }
+
+  showAddPopup.value = false
+  showToast('添加成功')
+  
+  // 重置表单
+  form.name = ''
+  form.limit = ''
+  form.selectedCategories = []
+}
+</script>
+
+<style scoped>
+.budget-list {
+  padding-top: 8px;
+  padding-bottom: 20px;
+}
+
+.budget-list :deep(.van-swipe-cell) {
+  margin: 0 12px 12px;
+}
+
+.budget-card {
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+}
+
+.budget-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.amount-info {
+  display: flex;
+  justify-content: space-between;
+  margin: 16px 0;
+  text-align: center;
+}
+
+.info-item .label {
+  font-size: 12px;
+  color: #969799;
+  margin-bottom: 4px;
+}
+
+.info-item .value {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.value.expense {
+  color: #ee0a24;
+}
+
+.value.income {
+  color: #07c160;
+}
+
+.progress-section {
+  margin-bottom: 16px;
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  margin-bottom: 6px;
+  color: #646566;
+}
+
+.percent.warning {
+  color: #ff976a;
+  font-weight: bold;
+}
+
+.percent.income {
+  color: #07c160;
+  font-weight: bold;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 11px;
+  color: #969799;
+  padding-top: 12px;
+  border-top: 1px solid #ebedf0;
+}
+
+.period-navigation {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.nav-icon {
+  padding: 4px;
+  font-size: 12px;
+  color: #1989fa;
+  cursor: pointer;
+}
+
+.nav-icon:active {
+  opacity: 0.6;
+}
+
+.delete-button {
+  height: 100%;
+}
+
+@media (prefers-color-scheme: dark) {
+  .card-footer {
+    border-top-color: #2c2c2c;
+  }
+}
+
+.add-budget-form {
+  padding: 20px 0;
+}
+
+.selected-categories {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.ellipsis-text {
+  font-size: 14px;
+  color: #323233;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.classify-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px 16px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.classify-btn {
+  flex: 0 0 auto;
+  min-width: 60px;
+  border-radius: 16px;
+  padding: 0 12px;
+}
+
+.all-btn {
+  font-weight: bold;
+  border-style: dashed;
+}
+
+.no-data {
+  font-size: 13px;
+  color: #969799;
+  padding: 8px 0;
+}
+
+:deep(.van-tabs__nav--card) {
+  margin: 0 12px;
+}
+</style>

Web/src/views/MessageView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-container-flex">
-    <van-nav-bar title="消息中心">
+    <van-nav-bar v-if="!isComponent" title="消息中心">
       <template #right>
         <van-icon name="passed" size="18" @click="handleMarkAllRead" />
       </template>
@@ -207,6 +207,16 @@ const handleMarkAllRead = () => {
 onMounted(() => {
   // onLoad 会由 van-list 自动触发
 });
+const props = defineProps({
+  isComponent: {
+    type: Boolean,
+    default: false
+  }
+});
+
+defineExpose({
+  handleMarkAllRead
+});
 </script>
 
 <style scoped>