refactor(frontend): comprehensive split of large view files into modular components
- 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
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="card p-4 flex flex-wrap items-center gap-4">
|
||||
<DateRangePicker :start-date="startDate" :end-date="endDate" @update:startDate="$emit('update:startDate', $event)" @update:endDate="$emit('update:endDate', $event)" @change="$emit('dateRangeChange', $event)" />
|
||||
<div class="ml-auto w-28"><Select :model-value="granularity" :options="[{value:'day', label:t('dashboard.day')}, {value:'hour', label:t('dashboard.hour')}]" @update:model-value="$emit('update:granularity', $event)" @change="$emit('granularityChange')" /></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<div class="card p-4 min-h-[300px] relative"><div v-if="loading" class="absolute inset-0 flex items-center justify-center bg-white/50"><LoadingSpinner /></div>
|
||||
<h3 class="mb-4 font-semibold">{{ t('dashboard.modelDistribution') }}</h3>
|
||||
<div class="h-48"><Doughnut v-if="modelData" :data="modelData" :options="{maintainAspectRatio:false}" /></div>
|
||||
</div>
|
||||
<div class="card p-4 min-h-[300px] relative"><div v-if="loading" class="absolute inset-0 flex items-center justify-center bg-white/50"><LoadingSpinner /></div>
|
||||
<h3 class="mb-4 font-semibold">{{ t('dashboard.tokenUsageTrend') }}</h3>
|
||||
<div class="h-48"><Line v-if="trendData" :data="trendData" :options="{maintainAspectRatio:false}" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'; import { useI18n } from 'vue-i18n'; import LoadingSpinner from '@/components/common/LoadingSpinner.vue'; import DateRangePicker from '@/components/common/DateRangePicker.vue'; import Select from '@/components/common/Select.vue'; import { Line, Doughnut } from 'vue-chartjs'
|
||||
import type { TrendDataPoint, ModelStat } from '@/types'
|
||||
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, ArcElement, Title, Tooltip, Legend, Filler } from 'chart.js'
|
||||
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, ArcElement, Title, Tooltip, Legend, Filler)
|
||||
|
||||
const props = defineProps<{ loading: boolean, startDate: string, endDate: string, granularity: string, trend: TrendDataPoint[], models: ModelStat[] }>()
|
||||
defineEmits(['update:startDate', 'update:endDate', 'update:granularity', 'dateRangeChange', 'granularityChange'])
|
||||
const { t } = useI18n()
|
||||
const modelData = computed(() => !props.models?.length ? null : { labels: props.models.map((m:ModelStat) => m.model), datasets: [{ data: props.models.map((m:ModelStat) => m.total_tokens), backgroundColor: ['#3b82f6','#10b981','#f59e0b','#ef4444','#8b5cf6'] }] })
|
||||
const trendData = computed(() => !props.trend?.length ? null : { labels: props.trend.map((d:TrendDataPoint) => d.date), datasets: [{ label: 'Input', data: props.trend.map((d:TrendDataPoint) => d.input_tokens), borderColor: '#3b82f6', tension: 0.3 }] })
|
||||
</script>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="card p-6">
|
||||
<h2 class="font-semibold mb-4">{{ t('dashboard.quickActions') }}</h2>
|
||||
<div class="space-y-2">
|
||||
<button @click="router.push('/keys')" class="w-full text-left p-3 hover:bg-gray-100 rounded-lg flex items-center gap-3"><div class="p-2 bg-blue-100 rounded-lg text-blue-600">🔑</div><span>{{ t('dashboard.createApiKey') }}</span></button>
|
||||
<button @click="router.push('/usage')" class="w-full text-left p-3 hover:bg-gray-100 rounded-lg flex items-center gap-3"><div class="p-2 bg-green-100 rounded-lg text-green-600">📊</div><span>{{ t('dashboard.viewUsage') }}</span></button>
|
||||
<button @click="router.push('/redeem')" class="w-full text-left p-3 hover:bg-gray-100 rounded-lg flex items-center gap-3"><div class="p-2 bg-amber-100 rounded-lg text-amber-600">🎁</div><span>{{ t('dashboard.redeemCode') }}</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'; import { useI18n } from 'vue-i18n'
|
||||
const router = useRouter(); const { t } = useI18n()
|
||||
</script>
|
||||
@@ -0,0 +1,18 @@
|
||||
<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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user