fix

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' }
       ]
     }