87 lines
6.2 KiB
JavaScript
87 lines
6.2 KiB
JavaScript
/* 平台管理视图 */
|
||
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
|
||
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);
|
||
}
|
||
// 平台名下账号数（账号按 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 };
|
||
},
|
||
};
|