oadmin/xinghuoapi
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(frontend): comprehensive split of large view files into modular components

Browse Source 
- Split UsersView.vue into UserCreateModal, UserEditModal, UserApiKeysModal, etc.
- Split UsageView.vue into UsageStatsCards, UsageFilters, UsageTable, etc.
- Split DashboardView.vue into UserDashboardStats, UserDashboardCharts, etc.
- Split AccountsView.vue into AccountTableActions, AccountTableFilters, etc.
- Standardized TypeScript types across new components to resolve implicit 'any' and 'never[]' errors.
- Improved overall frontend maintainability and code clarity.
This commit is contained in:
IanShaw027
2026-01-04 22:17:27 +08:00
parent 7122b3b3b6
commit e99063e12b
28 changed files with 1454 additions and 5516 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/user/dashboard/UserDashboardStats.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
<div v-if="!isSimple" class="card p-4 flex items-center gap-3">
<div class="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30 text-emerald-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75" /></svg></div>
<div><p class="text-xs text-gray-500">{{ t('dashboard.balance') }}</p><p class="text-xl font-bold text-emerald-600">${{ balance.toFixed(2) }}</p></div>
</div>
<div class="card p-4 flex items-center gap-3">
<div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30 text-blue-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M15.75 5.25a3 3 0 013 3" /></svg></div>
<div><p class="text-xs text-gray-500">{{ t('dashboard.apiKeys') }}</p><p class="text-xl font-bold">{{ stats?.total_api_keys || 0 }}</p></div>
</div>
<div class="card p-4 flex items-center gap-3">
<div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30 text-green-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M3 13.125h2.25" /></svg></div>
<div><p class="text-xs text-gray-500">{{ t('dashboard.todayRequests') }}</p><p class="text-xl font-bold">{{ stats?.today_requests || 0 }}</p></div>
</div>
<div class="card p-4 flex items-center gap-3">
<div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30 text-purple-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 6v12" /></svg></div>
<div><p class="text-xs text-gray-500">{{ t('dashboard.todayCost') }}</p><p class="text-xl font-bold text-purple-600">${{ (stats?.today_actual_cost || 0).toFixed(4) }}</p></div>
</div>
</div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'; defineProps(['stats', 'balance', 'isSimple']); const { t } = useI18n()
</script>