123 lines
3.4 KiB
Vue
123 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
title: string
|
|
value: string | number
|
|
unit?: string
|
|
changeRate?: number
|
|
status?: 'success' | 'warning' | 'danger' | 'info'
|
|
subtext?: string
|
|
trend?: 'up' | 'down' | 'neutral'
|
|
}>()
|
|
|
|
const statusClass = computed(() => {
|
|
if (props.status) return `ks-metric-card--${props.status}`
|
|
if (props.trend === 'up') return 'ks-metric-card--up'
|
|
if (props.trend === 'down') return 'ks-metric-card--down'
|
|
return ''
|
|
})
|
|
|
|
const formattedChangeRate = computed(() => {
|
|
if (props.changeRate === undefined) return null
|
|
const prefix = props.changeRate > 0 ? '+' : ''
|
|
return `${prefix}${props.changeRate.toFixed(2)}%`
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ks-metric-card" :class="statusClass">
|
|
<div class="ks-metric-card__header">
|
|
<span class="ks-metric-card__title">{{ title }}</span>
|
|
<span v-if="trend || status" class="ks-metric-card__badge" :class="`ks-badge--${trend || status}`">
|
|
{{ trend ? (trend === 'up' ? '▲' : trend === 'down' ? '▼' : '-') : status }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="ks-metric-card__body">
|
|
<div class="ks-metric-card__value-group">
|
|
<span class="ks-metric-card__value ks-financial-number">{{ value }}</span>
|
|
<span v-if="unit" class="ks-metric-card__unit">{{ unit }}</span>
|
|
</div>
|
|
|
|
<div v-if="formattedChangeRate || subtext" class="ks-metric-card__footer">
|
|
<span v-if="formattedChangeRate" class="ks-metric-card__change" :class="changeRate! >= 0 ? 'ks-text-up' : 'ks-text-down'">
|
|
{{ formattedChangeRate }}
|
|
</span>
|
|
<span v-if="subtext" class="ks-metric-card__subtext">{{ subtext }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ks-metric-card {
|
|
padding: var(--ks-space-4);
|
|
background: var(--ks-glass-bg);
|
|
backdrop-filter: var(--ks-glass-blur);
|
|
border: 1px solid var(--ks-glass-border);
|
|
border-radius: var(--ks-radius-lg);
|
|
box-shadow: var(--ks-shadow-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--ks-space-2);
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.ks-metric-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--ks-shadow-md);
|
|
}
|
|
|
|
.ks-metric-card__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.ks-metric-card__title {
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--ks-color-text-muted);
|
|
}
|
|
|
|
.ks-metric-card__badge {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
padding: 0.1rem 0.4rem;
|
|
border-radius: var(--ks-radius-sm);
|
|
}
|
|
|
|
.ks-badge--up, .ks-badge--success { background: rgba(5, 150, 105, 0.1); color: var(--ks-color-success); }
|
|
.ks-badge--down, .ks-badge--danger { background: rgba(220, 38, 38, 0.1); color: var(--ks-color-danger); }
|
|
.ks-badge--warning { background: rgba(217, 119, 6, 0.1); color: var(--ks-color-warning); }
|
|
|
|
.ks-metric-card__value-group {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--ks-space-1);
|
|
}
|
|
|
|
.ks-metric-card__value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--ks-color-text);
|
|
}
|
|
|
|
.ks-metric-card__unit {
|
|
font-size: 0.875rem;
|
|
color: var(--ks-color-text-muted);
|
|
}
|
|
|
|
.ks-metric-card__footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--ks-space-2);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.ks-text-up { color: var(--ks-color-up); font-weight: 600; }
|
|
.ks-text-down { color: var(--ks-color-down); font-weight: 600; }
|
|
.ks-metric-card__subtext { color: var(--ks-color-text-muted); }
|
|
</style>
|