feat: bmi

2026-09-18 09:58:52 +08:00
parent ea8793e34c
commit 0f3e7b8a56
15 changed files with 534 additions and 26 deletions
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  BODY_COMPOSITION_COLORS,
+  getBodyFatTone,
+} from "@/utils/body-composition-status";
+
+const props = defineProps<{
+  bodyFatPercent: number;
+  bodyFatRange: string;
+}>();
+
+const statusColor = computed(
+  () => BODY_COMPOSITION_COLORS[getBodyFatTone(props.bodyFatRange)],
+);
+
+const formattedBodyFatPercent = computed(() =>
+  Number.isFinite(props.bodyFatPercent)
+    ? props.bodyFatPercent.toFixed(1)
+    : "--",
+);
+</script>
+
+<template>
+  <v-card class="analysis-card rounded-xl mt-4" elevation="1">
+    <v-card-title class="text-h5 font-weight-black text-center pt-6">
+      體脂率分析
+    </v-card-title>
+
+    <v-card-text class="text-center pa-6">
+      <div class="text-title-medium text-grey-darken-2 mb-2">體脂率</div>
+      <div class="body-fat-value mb-6" :style="{ color: statusColor }">
+        {{ formattedBodyFatPercent }}<span class="body-fat-unit">%</span>
+      </div>
+
+      <div class="d-flex flex-wrap justify-center align-center ga-2">
+        <span class="text-title-medium">您的體脂率屬於</span>
+        <v-chip
+          class="semantic-chip font-weight-black"
+          :color="statusColor"
+          label
+          size="large"
+          variant="flat"
+        >
+          {{ bodyFatRange }}
+        </v-chip>
+        <span class="text-title-medium">範圍</span>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.analysis-card {
+  border: 1px solid rgba(var(--v-theme-primary), 0.24);
+}
+
+.body-fat-value {
+  font-size: clamp(2.25rem, 10vw, 3.125rem);
+  font-weight: 900;
+  line-height: 1;
+}
+
+.semantic-chip {
+  color: #252525 !important;
+}
+
+.body-fat-unit {
+  margin-left: 6px;
+  font-size: clamp(1.25rem, 5vw, 2rem);
+  font-weight: 500;
+}
+</style>