gouki
eeb05372c4
- 新增 ConfirmModal / ResultModal 全局组件，替代原生 alert/confirm/prompt - 资产/平台/账号保存添加防重复提交锁（assetSaving / providerSaving） - 添加 Esc 键盘快捷键关闭模态框 - 平台/监控视图添加搜索过滤功能 - 修复监控中心 SSL TAB 下新增按钮的显示逻辑 - 调整 toast 位置避免遮挡底部导航 - 统一各弹窗 z-index 层级
125 lines
8.7 KiB
JavaScript
125 lines
8.7 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 items-center">
|
||
<input v-model="search" placeholder="搜索平台…" class="text-sm px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 w-32 md:w-40">
|
||
<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">
|
||
<!-- API 对接状态如实展示：能力矩阵来自后端 /providers/adapters，
|
||
即「适配器真的实现了哪些方法」，不是拿 sdk_type 有没有值充数 -->
|
||
<div v-if="isSupported(p)" class="flex flex-wrap items-center gap-1">
|
||
<span class="text-[10px] px-1.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">✓ API 已对接</span>
|
||
<span v-for="c in capsSummary(p)" :key="c" class="text-[10px] px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400">{{ c }}</span>
|
||
</div>
|
||
<div v-else-if="p.sdk_type" class="text-[10px] px-1.5 py-0.5 inline-block rounded-full bg-red-500/10 text-red-600 dark:text-red-400" :title="'声明的 ' + p.sdk_type + ' 没有对应适配器实现'">
|
||
⚠ 已声明 {{ p.sdk_type }}，但无对应适配器
|
||
</div>
|
||
<div v-else class="text-[10px] px-1.5 py-0.5 inline-block rounded-full bg-slate-100 dark:bg-slate-800 text-slate-400">未对接 API（仅台账登记）</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 search = Vue.ref('');
|
||
const visibleProviders = Vue.computed(() => {
|
||
let list = showAll.value ? store.providers : store.providers.filter(isUsed);
|
||
const kw = search.value.trim().toLowerCase();
|
||
if (kw) list = list.filter(p => p.name.toLowerCase().includes(kw) || p.slug.toLowerCase().includes(kw) || (p.name_en || '').toLowerCase().includes(kw));
|
||
return list;
|
||
});
|
||
const hiddenCount = Vue.computed(() => store.providers.length - visibleProviders.value.length);
|
||
function serviceList(p) {
|
||
return (p.services || '').split(',').map(s => s.trim()).filter(Boolean);
|
||
}
|
||
// API 对接状态：以适配器注册表为准，不看 sdk_type 有没有值
|
||
function isSupported(p) {
|
||
return !!p.sdk_type && (store.adapters.supported_types || []).includes(p.sdk_type);
|
||
}
|
||
// 能力摘要：把 capabilities 里为 true 的方法归并成用户看得懂的标签
|
||
const CAPS_LABELS = [
|
||
['list_vps', 'VPS同步'],
|
||
['list_domains', '域名同步'],
|
||
['get_account', '余额'],
|
||
['start_instance', '开关机'],
|
||
['reboot_instance', '重启'],
|
||
['renew_instance', '续费'],
|
||
['list_dns_records', 'DNS查询'],
|
||
['create_dns_record', 'DNS写入'],
|
||
];
|
||
function capsSummary(p) {
|
||
const caps = sdkCaps(p.sdk_type);
|
||
return CAPS_LABELS.filter(([k]) => caps[k]).map(([, label]) => label);
|
||
}
|
||
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, isSupported, capsSummary, showAll, toggleShowAll, visibleProviders, hiddenCount, fmtTime, search, seed: seedProviders, create: openProviderCreate, edit: openProviderEdit, del: deleteProvider, openAccounts: (p) => openAccountsView(p.slug), manageAccounts: () => openAccountsView(null), goAssets: openAssetsByProvider };
|
||
},
|
||
};
|