File size: 2,336 Bytes
69b897d | 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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <template>
<div class="inline-flex items-center gap-1.5 rounded-md px-2 py-1" :class="badgeClass">
<div class="flex items-center gap-1">
<i :class="['text-xs', iconClass]" />
<span class="text-xs font-medium">{{ label }}</span>
</div>
<div class="flex items-center gap-1">
<span class="text-xs font-semibold">${{ current.toFixed(2) }}</span>
<span class="text-xs text-gray-500 dark:text-gray-400">/</span>
<span class="text-xs">${{ limit.toFixed(2) }}</span>
</div>
<!-- 小型进度条 -->
<div class="h-1 w-12 rounded-full bg-gray-200 dark:bg-gray-600">
<div
class="h-1 rounded-full transition-all duration-300"
:class="progressClass"
:style="{ width: progress + '%' }"
/>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
type: {
type: String,
required: true,
validator: (value) => ['daily', 'opus', 'window'].includes(value)
},
label: {
type: String,
required: true
},
current: {
type: Number,
default: 0
},
limit: {
type: Number,
required: true
}
})
const progress = computed(() => {
if (!props.limit || props.limit === 0) return 0
const percentage = (props.current / props.limit) * 100
return Math.min(percentage, 100)
})
const badgeClass = computed(() => {
switch (props.type) {
case 'daily':
return 'bg-gray-50 dark:bg-gray-700/50'
case 'opus':
return 'bg-indigo-50 dark:bg-indigo-900/20'
case 'window':
return 'bg-blue-50 dark:bg-blue-900/20'
default:
return 'bg-gray-50 dark:bg-gray-700/50'
}
})
const iconClass = computed(() => {
switch (props.type) {
case 'daily':
return 'fas fa-calendar-day text-gray-500'
case 'opus':
return 'fas fa-gem text-indigo-500'
case 'window':
return 'fas fa-clock text-blue-500'
default:
return 'fas fa-info-circle text-gray-500'
}
})
const progressClass = computed(() => {
const p = progress.value
if (p >= 100) return 'bg-red-500'
if (p >= 80) return 'bg-yellow-500'
switch (props.type) {
case 'daily':
return 'bg-green-500'
case 'opus':
return 'bg-indigo-500'
case 'window':
return 'bg-blue-500'
default:
return 'bg-gray-500'
}
})
</script>
|