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

feat: bmi

Browse Source
This commit is contained in:
skytek_xinliang
2026-09-21 16:01:46 +08:00
parent 2a82c70bc3
commit 92ef1251bf
5 changed files with 108 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/citizen-frontend/src/components/layout/DefaultLayout.vue
+49 -86
View File
@@ -6,9 +6,7 @@
<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">
@@ -21,10 +19,7 @@
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>
@@ -42,7 +37,7 @@
<template #prepend>
<v-avatar color="accent" size="48">
<span class="text-white font-weight-bold text-h6">
{{ (store.userProfile.name || "姓名").substring(0, 1) }}
{{ (store.userProfile.name || '姓名').substring(0, 1) }}
</span>
</v-avatar>
</template>
@@ -63,9 +58,7 @@
</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 />
@@ -78,12 +71,7 @@
<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>
@@ -100,6 +88,13 @@
@click="drawer = false"
/>
<v-list-item
v-if="SELF_ASSESSMENT_ENABLED"
color="primary"
prepend-icon="mdi-clipboard-text-search"
title="自評"
to="/self-assessment"
/>
<v-list-item
v-if="BODY_COMPOSITION_ENABLED && store.isLoggedIn"
color="primary"
@@ -109,14 +104,6 @@
@click="drawer = false"
/>
<v-list-item
v-if="SELF_ASSESSMENT_ENABLED"
color="primary"
prepend-icon="mdi-clipboard-text-search"
title="自評"
to="/self-assessment"
/>
<v-list-item
v-if="store.isLoggedIn"
color="primary"
@@ -184,10 +171,7 @@
</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">
<slot name="main" />
</v-container>
@@ -204,17 +188,11 @@
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>
<v-btn
v-if="SELF_ASSESSMENT_ENABLED"
to="/self-assessment"
value="self-assessment"
>
<v-btn v-if="SELF_ASSESSMENT_ENABLED" to="/self-assessment" value="self-assessment">
<v-icon :color="getBottomNavIconColor('self-assessment')">
mdi-clipboard-text-search
</v-icon>
@@ -222,25 +200,13 @@
<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>
@@ -248,9 +214,7 @@
<!-- 隱私授權對話框 -->
<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>
@@ -267,7 +231,7 @@
</ul>
<p class="text-caption text-grey">
授權狀態：{{ store.userProfile.consent ? "已同意授權" : "未授權" }}
授權狀態：{{ store.userProfile.consent ? '已同意授權' : '未授權' }}
</p>
</v-card-text>
@@ -287,58 +251,57 @@
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useDisplayUserName } from "@/composables/useDisplayUserName";
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useDisplayUserName } from '@/composables/useDisplayUserName'
import {
APPOINTMENT_ENABLED,
BODY_COMPOSITION_ENABLED,
BOTTOM_NAVIGATION_ENABLED,
CHECKIN_ENABLED,
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 displayUserName = useDisplayUserName(store.userProfile);
const store = useAppStore()
const courseStore = useCourseStore()
const router = useRouter()
const route = useRoute()
const displayUserName = useDisplayUserName(store.userProfile)
const drawer = ref(false);
const activeTab = ref("home");
const showPrivacy = ref(false);
const drawer = ref(false)
const activeTab = ref('home')
const showPrivacy = ref(false)
// 無障礙狀態 (可持久化儲存於 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>