Nexus Agent
71 lines
2.0 KiB
Vue
71 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { metricRingColor } from '@/utils/watchFormat'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
label: string
|
|
accent: 'cpu' | 'mem' | 'disk' | 'load'
|
|
value: number | null | undefined
|
|
/** 圆心文字，默认 `${round(value)}%` */
|
|
center?: string
|
|
hint?: string
|
|
size?: number
|
|
}>(), {
|
|
size: 68,
|
|
})
|
|
|
|
const ringWidth = computed(() => Math.max(5, Math.round(props.size * 0.1)))
|
|
const ringColor = computed(() => metricRingColor(props.accent, props.value))
|
|
const centerText = computed(() => {
|
|
if (props.center != null && props.center !== '') return props.center
|
|
return props.value != null ? `${Math.round(props.value)}%` : '—'
|
|
})
|
|
const ringValue = computed(() => {
|
|
if (props.value == null || Number.isNaN(props.value)) return 0
|
|
return Math.max(0, Math.min(100, props.value))
|
|
})
|
|
const centerFontPx = computed(() => `${Math.max(11, Math.round(props.size * 0.2))}px`)
|
|
</script>
|
|
|
|
<template>
|
|
<v-tooltip :text="hint" location="top" :disabled="!hint">
|
|
<template #activator="{ props: tipProps }">
|
|
<div class="watch-metric-ring text-center" v-bind="tipProps">
|
|
<v-progress-circular
|
|
:model-value="ringValue"
|
|
:size="size"
|
|
:width="ringWidth"
|
|
:color="ringColor"
|
|
bg-color="rgba(var(--v-theme-on-surface), 0.08)"
|
|
class="watch-metric-ring__circle"
|
|
>
|
|
<span class="watch-metric-ring__value" :style="{ color: ringColor }">{{ centerText }}</span>
|
|
</v-progress-circular>
|
|
<div class="watch-metric-ring__label text-caption text-medium-emphasis mt-1">{{ label }}</div>
|
|
</div>
|
|
</template>
|
|
</v-tooltip>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.watch-metric-ring {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.watch-metric-ring__circle {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.watch-metric-ring__value {
|
|
font-size: v-bind(centerFontPx);
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1;
|
|
}
|
|
|
|
.watch-metric-ring__label {
|
|
letter-spacing: 0.02em;
|
|
}
|
|
</style>
|