fix

Web/src/components/ReasonGroupList.vue

@@ -75,6 +75,7 @@
         :finished="transactionFinished"
         @load="loadGroupTransactions"
         @click="handleTransactionClick"
+        @delete="handleGroupTransactionDelete"
       />
     </PopupContainer>
 
@@ -188,7 +189,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onBeforeUnmount } from 'vue'
 import { 
   showToast, 
   showSuccessToast, 
@@ -211,7 +212,7 @@ const props = defineProps({
   // 每页数量
   pageSize: {
     type: Number,
-    default: 5
+    default: 3 // TODO 测试写小一点
   }
 })
 
@@ -482,6 +483,21 @@ const handleConfirmBatchUpdate = async () => {
       await refresh()
       // 通知父组件数据已更改
       emit('data-changed')
+      try { 
+        window.dispatchEvent(
+          new CustomEvent(
+            'transactions-changed', 
+            { 
+              detail: { 
+                reason: batchGroup.value.reason 
+              } 
+            })
+          ) 
+        } catch(e) {
+        console.error('触发全局 transactions-changed 事件失败:', e)
+        }
+        // 关闭弹窗
+        showTransactionList.value = false
     } else {
       showToast(res.message || '批量更新失败')
     }
@@ -511,6 +527,67 @@ const handleTransactionClick = (transaction) => {
   showTransactionDetail.value = true
 }
 
+// 处理分组中的删除事件
+const handleGroupTransactionDelete = async (transactionId) => {
+  groupTransactions.value = groupTransactions.value.filter(t => t.id !== transactionId)
+  groupTransactionsTotal.value = Math.max(0, (groupTransactionsTotal.value || 0) - 1)
+
+  if(groupTransactions.value.length === 0 && !transactionFinished.value) {
+    // 如果当前页数据为空且未加载完，则尝试加载下一页
+    await loadGroupTransactions()
+  }
+
+  if(groupTransactions.value.length === 0){
+    // 如果删除后当前分组没有交易了，关闭弹窗
+    showTransactionList.value = false
+    groups.value = groups.value.filter(g => g.reason !== selectedGroup.value.reason)
+    selectedGroup.value = null
+    total.value--
+  }
+
+  // 重新加载当前页统计（如果需要）并通知父组件数据已更改
+  emit('data-changed')
+}
+
+// 全局删除事件监听，刷新当前分组交易或分组数据
+const onGlobalTransactionDeleted = () => {
+  // 如果当前弹窗打开并存在 selectedGroup，则重新加载分组交易
+  if (showTransactionList.value && selectedGroup.value) {
+    // 重新加载从第一页开始
+    groupTransactions.value = []
+    transactionPageIndex.value = 1
+    transactionFinished.value = false
+    loadGroupTransactions()
+  } else {
+    // 否则刷新分组列表
+    refresh()
+  }
+}
+
+window.addEventListener && window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
+
+onBeforeUnmount(() => {
+  window.removeEventListener && window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
+})
+
+// 当有交易新增/修改/批量更新时的刷新监听
+const onGlobalTransactionsChanged = (e) => {
+  if (showTransactionList.value && selectedGroup.value) {
+    groupTransactions.value = []
+    transactionPageIndex.value = 1
+    transactionFinished.value = false
+    loadGroupTransactions()
+  } else {
+    refresh()
+  }
+}
+
+window.addEventListener && window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
+
+onBeforeUnmount(() => {
+  window.removeEventListener && window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
+})
+
 // 处理账单保存后的回调
 const handleTransactionSaved = async () => {
   // 通知父组件数据已更改

Web/src/components/TransactionList.vue

@@ -101,6 +101,10 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import { showConfirmDialog, showToast } from 'vant'
+import { deleteTransaction } from '@/api/transactionRecord'
+
 import { defineEmits } from 'vue'
 
 const props = defineProps({
@@ -132,6 +136,8 @@ const props = defineProps({
 
 const emit = defineEmits(['load', 'click', 'delete', 'update:selectedIds'])
 
+const deletingIds = ref(new Set())
+
 const onLoad = () => {
   emit('load')
 }
@@ -140,8 +146,35 @@ const handleClick = (transaction) => {
   emit('click', transaction)
 }
 
-const handleDeleteClick = (transaction) => {
-  emit('delete', transaction)
+const handleDeleteClick = async (transaction) => {
+  try {
+    await showConfirmDialog({
+      title: '提示',
+      message: '确定要删除这条交易记录吗？'
+    })
+
+    deletingIds.value.add(transaction.id)
+    const response = await deleteTransaction(transaction.id)
+    deletingIds.value.delete(transaction.id)
+
+    if (response && response.success) {
+      showToast('删除成功')
+      emit('delete', transaction.id)
+      try {
+        window.dispatchEvent(new CustomEvent('transaction-deleted', { detail: transaction.id }))
+      } catch (e) {
+        // ignore in non-browser environment
+      }
+    } else {
+      showToast(response.message || '删除失败')
+    }
+  } catch (err) {
+    // 用户取消确认会抛出 'cancel' 或类似错误
+    if (err !== 'cancel') {
+      console.error('删除出错:', err)
+      showToast('删除失败')
+    }
+  }
 }
 
 const isSelected = (id) => {