skytek/sports-empower-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: OXC Formatter

Browse Source
This commit is contained in:
skytek_xinliang
2026-08-13 15:41:12 +08:00
parent 5377b872d8
commit 8f5fa15d3a
40 changed files with 2392 additions and 3009 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/citizen-frontend/src/pages/self-assessment.vue
+189 -91
View File
@@ -11,11 +11,20 @@
<!-- 進度指示器 -->
<v-row class="mb-6 justify-center">
<v-col v-for="(stepName, idx) in stepNames" :key="idx" class="text-center" cols="3">
<v-col
v-for="(stepName, idx) in stepNames"
:key="idx"
class="text-center"
cols="3"
>
<v-avatar
class="text-white font-weight-bold mb-1 elevation-1"
:color="
currentStep > idx ? 'primary' : currentStep === idx ? 'secondary' : 'grey-lighten-2'
currentStep > idx
? 'primary'
: currentStep === idx
? 'secondary'
: 'grey-lighten-2'
"
size="28"
>
@@ -43,8 +52,14 @@
<v-card-text class="py-2">
<!-- 步驟 1：基本資料 -->
<div v-if="currentStep === 0">
<h2 class="text-title-medium font-weight-bold text-primary mb-4 d-flex align-center">
<v-icon class="mr-2" color="secondary" icon="mdi-account-circle" />
<h2
class="text-title-medium font-weight-bold text-primary mb-4 d-flex align-center"
>
<v-icon
class="mr-2"
color="secondary"
icon="mdi-account-circle"
/>
基本資料確認
</h2>
@@ -140,19 +155,31 @@
<!-- 步驟 2：活動量與自評 -->
<div v-if="currentStep === 1">
<h2 class="text-title-medium font-weight-bold text-primary mb-4 d-flex align-center">
<h2
class="text-title-medium font-weight-bold text-primary mb-4 d-flex align-center"
>
<v-icon class="mr-2" color="secondary" icon="mdi-walk" />
活動習慣與想要改善的能力
</h2>
<p class="text-body-medium font-weight-bold text-grey-darken-2 mb-2">
<p
class="text-body-medium font-weight-bold text-grey-darken-2 mb-2"
>
1. 最近 7 天，您每週進行大運動幾次？
</p>
<v-radio-group v-model="assessmentForm.exerciseFrequency" class="mb-4" color="primary">
<v-radio-group
v-model="assessmentForm.exerciseFrequency"
class="mb-4"
color="primary"
>
<v-card
class="mb-2 rounded-lg pa-1 cursor-pointer transition-card"
:color="assessmentForm.exerciseFrequency === '0' ? 'secondary' : 'grey-lighten-1'"
:color="
assessmentForm.exerciseFrequency === '0'
? 'secondary'
: 'grey-lighten-1'
"
variant="outlined"
@click="assessmentForm.exerciseFrequency = '0'"
>
@@ -161,7 +188,11 @@
<v-card
class="mb-2 rounded-lg pa-1 cursor-pointer transition-card"
:color="assessmentForm.exerciseFrequency === '1-2' ? 'secondary' : 'grey-lighten-1'"
:color="
assessmentForm.exerciseFrequency === '1-2'
? 'secondary'
: 'grey-lighten-1'
"
variant="outlined"
@click="assessmentForm.exerciseFrequency = '1-2'"
>
@@ -170,7 +201,11 @@
<v-card
class="rounded-lg pa-1 cursor-pointer transition-card"
:color="assessmentForm.exerciseFrequency === '3+' ? 'secondary' : 'grey-lighten-1'"
:color="
assessmentForm.exerciseFrequency === '3+'
? 'secondary'
: 'grey-lighten-1'
"
variant="outlined"
@click="assessmentForm.exerciseFrequency = '3+'"
>
@@ -178,7 +213,9 @@
</v-card>
</v-radio-group>
<p class="text-body-medium font-weight-bold text-grey-darken-2 mb-2">
<p
class="text-body-medium font-weight-bold text-grey-darken-2 mb-2"
>
2. 您目前最想改善的身體功能？ (可複選)
</p>
@@ -186,16 +223,25 @@
<v-col v-for="imp in improvementsOptions" :key="imp" cols="6">
<v-card
class="rounded-lg py-2 px-1 text-center cursor-pointer transition-card"
:class="{ 'bg-teal-lighten-5': assessmentForm.wantedImprovements.includes(imp) }"
:class="{
'bg-teal-lighten-5':
assessmentForm.wantedImprovements.includes(imp),
}"
:color="
assessmentForm.wantedImprovements.includes(imp) ? 'primary' : 'grey-lighten-1'
assessmentForm.wantedImprovements.includes(imp)
? 'primary'
: 'grey-lighten-1'
"
variant="outlined"
@click="toggleImprovement(imp)"
>
<v-icon
class="mb-1"
:color="assessmentForm.wantedImprovements.includes(imp) ? 'primary' : 'grey'"
:color="
assessmentForm.wantedImprovements.includes(imp)
? 'primary'
: 'grey'
"
:icon="getImprovementIcon(imp)"
/>
@@ -207,21 +253,36 @@
<!-- 步驟 3：身體狀況自評 -->
<div v-if="currentStep === 2">
<h2 class="text-title-medium font-weight-bold text-primary mb-4 d-flex align-center">
<v-icon class="mr-2" color="secondary" icon="mdi-alert-decagram" />
<h2
class="text-title-medium font-weight-bold text-primary mb-4 d-flex align-center"
>
<v-icon
class="mr-2"
color="secondary"
icon="mdi-alert-decagram"
/>
身體限制與慢性病史
</h2>
<p class="text-body-medium font-weight-bold text-grey-darken-2 mb-2">
<p
class="text-body-medium font-weight-bold text-grey-darken-2 mb-2"
>
1. 過去一年是否有過跌倒史？
</p>
<v-radio-group v-model="assessmentForm.hasFalls" class="mb-4" color="primary" inline>
<v-radio-group
v-model="assessmentForm.hasFalls"
class="mb-4"
color="primary"
inline
>
<v-radio label="無跌倒" :value="false" />
<v-radio label="有跌倒過" :value="true" />
</v-radio-group>
<p class="text-body-medium font-weight-bold text-grey-darken-2 mb-2">
<p
class="text-body-medium font-weight-bold text-grey-darken-2 mb-2"
>
2. 目前身體關節疼痛狀況？
</p>
@@ -234,7 +295,9 @@
variant="outlined"
/>
<p class="text-body-medium font-weight-bold text-grey-darken-2 mb-2">
<p
class="text-body-medium font-weight-bold text-grey-darken-2 mb-2"
>
3. 您有哪些慢性疾病？ (可複選)
</p>
@@ -254,8 +317,16 @@
<!-- 步驟 4：自評結果 -->
<div v-if="currentStep === 3" class="text-center py-4">
<v-avatar class="elevation-2 mb-4" :color="getResultColor(resultLevel)" size="72">
<v-icon color="white" :icon="getResultIcon(resultLevel)" size="40" />
<v-avatar
class="elevation-2 mb-4"
:color="getResultColor(resultLevel)"
size="72"
>
<v-icon
color="white"
:icon="getResultIcon(resultLevel)"
size="40"
/>
</v-avatar>
<h2
@@ -265,15 +336,26 @@
自評分級：{{ resultLevel }}
</h2>
<p class="text-title-small text-grey-darken-2 mb-6">您的健康自評報告已產生</p>
<p class="text-title-small text-grey-darken-2 mb-6">
您的健康自評報告已產生
</p>
<v-card class="rounded-xl pa-4 text-left mb-6" color="grey-lighten-4" variant="flat">
<div class="font-weight-bold mb-2 text-primary d-flex align-center">
<v-card
class="rounded-xl pa-4 text-left mb-6"
color="grey-lighten-4"
variant="flat"
>
<div
class="font-weight-bold mb-2 text-primary d-flex align-center"
>
<v-icon class="mr-1" icon="mdi-text-box-search" />
系統評估建議：
</div>
<p v-if="resultLevel === '低風險'" class="text-body-medium text-grey-darken-3 mb-2">
<p
v-if="resultLevel === '低風險'"
class="text-body-medium text-grey-darken-3 mb-2"
>
您的身體功能與日常活動習慣良好。建議您每週繼續保持 3
次以上的運動，並可以預約普測活動以獲得精準的五維健康指標與運動處方。
</p>
@@ -289,7 +371,9 @@
檢測到您有多項慢性病或中重度疼痛，運動時請特別留意。建議您先向您的家庭醫師或社區據點諮詢，並在運動普測現場合對您的健康狀態，以確保運動安全。
</p>
<div class="font-weight-bold text-body-medium text-secondary mt-3">
<div
class="font-weight-bold text-body-medium text-secondary mt-3"
>
* 禁忌提醒：若收縮壓 >
160mmHg、有關節強烈疼痛或暈眩時，請立即暫停所有體能檢測與訓練！
</div>
@@ -364,13 +448,13 @@
</template>
<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import Layout from '@/components/layout/DefaultLayout.vue'
import { useAppStore } from '@/stores/app'
import { computed, reactive, ref } from "vue";
import Layout from "@/components/layout/DefaultLayout.vue";
import { useAppStore } from "@/stores/app";
const store = useAppStore()
const currentStep = ref(0)
const stepNames = ['基本資料', '功能狀態', '健康限制', '自評結果']
const store = useAppStore();
const currentStep = ref(0);
const stepNames = ["基本資料", "功能狀態", "健康限制", "自評結果"];
const profileForm = reactive({
name: store.userProfile.name,
@@ -380,7 +464,7 @@ const profileForm = reactive({
height: store.userProfile.height,
weight: store.userProfile.weight,
consent: store.userProfile.consent,
})
});
const assessmentForm = reactive({
exerciseFrequency: store.selfAssessment.exerciseFrequency,
@@ -388,91 +472,105 @@ const assessmentForm = reactive({
hasFalls: store.selfAssessment.hasFalls,
painLevel: store.selfAssessment.painLevel,
chronicDiseases: [...store.selfAssessment.chronicDiseases],
})
});
const resultLevel = ref(store.selfAssessment.scoreLevel)
const resultLevel = ref(store.selfAssessment.scoreLevel);
const improvementsOptions = ['肌力', '平衡', '心肺', '柔軟度', '敏捷', '體脂/BMI']
const diseaseOptions = ['高血壓', '糖尿病', '高血脂', '心臟病', '關節退化', '骨質疏鬆']
const improvementsOptions = [
"肌力",
"平衡",
"心肺",
"柔軟度",
"敏捷",
"體脂/BMI",
];
const diseaseOptions = [
"高血壓",
"糖尿病",
"高血脂",
"心臟病",
"關節退化",
"骨質疏鬆",
];
const birthdayDate = computed<Date | null>({
get: () => parseDateString(profileForm.birthday),
set: value => {
profileForm.birthday = formatDateString(value)
set: (value) => {
profileForm.birthday = formatDateString(value);
},
})
});
function parseDateString (value: string) {
const [year, month, day] = value.split('-').map(Number)
function parseDateString(value: string) {
const [year, month, day] = value.split("-").map(Number);
if (!year || !month || !day) {
return null
return null;
}
return new Date(year, month - 1, day)
return new Date(year, month - 1, day);
}
function formatDateString (value: Date | null) {
function formatDateString(value: Date | null) {
if (!value) {
return ''
return "";
}
const year = value.getFullYear()
const month = String(value.getMonth() + 1).padStart(2, '0')
const day = String(value.getDate()).padStart(2, '0')
const year = value.getFullYear();
const month = String(value.getMonth() + 1).padStart(2, "0");
const day = String(value.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`
return `${year}-${month}-${day}`;
}
function getImprovementIcon (imp: string) {
function getImprovementIcon(imp: string) {
switch (imp) {
case '肌力': {
return 'mdi-arm-flex'
case "肌力": {
return "mdi-arm-flex";
}
case '平衡': {
return 'mdi-scale-balance'
case "平衡": {
return "mdi-scale-balance";
}
case '心肺': {
return 'mdi-heart-pulse'
case "心肺": {
return "mdi-heart-pulse";
}
case '柔軟度': {
return 'mdi-human-handsup'
case "柔軟度": {
return "mdi-human-handsup";
}
case '敏捷': {
return 'mdi-run-fast'
case "敏捷": {
return "mdi-run-fast";
}
case '體脂/BMI': {
return 'mdi-calculator'
case "體脂/BMI": {
return "mdi-calculator";
}
default: {
return 'mdi-help-circle'
return "mdi-help-circle";
}
}
}
function toggleImprovement (imp: string) {
const index = assessmentForm.wantedImprovements.indexOf(imp)
function toggleImprovement(imp: string) {
const index = assessmentForm.wantedImprovements.indexOf(imp);
if (index === -1) {
assessmentForm.wantedImprovements.push(imp)
assessmentForm.wantedImprovements.push(imp);
} else {
assessmentForm.wantedImprovements.splice(index, 1)
assessmentForm.wantedImprovements.splice(index, 1);
}
}
function scrollToPageTop () {
window.scrollTo({ top: 0 })
function scrollToPageTop() {
window.scrollTo({ top: 0 });
}
function goToPreviousStep () {
currentStep.value -= 1
scrollToPageTop()
function goToPreviousStep() {
currentStep.value -= 1;
scrollToPageTop();
}
function goToNextStep () {
currentStep.value += 1
scrollToPageTop()
function goToNextStep() {
currentStep.value += 1;
scrollToPageTop();
}
function handleSubmit () {
function handleSubmit() {
// 儲存至 store
store.updateProfile({
name: profileForm.name,
@@ -482,7 +580,7 @@ function handleSubmit () {
height: profileForm.height,
weight: profileForm.weight,
consent: profileForm.consent,
})
});
store.submitSelfAssessment({
exerciseFrequency: assessmentForm.exerciseFrequency,
@@ -490,24 +588,24 @@ function handleSubmit () {
hasFalls: assessmentForm.hasFalls,
painLevel: assessmentForm.painLevel,
chronicDiseases: assessmentForm.chronicDiseases,
})
});
// 取得計算後的結果
resultLevel.value = store.selfAssessment.scoreLevel
currentStep.value = 3
scrollToPageTop()
resultLevel.value = store.selfAssessment.scoreLevel;
currentStep.value = 3;
scrollToPageTop();
}
function getResultColor (lvl: string) {
if (lvl === '低風險') return 'success'
if (lvl === '需追蹤') return 'warning'
return 'error'
function getResultColor(lvl: string) {
if (lvl === "低風險") return "success";
if (lvl === "需追蹤") return "warning";
return "error";
}
function getResultIcon (lvl: string) {
if (lvl === '低風險') return 'mdi-check-decagram'
if (lvl === '需追蹤') return 'mdi-alert-decagram'
return 'mdi-alert-octagon'
function getResultIcon(lvl: string) {
if (lvl === "低風險") return "mdi-check-decagram";
if (lvl === "需追蹤") return "mdi-alert-decagram";
return "mdi-alert-octagon";
}
</script>