feat:重构模块

src/components/Bill/BillStats.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="common-statistics">
+    <stats-card
+        title="当前支出" color="#CA6C65" unit="元" icon="fa-solid fa-sack-xmark"
+        :value="formatAmount(billStats.expensive)" />
+
+    <stats-card
+        title="当前收入" color="#6FBB69" unit="元" icon="fa-solid fa-sack-dollar"
+        :value="formatAmount(billStats.income)" />
+
+    <stats-card
+        title="当前结余" color="#E4BF62" unit="元" icon="fa-solid fa-coins"
+        :value="formatAmount(billStats.balance)" />
+
+    <stats-card
+        title="支出占比" color="#5470C6" unit="%" icon="fa-solid fa-chart-pie"
+        :value="(billStats.rate * 100).toFixed(2)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import StatsCard from '@/components/StatsCard.vue'
+import { useBillStore } from '@/store/bill.ts'
+import { ref, watch } from 'vue'
+import { getBillSummaryStats } from '@/utils/home/billUtil.ts'
+import { IBillSummaryStats } from '@/types/bill.ts'
+import { formatAmount } from 'vue3-common/utils/numberUtil'
+
+const billStore = useBillStore()
+
+watch(() => billStore.isRefresh, () => {
+  updateStats()
+})
+
+const billStats = ref<IBillSummaryStats>({
+  balance: 0,
+  expensive: 0,
+  income: 0,
+  rate: 0
+})
+
+const updateStats = () => {
+  billStats.value = getBillSummaryStats(billStore.billRecordList)
+}
+</script>