From 0727a803c0fc1fe41e53e660f59eaad64b9d7463 Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Wed, 23 Sep 2026 17:51:35 +0800
Subject: [PATCH] fix: scroll to hash

---
 .../src/components/layout/PageHeading.vue       | 17 +++++++++++++++--
 .../src/pages/body-composition.vue              |  2 +-
 app/citizen-frontend/src/pages/course.vue       |  2 +-
 app/citizen-frontend/src/pages/index.vue        |  2 ++
 app/citizen-frontend/src/router/index.ts        | 10 +++++++++-
 5 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/app/citizen-frontend/src/components/layout/PageHeading.vue b/app/citizen-frontend/src/components/layout/PageHeading.vue
index 7128e7d..d464e0d 100644
--- a/app/citizen-frontend/src/components/layout/PageHeading.vue
+++ b/app/citizen-frontend/src/components/layout/PageHeading.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-withDefaults(
+import { useRouter } from "vue-router";
+
+const props = withDefaults(
   defineProps<{
     title: string;
     backTo?: string;
@@ -8,6 +10,17 @@ withDefaults(
     backTo: "/",
   },
 );
+
+const router = useRouter();
+
+function handleBack() {
+  if (window.history.state?.back === props.backTo) {
+    router.back();
+    return;
+  }
+
+  router.push(props.backTo);
+}
 </script>
 
 <template>
@@ -18,8 +31,8 @@ withDefaults(
       color="primary"
       prepend-icon="mdi-arrow-left"
       rounded="pill"
-      :to="backTo"
       variant="outlined"
+      @click="handleBack"
     >
       返回
     </v-btn>
diff --git a/app/citizen-frontend/src/pages/body-composition.vue b/app/citizen-frontend/src/pages/body-composition.vue
index 5d9b22f..1720aaa 100644
--- a/app/citizen-frontend/src/pages/body-composition.vue
+++ b/app/citizen-frontend/src/pages/body-composition.vue
@@ -48,7 +48,7 @@ onMounted(loadBodyComposition);
   <Layout>
     <template #main>
       <div class="max-width-mobile pb-2">
-        <PageHeading title="身體數值分析" />
+        <PageHeading back-to="/#body-composition-entry" title="身體數值分析" />
 
         <template v-if="loading">
           <v-skeleton-loader class="rounded-xl mb-4" type="article, table" />
diff --git a/app/citizen-frontend/src/pages/course.vue b/app/citizen-frontend/src/pages/course.vue
index 622f109..62dd536 100644
--- a/app/citizen-frontend/src/pages/course.vue
+++ b/app/citizen-frontend/src/pages/course.vue
@@ -2,7 +2,7 @@
   <Layout>
     <template #main>
       <template v-if="store.groupLoaded">
-        <PageHeading title="課程建議" />
+        <PageHeading back-to="/#course-entry" title="課程建議" />
 
         <!-- 體適能組別：本頁所有內容都依它而定，因此獨立成一張顯眼的卡片 -->
         <v-card
diff --git a/app/citizen-frontend/src/pages/index.vue b/app/citizen-frontend/src/pages/index.vue
index ed02f42..87690c3 100644
--- a/app/citizen-frontend/src/pages/index.vue
+++ b/app/citizen-frontend/src/pages/index.vue
@@ -88,6 +88,7 @@
           />
 
           <v-list-item
+            id="course-entry"
             append-icon="mdi-chevron-right"
             class="bg-primary py-4"
             to="/course"
@@ -127,6 +128,7 @@
           <HealthRadarChart v-else :radar-data="physicalFitnessRadarData" />
         </v-card>
         <ModuleRouterCard
+          id="body-composition-entry"
           v-if="BODY_COMPOSITION_ENABLED"
           description="查看 BMI 與體脂率的分析結果。"
           icon="mdi-scale-bathroom"
diff --git a/app/citizen-frontend/src/router/index.ts b/app/citizen-frontend/src/router/index.ts
index fe25f2a..99f6f11 100644
--- a/app/citizen-frontend/src/router/index.ts
+++ b/app/citizen-frontend/src/router/index.ts
@@ -20,7 +20,15 @@ import { getApiErrorStatus } from "@/utils/api-error";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  scrollBehavior() {
+  scrollBehavior(to, _from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition;
+    }
+
+    if (to.hash) {
+      return { el: to.hash, top: 68 };
+    }
+
     return { left: 0, top: 0 };
   },
   routes: [