feat:增加月经天数统计

src/views/meta.ts

@@ -143,6 +143,10 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '记录',
     icon: ''
   },
+  '/period/status': {
+    title: '统计',
+    icon: ''
+  },
   '/period/setting': {
     title: '设置',
     icon: ''

src/views/period/status.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="mobile-period-chart common-mobile-view">
+    <el-tabs v-model="activeName" type="card">
+      <el-tab-pane label="月经周期" name="menstrualDays">
+        <div v-if="periodStore.menstrualDaysList.length > 0" class="content">
+          <div v-for="(item, index) in periodStore.menstrualDaysList"
+               :key="index" class="period-item"
+               :style="{ background: getPeriod(item) > duration ? '#fee2e2' : '#FFFFFF'}"
+          >
+            <span>开始日期: {{ item.startDate }}</span>
+            <span>结束日期: {{ item.endDate }}</span>
+            <span>天数: {{ getPeriod(item) }}天</span>
+            <span v-if="getPeriod(item) > duration" class="warning-menstrual">周期过长</span>
+          </div>
+        </div>
+        <div v-else class="empty-state">
+          <el-empty description="暂无记录"></el-empty>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
+import { getDateDifference } from 'vue3-common/utils/dateUtil'
+import { usePeriodStore } from '@/store/period'
+import { IMenstrualPeriod } from '@/types/period'
+
+const periodStore = usePeriodStore()
+const duration = computed(() => periodStore.periodSetting.duration)
+
+const activeName = ref('menstrualDays')
+
+onMounted(() => {
+  periodStore.getMenstruateDays()
+})
+
+const getPeriod = (item: IMenstrualPeriod) => {
+  return getDateDifference(item.startDate, item.endDate, 'days')
+}
+</script>
+
+<style scoped lang="scss">
+.mobile-period-chart {
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .period-item {
+      position: relative;
+      background: white;
+      border-radius: 10px;
+      padding: 20px;
+
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+
+      span {
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: "";
+          display: inline-block;
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+
+        &:nth-child(1)::before {
+          background: #ec4899;
+        }
+
+        &:nth-child(2)::before {
+          background: #f59e0b;
+        }
+
+        &:nth-child(3)::before {
+          background: #10b981;
+        }
+      }
+
+      .warning-menstrual {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: #dc2626;
+        color: white;
+        padding: 5px;
+        border-radius: 10px;
+
+        &::before {
+          content: none;
+        }
+      }
+    }
+  }
+}
+</style>