From d9c2854911ffae4832ea41fe3c336efcd8f302c0 Mon Sep 17 00:00:00 2001
From: mofeng-git <mofeng654321@hotmail.com>
Date: Tue, 7 Jul 2026 22:08:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=BD=91=E9=A1=B5=20?=
 =?UTF-8?q?ATX=20=E6=8E=A7=E4=BB=B6=E4=B8=AD=E7=9A=84=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/AtxPopover.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/web/src/components/AtxPopover.vue b/web/src/components/AtxPopover.vue
index 8345fbdd..37bcbaca 100644
--- a/web/src/components/AtxPopover.vue
+++ b/web/src/components/AtxPopover.vue
@@ -52,6 +52,13 @@ const powerStateIconColor = computed(() => {
   }
 })
 
+const powerStateTextColor = computed(() => {
+  switch (powerState.value) {
+    case 'on': return 'text-green-600'
+    default: return ''
+  }
+})
+
 const powerStateText = computed(() => {
   switch (powerState.value) {
     case 'on': return t('atx.stateOn')
@@ -62,12 +69,19 @@ const powerStateText = computed(() => {
 
 const hddStateIconColor = computed(() => {
   switch (hddState.value) {
-    case 'active': return 'text-sky-600'
+    case 'active': return 'text-green-600'
     case 'inactive': return 'text-slate-500'
     default: return 'text-yellow-600'
   }
 })
 
+const hddStateTextColor = computed(() => {
+  switch (hddState.value) {
+    case 'active': return 'text-green-600'
+    default: return ''
+  }
+})
+
 const hddStateText = computed(() => {
   switch (hddState.value) {
     case 'active': return t('atx.hddActive')
@@ -205,14 +219,14 @@ watch(
             <Power :class="['h-4 w-4 shrink-0', powerStateIconColor]" />
             <div class="min-w-0">
               <p class="truncate text-[11px] leading-none text-muted-foreground">{{ t('atx.powerState') }}</p>
-              <p class="mt-1 truncate text-xs font-medium leading-none">{{ powerStateText }}</p>
+              <p :class="['mt-1 truncate text-xs font-medium leading-none', powerStateTextColor]">{{ powerStateText }}</p>
             </div>
           </div>
           <div class="flex min-w-0 items-center gap-2 rounded-md border bg-muted/40 px-2 py-1.5">
             <HardDrive :class="['h-4 w-4 shrink-0', hddStateIconColor]" />
             <div class="min-w-0">
               <p class="truncate text-[11px] leading-none text-muted-foreground">{{ t('atx.hddState') }}</p>
-              <p class="mt-1 truncate text-xs font-medium leading-none">{{ hddStateText }}</p>
+              <p :class="['mt-1 truncate text-xs font-medium leading-none', hddStateTextColor]">{{ hddStateText }}</p>
             </div>
           </div>
         </div>