From 92c5163334aca8bf24fe59bc284c53e369a07fb7 Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Tue, 22 Sep 2026 09:16:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=80=8B=E8=B3=87=E6=A2=9D=E6=AC=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/PrivacyConsentDialog.vue   | 39 +++++++++++++++++++
 .../src/components/layout/DefaultLayout.vue   |  9 +++++
 app/citizen-frontend/src/pages/profile.vue    | 30 +++++++++-----
 app/citizen-frontend/src/pages/register.vue   | 24 +++++++++---
 .../src/pages/self-assessment.vue             |  9 +----
 5 files changed, 88 insertions(+), 23 deletions(-)
 create mode 100644 app/citizen-frontend/src/components/PrivacyConsentDialog.vue

diff --git a/app/citizen-frontend/src/components/PrivacyConsentDialog.vue b/app/citizen-frontend/src/components/PrivacyConsentDialog.vue
new file mode 100644
index 0000000..ff782f5
--- /dev/null
+++ b/app/citizen-frontend/src/components/PrivacyConsentDialog.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const isOpen = defineModel<boolean>({ required: true });
+</script>
+
+<template>
+  <v-dialog v-model="isOpen" max-width="500">
+    <v-card class="rounded-xl">
+      <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>
+
+      <v-card-text class="pt-4 text-body-1">
+        <p class="mb-3">
+          「運動玩轉健康力」平台非常重視您的個人隱私。我們所蒐集的身體活動自評、血壓、體脂以及現場運動表現數據，將僅用於以下用途：
+        </p>
+
+        <ul class="pl-4 mb-3">
+          <li>提供個人化的運動與健康改善建議。</li>
+          <li>於活動現場合對您的身分。</li>
+          <li>在去識別化的安全機制下，作為高齡健康促進的政策分析參考。</li>
+        </ul>
+      </v-card-text>
+
+      <v-card-actions class="justify-end px-4 pb-4">
+        <v-btn
+          class="rounded-lg px-4"
+          color="primary"
+          variant="flat"
+          @click="isOpen = false"
+        >
+          確認關閉
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
diff --git a/app/citizen-frontend/src/components/layout/DefaultLayout.vue b/app/citizen-frontend/src/components/layout/DefaultLayout.vue
index 8dfb08d..08735fd 100644
--- a/app/citizen-frontend/src/components/layout/DefaultLayout.vue
+++ b/app/citizen-frontend/src/components/layout/DefaultLayout.vue
@@ -91,6 +91,15 @@
 
       <!-- 主要功能連結 -->
       <v-list density="comfortable" nav>
+        <v-list-item
+          class="py-2"
+          color="primary"
+          exact
+          prepend-icon="mdi-view-dashboard"
+          title="計畫簡介"
+          to="/"
+        />
+
         <v-list-item
           v-if="store.isLoggedIn"
           color="primary"
diff --git a/app/citizen-frontend/src/pages/profile.vue b/app/citizen-frontend/src/pages/profile.vue
index 75f1b49..0d36570 100644
--- a/app/citizen-frontend/src/pages/profile.vue
+++ b/app/citizen-frontend/src/pages/profile.vue
@@ -2,14 +2,7 @@
   <Layout>
     <template #main>
       <div class="profile-page">
-        <v-card class="mb-6" variant="flat">
-          <v-card-title class="text-primary font-weight-bold"
-            >個人資料修改</v-card-title
-          >
-          <v-card-subtitle class="text-grey-darken-3">
-            更新您的基本資料與緊急聯絡資訊。</v-card-subtitle
-          >
-        </v-card>
+        <PageHeading title="個人資料修改" />
 
         <v-card class="rounded-xl" color="surface" variant="flat">
           <v-card-title class="mb-4">基本資料</v-card-title>
@@ -168,8 +161,20 @@
                 class="mb-3"
                 color="primary"
                 :disabled="initialLoading"
-                label="我已閱讀並同意個資授權條款"
-              />
+              >
+                <template #label>
+                  <span>
+                    我已閱讀並同意
+                    <button
+                      class="text-primary text-decoration-underline"
+                      type="button"
+                      @click.stop="showPrivacyConsent = true"
+                    >
+                      個資授權條款
+                    </button>
+                  </span>
+                </template>
+              </v-checkbox>
 
               <div class="d-flex flex-column flex-sm-row ga-3">
                 <v-btn
@@ -195,13 +200,17 @@
           </v-card-text>
         </v-card>
       </div>
+
+      <PrivacyConsentDialog v-model="showPrivacyConsent" />
     </template>
   </Layout>
 </template>
 
 <script setup lang="ts">
 import { computed, nextTick, onMounted, reactive, ref } from "vue";
+import PrivacyConsentDialog from "@/components/PrivacyConsentDialog.vue";
 import Layout from "@/components/layout/DefaultLayout.vue";
+import PageHeading from "@/components/layout/PageHeading.vue";
 import type { UserProfile } from "@/stores/app";
 import { useAppStore } from "@/stores/app";
 import { getApiErrorMessage } from "@/utils/api-error";
@@ -221,6 +230,7 @@ interface ProfileForm {
 }
 
 const store = useAppStore();
+const showPrivacyConsent = ref(false);
 const form = reactive<ProfileForm>(createEmptyForm());
 const initialLoading = ref(true);
 const saving = ref(false);
diff --git a/app/citizen-frontend/src/pages/register.vue b/app/citizen-frontend/src/pages/register.vue
index 50bd784..a99beca 100644
--- a/app/citizen-frontend/src/pages/register.vue
+++ b/app/citizen-frontend/src/pages/register.vue
@@ -146,12 +146,20 @@
                   </v-col>
                 </v-row>
 
-                <v-checkbox
-                  v-model="form.consent"
-                  class="mb-3"
-                  color="primary"
-                  label="我已閱讀並同意個資授權條款"
-                />
+                <v-checkbox v-model="form.consent" class="mb-3" color="primary">
+                  <template #label>
+                    <span>
+                      我已閱讀並同意
+                      <button
+                        class="text-primary text-decoration-underline"
+                        type="button"
+                        @click.stop="showPrivacyConsent = true"
+                      >
+                        個資授權條款
+                      </button>
+                    </span>
+                  </template>
+                </v-checkbox>
 
                 <v-btn
                   block
@@ -174,6 +182,8 @@
         </v-col>
       </v-row>
     </v-container>
+
+    <PrivacyConsentDialog v-model="showPrivacyConsent" />
   </v-app>
 </template>
 
@@ -183,6 +193,7 @@ import { useRoute, useRouter } from "vue-router";
 import type { Gender, RegisterRequest } from "@/api/types";
 import { CONSENT_VERSION } from "@/api/types";
 import BrandAvatar from "@/components/BrandAvatar.vue";
+import PrivacyConsentDialog from "@/components/PrivacyConsentDialog.vue";
 import { useAppStore } from "@/stores/app";
 import {
   getApiErrorStatus,
@@ -197,6 +208,7 @@ import {
 const store = useAppStore();
 const route = useRoute();
 const router = useRouter();
+const showPrivacyConsent = ref(false);
 const existingDraft = readGuestSelfAssessmentDraft();
 const routePhone = normalizePhone(String(route.query.phone ?? ""));
 const initialProfile = existingDraft?.profile;
diff --git a/app/citizen-frontend/src/pages/self-assessment.vue b/app/citizen-frontend/src/pages/self-assessment.vue
index b1876f8..8bc118e 100644
--- a/app/citizen-frontend/src/pages/self-assessment.vue
+++ b/app/citizen-frontend/src/pages/self-assessment.vue
@@ -1,13 +1,7 @@
 <template>
   <Layout>
     <template #main>
-      <v-card class="mb-6" variant="flat">
-        <v-card-title class="text-primary">線上健康自評</v-card-title>
-
-        <v-card-subtitle class="text-grey-darken-3">
-          只需 3 分鐘，評估您的運動風險與健康狀態
-        </v-card-subtitle>
-      </v-card>
+      <PageHeading title="線上健康自評" />
 
       <!-- 進度指示器 -->
       <v-row class="mb-6 justify-center">
@@ -526,6 +520,7 @@ import type {
 } from "@/api/types";
 import { CONSENT_VERSION } from "@/api/types";
 import Layout from "@/components/layout/DefaultLayout.vue";
+import PageHeading from "@/components/layout/PageHeading.vue";
 import { APPOINTMENT_ENABLED } from "@/config/features";
 import {
   readGuestSelfAssessmentDraft,