From 2510d030939733a79baba4bf15ff0850714ab067 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 8 May 2026 17:46:27 +0200
Subject: [PATCH] fix(frontend): retheme dashboard gauges to AD-Vue blue and
 shrink them

- StatusCard's CPU/RAM/Swap/Storage dashboards rendered at AD-Vue's
  default 120px width which made the percent text balloon to ~36px.
  Drop to 90px (70px on mobile) so the gauge fits the rest of the card.
- The CurTotal.color thresholds still hardcoded the legacy teal/orange
  palette (#008771 / #f37b24 / #cf3c3c). Switch to AD-Vue's primary /
  warning / danger tokens (#1677ff / #faad14 / #ff4d4f) so the gauges
  match the rest of the panel under both light and dark themes.
- XrayStatusCard's running-animation badge ring also still pointed at
  the deleted --color-primary-100 var; hardcode the new primary blue.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/models/status.js               |  8 +++++---
 frontend/src/pages/index/StatusCard.vue     | 16 +++++++++++-----
 frontend/src/pages/index/XrayStatusCard.vue |  2 +-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend/src/models/status.js b/frontend/src/models/status.js
index 5d2c671f..5bfa63b0 100644
--- a/frontend/src/models/status.js
+++ b/frontend/src/models/status.js
@@ -12,10 +12,12 @@ export class CurTotal {
   }
 
   get color() {
+    // Match AD-Vue 4's semantic palette so the gauges fit the
+    // global blue/gold/red theme instead of the legacy teal/orange.
     const p = this.percent;
-    if (p < 80) return '#008771'; // green
-    if (p < 90) return '#f37b24'; // orange
-    return '#cf3c3c';            // red
+    if (p < 80) return '#1677ff'; // primary
+    if (p < 90) return '#faad14'; // warning
+    return '#ff4d4f';             // danger
   }
 }
 
diff --git a/frontend/src/pages/index/StatusCard.vue b/frontend/src/pages/index/StatusCard.vue
index 608a296f..9865d5ba 100644
--- a/frontend/src/pages/index/StatusCard.vue
+++ b/frontend/src/pages/index/StatusCard.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { AreaChartOutlined, HistoryOutlined } from '@ant-design/icons-vue';
 
@@ -6,12 +7,17 @@ import { CPUFormatter, SizeFormatter } from '@/utils';
 
 const { t } = useI18n();
 
-defineProps({
+const props = defineProps({
   status: { type: Object, required: true },
   isMobile: { type: Boolean, default: false },
 });
 
 defineEmits(['open-cpu-history']);
+
+// AD-Vue's default 120px dashboard renders the percent text at ~36px
+// which dwarfs the rest of the card. 90 (or 70 on mobile) keeps the
+// proportions sane against the surrounding labels.
+const gaugeSize = computed(() => (props.isMobile ? 70 : 90));
 </script>
 
 <template>
@@ -22,7 +28,7 @@ defineEmits(['open-cpu-history']);
         <a-row>
           <a-col :span="12" class="text-center">
             <a-progress type="dashboard" status="normal" :stroke-color="status.cpu.color"
-              :percent="status.cpu.percent" />
+              :percent="status.cpu.percent" :width="gaugeSize" />
             <div>
               <b>{{ t('pages.index.cpu') }}:</b> {{ CPUFormatter.cpuCoreFormat(status.cpuCores) }}
               <a-tooltip>
@@ -46,7 +52,7 @@ defineEmits(['open-cpu-history']);
 
           <a-col :span="12" class="text-center">
             <a-progress type="dashboard" status="normal" :stroke-color="status.mem.color"
-              :percent="status.mem.percent" />
+              :percent="status.mem.percent" :width="gaugeSize" />
             <div>
               <b>{{ t('pages.index.memory') }}:</b> {{ SizeFormatter.sizeFormat(status.mem.current) }} /
               {{ SizeFormatter.sizeFormat(status.mem.total) }}
@@ -60,7 +66,7 @@ defineEmits(['open-cpu-history']);
         <a-row>
           <a-col :span="12" class="text-center">
             <a-progress type="dashboard" status="normal" :stroke-color="status.swap.color"
-              :percent="status.swap.percent" />
+              :percent="status.swap.percent" :width="gaugeSize" />
             <div>
               <b>{{ t('pages.index.swap') }}:</b> {{ SizeFormatter.sizeFormat(status.swap.current) }} /
               {{ SizeFormatter.sizeFormat(status.swap.total) }}
@@ -69,7 +75,7 @@ defineEmits(['open-cpu-history']);
 
           <a-col :span="12" class="text-center">
             <a-progress type="dashboard" status="normal" :stroke-color="status.disk.color"
-              :percent="status.disk.percent" />
+              :percent="status.disk.percent" :width="gaugeSize" />
             <div>
               <b>{{ t('pages.index.storage') }}:</b> {{ SizeFormatter.sizeFormat(status.disk.current) }} /
               {{ SizeFormatter.sizeFormat(status.disk.total) }}
diff --git a/frontend/src/pages/index/XrayStatusCard.vue b/frontend/src/pages/index/XrayStatusCard.vue
index 9ca53551..4a0c182d 100644
--- a/frontend/src/pages/index/XrayStatusCard.vue
+++ b/frontend/src/pages/index/XrayStatusCard.vue
@@ -116,7 +116,7 @@ function badgeAnimationClass(color) {
 }
 
 .xray-running-animation .ant-badge-status-processing::after {
-  border-color: var(--color-primary-100, #008771);
+  border-color: #1677ff;
 }
 
 .xray-stop-animation .ant-badge-status-processing::after {