feat:增加运动健康模块

src/components/Health/HealthForm.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-form :model="healthStore.currentHealth" class="health-form card-item">
+    <el-form-item>
+      <template #label>
+        <i class="fa-regular fa-calendar-check"></i>
+        <span>日期</span>
+      </template>
+      <el-date-picker v-model="healthStore.currentHealth.date"
+                      type="date" :disabled="true"
+                      style="width: 150px;"/>
+    </el-form-item>
+
+    <el-form-item>
+      <template #label>
+        <i class="fa-solid fa-person-running"></i>
+        <span>运动项目</span>
+      </template>
+
+      <el-select v-model="healthStore.currentHealth.project"
+                 placeholder="请选择运行项目" style="width: 150px;">
+        <el-option v-for="(item, index) in projectList" :key="index"
+                   :label="item" :value="item"/>
+      </el-select>
+    </el-form-item>
+
+    <el-form-item>
+      <template #label>
+        <i class="fa-solid fa-clock"></i>
+        <span>运动时长</span>
+      </template>
+
+      <el-input-number v-model="healthStore.currentHealth.duration"
+                       style="width: 120px;"></el-input-number>
+
+      <span style="margin-left: 5px;">分钟</span>
+    </el-form-item>
+
+    <el-form-item>
+      <template #label>
+        <i class="fa-solid fa-weight-scale"></i>
+        <span>体重</span>
+      </template>
+
+      <el-input-number v-model="healthStore.currentHealth.value"
+                       style="width: 120px;"></el-input-number>
+
+      <span style="margin-left: 5px;">千克</span>
+    </el-form-item>
+
+    <el-form-item style="align-self: center;">
+      <el-button type="primary" @click="onSubmit"
+                 :disabled="isBeforeDate(formatDate(new Date()), healthStore.selectDate)">
+        确认
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { useHealthStore } from '@/store/health'
+import { formatDate, isBeforeDate } from 'vue3-common/utils/dateUtil'
+
+const healthStore = useHealthStore()
+
+const projectList = ['羽毛球', '乒乓球', '跑步', '其他']
+
+const onSubmit = async () => {
+  // await periodStore.updatePeriodDay()
+  // periodStore.currentPeriodDay = periodStore.getPeriodDay(periodStore.selectDate)
+}
+</script>
+
+<style lang="scss">
+.health-form {
+  padding: 10px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+
+  .el-form-item {
+    justify-content: space-between;
+
+    .el-form-item__label {
+      display: grid;
+      grid-template-columns: 20px 1fr;
+      align-items: center;
+      gap: 5px;
+
+      i {
+        font-size: 1.2rem;
+        color: #DE3163;
+      }
+    }
+
+    .el-form-item__content {
+      flex: none;
+    }
+  }
+}
+</style>