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

fix: format

Browse Source
This commit is contained in:
skytek_xinliang
2026-10-05 10:10:57 +08:00
parent 4956885ecc
commit a8fdb157a2
5 changed files with 288 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/citizen-frontend/src/components/auth/RegisterPhoneStep.vue
+15 -9
View File
@@ -1,20 +1,26 @@
<script setup lang="ts">
const phone = defineModel<string>({ required: true })
const phone = defineModel<string>({ required: true });
defineProps<{
errorMessage: string
loading: boolean
retryAfterSeconds: number
}>()
errorMessage: string;
loading: boolean;
retryAfterSeconds: number;
}>();
const emit = defineEmits<{
submit: []
}>()
submit: [];
}>();
</script>
<template>
<v-form @submit.prevent="emit('submit')">
<v-alert v-if="errorMessage" class="mb-4" density="compact" type="error" variant="tonal">
<v-alert
v-if="errorMessage"
class="mb-4"
density="compact"
type="error"
variant="tonal"
>
{{ errorMessage }}
</v-alert>
@@ -41,7 +47,7 @@ const emit = defineEmits<{
:loading="loading"
type="submit"
>
{{ retryAfterSeconds > 0 ? `${retryAfterSeconds} 秒後再試` : '下一步' }}
{{ retryAfterSeconds > 0 ? `${retryAfterSeconds} 秒後再試` : "下一步" }}
</v-btn>
</v-form>
</template>
app/citizen-frontend/src/components/layout/DefaultLayout.vue
+83 -44
View File
@@ -6,7 +6,9 @@
<v-app-bar-nav-icon variant="text" @click="drawer = !drawer" />
</template>
<v-app-bar-title class="font-weight-bold flex-grow-1"> 運動玩轉健康力 </v-app-bar-title>
<v-app-bar-title class="font-weight-bold flex-grow-1">
運動玩轉健康力
</v-app-bar-title>
<template #append>
<div class="d-flex align-center">
@@ -19,7 +21,10 @@
variant="text"
@click="isLargeText = !isLargeText"
>
<v-icon :color="isLargeText ? 'accent' : 'white'" icon="mdi-format-size" />
<v-icon
:color="isLargeText ? 'accent' : 'white'"
icon="mdi-format-size"
/>
</v-btn>
</div>
</template>
@@ -61,7 +66,9 @@
</v-avatar>
</template>
<v-list-item-subtitle class="text-white-50">未登入訪客</v-list-item-subtitle>
<v-list-item-subtitle class="text-white-50"
>未登入訪客</v-list-item-subtitle
>
</v-list-item>
<v-divider />
@@ -74,7 +81,12 @@
<v-list-item-title>大字體模式</v-list-item-title>
<template #append>
<v-switch v-model="isLargeText" color="secondary" density="compact" hide-details />
<v-switch
v-model="isLargeText"
color="secondary"
density="compact"
hide-details
/>
</template>
</v-list-item>
@@ -191,11 +203,16 @@
</v-navigation-drawer>
<!-- 主要內容區 -->
<v-main class="bg-white min-vh-100" :class="{ 'pb-16': BOTTOM_NAVIGATION_ENABLED }">
<v-main
class="bg-white min-vh-100"
:class="{ 'pb-16': BOTTOM_NAVIGATION_ENABLED }"
>
<v-container class="px-4 py-2">
<v-alert
v-if="
store.isLoggedIn && store.requiresEmailCompletion && route.name !== 'complete-email'
store.isLoggedIn &&
store.requiresEmailCompletion &&
route.name !== 'complete-email'
"
class="mb-2"
color="warning"
@@ -206,11 +223,16 @@
<span class="text-title-small">
{{
EMAIL_COMPLETION_REQUIRED
? '請先補登 E-Mail，才能繼續使用平台。'
: '尚未設定 E-Mail，前往補登以接收重要通知。'
? "請先補登 E-Mail，才能繼續使用平台。"
: "尚未設定 E-Mail，前往補登以接收重要通知。"
}}
</span>
<v-btn color="warning" size="small" :to="emailCompletionLocation" variant="flat">
<v-btn
color="warning"
size="small"
:to="emailCompletionLocation"
variant="flat"
>
前往補登
</v-btn>
</div>
@@ -230,7 +252,9 @@
tag="div"
>
<v-btn to="/" value="home">
<v-icon :color="getBottomNavIconColor('home')">mdi-view-dashboard</v-icon>
<v-icon :color="getBottomNavIconColor('home')"
>mdi-view-dashboard</v-icon
>
<span class="bottom-nav-text">首頁</span>
</v-btn>
@@ -246,13 +270,25 @@
<span class="bottom-nav-text">自評</span>
</v-btn>
<v-btn v-if="CHECKIN_ENABLED && store.isLoggedIn" to="/checkin" value="checkin">
<v-icon :color="getBottomNavIconColor('checkin')">mdi-qrcode-scan</v-icon>
<v-btn
v-if="CHECKIN_ENABLED && store.isLoggedIn"
to="/checkin"
value="checkin"
>
<v-icon :color="getBottomNavIconColor('checkin')"
>mdi-qrcode-scan</v-icon
>
<span class="bottom-nav-text">量測</span>
</v-btn>
<v-btn v-if="APPOINTMENT_ENABLED && store.isLoggedIn" to="/appointment" value="appointment">
<v-icon :color="getBottomNavIconColor('appointment')">mdi-calendar-check</v-icon>
<v-btn
v-if="APPOINTMENT_ENABLED && store.isLoggedIn"
to="/appointment"
value="appointment"
>
<v-icon :color="getBottomNavIconColor('appointment')"
>mdi-calendar-check</v-icon
>
<span class="bottom-nav-text">預約</span>
</v-btn>
</v-bottom-navigation>
@@ -260,7 +296,9 @@
<!-- 隱私授權對話框 -->
<v-dialog v-model="showPrivacy" max-width="500">
<v-card class="rounded-xl">
<v-card-title class="bg-primary text-white font-weight-bold d-flex align-center">
<v-card-title
class="bg-primary text-white font-weight-bold d-flex align-center"
>
<v-icon class="mr-2" icon="mdi-shield-check" />
個資同意與資料授權
</v-card-title>
@@ -293,8 +331,8 @@
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { computed, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
APPOINTMENT_ENABLED,
BODY_COMPOSITION_ENABLED,
@@ -302,53 +340,54 @@ import {
CHECKIN_ENABLED,
EMAIL_COMPLETION_REQUIRED,
SELF_ASSESSMENT_ENABLED,
} from '@/config/features'
import { useAppStore } from '@/stores/app'
import { useCourseStore } from '@/stores/course'
} from "@/config/features";
import { useAppStore } from "@/stores/app";
import { useCourseStore } from "@/stores/course";
const store = useAppStore()
const courseStore = useCourseStore()
const router = useRouter()
const route = useRoute()
const store = useAppStore();
const courseStore = useCourseStore();
const router = useRouter();
const route = useRoute();
const drawer = ref(false)
const activeTab = ref('home')
const showPrivacy = ref(false)
const drawer = ref(false);
const activeTab = ref("home");
const showPrivacy = ref(false);
const emailCompletionLocation = computed(() => ({
name: 'complete-email',
name: "complete-email",
query: {
redirect: route.name === 'complete-email' ? '/' : route.fullPath,
redirect: route.name === "complete-email" ? "/" : route.fullPath,
},
}))
}));
// 無障礙狀態 (可持久化儲存於 localStorage)
const isLargeText = ref(localStorage.getItem('mode-large-text') === 'true')
const isLargeText = ref(localStorage.getItem("mode-large-text") === "true");
watch(isLargeText, (newVal) => {
localStorage.setItem('mode-large-text', String(newVal))
})
localStorage.setItem("mode-large-text", String(newVal));
});
// 同步底部導航狀態與當前路由
watch(
() => route.path,
(path) => {
if (path === '/') activeTab.value = 'home'
else if (path.startsWith('/self-assessment')) activeTab.value = 'self-assessment'
else if (path.startsWith('/appointment')) activeTab.value = 'appointment'
else if (path.startsWith('/checkin')) activeTab.value = 'checkin'
if (path === "/") activeTab.value = "home";
else if (path.startsWith("/self-assessment"))
activeTab.value = "self-assessment";
else if (path.startsWith("/appointment")) activeTab.value = "appointment";
else if (path.startsWith("/checkin")) activeTab.value = "checkin";
},
{ immediate: true }
)
{ immediate: true },
);
function getBottomNavIconColor(value: string) {
return activeTab.value === value ? 'secondary' : 'secondary-darken-1'
return activeTab.value === value ? "secondary" : "secondary-darken-1";
}
async function handleLogout() {
await store.logout()
courseStore.resetGroup()
await router.push('/login')
drawer.value = false
await store.logout();
courseStore.resetGroup();
await router.push("/login");
drawer.value = false;
}
</script>
app/citizen-frontend/src/pages/index.vue
+164 -117
View File
@@ -11,12 +11,20 @@
<v-card-title>
{{ store.userProfile.phone }}
</v-card-title>
<v-card-subtitle> 資料更新於 {{ todayTimeString }} </v-card-subtitle>
<v-card-subtitle>
資料更新於 {{ todayTimeString }}
</v-card-subtitle>
</v-col>
<v-col v-if="courseStore.groupMissing" class="d-flex justify-center" cols="4">
<v-col
v-if="courseStore.groupMissing"
class="d-flex justify-center"
cols="4"
>
<!-- 體適能分組徽章 -->
<div class="score-disk d-flex flex-column justify-center align-center text-primary">
<div
class="score-disk d-flex flex-column justify-center align-center text-primary"
>
<span class="group-label">未完成體適能測試</span>
</div>
</v-col>
@@ -24,12 +32,22 @@
<v-card-subtitle v-if="courseStore.groupError" class="text-error">
{{ courseStore.groupError }}
<v-btn class="ml-2" color="error" size="small" variant="text" @click="loadFitnessGroup">
<v-btn
class="ml-2"
color="error"
size="small"
variant="text"
@click="loadFitnessGroup"
>
重試
</v-btn>
</v-card-subtitle>
<v-row v-if="RADAR_ENABLED && physicalFitnessRadarData" class="mt-4" no-gutters>
<v-row
v-if="RADAR_ENABLED && physicalFitnessRadarData"
class="mt-4"
no-gutters
>
<v-col
v-for="summary in radarSummaries"
:key="summary.label"
@@ -183,10 +201,17 @@
</v-row>
</v-card-text>
<div class="d-flex align-center mt-4 px-4">
<v-icon class="mr-3" color="primary" icon="mdi-lock-outline" size="28" />
<v-icon
class="mr-3"
color="primary"
icon="mdi-lock-outline"
size="28"
/>
<div>
<div class="font-weight-bold text-grey-darken-4">登入後可使用完整功能</div>
<div class="font-weight-bold text-grey-darken-4">
登入後可使用完整功能
</div>
</div>
</div>
</v-card>
@@ -222,7 +247,12 @@
>
{{ generateResult }}
</v-alert>
<v-alert v-if="generateError" class="mb-0" type="error" variant="tonal">
<v-alert
v-if="generateError"
class="mb-0"
type="error"
variant="tonal"
>
{{ generateError }}
</v-alert>
</v-card-text>
@@ -235,7 +265,7 @@
variant="text"
@click="closeGenerateDialog"
>
{{ generateResult || generateError ? '關閉' : '取消' }}
{{ generateResult || generateError ? "關閉" : "取消" }}
</v-btn>
<v-btn
v-if="!generateResult && !generateError"
@@ -259,7 +289,11 @@
</v-card>
</v-dialog>
<v-dialog v-if="APPOINTMENT_ENABLED" v-model="missingGroupDialog" max-width="400">
<v-dialog
v-if="APPOINTMENT_ENABLED"
v-model="missingGroupDialog"
max-width="400"
>
<v-card class="rounded-xl overflow-hidden text-center">
<v-card-title class="bg-primary text-white font-weight-bold py-3">
尚未取得體適能分組
@@ -305,92 +339,95 @@
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import type { PhysicalFitnessItem } from '@/api/types'
import { fetchPhysicalFitness, generatePhysicalFitness } from '@/api/physical-fitness'
import BrandAvatar from '@/components/BrandAvatar.vue'
import FitnessGroupCardItem from '@/components/FitnessGroupCardItem.vue'
import HealthRadarChart from '@/components/HealthRadarChart.vue'
import IntroductionCarousel from '@/components/IntroductionCarousel.vue'
import Layout from '@/components/layout/DefaultLayout.vue'
import ModuleRouterCard from '@/components/ModuleRouterCard.vue'
import PlatformIntroduction from '@/components/PlatformIntroduction.vue'
import PhysicalFitnessSummary from '@/components/PhysicalFitnessSummary.vue'
import { computed, ref, watch } from "vue";
import { useRouter } from "vue-router";
import type { PhysicalFitnessItem } from "@/api/types";
import {
fetchPhysicalFitness,
generatePhysicalFitness,
} from "@/api/physical-fitness";
import BrandAvatar from "@/components/BrandAvatar.vue";
import FitnessGroupCardItem from "@/components/FitnessGroupCardItem.vue";
import HealthRadarChart from "@/components/HealthRadarChart.vue";
import IntroductionCarousel from "@/components/IntroductionCarousel.vue";
import Layout from "@/components/layout/DefaultLayout.vue";
import ModuleRouterCard from "@/components/ModuleRouterCard.vue";
import PlatformIntroduction from "@/components/PlatformIntroduction.vue";
import PhysicalFitnessSummary from "@/components/PhysicalFitnessSummary.vue";
import {
APPOINTMENT_ENABLED,
BODY_COMPOSITION_ENABLED,
CHECKIN_ENABLED,
RADAR_ENABLED,
} from '@/config/features'
import { useAppStore } from '@/stores/app'
import { useCourseStore } from '@/stores/course'
import { getApiErrorMessage } from '@/utils/api-error'
import { calculatePhysicalFitnessRadar } from '@/utils/physical-fitness-radar'
} from "@/config/features";
import { useAppStore } from "@/stores/app";
import { useCourseStore } from "@/stores/course";
import { getApiErrorMessage } from "@/utils/api-error";
import { calculatePhysicalFitnessRadar } from "@/utils/physical-fitness-radar";
const store = useAppStore()
const courseStore = useCourseStore()
const router = useRouter()
const missingGroupDialog = ref(false)
const generateDialog = ref(false)
const generatePhysicalFitnessLoading = ref(false)
const generateResult = ref('')
const generateError = ref('')
const physicalFitnessItems = ref<PhysicalFitnessItem[]>([])
const physicalFitnessReceivedAt = ref<string | null>(null)
const physicalFitnessLoading = ref(false)
const physicalFitnessError = ref('')
const store = useAppStore();
const courseStore = useCourseStore();
const router = useRouter();
const missingGroupDialog = ref(false);
const generateDialog = ref(false);
const generatePhysicalFitnessLoading = ref(false);
const generateResult = ref("");
const generateError = ref("");
const physicalFitnessItems = ref<PhysicalFitnessItem[]>([]);
const physicalFitnessReceivedAt = ref<string | null>(null);
const physicalFitnessLoading = ref(false);
const physicalFitnessError = ref("");
const physicalFitnessRadarData = computed(() =>
calculatePhysicalFitnessRadar(physicalFitnessItems.value)
)
calculatePhysicalFitnessRadar(physicalFitnessItems.value),
);
const radarSummaries = computed(() => {
if (!physicalFitnessRadarData.value) {
return []
return [];
}
return [
{
label: '上肢',
tip: '上肢肌力',
label: "上肢",
tip: "上肢肌力",
score: physicalFitnessRadarData.value.upperBodyStrength,
},
{
label: '下肢',
tip: '下肢肌耐力',
label: "下肢",
tip: "下肢肌耐力",
score: physicalFitnessRadarData.value.lowerBodyStrengthAndEndurance,
},
{
label: '心肺',
tip: '心肺耐力',
label: "心肺",
tip: "心肺耐力",
score: physicalFitnessRadarData.value.cardio,
},
{
label: '敏捷',
tip: '平衡、敏捷與行動',
label: "敏捷",
tip: "平衡、敏捷與行動",
score: physicalFitnessRadarData.value.balanceAgilityAndMobility,
},
{
label: '柔軟',
tip: '柔軟度',
label: "柔軟",
tip: "柔軟度",
score: physicalFitnessRadarData.value.flexibility,
},
]
})
];
});
const MISSING_GROUP_DIALOG_KEY = 'missing-fitness-group-dialog-shown'
const MISSING_GROUP_DIALOG_KEY = "missing-fitness-group-dialog-shown";
function hasShownMissingGroupDialog() {
try {
return sessionStorage.getItem(MISSING_GROUP_DIALOG_KEY) === 'true'
return sessionStorage.getItem(MISSING_GROUP_DIALOG_KEY) === "true";
} catch {
return false
return false;
}
}
function markMissingGroupDialogShown() {
try {
sessionStorage.setItem(MISSING_GROUP_DIALOG_KEY, 'true')
sessionStorage.setItem(MISSING_GROUP_DIALOG_KEY, "true");
} catch {
// 部分瀏覽器可能封鎖 sessionStorage，仍允許本次彈窗正常使用。
}
@@ -398,144 +435,154 @@ function markMissingGroupDialogShown() {
function clearMissingGroupDialogMarker() {
try {
sessionStorage.removeItem(MISSING_GROUP_DIALOG_KEY)
sessionStorage.removeItem(MISSING_GROUP_DIALOG_KEY);
} catch {
// 不影響主要流程。
}
}
function openMissingGroupDialog() {
if (store.isLoggedIn && courseStore.groupMissing && !hasShownMissingGroupDialog()) {
markMissingGroupDialogShown()
missingGroupDialog.value = true
if (
store.isLoggedIn &&
courseStore.groupMissing &&
!hasShownMissingGroupDialog()
) {
markMissingGroupDialogShown();
missingGroupDialog.value = true;
}
}
async function goToAppointment() {
missingGroupDialog.value = false
await router.push({ name: 'appointment' })
missingGroupDialog.value = false;
await router.push({ name: "appointment" });
}
async function loadFitnessGroup() {
if (!store.isLoggedIn) {
missingGroupDialog.value = false
clearMissingGroupDialogMarker()
courseStore.resetGroup()
return
missingGroupDialog.value = false;
clearMissingGroupDialogMarker();
courseStore.resetGroup();
return;
}
try {
await courseStore.loadGroup()
clearMissingGroupDialogMarker()
await courseStore.loadGroup();
clearMissingGroupDialogMarker();
} catch {
// 錯誤狀態由 course store 提供給畫面顯示與重試。
openMissingGroupDialog()
openMissingGroupDialog();
}
}
function getRequiredUserID(): string | null {
const userID = store.userID.trim()
const userID = store.userID.trim();
if (userID) {
return userID
return userID;
}
return null
return null;
}
async function loadPhysicalFitness() {
if (!store.isLoggedIn) {
physicalFitnessItems.value = []
physicalFitnessReceivedAt.value = null
physicalFitnessError.value = ''
return
physicalFitnessItems.value = [];
physicalFitnessReceivedAt.value = null;
physicalFitnessError.value = "";
return;
}
const userID = getRequiredUserID()
const userID = getRequiredUserID();
if (!userID) {
return
return;
}
physicalFitnessLoading.value = true
physicalFitnessError.value = ''
physicalFitnessLoading.value = true;
physicalFitnessError.value = "";
try {
const physicalFitnessResponse = await fetchPhysicalFitness(userID)
physicalFitnessItems.value = physicalFitnessResponse.results
physicalFitnessReceivedAt.value = physicalFitnessResponse.ReceivedAt
updateTodayTimeString()
const physicalFitnessResponse = await fetchPhysicalFitness(userID);
physicalFitnessItems.value = physicalFitnessResponse.results;
physicalFitnessReceivedAt.value = physicalFitnessResponse.ReceivedAt;
updateTodayTimeString();
} catch (error) {
physicalFitnessError.value = getApiErrorMessage(error, '體適能測驗資料載入失敗，請稍後再試。')
physicalFitnessError.value = getApiErrorMessage(
error,
"體適能測驗資料載入失敗，請稍後再試。",
);
} finally {
physicalFitnessLoading.value = false
physicalFitnessLoading.value = false;
}
}
function openGenerateDialog() {
if (!getRequiredUserID()) {
return
return;
}
generateResult.value = ''
generateError.value = ''
generateDialog.value = true
generateResult.value = "";
generateError.value = "";
generateDialog.value = true;
}
function closeGenerateDialog() {
if (generatePhysicalFitnessLoading.value) {
return
return;
}
generateDialog.value = false
generateDialog.value = false;
}
async function handleGeneratePhysicalFitness() {
const userID = getRequiredUserID()
const userID = getRequiredUserID();
if (!userID) {
return
return;
}
generatePhysicalFitnessLoading.value = true
generateResult.value = ''
generateError.value = ''
generatePhysicalFitnessLoading.value = true;
generateResult.value = "";
generateError.value = "";
try {
const response = await generatePhysicalFitness(userID)
generateResult.value = response.message
updateTodayTimeString()
const response = await generatePhysicalFitness(userID);
generateResult.value = response.message;
updateTodayTimeString();
if (response.message === '評級完成') {
await courseStore.loadGroup(true)
if (response.message === "評級完成") {
await courseStore.loadGroup(true);
}
await loadPhysicalFitness()
await loadPhysicalFitness();
} catch (error) {
generateError.value = getApiErrorMessage(error, '體適能評級重新計算失敗，請稍後再試。')
generateError.value = getApiErrorMessage(
error,
"體適能評級重新計算失敗，請稍後再試。",
);
} finally {
generatePhysicalFitnessLoading.value = false
generatePhysicalFitnessLoading.value = false;
}
}
watch(() => store.isLoggedIn, loadFitnessGroup, { immediate: true })
watch(() => store.isLoggedIn, loadFitnessGroup, { immediate: true });
watch([() => store.isLoggedIn, () => store.userID], loadPhysicalFitness, {
immediate: true,
})
});
function formatCurrentDateTime() {
const now = new Date()
const now = new Date();
const date = [
String(now.getMonth() + 1).padStart(2, '0'),
String(now.getDate()).padStart(2, '0'),
].join('/')
const time = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
String(now.getMonth() + 1).padStart(2, "0"),
String(now.getDate()).padStart(2, "0"),
].join("/");
const time = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
return `${date} ${time}`
return `${date} ${time}`;
}
const todayTimeString = ref(formatCurrentDateTime())
const todayTimeString = ref(formatCurrentDateTime());
function updateTodayTimeString() {
todayTimeString.value = formatCurrentDateTime()
todayTimeString.value = formatCurrentDateTime();
}
</script>