Stat.vue
1.62 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<script setup>
/** 看板指标卡。值已格式化，组件不做格式化；tone 由调用方按样本量决定。 */
defineProps({
/** 指标名。 */
label: { type: String, required: true },
/** 已经格式化好的值。组件不做格式化 —— 千分位、¥、ms 的规则在页面侧。 */
value: { type: [String, Number], required: true },
/** 语义色。默认不染色。 */
tone: {
type: String,
default: 'neutral',
validator: (v) => ['neutral', 'success', 'warning', 'danger'].includes(v),
},
})
</script>
<template>
<div :class="['drama-stat', `is-${tone}`]">
<span class="drama-stat__label">{{ label }}</span>
<span class="drama-stat__value">{{ value }}</span>
</div>
</template>
<style scoped>
.drama-stat {
display: flex;
flex-direction: column;
gap: var(--drama-space-xs);
padding: var(--drama-space-lg);
background-color: var(--drama-color-surface-alt);
border-radius: var(--drama-radius-md);
}
.drama-stat__label {
color: var(--drama-color-text-muted);
font-size: var(--drama-font-size-xs);
line-height: var(--drama-line-height-tight);
}
.drama-stat__value {
color: var(--drama-color-text);
font-family: var(--drama-font-family-mono);
font-size: var(--drama-font-size-lg);
font-weight: var(--drama-font-weight-medium);
line-height: var(--drama-line-height-tight);
font-variant-numeric: tabular-nums;
}
.drama-stat.is-success .drama-stat__value {
color: var(--drama-color-success);
}
.drama-stat.is-warning .drama-stat__value {
color: var(--drama-color-warning);
}
.drama-stat.is-danger .drama-stat__value {
color: var(--drama-color-danger);
}
</style>