gouki/vps-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(expiry): 已过期资产不再从到期统计中消失，总览页改为到期日历

Browse Source 
get_expiring/get_overview 去掉 expiry_date>=today 下界（仅排除已注销）并新增 overdue_count；renewal_service 续费提醒纳入已过期、文案区分已过期N天/今天到期/N天后；dashboard 用到期日历逐条显示具体到期日与倒计时；api.js 新增 Fmt.countdownText 统一文案。
This commit is contained in:
gouki
2026-09-18 08:41:21 +00:00
parent c5982a5706
commit cbb32ea3b0
4 changed files with 66 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/views/dashboard.js
+31 -8
View File
@@ -10,6 +10,7 @@ const DashboardView = {
<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 v-if="store.overview.overdue_count" class="text-xs mt-1 font-medium text-red-600 dark:text-red-400">另有 {{ store.overview.overdue_count }} 项已过期</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>
@@ -21,17 +22,26 @@ const DashboardView = {
</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">
<!-- 到期日历：不限制在 30 天窗口内，每个有到期日的产品都列出“几号到期 / 还剩多久” -->
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
<div class="flex items-center justify-between mb-3">
<h2 class="text-sm font-semibold">到期日历（{{ expiryList.length }}）</h2>
<a href="#monitor" class="text-xs text-blue-600 dark:text-blue-400 hover:underline">全部倒计时 →</a>
</div>
<div v-if="expiryList.length" class="space-y-2">
<div v-for="a in expiryList" :key="a.id" class="flex justify-between items-center gap-3 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 class="font-medium text-sm truncate">{{ a.name }}</div>
<div class="text-xs text-slate-400 mt-0.5 truncate">{{ meta(a) }}</div>
</div>
<div class="text-right shrink-0">
<div class="text-sm" :class="Fmt.expiryText(a.days_to_expiry)">{{ a.expiry_date }}</div>
<span class="text-xs px-2 py-0.5 rounded-full" :class="Fmt.expiryBadge(a.days_to_expiry)">{{ Fmt.countdownText(a.days_to_expiry) }}</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>
<p v-else class="text-xs text-slate-400 py-4 text-center">没有资产设置了到期日，算不出倒计时</p>
<p v-if="noExpiryCount" class="text-xs text-slate-400 mt-2">另 {{ noExpiryCount }} 个资产未填到期日，不会出现在这里（到资产页编辑补上）</p>
</div>
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
@@ -42,5 +52,18 @@ const DashboardView = {
</div>
</div>
</div>`,
setup() { return { store, Fmt }; },
setup() {
// 到期日历：只看未注销且有到期日的资产，最紧急（含已过期）排最前
const expiryList = Vue.computed(() => store.assets
.filter(a => a.expiry_date && a.status !== 'cancelled')
.sort((x, y) => (x.days_to_expiry ?? 10 ** 9) - (y.days_to_expiry ?? 10 ** 9)));
const noExpiryCount = Vue.computed(() => store.assets.filter(a => !a.expiry_date && a.status !== 'cancelled').length);
// 副标题：类型 · 平台 · 费用/周期，缺失的字段不占位（避免出现 "VPS · · 3.5USD"）
function meta(a) {
const bits = [Fmt.TYPE_LABELS[a.asset_type] || a.asset_type, a.provider_name || a.provider];
if (a.cost) bits.push(a.cost + (a.currency || '') + '/' + (Fmt.CYCLE_LABELS[a.renewal_cycle] || '未设周期'));
return bits.filter(Boolean).join(' · ');
}
return { store, Fmt, expiryList, noExpiryCount, meta };
},
};