From 043d924322cf82a9e73d884f03f445dbc52fc375 Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Tue, 15 Sep 2026 10:27:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=90=84=E7=A8=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/PhysicalFitnessSummary.vue |   6 +-
 .../src/components/layout/DefaultLayout.vue   |  18 +-
 app/citizen-frontend/src/config/features.ts   |   2 +
 app/citizen-frontend/src/pages/index.vue      | 159 +++++++++++-------
 app/citizen-frontend/src/pages/login.vue      |   3 +-
 app/citizen-frontend/src/pages/register.vue   |   4 -
 6 files changed, 116 insertions(+), 76 deletions(-)

diff --git a/app/citizen-frontend/src/components/PhysicalFitnessSummary.vue b/app/citizen-frontend/src/components/PhysicalFitnessSummary.vue
index ef203a9..bb367a2 100644
--- a/app/citizen-frontend/src/components/PhysicalFitnessSummary.vue
+++ b/app/citizen-frontend/src/components/PhysicalFitnessSummary.vue
@@ -49,7 +49,7 @@
         </v-btn>
       </v-alert>
 
-      <v-row density="comfortable">
+      <v-row density="compact">
         <v-col
           v-for="item in displayItems"
           :key="item.fitnessCode"
@@ -58,7 +58,7 @@
           md="4"
         >
           <div
-            class="test-item d-flex align-center justify-space-between rounded-lg pa-3"
+            class="test-item d-flex align-center justify-space-between rounded-lg px-3"
           >
             <div class="mr-3">
               <div class="text-body-2 font-weight-bold">
@@ -129,7 +129,7 @@ const completedCount = computed(
 
 <style scoped>
 .test-item {
-  min-height: 72px;
+  min-height: 48px;
   border: 1px solid rgba(0, 0, 0, 0.08);
   background: rgba(var(--v-theme-primary), 0.03);
 }
diff --git a/app/citizen-frontend/src/components/layout/DefaultLayout.vue b/app/citizen-frontend/src/components/layout/DefaultLayout.vue
index afd8c4a..a6b360d 100644
--- a/app/citizen-frontend/src/components/layout/DefaultLayout.vue
+++ b/app/citizen-frontend/src/components/layout/DefaultLayout.vue
@@ -117,6 +117,7 @@
         />
 
         <v-list-item
+          v-if="SELF_ASSESSMENT_ENABLED"
           color="primary"
           prepend-icon="mdi-clipboard-text-search"
           title="線上健康自評"
@@ -198,7 +199,9 @@
 
     <!-- 底部導航欄 (Mobile First 核心) -->
     <v-bottom-navigation
+      v-if="BOTTOM_NAVIGATION_ENABLED"
       v-model="activeTab"
+      density="compact"
       bg-color="background"
       color="primary-darken-1"
       grow
@@ -211,7 +214,11 @@
         <span class="bottom-nav-text">首頁</span>
       </v-btn>
 
-      <v-btn 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>
@@ -259,7 +266,7 @@
 
           <ul class="pl-4 mb-3">
             <li>提供個人化的運動與健康改善建議。</li>
-            <li>於普測活動現場合對您的身分。</li>
+            <li>於活動現場合對您的身分。</li>
             <li>在去識別化的安全機制下，作為高齡健康促進的政策分析參考。</li>
           </ul>
 
@@ -287,7 +294,12 @@
 import { ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useDisplayUserName } from "@/composables/useDisplayUserName";
-import { APPOINTMENT_ENABLED, CHECKIN_ENABLED } from "@/config/features";
+import {
+  APPOINTMENT_ENABLED,
+  BOTTOM_NAVIGATION_ENABLED,
+  CHECKIN_ENABLED,
+  SELF_ASSESSMENT_ENABLED,
+} from "@/config/features";
 import { useAppStore } from "@/stores/app";
 import { useCourseStore } from "@/stores/course";
 
diff --git a/app/citizen-frontend/src/config/features.ts b/app/citizen-frontend/src/config/features.ts
index cb96271..386eb69 100644
--- a/app/citizen-frontend/src/config/features.ts
+++ b/app/citizen-frontend/src/config/features.ts
@@ -1,3 +1,5 @@
 export const APPOINTMENT_ENABLED = false;
+export const BOTTOM_NAVIGATION_ENABLED = false;
 export const CHECKIN_ENABLED = false;
 export const RADAR_ENABLED = false;
+export const SELF_ASSESSMENT_ENABLED = false;
diff --git a/app/citizen-frontend/src/pages/index.vue b/app/citizen-frontend/src/pages/index.vue
index 7f26ead..75a884e 100644
--- a/app/citizen-frontend/src/pages/index.vue
+++ b/app/citizen-frontend/src/pages/index.vue
@@ -4,7 +4,7 @@
       <template v-if="store.isLoggedIn">
         <!-- 頂部：我的健康力護照卡片 (Taipei Masters Hub) -->
         <v-card class="border-primary border-xl rounded-xl" variant="flat">
-          <v-row class="mt-4" no-gutters>
+          <v-row class="mt-4 pa-2" no-gutters>
             <v-col cols="8">
               <v-card-title>
                 {{ displayUserName }}
@@ -39,7 +39,7 @@
                   {{ courseStore.groupMeta.label }}
                 </span>
                 <span v-else-if="courseStore.groupMissing" class="group-label">
-                  未取得體適能分組
+                  未完成體適能測試
                 </span>
                 <span v-else class="group-label">無資料</span>
               </div>
@@ -93,6 +93,18 @@
               </div>
             </v-col>
           </v-row>
+          <div class="px-2">
+            <ModuleRouterCard
+              clickable
+              description="依目前 11 項測驗成績重新計算體適能分組。"
+              icon="mdi-refresh-circle"
+              icon-color="secondary"
+              :disabled="generatePhysicalFitnessLoading"
+              :loading="generatePhysicalFitnessLoading"
+              title="重新計算體適能評級"
+              @click="openGenerateDialog"
+            />
+          </div>
 
           <!-- 課程建議入口 -->
 
@@ -134,17 +146,6 @@
           @refresh="loadPhysicalFitness"
         />
 
-        <ModuleRouterCard
-          clickable
-          description="依目前 11 項測驗成績重新計算體適能分組。"
-          icon="mdi-refresh-circle"
-          icon-color="secondary"
-          :disabled="generatePhysicalFitnessLoading"
-          :loading="generatePhysicalFitnessLoading"
-          title="重新計算體適能評級"
-          @click="openGenerateDialog"
-        />
-
         <ModuleRouterCard
           description="了解公益普測計畫、研究依據與平台流程。"
           icon="mdi-information-outline"
@@ -154,6 +155,7 @@
         />
 
         <ModuleRouterCard
+          v-if="SELF_ASSESSMENT_ENABLED"
           description="完成線上自評，取得初步風險分級。"
           icon="mdi-clipboard-text-search"
           icon-color="accent"
@@ -187,63 +189,77 @@
 
         <v-card class="rounded-xl elevation-2 mb-4 py-4" color="surface">
           <v-card-text>
-            <div class="d-flex align-center mb-4">
-              <v-avatar class="mr-4 text-white" color="accent" size="36">
-                <v-icon icon="mdi-clipboard-text-outline" />
-              </v-avatar>
+            <template v-if="SELF_ASSESSMENT_ENABLED">
+              <div class="d-flex align-center mb-4">
+                <v-avatar class="mr-4 text-white" color="accent" size="36">
+                  <v-icon icon="mdi-clipboard-text-outline" />
+                </v-avatar>
 
-              <div class="text-left">
-                <div class="text-title-medium font-weight-bold text-primary">
-                  無須登入，先做線上健康自評
-                </div>
+                <div class="text-left">
+                  <div class="text-title-medium font-weight-bold text-primary">
+                    無須登入，先做線上健康自評
+                  </div>
 
-                <div class="text-title-small text-grey mt-2">
-                  約 3 分鐘完成，取得初步健康風險分級。
+                  <div class="text-title-small text-grey mt-2">
+                    約 3 分鐘完成，取得初步健康風險分級。
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <v-btn
-              block
-              class="rounded-lg font-weight-bold elevation-1 mb-3"
-              color="secondary"
-              prepend-icon="mdi-clipboard-text-search"
-              to="/self-assessment"
-              variant="flat"
-            >
-              開始自評
-            </v-btn>
+              <v-btn
+                block
+                class="rounded-lg font-weight-bold elevation-1 mb-3"
+                color="secondary"
+                prepend-icon="mdi-clipboard-text-search"
+                to="/self-assessment"
+                variant="flat"
+              >
+                開始自評
+              </v-btn>
+            </template>
 
-            <v-btn
-              block
-              class="rounded-lg font-weight-bold"
-              color="primary"
-              prepend-icon="mdi-login"
-              to="/login"
-              variant="outlined"
-            >
-              登入平台
-            </v-btn>
+            <v-row density="compact">
+              <v-col cols="12" md="6">
+                <v-btn
+                  block
+                  class="rounded-lg font-weight-bold"
+                  color="primary"
+                  prepend-icon="mdi-login"
+                  to="/login"
+                  variant="outlined"
+                >
+                  登入平台
+                </v-btn>
+              </v-col>
 
-            <div class="d-flex align-center mt-4">
-              <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="text-title-small text-grey">
-                  普測預約、現場報到、量測紀錄與運動建議
-                </div>
-              </div>
-            </div>
+              <v-col cols="12" md="6">
+                <v-btn
+                  block
+                  class="rounded-lg font-weight-bold"
+                  color="primary"
+                  prepend-icon="mdi-account-plus-outline"
+                  to="/register"
+                  variant="text"
+                >
+                  建立帳號
+                </v-btn>
+              </v-col>
+            </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"
+            />
+
+            <div>
+              <div class="font-weight-bold text-grey-darken-4">
+                登入後可使用完整功能
+              </div>
+            </div>
+          </div>
         </v-card>
 
         <ModuleRouterCard
@@ -324,7 +340,11 @@
         </v-card>
       </v-dialog>
 
-      <v-dialog 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">
             尚未取得體適能分組
@@ -387,6 +407,7 @@ import {
   APPOINTMENT_ENABLED,
   CHECKIN_ENABLED,
   RADAR_ENABLED,
+  SELF_ASSESSMENT_ENABLED,
 } from "@/config/features";
 import { useAppStore } from "@/stores/app";
 import { useCourseStore } from "@/stores/course";
@@ -498,6 +519,7 @@ async function loadPhysicalFitness() {
 
   try {
     physicalFitnessItems.value = await fetchPhysicalFitness(userID);
+    updateTodayTimeString();
   } catch (error) {
     physicalFitnessError.value = getApiErrorMessage(
       error,
@@ -539,6 +561,7 @@ async function handleGeneratePhysicalFitness() {
   try {
     const response = await generatePhysicalFitness(userID);
     generateResult.value = response.message;
+    updateTodayTimeString();
 
     if (response.message === "評級完成") {
       await courseStore.loadGroup(true);
@@ -560,7 +583,7 @@ watch([() => store.isLoggedIn, () => store.userID], loadPhysicalFitness, {
   immediate: true,
 });
 
-const todayTimeString = computed(() => {
+function formatCurrentDateTime() {
   const now = new Date();
   const date = [
     String(now.getMonth() + 1).padStart(2, "0"),
@@ -569,7 +592,13 @@ const todayTimeString = computed(() => {
   const time = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
 
   return `${date} ${time}`;
-});
+}
+
+const todayTimeString = ref(formatCurrentDateTime());
+
+function updateTodayTimeString() {
+  todayTimeString.value = formatCurrentDateTime();
+}
 </script>
 
 <style scoped>
diff --git a/app/citizen-frontend/src/pages/login.vue b/app/citizen-frontend/src/pages/login.vue
index 653bead..78c7091 100644
--- a/app/citizen-frontend/src/pages/login.vue
+++ b/app/citizen-frontend/src/pages/login.vue
@@ -50,7 +50,6 @@
                 color="primary"
                 hide-details="auto"
                 label="登入密碼"
-                placeholder="例如: 00000000"
                 prepend-inner-icon="mdi-lock-outline"
                 required
                 rounded="lg"
@@ -79,6 +78,7 @@
               </v-btn>
 
               <v-btn
+                v-if="SELF_ASSESSMENT_ENABLED"
                 block
                 class="rounded-lg font-weight-bold"
                 color="primary"
@@ -143,6 +143,7 @@ import {
   isUnregisteredPhoneError,
 } from "@/utils/api-error";
 import { readGuestSelfAssessmentDraft } from "@/utils/guest-self-assessment";
+import { SELF_ASSESSMENT_ENABLED } from "@/config/features";
 
 const store = useAppStore();
 const router = useRouter();
diff --git a/app/citizen-frontend/src/pages/register.vue b/app/citizen-frontend/src/pages/register.vue
index edf06e0..50bd784 100644
--- a/app/citizen-frontend/src/pages/register.vue
+++ b/app/citizen-frontend/src/pages/register.vue
@@ -9,9 +9,6 @@
               <v-card-title class="text-primary font-weight-bold">
                 建立帳號
               </v-card-title>
-              <v-card-subtitle class="text-primary">
-                完成註冊後即可保存自評並進行預約
-              </v-card-subtitle>
             </div>
           </v-card>
 
@@ -36,7 +33,6 @@
                   hint="手機門號註冊後不可由個人資料修改"
                   label="手機號碼"
                   persistent-hint
-                  :readonly="Boolean(form.phone)"
                   type="tel"
                   variant="outlined"
                 />