vps-manager/static/js/views/subscriptions.js

/* 订阅视图 */
const SubscriptionsView = {
  template: `
  <div class="space-y-4">
    <!-- 说明条：让用户明白这个视图是什么 -->
    <div class="text-xs text-slate-500 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-800 rounded-lg px-3 py-2">
      💸 这里是「付费资产」汇总：自动收集所有设置了费用或到期日的资产（跨 VPS / 域名 / AI 账号），统一看每个月花多少钱、哪些该续费。
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
      <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
        <div class="text-xs text-slate-500">付费资产数</div>
        <div class="text-2xl font-bold mt-1">{{ subs.length }}</div>
      </div>
      <div v-for="(v, cur) in monthlyByCurrency" :key="cur" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
        <div class="text-xs text-slate-500">月度支出（{{ cur }}）</div>
        <div class="text-2xl font-bold mt-1">{{ v.toFixed(2) }}</div>
        <div class="text-xs text-slate-400 mt-1">年度约 {{ (v*12).toFixed(2) }}</div>
      </div>
    </div>
    <div v-if="subs.length" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
      <h3 class="font-semibold mb-2 text-sm">按平台月度支出（换算为月均）</h3>
      <canvas id="billingChart" height="80"></canvas>
    </div>
    <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden">
      <table class="w-full text-sm">
        <thead class="bg-slate-50 dark:bg-slate-800/50 text-slate-500 text-left text-xs">
          <tr>
            <th class="px-4 py-2.5 font-medium">项目</th>
            <th class="px-4 py-2.5 font-medium">平台</th>
            <th class="px-4 py-2.5 font-medium">费用</th>
            <th class="px-4 py-2.5 font-medium">到期</th>
            <th class="px-4 py-2.5 font-medium text-right">管理</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
          <tr v-if="!subs.length"><td colspan="5" class="px-4 py-10 text-center text-slate-400">暂无付费资产（给资产设置费用和到期日即可出现）</td></tr>
          <tr v-for="a in subs" :key="a.id" class="hover:bg-slate-50 dark:hover:bg-slate-800/30">
            <td class="px-4 py-2.5 font-medium">{{ a.name }}</td>
            <td class="px-4 py-2.5 text-slate-500">{{ a.provider_name || a.provider }}</td>
            <td class="px-4 py-2.5" :class="a.cost ? 'text-slate-600 dark:text-slate-300' : 'text-slate-400'">{{ Fmt.costText(a.cost, a.currency) }}<span v-if="a.cost && a.renewal_cycle" class="text-xs text-slate-400 ml-1">/{{ Fmt.CYCLE_LABELS[a.renewal_cycle] || a.renewal_cycle }}</span></td>
            <td class="px-4 py-2.5" :class="Fmt.expiryText(a.days_to_expiry)">{{ a.expiry_date || '—' }}<span v-if="a.days_to_expiry!==null&&a.days_to_expiry!==undefined" class="text-xs ml-1">({{ Fmt.countdownText(a.days_to_expiry, { unit: '' }) }})</span></td>
            <td class="px-4 py-2.5 text-right whitespace-nowrap">
              <a v-if="a.renew_url" :href="a.renew_url" target="_blank" class="text-emerald-600 dark:text-emerald-400 hover:underline mr-3 text-xs">续费</a>
              <a v-if="a.cancel_url" :href="a.cancel_url" target="_blank" class="text-red-600 dark:text-red-400 hover:underline text-xs">取消</a>
              <span v-if="!a.renew_url && !a.cancel_url" class="text-xs text-slate-400">—</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>`,
  setup() {
    // 用 allAssets（全量口径）：本页有自己的口径（付费/有到期日），
    // 不该被资产页的类型/状态/搜索筛选影响，否则月度支出统计会跟着缩水
    const subs = Vue.computed(() => store.allAssets
      .filter(a => (a.cost > 0 || a.expiry_date) && a.status !== 'cancelled')
      .sort((x, y) => (x.days_to_expiry ?? 9999) - (y.days_to_expiry ?? 9999)));
    const monthlyByCurrency = Vue.computed(() => {
      const m = {};
      for (const a of subs.value) {
        const cur = a.currency || 'USD';
        m[cur] = (m[cur] || 0) + normalizedMonthly(a.cost, a.renewal_cycle);
      }
      return m;
    });
    const byProviderMonthly = Vue.computed(() => {
      const m = {};
      for (const a of subs.value) {
        const prov = a.provider_name || a.provider;
        m[prov] = (m[prov] || 0) + normalizedMonthly(a.cost, a.renewal_cycle);
      }
      return m;
    });
    let billingChart = null;
    function renderBillingChart() {
      const canvas = document.getElementById('billingChart');
      if (!canvas || !window.Chart) return;
      const entries = Object.entries(byProviderMonthly.value).sort((x, y) => y[1] - x[1]);
      if (!entries.length) return;
      if (billingChart) { billingChart.destroy(); billingChart = null; }
      billingChart = new Chart(canvas, {
        type: 'bar',
        data: {
          labels: entries.map(e => e[0]),
          datasets: [{ label: '月度支出', data: entries.map(e => e[1].toFixed(2)), backgroundColor: '#6366f1', borderRadius: 6 }],
        },
        options: {
          responsive: true,
          scales: { y: { beginAtZero: true } },
          plugins: { legend: { display: false } },
        },
      });
    }
    Vue.watch([subs, byProviderMonthly], () => { Vue.nextTick(renderBillingChart); }, { deep: true });
    Vue.onMounted(() => { Vue.nextTick(renderBillingChart); });
    Vue.onUnmounted(() => { if (billingChart) { billingChart.destroy(); billingChart = null; } });
    return { store, Fmt, subs, monthlyByCurrency, byProviderMonthly };
  },
};