feat: 综合平台services多服务支持+SW网络优先缓存修复+适配层/定时任务完善

2026-08-05 11:57:17 +00:00
parent 7f1268f508
commit 1b7d4823c3
47 changed files with 2895 additions and 1189 deletions
@@ -0,0 +1,97 @@
+/* 订阅视图 */
+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 text-slate-600 dark:text-slate-300">{{ a.cost }} {{ a.currency }}<span v-if="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">({{ a.days_to_expiry }}天)</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() {
+    const subs = Vue.computed(() => store.assets
+      .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 };
+  },
+};