mirror of
https://gitee.com/wanwujie/sub2api
synced 2026-04-21 23:24:46 +08:00
18 lines
1.0 KiB
Vue
18 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<div class="card p-6">
|
||
|
|
<div class="flex items-center justify-between mb-4"><h2 class="font-semibold">{{ t('dashboard.recentUsage') }}</h2></div>
|
||
|
|
<div v-if="loading" class="flex justify-center py-8"><LoadingSpinner /></div>
|
||
|
|
<div v-else-if="!data.length" class="text-center py-8 text-gray-500">{{ t('dashboard.noUsageRecords') }}</div>
|
||
|
|
<div v-else class="space-y-3">
|
||
|
|
<div v-for="l in data" :key="l.id" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||
|
|
<div><p class="text-sm font-medium">{{ l.model }}</p><p class="text-xs text-gray-400">{{ formatDateTime(l.created_at) }}</p></div>
|
||
|
|
<div class="text-right"><p class="text-sm font-bold text-green-600">${{ l.actual_cost.toFixed(4) }}</p></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useI18n } from 'vue-i18n'; import LoadingSpinner from '@/components/common/LoadingSpinner.vue'; import { formatDateTime } from '@/utils/format'
|
||
|
|
defineProps(['data', 'loading']); const { t } = useI18n()
|
||
|
|
</script>
|