mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-06 13:14:11 +00:00
440e3208a9
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>
110 lines
4 KiB
Vue
110 lines
4 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { AreaChartOutlined, HistoryOutlined } from '@ant-design/icons-vue';
|
|
|
|
import { CPUFormatter, SizeFormatter } from '@/utils';
|
|
|
|
const { t } = useI18n();
|
|
|
|
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. 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>
|
|
<a-card hoverable>
|
|
<a-row :gutter="[0, isMobile ? 16 : 0]">
|
|
<!-- CPU + Memory -->
|
|
<a-col :sm="24" :md="12">
|
|
<a-row>
|
|
<a-col :span="12" class="text-center">
|
|
<a-progress type="dashboard" status="normal" :stroke-color="status.cpu.color"
|
|
:trail-color="trailColor" :percent="status.cpu.percent" :width="gaugeSize" />
|
|
<div>
|
|
<b>{{ t('pages.index.cpu') }}:</b> {{ CPUFormatter.cpuCoreFormat(status.cpuCores) }}
|
|
<a-tooltip>
|
|
<template #title>
|
|
<div><b>{{ t('pages.index.logicalProcessors') }}:</b> {{ status.logicalPro }}</div>
|
|
<div><b>{{ t('pages.index.frequency') }}:</b> {{ CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) }}
|
|
</div>
|
|
</template>
|
|
<AreaChartOutlined />
|
|
</a-tooltip>
|
|
<a-tooltip>
|
|
<template #title>{{ t('pages.index.cpu') }}</template>
|
|
<a-button size="small" shape="circle" class="ml-8" @click="$emit('open-cpu-history')">
|
|
<template #icon>
|
|
<HistoryOutlined />
|
|
</template>
|
|
</a-button>
|
|
</a-tooltip>
|
|
</div>
|
|
</a-col>
|
|
|
|
<a-col :span="12" class="text-center">
|
|
<a-progress type="dashboard" status="normal" :stroke-color="status.mem.color"
|
|
: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) }}
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
|
|
<!-- Swap + Disk -->
|
|
<a-col :sm="24" :md="12">
|
|
<a-row>
|
|
<a-col :span="12" class="text-center">
|
|
<a-progress type="dashboard" status="normal" :stroke-color="status.swap.color"
|
|
: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) }}
|
|
</div>
|
|
</a-col>
|
|
|
|
<a-col :span="12" class="text-center">
|
|
<a-progress type="dashboard" status="normal" :stroke-color="status.disk.color"
|
|
: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) }}
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.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>
|