feat:更新运动健康模块

src/views/health/calendar.vue

@@ -4,21 +4,19 @@
                 @dayclick="dateClick" @did-move="changeMonthClick"
                 :is-dark="appStore.isDark"
                 class="health-calendar card-item"/>
-    <health-legend />
 
     <health-form />
   </div>
 </template>
 
 <script lang="ts" setup>
-import HealthLegend from '@/components/Health/HealthLegend.vue'
 import HealthForm from '@/components/Health/HealthForm.vue'
 import { CalendarDay } from 'v-calendar/dist/types/src/utils/page'
 import { formatDate, getStartEndDate } from 'vue3-common/utils/dateUtil'
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, watch } from 'vue'
 import { useHealthStore } from '@/store/health'
 import { useAppStore } from '@/store/app.ts'
-import { IExercise, IWeight } from '@/types/health'
+import { IHealth } from '@/types/health'
 
 const healthStore = useHealthStore()
 const appStore = useAppStore()
@@ -28,24 +26,22 @@ const dailyInfo = reactive({
   attrs: [] as any[]
 })
 
+watch(() => healthStore.isRefresh, () => {
+  dailyInfo.attrs = []
+  updateRecordList()
+})
+
 onMounted(async () => {
   const result = getStartEndDate(formatDate(new Date()), 'month')
   healthStore.queryInfo = { startDate: result[0], endDate: result[1] }
 
   await healthStore.refreshInfo()
-  updateRecordList()
-  healthStore.getHealthDay(formatDate(new Date()))
+  healthStore.selectDate = formatDate(new Date())
+  healthStore.currentHealth = healthStore.getHealthDay(formatDate(new Date()))
 })
 
 const updateRecordList = () => {
-  healthStore.weightRecordList.forEach((item: IWeight) => {
-    dailyInfo.attrs.push({
-      dot: 'red',
-      dates: item.date
-    })
-  })
-
-  healthStore.exerciseRecordList.forEach((item: IExercise) => {
+  healthStore.healthRecordList.forEach((item: IHealth) => {
     dailyInfo.attrs.push({
       dot: 'green',
       dates: item.date
@@ -55,7 +51,7 @@ const updateRecordList = () => {
 
 const dateClick = (day: CalendarDay) => {
   healthStore.selectDate = formatDate(day.date)
-  healthStore.getHealthDay(formatDate(day.date))
+  healthStore.currentHealth = healthStore.getHealthDay(formatDate(day.date))
 }
 
 /**

src/views/ledger/stats.vue

@@ -1,23 +1,34 @@
 <template>
   <div class="mobile-ledger-stats common-mobile-view">
-    <div class="ledger-chart">
+    <div class="ledger-chart common-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 class="chart-container card-item">
+        <div class="content">
+          <span class="title">📊排行榜</span>
+        </div>
+        <div class="chart rank-chart">
+          <ledger-rank />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import LedgerRank from '@/components/Ledger/LedgerRank.vue'
 import { useLedgerStore } from '@/store/ledger.ts'
 import { onMounted, ref } from 'vue'
 import { statsByField } from '@/utils/home/ledgerUtil.ts'
@@ -70,37 +81,3 @@ const updateChart = () => {
   }
 }
 </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>