feat: 更新交易记录和预算服务，支持按分类和日期范围筛选

Web/src/components/Budget/BudgetCard.vue

@@ -25,7 +25,7 @@
             <span class="compact-value">
               <slot name="collapsed-amount">
                 {{ budget.current !== undefined && budget.limit !== undefined 
-                  ? `¥${budget.current?.toFixed(2) || 0} / ¥${budget.limit?.toFixed(2) || 0}` 
+                  ? `¥${budget.current?.toFixed(0) || 0} / ¥${budget.limit?.toFixed(0) || 0}` 
                   : '--' }}
               </slot>
             </span>
@@ -65,6 +65,13 @@
                   round
                   @click.stop="showDescription = !showDescription" 
                 />
+                <van-button 
+                  icon="orders-o" 
+                  size="mini" 
+                  plain 
+                  title="查询关联账单"
+                  @click.stop="handleQueryBills"
+                />
                 <template v-if="budget.category !== 2">
                   <van-button 
                     icon="edit" 
@@ -144,12 +151,32 @@
         </div>
       </Transition>
     </div>
+
+    <!-- 关联账单列表弹窗 -->
+    <PopupContainer 
+      v-model="showBillListModal"
+      title="关联账单列表"
+      height="80%"
+    >
+      <TransactionList 
+        :transactions="billList"
+        :loading="billLoading"
+        :finished="true"
+        :show-delete="false"
+        :show-checkbox="false"
+        @click="handleBillClick"
+        @delete="handleBillDelete"
+      />
+    </PopupContainer>
   </div>
 </template>
 
 <script setup>
 import { computed, ref } from 'vue'
 import { BudgetPeriodType } from '@/constants/enums'
+import PopupContainer from '@/components/PopupContainer.vue'
+import TransactionList from '@/components/TransactionList.vue'
+import { getTransactionList } from '@/api/transactionRecord'
 
 const props = defineProps({
   budget: {
@@ -175,6 +202,9 @@ const emit = defineEmits(['toggle-stop', 'switch-period', 'click'])
 const isExpanded = ref(props.budget.category === 2)
 const transitionName = ref('slide-left')
 const showDescription = ref(false)
+const showBillListModal = ref(false)
+const billList = ref([])
+const billLoading = ref(false)
 
 const toggleExpand = () => {
   isExpanded.value = !isExpanded.value
@@ -190,6 +220,47 @@ const handleSwitch = (direction) => {
   emit('switch-period', direction)
 }
 
+const handleQueryBills = async () => {
+  showBillListModal.value = true
+  billLoading.value = true
+  
+  try {
+    debugger
+    const classify = props.budget.selectedCategories 
+      ? props.budget.selectedCategories.join(',') 
+      : ''
+
+    if (classify === '') {
+      // 如果没有选中任何分类，则不查询
+      billList.value = []
+      billLoading.value = false
+      return
+    }
+
+    const response = await getTransactionList({
+      page: 1,
+      pageSize: 100,
+      startDate: props.budget.periodStart,
+      endDate: props.budget.periodEnd,
+      classify: classify,
+      type: props.budget.category,
+      sortByAmount: true
+    })
+
+    if(response.success) {
+      billList.value = response.data || []
+    } else {
+      billList.value = []
+    }
+
+  } catch (error) {
+    console.error('查询账单列表失败:', error)
+    billList.value = []
+  } finally {
+    billLoading.value = false
+  }
+}
+
 const percentage = computed(() => {
   if (!props.budget.limit) return 0
   return Math.round((props.budget.current / props.budget.limit) * 100)

Web/src/components/Budget/BudgetSummary.vue

@@ -39,7 +39,7 @@ const periodConfigs = {
 }
 
 const formatMoney = (val) => {
-  return parseFloat(val || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+  return parseFloat(val || 0).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 })
 }
 </script>
 

Web/src/views/BudgetView.vue

@@ -267,7 +267,7 @@ onMounted(async () => {
 })
 
 const formatMoney = (val) => {
-  return parseFloat(val || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+  return parseFloat(val || 0).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 })
 }
 
 const getPeriodLabel = (type) => {