fix: 修复 ReasonGroupList 组件引用路径

refactor: 整理组件目录结构
- TransactionDetail, CategoryBillPopup 移入 Transaction/ - BudgetTypeTabs 移入 Budget/ - GlassBottomNav, ModernEmpty 移入 Global/ - Icon, IconSelector, ClassifySelector 等 8 个通用组件移入 Common/ - 更新所有相关引用路径
2026-02-21 10:57:09 +08:00 · 2026-02-21 10:10:16 +08:00 · 2026-02-20 22:39:29 +08:00 · 2026-02-20 22:22:54 +08:00
52 changed files with 647 additions and 1225 deletions
--- a/Web/src/App.vue
+++ b/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'

--- a/Web/src/components/Bill/BillForm.vue
+++ b/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: {
--- a/Web/src/components/Bill/BillListComponent.vue
+++ b/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
--- a/Web/src/components/Budget/BudgetCard.vue
+++ b/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'

--- a/Web/src/components/Budget/BudgetChartAnalysis.vue
+++ b/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'
--- a/Web/src/components/Budget/BudgetEditPopup.vue
+++ b/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'])

--- a/Web/src/components/Budget/BudgetSummary.vue
+++ b/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>
--- a/Web/src/components/Budget/BudgetTypeTabs.vue
+++ b/Web/src/components/Budget/BudgetTypeTabs.vue
--- a/Web/src/components/Budget/SavingsConfigPopup.vue
+++ b/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'])

--- a/Web/src/components/CategoryBillPopup.vue
+++ b/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>
--- a/Web/src/components/Common/AddClassifyDialog.vue
+++ b/Web/src/components/Common/AddClassifyDialog.vue
--- a/Web/src/components/Common/ClassifySelector.vue
+++ b/Web/src/components/Common/ClassifySelector.vue
--- a/Web/src/components/Common/DateSelectHeader.vue
+++ b/Web/src/components/Common/DateSelectHeader.vue
--- a/Web/src/components/Common/Icon.vue
+++ b/Web/src/components/Common/Icon.vue
--- a/Web/src/components/Common/IconSelector.vue
+++ b/Web/src/components/Common/IconSelector.vue
--- a/Web/src/components/Common/PopupContainerV2.vue
+++ b/Web/src/components/Common/PopupContainerV2.vue
--- a/Web/src/components/Common/ReasonGroupList.vue
+++ b/Web/src/components/Common/ReasonGroupList.vue
@@ -197,8 +197,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 TransactionDetail from '@/components/Transaction/TransactionDetail.vue'
 import PopupContainerV2 from './PopupContainerV2.vue'

 const props = defineProps({
--- a/Web/src/components/Common/TimePeriodTabs.vue
+++ b/Web/src/components/Common/TimePeriodTabs.vue
--- a/Web/src/components/Global/GlassBottomNav.vue
+++ b/Web/src/components/Global/GlassBottomNav.vue
--- a/Web/src/components/Global/GlobalAddBill.vue
+++ b/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'

--- a/Web/src/components/Global/ModernEmpty.vue
+++ b/Web/src/components/Global/ModernEmpty.vue
--- a/Web/src/components/SmartClassifyButton.vue
+++ b/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>
--- a/Web/src/components/Transaction/CategoryBillPopup.vue
+++ b/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>
--- a/Web/src/components/Transaction/TransactionDetail.vue
+++ b/Web/src/components/Transaction/TransactionDetail.vue
@@ -179,8 +179,8 @@
 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 PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
+import ClassifySelector from '@/components/Common/ClassifySelector.vue'
 import { updateTransaction } from '@/api/transactionRecord'

 const props = defineProps({
--- a/Web/src/components/Transaction/TransactionDetailSheet.vue
+++ b/Web/src/components/Transaction/TransactionDetailSheet.vue
@@ -171,8 +171,8 @@
 import { ref, reactive, watch } 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({
--- a/Web/src/views/BillAnalysisView.vue
+++ b/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('')
--- a/Web/src/views/ClassificationBatch.vue
+++ b/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)
--- a/Web/src/views/ClassificationEdit.vue
+++ b/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,
--- a/Web/src/views/ClassificationNLP.vue
+++ b/Web/src/views/ClassificationNLP.vue
@@ -132,8 +132,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 TransactionDetail from '@/components/Transaction/TransactionDetail.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'

 const router = useRouter()
 const userInput = ref('')
--- a/Web/src/views/ClassificationSmart.vue
+++ b/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)
--- a/Web/src/views/EmailRecord.vue
+++ b/Web/src/views/EmailRecord.vue
@@ -184,8 +184,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 TransactionDetail from '@/components/Transaction/TransactionDetail.vue'
+import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'

 const emailList = ref([])
 const loading = ref(false)
--- a/Web/src/views/MessageView.vue
+++ b/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()
--- a/Web/src/views/PeriodicRecord.vue
+++ b/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()
--- a/Web/src/views/TransactionsRecord.vue
+++ b/Web/src/views/TransactionsRecord.vue
@@ -56,7 +56,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 TransactionDetail from '@/components/Transaction/TransactionDetail.vue'

 const transactionList = ref([])
 const loading = ref(false)
--- a/Web/src/views/UnconfirmedClassification.vue
+++ b/Web/src/views/UnconfirmedClassification.vue
@@ -104,7 +104,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 TransactionDetail from '@/components/Transaction/TransactionDetail.vue'
 import BillListComponent from '@/components/Bill/BillListComponent.vue'

 const router = useRouter()
--- a/Web/src/views/budgetV2/Index.vue
+++ b/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'
--- a/Web/src/views/budgetV2/modules/SavingsBudgetContent.vue
+++ b/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({
@@ -400,7 +400,7 @@ const handleShowDetail = (budget) => {
    console.log('Details 内容:', budget.Details)
  }
  console.log('===================')
-  
+
  currentBudget.value = budget
  showDetailPopup.value = true
 }
@@ -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)
--- a/Web/src/views/calendarV2/Index.vue
+++ b/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'
--- a/Web/src/views/statisticsV2/Index.vue
+++ b/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,
--- a/Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue
+++ b/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'
--- a/Web/src/views/statisticsV2/modules/IncomeNoneCategoryCard.vue
+++ b/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: {
--- a/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/.openspec.yaml
+++ b/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-20
--- a/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/design.md
+++ b/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 即可恢复
--- a/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/proposal.md
+++ b/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)
+- **测试影响**: 无需新增测试，仅需回归验证
--- a/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/specs/removed-components.md
+++ b/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` 替代
--- a/openspec/changes/archive/2026-02-20-remove-unused-frontend-components/tasks.md
+++ b/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` 启动开发服务器，访问主要页面验证无报错
--- a/openspec/changes/archive/2026-02-20-unify-bill-list-components/.openspec.yaml
+++ b/openspec/changes/archive/2026-02-20-unify-bill-list-components/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-20
--- a/openspec/changes/archive/2026-02-20-unify-bill-list-components/design.md
+++ b/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 事件 |
--- a/openspec/changes/archive/2026-02-20-unify-bill-list-components/proposal.md
+++ b/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` 接口
--- a/openspec/changes/archive/2026-02-20-unify-bill-list-components/specs/transaction-list-display/spec.md
+++ b/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** 显示统一的空状态图标和提示文案
--- a/openspec/changes/archive/2026-02-20-unify-bill-list-components/tasks.md
+++ b/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 验证暗黑模式适配
--- a/openspec/specs/transaction-list-display/spec.md
+++ b/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: 迁移计划
 系统必须按阶段迁移，确保平滑过渡。
Author	SHA1	Message	Date
SunCheng	5f5c15ffb5	fix: 修复 ReasonGroupList 组件引用路径 All checks were successful Docker Build & Deploy / Build Docker Image (push) Successful in 16s Details Docker Build & Deploy / Deploy to Production (push) Successful in 6s Details Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s Details Docker Build & Deploy / WeChat Notification (push) Successful in 2s Details	2026-02-21 10:57:09 +08:00
SunCheng	045158730f	refactor: 整理组件目录结构 Some checks failed Docker Build & Deploy / Build Docker Image (push) Failing after 4m47s Details Docker Build & Deploy / Deploy to Production (push) Has been skipped Details Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 2s Details Docker Build & Deploy / WeChat Notification (push) Successful in 2s Details - TransactionDetail, CategoryBillPopup 移入 Transaction/ - BudgetTypeTabs 移入 Budget/ - GlassBottomNav, ModernEmpty 移入 Global/ - Icon, IconSelector, ClassifySelector 等 8 个通用组件移入 Common/ - 更新所有相关引用路径	2026-02-21 10:10:16 +08:00
SunCheng	b173c83134	chore: 移除未使用的前端组件 All checks were successful Docker Build & Deploy / Build Docker Image (push) Successful in 16s Details Docker Build & Deploy / Deploy to Production (push) Successful in 7s Details Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s Details Docker Build & Deploy / WeChat Notification (push) Successful in 1s Details - 删除 SmartClassifyButton.vue (无引用) - 删除 BudgetSummary.vue (无引用) - 归档变更记录	2026-02-20 22:39:29 +08:00
SunCheng	5f9672744b	fix All checks were successful Docker Build & Deploy / Build Docker Image (push) Successful in 21s Details Docker Build & Deploy / Deploy to Production (push) Successful in 6s Details Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s Details Docker Build & Deploy / WeChat Notification (push) Successful in 1s Details	2026-02-20 22:22:54 +08:00