feat: 個資條款

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);

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;

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,