fix(frontend): shrink dashboard percent text and surface the unfinished arc

Two follow-up tweaks to the dashboard gauges:
- AD-Vue scales the percent text from the SVG, not from :width, so
  the 90px gauges still rendered the number at ~27px. Pin
  .ant-progress-text to 14px via :deep() and trim the gauge to 70px
  (60px on mobile) so the whole card stays compact.
- The default trail (rgba(0,0,0,0.06) / rgba(255,255,255,0.08)) was
  invisible on the light-theme card. Pass an explicit
  rgba(128,128,128,0.25) trail-color so the unfinished portion is
  visible under both light and dark themes.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MHSanaei 2026-05-08 18:42:10 +02:00
parent 693b9f9736
commit 440e3208a9
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A

View file

@ -15,9 +15,14 @@ const props = defineProps({
defineEmits(['open-cpu-history']); defineEmits(['open-cpu-history']);
// AD-Vue's default 120px dashboard renders the percent text at ~36px // 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 // which dwarfs the rest of the card. 70 (60 on mobile) plus the
// proportions sane against the surrounding labels. // :deep(.ant-progress-text) override below keep the gauges compact.
const gaugeSize = computed(() => (props.isMobile ? 70 : 90)); const gaugeSize = computed(() => (props.isMobile ? 60 : 70));
// AD-Vue's default unfinished trail (rgba(0,0,0,0.06) /
// rgba(255,255,255,0.08)) is invisible against the light card; a
// neutral mid-gray reads on both themes.
const trailColor = 'rgba(128, 128, 128, 0.25)';
</script> </script>
<template> <template>
@ -28,7 +33,7 @@ const gaugeSize = computed(() => (props.isMobile ? 70 : 90));
<a-row> <a-row>
<a-col :span="12" class="text-center"> <a-col :span="12" class="text-center">
<a-progress type="dashboard" status="normal" :stroke-color="status.cpu.color" <a-progress type="dashboard" status="normal" :stroke-color="status.cpu.color"
:percent="status.cpu.percent" :width="gaugeSize" /> :trail-color="trailColor" :percent="status.cpu.percent" :width="gaugeSize" />
<div> <div>
<b>{{ t('pages.index.cpu') }}:</b> {{ CPUFormatter.cpuCoreFormat(status.cpuCores) }} <b>{{ t('pages.index.cpu') }}:</b> {{ CPUFormatter.cpuCoreFormat(status.cpuCores) }}
<a-tooltip> <a-tooltip>
@ -52,7 +57,7 @@ const gaugeSize = computed(() => (props.isMobile ? 70 : 90));
<a-col :span="12" class="text-center"> <a-col :span="12" class="text-center">
<a-progress type="dashboard" status="normal" :stroke-color="status.mem.color" <a-progress type="dashboard" status="normal" :stroke-color="status.mem.color"
:percent="status.mem.percent" :width="gaugeSize" /> :trail-color="trailColor" :percent="status.mem.percent" :width="gaugeSize" />
<div> <div>
<b>{{ t('pages.index.memory') }}:</b> {{ SizeFormatter.sizeFormat(status.mem.current) }} / <b>{{ t('pages.index.memory') }}:</b> {{ SizeFormatter.sizeFormat(status.mem.current) }} /
{{ SizeFormatter.sizeFormat(status.mem.total) }} {{ SizeFormatter.sizeFormat(status.mem.total) }}
@ -66,7 +71,7 @@ const gaugeSize = computed(() => (props.isMobile ? 70 : 90));
<a-row> <a-row>
<a-col :span="12" class="text-center"> <a-col :span="12" class="text-center">
<a-progress type="dashboard" status="normal" :stroke-color="status.swap.color" <a-progress type="dashboard" status="normal" :stroke-color="status.swap.color"
:percent="status.swap.percent" :width="gaugeSize" /> :trail-color="trailColor" :percent="status.swap.percent" :width="gaugeSize" />
<div> <div>
<b>{{ t('pages.index.swap') }}:</b> {{ SizeFormatter.sizeFormat(status.swap.current) }} / <b>{{ t('pages.index.swap') }}:</b> {{ SizeFormatter.sizeFormat(status.swap.current) }} /
{{ SizeFormatter.sizeFormat(status.swap.total) }} {{ SizeFormatter.sizeFormat(status.swap.total) }}
@ -75,7 +80,7 @@ const gaugeSize = computed(() => (props.isMobile ? 70 : 90));
<a-col :span="12" class="text-center"> <a-col :span="12" class="text-center">
<a-progress type="dashboard" status="normal" :stroke-color="status.disk.color" <a-progress type="dashboard" status="normal" :stroke-color="status.disk.color"
:percent="status.disk.percent" :width="gaugeSize" /> :trail-color="trailColor" :percent="status.disk.percent" :width="gaugeSize" />
<div> <div>
<b>{{ t('pages.index.storage') }}:</b> {{ SizeFormatter.sizeFormat(status.disk.current) }} / <b>{{ t('pages.index.storage') }}:</b> {{ SizeFormatter.sizeFormat(status.disk.current) }} /
{{ SizeFormatter.sizeFormat(status.disk.total) }} {{ SizeFormatter.sizeFormat(status.disk.total) }}
@ -95,4 +100,11 @@ const gaugeSize = computed(() => (props.isMobile ? 70 : 90));
.ml-8 { .ml-8 {
margin-left: 8px; margin-left: 8px;
} }
/* Pin the percent number to a label-sized 14px AD-Vue scales it
* from the SVG's intrinsic size, so :width alone leaves it too big. */
:deep(.ant-progress-text) {
font-size: 14px !important;
font-weight: 500;
}
</style> </style>