From 083d5d978bb011113dacfde6c693a06bd3148ac0 Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Mon, 22 Jun 2026 14:31:01 +0800
Subject: [PATCH] restyle: layout not login

---
 .../src/components/layout/DefaultLayout.vue   | 177 ++++++------------
 app/citizen-frontend/src/pages/login.vue      |  70 +++++--
 2 files changed, 115 insertions(+), 132 deletions(-)

diff --git a/app/citizen-frontend/src/components/layout/DefaultLayout.vue b/app/citizen-frontend/src/components/layout/DefaultLayout.vue
index 05e004f..625420e 100644
--- a/app/citizen-frontend/src/components/layout/DefaultLayout.vue
+++ b/app/citizen-frontend/src/components/layout/DefaultLayout.vue
@@ -1,17 +1,12 @@
 <template>
-  <v-app :class="{ 'large-text-mode': isLargeText, 'high-contrast-mode': isHighContrast }">
+  <v-app :class="{ 'large-text-mode': isLargeText }">
     <!-- 頂部導航欄 -->
     <v-app-bar class="px-2 elevation-1" color="primary" flat>
       <template #prepend>
         <v-app-bar-nav-icon variant="text" @click="drawer = !drawer" />
       </template>
 
-      <v-app-bar-title class="font-weight-bold flex-grow-1">
-        <div class="d-flex align-center">
-          <v-icon class="mr-2 text-accent" icon="mdi-heart-pulse" />
-          <span class="text-subtitle-1 text-sm-h6 font-weight-bold">運動玩轉健康力</span>
-        </div>
-      </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">
@@ -38,18 +33,6 @@
               store.userProfile.name.substring(1)
             }}</span>
           </v-avatar>
-
-          <v-btn
-            v-else
-            class="font-weight-bold"
-            color="accent"
-            prepend-icon="mdi-login"
-            size="small"
-            to="/login"
-            variant="flat"
-          >
-            登入
-          </v-btn>
         </div>
       </template>
     </v-app-bar>
@@ -65,7 +48,9 @@
           </v-avatar>
         </template>
 
-        <v-list-item-title class="font-weight-bold">{{ store.userProfile.name }} 先生</v-list-item-title>
+        <v-list-item-title class="font-weight-bold">
+          {{ store.userProfile.name }} 先生
+        </v-list-item-title>
 
         <v-list-item-subtitle class="text-white-50">{{
           store.userProfile.phone
@@ -79,16 +64,11 @@
           </v-avatar>
         </template>
 
-        <v-list-item-title class="font-weight-bold">運動玩轉健康力</v-list-item-title>
-
         <v-list-item-subtitle class="text-white-50">未登入訪客</v-list-item-subtitle>
       </v-list-item>
 
       <v-divider />
 
-      <!-- 高齡與無障礙設定區 -->
-      <v-list-subheader class="font-weight-bold text-primary">高齡友善設定</v-list-subheader>
-
       <v-list-item>
         <template #prepend>
           <v-icon color="primary" icon="mdi-format-size" />
@@ -101,23 +81,12 @@
         </template>
       </v-list-item>
 
-      <v-list-item>
-        <template #prepend>
-          <v-icon color="primary" icon="mdi-contrast-box" />
-        </template>
-
-        <v-list-item-title>高對比模式</v-list-item-title>
-
-        <template #append>
-          <v-switch v-model="isHighContrast" color="secondary" density="compact" hide-details />
-        </template>
-      </v-list-item>
-
       <v-divider class="my-2" />
 
       <!-- 主要功能連結 -->
-      <v-list density="compact" nav>
+      <v-list density="comfortable" nav>
         <v-list-item
+          class="py-2"
           color="primary"
           exact
           prepend-icon="mdi-view-dashboard"
@@ -185,7 +154,7 @@
           <v-btn
             v-else
             block
-            color="primary"
+            color="secondary"
             prepend-icon="mdi-login"
             to="/login"
             variant="flat"
@@ -205,31 +174,25 @@
     </v-main>
 
     <!-- 底部導航欄 (Mobile First 核心) -->
-    <v-bottom-navigation
-      v-model="activeTab"
-      class="elevation-8 border-top"
-      color="primary"
-      grow
-      style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000"
-    >
+    <v-bottom-navigation v-model="activeTab" color="primary" tag="div" grow>
       <v-btn to="/" value="home">
-        <v-icon>mdi-view-dashboard</v-icon>
-        <span>主控台</span>
+        <v-icon color="secondary">mdi-view-dashboard</v-icon>
+        <span class="bottom-nav-text">主控台</span>
       </v-btn>
 
       <v-btn to="/self-assessment" value="self-assessment">
-        <v-icon>mdi-clipboard-text-search</v-icon>
-        <span>線上自評</span>
+        <v-icon color="secondary">mdi-clipboard-text-search</v-icon>
+        <span class="bottom-nav-text">線上自評</span>
       </v-btn>
 
       <v-btn v-if="store.isLoggedIn" to="/appointment" value="appointment">
-        <v-icon>mdi-calendar-check</v-icon>
-        <span>活動預約</span>
+        <v-icon color="secondary">mdi-calendar-check</v-icon>
+        <span class="bottom-nav-text">活動預約</span>
       </v-btn>
 
       <v-btn v-if="store.isLoggedIn" to="/checkin" value="checkin">
-        <v-icon>mdi-qrcode-scan</v-icon>
-        <span>現場量測</span>
+        <v-icon color="secondary">mdi-qrcode-scan</v-icon>
+        <span class="bottom-nav-text">現場量測</span>
       </v-btn>
     </v-bottom-navigation>
 
@@ -263,7 +226,9 @@
             color="primary"
             variant="flat"
             @click="showPrivacy = false"
-          >確認關閉</v-btn>
+          >
+            確認關閉
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -301,7 +266,9 @@
             color="primary"
             variant="flat"
             @click="showEmergency = false"
-          >儲存並關閉</v-btn>
+          >
+            儲存並關閉
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -309,48 +276,43 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch } from 'vue'
-  import { useRoute, useRouter } from 'vue-router'
-  import { useAppStore } from '@/stores/app'
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAppStore } from '@/stores/app'
 
-  const store = useAppStore()
-  const router = useRouter()
-  const route = useRoute()
+const store = useAppStore()
+const router = useRouter()
+const route = useRoute()
 
-  const drawer = ref(false)
-  const activeTab = ref('home')
-  const showPrivacy = ref(false)
-  const showEmergency = ref(false)
+const drawer = ref(false)
+const activeTab = ref('home')
+const showPrivacy = ref(false)
+const showEmergency = ref(false)
 
-  // 無障礙狀態 (可持久化儲存於 localStorage)
-  const isLargeText = ref(localStorage.getItem('mode-large-text') === 'true')
-  const isHighContrast = ref(localStorage.getItem('mode-high-contrast') === 'true')
+// 無障礙狀態 (可持久化儲存於 localStorage)
+const isLargeText = ref(localStorage.getItem('mode-large-text') === 'true')
 
-  watch(isLargeText, newVal => {
-    localStorage.setItem('mode-large-text', String(newVal))
-  })
+watch(isLargeText, (newVal) => {
+  localStorage.setItem('mode-large-text', String(newVal))
+})
 
-  watch(isHighContrast, newVal => {
-    localStorage.setItem('mode-high-contrast', 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'
+  },
+  { immediate: true }
+)
 
-  // 同步底部導航狀態與當前路由
-  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'
-    },
-    { immediate: true },
-  )
-
-  function handleLogout () {
-    store.logout()
-    router.push('/login')
-    drawer.value = false
-  }
+function handleLogout() {
+  store.logout()
+  router.push('/login')
+  drawer.value = false
+}
 </script>
 
 <style lang="scss">
@@ -369,6 +331,7 @@
   .v-card-title,
   .text-subtitle-1 {
     font-size: 1.25rem !important;
+    line-height: unset !important;
   }
   .v-card-text,
   .text-body-1,
@@ -382,35 +345,9 @@
   .text-h6 {
     font-size: 1.5rem !important;
   }
-}
 
-// 高對比模式
-.high-contrast-mode {
-  --v-theme-background: #000000 !important;
-  --v-theme-surface: #121212 !important;
-  --v-theme-primary: #ffeb3b !important; // 明亮黃色作為主色
-  --v-theme-accent: #00e676 !important;
-  --v-theme-secondary: #ff9100 !important;
-
-  // 文字高對比
-  .text-primary,
-  .v-list-item-title,
-  .v-btn,
-  .v-card-title,
-  .v-app-bar-title,
-  span,
-  p,
-  div {
-    color: #ffffff !important;
-  }
-
-  .v-app-bar {
-    border-bottom: 2px solid #ffeb3b !important;
-  }
-
-  .v-bottom-navigation {
-    border-top: 2px solid #ffeb3b !important;
-    background-color: #121212 !important;
+  .bottom-nav-text {
+    font-size: 1rem;
   }
 }
 
diff --git a/app/citizen-frontend/src/pages/login.vue b/app/citizen-frontend/src/pages/login.vue
index e5befc2..2fbf90c 100644
--- a/app/citizen-frontend/src/pages/login.vue
+++ b/app/citizen-frontend/src/pages/login.vue
@@ -1,16 +1,16 @@
 <template>
-  <v-app class="bg-gradient">
+  <v-app class="bg-background">
     <v-container>
       <v-row justify="center" no-gutters>
         <v-col class="text-center" cols="12" sm="6">
           <!-- Logo 與品牌名稱 -->
           <v-card class="bg-transparent" variant="flat">
-            <v-avatar class="" color="primary" size="80">
-              <v-icon color="accent" icon="mdi-heart-pulse" size="48" />
+            <v-avatar class="logo-spin-on-load" color="primary" size="80">
+              <v-icon color="red-accent-1" icon="mdi-heart-pulse" size="48" />
             </v-avatar>
 
-            <v-card-title>運動玩轉健康力</v-card-title>
-            <v-card-subtitle>Taipei Masters Hub</v-card-subtitle>
+            <v-card-title class="text-primary font-weight-bold">運動玩轉健康力</v-card-title>
+            <v-card-subtitle class="text-primary">Taipei Masters Hub</v-card-subtitle>
           </v-card>
 
           <!-- 登入卡片 -->
@@ -47,8 +47,8 @@
 
               <v-btn
                 block
-                class="rounded-lg font-weight-bold elevation-2 mb-4 text-button"
-                color="primary"
+                class="glow-sweep-button rounded-lg font-weight-bold elevation-2 mb-4"
+                color="secondary"
                 :loading="loading"
                 size="large"
                 type="submit"
@@ -89,7 +89,7 @@
           </v-card>
 
           <!-- 版權 -->
-          <div class="mt-8 text-caption text-grey-darken-1">
+          <div class="mt-8 text-body-small text-grey-darken-1">
             <p>© 2026 SKYTEK</p>
           </div>
         </v-col>
@@ -111,7 +111,7 @@ const password = ref('')
 const loading = ref(false)
 const lineLoading = ref(false)
 
-function handleLogin() {
+function handleLogin () {
   if (!account.value) return
   loading.value = true
   setTimeout(() => {
@@ -121,7 +121,7 @@ function handleLogin() {
   }, 1000)
 }
 
-function handleLineLogin() {
+function _handleLineLogin () {
   lineLoading.value = true
   setTimeout(() => {
     store.login('0912-345-678') // LINE 模擬登入預設手機
@@ -132,7 +132,53 @@ function handleLineLogin() {
 </script>
 
 <style scoped>
-.bg-gradient {
-  background: linear-gradient(135deg, #f0f9f6 0%, #dcefea 100%) !important;
+.logo-spin-on-load {
+  animation: logo-spin 0.9s ease-out both;
+}
+
+.glow-sweep-button {
+  overflow: hidden;
+  position: relative;
+}
+
+.glow-sweep-button::after {
+  position: absolute;
+  top: -50%;
+  left: -70%;
+  width: 45%;
+  height: 200%;
+  background: linear-gradient(
+    120deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.15) 35%,
+    rgba(255, 255, 255, 0.75) 50%,
+    rgba(255, 255, 255, 0.15) 65%,
+    transparent 100%
+  );
+  content: "";
+  transform: rotate(18deg);
+  animation: glow-sweep 2.4s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes glow-sweep {
+  0% {
+    left: -70%;
+  }
+
+  45%,
+  100% {
+    left: 125%;
+  }
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>