Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-06 13:14:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
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
1 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/pages/index/StatusCard.vue
View file

@ -15,9 +15,14 @@ const props = defineProps({
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));
// which dwarfs the rest of the card. 70 (60 on mobile) plus the
// :deep(.ant-progress-text) override below keep the gauges compact.
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>
<template>
@ -28,7 +33,7 @@ const gaugeSize = computed(() => (props.isMobile ? 70 : 90));
<a-row>
<a-col :span="12" class="text-center">
<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>
<b>{{ t('pages.index.cpu') }}:</b> {{ CPUFormatter.cpuCoreFormat(status.cpuCores) }}
<a-tooltip>
@ -52,7 +57,7 @@ const gaugeSize = computed(() => (props.isMobile ? 70 : 90));
<a-col :span="12" class="text-center">
<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>
<b>{{ t('pages.index.memory') }}:</b> {{ SizeFormatter.sizeFormat(status.mem.current) }} /
{{ SizeFormatter.sizeFormat(status.mem.total) }}
@ -66,7 +71,7 @@ const gaugeSize = computed(() => (props.isMobile ? 70 : 90));
<a-row>
<a-col :span="12" class="text-center">
<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>
<b>{{ t('pages.index.swap') }}:</b> {{ SizeFormatter.sizeFormat(status.swap.current) }} /
{{ SizeFormatter.sizeFormat(status.swap.total) }}
@ -75,7 +80,7 @@ const gaugeSize = computed(() => (props.isMobile ? 70 : 90));
<a-col :span="12" class="text-center">
<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>
<b>{{ t('pages.index.storage') }}:</b> {{ SizeFormatter.sizeFormat(status.disk.current) }} /
{{ SizeFormatter.sizeFormat(status.disk.total) }}
@ -95,4 +100,11 @@ const gaugeSize = computed(() => (props.isMobile ? 70 : 90));
.ml-8 {
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>