47 lines
2.7 KiB
JavaScript
47 lines
2.7 KiB
JavaScript
/* 总览视图 */
|
|
const DashboardView = {
|
|
template: `
|
|
<div class="space-y-5">
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
|
<div class="bg-white dark:bg-slate-900 rounded-xl p-4 border border-slate-200 dark:border-slate-800">
|
|
<div class="text-xs text-slate-500">总资产</div>
|
|
<div class="text-2xl font-bold mt-1">{{ store.overview.total || 0 }}</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-slate-900 rounded-xl p-4 border border-red-200 dark:border-red-900/50">
|
|
<div class="text-xs text-slate-500">30天内到期</div>
|
|
<div class="text-2xl font-bold mt-1 text-red-600 dark:text-red-400">{{ store.overview.expiring_30 || 0 }}</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-slate-900 rounded-xl p-4 border border-slate-200 dark:border-slate-800">
|
|
<div class="text-xs text-slate-500">本年支出</div>
|
|
<div class="text-2xl font-bold mt-1">{{ store.overview.year_cost || 0 }}</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-slate-900 rounded-xl p-4 border border-amber-200 dark:border-amber-900/50">
|
|
<div class="text-xs text-slate-500">异常状态</div>
|
|
<div class="text-2xl font-bold mt-1 text-amber-600 dark:text-amber-400">{{ store.overview.abnormal_count || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4" v-if="store.expiring.length">
|
|
<h2 class="text-sm font-semibold mb-3">续费倒计时（30天内）</h2>
|
|
<div class="space-y-2">
|
|
<div v-for="a in store.expiring" :key="a.id" class="flex justify-between items-center px-3 py-2 rounded-lg bg-slate-50 dark:bg-slate-800/50">
|
|
<div class="min-w-0">
|
|
<span class="font-medium text-sm truncate">{{ a.name }}</span>
|
|
<span class="text-xs text-slate-400 ml-2">{{ a.provider_name || a.provider }}</span>
|
|
</div>
|
|
<span class="text-xs px-2 py-0.5 rounded-full shrink-0" :class="Fmt.expiryBadge(a.days_to_expiry)">{{ a.days_to_expiry }}天 · {{ a.cost }}{{ a.currency }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
|
|
<h2 class="text-sm font-semibold mb-3">按类型分布</h2>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span v-for="(n, t) in store.overview.by_type" :key="t" class="text-xs px-3 py-1.5 rounded-lg" :class="Fmt.typeBadge(t)">{{ Fmt.TYPE_LABELS[t] }} {{ n }}</span>
|
|
<span v-if="!store.overview.by_type || !Object.keys(store.overview.by_type).length" class="text-xs text-slate-400">暂无数据</span>
|
|
</div>
|
|
</div>
|
|
</div>`,
|
|
setup() { return { store, Fmt }; },
|
|
};
|