refactor(calendar-v2): migrate TransactionList to BillListComponent

- 使用统一的 BillListComponent 替换自定义账单列表
- 保留自定义 header (交易记录标题 + Items 计数 + Smart 按钮)
- 移除数据格式转换逻辑,直接传递原始数据
- 简化代码从 403 行减少到 177 行
- 配置: data-source=custom, enable-filter=false, show-delete=false

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

@@ -4,14 +4,14 @@
   特殊功能：
   - 自定义 header（Items 数量、Smart 按钮）
   - 与日历视图紧密集成
-  - 特定的 UI 风格和交互
+  - 使用统一的 BillListComponent 展示账单列表
 
-  注意：此组件不是通用的 BillListComponent，专为 CalendarV2 视图设计。
+  迁移说明：已迁移至使用 BillListComponent，保留自定义 header 和 Smart 按钮
-  如需通用账单列表功能，请使用 @/components/Bill/BillListComponent.vue
 -->
 <template>
   <!-- 交易列表 -->
   <div class="transactions">
+    <!-- 自定义 header (保留) -->
     <div class="txn-header">
       <h2 class="txn-title">
         交易记录
@@ -30,79 +30,23 @@
       </div>
     </div>
 
-    <!-- 交易卡片 -->
+    <!-- 统一的账单列表组件 -->
-    <van-loading
+    <BillListComponent
-      v-if="transactionsLoading"
+      data-source="custom"
-      class="txn-loading"
+      :transactions="transactions"
-      size="24px"
+      :loading="transactionsLoading"
-      vertical
+      :finished="true"
-    >
+      :show-delete="false"
-      加载中...
+      :enable-filter="false"
-    </van-loading>
+      @click="onTransactionClick"
-    <div
-      v-else-if="transactions.length === 0"
-      class="txn-empty"
-    >
-      <div class="empty-icon">
-        <van-icon
-          name="balance-list-o"
-          size="48"
     />
   </div>
-      <div class="empty-text">
-        当天暂无交易记录
-      </div>
-      <div class="empty-hint">
-        轻松享受无消费的一天 ✨
-      </div>
-    </div>
-    <div
-      v-else
-      class="txn-list"
-    >
-      <div
-        v-for="txn in transactions"
-        :key="txn.id"
-        class="txn-card"
-        @click="onTransactionClick(txn)"
-      >
-        <div
-          class="txn-icon"
-          :style="{ backgroundColor: txn.iconBg }"
-        >
-          <van-icon
-            :name="txn.icon"
-            :color="txn.iconColor"
-          />
-        </div>
-        <div class="txn-content">
-          <div class="txn-name">
-            {{ txn.name }}
-          </div>
-          <div class="txn-footer">
-            <div class="txn-time">
-              {{ txn.time }}
-            </div>
-            <span
-              v-if="txn.classify"
-              class="txn-classify-tag"
-              :class="txn.type === 1 ? 'tag-income' : 'tag-expense'"
-            >
-              {{ txn.classify }}
-            </span>
-          </div>
-        </div>
-        <div class="txn-amount">
-          {{ txn.amount }}
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script setup>
 import { computed, watch, ref } from 'vue'
 import { getTransactionsByDate } from '@/api/transactionRecord'
+import BillListComponent from '@/components/Bill/BillListComponent.vue'
 
 const props = defineProps({
   selectedDate: Date
@@ -122,39 +66,6 @@ const formatDateKey = (date) => {
   return `${year}-${month}-${day}`
 }
 
-// 格式化时间（HH:MM）
-const formatTime = (dateTimeStr) => {
-  const date = new Date(dateTimeStr)
-  const hours = String(date.getHours()).padStart(2, '0')
-  const minutes = String(date.getMinutes()).padStart(2, '0')
-  return `${hours}:${minutes}`
-}
-
-// 格式化金额
-const formatAmount = (amount, type) => {
-  const sign = type === 1 ? '+' : '-' // 1=收入, 0=支出
-  return `${sign}${amount.toFixed(2)}`
-}
-
-// 根据分类获取图标
-const getIconByClassify = (classify) => {
-  const iconMap = {
-    餐饮: 'food',
-    购物: 'shopping',
-    交通: 'transport',
-    娱乐: 'play',
-    医疗: 'medical',
-    工资: 'money',
-    红包: 'red-packet'
-  }
-  return iconMap[classify] || 'star'
-}
-
-// 根据类型获取颜色
-const getColorByType = (type) => {
-  return type === 1 ? '#22C55E' : '#FF6B6B' // 收入绿色，支出红色
-}
-
 // 获取选中日期的交易列表
 const fetchDayTransactions = async (date) => {
   try {
@@ -163,18 +74,8 @@ const fetchDayTransactions = async (date) => {
     const response = await getTransactionsByDate(dateKey)
 
     if (response.success && response.data) {
-      // 转换为界面需要的格式
+      // 直接使用原始数据,交给 BillListComponent 处理格式化
-      transactions.value = response.data.map((txn) => ({
+      transactions.value = response.data
-        id: txn.id,
-        name: txn.reason || '未知交易',
-        time: formatTime(txn.occurredAt),
-        amount: formatAmount(txn.amount, txn.type),
-        icon: getIconByClassify(txn.classify),
-        iconColor: getColorByType(txn.type),
-        iconBg: '#FFFFFF',
-        classify: txn.classify,
-        type: txn.type
-      }))
     }
   } catch (error) {
     console.error('获取交易记录失败:', error)
@@ -211,7 +112,7 @@ const onSmartClick = () => {
 <style scoped>
 @import '@/assets/theme.css';
 
-/* ========== 交易列表 ========== */
+/* ========== 交易列表容器 ========== */
 .transactions {
   display: flex;
   flex-direction: column;
@@ -220,6 +121,7 @@ const onSmartClick = () => {
   padding-top: 0;
 }
 
+/* ========== 自定义 Header (保留) ========== */
 .txn-header {
   display: flex;
   align-items: center;
@@ -271,132 +173,4 @@ const onSmartClick = () => {
 .smart-btn:active {
   opacity: 0.7;
 }
-
-.txn-loading {
-  padding: var(--spacing-3xl);
-  text-align: center;
-}
-
-.txn-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-lg);
-}
-
-.txn-card {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  margin-top: 10px;
-  padding: var(--spacing-xl);
-  background-color: var(--bg-secondary);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.txn-card:active {
-  opacity: 0.7;
-}
-
-.txn-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-full);
-  flex-shrink: 0;
-}
-
-.txn-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  flex: 1;
-  min-width: 0;
-}
-
-.txn-name {
-  font-size: var(--font-lg);
-  font-weight: var(--font-semibold);
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.txn-footer {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.txn-time {
-  font-size: var(--font-md);
-  font-weight: var(--font-medium);
-  color: var(--text-tertiary);
-}
-
-.txn-classify-tag {
-  padding: 2px 8px;
-  font-size: var(--font-xs);
-  font-weight: var(--font-medium);
-  border-radius: var(--radius-full);
-  flex-shrink: 0;
-}
-
-.txn-classify-tag.tag-income {
-  background-color: rgba(34, 197, 94, 0.15);
-  color: var(--accent-success);
-}
-
-.txn-classify-tag.tag-expense {
-  background-color: rgba(59, 130, 246, 0.15);
-  color: #3b82f6;
-}
-
-.txn-amount {
-  font-size: var(--font-lg);
-  font-weight: var(--font-bold);
-  color: var(--text-primary);
-  flex-shrink: 0;
-  margin-left: var(--spacing-md);
-}
-
-/* ========== 空状态 ========== */
-.txn-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-  padding: var(--spacing-4xl) var(--spacing-2xl);
-  gap: var(--spacing-md);
-}
-
-.empty-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  height: 80px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
-  color: var(--text-tertiary);
-  margin-bottom: var(--spacing-sm);
-}
-
-.empty-text {
-  font-size: var(--font-lg);
-  font-weight: var(--font-semibold);
-  color: var(--text-secondary);
-}
-
-.empty-hint {
-  font-size: var(--font-md);
-  font-weight: var(--font-medium);
-  color: var(--text-tertiary);
-  opacity: 0.8;
-}
 </style>