restyle: layout not login

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