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 对接的平台配置好密钥后，可「测试连接」或「同步资产」拉取真实数据。
    </div>
    <div class="flex gap-2">
      <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="addAccount" 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>
    </div>

    <!-- 账号管理：同一平台多账号时区分资产归属，资产表单「所属账号」引用此处 -->
    <div 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-center mb-2">
        <h3 class="font-semibold text-sm">👤 我的账号（{{ store.accounts.length }}）</h3>
        <button @click="addAccount" class="text-xs text-blue-600 dark:text-blue-400">+ 新增账号</button>
      </div>
      <p v-if="!store.accounts.length" class="text-xs text-slate-400">暂无账号。添加后，可在资产表单「所属账号」中快速选择，区分同一平台下的多个账号。</p>
      <div v-else class="divide-y divide-slate-100 dark:divide-slate-800">
        <div v-for="a in store.accounts" :key="a.id" class="py-2 flex items-center gap-2">
          <div class="flex-1 min-w-0">
            <div class="text-sm truncate">{{ a.remark || a.name }}
              <span v-if="a.platform" class="text-xs text-slate-400">@ {{ platformName(a.platform) }}</span>
            </div>
            <div class="text-xs text-slate-400 truncate"><span v-if="a.remark">{{ a.name }} · </span>关联 {{ a.asset_count }} 个资产</div>
          </div>
          <button @click="editAccount(a)" class="text-xs text-blue-600 dark:text-blue-400">编辑</button>
          <button @click="delAccount(a)" class="text-xs text-red-600 dark:text-red-400">删除</button>
        </div>
      </div>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
      <div v-for="p in store.providers" :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">
            <span class="text-slate-500">📎 关联 {{ countOf(p) }} 个资产</span>
            <span v-if="p.has_api_config" class="text-emerald-600 dark:text-emerald-400">已配置 API</span>
            <span v-else class="text-slate-400">未配置 API</span>
            <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 v-if="isSupported(p.sdk_type)" @click="test(p)" :disabled="testing[p.id]" class="text-emerald-600 dark:text-emerald-400 disabled:opacity-50">{{ testing[p.id] ? '测试中…' : '测试连接' }}</button>
          <button v-if="canSync(p.sdk_type)" @click="sync(p)" :disabled="syncing[p.id]" class="text-violet-600 dark:text-violet-400 disabled:opacity-50">{{ syncing[p.id] ? '同步中…' : '同步资产' }}</button>
          <button @click="del(p)" class="text-red-600 dark:text-red-400">删除</button>
        </div>
        <div v-if="results[p.id]" class="mt-2 text-xs px-2 py-1.5 rounded-lg break-words" :class="results[p.id].ok ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' : 'bg-amber-500/10 text-amber-600 dark:text-amber-400'">{{ results[p.id].text }}</div>
      </div>
    </div>
  </div>`,
  setup() {
    const testing = Vue.reactive({});
    const syncing = Vue.reactive({});
    const results = Vue.reactive({});
    const supported = Vue.ref([]);
    const capabilities = Vue.ref({});
    // 平台关联资产数：优先按 provider_id 归并，其次按资产里填的平台名/slug
    const assetCounts = Vue.computed(() => {
      const m = {};
      for (const a of store.assets) {
        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);
    }
    function serviceList(p) {
      return (p.services || '').split(',').map(s => s.trim()).filter(Boolean);
    }
    // 账号所属平台显示名：platform 存的是 slug，回退显示原值
    function platformName(slug) {
      const p = store.providers.find(x => x.slug === slug);
      return p ? p.name : slug;
    }
    Vue.onMounted(async () => {
      try { const r = await Api.get('/providers/adapters'); supported.value = r.supported_types || []; capabilities.value = r.capabilities || {}; } catch (e) { /* ignore */ }
    });
    function isSupported(t) { return !!t && supported.value.includes(t); }
    function canSync(t) { const c = capabilities.value[t]; return !!(c && (c.list_vps || c.list_domains)); }
    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' });
    }
    async function test(p) {
      testing[p.id] = true; delete results[p.id];
      try {
        const r = await Api.post('/providers/' + p.id + '/test', {});
        results[p.id] = { ok: r.ok, text: (r.ok ? '✓ ' : '✗ ') + r.message };
      } catch (e) { results[p.id] = { ok: false, text: '✗ ' + e.message }; }
      finally { testing[p.id] = false; }
    }
    async function sync(p) {
      syncing[p.id] = true; delete results[p.id];
      try {
        const r = await Api.post('/providers/' + p.id + '/sync', {});
        const parts = [];
        if (r.vps) parts.push('VPS 新增' + r.vps.created + '/更新' + r.vps.updated);
        if (r.domains) parts.push('域名 新增' + r.domains.created + '/更新' + r.domains.updated);
        if (r.vps_error) parts.push('VPS错误:' + r.vps_error);
        if (r.domains_error) parts.push('域名错误:' + r.domains_error);
        if (r.account && r.account.balance !== null && r.account.balance !== undefined) parts.push('余额 ' + r.account.balance);
        results[p.id] = { ok: true, text: '✓ 同步完成：' + (parts.join('，') || '无变化') };
        await loadAll();
      } catch (e) { results[p.id] = { ok: false, text: '✗ ' + e.message }; }
      finally { syncing[p.id] = false; }
    }
    return { store, Fmt, testing, syncing, results, countOf, serviceList, platformName, isSupported, canSync, fmtTime, test, sync, seed: seedProviders, create: openProviderCreate, edit: openProviderEdit, del: deleteProvider, addAccount: () => openAccountCreate(''), editAccount: openAccountEdit, delAccount: deleteAccount };
  },
};