fix

Web/src/App.vue

@@ -58,7 +58,8 @@ const cachedViews = ref([
   'StatisticsView', // 统计页面
   'StatisticsV2View', // 统计V2页面
   'BalanceView', // 账单页面
-  'BudgetView' // 预算页面
+  'BudgetView', // 预算页面
+  'BudgetV2View' // 预算V2页面
 ])
 
 const updateVh = () => {
@@ -156,7 +157,7 @@ const showNav = computed(() => {
     '/', '/statistics-v2',
     '/calendar', '/calendar-v2',
     '/balance', '/message',
-    '/budget', '/setting'
+    '/budget', '/budget-v2', '/setting'
   ].includes(route.path)
 })
 

Web/src/components/BudgetTypeTabs.vue

@@ -0,0 +1,96 @@
+<!--
+  预算类型选择器组件 (Budget Type Tabs)
+  用于预算页面的"支出/收入/计划"类型切换
+  样式与 TimePeriodTabs 保持一致（segmented control 风格）
+  支持亮色和暗色两种主题
+-->
+<template>
+  <div class="tabs-wrapper">
+    <div class="segmented-control">
+      <div
+        class="tab-item"
+        :class="{ active: activeTab === 0 }"
+        @click="$emit('change', 0)"
+      >
+        <span class="tab-text">支出</span>
+      </div>
+      <div
+        class="tab-item"
+        :class="{ active: activeTab === 1 }"
+        @click="$emit('change', 1)"
+      >
+        <span class="tab-text">收入</span>
+      </div>
+      <div
+        class="tab-item"
+        :class="{ active: activeTab === 2 }"
+        @click="$emit('change', 2)"
+      >
+        <span class="tab-text">计划</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  activeTab: {
+    type: Number,
+    required: true,
+    validator: (value) => [0, 1, 2].includes(value)
+  }
+})
+
+defineEmits(['change'])
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/theme.css';
+
+.tabs-wrapper {
+  padding: var(--spacing-sm) var(--spacing-xl);
+
+  .segmented-control {
+    display: flex;
+    background: var(--segmented-bg);
+    border-radius: 8px;
+    padding: 4px;
+    gap: 4px;
+    height: 40px;
+
+    .tab-item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background: transparent;
+
+      &.active {
+        background: var(--segmented-active-bg);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+
+        .tab-text {
+          color: var(--text-primary);
+          font-weight: var(--font-bold);
+        }
+      }
+
+      &:not(.active):hover {
+        background: rgba(128, 128, 128, 0.1);
+      }
+
+      .tab-text {
+        font-family: var(--font-primary);
+        font-size: var(--font-md);
+        font-weight: var(--font-medium);
+        color: var(--text-secondary);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        user-select: none;
+      }
+    }
+  }
+}
+</style>

Web/src/components/GlassBottomNav.vue

@@ -44,7 +44,7 @@ const props = defineProps({
         { name: 'calendar', label: '日历', icon: 'notes', path: '/calendar' },
         { name: 'statistics', label: '统计', icon: 'chart-trending-o', path: '/' },
         { name: 'balance', label: '账单', icon: 'balance-list', path: '/balance' },
-        { name: 'budget', label: '预算', icon: 'bill-o', path: '/budget' },
+        { name: 'budget', label: '预算', icon: 'bill-o', path: '/budget-v2' },
         { name: 'setting', label: '设置', icon: 'setting', path: '/setting' }
       ]
     }

Web/src/router/index.js

@@ -107,6 +107,12 @@ const router = createRouter({
       component: () => import('../views/BudgetView.vue'),
       meta: { requiresAuth: true }
     },
+    {
+      path: '/budget-v2',
+      name: 'budget-v2',
+      component: () => import('../views/budgetV2/Index.vue'),
+      meta: { requiresAuth: true, keepAlive: true }
+    },
     {
       path: '/scheduled-tasks',
       name: 'scheduled-tasks',

Web/src/views/budgetV2/modules/ExpenseBudgetContent.vue

@@ -0,0 +1,40 @@
+<template>
+  <!-- 统计图表分析 -->
+  <BudgetChartAnalysis
+    :overall-stats="stats"
+    :budgets="budgets"
+    :active-tab="0"
+    :selected-date="selectedDate"
+  />
+</template>
+
+<script setup>
+import BudgetChartAnalysis from '@/components/Budget/BudgetChartAnalysis.vue'
+
+// Props
+defineProps({
+  budgets: {
+    type: Array,
+    default: () => []
+  },
+  stats: {
+    type: Object,
+    default: () => ({})
+  },
+  uncoveredCategories: {
+    type: Array,
+    default: () => []
+  },
+  selectedDate: {
+    type: Date,
+    default: () => new Date()
+  }
+})
+
+// Emits
+defineEmits(['delete', 'edit'])
+</script>
+
+<style scoped lang="scss">
+/* 移除不需要的样式 */
+</style>

Web/src/views/budgetV2/modules/IncomeBudgetContent.vue

@@ -0,0 +1,40 @@
+<template>
+  <!-- 统计图表分析 -->
+  <BudgetChartAnalysis
+    :overall-stats="stats"
+    :budgets="budgets"
+    :active-tab="1"
+    :selected-date="selectedDate"
+  />
+</template>
+
+<script setup>
+import BudgetChartAnalysis from '@/components/Budget/BudgetChartAnalysis.vue'
+
+// Props
+defineProps({
+  budgets: {
+    type: Array,
+    default: () => []
+  },
+  stats: {
+    type: Object,
+    default: () => ({})
+  },
+  uncoveredCategories: {
+    type: Array,
+    default: () => []
+  },
+  selectedDate: {
+    type: Date,
+    default: () => new Date()
+  }
+})
+
+// Emits
+defineEmits(['delete', 'edit'])
+</script>
+
+<style scoped lang="scss">
+/* 移除不需要的样式 */
+</style>

Web/src/views/budgetV2/modules/SavingsBudgetContent.vue

@@ -0,0 +1,222 @@
+<template>
+  <!-- 存款计划列表 -->
+  <div class="budget-list">
+    <template v-if="budgets?.length > 0">
+      <BudgetCard
+        v-for="budget in budgets"
+        :key="budget.id"
+        :budget="budget"
+        :progress-color="getProgressColor(budget)"
+        :percent-class="{ income: budget.current / budget.limit >= 1 }"
+        :period-label="getPeriodLabel(budget.type)"
+        style="margin: 0 12px 12px"
+      >
+        <template #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>
+        </template>
+
+        <template #footer>
+          <div class="card-footer-actions">
+            <van-button
+              size="small"
+              icon="arrow-left"
+              plain
+              type="primary"
+              @click.stop="$emit('savings-nav', budget, -1)"
+            />
+            <span class="current-date-label">
+              {{ getSavingsDateLabel(budget) }}
+            </span>
+            <van-button
+              size="small"
+              icon="arrow"
+              plain
+              type="primary"
+              icon-position="right"
+              :disabled="disabledSavingsNextNav(budget)"
+              @click.stop="$emit('savings-nav', budget, 1)"
+            />
+          </div>
+        </template>
+      </BudgetCard>
+    </template>
+    <van-empty
+      v-else
+      description="暂无存款计划"
+    />
+  </div>
+</template>
+
+<script setup>
+import BudgetCard from '@/components/Budget/BudgetCard.vue'
+import { BudgetPeriodType } from '@/constants/enums'
+
+// Props
+defineProps({
+  budgets: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Emits
+defineEmits(['savings-nav'])
+
+// 辅助函数
+const formatMoney = (val) => {
+  return parseFloat(val || 0).toLocaleString(undefined, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  })
+}
+
+const getPeriodLabel = (type) => {
+  if (type === BudgetPeriodType.Month) {
+    return '月度'
+  }
+  if (type === BudgetPeriodType.Year) {
+    return '年度'
+  }
+  return '周期'
+}
+
+const getSavingsDateLabel = (budget) => {
+  if (!budget.periodStart) {
+    return ''
+  }
+  const date = new Date(budget.periodStart)
+  if (budget.type === BudgetPeriodType.Year) {
+    return `${date.getFullYear()}年`
+  } else {
+    return `${date.getFullYear()}年${date.getMonth() + 1}月`
+  }
+}
+
+const disabledSavingsNextNav = (budget) => {
+  if (!budget.periodStart) {
+    return true
+  }
+  const date = new Date(budget.periodStart)
+  const now = new Date()
+  if (budget.type === BudgetPeriodType.Year) {
+    return date.getFullYear() === now.getFullYear()
+  } else {
+    return date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth()
+  }
+}
+
+const getProgressColor = (budget) => {
+  if (!budget.limit || budget.limit === 0) {
+    return 'var(--van-primary-color)'
+  }
+
+  const ratio = Math.min(Math.max(budget.current / budget.limit, 0), 1)
+
+  const interpolate = (start, end, t) => {
+    return Math.round(start + (end - start) * t)
+  }
+
+  const getGradientColor = (value, stops) => {
+    let startStop = stops[0]
+    let endStop = stops[stops.length - 1]
+
+    for (let i = 0; i < stops.length - 1; i++) {
+      if (value >= stops[i].p && value <= stops[i + 1].p) {
+        startStop = stops[i]
+        endStop = stops[i + 1]
+        break
+      }
+    }
+
+    const range = endStop.p - startStop.p
+    const t = (value - startStop.p) / range
+
+    const r = interpolate(startStop.c.r, endStop.c.r, t)
+    const g = interpolate(startStop.c.g, endStop.c.g, t)
+    const b = interpolate(startStop.c.b, endStop.c.b, t)
+
+    return `rgb(${r}, ${g}, ${b})`
+  }
+
+  const stops = [
+    { p: 0, c: { r: 245, g: 34, b: 45 } },
+    { p: 0.45, c: { r: 255, g: 204, b: 204 } },
+    { p: 0.5, c: { r: 240, g: 242, b: 245 } },
+    { p: 0.55, c: { r: 186, g: 231, b: 255 } },
+    { p: 1, c: { r: 24, g: 144, b: 255 } }
+  ]
+
+  return getGradientColor(ratio, stops)
+}
+</script>
+
+<style scoped lang="scss">
+.budget-list {
+  padding-top: 8px;
+  padding-bottom: 20px;
+}
+
+.card-footer-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--van-border-color);
+}
+
+.current-date-label {
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--van-text-color);
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.info-item .label {
+  font-size: 12px;
+  color: var(--van-text-color-2);
+  margin-bottom: 4px;
+}
+
+.info-item .value {
+  font-size: 16px;
+  font-weight: 600;
+  font-family: DIN Alternate, system-ui;
+}
+
+.info-item .value.expense {
+  color: var(--van-danger-color);
+}
+
+.info-item .value.income {
+  color: var(--van-success-color);
+}
+</style>

Web/src/views/calendarV2/modules/Calendar.vue

@@ -368,17 +368,17 @@ const getAriaLabel = (day) => {
   const date = new Date(day.date)
   const dateStr = formatDateKey(date)
   let label = dateStr
-  
+
   if (day.isHoliday) {
     const type = day.isWorkday ? '调休工作日' : '休息日'
     label += ` ${day.holidayName} ${type}`
   }
-  
+
   if (day.hasData) {
     const amountType = day.isProfitable ? '收入' : '支出'
     label += ` ${amountType} ${day.amount}元`
   }
-  
+
   return label
 }