fix

- TransactionDetail, CategoryBillPopup 移入 Transaction/
- BudgetTypeTabs 移入 Budget/
- GlassBottomNav, ModernEmpty 移入 Global/
- Icon, IconSelector, ClassifySelector 等 8 个通用组件移入 Common/
- 更新所有相关引用路径

.doc/popup-migration-checklist.md

@@ -19,7 +19,7 @@
 | MessageView.vue | 时间戳 (createTime) | 移至内容区域顶部，使用灰色小字 |
 | CategoryBillPopup.vue | 待检查 | 待定 |
 | BudgetChartAnalysis.vue | 待检查 | 待定 |
-| TransactionDetail.vue | 待检查 | 待定 |
+| TransactionDetail.vue | 已删除 | 已被 TransactionDetailSheet.vue 替代 |
 | ReasonGroupList.vue | 待检查 | 待定 |
 
 ### 第三批：带确认/取消按钮

Web/src/App.vue

@@ -45,7 +45,7 @@ import { RouterView, useRoute } from 'vue-router'
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import { useMessageStore } from '@/stores/message'
 import GlobalAddBill from '@/components/Global/GlobalAddBill.vue'
-import GlassBottomNav from '@/components/GlassBottomNav.vue'
+import GlassBottomNav from '@/components/Global/GlassBottomNav.vue'
 import '@/styles/common.css'
 import { needRefresh, updateServiceWorker } from './registerServiceWorker'
 
@@ -150,7 +150,8 @@ const isShowAddBill = computed(() => {
     route.path === '/' ||
     route.path === '/balance' ||
     route.path === '/message' ||
-    route.path === '/calendar-v2'
+    route.path === '/calendar-v2' ||
+    route.path === '/statistics-v2'
   )
 })
 

Web/src/components/Bill/BillForm.vue

@@ -132,7 +132,7 @@
 import { ref, onMounted, watch, nextTick } from 'vue'
 import { showToast } from 'vant'
 import dayjs from 'dayjs'
-import ClassifySelector from '@/components/ClassifySelector.vue'
+import ClassifySelector from '@/components/Common/ClassifySelector.vue'
 
 const props = defineProps({
   initialData: {

Web/src/components/Bill/BillListComponent.vue

@@ -232,7 +232,7 @@ import { ref, computed, watch, onMounted } from 'vue'
 import { showConfirmDialog, showToast } from 'vant'
 import { getTransactionList, deleteTransaction } from '@/api/transactionRecord'
 import { getCategoryList } from '@/api/transactionCategory'
-import Icon from '@/components/Icon.vue'
+import Icon from '@/components/Common/Icon.vue'
 
 /**
  * @typedef {Object} Transaction

Web/src/components/Budget/BudgetCard.vue

@@ -429,7 +429,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 import { BudgetPeriodType } from '@/constants/enums'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
 import BillListComponent from '@/components/Bill/BillListComponent.vue'
 import { getTransactionList } from '@/api/transactionRecord'
 

Web/src/components/Budget/BudgetChartAnalysis.vue

@@ -210,7 +210,7 @@
 import { ref, computed } from 'vue'
 import { BudgetCategory, BudgetPeriodType } from '@/constants/enums'
 import { getCssVar } from '@/utils/theme'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
 import BaseChart from '@/components/Charts/BaseChart.vue'
 import { useChartTheme } from '@/composables/useChartTheme'
 import { chartjsGaugePlugin } from '@/plugins/chartjs-gauge-plugin'

Web/src/components/Budget/BudgetEditPopup.vue

@@ -122,8 +122,8 @@ import { ref, reactive, computed } from 'vue'
 import { showToast } from 'vant'
 import { createBudget, updateBudget } from '@/api/budget'
 import { BudgetPeriodType, BudgetCategory } from '@/constants/enums'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
-import ClassifySelector from '@/components/ClassifySelector.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
+import ClassifySelector from '@/components/Common/ClassifySelector.vue'
 
 const emit = defineEmits(['success'])
 

Web/src/components/Budget/BudgetSummary.vue

@@ -1,309 +0,0 @@
-<template>
-  <div class="summary-container">
-    <transition
-      :name="transitionName"
-      mode="out-in"
-    >
-      <div
-        v-if="stats && (stats.month || stats.year)"
-        :key="dateKey"
-        class="summary-card common-card"
-      >
-        <!-- 左切换按钮 -->
-        <div
-          class="nav-arrow left"
-          @click.stop="changeMonth(-1)"
-        >
-          <van-icon name="arrow-left" />
-        </div>
-
-        <div class="summary-content">
-          <template
-            v-for="(config, key) in periodConfigs"
-            :key="key"
-          >
-            <div class="summary-item">
-              <div class="label">
-                {{ config.label }}{{ title }}率
-              </div>
-              <div
-                class="value"
-                :class="getValueClass(stats[key]?.rate || '0.0')"
-              >
-                {{ stats[key]?.rate || '0.0' }}<span class="unit">%</span>
-              </div>
-              <div class="sub-info">
-                <span class="amount">¥{{ formatMoney(stats[key]?.current || 0) }}</span>
-                <span class="separator">/</span>
-                <span class="amount">¥{{ formatMoney(stats[key]?.limit || 0) }}</span>
-              </div>
-            </div>
-            <div
-              v-if="config.showDivider"
-              class="divider"
-            />
-          </template>
-        </div>
-
-        <!-- 右切换按钮 -->
-        <div
-          class="nav-arrow right"
-          :class="{ disabled: isCurrentMonth }"
-          @click.stop="!isCurrentMonth && changeMonth(1)"
-        >
-          <van-icon name="arrow" />
-        </div>
-
-        <!-- 非本月时显示的日期标识 -->
-        <div
-          v-if="!isCurrentMonth"
-          class="date-tag"
-        >
-          {{ props.date.getFullYear() }}年{{ props.date.getMonth() + 1 }}月
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-
-const props = defineProps({
-  stats: {
-    type: Object,
-    required: true
-  },
-  title: {
-    type: String,
-    required: true
-  },
-  getValueClass: {
-    type: Function,
-    required: true
-  },
-  date: {
-    type: Date,
-    default: () => new Date()
-  }
-})
-
-const emit = defineEmits(['update:date'])
-
-const transitionName = ref('slide-right')
-const dateKey = computed(() => props.date.getFullYear() + '-' + props.date.getMonth())
-
-const isCurrentMonth = computed(() => {
-  const now = new Date()
-  return props.date.getFullYear() === now.getFullYear() && props.date.getMonth() === now.getMonth()
-})
-
-const periodConfigs = computed(() => ({
-  month: {
-    label: isCurrentMonth.value ? '本月' : `${props.date.getMonth() + 1}月`,
-    showDivider: true
-  },
-  year: {
-    label: isCurrentMonth.value ? '年度' : `${props.date.getFullYear()}年`,
-    showDivider: false
-  }
-}))
-
-const changeMonth = (delta) => {
-  transitionName.value = delta > 0 ? 'slide-left' : 'slide-right'
-  const newDate = new Date(props.date)
-  newDate.setMonth(newDate.getMonth() + delta)
-  emit('update:date', newDate)
-}
-
-const formatMoney = (val) => {
-  return parseFloat(val || 0).toLocaleString(undefined, {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0
-  })
-}
-</script>
-
-<style scoped>
-.summary-container {
-  margin-top: 12px;
-  position: relative;
-}
-
-.summary-card {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 16px 36px;
-  margin: 0 12px 8px;
-  min-height: 80px;
-}
-
-.summary-content {
-  flex: 1;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  text-align: center;
-}
-
-.nav-arrow {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 18px;
-  color: var(--van-gray-5);
-  cursor: pointer;
-  transition: all 0.2s;
-  z-index: 1;
-}
-
-.nav-arrow:active {
-  color: var(--van-primary-color);
-  background-color: rgba(0, 0, 0, 0.02);
-}
-
-.nav-arrow.disabled {
-  color: #c8c9cc;
-  cursor: not-allowed;
-  opacity: 0.35;
-  pointer-events: none;
-}
-
-.nav-arrow.disabled:active {
-  background-color: transparent;
-}
-
-.nav-arrow.left {
-  left: 0;
-}
-
-.nav-arrow.right {
-  right: 0;
-}
-
-.nav-arrow.disabled {
-  color: var(--van-gray-3);
-  cursor: not-allowed;
-}
-
-.date-tag {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 10px;
-  color: var(--van-primary-color);
-  background-color: var(--van-primary-color-light);
-  padding: 1px 8px;
-  border-radius: 0 0 8px 8px;
-  font-weight: 500;
-  opacity: 0.8;
-}
-
-/* 动画效果 */
-.slide-left-enter-active,
-.slide-left-leave-active,
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.slide-left-enter-from {
-  opacity: 0;
-  transform: translateX(30px);
-}
-.slide-left-leave-to {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.slide-right-enter-from {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-.slide-right-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-.summary-item {
-  flex: 1;
-}
-
-.summary-item .label {
-  font-size: 12px;
-  color: var(--van-text-color-2);
-  margin-bottom: 6px;
-}
-
-.summary-item .value {
-  font-size: 20px;
-  font-weight: bold;
-  color: var(--van-text-color);
-}
-
-.summary-item :deep(.value.expense) {
-  color: var(--van-danger-color);
-}
-
-.summary-item :deep(.value.income) {
-  color: var(--van-success-color);
-}
-
-.summary-item :deep(.value.warning) {
-  color: var(--van-warning-color);
-}
-
-.summary-item .unit {
-  font-size: 11px;
-  margin-left: 1px;
-  font-weight: normal;
-}
-
-.summary-item .sub-info {
-  font-size: 12px;
-  color: var(--van-text-color-3);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 3px;
-}
-
-.summary-item .amount {
-  color: var(--van-text-color-2);
-}
-
-.summary-item .separator {
-  color: var(--van-text-color-3);
-}
-
-.divider {
-  width: 1px;
-  height: 24px;
-  background-color: var(--van-border-color);
-  margin: 0 4px;
-}
-
-/* @media (prefers-color-scheme: dark) {
-  .nav-arrow:active {
-    background-color: rgba(255, 255, 255, 0.05);
-  }
-  .nav-arrow.disabled {
-    color: var(--van-text-color);
-  }
-  .summary-item .value {
-    color: var(--van-text-color);
-  }
-  .summary-item .amount {
-    color: var(--van-text-color-3);
-  }
-  .divider {
-    background-color: var(--van-border-color);
-  }
-} */
-</style>

Web/src/components/Budget/SavingsConfigPopup.vue

@@ -42,8 +42,8 @@
 import { ref } from 'vue'
 import { showToast, showLoadingToast, closeToast } from 'vant'
 import { getConfig, setConfig } from '@/api/config'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
-import ClassifySelector from '@/components/ClassifySelector.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
+import ClassifySelector from '@/components/Common/ClassifySelector.vue'
 
 const emit = defineEmits(['success'])
 

Web/src/components/CategoryBillPopup.vue

@@ -1,468 +0,0 @@
-<template>
-  <PopupContainerV2
-    v-model:show="visible"
-    :title="title"
-    :height="'80%'"
-  >
-    <!-- 交易列表 -->
-    <div style="padding: 0">
-      <!-- Subtitle 作为内容区域顶部 -->
-      <div
-        v-if="total > 0"
-        style="padding: 12px 16px; text-align: center; color: #999; font-size: 14px; border-bottom: 1px solid var(--van-border-color)"
-      >
-        共 {{ total }} 笔交易
-      </div>
-
-      <div class="transactions">
-        <!-- 加载状态 -->
-        <van-loading
-          v-if="loading && transactions.length === 0"
-          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>
-
-        <!-- 交易列表 -->
-        <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.reason }}
-              </div>
-              <div class="txn-footer">
-                <div class="txn-time">
-                  {{ formatDateTime(txn.occurredAt) }}
-                </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">
-              {{ formatAmount(txn.amount, txn.type) }}
-            </div>
-          </div>
-
-          <!-- 加载更多 -->
-          <div
-            v-if="!finished"
-            class="load-more"
-          >
-            <van-loading
-              v-if="loading"
-              size="20px"
-            >
-              加载中...
-            </van-loading>
-            <van-button
-              v-else
-              type="primary"
-              size="small"
-              @click="loadMore"
-            >
-              加载更多
-            </van-button>
-          </div>
-
-          <!-- 已加载全部 -->
-          <div
-            v-else
-            class="finished-text"
-          >
-            已加载全部
-          </div>
-        </div>
-      </div>
-    </div>
-  </PopupContainerV2>
-
-  <!-- 交易详情弹窗 -->
-  <TransactionDetailSheet
-    v-model:show="showDetail"
-    :transaction="currentTransaction"
-    @save="handleSave"
-    @delete="handleDelete"
-  />
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { showToast } from 'vant'
-import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
-import { getTransactionList } from '@/api/transactionRecord'
-
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  classify: {
-    type: String,
-    default: ''
-  },
-  type: {
-    type: Number,
-    default: 0
-  },
-  year: {
-    type: Number,
-    required: true
-  },
-  month: {
-    type: Number,
-    required: true
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'refresh'])
-
-// 双向绑定
-const visible = computed({
-  get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value)
-})
-
-// 标题
-const title = computed(() => {
-  const classifyText = props.classify || '未分类'
-  const typeText = props.type === 0 ? '支出' : props.type === 1 ? '收入' : '不计收支'
-  return `${classifyText} - ${typeText}`
-})
-
-// 数据状态
-const transactions = ref([])
-const loading = ref(false)
-const finished = ref(false)
-const pageIndex = ref(1)
-const pageSize = 20
-const total = ref(0)
-
-// 详情弹窗
-const showDetail = ref(false)
-const currentTransaction = ref(null)
-
-// 格式化日期时间
-const formatDateTime = (dateTimeStr) => {
-  const date = new Date(dateTimeStr)
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  const hours = String(date.getHours()).padStart(2, '0')
-  const minutes = String(date.getMinutes()).padStart(2, '0')
-  return `${month}-${day} ${hours}:${minutes}`
-}
-
-// 格式化金额
-const formatAmount = (amount, type) => {
-  const sign = type === 1 ? '+' : '-'
-  return `${sign}${amount.toFixed(2)}`
-}
-
-// 根据分类获取图标
-const getIconByClassify = (classify) => {
-  const iconMap = {
-    餐饮: 'food',
-    购物: 'shopping',
-    交通: 'logistics',
-    娱乐: 'play-circle',
-    医疗: 'medic',
-    工资: 'gold-coin',
-    红包: 'gift'
-  }
-  return iconMap[classify] || 'bill'
-}
-
-// 根据类型获取颜色
-const getColorByType = (type) => {
-  return type === 1 ? '#22C55E' : '#FF6B6B'
-}
-
-// 加载数据
-const loadData = async (isRefresh = false) => {
-  if (loading.value || finished.value) {
-    return
-  }
-
-  if (isRefresh) {
-    pageIndex.value = 1
-    transactions.value = []
-    finished.value = false
-  }
-
-  loading.value = true
-  try {
-    const params = {
-      pageIndex: pageIndex.value,
-      pageSize: pageSize,
-      type: props.type,
-      year: props.year,
-      month: props.month || 0,
-      sortByAmount: true
-    }
-
-    if (props.classify) {
-      params.classify = props.classify
-    }
-
-    const response = await getTransactionList(params)
-
-    if (response.success) {
-      const newList = response.data || []
-
-      // 转换数据格式，添加显示所需的字段
-      const formattedList = newList.map((txn) => ({
-        ...txn,
-        icon: getIconByClassify(txn.classify),
-        iconColor: getColorByType(txn.type),
-        iconBg: '#FFFFFF'
-      }))
-
-      transactions.value = [...transactions.value, ...formattedList]
-      total.value = response.total
-
-      if (newList.length === 0 || newList.length < pageSize) {
-        finished.value = true
-      } else {
-        pageIndex.value++
-      }
-    } else {
-      showToast(response.message || '加载账单失败')
-      finished.value = true
-    }
-  } catch (error) {
-    console.error('加载分类账单失败:', error)
-    showToast('加载账单失败')
-    finished.value = true
-  } finally {
-    loading.value = false
-  }
-}
-
-// 加载更多
-const loadMore = () => {
-  loadData(false)
-}
-
-// 点击交易
-const onTransactionClick = (txn) => {
-  currentTransaction.value = txn
-  showDetail.value = true
-}
-
-// 保存交易
-const handleSave = () => {
-  showDetail.value = false
-  // 重新加载数据
-  loadData(true)
-  // 通知父组件刷新
-  emit('refresh')
-}
-
-// 删除交易
-const handleDelete = (id) => {
-  showDetail.value = false
-  // 从列表中移除
-  transactions.value = transactions.value.filter((t) => t.id !== id)
-  total.value--
-  // 通知父组件刷新
-  emit('refresh')
-}
-
-// 监听弹窗打开
-watch(visible, (newValue) => {
-  if (newValue) {
-    loadData(true)
-  } else {
-    // 关闭时重置状态
-    transactions.value = []
-    pageIndex.value = 1
-    finished.value = false
-    total.value = 0
-  }
-})
-</script>
-
-<style scoped>
-@import '@/assets/theme.css';
-
-.transactions {
-  flex: 1;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  padding: var(--spacing-lg);
-}
-
-.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;
-  padding: var(--spacing-xl);
-  background-color: var(--bg-secondary);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: opacity 0.2s;
-  margin-top: 10px;
-}
-
-.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);
-}
-
-.load-more {
-  display: flex;
-  justify-content: center;
-  padding: var(--spacing-xl) 0;
-}
-
-.finished-text {
-  text-align: center;
-  padding: var(--spacing-xl) 0;
-  font-size: var(--font-md);
-  color: var(--text-tertiary);
-}
-
-/* 空状态 */
-.txn-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 300px;
-  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);
-}
-</style>

Web/src/components/Common/ReasonGroupList.vue

@@ -99,10 +99,11 @@
     </PopupContainerV2>
 
     <!-- 账单详情弹窗 -->
-    <TransactionDetail
+    <TransactionDetailSheet
       v-model:show="showTransactionDetail"
       :transaction="selectedTransaction"
       @save="handleTransactionSaved"
+      @delete="handleGroupTransactionDelete"
     />
 
     <!-- 批量设置对话框 -->
@@ -197,8 +198,8 @@ import { ref, computed, watch, onBeforeUnmount } from 'vue'
 import { showToast, showSuccessToast, showLoadingToast, closeToast, showConfirmDialog } from 'vant'
 import { getReasonGroups, batchUpdateByReason, getTransactionList } from '@/api/transactionRecord'
 import ClassifySelector from './ClassifySelector.vue'
-import BillListComponent from './Bill/BillListComponent.vue'
-import TransactionDetail from './TransactionDetail.vue'
+import BillListComponent from '@/components/Bill/BillListComponent.vue'
+import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
 import PopupContainerV2 from './PopupContainerV2.vue'
 
 const props = defineProps({

Web/src/components/Global/GlobalAddBill.vue

@@ -45,7 +45,7 @@
 
 <script setup>
 import { ref, defineEmits } from 'vue'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
 import OneLineBillAdd from '@/components/Bill/OneLineBillAdd.vue'
 import ManualBillAdd from '@/components/Bill/ManualBillAdd.vue'
 

Web/src/components/SmartClassifyButton.vue

@@ -1,399 +0,0 @@
-<template>
-  <van-button
-    v-if="hasTransactions"
-    :type="buttonType"
-    size="small"
-    :loading="loading || saving"
-    :loading-text="loadingText"
-    :disabled="loading || saving"
-    class="smart-classify-btn"
-    @click="handleClick"
-  >
-    <template v-if="!loading && !saving">
-      <van-icon :name="buttonIcon" />
-      <span style="margin-left: 4px">{{ buttonText }}</span>
-    </template>
-  </van-button>
-</template>
-
-<script setup>
-import { ref, computed, nextTick } from 'vue'
-import { showToast, closeToast } from 'vant'
-import { smartClassify, batchUpdateClassify } from '@/api/transactionRecord'
-
-const props = defineProps({
-  transactions: {
-    type: Array,
-    default: () => []
-  },
-  onBeforeClassify: {
-    type: Function,
-    default: null
-  }
-})
-
-const emit = defineEmits(['update', 'save', 'notifyDonedTransactionId'])
-
-const loading = ref(false)
-const saving = ref(false)
-const classifiedResults = ref([])
-const lockClassifiedResults = ref(false)
-const isAllCompleted = ref(false)
-let toastInstance = null
-
-const hasTransactions = computed(() => {
-  return props.transactions && props.transactions.length > 0
-})
-
-const hasClassifiedResults = computed(() => {
-  // Show save state once we have any classified result, even if not all batches finished
-  return classifiedResults.value.length > 0 && lockClassifiedResults.value === false
-})
-
-// 按钮类型
-const buttonType = computed(() => {
-  if (saving.value) {
-    return 'warning'
-  }
-  if (loading.value) {
-    return 'primary'
-  }
-  if (hasClassifiedResults.value) {
-    return 'success'
-  }
-  return 'primary'
-})
-
-// 按钮图标
-const buttonIcon = computed(() => {
-  if (hasClassifiedResults.value) {
-    return 'success'
-  }
-  return 'fire'
-})
-
-// 按钮文字（非加载状态）
-const buttonText = computed(() => {
-  if (hasClassifiedResults.value) {
-    return '保存分类'
-  }
-  return '智能分类'
-})
-
-// 加载中文字
-const loadingText = computed(() => {
-  if (saving.value) {
-    return '保存中...'
-  }
-  if (loading.value) {
-    return '分类中...'
-  }
-  return ''
-})
-
-/**
- * 点击按钮处理
- */
-const handleClick = () => {
-  if (hasClassifiedResults.value) {
-    handleSaveClassify()
-  } else {
-    handleSmartClassify()
-  }
-}
-
-/**
- * 保存分类结果
- */
-const handleSaveClassify = async () => {
-  if (saving.value || loading.value) {
-    return
-  }
-
-  try {
-    saving.value = true
-    showToast({
-      message: '正在保存...',
-      duration: 0,
-      forbidClick: true,
-      loadingType: 'spinner'
-    })
-
-    // 准备批量更新数据
-    const items = classifiedResults.value.map((item) => ({
-      id: item.id,
-      classify: item.classify,
-      type: item.type
-    }))
-
-    const response = await batchUpdateClassify(items)
-
-    closeToast()
-
-    if (response.success) {
-      showToast({
-        type: 'success',
-        message: `保存成功，已更新 ${items.length} 条记录`,
-        duration: 2000
-      })
-
-      // 清空已分类结果
-      classifiedResults.value = []
-      isAllCompleted.value = false
-
-      // 通知父组件刷新数据
-      emit('save')
-    } else {
-      showToast({
-        type: 'fail',
-        message: response.message || '保存失败',
-        duration: 2000
-      })
-    }
-  } catch (error) {
-    console.error('保存分类失败:', error)
-    closeToast()
-    showToast({
-      type: 'fail',
-      message: '保存失败，请重试',
-      duration: 2000
-    })
-  } finally {
-    saving.value = false
-  }
-}
-
-const handleSmartClassify = async () => {
-  if (loading.value || saving.value) {
-    showToast('当前有任务正在进行，请稍后再试')
-    return
-  }
-
-  loading.value = true
-
-  if (!props.transactions || props.transactions.length === 0) {
-    showToast('没有可分类的交易记录')
-    loading.value = false
-    return
-  }
-
-  if (lockClassifiedResults.value) {
-    showToast('当前有分类任务正在进行，请稍后再试')
-    loading.value = false
-    return
-  }
-
-  // 清空之前的分类结果
-  isAllCompleted.value = false
-  classifiedResults.value = []
-
-  const batchSize = 3
-  let processedCount = 0
-
-  try {
-    lockClassifiedResults.value = true
-    // 等待父组件的 beforeClassify 事件处理完成（如果有返回 Promise）
-    if (props.onBeforeClassify) {
-      const shouldContinue = await props.onBeforeClassify()
-      if (shouldContinue === false) {
-        loading.value = false
-        return
-      }
-    }
-
-    await nextTick()
-
-    const allTransactions = props.transactions
-    const totalCount = allTransactions.length
-
-    toastInstance = showToast({
-      message: '正在智能分类...',
-      duration: 0,
-      forbidClick: false, // 允许用户点击页面其他地方
-      loadingType: 'spinner'
-    })
-
-    // 分批处理
-    for (let i = 0; i < allTransactions.length; i += batchSize) {
-      const batch = allTransactions.slice(i, i + batchSize)
-      const transactionIds = batch.map((t) => t.id)
-      const currentBatch = Math.floor(i / batchSize) + 1
-      const totalBatches = Math.ceil(allTransactions.length / batchSize)
-
-      // 更新批次进度
-      closeToast()
-      toastInstance = showToast({
-        message: `正在处理第 ${currentBatch}/${totalBatches} 批 (${i + 1}-${Math.min(i + batchSize, totalCount)} / ${totalCount})...`,
-        duration: 0,
-        forbidClick: false, // 允许用户点击
-        loadingType: 'spinner'
-      })
-
-      const response = await smartClassify(transactionIds)
-
-      if (!response.ok) {
-        throw new Error('智能分类请求失败')
-      }
-
-      // 读取流式响应
-      const reader = response.body.getReader()
-      const decoder = new TextDecoder()
-      let buffer = ''
-      let lastUpdateTime = 0
-      const updateInterval = 300 // 最多每300ms更新一次Toast，减少DOM操作
-
-      while (true) {
-        const { done, value } = await reader.read()
-
-        if (done) {
-          break
-        }
-
-        buffer += decoder.decode(value, { stream: true })
-
-        // 处理完整的事件（SSE格式：event: type\ndata: data\n\n）
-        const events = buffer.split('\n\n')
-        buffer = events.pop() || '' // 保留最后一个不完整的部分
-
-        for (const eventBlock of events) {
-          if (!eventBlock.trim()) {
-            continue
-          }
-
-          try {
-            const lines = eventBlock.split('\n')
-            let eventType = ''
-            let eventData = ''
-
-            for (const line of lines) {
-              if (line.startsWith('event: ')) {
-                eventType = line.slice(7).trim()
-              } else if (line.startsWith('data: ')) {
-                eventData = line.slice(6).trim()
-              }
-            }
-
-            if (eventType === 'start') {
-              // 开始分类
-              closeToast()
-              toastInstance = showToast({
-                message: `${eventData} (批次 ${currentBatch}/${totalBatches})`,
-                duration: 0,
-                forbidClick: false, // 允许用户点击
-                loadingType: 'spinner'
-              })
-              lastUpdateTime = Date.now()
-            } else if (eventType === 'data') {
-              // 收到分类结果
-              const data = JSON.parse(eventData)
-              processedCount++
-
-              // 记录分类结果
-              classifiedResults.value.push({
-                id: data.id,
-                classify: data.Classify,
-                type: data.Type
-              })
-
-              // 实时更新交易记录的分类信息
-              const index = props.transactions.findIndex((t) => t.id === data.id)
-              if (index !== -1) {
-                const transaction = props.transactions[index]
-                transaction.upsetedClassify = data.Classify
-                transaction.upsetedType = data.Type
-                emit('notifyDonedTransactionId', data.id)
-              }
-
-              // 限制Toast更新频率，避免频繁的DOM操作
-              const now = Date.now()
-              if (now - lastUpdateTime > updateInterval) {
-                closeToast()
-                toastInstance = showToast({
-                  message: `已分类 ${processedCount}/${totalCount} 条 (批次 ${currentBatch}/${totalBatches})...`,
-                  duration: 0,
-                  forbidClick: false, // 允许用户点击
-                  loadingType: 'spinner'
-                })
-                lastUpdateTime = now
-              }
-            } else if (eventType === 'end') {
-              // 当前批次完成
-              console.log(`批次 ${currentBatch}/${totalBatches} 完成`)
-            } else if (eventType === 'error') {
-              // 处理错误
-              throw new Error(eventData || '分类失败')
-            }
-          } catch (e) {
-            console.error('解析SSE事件失败:', e, eventBlock)
-            throw e
-          }
-        }
-      }
-    }
-
-    // 所有批次完成
-    closeToast()
-    toastInstance = null
-    isAllCompleted.value = true
-    showToast({
-      type: 'success',
-      message: `分类完成，共处理 ${processedCount} 条记录，请点击"保存分类"按钮保存结果`,
-      duration: 3000
-    })
-  } catch (error) {
-    console.error('智能分类失败:', error)
-    closeToast()
-    toastInstance = null
-    showToast({
-      type: 'fail',
-      message: '智能分类失败，请重试',
-      duration: 2000
-    })
-  } finally {
-    loading.value = false
-    lockClassifiedResults.value = false
-    // 确保Toast被清除
-    if (toastInstance) {
-      setTimeout(() => {
-        closeToast()
-        toastInstance = null
-      }, 100)
-    }
-  }
-}
-
-const removeClassifiedTransaction = (transactionId) => {
-  // 从已分类结果中移除指定ID的项
-  classifiedResults.value = classifiedResults.value.filter((item) => item.id !== transactionId)
-}
-
-/**
- * 重置组件状态
- */
-const reset = () => {
-  if (lockClassifiedResults.value) {
-    showToast('当前有分类任务正在进行，无法重置')
-    return
-  }
-
-  isAllCompleted.value = false
-  classifiedResults.value = []
-  loading.value = false
-  saving.value = false
-}
-
-defineExpose({
-  reset,
-  removeClassifiedTransaction
-})
-</script>
-
-<style scoped>
-.smart-classify-btn {
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-  border-radius: 16px;
-  padding: 6px 12px;
-}
-</style>

Web/src/components/Transaction/CategoryBillPopup.vue

@@ -0,0 +1,197 @@
+<template>
+  <PopupContainerV2
+    v-model:show="visible"
+    :title="title"
+    :height="'80%'"
+  >
+    <div style="padding: 0">
+      <div
+        v-if="total > 0"
+        style="padding: 12px 16px; text-align: center; color: #999; font-size: 14px; border-bottom: 1px solid var(--van-border-color)"
+      >
+        共 {{ total }} 笔交易
+      </div>
+
+      <BillListComponent
+        data-source="custom"
+        :transactions="transactions"
+        :loading="loading"
+        :finished="finished"
+        :show-delete="true"
+        :enable-filter="false"
+        @load="loadMore"
+        @click="onTransactionClick"
+        @delete="handleDelete"
+      />
+    </div>
+  </PopupContainerV2>
+
+  <TransactionDetailSheet
+    v-model:show="showDetail"
+    :transaction="currentTransaction"
+    @save="handleSave"
+    @delete="handleTransactionDelete"
+  />
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { showToast } from 'vant'
+import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
+import BillListComponent from '@/components/Bill/BillListComponent.vue'
+import { getTransactionList, getTransactionDetail } from '@/api/transactionRecord'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  classify: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: Number,
+    default: 0
+  },
+  year: {
+    type: Number,
+    required: true
+  },
+  month: {
+    type: Number,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'refresh'])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+const title = computed(() => {
+  const classifyText = props.classify || '未分类'
+  const typeText = props.type === 0 ? '支出' : props.type === 1 ? '收入' : '不计收支'
+  return `${classifyText} - ${typeText}`
+})
+
+const transactions = ref([])
+const loading = ref(false)
+const finished = ref(false)
+const pageIndex = ref(1)
+const pageSize = 20
+const total = ref(0)
+
+const showDetail = ref(false)
+const currentTransaction = ref(null)
+
+const loadData = async (isRefresh = false) => {
+  if (loading.value) {
+    return
+  }
+
+  if (isRefresh) {
+    pageIndex.value = 1
+    transactions.value = []
+    finished.value = false
+  }
+
+  loading.value = true
+  try {
+    const params = {
+      pageIndex: pageIndex.value,
+      pageSize: pageSize,
+      type: props.type,
+      year: props.year,
+      month: props.month || 0,
+      sortByAmount: true
+    }
+
+    if (props.classify) {
+      params.classify = props.classify
+    }
+
+    const response = await getTransactionList(params)
+
+    if (response.success) {
+      const newList = response.data || []
+
+      transactions.value = [...transactions.value, ...newList]
+      total.value = response.total
+
+      if (newList.length === 0 || newList.length < pageSize) {
+        finished.value = true
+      } else {
+        pageIndex.value++
+      }
+    } else {
+      showToast(response.message || '加载账单失败')
+      finished.value = true
+    }
+  } catch (error) {
+    console.error('加载分类账单失败:', error)
+    showToast('加载账单失败')
+    finished.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+const loadMore = () => {
+  if (!finished.value && !loading.value) {
+    loadData(false)
+  }
+}
+
+const onTransactionClick = async (txn) => {
+  try {
+    const response = await getTransactionDetail(txn.id)
+    if (response.success) {
+      currentTransaction.value = response.data
+      showDetail.value = true
+    } else {
+      showToast(response.message || '获取详情失败')
+    }
+  } catch (error) {
+    console.error('获取详情出错:', error)
+    showToast('获取详情失败')
+  }
+}
+
+const handleSave = () => {
+  showDetail.value = false
+  loadData(true)
+  emit('refresh')
+}
+
+const handleDelete = (id) => {
+  transactions.value = transactions.value.filter((t) => t.id !== id)
+  total.value--
+  emit('refresh')
+}
+
+const handleTransactionDelete = (id) => {
+  showDetail.value = false
+  transactions.value = transactions.value.filter((t) => t.id !== id)
+  total.value--
+  emit('refresh')
+}
+
+watch(visible, (newValue) => {
+  if (newValue) {
+    loadData(true)
+  } else {
+    transactions.value = []
+    pageIndex.value = 1
+    finished.value = false
+    total.value = 0
+  }
+})
+</script>
+
+<style scoped>
+@import '@/assets/theme.css';
+</style>

Web/src/components/Transaction/TransactionDetailSheet.vue

@@ -99,15 +99,40 @@
         <div class="form-label">
           分类
         </div>
-        <div
-          class="form-value clickable"
-          @click="showClassifySelector = !showClassifySelector"
-        >
-          <span v-if="editForm.classify">{{ editForm.classify }}</span>
-          <span
-            v-else
-            class="placeholder"
-          >请选择分类</span>
+        <div class="form-value">
+          <div style="flex: 1">
+            <!-- 建议分类提示 -->
+            <div
+              v-if="showSuggestionTip"
+              class="suggestion-tip"
+              @click="applySuggestion"
+            >
+              <van-icon
+                name="bulb-o"
+                class="suggestion-icon"
+              />
+              <span class="suggestion-text">
+                建议: {{ props.transaction?.unconfirmedClassify }}
+                <span v-if="showSuggestedType">
+                  ({{ getTypeName(props.transaction?.unconfirmedType) }})
+                </span>
+              </span>
+              <div class="suggestion-apply">
+                应用
+              </div>
+            </div>
+            <div
+              v-else
+              class="classify-value clickable"
+              @click="showClassifySelector = !showClassifySelector"
+            >
+              <span v-if="editForm.classify">{{ editForm.classify }}</span>
+              <span
+                v-else
+                class="placeholder"
+              >请选择分类</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -149,30 +174,43 @@
     </template>
   </PopupContainerV2>
 
-  <!-- 日期时间选择器 -->
+  <!-- 日期选择器 -->
   <van-popup
     v-model:show="showDatePicker"
     position="bottom"
     round
   >
-    <van-datetime-picker
-      v-model="currentDateTime"
-      type="datetime"
-      title="选择日期时间"
+    <van-date-picker
+      v-model="currentDate"
+      title="选择日期"
       :min-date="minDate"
       :max-date="maxDate"
-      @confirm="handleDateTimeConfirm"
+      @confirm="onDateConfirm"
       @cancel="showDatePicker = false"
     />
   </van-popup>
+
+  <!-- 时间选择器 -->
+  <van-popup
+    v-model:show="showTimePicker"
+    position="bottom"
+    round
+  >
+    <van-time-picker
+      v-model="currentTime"
+      title="选择时间"
+      @confirm="onTimeConfirm"
+      @cancel="showTimePicker = false"
+    />
+  </van-popup>
 </template>
 
 <script setup>
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive, watch, computed } from 'vue'
 import { showToast, showDialog } from 'vant'
 import dayjs from 'dayjs'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
-import ClassifySelector from '@/components/ClassifySelector.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
+import ClassifySelector from '@/components/Common/ClassifySelector.vue'
 import { updateTransaction, deleteTransaction } from '@/api/transactionRecord'
 
 const props = defineProps({
@@ -192,16 +230,18 @@ const visible = ref(false)
 const saving = ref(false)
 const deleting = ref(false)
 const showDatePicker = ref(false)
+const showTimePicker = ref(false)
 const showClassifySelector = ref(false)
 const isEditingAmount = ref(false)
 
 // 金额输入框引用
 const amountInputRef = ref(null)
 
-// 日期时间选择器配置
+// 日期选择器配置
 const minDate = new Date(2020, 0, 1)
 const maxDate = new Date(2030, 11, 31)
-const currentDateTime = ref(new Date())
+const currentDate = ref(['2024', '01', '01'])
+const currentTime = ref(['00', '00'])
 
 // 编辑表单
 const editForm = reactive({
@@ -213,6 +253,45 @@ const editForm = reactive({
   reason: ''
 })
 
+// 建议分类提示相关
+const showSuggestionTip = computed(() => {
+  const txn = props.transaction
+  return (
+    txn &&
+    txn.unconfirmedClassify &&
+    txn.unconfirmedClassify !== editForm.classify
+  )
+})
+
+const showSuggestedType = computed(() => {
+  const txn = props.transaction
+  return (
+    txn &&
+    txn.unconfirmedType !== null &&
+    txn.unconfirmedType !== undefined &&
+    txn.unconfirmedType !== editForm.type
+  )
+})
+
+const getTypeName = (type) => {
+  const typeMap = {
+    0: '支出',
+    1: '收入',
+    2: '不计'
+  }
+  return typeMap[type] || '未知'
+}
+
+const applySuggestion = () => {
+  const txn = props.transaction
+  if (txn?.unconfirmedClassify) {
+    editForm.classify = txn.unconfirmedClassify
+    if (txn.unconfirmedType !== null && txn.unconfirmedType !== undefined) {
+      editForm.type = txn.unconfirmedType
+    }
+  }
+}
+
 // 监听 props 变化
 watch(
   () => props.show,
@@ -233,9 +312,15 @@ watch(
       editForm.occurredAt = newVal.occurredAt
       editForm.reason = newVal.reason || ''
 
-      // 初始化日期时间
+      // 初始化日期时间选择器
       if (newVal.occurredAt) {
-        currentDateTime.value = new Date(newVal.occurredAt)
+        const dt = dayjs(newVal.occurredAt)
+        currentDate.value = [dt.format('YYYY'), dt.format('MM'), dt.format('DD')]
+        currentTime.value = [dt.format('HH'), dt.format('mm')]
+      } else {
+        const now = dayjs()
+        currentDate.value = [now.format('YYYY'), now.format('MM'), now.format('DD')]
+        currentTime.value = [now.format('HH'), now.format('mm')]
       }
 
       // 收起分类选择器
@@ -298,11 +383,21 @@ const handleClassifyChange = async () => {
   }
 }
 
-// 日期时间确认
-const handleDateTimeConfirm = (value) => {
-  editForm.occurredAt = dayjs(value).format('YYYY-MM-DDTHH:mm:ss')
-  currentDateTime.value = value
+// 日期确认
+const onDateConfirm = ({ selectedValues }) => {
+  currentDate.value = selectedValues
   showDatePicker.value = false
+  // 接着选择时间
+  showTimePicker.value = true
+}
+
+// 时间确认
+const onTimeConfirm = ({ selectedValues }) => {
+  currentTime.value = selectedValues
+  const [year, month, day] = currentDate.value
+  const [hour, minute] = selectedValues
+  editForm.occurredAt = `${year}-${month}-${day}T${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:00`
+  showTimePicker.value = false
 }
 
 // 保存修改
@@ -549,6 +644,47 @@ const handleDelete = async () => {
   margin: 0 24px 16px;
 }
 
+// 建议分类提示
+.suggestion-tip {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  background: var(--van-active-color);
+  color: var(--van-primary-color);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  border: 1px solid var(--van-primary-color);
+
+  &:active {
+    opacity: 0.8;
+  }
+}
+
+.suggestion-icon {
+  margin-right: 6px;
+  font-size: 16px;
+}
+
+.suggestion-text {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.suggestion-apply {
+  padding: 2px 10px;
+  background: var(--van-primary-color);
+  color: #fff;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.classify-value {
+  text-align: right;
+}
+
 // 操作按钮
 .actions-section {
   display: flex;
@@ -626,5 +762,9 @@ const handleDelete = async () => {
   .classify-section {
     background: #27272a;
   }
+
+  .suggestion-tip {
+    background: rgba(99, 102, 241, 0.1);
+  }
 }
 </style>

Web/src/components/TransactionDetail.vue

@@ -1,407 +0,0 @@
-<template>
-  <PopupContainerV2
-    v-model:show="visible"
-    title="交易详情"
-    :height="'75%'"
-  >
-    <div style="padding: 0">
-      <van-form style="margin-top: 12px">
-        <van-cell-group inset>
-          <van-cell
-            title="记录时间"
-            :value="formatDate(transaction.createTime)"
-          />
-        </van-cell-group>
-
-        <van-cell-group
-          inset
-          title="交易明细"
-        >
-          <van-field
-            v-model="occurredAtLabel"
-            name="occurredAt"
-            label="交易时间"
-            readonly
-            is-link
-            placeholder="请选择交易时间"
-            :rules="[{ required: true, message: '请选择交易时间' }]"
-            @click="showDatePicker = true"
-          />
-          <van-field
-            v-model="editForm.reason"
-            name="reason"
-            label="交易摘要"
-            placeholder="请输入交易摘要"
-            type="textarea"
-            rows="2"
-            autosize
-            maxlength="200"
-            show-word-limit
-          />
-          <van-field
-            v-model="editForm.amount"
-            name="amount"
-            label="交易金额"
-            placeholder="请输入交易金额"
-            type="number"
-            :rules="[{ required: true, message: '请输入交易金额' }]"
-          />
-          <van-field
-            v-model="editForm.balance"
-            name="balance"
-            label="交易后余额"
-            placeholder="请输入交易后余额"
-            type="number"
-            :rules="[{ required: true, message: '请输入交易后余额' }]"
-          />
-
-          <van-field
-            name="type"
-            label="交易类型"
-          >
-            <template #input>
-              <van-radio-group
-                v-model="editForm.type"
-                direction="horizontal"
-                @change="handleTypeChange"
-              >
-                <van-radio :name="0">
-                  支出
-                </van-radio>
-                <van-radio :name="1">
-                  收入
-                </van-radio>
-                <van-radio :name="2">
-                  不计
-                </van-radio>
-              </van-radio-group>
-            </template>
-          </van-field>
-
-          <van-field
-            name="classify"
-            label="交易分类"
-          >
-            <template #input>
-              <div style="flex: 1">
-                <div
-                  v-if="
-                    transaction &&
-                      transaction.unconfirmedClassify &&
-                      transaction.unconfirmedClassify !== editForm.classify
-                  "
-                  class="suggestion-tip"
-                  @click="applySuggestion"
-                >
-                  <van-icon
-                    name="bulb-o"
-                    class="suggestion-icon"
-                  />
-                  <span class="suggestion-text">
-                    建议: {{ transaction.unconfirmedClassify }}
-                    <span
-                      v-if="
-                        transaction.unconfirmedType !== null &&
-                          transaction.unconfirmedType !== undefined &&
-                          transaction.unconfirmedType !== editForm.type
-                      "
-                    >
-                      ({{ getTypeName(transaction.unconfirmedType) }})
-                    </span>
-                  </span>
-                  <div class="suggestion-apply">
-                    应用
-                  </div>
-                </div>
-                <span
-                  v-else-if="!editForm.classify"
-                  style="color: var(--van-gray-5)"
-                >请选择交易分类</span>
-                <span v-else>{{ editForm.classify }}</span>
-              </div>
-            </template>
-          </van-field>
-
-          <ClassifySelector
-            v-model="editForm.classify"
-            :type="editForm.type"
-            @change="handleClassifyChange"
-          />
-        </van-cell-group>
-      </van-form>
-    </div>
-
-    <template #footer>
-      <van-button
-        round
-        block
-        type="primary"
-        :loading="submitting"
-        @click="onSubmit"
-      >
-        保存修改
-      </van-button>
-    </template>
-  </PopupContainerV2>
-
-  <!-- 日期选择弹窗 -->
-  <van-popup
-    v-model:show="showDatePicker"
-    position="bottom"
-    round
-    teleport="body"
-  >
-    <van-date-picker
-      v-model="currentDate"
-      title="选择日期"
-      @confirm="onConfirmDate"
-      @cancel="showDatePicker = false"
-    />
-  </van-popup>
-
-  <!-- 时间选择弹窗 -->
-  <van-popup
-    v-model:show="showTimePicker"
-    position="bottom"
-    round
-    teleport="body"
-  >
-    <van-time-picker
-      v-model="currentTime"
-      title="选择时间"
-      @confirm="onConfirmTime"
-      @cancel="showTimePicker = false"
-    />
-  </van-popup>
-</template>
-
-<script setup>
-import { ref, reactive, watch, defineProps, defineEmits, computed, nextTick } from 'vue'
-import { showToast } from 'vant'
-import dayjs from 'dayjs'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
-import ClassifySelector from '@/components/ClassifySelector.vue'
-import { updateTransaction } from '@/api/transactionRecord'
-
-const props = defineProps({
-  show: {
-    type: Boolean,
-    default: false
-  },
-  transaction: {
-    type: Object,
-    default: null
-  }
-})
-
-const emit = defineEmits(['update:show', 'save'])
-
-const visible = ref(false)
-const submitting = ref(false)
-const isSyncing = ref(false)
-
-// 日期选择相关
-const showDatePicker = ref(false)
-const showTimePicker = ref(false)
-const currentDate = ref([])
-const currentTime = ref([])
-
-// 编辑表单
-const editForm = reactive({
-  id: 0,
-  reason: '',
-  amount: '',
-  balance: '',
-  type: 0,
-  classify: '',
-  occurredAt: ''
-})
-
-// 显示用的日期格式化
-const occurredAtLabel = computed(() => {
-  return formatDate(editForm.occurredAt)
-})
-
-// 监听props变化
-watch(
-  () => props.show,
-  (newVal) => {
-    visible.value = newVal
-  }
-)
-
-watch(
-  () => props.transaction,
-  (newVal) => {
-    if (newVal) {
-      isSyncing.value = true
-      // 填充编辑表单
-      editForm.id = newVal.id
-      editForm.reason = newVal.reason || ''
-      editForm.amount = String(newVal.amount)
-      editForm.balance = String(newVal.balance)
-      editForm.type = newVal.type
-      editForm.classify = newVal.classify || ''
-
-      // 初始化日期时间
-      if (newVal.occurredAt) {
-        editForm.occurredAt = newVal.occurredAt
-        const dt = dayjs(newVal.occurredAt)
-        currentDate.value = dt.format('YYYY-MM-DD').split('-')
-        currentTime.value = dt.format('HH:mm').split(':')
-      }
-
-      // 在下一个 tick 结束同步状态，确保 van-radio-group 的 @change 已触发完毕
-      nextTick(() => {
-        isSyncing.value = false
-      })
-    }
-  }
-)
-
-watch(visible, (newVal) => {
-  emit('update:show', newVal)
-})
-
-// 处理类型切换
-const handleTypeChange = () => {
-  if (!isSyncing.value) {
-    editForm.classify = ''
-  }
-}
-
-// 处理日期确认
-const onConfirmDate = ({ selectedValues }) => {
-  const dateStr = selectedValues.join('-')
-  const timeStr = currentTime.value.join(':')
-  editForm.occurredAt = dayjs(`${dateStr} ${timeStr}`).format('YYYY-MM-DDTHH:mm:ss')
-  showDatePicker.value = false
-  // 接着选时间
-  showTimePicker.value = true
-}
-
-const onConfirmTime = ({ selectedValues }) => {
-  currentTime.value = selectedValues
-  const dateStr = currentDate.value.join('-')
-  const timeStr = selectedValues.join(':')
-  editForm.occurredAt = dayjs(`${dateStr} ${timeStr}`).format('YYYY-MM-DDTHH:mm:ss')
-  showTimePicker.value = false
-}
-
-const applySuggestion = () => {
-  if (props.transaction.unconfirmedClassify) {
-    editForm.classify = props.transaction.unconfirmedClassify
-    if (
-      props.transaction.unconfirmedType !== null &&
-      props.transaction.unconfirmedType !== undefined
-    ) {
-      editForm.type = props.transaction.unconfirmedType
-    }
-  }
-}
-
-const getTypeName = (type) => {
-  const typeMap = {
-    0: '支出',
-    1: '收入',
-    2: '不计'
-  }
-  return typeMap[type] || '未知'
-}
-
-// 提交编辑
-const onSubmit = async () => {
-  try {
-    submitting.value = true
-
-    const data = {
-      id: editForm.id,
-      reason: editForm.reason,
-      amount: parseFloat(editForm.amount),
-      balance: parseFloat(editForm.balance),
-      type: editForm.type,
-      classify: editForm.classify,
-      occurredAt: editForm.occurredAt
-    }
-
-    const response = await updateTransaction(data)
-    if (response.success) {
-      showToast('保存成功')
-      visible.value = false
-      emit('save', data)
-    } else {
-      showToast(response.message || '保存失败')
-    }
-  } catch (error) {
-    console.error('保存出错:', error)
-    showToast('保存失败')
-  } finally {
-    submitting.value = false
-  }
-}
-
-// 分类选择变化
-const handleClassifyChange = () => {
-  if (editForm.id > 0 && editForm.type >= 0) {
-    // 直接保存
-    onSubmit()
-  }
-}
-
-// 清空分类
-const formatDate = (dateString) => {
-  if (!dateString) {
-    return ''
-  }
-  const date = new Date(dateString)
-  return date.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
-</script>
-
-<style scoped>
-.suggestion-tip {
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  padding: 6px 10px;
-  background: var(--van-active-color);
-  color: var(--van-primary-color);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: opacity 0.2s;
-  border: 1px solid var(--van-primary-color);
-  width: fit-content;
-  opacity: 0.1;
-}
-
-.suggestion-tip:active {
-  opacity: 0.2;
-}
-
-.suggestion-icon {
-  margin-right: 4px;
-  font-size: 14px;
-}
-
-.suggestion-text {
-  font-weight: 500;
-}
-
-.suggestion-apply {
-  margin-left: 8px;
-  padding: 0 6px;
-  background: var(--van-primary-color);
-  color: var(--van-white);
-  border-radius: 4px;
-  font-size: 10px;
-  height: 18px;
-  line-height: 18px;
-  font-weight: bold;
-}
-</style>

Web/src/views/BillAnalysisView.vue

@@ -137,7 +137,7 @@ import { ref, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast, showLoadingToast, closeToast } from 'vant'
 import { getConfig, setConfig } from '@/api/config'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
 
 const router = useRouter()
 const userInput = ref('')

Web/src/views/ClassificationBatch.vue

@@ -42,7 +42,7 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { getUnclassifiedCount } from '@/api/transactionRecord'
-import ReasonGroupList from '@/components/ReasonGroupList.vue'
+import ReasonGroupList from '@/components/Common/ReasonGroupList.vue'
 
 const router = useRouter()
 const groupListRef = ref(null)

Web/src/views/ClassificationEdit.vue

@@ -230,9 +230,9 @@
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { showSuccessToast, showToast, showLoadingToast, closeToast } from 'vant'
-import Icon from '@/components/Icon.vue'
-import IconSelector from '@/components/IconSelector.vue'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
+import Icon from '@/components/Common/Icon.vue'
+import IconSelector from '@/components/Common/IconSelector.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
 import {
   getCategoryList,
   createCategory,

Web/src/views/ClassificationNLP.vue

@@ -64,10 +64,11 @@
     </div>
 
     <!-- 交易详情弹窗 -->
-    <TransactionDetail
+    <TransactionDetailSheet
       v-model:show="showDetail"
       :transaction="currentTransaction"
       @save="handleDetailSave"
+      @delete="handleDetailDelete"
     />
 
     <!-- 记录列表弹窗 -->
@@ -132,8 +133,8 @@ import { useRouter } from 'vue-router'
 import { showToast, showConfirmDialog } from 'vant'
 import { nlpAnalysis, batchUpdateClassify } from '@/api/transactionRecord'
 import BillListComponent from '@/components/Bill/BillListComponent.vue'
-import TransactionDetail from '@/components/TransactionDetail.vue'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
+import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
 
 const router = useRouter()
 const userInput = ref('')
@@ -262,11 +263,15 @@ const handleRecordClick = (transaction) => {
 
 // 详情保存后
 const handleDetailSave = () => {
-  // 详情中的修改已经保存到服务器
-  // 这里可以选择重新分析或者只更新本地显示
   showToast('修改已保存')
 }
 
+// 详情删除后
+const handleDetailDelete = () => {
+  showDetail.value = false
+  showToast('删除成功')
+}
+
 // 提交分类
 const handleSubmit = async () => {
   if (selectedIds.value.size === 0) {

Web/src/views/ClassificationSmart.vue

@@ -60,7 +60,7 @@ import { ref, computed, onMounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast, showLoadingToast, closeToast, showConfirmDialog } from 'vant'
 import { getUnclassifiedCount, smartClassify, batchUpdateClassify } from '@/api/transactionRecord'
-import ReasonGroupList from '@/components/ReasonGroupList.vue'
+import ReasonGroupList from '@/components/Common/ReasonGroupList.vue'
 
 const router = useRouter()
 const groupListRef = ref(null)

Web/src/views/EmailRecord.vue

@@ -162,11 +162,12 @@
     </PopupContainerV2>
 
     <!-- 账单详情编辑弹出层 -->
-    <TransactionDetail
+    <TransactionDetailSheet
       :show="transactionDetailVisible"
       :transaction="currentTransaction"
       @update:show="transactionDetailVisible = $event"
       @save="handleTransactionSave"
+      @delete="handleTransactionDelete"
     />
   </div>
 </template>
@@ -184,8 +185,8 @@ import {
 } from '@/api/emailRecord'
 import { getTransactionDetail } from '@/api/transactionRecord'
 import BillListComponent from '@/components/Bill/BillListComponent.vue'
-import TransactionDetail from '@/components/TransactionDetail.vue'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
+import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
 
 const emailList = ref([])
 const loading = ref(false)

Web/src/views/MessageView.vue

@@ -116,7 +116,7 @@ import { useRouter } from 'vue-router'
 import { showToast, showDialog } from 'vant'
 import { getMessageList, markAsRead, deleteMessage, markAllAsRead } from '@/api/message'
 import { useMessageStore } from '@/stores/message'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
 
 const messageStore = useMessageStore()
 const router = useRouter()

Web/src/views/PeriodicRecord.vue

@@ -312,8 +312,8 @@ import {
   createPeriodic,
   updatePeriodic
 } from '@/api/transactionPeriodic'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
-import ClassifySelector from '@/components/ClassifySelector.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
+import ClassifySelector from '@/components/Common/ClassifySelector.vue'
 import dayjs from 'dayjs'
 
 const router = useRouter()

Web/src/views/TransactionsRecord.vue

@@ -43,10 +43,11 @@
     </van-pull-refresh>
 
     <!-- 详情/编辑弹出层 -->
-    <TransactionDetail
+    <TransactionDetailSheet
       v-model:show="detailVisible"
       :transaction="currentTransaction"
       @save="onDetailSave"
+      @delete="handleDelete"
     />
   </div>
 </template>
@@ -56,7 +57,7 @@ import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { showToast } from 'vant'
 import { getTransactionList, getTransactionDetail } from '@/api/transactionRecord'
 import BillListComponent from '@/components/Bill/BillListComponent.vue'
-import TransactionDetail from '@/components/TransactionDetail.vue'
+import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
 
 const transactionList = ref([])
 const loading = ref(false)

Web/src/views/UnconfirmedClassification.vue

@@ -91,10 +91,11 @@
     </div>
 
     <!-- 交易详情弹窗 -->
-    <TransactionDetail
+    <TransactionDetailSheet
       v-model:show="showDetail"
       :transaction="currentTransaction"
       @save="handleDetailSave"
+      @delete="handleDetailDelete"
     />
   </div>
 </template>
@@ -104,7 +105,7 @@ import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast, showConfirmDialog } from 'vant'
 import { getUnconfirmedTransactionList, confirmAllUnconfirmed } from '@/api/transactionRecord'
-import TransactionDetail from '@/components/TransactionDetail.vue'
+import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
 import BillListComponent from '@/components/Bill/BillListComponent.vue'
 
 const router = useRouter()
@@ -260,6 +261,10 @@ const handleDetailSave = () => {
   loadData()
 }
 
+const handleDetailDelete = () => {
+  loadData()
+}
+
 onMounted(() => {
   loadData()
 })

Web/src/views/budgetV2/Index.vue

@@ -264,12 +264,12 @@ import {
   getSavingsBudget
 } from '@/api/budget'
 import { BudgetPeriodType, BudgetCategory } from '@/constants/enums'
-import DateSelectHeader from '@/components/DateSelectHeader.vue'
-import BudgetTypeTabs from '@/components/BudgetTypeTabs.vue'
+import DateSelectHeader from '@/components/Common/DateSelectHeader.vue'
+import BudgetTypeTabs from '@/components/Budget/BudgetTypeTabs.vue'
 import BudgetCard from '@/components/Budget/BudgetCard.vue'
 import BudgetEditPopup from '@/components/Budget/BudgetEditPopup.vue'
 import SavingsConfigPopup from '@/components/Budget/SavingsConfigPopup.vue'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
 import ExpenseBudgetContent from './modules/ExpenseBudgetContent.vue'
 import IncomeBudgetContent from './modules/IncomeBudgetContent.vue'
 import SavingsBudgetContent from './modules/SavingsBudgetContent.vue'

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

@@ -362,7 +362,7 @@
 import { ref, computed } from 'vue'
 import BudgetCard from '@/components/Budget/BudgetCard.vue'
 import { BudgetPeriodType } from '@/constants/enums'
-import PopupContainerV2 from '@/components/PopupContainerV2.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
 
 // Props
 const props = defineProps({
@@ -431,38 +431,38 @@ const expenseCurrent = computed(() => matchedExpenseBudget.value?.current || 0)
 
 // 归档和未来预算的汇总 (仅用于年度存款计划)
 const hasArchivedIncome = computed(() => {
-  if (!currentBudget.value?.details) return false
+  if (!currentBudget.value?.details) {return false}
   return currentBudget.value.details.incomeItems.some(item => item.isArchived)
 })
 
 const archivedIncomeTotal = computed(() => {
-  if (!currentBudget.value?.details) return 0
+  if (!currentBudget.value?.details) {return 0}
   return currentBudget.value.details.incomeItems
     .filter(item => item.isArchived)
     .reduce((sum, item) => sum + item.effectiveAmount, 0)
 })
 
 const futureIncomeTotal = computed(() => {
-  if (!currentBudget.value?.details) return 0
+  if (!currentBudget.value?.details) {return 0}
   return currentBudget.value.details.incomeItems
     .filter(item => !item.isArchived)
     .reduce((sum, item) => sum + item.effectiveAmount, 0)
 })
 
 const hasArchivedExpense = computed(() => {
-  if (!currentBudget.value?.details) return false
+  if (!currentBudget.value?.details) {return false}
   return currentBudget.value.details.expenseItems.some(item => item.isArchived)
 })
 
 const archivedExpenseTotal = computed(() => {
-  if (!currentBudget.value?.details) return 0
+  if (!currentBudget.value?.details) {return 0}
   return currentBudget.value.details.expenseItems
     .filter(item => item.isArchived)
     .reduce((sum, item) => sum + item.effectiveAmount, 0)
 })
 
 const futureExpenseTotal = computed(() => {
-  if (!currentBudget.value?.details) return 0
+  if (!currentBudget.value?.details) {return 0}
   return currentBudget.value.details.expenseItems
     .filter(item => !item.isArchived)
     .reduce((sum, item) => sum + item.effectiveAmount, 0)

Web/src/views/calendarV2/Index.vue

@@ -75,7 +75,7 @@
 import { ref, onMounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast } from 'vant'
-import CalendarHeader from '@/components/DateSelectHeader.vue'
+import CalendarHeader from '@/components/Common/DateSelectHeader.vue'
 import CalendarModule from './modules/Calendar.vue'
 import StatsModule from './modules/Stats.vue'
 import TransactionListModule from './modules/TransactionList.vue'

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

@@ -34,6 +34,7 @@
               :aria-label="getAriaLabel(day)"
               @click="onDayClick(day)"
               @touchstart="onTouchStartHoliday($event, day)"
+              @touchmove="onTouchEndHoliday"
               @touchend="onTouchEndHoliday"
             >
               <div
@@ -73,9 +74,12 @@
     >
       <div
         class="holiday-tooltip-wrapper"
-        @click.stop
+        @click="closeHolidayTooltip"
       >
-        <div class="holiday-tooltip">
+        <div
+          class="holiday-tooltip"
+          @click.stop
+        >
           <div class="tooltip-title">
             {{ currentHolidayName }}
           </div>
@@ -615,7 +619,7 @@ const onTouchEnd = () => {
 }
 
 .holiday-tooltip {
-  background: white;
+  background: var(--bg-primary);
   border-radius: 12px;
   padding: 24px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

Web/src/views/statisticsV2/Index.vue

@@ -124,12 +124,12 @@
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import CalendarHeader from '@/components/DateSelectHeader.vue'
-import TimePeriodTabs from '@/components/TimePeriodTabs.vue'
+import CalendarHeader from '@/components/Common/DateSelectHeader.vue'
+import TimePeriodTabs from '@/components/Common/TimePeriodTabs.vue'
 import MonthlyExpenseCard from './modules/MonthlyExpenseCard.vue'
 import ExpenseCategoryCard from './modules/ExpenseCategoryCard.vue'
 import IncomeNoneCategoryCard from './modules/IncomeNoneCategoryCard.vue'
-import CategoryBillPopup from '@/components/CategoryBillPopup.vue'
+import CategoryBillPopup from '@/components/Transaction/CategoryBillPopup.vue'
 import {
   // 新统一接口
   getDailyStatisticsByRange,

Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue

@@ -85,7 +85,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { getCssVar } from '@/utils/theme'
-import ModernEmpty from '@/components/ModernEmpty.vue'
+import ModernEmpty from '@/components/Global/ModernEmpty.vue'
 import BaseChart from '@/components/Charts/BaseChart.vue'
 import { useChartTheme } from '@/composables/useChartTheme'
 import { pieCenterTextPlugin } from '@/plugins/chartjs-pie-center-plugin'

Web/src/views/statisticsV2/modules/IncomeNoneCategoryCard.vue

@@ -99,7 +99,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import ModernEmpty from '@/components/ModernEmpty.vue'
+import ModernEmpty from '@/components/Global/ModernEmpty.vue'
 
 const props = defineProps({
   incomeCategories: {

openspec/changes/archive/2026-02-20-remove-unused-frontend-components/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-20

openspec/changes/archive/2026-02-20-remove-unused-frontend-components/design.md

@@ -0,0 +1,54 @@
+## Context
+
+前端组件库存在两个未被引用的组件：
+- `SmartClassifyButton.vue` - 智能分类按钮，历史上可能用于快速分类功能，现已无引用
+- `BudgetSummary.vue` - 预算汇总卡片，功能已被 budgetV2 模块的子组件替代
+
+当前打包工具（Vite）的 tree-shaking 会移除未引用代码，但保留源文件会增加维护困惑和代码审查负担。
+
+## Goals / Non-Goals
+
+**Goals:**
+- 移除确认无引用的组件文件
+- 保持代码库整洁，降低维护成本
+
+**Non-Goals:**
+- 不涉及 `TransactionDetail.vue` vs `TransactionDetailSheet.vue` 的重构（两者虽然功能相似，但均有活跃引用）
+- 不涉及其他代码清理（如未使用的 composables、utils）
+
+## Decisions
+
+### 1. 删除策略：直接删除 vs 废弃标记
+
+**决策**: 直接删除
+
+**理由**:
+- 两个组件均无任何 import 引用，删除零风险
+- 无需废弃过渡期，因为没有使用方需要迁移
+- 简化变更流程，避免留下无效的废弃代码
+
+**备选方案**: 添加 `@deprecated` 注释并在下个版本删除 - 过度工程化，不必要
+
+### 2. 回归验证范围
+
+**决策**: 仅验证打包成功和页面正常渲染
+
+**理由**:
+- 删除的是零引用组件，理论上不会有任何运行时影响
+- 全量 E2E 测试成本过高，性价比低
+
+## Risks / Trade-offs
+
+| 风险 | 影响 | 缓解措施 |
+|------|------|----------|
+| 误删有引用的组件 | 页面报错 | 已通过 grep 全量搜索确认无引用 |
+| 动态引用未被发现 | 运行时报错 | 检查了 `:is` 动态组件和字符串引用模式 |
+
+## Migration Plan
+
+1. 删除 `SmartClassifyButton.vue`
+2. 删除 `BudgetSummary.vue`
+3. 运行 `pnpm build` 验证打包成功
+4. 运行 `pnpm dev` 启动开发服务器，访问主要页面验证无报错
+
+**回滚策略**: Git revert 即可恢复

openspec/changes/archive/2026-02-20-remove-unused-frontend-components/proposal.md

@@ -0,0 +1,28 @@
+## Why
+
+前端代码库中存在未使用的组件，增加了维护成本和打包体积。作为大版本迭代的清理工作，需要识别并移除这些无效代码，保持代码库整洁。
+
+## What Changes
+
+- 删除 `SmartClassifyButton.vue` - 无任何引用
+- 删除 `BudgetSummary.vue` - 无任何引用
+- 评估 `TransactionDetail.vue` 与 `TransactionDetailSheet.vue` 的重复问题（两者功能相似，需确认是否可合并）
+
+## Capabilities
+
+### New Capabilities
+
+无新增能力。
+
+### Modified Capabilities
+
+无需求变更。此变更为代码清理，不影响业务功能。
+
+## Impact
+
+- **删除文件**:
+  - `Web/src/components/SmartClassifyButton.vue`
+  - `Web/src/components/Budget/BudgetSummary.vue`
+- **风险评估**: 低风险。两个组件均无任何导入引用
+- **打包体积**: 减少无效代码约 ~5KB (gzip)
+- **测试影响**: 无需新增测试，仅需回归验证

openspec/changes/archive/2026-02-20-remove-unused-frontend-components/specs/removed-components.md

@@ -0,0 +1,13 @@
+## Overview
+
+此变更为代码清理，不涉及业务需求变更。
+
+## REMOVED Components
+
+### Requirement: SmartClassifyButton component
+**Reason**: 组件无任何引用，已被废弃
+**Migration**: 无需迁移，该组件从未被使用
+
+### Requirement: BudgetSummary component
+**Reason**: 功能已被 budgetV2 模块的子组件替代
+**Migration**: 使用 `BudgetCard.vue` 和 `BudgetChartAnalysis.vue` 替代

openspec/changes/archive/2026-02-20-remove-unused-frontend-components/tasks.md

@@ -0,0 +1,9 @@
+## 1. 移除未使用组件
+
+- [x] 1.1 删除 `Web/src/components/SmartClassifyButton.vue`
+- [x] 1.2 删除 `Web/src/components/Budget/BudgetSummary.vue`
+
+## 2. 验证
+
+- [x] 2.1 运行 `pnpm build` 验证打包成功
+- [x] 2.2 运行 `pnpm dev` 启动开发服务器，访问主要页面验证无报错

openspec/changes/archive/2026-02-20-unify-bill-list-components/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-20

openspec/changes/archive/2026-02-20-unify-bill-list-components/design.md

@@ -0,0 +1,66 @@
+## Context
+
+项目中存在多处账单列表展示，但实现方式不一致：
+- `TransactionsRecord.vue`（标准）使用 `BillListComponent`，功能完整
+- `CategoryBillPopup.vue` 自定义实现，样式和交互与标准不一致
+- `calendarV2/modules/TransactionList.vue` 使用 `BillListComponent` 但配置可能不一致
+- `BudgetCard.vue` 使用 `BillListComponent` Custom 模式
+- `EmailRecord.vue` 使用 `BillListComponent` Custom 模式
+
+核心组件 `BillListComponent.vue` 已具备统一能力，但各使用方配置参数不统一。
+
+## Goals / Non-Goals
+
+**Goals:**
+- 统一所有账单列表的 UI 样式（图标、金额、标签布局）
+- 统一基础交互（左滑删除、点击详情、空状态）
+- 确保 `BillListComponent` 正确配置
+
+**Non-Goals:**
+- 不添加搜索功能（弹窗场景不需要）
+- 不修改 API 接口
+- 不重构 `BillListComponent` 核心代码
+
+## Decisions
+
+### 决策 1: 统一使用 BillListComponent
+
+**选择**: 所有账单列表统一使用 `BillListComponent.vue`
+
+**理由**:
+- 该组件已具备所有必要功能（筛选、分页、删除、多选）
+- 支持 API 模式和 Custom 模式
+- 已有完善的暗黑模式支持
+
+**备选方案**: 为每个场景创建独立组件 → 放弃（维护成本高、样式难以统一）
+
+### 决策 2: 标准配置模板
+
+**选择**: 定义统一的 props 配置模板
+
+```typescript
+// 弹窗场景标准配置
+const popupConfig = {
+  dataSource: 'custom',
+  transactions: [...],
+  enableFilter: false,    // 弹窗不需要筛选
+  showCheckbox: false,
+  showDelete: true,       // 支持删除
+  compact: true,          // 紧凑布局
+}
+```
+
+### 决策 3: 交互事件统一
+
+**选择**: 统一使用组件 emit 事件 + 全局事件总线
+
+- `@click` → 触发详情查看
+- `transaction-deleted` → 全局广播删除事件
+
+## Risks / Trade-offs
+
+| 风险 | 缓解措施 |
+|------|----------|
+| CategoryBillPopup 自定义实现，改动较大 | 先对比差异，逐步对齐 |
+| 各场景数据源不同 | 统一使用 Custom 模式，父组件管理数据 |
+| 事件处理不一致 | 统一使用组件 emit 事件 |

openspec/changes/archive/2026-02-20-unify-bill-list-components/proposal.md

@@ -0,0 +1,41 @@
+## Why
+
+当前项目中存在多处账单列表展示，但样式和功能不一致，导致用户体验不统一。统计页面分类账单弹窗与 `/balance` 标准页面的账单列表在 UI 样式和交互行为上存在明显差异。为提升用户体验一致性和降低维护成本，需要统一所有账单列表组件的样式和基础功能。
+
+## What Changes
+
+- 统一 4 处账单列表弹窗/组件的样式和交互：
+  - `CategoryBillPopup.vue`（统计页面分类账单弹窗）
+  - `calendarV2/modules/TransactionList.vue`（日历视图账单列表）
+  - `Budget/BudgetCard.vue`（预算关联账单弹窗）
+  - `EmailRecord.vue`（邮件关联账单弹窗）
+- 对齐以下方面到 `TransactionsRecord.vue` 标准：
+  - 列表项样式（图标、文字、金额布局）
+  - 左滑删除交互
+  - 点击查看详情交互
+  - 空状态展示
+- **不涉及**：搜索功能（弹窗场景不需要搜索）
+
+## Capabilities
+
+### New Capabilities
+
+无新增能力。
+
+### Modified Capabilities
+
+- `bill-list-display`: 统一账单列表展示样式和基础交互功能
+
+## Impact
+
+**前端组件**:
+- `Web/src/components/CategoryBillPopup.vue` - 统计分类账单弹窗
+- `Web/src/views/calendarV2/modules/TransactionList.vue` - 日历账单列表
+- `Web/src/components/Budget/BudgetCard.vue` - 预算关联账单弹窗
+- `Web/src/views/EmailRecord.vue` - 邮件关联账单弹窗
+
+**参考标准**:
+- `Web/src/views/TransactionsRecord.vue` - 标准账单列表实现
+- `Web/src/components/Bill/BillListComponent.vue` - 核心账单列表组件
+
+**API 依赖**: 无新增 API，复用现有 `getTransactionList` 接口

openspec/changes/archive/2026-02-20-unify-bill-list-components/specs/transaction-list-display/spec.md

@@ -0,0 +1,89 @@
+## ADDED Requirements
+
+### Requirement: CategoryBillPopup 统一样式
+统计页面分类账单弹窗必须使用 BillListComponent，样式与 Balance 页面一致。
+
+#### Scenario: 使用 BillListComponent
+- **WHEN** 用户在统计页面点击分类卡片
+- **THEN** 弹窗使用 `BillListComponent` 展示账单列表，配置为 `dataSource="api"` 模式
+
+#### Scenario: 列表项样式对齐
+- **WHEN** 账单列表渲染
+- **THEN** 使用与 `TransactionsRecord.vue` 相同的卡片样式（图标、金额、标签布局）
+
+#### Scenario: 左滑删除
+- **WHEN** 用户在账单项上左滑
+- **THEN** 显示红色删除按钮，点击后确认删除
+
+#### Scenario: 点击查看详情
+- **WHEN** 用户点击账单项
+- **THEN** 打开 `TransactionDetailSheet` 查看详情
+
+### Requirement: CalendarV2 TransactionList 对齐
+日历页面的交易列表样式必须与 Balance 页面一致。
+
+#### Scenario: 紧凑布局
+- **WHEN** 日历页面展示当天账单列表
+- **THEN** 使用 `compact={true}` 紧凑布局
+
+#### Scenario: 删除交互
+- **WHEN** 用户左滑删除账单
+- **THEN** 与 Balance 页面删除交互一致
+
+### Requirement: BudgetCard 关联账单对齐
+预算页面的关联账单弹窗样式必须与 Balance 页面一致。
+
+#### Scenario: 统一卡片样式
+- **WHEN** 预算卡片展示关联账单
+- **THEN** 账单项样式与 Balance 页面一致
+
+### Requirement: EmailRecord 关联账单对齐
+邮件记录页面的关联账单弹窗样式必须与 Balance 页面一致。
+
+#### Scenario: 统一卡片样式
+- **WHEN** 邮件记录展示关联账单
+- **THEN** 账单项样式与 Balance 页面一致
+
+#### Scenario: 删除功能
+- **WHEN** 用户删除账单
+- **THEN** 删除交互与 Balance 页面一致
+
+## MODIFIED Requirements
+
+### Requirement: 功能对等性
+新组件必须保持旧版所有功能，确保迁移不丢失特性。
+
+#### Scenario: 批量选择功能
+- **WHEN** TransactionsRecord 需要批量操作
+- **THEN** 新组件通过 `showCheckbox` 和 `selectedIds` 提供相同功能
+
+#### Scenario: 删除后刷新
+- **WHEN** 账单删除成功
+- **THEN** 新组件派发 `transaction-deleted` 全局事件，保持与旧版相同的事件机制
+
+#### Scenario: 自定义数据源
+- **WHEN** 页面需要展示离线或缓存数据
+- **THEN** 新组件通过 `dataSource="custom"` 和 `transactions` prop 支持自定义数据
+
+#### Scenario: 弹窗场景数据源
+- **WHEN** 弹窗组件（CategoryBillPopup、BudgetCard、EmailRecord）展示账单
+- **THEN** 使用 `dataSource="api"` 或 `dataSource="custom"`，并配置 `enableFilter={false}` 禁用筛选
+
+### Requirement: 视觉升级
+新组件必须基于 v2 的现代化设计，提供更好的视觉体验。
+
+#### Scenario: 卡片样式
+- **WHEN** 展示账单列表
+- **THEN** 使用 v2 的卡片样式（圆角、阴影、图标），调整为紧凑间距
+
+#### Scenario: 图标展示
+- **WHEN** 账单有分类信息
+- **THEN** 显示对应的分类图标（如餐饮用 food 图标），带有彩色背景
+
+#### Scenario: 标签样式
+- **WHEN** 显示账单类型
+- **THEN** 使用彩色标签（支出红色、收入绿色），位于卡片右上角
+
+#### Scenario: 空状态展示
+- **WHEN** 账单列表为空
+- **THEN** 显示统一的空状态图标和提示文案

openspec/changes/archive/2026-02-20-unify-bill-list-components/tasks.md

@@ -0,0 +1,41 @@
+## 1. 分析差异
+
+- [x] 1.1 对比 CategoryBillPopup.vue 与 TransactionsRecord.vue 的样式差异
+- [x] 1.2 对比 calendarV2/modules/TransactionList.vue 与标准的差异
+- [x] 1.3 对比 BudgetCard.vue 关联账单与标准的差异
+- [x] 1.4 对比 EmailRecord.vue 关联账单与标准的差异
+
+## 2. 修改 CategoryBillPopup
+
+- [x] 2.1 重构 CategoryBillPopup 使用 BillListComponent
+- [x] 2.2 配置 props: dataSource="custom", enableFilter=false, showDelete=true
+- [x] 2.3 统一列表项样式（图标、金额、标签）
+- [x] 2.4 实现左滑删除交互
+- [x] 2.5 实现点击查看详情（打开 TransactionDetailSheet）
+- [x] 2.6 测试删除和详情功能
+
+## 3. 修改 CalendarV2 TransactionList
+
+- [x] 3.1 检查 BillListComponent 配置
+- [x] 3.2 确保 compact={true} 紧凑布局
+- [x] 3.3 统一删除交互
+- [x] 3.4 测试日历页面账单列表
+
+## 4. 修改 BudgetCard 关联账单
+
+- [x] 4.1 检查 BillListComponent 配置
+- [x] 4.2 统一卡片样式
+- [x] 4.3 测试预算关联账单弹窗
+
+## 5. 修改 EmailRecord 关联账单
+
+- [x] 5.1 检查 BillListComponent 配置
+- [x] 5.2 统一卡片样式和删除功能
+- [x] 5.3 测试邮件关联账单弹窗
+
+## 6. 验证
+
+- [x] 6.1 验证所有弹窗的账单列表样式一致
+- [x] 6.2 验证删除功能在各场景正常工作
+- [x] 6.3 验证详情查看功能正常
+- [x] 6.4 验证暗黑模式适配

openspec/changes/archive/2026-02-21-unify-bill-detail-component/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-21

openspec/changes/archive/2026-02-21-unify-bill-detail-component/design.md

@@ -0,0 +1,78 @@
+## Context
+
+当前项目存在两个交易详情组件，视觉样式和功能存在差异：
+
+| 组件 | 使用位置 | 特点 |
+|------|---------|------|
+| `TransactionDetailSheet.vue` | calendarV2, CategoryBillPopup | 简洁卡片式设计，点击金额可编辑，无建议分类提示 |
+| `TransactionDetail.vue` | TransactionsRecord | 传统表单设计，有建议分类提示，支持余额编辑 |
+
+**核心差异**：
+1. 视觉样式：TransactionDetailSheet 更现代简洁
+2. 建议分类提示：仅 TransactionDetail.vue 支持显示 AI 建议的分类
+3. 余额编辑：TransactionDetail.vue 支持余额编辑
+
+## Goals / Non-Goals
+
+**Goals:**
+- 统一所有页面的交易详情视觉样式，使用 TransactionDetailSheet 的设计
+- 保留 TransactionDetail.vue 中的必要功能（建议分类提示）
+- 简化组件维护，减少重复代码
+
+**Non-Goals:**
+- 不修改 API 接口
+- 不修改后端逻辑
+- 不增加新功能（仅整合现有功能）
+
+## Decisions
+
+### 决策 1：选择 TransactionDetailSheet 作为基准组件
+
+**理由**：
+- 视觉设计更现代，用户体验更好
+- 已被 calendarV2（主要入口）和 CategoryBillPopup 使用
+- 代码结构更清晰，使用 Composition API
+
+**替代方案**：
+- 方案 A：合并两个组件为一个，通过 props 控制样式 → 拒绝，增加复杂度
+- 方案 B：保持两个组件分别维护 → 拒绝，维护成本高，用户体验不一致
+
+### 决策 2：将建议分类提示功能迁移到 TransactionDetailSheet
+
+**理由**：
+- 该功能是智能分类体验的核心部分
+- 用户在 TransactionsRecord 页面查看未确认分类的交易时需要此提示
+
+**实现方式**：
+- 在 TransactionDetailSheet 的分类选择区域上方添加建议提示条
+- 点击"应用"后自动填充建议的分类和类型
+
+### 决策 3：删除旧的 TransactionDetail.vue 组件
+
+**理由**：
+- 功能已完全迁移到 TransactionDetailSheet
+- 避免代码冗余和维护负担
+
+## Risks / Trade-offs
+
+| 风险 | 缓解措施 |
+|-----|---------|
+| 用户习惯旧界面样式 | 新界面更简洁直观，学习成本低 |
+| 迁移过程中遗漏功能 | 详细对比两个组件功能，确保无遗漏 |
+| 建议分类提示功能迁移不完整 | 测试未确认分类交易的显示和交互 |
+
+## Migration Plan
+
+1. **Phase 1**: 增强 TransactionDetailSheet
+   - 添加建议分类提示功能
+   - 确保所有功能完整
+
+2. **Phase 2**: 更新 TransactionsRecord 页面
+   - 替换组件引用
+   - 调整事件处理
+
+3. **Phase 3**: 清理
+   - 删除 TransactionDetail.vue
+   - 更新相关文档
+
+**回滚策略**：Git revert 即可，无数据迁移风险

openspec/changes/archive/2026-02-21-unify-bill-detail-component/proposal.md

@@ -0,0 +1,33 @@
+## Why
+
+当前项目中存在两个交易详情组件：`TransactionDetailSheet.vue`（calendarV2 使用）和 `TransactionDetail.vue`（TransactionsRecord 使用），导致用户在不同页面查看交易详情时视觉体验不一致。需要统一为 calendarV2 页面的详情样式，提升用户体验一致性并减少维护成本。
+
+## What Changes
+
+- **统一交易详情组件**：将所有页面的交易详情统一使用 `TransactionDetailSheet.vue` 组件
+- **更新 TransactionsRecord 页面**：将详情组件从 `TransactionDetail.vue` 替换为 `TransactionDetailSheet.vue`
+- **弃用旧组件**：移除不再使用的 `TransactionDetail.vue` 组件
+- **增强 TransactionDetailSheet**：确保组件具备完整功能（余额编辑支持、建议分类提示等）
+
+## Capabilities
+
+### New Capabilities
+
+- `unified-transaction-detail`: 统一的交易详情弹窗组件，支持金额编辑、分类选择、时间修改、删除操作，所有页面共用同一视觉样式
+
+### Modified Capabilities
+
+- 无（现有功能保持不变，仅统一样式）
+
+## Impact
+
+**受影响的文件**：
+- `Web/src/views/TransactionsRecord.vue` - 替换详情组件引用
+- `Web/src/components/Transaction/TransactionDetail.vue` - 删除或标记弃用
+
+**不受影响的文件**：
+- `Web/src/views/calendarV2/Index.vue` - 已使用 TransactionDetailSheet
+- `Web/src/components/Transaction/CategoryBillPopup.vue` - 已使用 TransactionDetailSheet
+- `Web/src/components/Transaction/TransactionDetailSheet.vue` - 基准组件，保持不变
+
+**API 无变更**：仅前端组件层面的统一

openspec/changes/archive/2026-02-21-unify-bill-detail-component/specs/unified-transaction-detail/spec.md

@@ -0,0 +1,74 @@
+## ADDED Requirements
+
+### Requirement: 统一的交易详情弹窗组件
+
+系统 SHALL 提供统一的交易详情弹窗组件 `TransactionDetailSheet.vue`，所有页面使用同一组件查看和编辑交易详情。
+
+#### Scenario: 从任意页面打开交易详情
+- **WHEN** 用户在 calendarV2、TransactionsRecord 或其他页面点击交易记录
+- **THEN** 系统显示统一的 TransactionDetailSheet 弹窗组件
+
+#### Scenario: 详情弹窗显示交易信息
+- **WHEN** 弹窗打开
+- **THEN** 显示金额（可点击编辑）、时间、备注、类型、分类
+
+#### Scenario: 编辑金额
+- **WHEN** 用户点击金额区域
+- **THEN** 进入金额编辑模式，显示数字输入框
+- **AND** 失焦后自动保存格式化的金额值
+
+### Requirement: 建议分类提示功能
+
+系统 SHALL 在交易详情弹窗中显示 AI 建议的分类提示（当存在未确认分类时）。
+
+#### Scenario: 显示建议分类提示
+- **WHEN** 交易存在 `unconfirmedClassify` 字段且与当前分类不同
+- **THEN** 在分类选择区域上方显示建议提示条
+- **AND** 提示条包含建议的分类名称和应用按钮
+
+#### Scenario: 应用建议分类
+- **WHEN** 用户点击"应用"按钮
+- **THEN** 自动填充建议的分类到分类字段
+- **AND** 如果存在 `unconfirmedType`，同时更新交易类型
+
+### Requirement: 交易保存功能
+
+系统 SHALL 允许用户修改交易详情并保存。
+
+#### Scenario: 保存修改的交易
+- **WHEN** 用户修改交易信息后点击"保存"按钮
+- **AND** 必填字段（金额、分类、时间）已填写
+- **THEN** 系统调用更新 API 并显示成功提示
+- **AND** 关闭弹窗并刷新交易列表
+
+#### Scenario: 保存时验证失败
+- **WHEN** 用户点击"保存"但必填字段未填写
+- **THEN** 显示对应的错误提示信息
+
+### Requirement: 交易删除功能
+
+系统 SHALL 允许用户删除交易记录。
+
+#### Scenario: 删除交易确认
+- **WHEN** 用户点击"删除"按钮
+- **THEN** 显示确认对话框
+
+#### Scenario: 确认删除交易
+- **WHEN** 用户在确认对话框中点击"删除"
+- **THEN** 系统调用删除 API
+- **AND** 成功后关闭弹窗并刷新交易列表
+- **AND** 显示删除成功提示
+
+### Requirement: 页面兼容性
+
+系统 SHALL 确保统一组件在所有使用场景正常工作。
+
+#### Scenario: TransactionsRecord 页面使用详情组件
+- **WHEN** 用户在 TransactionsRecord 页面点击交易记录
+- **THEN** 显示 TransactionDetailSheet 弹窗
+- **AND** 功能与原 TransactionDetail 组件一致
+
+#### Scenario: calendarV2 页面使用详情组件
+- **WHEN** 用户在 calendarV2 页面点击交易记录
+- **THEN** 显示 TransactionDetailSheet 弹窗
+- **AND** 保持原有功能和交互不变

openspec/changes/archive/2026-02-21-unify-bill-detail-component/tasks.md

@@ -0,0 +1,25 @@
+## 1. 增强组件功能
+
+- [x] 1.1 在 TransactionDetailSheet.vue 中添加建议分类提示功能
+- [x] 1.2 添加建议提示 UI 组件（显示 unconfirmedClassify 和应用按钮）
+- [x] 1.3 实现应用建议分类逻辑（更新 classify 和 type 字段）
+
+## 2. 迁移页面引用
+
+- [x] 2.1 修改 TransactionsRecord.vue，将 TransactionDetail 组件替换为 TransactionDetailSheet
+- [x] 2.2 更新 TransactionsRecord.vue 中的事件处理（save → save, delete → delete）
+- [x] 2.3 测试 TransactionsRecord 页面的详情功能
+
+## 3. 清理旧代码
+
+- [x] 3.1 确认无其他页面引用 TransactionDetail.vue
+- [x] 3.2 删除 TransactionDetail.vue 组件文件
+- [x] 3.3 更新相关文档（如有）
+
+## 4. 测试验证
+
+- [x] 4.1 测试 calendarV2 页面交易详情功能（无回归）
+- [x] 4.2 测试 TransactionsRecord 页面交易详情功能
+- [x] 4.3 测试 CategoryBillPopup 中交易详情功能
+- [x] 4.4 测试建议分类提示功能
+- [x] 4.5 运行前端 lint 检查

openspec/specs/transaction-list-display/spec.md

@@ -11,6 +11,54 @@
 - **WHEN** CalendarV2 需要展示交易列表
 - **THEN** 使用 `BillListComponent.vue` 或保留其特有实现（如有特殊需求）
 
+### Requirement: CategoryBillPopup 统一样式
+统计页面分类账单弹窗必须使用 BillListComponent，样式与 Balance 页面一致。
+
+#### Scenario: 使用 BillListComponent
+- **WHEN** 用户在统计页面点击分类卡片
+- **THEN** 弹窗使用 `BillListComponent` 展示账单列表，配置为 `dataSource="api"` 模式
+
+#### Scenario: 列表项样式对齐
+- **WHEN** 账单列表渲染
+- **THEN** 使用与 `TransactionsRecord.vue` 相同的卡片样式（图标、金额、标签布局）
+
+#### Scenario: 左滑删除
+- **WHEN** 用户在账单项上左滑
+- **THEN** 显示红色删除按钮，点击后确认删除
+
+#### Scenario: 点击查看详情
+- **WHEN** 用户点击账单项
+- **THEN** 打开 `TransactionDetailSheet` 查看详情
+
+### Requirement: CalendarV2 TransactionList 对齐
+日历页面的交易列表样式必须与 Balance 页面一致。
+
+#### Scenario: 紧凑布局
+- **WHEN** 日历页面展示当天账单列表
+- **THEN** 使用 `compact={true}` 紧凑布局
+
+#### Scenario: 删除交互
+- **WHEN** 用户左滑删除账单
+- **THEN** 与 Balance 页面删除交互一致
+
+### Requirement: BudgetCard 关联账单对齐
+预算页面的关联账单弹窗样式必须与 Balance 页面一致。
+
+#### Scenario: 统一卡片样式
+- **WHEN** 预算卡片展示关联账单
+- **THEN** 账单项样式与 Balance 页面一致
+
+### Requirement: EmailRecord 关联账单对齐
+邮件记录页面的关联账单弹窗样式必须与 Balance 页面一致。
+
+#### Scenario: 统一卡片样式
+- **WHEN** 邮件记录展示关联账单
+- **THEN** 账单项样式与 Balance 页面一致
+
+#### Scenario: 删除功能
+- **WHEN** 用户删除账单
+- **THEN** 删除交互与 Balance 页面一致
+
 ### Requirement: 功能对等性
 新组件必须保持旧版所有功能，确保迁移不丢失特性。
 
@@ -26,12 +74,16 @@
 - **WHEN** 页面需要展示离线或缓存数据
 - **THEN** 新组件通过 `dataSource="custom"` 和 `transactions` prop 支持自定义数据
 
+#### Scenario: 弹窗场景数据源
+- **WHEN** 弹窗组件（CategoryBillPopup、BudgetCard、EmailRecord）展示账单
+- **THEN** 使用 `dataSource="api"` 或 `dataSource="custom"`，并配置 `enableFilter={false}` 禁用筛选
+
 ### Requirement: 视觉升级
 新组件必须基于 v2 的现代化设计，提供更好的视觉体验。
 
 #### Scenario: 卡片样式
 - **WHEN** 展示账单列表
-- **THEN** 使用 v2 的卡片样式（圆角、阴影、图标），但调整为紧凑间距
+- **THEN** 使用 v2 的卡片样式（圆角、阴影、图标），调整为紧凑间距
 
 #### Scenario: 图标展示
 - **WHEN** 账单有分类信息
@@ -41,6 +93,10 @@
 - **WHEN** 显示账单类型
 - **THEN** 使用彩色标签（支出红色、收入绿色），位于卡片右上角
 
+#### Scenario: 空状态展示
+- **WHEN** 账单列表为空
+- **THEN** 显示统一的空状态图标和提示文案
+
 ### Requirement: 迁移计划
 系统必须按阶段迁移，确保平滑过渡。
 

openspec/specs/unified-transaction-detail/spec.md

@@ -0,0 +1,74 @@
+## Requirements
+
+### Requirement: 统一的交易详情弹窗组件
+
+系统 SHALL 提供统一的交易详情弹窗组件 `TransactionDetailSheet.vue`，所有页面使用同一组件查看和编辑交易详情。
+
+#### Scenario: 从任意页面打开交易详情
+- **WHEN** 用户在 calendarV2、TransactionsRecord 或其他页面点击交易记录
+- **THEN** 系统显示统一的 TransactionDetailSheet 弹窗组件
+
+#### Scenario: 详情弹窗显示交易信息
+- **WHEN** 弹窗打开
+- **THEN** 显示金额（可点击编辑）、时间、备注、类型、分类
+
+#### Scenario: 编辑金额
+- **WHEN** 用户点击金额区域
+- **THEN** 进入金额编辑模式，显示数字输入框
+- **AND** 失焦后自动保存格式化的金额值
+
+### Requirement: 建议分类提示功能
+
+系统 SHALL 在交易详情弹窗中显示 AI 建议的分类提示（当存在未确认分类时）。
+
+#### Scenario: 显示建议分类提示
+- **WHEN** 交易存在 `unconfirmedClassify` 字段且与当前分类不同
+- **THEN** 在分类选择区域上方显示建议提示条
+- **AND** 提示条包含建议的分类名称和应用按钮
+
+#### Scenario: 应用建议分类
+- **WHEN** 用户点击"应用"按钮
+- **THEN** 自动填充建议的分类到分类字段
+- **AND** 如果存在 `unconfirmedType`，同时更新交易类型
+
+### Requirement: 交易保存功能
+
+系统 SHALL 允许用户修改交易详情并保存。
+
+#### Scenario: 保存修改的交易
+- **WHEN** 用户修改交易信息后点击"保存"按钮
+- **AND** 必填字段（金额、分类、时间）已填写
+- **THEN** 系统调用更新 API 并显示成功提示
+- **AND** 关闭弹窗并刷新交易列表
+
+#### Scenario: 保存时验证失败
+- **WHEN** 用户点击"保存"但必填字段未填写
+- **THEN** 显示对应的错误提示信息
+
+### Requirement: 交易删除功能
+
+系统 SHALL 允许用户删除交易记录。
+
+#### Scenario: 删除交易确认
+- **WHEN** 用户点击"删除"按钮
+- **THEN** 显示确认对话框
+
+#### Scenario: 确认删除交易
+- **WHEN** 用户在确认对话框中点击"删除"
+- **THEN** 系统调用删除 API
+- **AND** 成功后关闭弹窗并刷新交易列表
+- **AND** 显示删除成功提示
+
+### Requirement: 页面兼容性
+
+系统 SHALL 确保统一组件在所有使用场景正常工作。
+
+#### Scenario: TransactionsRecord 页面使用详情组件
+- **WHEN** 用户在 TransactionsRecord 页面点击交易记录
+- **THEN** 显示 TransactionDetailSheet 弹窗
+- **AND** 功能与原 TransactionDetail 组件一致
+
+#### Scenario: calendarV2 页面使用详情组件
+- **WHEN** 用户在 calendarV2 页面点击交易记录
+- **THEN** 显示 TransactionDetailSheet 弹窗
+- **AND** 保持原有功能和交互不变