1

Web/src/router/index.js

@@ -38,7 +38,7 @@ const router = createRouter({
     {
       path: '/calendar-v2',
       name: 'calendar-v2',
-      component: () => import('../views/CalendarV2.vue'),
+      component: () => import('../views/calendarV2/Index.vue'),
       meta: { requiresAuth: true }
     },
     {

Web/src/views/calendarV2/Index.vue

@@ -0,0 +1,380 @@
+<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>
+
+    <!-- 可滚动内容区域 -->
+    <div class="calendar-scroll-content">
+      <!-- 下拉刷新 -->
+      <van-pull-refresh
+        v-model="refreshing"
+        @refresh="onRefresh"
+      >
+        <!-- 日历模块 -->
+        <CalendarModule
+          :current-date="currentDate"
+          :selected-date="selectedDate"
+          :slide-direction="slideDirection"
+          :calendar-key="calendarKey"
+          @day-click="onDayClick"
+          @touch-start="onTouchStart"
+          @touch-move="onTouchMove"
+          @touch-end="onTouchEnd"
+        />
+
+        <!-- 统计模块 -->
+        <StatsModule
+          :selected-date="selectedDate"
+        />
+
+        <!-- 交易列表模块 -->
+        <TransactionListModule
+          :selected-date="selectedDate"
+          @transaction-click="onTransactionClick"
+          @smart-click="onSmartClick"
+        />
+
+        <!-- 底部安全距离 -->
+        <div class="bottom-spacer" />
+      </van-pull-refresh>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant'
+import CalendarModule from './modules/Calendar.vue'
+import StatsModule from './modules/Stats.vue'
+import TransactionListModule from './modules/TransactionList.vue'
+
+// 定义组件名称（keep-alive 需要通过 name 识别）
+defineOptions({
+  name: 'CalendarV2'
+})
+
+// 路由
+const router = useRouter()
+
+// 下拉刷新状态
+const refreshing = ref(false)
+
+// 当前日期
+const currentDate = ref(new Date())
+const selectedDate = ref(new Date())
+
+// 动画方向和 key（用于触发过渡）
+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}月`
+})
+
+// 格式化日期为 key (yyyy-MM-dd)
+const formatDateKey = (date) => {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+// 点击日期
+const onDayClick = async (day) => {
+  const clickedDate = new Date(day.date)
+
+  // 如果点击的是其他月份的单元格，切换到对应的月份
+  if (!day.isCurrentMonth) {
+    // 设置动画方向：点击上月日期向右滑，点击下月日期向左滑
+    const clickedMonth = clickedDate.getMonth()
+    const currentMonth = currentDate.value.getMonth()
+
+    slideDirection.value = clickedMonth > currentMonth || (clickedMonth === 0 && currentMonth === 11)
+      ? 'slide-left'
+      : 'slide-right'
+
+    // 更新 key 触发过渡
+    calendarKey.value += 1
+
+    // 切换到点击日期所在的月份
+    currentDate.value = new Date(clickedDate.getFullYear(), clickedDate.getMonth(), 1)
+  }
+
+  // 选中点击的日期
+  selectedDate.value = clickedDate
+}
+
+// 点击交易卡片 - 跳转到详情页
+const onTransactionClick = (txn) => {
+  router.push({
+    path: '/transaction-detail',
+    query: { id: txn.id }
+  })
+}
+
+// 点击通知按钮
+const onNotificationClick = () => {
+  router.push('/message')
+}
+
+// 点击 Smart 按钮 - 跳转到智能分类页面
+const onSmartClick = () => {
+  router.push({
+    path: '/smart-classification',
+    query: {
+      date: formatDateKey(selectedDate.value)
+    }
+  })
+}
+
+// 切换月份
+const changeMonth = async (offset) => {
+  const newDate = new Date(currentDate.value)
+  newDate.setMonth(newDate.getMonth() + offset)
+
+  // 检查是否是最后一个月（当前月）且尝试切换到下一个月
+  const today = new Date()
+  const currentYear = currentDate.value.getFullYear()
+  const currentMonthValue = currentDate.value.getMonth()
+  const todayYear = today.getFullYear()
+  const todayMonth = today.getMonth()
+
+  // 如果当前显示的是今天所在的月份，且尝试切换到下一个月，则阻止
+  if (offset > 0 && currentYear === todayYear && currentMonthValue === todayMonth) {
+    showToast('已经是最后一个月了')
+    return
+  }
+
+  // 设置动画方向
+  slideDirection.value = offset > 0 ? 'slide-left' : 'slide-right'
+
+  // 更新 key 触发过渡
+  calendarKey.value += 1
+
+  currentDate.value = newDate
+
+  // 根据切换方向选择合适的日期
+  let newSelectedDate
+  if (offset > 0) {
+    // 切换到下个月，选中下个月的第一天
+    newSelectedDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1)
+  } else {
+    // 切换到上一月，选中上一月的最后一天
+    newSelectedDate = new Date(newDate.getFullYear(), newDate.getMonth() + 1, 0)
+  }
+
+  selectedDate.value = newSelectedDate
+}
+
+// 触摸滑动相关
+const touchStartX = ref(0)
+const touchStartY = ref(0)
+const touchEndX = ref(0)
+const touchEndY = ref(0)
+const isSwiping = ref(false)
+const minSwipeDistance = 50 // 最小滑动距离（像素）
+
+const onTouchStart = (e) => {
+  touchStartX.value = e.changedTouches[0].screenX
+  touchStartY.value = e.changedTouches[0].screenY
+  touchEndX.value = touchStartX.value
+  touchEndY.value = touchStartY.value
+  isSwiping.value = false
+}
+
+const onTouchMove = (e) => {
+  touchEndX.value = e.changedTouches[0].screenX
+  touchEndY.value = e.changedTouches[0].screenY
+
+  const deltaX = Math.abs(touchEndX.value - touchStartX.value)
+  const deltaY = Math.abs(touchEndY.value - touchStartY.value)
+
+  // 如果水平滑动距离大于垂直滑动距离，判定为滑动操作
+  if (deltaX > deltaY && deltaX > 10) {
+    isSwiping.value = true
+    // 阻止页面滚动
+    e.preventDefault()
+  }
+}
+
+const onTouchEnd = async () => {
+  const distance = touchStartX.value - touchEndX.value
+  const absDistance = Math.abs(distance)
+
+  // 只有在滑动状态下且达到最小滑动距离时才切换月份
+  if (isSwiping.value && absDistance > minSwipeDistance) {
+    if (distance > 0) {
+      // 向左滑动 - 下一月
+      await changeMonth(1)
+    } else {
+      // 向右滑动 - 上一月
+      await changeMonth(-1)
+    }
+  }
+
+  // 重置触摸位置
+  touchStartX.value = 0
+  touchStartY.value = 0
+  touchEndX.value = 0
+  touchEndY.value = 0
+  isSwiping.value = false
+}
+
+// 处理交易变更事件（来自全局添加账单）
+const handleTransactionsChanged = () => {
+  // 触发子组件刷新：通过改变日期引用强制重新查询
+  const temp = selectedDate.value
+  selectedDate.value = new Date(temp)
+}
+
+// 下拉刷新
+const onRefresh = async () => {
+  try {
+    // 触发子组件刷新
+    handleTransactionsChanged()
+    showToast({
+      message: '刷新成功',
+      duration: 1500
+    })
+  } catch (_error) {
+    showToast('刷新失败')
+  } finally {
+    refreshing.value = false
+  }
+}
+
+// 组件挂载
+onMounted(async () => {
+  // 监听交易变更事件（来自全局添加账单）
+  window.addEventListener('transactions-changed', handleTransactionsChanged)
+})
+
+// 页面激活时的钩子（从缓存恢复时触发）
+onActivated(() => {
+  // 依赖全局事件 'transactions-changed' 来刷新数据
+})
+
+// 页面失活时的钩子（被缓存时触发）
+onDeactivated(() => {
+  // 目前 CalendarV2 没有需要清理的资源
+})
+
+// 组件卸载前清理
+onBeforeUnmount(() => {
+  window.removeEventListener('transactions-changed', handleTransactionsChanged)
+})
+</script>
+
+<style scoped>
+@import '@/assets/theme.css';
+
+/* ========== 页面容器 ========== */
+.calendar-v2-wrapper {
+  background-color: var(--bg-primary);
+  font-family: var(--font-primary);
+  color: var(--text-primary);
+}
+
+.calendar-scroll-content {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+/* ========== 头部 ========== */
+.calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 8px 24px;
+  gap: 8px;
+  background: transparent !important;
+}
+
+.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));
+}
+</style>

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

@@ -0,0 +1,453 @@
+<template>
+  <!-- 日历容器 -->
+  <div
+    class="calendar-container"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+  >
+    <!-- 星期标题 -->
+    <div class="week-days">
+      <span
+        v-for="day in weekDays"
+        :key="day"
+        class="week-day"
+      >{{ day }}</span>
+    </div>
+
+    <!-- 日历网格 -->
+    <div class="calendar-grid-wrapper">
+      <Transition :name="slideDirection">
+        <div
+          :key="calendarKey"
+          class="calendar-grid"
+        >
+          <div
+            v-for="(week, weekIndex) in calendarWeeks"
+            :key="weekIndex"
+            class="calendar-week"
+          >
+            <div
+              v-for="day in week"
+              :key="day.date"
+              class="day-cell"
+              @click="onDayClick(day)"
+            >
+              <div
+                class="day-number"
+                :class="{
+                  'day-today': day.isToday,
+                  'day-selected': day.isSelected,
+                  'day-has-data': day.hasData,
+                  'day-over-limit': day.isOverLimit,
+                  'day-other-month': !day.isCurrentMonth
+                }"
+              >
+                {{ day.dayNumber }}
+              </div>
+              <div
+                v-if="day.amount"
+                class="day-amount"
+                :class="{
+                  'amount-over': day.isOverLimit,
+                  'amount-profit': day.isProfitable
+                }"
+              >
+                {{ day.amount }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, watch, ref } from 'vue'
+import { getDailyStatistics } from '@/api/statistics'
+import { getBudgetList } from '@/api/budget'
+
+const props = defineProps({
+  currentDate: Date,
+  selectedDate: Date,
+  slideDirection: {
+    default: 'slide-left',
+    type: String
+  },
+  calendarKey: {
+    default: '',
+    type: [String, Number]
+  }
+})
+
+const emit = defineEmits(['dayClick', 'touchStart', 'touchMove', 'touchEnd'])
+
+// 星期标题（中文）
+const weekDays = ['一', '二', '三', '四', '五', '六', '日']
+
+// 组件内部数据
+const dailyStatsMap = ref({})
+const dailyBudget = ref(0)
+const loading = ref(false)
+
+// 获取月度每日统计数据
+const fetchDailyStats = async (year, month) => {
+  try {
+    loading.value = true
+    const response = await getDailyStatistics({ year, month })
+
+    if (response.success && response.data) {
+      // 构建日期 Map
+      const statsMap = {}
+      response.data.forEach(item => {
+        statsMap[item.date] = {
+          count: item.count,
+          expense: item.expense,
+          income: item.income
+        }
+      })
+      dailyStatsMap.value = { ...dailyStatsMap.value, ...statsMap }
+    }
+  } catch (error) {
+    console.error('获取日历数据失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取日历中涉及的所有月份数据（包括上月末和下月初）
+const fetchAllRelevantMonthsData = async (year, month) => {
+  try {
+    loading.value = true
+
+    // 获取当月第一天
+    const firstDay = new Date(year, month, 1)
+    // 获取第一天是星期几 (0=Sunday, 调整为 0=Monday)
+    let startDayOfWeek = firstDay.getDay() - 1
+    if (startDayOfWeek === -1) {startDayOfWeek = 6}
+
+    // 判断是否需要加载上月数据
+    const needPrevMonth = startDayOfWeek > 0
+
+    // 获取当月最后一天
+    const lastDay = new Date(year, month + 1, 0)
+    // 计算总共需要多少行
+    const totalDays = startDayOfWeek + lastDay.getDate()
+    const totalWeeks = Math.ceil(totalDays / 7)
+    const totalCells = totalWeeks * 7
+
+    // 判断是否需要加载下月数据
+    const needNextMonth = totalCells > (startDayOfWeek + lastDay.getDate())
+
+    // 并行加载所有需要的月份数据
+    const promises = [fetchDailyStats(year, month)]
+
+    if (needPrevMonth) {
+      const prevMonth = month === 0 ? 11 : month - 1
+      const prevYear = month === 0 ? year - 1 : year
+      promises.push(fetchDailyStats(prevYear, prevMonth + 1))
+    }
+
+    if (needNextMonth) {
+      const nextMonth = month === 11 ? 0 : month + 1
+      const nextYear = month === 11 ? year + 1 : year
+      promises.push(fetchDailyStats(nextYear, nextMonth + 1))
+    }
+
+    await Promise.all(promises)
+  } catch (error) {
+    console.error('获取日历数据失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取预算数据
+const fetchBudgetData = async () => {
+  try {
+    const response = await getBudgetList()
+    if (response.success && response.data && response.data.length > 0) {
+      // 取第一个预算的月度限额除以30作为每日预算
+      const monthlyBudget = response.data[0].limit || 0
+      dailyBudget.value = Math.floor(monthlyBudget / 30)
+    }
+  } catch (error) {
+    console.error('获取预算失败:', error)
+  }
+}
+
+// 监听 currentDate 变化，重新加载数据
+watch(() => props.currentDate, async (newDate) => {
+  if (newDate) {
+    await fetchAllRelevantMonthsData(newDate.getFullYear(), newDate.getMonth())
+  }
+}, { immediate: true })
+
+// 初始加载预算数据
+fetchBudgetData()
+
+// 生成日历数据
+const calendarWeeks = computed(() => {
+  const year = props.currentDate.getFullYear()
+  const month = props.currentDate.getMonth()
+
+  // 获取当月第一天
+  const firstDay = new Date(year, month, 1)
+  // 获取当月最后一天
+  const lastDay = new Date(year, month + 1, 0)
+
+  // 获取第一天是星期几 (0=Sunday, 调整为 0=Monday)
+  let startDayOfWeek = firstDay.getDay() - 1
+  if (startDayOfWeek === -1) {startDayOfWeek = 6}
+
+  const weeks = []
+  let currentWeek = []
+
+  // 填充上月日期
+  for (let i = 0; i < startDayOfWeek; i++) {
+    const date = new Date(year, month, -(startDayOfWeek - i - 1))
+    currentWeek.push(createDayObject(date, false))
+  }
+
+  // 填充当月日期
+  for (let day = 1; day <= lastDay.getDate(); day++) {
+    const date = new Date(year, month, day)
+    currentWeek.push(createDayObject(date, true))
+
+    if (currentWeek.length === 7) {
+      weeks.push(currentWeek)
+      currentWeek = []
+    }
+  }
+
+  // 填充下月日期
+  if (currentWeek.length > 0) {
+    const remainingDays = 7 - currentWeek.length
+    for (let i = 1; i <= remainingDays; i++) {
+      const date = new Date(year, month + 1, i)
+      currentWeek.push(createDayObject(date, false))
+    }
+    weeks.push(currentWeek)
+  }
+
+  return weeks
+})
+
+// 创建日期对象
+const createDayObject = (date, isCurrentMonth) => {
+  const today = new Date()
+  const isToday =
+    date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
+
+  const isSelected =
+    date.getDate() === props.selectedDate.getDate() &&
+    date.getMonth() === props.selectedDate.getMonth() &&
+    date.getFullYear() === props.selectedDate.getFullYear()
+
+  // 从 API 数据获取
+  const dateKey = formatDateKey(date)
+  const dayStats = dailyStatsMap.value[dateKey] || {}
+
+  // 计算净支出（支出 - 收入）
+  const netAmount = (dayStats.expense || 0) - (dayStats.income || 0)
+  const hasData = dayStats.count > 0
+  // 收入大于支出为盈利（绿色），否则为支出（红色）
+  const isProfitable = hasData && netAmount < 0
+
+  return {
+    date: date.getTime(),
+    dayNumber: date.getDate(),
+    isCurrentMonth,
+    isToday,
+    isSelected,
+    hasData,
+    amount: hasData ? Math.abs(netAmount).toFixed(0) : '',
+    isOverLimit: netAmount > (dailyBudget.value || 0), // 超过每日预算标红
+    isProfitable // 是否盈利（收入>支出）
+  }
+}
+
+// 格式化日期为 key (yyyy-MM-dd)
+const formatDateKey = (date) => {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+// 点击日期
+const onDayClick = (day) => {
+  emit('dayClick', day)
+}
+
+// 触摸事件
+const onTouchStart = (e) => {
+  emit('touchStart', e)
+}
+
+const onTouchMove = (e) => {
+  emit('touchMove', e)
+}
+
+const onTouchEnd = () => {
+  emit('touchEnd')
+}
+</script>
+
+<style scoped>
+@import '@/assets/theme.css';
+
+/* ========== 日历容器 ========== */
+.calendar-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+  padding: var(--spacing-3xl);
+  position: relative;
+  padding-bottom: 0;
+}
+
+/* ========== 月份切换动画 ========== */
+/* 向左滑动（下一月） */
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.3s ease-out;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.slide-left-enter-active {
+  position: relative;
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.slide-left-leave-active {
+  position: absolute;
+}
+
+/* 向右滑动（上一月） */
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.3s ease-out;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.slide-right-enter-active {
+  position: relative;
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.slide-right-leave-active {
+  position: absolute;
+}
+
+.week-days {
+  display: flex;
+  justify-content: space-between;
+}
+
+.week-day {
+  width: 44px;
+  text-align: center;
+  font-size: var(--font-base);
+  font-weight: var(--font-semibold);
+  color: var(--text-tertiary);
+}
+
+.calendar-grid-wrapper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.calendar-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  width: 100%;
+}
+
+.calendar-week {
+  display: flex;
+  justify-content: space-between;
+  min-height: 56px; /* 固定最小高度：32px(day-number) + 16px(day-amount) + 8px(gap) */
+}
+
+.day-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 44px;
+  cursor: pointer;
+}
+
+.day-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  font-size: var(--font-md);
+  font-weight: var(--font-medium);
+  color: var(--text-primary);
+  transition: all 0.2s;
+}
+
+.day-number.day-has-data {
+  background-color: var(--bg-tertiary);
+  font-weight: var(--font-semibold);
+}
+
+.day-number.day-selected {
+  background-color: var(--accent-primary);
+  color: #FFFFFF;
+  font-weight: var(--font-bold);
+}
+
+.day-number.day-other-month {
+  color: var(--text-tertiary);
+  opacity: 0.4;
+}
+
+.day-amount {
+  font-size: var(--font-xs);
+  font-weight: var(--font-medium);
+  color: var(--text-tertiary);
+}
+
+.day-amount.amount-over {
+  color: var(--accent-danger);
+}
+
+.day-amount.amount-profit {
+  color: var(--accent-success);
+}
+</style>

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

@@ -0,0 +1,180 @@
+<template>
+  <!-- 每日统计 -->
+  <div class="daily-stats">
+    <div class="stats-header">
+      <h2 class="stats-title">
+        {{ selectedDateFormatted }}
+      </h2>
+    </div>
+    <div class="stats-card">
+      <div class="stats-dual-row">
+        <div class="stats-item">
+          <span class="stats-label">
+            {{ isToday ? '今日支出' : '当日支出' }}
+          </span>
+          <div class="stats-value">
+            ¥{{ selectedDayExpense.toFixed(2) }}
+          </div>
+        </div>
+
+        <div class="stats-divider" />
+
+        <div class="stats-item stats-income-item">
+          <span class="stats-label stats-income-label">
+            {{ isToday ? '今日收入' : '当日收入' }}
+          </span>
+          <div class="stats-value stats-income-value">
+            ¥{{ selectedDayIncome.toFixed(2) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, watch, ref } from 'vue'
+import { getTransactionsByDate } from '@/api/transactionRecord'
+
+const props = defineProps({
+  selectedDate: Date
+})
+
+// 组件内部数据
+const selectedDayExpense = ref(0)
+const selectedDayIncome = ref(0)
+const loading = ref(false)
+
+// 格式化日期为 key (yyyy-MM-dd)
+const formatDateKey = (date) => {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+// 获取选中日期的交易数据并计算收支
+const fetchDayStats = async (date) => {
+  try {
+    loading.value = true
+    const dateKey = formatDateKey(date)
+    const response = await getTransactionsByDate(dateKey)
+
+    if (response.success && response.data) {
+      // 计算当日支出和收入
+      selectedDayExpense.value = response.data
+        .filter(t => t.type === 0) // 只统计支出
+        .reduce((sum, t) => sum + t.amount, 0)
+
+      selectedDayIncome.value = response.data
+        .filter(t => t.type === 1) // 只统计收入
+        .reduce((sum, t) => sum + t.amount, 0)
+    }
+  } catch (error) {
+    console.error('获取交易记录失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 监听 selectedDate 变化，重新加载数据
+watch(() => props.selectedDate, async (newDate) => {
+  if (newDate) {
+    await fetchDayStats(newDate)
+  }
+}, { immediate: true })
+
+// 判断是否为今天
+const isToday = computed(() => {
+  const today = new Date()
+  return (
+    props.selectedDate.getDate() === today.getDate() &&
+    props.selectedDate.getMonth() === today.getMonth() &&
+    props.selectedDate.getFullYear() === today.getFullYear()
+  )
+})
+
+// 选中日期格式化（中文）
+const selectedDateFormatted = computed(() => {
+  const year = props.selectedDate.getFullYear()
+  const month = props.selectedDate.getMonth() + 1
+  const day = props.selectedDate.getDate()
+  return `${year}年${month}月${day}日`
+})
+</script>
+
+<style scoped>
+@import '@/assets/theme.css';
+
+/* ========== 统计卡片 ========== */
+.daily-stats {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+  padding: var(--spacing-3xl);
+  padding-top: 8px
+}
+
+.stats-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.stats-title {
+  font-family: var(--font-display);
+  font-size: var(--font-xl);
+  font-weight: var(--font-bold);
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.stats-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-2xl);
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+}
+
+.stats-dual-row {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-xl);
+}
+
+.stats-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.stats-divider {
+  width: 1px;
+  background-color: var(--bg-tertiary);
+  align-self: stretch;
+}
+
+.stats-label {
+  font-size: var(--font-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+}
+
+.stats-value {
+  font-family: var(--font-display);
+  font-size: var(--font-2xl);
+  font-weight: var(--font-extrabold);
+  color: var(--text-primary);
+}
+
+.stats-income-label {
+  color: var(--accent-success);
+}
+
+.stats-income-value {
+  color: var(--accent-success);
+}
+</style>

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

@@ -0,0 +1,387 @@
+<template>
+  <!-- 交易列表 -->
+  <div class="transactions">
+    <div class="txn-header">
+      <h2 class="txn-title">
+        交易记录
+      </h2>
+      <div class="txn-actions">
+        <div class="txn-badge badge-success">
+          {{ transactionCount }} Items
+        </div>
+        <button
+          class="smart-btn"
+          @click="onSmartClick"
+        >
+          <van-icon name="fire" />
+          <span>Smart</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- 交易卡片 -->
+    <van-loading
+      v-if="transactionsLoading"
+      class="txn-loading"
+      size="24px"
+      vertical
+    >
+      加载中...
+    </van-loading>
+    <div
+      v-else-if="transactions.length === 0"
+      class="txn-empty"
+    >
+      <div class="empty-icon">
+        <van-icon
+          name="balance-list-o"
+          size="48"
+        />
+      </div>
+      <div class="empty-text">
+        当天暂无交易记录
+      </div>
+      <div class="empty-hint">
+        轻松享受无消费的一天 ✨
+      </div>
+    </div>
+    <div
+      v-else
+      class="txn-list"
+    >
+      <div
+        v-for="txn in transactions"
+        :key="txn.id"
+        class="txn-card"
+        @click="onTransactionClick(txn)"
+      >
+        <div
+          class="txn-icon"
+          :style="{ backgroundColor: txn.iconBg }"
+        >
+          <van-icon
+            :name="txn.icon"
+            :color="txn.iconColor"
+          />
+        </div>
+        <div class="txn-content">
+          <div class="txn-name">
+            {{ txn.name }}
+          </div>
+          <div class="txn-footer">
+            <div class="txn-time">
+              {{ txn.time }}
+            </div>
+            <span
+              v-if="txn.classify"
+              class="txn-classify-tag"
+              :class="txn.type === 1 ? 'tag-income' : 'tag-expense'"
+            >
+              {{ txn.classify }}
+            </span>
+          </div>
+        </div>
+        <div class="txn-amount">
+          {{ txn.amount }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, watch, ref } from 'vue'
+import { getTransactionsByDate } from '@/api/transactionRecord'
+
+const props = defineProps({
+  selectedDate: Date
+})
+
+const emit = defineEmits(['transactionClick', 'smartClick'])
+
+// 组件内部数据
+const transactions = ref([])
+const transactionsLoading = ref(false)
+
+// 格式化日期为 key (yyyy-MM-dd)
+const formatDateKey = (date) => {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+// 格式化时间（HH:MM）
+const formatTime = (dateTimeStr) => {
+  const date = new Date(dateTimeStr)
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${hours}:${minutes}`
+}
+
+// 格式化金额
+const formatAmount = (amount, type) => {
+  const sign = type === 1 ? '+' : '-' // 1=收入, 0=支出
+  return `${sign}${amount.toFixed(2)}`
+}
+
+// 根据分类获取图标
+const getIconByClassify = (classify) => {
+  const iconMap = {
+    '餐饮': 'food',
+    '购物': 'shopping',
+    '交通': 'transport',
+    '娱乐': 'play',
+    '医疗': 'medical',
+    '工资': 'money',
+    '红包': 'red-packet'
+  }
+  return iconMap[classify] || 'star'
+}
+
+// 根据类型获取颜色
+const getColorByType = (type) => {
+  return type === 1 ? '#22C55E' : '#FF6B6B' // 收入绿色，支出红色
+}
+
+// 获取选中日期的交易列表
+const fetchDayTransactions = async (date) => {
+  try {
+    transactionsLoading.value = true
+    const dateKey = formatDateKey(date)
+    const response = await getTransactionsByDate(dateKey)
+
+    if (response.success && response.data) {
+      // 转换为界面需要的格式
+      transactions.value = response.data.map(txn => ({
+        id: txn.id,
+        name: txn.reason || '未知交易',
+        time: formatTime(txn.occurredAt),
+        amount: formatAmount(txn.amount, txn.type),
+        icon: getIconByClassify(txn.classify),
+        iconColor: getColorByType(txn.type),
+        iconBg: '#FFFFFF',
+        classify: txn.classify,
+        type: txn.type
+      }))
+    }
+  } catch (error) {
+    console.error('获取交易记录失败:', error)
+  } finally {
+    transactionsLoading.value = false
+  }
+}
+
+// 监听 selectedDate 变化，重新加载数据
+watch(() => props.selectedDate, async (newDate) => {
+  if (newDate) {
+    await fetchDayTransactions(newDate)
+  }
+}, { immediate: true })
+
+// 交易数量
+const transactionCount = computed(() => transactions.value.length)
+
+// 点击交易卡片
+const onTransactionClick = (txn) => {
+  emit('transactionClick', txn)
+}
+
+// 点击 Smart 按钮
+const onSmartClick = () => {
+  emit('smartClick')
+}
+</script>
+
+<style scoped>
+@import '@/assets/theme.css';
+
+/* ========== 交易列表 ========== */
+.transactions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-3xl);
+  padding-top: 0;
+}
+
+.txn-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.txn-title {
+  font-family: var(--font-display);
+  font-size: var(--font-xl);
+  font-weight: var(--font-bold);
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.txn-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+.txn-badge {
+  padding: 6px 12px;
+  font-size: var(--font-base);
+  font-weight: var(--font-semibold);
+  border-radius: var(--radius-sm);
+}
+
+.badge-success {
+  background-color: var(--accent-success-bg);
+  color: var(--accent-success);
+}
+
+.smart-btn {
+  display: flex;
+  align-items: center;
+  margin-left: 6px;
+  gap: 6px;
+  padding: 6px 12px;
+  background-color: var(--accent-info-bg);
+  color: var(--accent-info);
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: var(--font-base);
+  font-weight: var(--font-semibold);
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.smart-btn:active {
+  opacity: 0.7;
+}
+
+.txn-loading {
+  padding: var(--spacing-3xl);
+  text-align: center;
+}
+
+.txn-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+.txn-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-top: 10px;
+  padding: var(--spacing-xl);
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.txn-card:active {
+  opacity: 0.7;
+}
+
+.txn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.txn-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  flex: 1;
+  min-width: 0;
+}
+
+.txn-name {
+  font-size: var(--font-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.txn-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.txn-time {
+  font-size: var(--font-md);
+  font-weight: var(--font-medium);
+  color: var(--text-tertiary);
+}
+
+.txn-classify-tag {
+  padding: 2px 8px;
+  font-size: var(--font-xs);
+  font-weight: var(--font-medium);
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.txn-classify-tag.tag-income {
+  background-color: rgba(34, 197, 94, 0.15);
+  color: var(--accent-success);
+}
+
+.txn-classify-tag.tag-expense {
+  background-color: rgba(59, 130, 246, 0.15);
+  color: #3B82F6;
+}
+
+.txn-amount {
+  font-size: var(--font-lg);
+  font-weight: var(--font-bold);
+  color: var(--text-primary);
+  flex-shrink: 0;
+  margin-left: var(--spacing-md);
+}
+
+/* ========== 空状态 ========== */
+.txn-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  padding: var(--spacing-4xl) var(--spacing-2xl);
+  gap: var(--spacing-md);
+}
+
+.empty-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
+  color: var(--text-tertiary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.empty-text {
+  font-size: var(--font-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-secondary);
+}
+
+.empty-hint {
+  font-size: var(--font-md);
+  font-weight: var(--font-medium);
+  color: var(--text-tertiary);
+  opacity: 0.8;
+}
+</style>