feat:增加账本统计模块

src/views/ledger/list.vue

@@ -23,17 +23,12 @@ import LedgerQuery from '@/components/Ledger/LedgerQuery.vue'
 import LedgerCard from '@/components/Ledger/LedgerCard.vue'
 import DraggableButton from '@/components/Common/DraggableButton.vue'
 import { useLedgerStore } from '@/store/ledger.ts'
-import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { formatAmount } from 'vue3-common/utils/numberUtil'
 
 const ledgerStore = useLedgerStore()
 const router = useRouter()
 
-onMounted(async () => {
-  // await ledgerStore.queryLedgerList()
-})
-
 const addClick = () => {
   ledgerStore.ledgerApiType = 'ADD'
   ledgerStore.currentLedgerRecord = ledgerStore.getEmptyLedgerRecord()

src/views/ledger/stats.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="mobile-ledger-stats common-mobile-view">
+    <div class="ledger-chart">
+      <div class="chart-container card-item">
+        <div class="content">
+          <span class="title">📊类别统计</span>
+        </div>
+        <div class="chart" ref="ledgerCategoryChartRef"/>
+      </div>
+      <div class="chart-container card-item">
+        <div class="content">
+          <span class="title">📊付款人统计</span>
+        </div>
+        <div class="chart" ref="ledgerPayerChartRef"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLedgerStore } from '@/store/ledger.ts'
+import { onMounted, ref } from 'vue'
+import { statsByField } from '@/utils/home/ledgerUtil.ts'
+import { isMobile } from 'vue3-common/utils/layoutUtil'
+import { useAppStore } from '@/store/app.ts'
+import * as echarts from 'echarts'
+import { pieChartOptions } from 'vue3-common/utils/eChartsUtil'
+
+const ledgerStore = useLedgerStore()
+const appStore = useAppStore()
+
+const ledgerCategoryChartRef = ref<HTMLElement>()
+const ledgerPayerChartRef = ref<HTMLElement>()
+
+let ledgerCategoryChart: echarts.ECharts
+let ledgerPayerChart: echarts.ECharts
+
+onMounted(() => {
+  ledgerCategoryChart = echarts.init(ledgerCategoryChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
+  ledgerPayerChart = echarts.init(ledgerPayerChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
+
+  updateChart()
+})
+
+const updateChart = () => {
+  const categoryData = statsByField(ledgerStore.ledgerRecordList, 'category')
+  const payerData = statsByField(ledgerStore.ledgerRecordList, 'payer')
+
+  ledgerCategoryChart.setOption(pieChartOptions('rank', '元', categoryData))
+  ledgerPayerChart.setOption(pieChartOptions('rank', '元', payerData))
+
+  if (isMobile()) {
+    ledgerCategoryChart.setOption({
+      series: [{
+        radius: ['20%', '50%'],
+        label: {
+          formatter: '{b}: {d}%'
+        }
+      }]
+    })
+
+    ledgerPayerChart.setOption({
+      series: [{
+        radius: ['20%', '50%'],
+        label: {
+          formatter: '{b}: {d}%'
+        }
+      }]
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+.mobile-ledger-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .ledger-chart {
+    flex-grow: 1;
+
+    display: grid;
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+
+    .chart-container {
+      display: grid;
+      grid-template-rows: 40px 1fr;
+
+      .content {
+        padding: 0 5px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #009FA8;
+
+        .title {
+          font-size: 1em;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/meta.ts

@@ -199,6 +199,10 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '清单',
     icon: ''
   },
+  '/ledger/stats': {
+    title: '统计',
+    icon: ''
+  },
   '/ledger/detail/id': {
     title: '内容',
     icon: ''