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

/* 平台管理视图 */
const ProvidersView = {
  template: `
  <div class="space-y-3">
    <!-- 说明条：让用户明白平台是什么 -->
    <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">
      🏢 平台 = 资产的服务商（Vultr / 新网 / OpenAI…）。凭证（登录信息/API Key）配在账号上：点平台卡片「👤 账号」新增账号并填写凭证，即可在账号上「测试/同步」拉取真实数据。
    </div>
    <div class="flex gap-2 flex-wrap">
      <button @click="seed" class="text-sm px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800">初始化预设平台</button>
      <button @click="create" class="text-sm px-3 py-1.5 rounded-lg bg-blue-600 text-white hover:bg-blue-700">+ 自定义平台</button>
      <button @click="manageAccounts" class="text-sm px-3 py-1.5 rounded-lg border border-blue-300 dark:border-blue-700 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20">👤 账号管理</button>
      <button @click="toggleShowAll" class="text-sm px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800">{{ showAll ? '只显示在用' : '显示全部平台（' + store.providers.length + '）' }}</button>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
      <div v-for="p in visibleProviders" :key="p.id" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
        <div class="flex justify-between items-start">
          <div>
            <div class="font-medium text-sm">{{ p.name }}</div>
            <div class="text-xs text-slate-400 mt-0.5">{{ p.slug }}</div>
          </div>
          <div v-if="serviceList(p).length" class="flex flex-wrap gap-1 justify-end max-w-[60%]">
            <span v-for="s in serviceList(p)" :key="s" class="text-[10px] px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400">{{ Fmt.SERVICES_LABELS[s] || s }}</span>
          </div>
          <span v-else class="text-xs px-2 py-0.5 rounded-full" :class="Fmt.typeBadge(p.category)">{{ Fmt.CATEGORY_LABELS[p.category] }}</span>
        </div>
        <div class="text-xs text-slate-500 mt-2 space-y-1">
          <div v-if="p.sdk_type">API 对接: {{ p.sdk_type }}</div>
          <div v-if="p.console_url"><a :href="p.console_url" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline">管理面板 ↗</a></div>
          <div class="flex items-center gap-2 mt-1">
            <button @click="goAssets(p)" :disabled="!countOf(p)" class="text-slate-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:hover:text-slate-500" :title="countOf(p) ? '查看该平台下的资产' : ''">📎 关联 {{ countOf(p) }} 个资产</button>
            <button @click="openAccounts(p)" class="text-slate-500 hover:text-blue-600 dark:hover:text-blue-400">👤 账号 {{ accountsCountOf(p) }}</button>
            <span :class="p.enabled ? 'text-emerald-600 dark:text-emerald-400' : 'text-slate-400'">{{ p.enabled ? '启用' : '停用' }}</span>
          </div>
          <div v-if="p.last_synced_at" class="text-slate-400">最后同步：{{ fmtTime(p.last_synced_at) }}</div>
        </div>
        <div class="flex gap-4 mt-3 pt-2 border-t border-slate-100 dark:border-slate-800 text-xs flex-wrap">
          <button @click="edit(p)" class="text-blue-600 dark:text-blue-400">编辑</button>
          <button @click="del(p)" class="text-red-600 dark:text-red-400">删除</button>
        </div>
      </div>
    </div>
    <button v-if="!showAll && hiddenCount" @click="toggleShowAll" class="w-full text-center text-xs text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 py-2">
      已隐藏 {{ hiddenCount }} 个未使用平台（无资产/账号/API 配置）· 点击显示全部
    </button>
  </div>`,
  setup() {
    // 凭证已下沉到账号层：平台卡片不再提供测试/同步（见账号弹窗）
    // 平台关联资产数：优先按 provider_id 归并，其次按资产里填的平台名/slug
    // 用 allAssets（全量口径）：「关联 N 个资产」是平台的事实数量，
    // 不能因为资产页正在筛选就少算（否则点进去看到的清单与数字对不上）
    const assetCounts = Vue.computed(() => {
      const m = {};
      for (const a of store.allAssets) {
        if (a.provider_id) m['id:' + a.provider_id] = (m['id:' + a.provider_id] || 0) + 1;
        else if (a.provider) m['p:' + a.provider] = (m['p:' + a.provider] || 0) + 1;
      }
      return m;
    });
    function countOf(p) {
      return (assetCounts.value['id:' + p.id] || 0) + (assetCounts.value['p:' + p.slug] || 0) + (assetCounts.value['p:' + p.name] || 0);
    }
    // 平台名下账号数（账号按 platform slug 归属平台）
    function accountsCountOf(p) {
      return store.accounts.filter(a => a.platform === p.slug).length;
    }
    // 在用判定：有资产/有账号/已配置 API 任一即算在用
    function isUsed(p) {
      return countOf(p) > 0 || accountsCountOf(p) > 0 || p.has_api_config;
    }
    // 默认隐藏未使用平台，避免预设平台撑满屏幕；偏好持久化到 localStorage
    const showAll = Vue.ref(localStorage.getItem('vps_show_all_providers') === '1');
    function toggleShowAll() {
      showAll.value = !showAll.value;
      localStorage.setItem('vps_show_all_providers', showAll.value ? '1' : '0');
    }
    const visibleProviders = Vue.computed(() => showAll.value ? store.providers : store.providers.filter(isUsed));
    const hiddenCount = Vue.computed(() => store.providers.length - visibleProviders.value.length);
    function serviceList(p) {
      return (p.services || '').split(',').map(s => s.trim()).filter(Boolean);
    }
    function fmtTime(iso) {
      if (!iso) return '';
      return new Date(iso).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
    }
    return { store, Fmt, countOf, accountsCountOf, serviceList, showAll, toggleShowAll, visibleProviders, hiddenCount, fmtTime, seed: seedProviders, create: openProviderCreate, edit: openProviderEdit, del: deleteProvider, openAccounts: (p) => openAccountsView(p.slug), manageAccounts: () => openAccountsView(null), goAssets: openAssetsByProvider };
  },
};