From eb952d31cb8e436de8d0d4c1a75c59b6b908f6ef Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Tue, 23 Jun 2026 09:16:49 +0800
Subject: [PATCH] style: home

---
 app/citizen-frontend/public/favicon.ico       | Bin 15406 -> 0 bytes
 .../src/components/BrandAvatar.vue            |  31 ++++++++++++++
 app/citizen-frontend/src/pages/index.vue      |  40 +++++++++---------
 app/citizen-frontend/src/pages/login.vue      |  18 +-------
 4 files changed, 53 insertions(+), 36 deletions(-)
 delete mode 100644 app/citizen-frontend/public/favicon.ico
 create mode 100644 app/citizen-frontend/src/components/BrandAvatar.vue

diff --git a/app/citizen-frontend/public/favicon.ico b/app/citizen-frontend/public/favicon.ico
deleted file mode 100644
index 8fb9f91b3aab4eec0c76ffc5342528033c61e247..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 15406
zcmeHO3v5%@8NNVarCoU?zSqezmT6npu}xxXJJhY(x=s~hQ>SSYYSncU&|(|9Y?QVX
z@}TB1G8mASM;tRKYgJkrAW)&g7${B%c>oE7;)O>NNO_bu4G-IdNB({Pb<Xw8^|j;J
zP9IaQbaZ@={r}&0{`30JIlm>TkJL{ZGDJe2DLL+vq#sL?l$jZPe_*I2y@|4sBRjso
zUy`aUlJo$60})6B%aMKN&yMG1<zTj~#0%`PD=WP-l$G(wmp-5NV42-|r~YN-j;}EF
z!EWm41KA2B+Uc;;wdHaJu^D50JQJ0tSyrSo^JVh8QlE}dT!P$YA<OxZnF{#}EhosG
zeot3AX!pF7QkycW%w}yDI`+K;d6!H+m+XutPp3D1ooe$NsOrUmkbO(Y?|Q+i$_HGs
z&;R<+;gNJuQ^|W&<0Pue&il`V)O5&S6FROgV;jhHz0k7OOrDxc9z|+b<*Re9Q_ZxD
zGMkbu<S!Kj<)Ne9@3uUu*Fog$3)xyEqP_XR&tVR0JmWI&h8>Qvjth%4dDy{HM^34)
z&_TyGJg3UC{J|n2-wr)LDYwhNWBH4VL-JgYz;erTEKiMF20`|$Cf~GysBU40j@&)u
zboK>@(yL25%R|RmS~6@99bG>PviV`j>&k~M@~J%cn{`uCzUOyY^23rlWt6DH=aut3
zlZo^g63<V)Px39mb5D2XpJX%e*yU#rzA8VPY`wAQ+xAE0UaSMBK6+I-MQ<zj#v+r<
z-;~>xIXwP(4)hgT<|I>hSGqh7YbLP$jL+%p0>vM2Su?wmOV;-uyLFww=KN5Ox{j<%
zmi}mZc22bZyxbmI!x+Ch3+qsk+#YbHJ{C<j(eH}KO8v_0%6@&_#b;iJu#VPKF`Tj<
zddh6FP2d^x<FmE3+};!Lo^eBlV7)qT#1-!crUmh_ex0WR_DYlc!0z(|mRY`QGR7g+
zUtWXZ6BQ&EU6RTsTF02->dQjDh~;LRJB63Pq&~p<P>*N){PEn7FA;EAwj=|b_AUGw
z{Eb1Zt8`N8chL?vjkw~yAvg~N+W_qV|N7U7a3HGfPY0GBqUxOaLJzPO2|Qz7H&yF{
z!Y@7SbxH$-Y<F|`UN6%A#q6`)psMNLX8Bs%(7~90&Ka@!UHHRlAJqDyJhi*H{CjFF
zwgCTAs{MP=XROTrK<FurG7kuUT5y0*+j`BV$U-*OoSHVcflst&Zimkb-?=9H36_sG
z4_+|%!^{KYaz(7T{5v|jaU>lpxgCaImE$Fk6T4dUMU!=a+u##*PZb&m9d@{VbA<&v
z;n*Hvm#Nt5zF}Ud{=9#v%+3;8${f~WV?Q`CFATe5JXp$wT(q1TOU7#0jK6PDXZ)(1
zOSF4N3hStRA?+K$*ZctH(lRF!KFSL%W20hM6%Rz+k9We?_C36J>PVG2%Y`27X;nW+
z*x`6oe7S`dXABgw#vFYvuM;-c|L9ua=7z9?9B!c<e!%kV2Lk(~z;Dsbfnp5kbM(bL
zBQC#F<Aw}s-f%q(pE>L=Fyiz34xz{6kpCd?PeyG2V7mkg<?H?>!!m@d$btKgDK_Ib
zt|Qt#$Am-fZ&{xA0GOAnn8Ue+QQBY3NiO*vfvd{5lsp3L_K5f@hhj{}^Nk#us4?p+
ztOM)g!<ZNEnCxe@^+4AS?eNzgQL(WP2JW7y*o-gIp?_gaEQUR13og@H4?lHN<<&Y2
zGhAJn1$%I*FYm)?|LP%eCy(>1L3Ff(Tk8KQe4khoQS4_&0;4zo|FQr(iM%k4L+U*z
zff0J2FQWxM*K?>u4d$6_8R>l`cK<L@ykyF&XW4e^)&tY5TWNLX-O1G5)4F*5!#Ubh
z@LO7|vy|3LuPaY|nbt&)Ej<-?5!=}B;=Lby|7};@>8U+!w`A!D@A2^2+L%A~GSv8*
z(uV!wgk<UONj;SgMF#IPDtG3ORR4-X*#Dl1XTRH%T#dTDW2FJ`*H`Gd^XE$Rq07N@
z#1%M4jQiZeh?nel+}}PC=`8TX-}u}|K7XS~R?iBOjh(2zT@zC8E3>D)YqY(1-;X}j
zv4?n<R;AvTC|<JV(Qlqax+3@*^PQ8d#CtH@$zJglDNiOFKM{Q$Yt?^^oQ>}%=LOp!
z;8GgCC~I2q%*#5{$kpuKJ6-ET<XbK~d-6^o*7o4I2h8;!oAEW4)%-Qshl1n4aw3j6
ziCAgH^t-CD83W60)}`Qi$H>*}o#)Z>p>vQsxF25{?c6CQ5()gsGtn{<JTI7WH7nyW
z+%i|!hYID3zU3(oCqN+~(b9?XXz=uzag9`VI9K6yK+L6l2K;YYBB^IZ36Y6IxMI@q
zp&onMrbt}P$~$}sjX%c1ZHxn39PmjIDW9bL20SmDaWyNe`HMoWZ-ngMF_xP?t9xQK
z_GZfxt-Uwf((fsEC~M5Pnw4>Ul`*ykb!bDMnnlGUdfYdn+9lsY%+pJ_Z_xHs+imH?
z!L`+luUT1yv*4C1Z&<#Qlui*r2~lxBI`sAm+}oX{s=OcRf9A0%Q^56>8DC==kKtgy
z>D-TeE@f3uu4&Y?ZVVlM3wLg~Z>Y}xfNE|1MIAijELQN`Y2<45F5=t5>wtYuk>yuH
zXEJj-vN;uZD0|537U$Eq5Oek?f#JlNGq{dN(qiDuxO185eWG@Tuk1zKUsCs)MAVm#
zZTvIN+Wl0&MDXYQF#3{qXA$(Ft>uw;>&qkE2f#n|`-?1D`gl8Gqj+=j77qvaV7#CH
z-mDV$x0TsBRP5B|jZ%mFQ}FDv4Rn5l$yl(|`Q7Oe;~u+P58Qvv*6uy)7U=EIpPM-5
zPv}(pkwc!Zx3$@4;Y){)0d<dX8|^S#=u9N1#!Vx@J)qswgx?jR4!O&CT@W}GJfGUE
z4Q9MWS@SIOIY`teP$UQ1mJR#9&>2tO5v#db<IZ<Yb^kEhpWg!*%fA#D9;b8{eCn6M
zH6ZvJ^TT=3`K$FPvTVNW9y(a)?QV{H%V)s-YA62Ycb2%n&Z(w~>4**wJ~;d2`ShTX
zw|GaKwMoD4ydIzqSN(;l&j_8}$q^eYga7tU+}Zvgxy<a(Wj@4%IQ0E!rz7q6;A<L}
zg80B#`15{wdpzex7_)Y8Zwuqk_mtwkJUrix@4hDN#CuD`)U6dZ*XQhqioV`O&c2aD
z=!_+&;~!eV`&<}zw*S%h5brU|ybhJww|PF*V{Er6Kg3wp?%_op>O*m1UDkuojePFZ
zG`-$PpE1`DpyrLMO}R7wCfu3t6Y<u%*o9DA_^4vW{X)OjIbuM$BP}1iJNZVj_8-wU
z=trvwx`f_HIW?{yjlO>|B7d%f_n+{8^32;HSdS9&hVGwt*sUYr-!%%`a~|XP)!GJa
zaPfvq9vz7{ms4}`U~qpQ+@r?~G$CeSuOWUWWPj8xrxoKsi%ALkMoN~Re@yeI<`b#&
zQakqh?^Bfdlv*~90r${a#kP)=j;z5r;Qua|_8~6ciamnnhpFd84r{fjgNVx%{UgRa
z5XnEKlf}cZ&elidYgP}Qi}Z0^o$C^y%G~k#_Qp8=1^BDy6=xQN&GlMeiCUK;x&F$^
zjA44c!M?-)Y1kOO--Oix|DE7=F!d?WE|oc-P;ICUYO&YsIA3qS68`^+SoxzLDfxQ-
z)V%&7_{XQaWqV^?8s0=b5Yxwfs(L2+kBDu`F4FIF*gxGfML8AK#-01US-npCiqalZ
z?M~DOWA<^ZR|~P;79^A!*A-C1sshAC6<~Z9P|a%vs7IcNOJh792S@Vc$sCItcXG)K
z1Fn?E#hswKujQD~WT#qpf3`ix0(EL{#By^?PeQ2&<H7Y@dq4MDpw|Mu7Kmhl{{gYD
Bh2#JL

diff --git a/app/citizen-frontend/src/components/BrandAvatar.vue b/app/citizen-frontend/src/components/BrandAvatar.vue
new file mode 100644
index 0000000..6576f7d
--- /dev/null
+++ b/app/citizen-frontend/src/components/BrandAvatar.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  size?: number | string
+  iconSize?: number | string
+}>(), {
+  size: 80,
+  iconSize: 48,
+})
+</script>
+
+<template>
+  <v-avatar class="brand-avatar-spin" color="primary" :size="size">
+    <v-icon color="red-accent-1" icon="mdi-heart-pulse" :size="iconSize" />
+  </v-avatar>
+</template>
+
+<style scoped>
+.brand-avatar-spin {
+  animation: brand-avatar-spin 0.9s ease-out both;
+}
+
+@keyframes brand-avatar-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/app/citizen-frontend/src/pages/index.vue b/app/citizen-frontend/src/pages/index.vue
index ffa5d47..0678f03 100644
--- a/app/citizen-frontend/src/pages/index.vue
+++ b/app/citizen-frontend/src/pages/index.vue
@@ -130,7 +130,9 @@
                     <v-icon color="secondary" icon="mdi-numeric-1-circle" size="24" />
                   </template>
 
-                  <v-list-item-title class="font-weight-bold">下肢肌力：坐站起立訓練</v-list-item-title>
+                  <v-list-item-title class="font-weight-bold"
+                    >下肢肌力：坐站起立訓練</v-list-item-title
+                  >
 
                   <v-list-item-subtitle class="text-caption mt-1">
                     每週 2 次，每次 3 組，每組 10-12 次。<br />
@@ -143,7 +145,9 @@
                     <v-icon color="secondary" icon="mdi-numeric-2-circle" size="24" />
                   </template>
 
-                  <v-list-item-title class="font-weight-bold">靜態平衡：扶椅單腳站立</v-list-item-title>
+                  <v-list-item-title class="font-weight-bold"
+                    >靜態平衡：扶椅單腳站立</v-list-item-title
+                  >
 
                   <v-list-item-subtitle class="text-caption mt-1">
                     每週 3 次，左右腳各 30 秒，重複 3 次。<br />
@@ -172,7 +176,8 @@
                 color="primary"
                 variant="flat"
                 @click="prescriptionDialog = false"
-              >確認關閉</v-btn>
+                >確認關閉</v-btn
+              >
             </v-card-actions>
           </v-card>
         </v-dialog>
@@ -180,25 +185,23 @@
 
       <template v-else>
         <div class="text-center mb-6">
-          <v-avatar class="elevation-3 mb-4 border-accent-light" color="primary" size="72">
-            <v-icon color="red-accent-1" icon="mdi-heart-pulse" size="42" />
-          </v-avatar>
+          <BrandAvatar class="elevation-3 mb-4" :icon-size="42" :size="72" />
 
           <p class="text-body-medium text-grey-darken-1 mb-0">
             不登入也可以先完成線上健康自評，<br />登入後可預約普測與查看量測紀錄。
           </p>
         </div>
 
-        <v-card class="rounded-xl elevation-2 border-accent-light mb-4" color="surface">
-          <v-card-text class="pa-5">
+        <v-card class="rounded-xl elevation-2 mb-4" color="surface">
+          <v-card-text>
             <div class="d-flex align-center mb-4">
-              <v-avatar class="mr-3 text-white" color="secondary" size="48">
+              <v-avatar class="mr-3 text-white" color="accent" size="36">
                 <v-icon icon="mdi-clipboard-text-outline" />
               </v-avatar>
 
               <div class="text-left">
-                <div class="text-subtitle-1 font-weight-black text-primary">先做線上健康自評</div>
-                <div class="text-caption text-grey">約 3 分鐘完成，取得初步健康風險分級。</div>
+                <div class="text-title-medium font-weight-bold text-primary">先做線上健康自評</div>
+                <div class="text-title-small text-grey">約 3 分鐘完成，取得初步健康風險分級。</div>
               </div>
             </div>
 
@@ -226,14 +229,14 @@
           </v-card-text>
         </v-card>
 
-        <v-card class="rounded-xl elevation-1 border-accent-light" color="surface">
+        <v-card color="surface" variant="flat">
           <v-card-text class="pa-4 d-flex align-center text-left">
             <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-caption text-grey">
+              <div class="text-title-small text-grey">
                 普測預約、現場報到、量測紀錄與運動處方需要登入狀態。
               </div>
             </div>
@@ -246,6 +249,7 @@
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import BrandAvatar from '@/components/BrandAvatar.vue'
 import HealthRadarChart from '@/components/HealthRadarChart.vue'
 import Layout from '@/components/layout/DefaultLayout.vue'
 import ModuleRouterCard from '@/components/ModuleRouterCard.vue'
@@ -256,7 +260,7 @@ const prescriptionDialog = ref(false)
 const displayedHealthScore = ref(1)
 let healthScoreTimer: number | undefined
 
-function animateHealthScore (targetScore: number) {
+function animateHealthScore(targetScore: number) {
   if (healthScoreTimer !== undefined) {
     window.clearInterval(healthScoreTimer)
   }
@@ -294,9 +298,9 @@ onBeforeUnmount(() => {
 
 watch(
   () => store.healthScore,
-  score => {
+  (score) => {
     animateHealthScore(score)
-  },
+  }
 )
 
 const todayTimeString = computed(() => {
@@ -395,10 +399,6 @@ const currentWeeklyPrescription = computed(() => {
   color: rgba(255, 255, 255, 0.8);
 }
 
-.border-accent-light {
-  border: 1px solid rgba(71, 194, 166, 0.2) !important;
-}
-
 .transition-card {
   transition: all 0.25s ease;
   border: 1px solid rgba(0, 0, 0, 0.08);
diff --git a/app/citizen-frontend/src/pages/login.vue b/app/citizen-frontend/src/pages/login.vue
index 6df589e..370a2b5 100644
--- a/app/citizen-frontend/src/pages/login.vue
+++ b/app/citizen-frontend/src/pages/login.vue
@@ -5,9 +5,7 @@
         <v-col class="text-center" cols="12" sm="6">
           <!-- Logo 與品牌名稱 -->
           <v-card class="bg-transparent" variant="flat">
-            <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>
+            <BrandAvatar />
 
             <v-card-title class="text-primary font-weight-bold">運動玩轉健康力</v-card-title>
             <v-card-subtitle class="text-primary">Taipei Masters Hub</v-card-subtitle>
@@ -110,6 +108,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import BrandAvatar from '@/components/BrandAvatar.vue'
 import { useAppStore } from '@/stores/app'
 
 const store = useAppStore()
@@ -141,10 +140,6 @@ function _handleLineLogin () {
 </script>
 
 <style scoped>
-.logo-spin-on-load {
-  animation: logo-spin 0.9s ease-out both;
-}
-
 .glow-sweep-button {
   overflow: hidden;
   position: relative;
@@ -181,13 +176,4 @@ function _handleLineLogin () {
   }
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
 </style>