1

Web/src/views/calendarV2/Index.vue

@@ -1,34 +1,14 @@
 <template>
   <div class="page-container-flex calendar-v2-wrapper">
     <!-- 头部固定 -->
-    <header class="calendar-header">
-      <button
-        class="month-nav-btn"
-        aria-label="上一月"
-        @click="changeMonth(-1)"
-      >
-        <van-icon name="arrow-left" />
-      </button>
-      <div class="header-content">
-        <h1 class="header-title">
-          {{ currentMonth }}
-        </h1>
-      </div>
-      <button
-        class="month-nav-btn"
-        aria-label="下一月"
-        @click="changeMonth(1)"
-      >
-        <van-icon name="arrow" />
-      </button>
-      <button
-        class="notif-btn"
-        aria-label="通知"
-        @click="onNotificationClick"
-      >
-        <van-icon name="bell" />
-      </button>
-    </header>
+    <CalendarHeader
+      type="month"
+      :current-date="currentDate"
+      @prev="changeMonth(-1)"
+      @next="changeMonth(1)"
+      @jump="onDateJump"
+      @notification="onNotificationClick"
+    />
 
     <!-- 可滚动内容区域 -->
     <div class="calendar-scroll-content">
@@ -73,17 +53,42 @@
       @save="handleTransactionSave"
       @delete="handleTransactionDelete"
     />
+
+    <!-- 日期选择器弹窗 -->
+    <van-popup
+      v-model:show="showDatePicker"
+      position="bottom"
+      round
+    >
+      <van-date-picker
+        v-model="pickerDate"
+        title="选择年月"
+        :min-date="new Date(2020, 0, 1)"
+        :max-date="new Date()"
+        :columns-type="['year', 'month']"
+        @confirm="onDatePickerConfirm"
+        @cancel="onDatePickerCancel"
+      />
+    </van-popup>
+
+    <!-- 液态玻璃底部导航栏 -->
+    <GlassBottomNav
+      v-model="activeTab"
+      @tab-click="handleTabClick"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
+import { ref, onMounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast } from 'vant'
+import CalendarHeader from '@/components/DateSelectHeader.vue'
 import CalendarModule from './modules/Calendar.vue'
 import StatsModule from './modules/Stats.vue'
 import TransactionListModule from './modules/TransactionList.vue'
 import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
+import GlassBottomNav from '@/components/GlassBottomNav.vue'
 import { getTransactionDetail } from '@/api/transactionRecord'
 
 // 定义组件名称（keep-alive 需要通过 name 识别）
@@ -94,6 +99,13 @@ defineOptions({
 // 路由
 const router = useRouter()
 
+// 底部导航栏
+const activeTab = ref('calendar')
+const handleTabClick = (item, index) => {
+  console.log('Tab clicked:', item.name, index)
+  // 导航逻辑已在组件内部处理
+}
+
 // 下拉刷新状态
 const refreshing = ref(false)
 
@@ -105,12 +117,9 @@ const selectedDate = ref(new Date())
 const slideDirection = ref('slide-left')
 const calendarKey = ref(0)
 
-// 当前月份格式化（中文）
-const currentMonth = computed(() => {
-  const year = currentDate.value.getFullYear()
-  const month = currentDate.value.getMonth() + 1
-  return `${year}年${month}月`
-})
+// 日期选择器相关
+const showDatePicker = ref(false)
+const pickerDate = ref(new Date())
 
 // 格式化日期为 key (yyyy-MM-dd)
 const formatDateKey = (date) => {
@@ -181,6 +190,38 @@ const onNotificationClick = () => {
   router.push('/message')
 }
 
+// 点击日期标题，打开日期选择器
+const onDateJump = () => {
+  pickerDate.value = new Date(currentDate.value)
+  showDatePicker.value = true
+}
+
+// 确认日期选择
+const onDatePickerConfirm = ({ selectedValues }) => {
+  const [year, month] = selectedValues
+  const newDate = new Date(year, month - 1, 1)
+
+  // 检查是否超过当前月
+  const today = new Date()
+  if (newDate.getFullYear() > today.getFullYear() ||
+    (newDate.getFullYear() === today.getFullYear() && newDate.getMonth() > today.getMonth())) {
+    showToast('不能选择未来的月份')
+    showDatePicker.value = false
+    return
+  }
+
+  // 更新日期
+  currentDate.value = newDate
+  selectedDate.value = newDate
+  calendarKey.value += 1
+  showDatePicker.value = false
+}
+
+// 取消日期选择
+const onDatePickerCancel = () => {
+  showDatePicker.value = false
+}
+
 // 点击 Smart 按钮 - 跳转到智能分类页面
 const onSmartClick = () => {
   router.push({
@@ -346,68 +387,6 @@ onBeforeUnmount(() => {
   background-color: var(--bg-primary);
 }
 
-/* ========== 头部 ========== */
-.calendar-header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 8px 24px;
-  gap: 8px;
-  background: transparent !important;
-  position: relative;
-  z-index: 1;
-}
-
-.header-content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.header-title {
-  font-family: var(--font-primary);
-  font-size: var(--font-2xl);
-  font-weight: var(--font-medium);
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.notif-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-full);
-  background-color: var(--bg-button);
-  border: none;
-  cursor: pointer;
-  transition: opacity 0.2s;
-  margin-left: auto;
-}
-
-.notif-btn:active {
-  opacity: 0.7;
-}
-
-.month-nav-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 18px;
-  background-color: transparent;
-  border: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.month-nav-btn:active {
-  background-color: var(--bg-tertiary);
-}
-
 /* 底部安全距离 */
 .bottom-spacer {
   height: calc(60px + env(safe-area-inset-bottom, 0px));