989 lines
66 KiB
JavaScript
989 lines
66 KiB
JavaScript
/* vps-manager 前端应用（Vue 3 组件化） */
|
||
const { createApp, reactive, ref, computed, onMounted, watch, nextTick } = Vue;
|
||
const Api = window.VpsApi;
|
||
const Fmt = window.VpsFmt;
|
||
|
||
/* ---------------- 全局状态 ---------------- */
|
||
const store = reactive({
|
||
view: 'dashboard',
|
||
assets: [],
|
||
providers: [],
|
||
overview: {},
|
||
expiring: [],
|
||
serverMetrics: {},
|
||
search: '',
|
||
filterType: '',
|
||
filterStatus: '',
|
||
dark: localStorage.getItem('vps_dark') === '1',
|
||
loading: false,
|
||
error: '',
|
||
assetModal: { show: false, editing: null, form: null },
|
||
providerModal: { show: false, editing: null, form: null },
|
||
});
|
||
|
||
function applyDark() {
|
||
document.documentElement.classList.toggle('dark', store.dark);
|
||
localStorage.setItem('vps_dark', store.dark ? '1' : '0');
|
||
}
|
||
|
||
/* ---------------- 表单工厂 ---------------- */
|
||
function emptyAssetForm() {
|
||
return {
|
||
name: '', asset_type: 'vps', provider: '', provider_id: null, renewal_cycle: 'monthly', renew_url: '', cancel_url: '',
|
||
account: '', expiry_date: '', auto_renew: false, cost: 0, currency: 'USD',
|
||
status: 'active', is_archived: false, remark: '',
|
||
vps_detail: { ip_address: '', tailscale_ip: '', region: '', os: '', cpu_cores: 1, memory_gb: 1, disk_gb: 20, bandwidth_gb: null, ssh_port: 22, panel_url: '', ssh_user: '', login_method: 'key', ssh_key: '', password: '', purpose: '' },
|
||
domain_detail: { domain_name: '', registrar: '', dns_provider: '', cloudflare_account: '', is_using: true, redirect_target: '', bind_asset_id: null },
|
||
ai_detail: { provider: '', api_key: '', plan: '', balance: null, currency: 'USD', monthly_usage: null, monthly_limit: null },
|
||
};
|
||
}
|
||
|
||
function buildAssetPayload(f) {
|
||
const p = {
|
||
name: f.name, asset_type: f.asset_type, provider: f.provider,
|
||
provider_id: f.provider_id || null, renewal_cycle: f.renewal_cycle || null,
|
||
renew_url: f.renew_url || null, cancel_url: f.cancel_url || null,
|
||
account: f.account || null, expiry_date: f.expiry_date || null,
|
||
auto_renew: !!f.auto_renew, cost: Number(f.cost) || 0, currency: f.currency,
|
||
status: f.status, is_archived: !!f.is_archived, remark: f.remark || null,
|
||
};
|
||
if (f.asset_type === 'vps') {
|
||
const v = f.vps_detail;
|
||
p.vps_detail = { ip_address: v.ip_address, tailscale_ip: v.tailscale_ip || null, region: v.region || null, os: v.os || null, cpu_cores: Number(v.cpu_cores) || 1, memory_gb: Number(v.memory_gb) || 1, disk_gb: Number(v.disk_gb) || 20, bandwidth_gb: v.bandwidth_gb ? Number(v.bandwidth_gb) : null, ssh_port: Number(v.ssh_port) || 22, panel_url: v.panel_url || null, ssh_user: v.ssh_user || null, login_method: v.login_method || 'key', ssh_key: v.ssh_key || null, password: v.password || null, purpose: v.purpose || null };
|
||
} else if (f.asset_type === 'domain') {
|
||
const d = f.domain_detail;
|
||
p.domain_detail = { domain_name: d.domain_name, registrar: d.registrar || null, dns_provider: d.dns_provider || null, cloudflare_account: d.cloudflare_account || null, is_using: !!d.is_using, redirect_target: d.redirect_target || null, bind_asset_id: d.bind_asset_id || null };
|
||
} else if (f.asset_type === 'ai_agent') {
|
||
const a = f.ai_detail;
|
||
p.ai_detail = { provider: a.provider, api_key: a.api_key || null, plan: a.plan || null, balance: a.balance ? Number(a.balance) : null, currency: a.currency || 'USD', monthly_usage: a.monthly_usage ? Number(a.monthly_usage) : null, monthly_limit: a.monthly_limit ? Number(a.monthly_limit) : null };
|
||
}
|
||
return p;
|
||
}
|
||
|
||
/* ---------------- 数据加载 ---------------- */
|
||
async function loadAssets() {
|
||
const params = new URLSearchParams();
|
||
if (store.filterType) params.set('asset_type', store.filterType);
|
||
if (store.filterStatus) params.set('status', store.filterStatus);
|
||
if (store.search) params.set('q', store.search);
|
||
params.set('sort', 'expiry_date'); params.set('order', 'asc');
|
||
store.assets = await Api.get('/assets?' + params.toString());
|
||
}
|
||
async function loadProviders() { store.providers = await Api.get('/providers'); }
|
||
async function loadOverview() { store.overview = await Api.get('/stats/overview'); }
|
||
async function loadExpiring() { store.expiring = await Api.get('/stats/expiring?days=30'); }
|
||
async function loadAll() {
|
||
store.loading = true; store.error = '';
|
||
try { await Promise.all([loadAssets(), loadProviders(), loadOverview(), loadExpiring()]); }
|
||
catch (e) { store.error = e.message; } finally { store.loading = false; }
|
||
}
|
||
|
||
/* ---------------- 资产操作 ---------------- */
|
||
function openAssetCreate(presetType) {
|
||
const form = emptyAssetForm();
|
||
if (presetType) form.asset_type = presetType;
|
||
store.assetModal = { show: true, editing: null, form };
|
||
}
|
||
function openAICreate(provider) {
|
||
const form = emptyAssetForm();
|
||
form.asset_type = 'ai_agent';
|
||
if (provider) {
|
||
form.provider = provider;
|
||
form.ai_detail.provider = provider;
|
||
const p = store.providers.find(x => x.slug === provider);
|
||
if (p) form.provider_id = p.id;
|
||
}
|
||
store.assetModal = { show: true, editing: null, form };
|
||
}
|
||
function openAssetEdit(a) {
|
||
const form = emptyAssetForm();
|
||
['name', 'asset_type', 'provider', 'provider_id', 'renewal_cycle', 'renew_url', 'cancel_url', 'account', 'expiry_date', 'auto_renew', 'cost', 'currency', 'status', 'is_archived', 'remark'].forEach(k => { form[k] = a[k]; });
|
||
if (a.vps_detail) Object.assign(form.vps_detail, a.vps_detail);
|
||
if (a.domain_detail) Object.assign(form.domain_detail, a.domain_detail);
|
||
if (a.ai_detail) Object.assign(form.ai_detail, a.ai_detail);
|
||
form.vps_detail.ssh_key = ''; form.vps_detail.password = '';
|
||
store.assetModal = { show: true, editing: a.id, form };
|
||
}
|
||
async function saveAsset() {
|
||
store.error = '';
|
||
const f = store.assetModal.form;
|
||
try {
|
||
const payload = buildAssetPayload(f);
|
||
if (store.assetModal.editing) await Api.put('/assets/' + store.assetModal.editing, payload);
|
||
else await Api.post('/assets', payload);
|
||
store.assetModal.show = false;
|
||
await loadAll();
|
||
} catch (e) { store.error = e.message; }
|
||
}
|
||
async function deleteAsset(a) {
|
||
if (!confirm('确认删除资产「' + a.name + '」？此操作不可恢复。')) return;
|
||
store.error = '';
|
||
try { await Api.del('/assets/' + a.id); await loadAll(); }
|
||
catch (e) { store.error = e.message; }
|
||
}
|
||
|
||
/* ---------------- 平台操作 ---------------- */
|
||
function openProviderCreate() {
|
||
store.providerModal = { show: true, editing: null, form: { slug: '', name: '', name_en: '', category: 'vps', website: '', console_url: '', sdk_type: '', enabled: true, remark: '', api_config: '' } };
|
||
}
|
||
function openProviderEdit(p) {
|
||
store.providerModal = { show: true, editing: p.id, form: { slug: p.slug, name: p.name, name_en: p.name_en || '', category: p.category, website: p.website || '', console_url: p.console_url || '', sdk_type: p.sdk_type || '', enabled: p.enabled, remark: p.remark || '', api_config: '' } };
|
||
}
|
||
async function saveProvider() {
|
||
store.error = '';
|
||
const f = store.providerModal.form;
|
||
const payload = { slug: f.slug, name: f.name, name_en: f.name_en || null, category: f.category, website: f.website || null, console_url: f.console_url || null, sdk_type: f.sdk_type || null, enabled: !!f.enabled, remark: f.remark || null, api_config: f.api_config || null };
|
||
try {
|
||
if (store.providerModal.editing) await Api.put('/providers/' + store.providerModal.editing, payload);
|
||
else await Api.post('/providers', payload);
|
||
store.providerModal.show = false;
|
||
await loadProviders();
|
||
} catch (e) { store.error = e.message; }
|
||
}
|
||
async function seedProviders() {
|
||
store.error = '';
|
||
try { const r = await Api.post('/providers/seed', {}); await loadProviders(); alert('已初始化预设平台，新增 ' + r.added + ' 个'); }
|
||
catch (e) { store.error = e.message; }
|
||
}
|
||
async function deleteProvider(p) {
|
||
if (!confirm('确认删除平台「' + p.name + '」？')) return;
|
||
try { await Api.del('/providers/' + p.id); await loadProviders(); }
|
||
catch (e) { store.error = e.message; }
|
||
}
|
||
|
||
/* ---------------- 服务器监控 ---------------- */
|
||
async function viewServer(a) {
|
||
store.view = 'servers';
|
||
try {
|
||
const [metrics, info, checks] = await Promise.all([
|
||
Api.get('/monitor/' + a.id + '/metrics?limit=200'),
|
||
Api.get('/monitor/' + a.id + '/info'),
|
||
Api.get('/monitor/' + a.id + '/security'),
|
||
]);
|
||
store.serverMetrics = { asset: a, metrics, info, checks };
|
||
} catch (e) { store.serverMetrics = { asset: a, metrics: [], info: null, checks: [] }; }
|
||
}
|
||
|
||
/* ---------------- 设置 ---------------- */
|
||
const settings = reactive({ apiKey: Api.getApiKey(), saved: false });
|
||
function saveSettings() { Api.setApiKey(settings.apiKey); settings.saved = true; setTimeout(() => settings.saved = false, 2000); }
|
||
|
||
/* ================= 视图组件 ================= */
|
||
const DashboardView = {
|
||
template: `
|
||
<div class="space-y-5">
|
||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
||
<div class="bg-white dark:bg-slate-900 rounded-xl p-4 border border-slate-200 dark:border-slate-800">
|
||
<div class="text-xs text-slate-500">总资产</div>
|
||
<div class="text-2xl font-bold mt-1">{{ store.overview.total || 0 }}</div>
|
||
</div>
|
||
<div class="bg-white dark:bg-slate-900 rounded-xl p-4 border border-red-200 dark:border-red-900/50">
|
||
<div class="text-xs text-slate-500">30天内到期</div>
|
||
<div class="text-2xl font-bold mt-1 text-red-600 dark:text-red-400">{{ store.overview.expiring_30 || 0 }}</div>
|
||
</div>
|
||
<div class="bg-white dark:bg-slate-900 rounded-xl p-4 border border-slate-200 dark:border-slate-800">
|
||
<div class="text-xs text-slate-500">本年支出</div>
|
||
<div class="text-2xl font-bold mt-1">{{ store.overview.year_cost || 0 }}</div>
|
||
</div>
|
||
<div class="bg-white dark:bg-slate-900 rounded-xl p-4 border border-amber-200 dark:border-amber-900/50">
|
||
<div class="text-xs text-slate-500">异常状态</div>
|
||
<div class="text-2xl font-bold mt-1 text-amber-600 dark:text-amber-400">{{ store.overview.abnormal_count || 0 }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4" v-if="store.expiring.length">
|
||
<h2 class="text-sm font-semibold mb-3">续费倒计时（30天内）</h2>
|
||
<div class="space-y-2">
|
||
<div v-for="a in store.expiring" :key="a.id" class="flex justify-between items-center px-3 py-2 rounded-lg bg-slate-50 dark:bg-slate-800/50">
|
||
<div class="min-w-0">
|
||
<span class="font-medium text-sm truncate">{{ a.name }}</span>
|
||
<span class="text-xs text-slate-400 ml-2">{{ a.provider_name || a.provider }}</span>
|
||
</div>
|
||
<span class="text-xs px-2 py-0.5 rounded-full shrink-0" :class="Fmt.expiryBadge(a.days_to_expiry)">{{ a.days_to_expiry }}天 · {{ a.cost }}{{ a.currency }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
|
||
<h2 class="text-sm font-semibold mb-3">按类型分布</h2>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span v-for="(n, t) in store.overview.by_type" :key="t" class="text-xs px-3 py-1.5 rounded-lg" :class="Fmt.typeBadge(t)">{{ Fmt.TYPE_LABELS[t] }} {{ n }}</span>
|
||
<span v-if="!store.overview.by_type || !Object.keys(store.overview.by_type).length" class="text-xs text-slate-400">暂无数据</span>
|
||
</div>
|
||
</div>
|
||
</div>`,
|
||
setup() { return { store, Fmt }; },
|
||
};
|
||
|
||
const AssetsView = {
|
||
template: `
|
||
<div class="space-y-3">
|
||
<div class="flex flex-wrap gap-2 items-center">
|
||
<select v-model="store.filterType" @change="reload" class="text-sm px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900">
|
||
<option value="">全部类型</option>
|
||
<option v-for="(l,k) in Fmt.TYPE_LABELS" :key="k" :value="k">{{ l }}</option>
|
||
</select>
|
||
<select v-model="store.filterStatus" @change="reload" class="text-sm px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900">
|
||
<option value="">全部状态</option>
|
||
<option v-for="(l,k) in Fmt.STATUS_LABELS" :key="k" :value="k">{{ l }}</option>
|
||
</select>
|
||
<button @click="syncAllAI" class="text-sm px-3 py-1.5 rounded-lg border border-violet-300 dark:border-violet-700 text-violet-600 dark:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-900/20">同步AI余额</button>
|
||
<span class="ml-auto text-xs text-slate-400">共 {{ store.assets.length }} 条</span>
|
||
</div>
|
||
|
||
<!-- 桌面表格 -->
|
||
<div class="hidden md:block 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">费用</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="!store.assets.length"><td colspan="7" class="px-4 py-10 text-center text-slate-400">暂无资产</td></tr>
|
||
<tr v-for="a in store.assets" :key="a.id" class="hover:bg-slate-50 dark:hover:bg-slate-800/30" :class="{ 'opacity-50': a.is_archived }">
|
||
<td class="px-4 py-2.5 font-medium">{{ a.name }}</td>
|
||
<td class="px-4 py-2.5"><span class="text-xs px-2 py-0.5 rounded-full" :class="Fmt.typeBadge(a.asset_type)">{{ Fmt.TYPE_LABELS[a.asset_type] }}</span></td>
|
||
<td class="px-4 py-2.5 text-slate-500">{{ a.provider_name || a.provider }}</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-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"><span class="text-xs px-2 py-0.5 rounded-full" :class="Fmt.statusBadge(a.status)">{{ Fmt.STATUS_LABELS[a.status] }}</span></td>
|
||
<td class="px-4 py-2.5 text-right whitespace-nowrap">
|
||
<button v-if="a.asset_type==='vps'" @click="viewServer(a)" class="text-emerald-600 dark:text-emerald-400 hover:underline mr-3 text-xs">监控</button>
|
||
<button v-if="a.asset_type==='ai_agent'" @click="refreshBalance(a)" class="text-violet-600 dark:text-violet-400 hover:underline mr-3 text-xs">刷新余额</button>
|
||
<button @click="edit(a)" class="text-blue-600 dark:text-blue-400 hover:underline mr-3 text-xs">编辑</button>
|
||
<button @click="del(a)" class="text-red-600 dark:text-red-400 hover:underline text-xs">删除</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 移动卡片 -->
|
||
<div class="md:hidden space-y-2">
|
||
<div v-if="!store.assets.length" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-8 text-center text-slate-400 text-sm">暂无资产</div>
|
||
<div v-for="a in store.assets" :key="a.id" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-3" :class="{ 'opacity-50': a.is_archived }">
|
||
<div class="flex justify-between items-start">
|
||
<div class="min-w-0">
|
||
<div class="font-medium text-sm truncate">{{ a.name }}</div>
|
||
<div class="text-xs text-slate-400 mt-0.5">{{ a.provider_name || a.provider }}</div>
|
||
</div>
|
||
<span class="text-xs px-2 py-0.5 rounded-full shrink-0" :class="Fmt.typeBadge(a.asset_type)">{{ Fmt.TYPE_LABELS[a.asset_type] }}</span>
|
||
</div>
|
||
<div class="flex items-center gap-3 mt-2 text-xs">
|
||
<span :class="Fmt.expiryText(a.days_to_expiry)">{{ a.expiry_date || '无到期' }}<span v-if="a.days_to_expiry!==null&&a.days_to_expiry!==undefined"> ({{ a.days_to_expiry }}天)</span></span>
|
||
<span class="text-slate-500">{{ a.cost }}{{ a.currency }}</span>
|
||
<span class="px-2 py-0.5 rounded-full" :class="Fmt.statusBadge(a.status)">{{ Fmt.STATUS_LABELS[a.status] }}</span>
|
||
</div>
|
||
<div class="flex gap-4 mt-2 pt-2 border-t border-slate-100 dark:border-slate-800 text-xs">
|
||
<button v-if="a.asset_type==='vps'" @click="viewServer(a)" class="text-emerald-600 dark:text-emerald-400">监控</button>
|
||
<button v-if="a.asset_type==='ai_agent'" @click="refreshBalance(a)" class="text-violet-600 dark:text-violet-400">刷新余额</button>
|
||
<button @click="edit(a)" class="text-blue-600 dark:text-blue-400">编辑</button>
|
||
<button @click="del(a)" class="text-red-600 dark:text-red-400">删除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>`,
|
||
setup() {
|
||
async function refreshBalance(a) {
|
||
if (!confirm('刷新「' + a.name + '」的余额？')) return;
|
||
try {
|
||
const r = await Api.post('/assets/' + a.id + '/refresh-balance', {});
|
||
alert('余额已更新：' + r.balance + ' ' + r.currency);
|
||
await loadAssets();
|
||
} catch (e) { alert('刷新失败：' + e.message); }
|
||
}
|
||
async function syncAllAI() {
|
||
if (!confirm('同步所有 AI 账号的余额？')) return;
|
||
try {
|
||
const r = await Api.post('/sync/ai-balances', {});
|
||
alert('同步完成：成功 ' + r.success + '，失败 ' + r.failed + (r.errors && r.errors.length ? '\n' + r.errors.join('\n') : ''));
|
||
await loadAssets();
|
||
} catch (e) { alert('同步失败：' + e.message); }
|
||
}
|
||
return { store, Fmt, reload: loadAssets, edit: openAssetEdit, del: deleteAsset, viewServer, refreshBalance, syncAllAI };
|
||
},
|
||
};
|
||
|
||
function normalizedMonthly(cost, cycle) {
|
||
if (!cost) return 0;
|
||
if (cycle === 'yearly') return cost / 12;
|
||
if (cycle === 'quarterly') return cost / 3;
|
||
return cost;
|
||
}
|
||
|
||
const SubscriptionsView = {
|
||
template: `
|
||
<div class="space-y-4">
|
||
<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 = 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 = 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 = 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 } },
|
||
},
|
||
});
|
||
}
|
||
watch([subs, byProviderMonthly], () => { nextTick(renderBillingChart); }, { deep: true });
|
||
onMounted(() => { nextTick(renderBillingChart); });
|
||
return { store, Fmt, subs, monthlyByCurrency, byProviderMonthly };
|
||
},
|
||
};
|
||
|
||
const ProvidersView = {
|
||
template: `
|
||
<div class="space-y-3">
|
||
<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>
|
||
</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>
|
||
<span 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">SDK: {{ 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 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 = reactive({});
|
||
const syncing = reactive({});
|
||
const results = reactive({});
|
||
const supported = ref([]);
|
||
const capabilities = ref({});
|
||
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, isSupported, canSync, fmtTime, test, sync, seed: seedProviders, create: openProviderCreate, edit: openProviderEdit, del: deleteProvider };
|
||
},
|
||
};
|
||
|
||
const ServersView = {
|
||
template: `
|
||
<div class="space-y-4">
|
||
<div v-if="!m.asset" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-8 text-center text-slate-400 text-sm">
|
||
请在「资产」页点击 VPS 的「监控」查看服务器资源与安全状态
|
||
</div>
|
||
<template v-else>
|
||
<div class="flex items-center gap-2">
|
||
<button @click="store.view='assets'" class="text-sm text-slate-500 hover:text-slate-700">← 返回</button>
|
||
<h2 class="font-semibold">{{ m.asset.name }}</h2>
|
||
</div>
|
||
<div v-if="m.info" class="grid grid-cols-2 lg: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">CPU</div>
|
||
<div class="text-xl font-bold mt-1">{{ latest ? latest.cpu_pct : '—' }}%</div>
|
||
<div class="text-xs text-slate-400 mt-1">{{ m.info.cpu_cores }} 核</div>
|
||
</div>
|
||
<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-xl font-bold mt-1">{{ latest ? latest.mem_pct : '—' }}%</div>
|
||
<div class="text-xs text-slate-400 mt-1">{{ m.info.mem_total_gb }} GB</div>
|
||
</div>
|
||
<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-xl font-bold mt-1">{{ latest ? latest.disk_pct : '—' }}%</div>
|
||
<div class="text-xs text-slate-400 mt-1">{{ m.info.disk_total_gb }} GB</div>
|
||
</div>
|
||
<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-xl font-bold mt-1">{{ latest && latest.load_1m !== null ? latest.load_1m : '—' }}</div>
|
||
<div class="text-xs text-slate-400 mt-1">{{ m.info.hostname }}</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="m.info" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4 text-sm">
|
||
<h3 class="font-semibold mb-2">服务器信息</h3>
|
||
<div class="grid grid-cols-2 gap-y-1 text-xs text-slate-500">
|
||
<div>系统：{{ m.info.os }}</div><div>内核：{{ m.info.kernel }}</div>
|
||
<div>公网 IP：{{ m.info.public_ip || '—' }}</div><div>状态：{{ m.info.status }}</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="m.metrics && m.metrics.length > 1" 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">资源趋势（最近 {{ m.metrics.length }} 次采样）</h3>
|
||
<canvas id="metricsChart" height="90"></canvas>
|
||
</div>
|
||
<div 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>
|
||
<div class="space-y-2">
|
||
<div v-for="c in m.checks" :key="c.id" class="flex items-start gap-2 text-sm">
|
||
<span class="text-xs px-2 py-0.5 rounded-full shrink-0" :class="Fmt.checkBadge(c.status)">{{ c.status }}</span>
|
||
<div class="min-w-0">
|
||
<div class="font-medium text-xs">{{ c.check_item }}</div>
|
||
<div class="text-xs text-slate-500">{{ c.detail }}</div>
|
||
<div v-if="c.suggestion" class="text-xs text-amber-600 dark:text-amber-400">建议：{{ c.suggestion }}</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="!m.checks.length" class="text-xs text-slate-400">暂无安全检查数据（需 Agent 上报）</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>`,
|
||
setup() {
|
||
const m = computed(() => store.serverMetrics);
|
||
const latest = computed(() => (m.value.metrics && m.value.metrics.length) ? m.value.metrics[0] : null);
|
||
let chartInstance = null;
|
||
function renderChart() {
|
||
const canvas = document.getElementById('metricsChart');
|
||
if (!canvas || !window.Chart) return;
|
||
if (!m.value.metrics || m.value.metrics.length < 2) return;
|
||
if (chartInstance) { chartInstance.destroy(); chartInstance = null; }
|
||
const data = [...m.value.metrics].reverse();
|
||
const labels = data.map(p => new Date(p.ts).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }));
|
||
chartInstance = new Chart(canvas, {
|
||
type: 'line',
|
||
data: {
|
||
labels,
|
||
datasets: [
|
||
{ label: 'CPU %', data: data.map(p => p.cpu_pct), borderColor: '#3b82f6', backgroundColor: 'rgba(59,130,246,0.1)', tension: 0.3, pointRadius: 0 },
|
||
{ label: '内存 %', data: data.map(p => p.mem_pct), borderColor: '#10b981', backgroundColor: 'rgba(16,185,129,0.1)', tension: 0.3, pointRadius: 0 },
|
||
{ label: '磁盘 %', data: data.map(p => p.disk_pct), borderColor: '#f59e0b', backgroundColor: 'rgba(245,158,11,0.1)', tension: 0.3, pointRadius: 0 },
|
||
],
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
interaction: { mode: 'index', intersect: false },
|
||
scales: { y: { min: 0, max: 100, ticks: { callback: v => v + '%' } } },
|
||
plugins: { legend: { position: 'top' } },
|
||
},
|
||
});
|
||
}
|
||
watch(m, () => { nextTick(renderChart); }, { deep: true });
|
||
onMounted(() => { nextTick(renderChart); });
|
||
return { store, Fmt, m, latest };
|
||
},
|
||
};
|
||
|
||
const DomainsView = {
|
||
template: `
|
||
<div class="space-y-3">
|
||
<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">DNS</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="!domains.length"><td colspan="6" class="px-4 py-10 text-center text-slate-400">暂无域名资产</td></tr>
|
||
<tr v-for="a in domains" :key="a.id" class="hover:bg-slate-50 dark:hover:bg-slate-800/30">
|
||
<td class="px-4 py-2.5 font-medium">{{ a.domain_detail.domain_name }}</td>
|
||
<td class="px-4 py-2.5 text-slate-500">{{ a.domain_detail.registrar || '—' }}</td>
|
||
<td class="px-4 py-2.5 text-slate-500">{{ a.domain_detail.dns_provider || '—' }}</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" class="text-xs ml-1">({{ a.days_to_expiry }}天)</span></td>
|
||
<td class="px-4 py-2.5"><span class="text-xs px-2 py-0.5 rounded-full" :class="a.domain_detail.is_using ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' : 'bg-slate-500/10 text-slate-400'">{{ a.domain_detail.is_using ? '使用' : '闲置' }}</span></td>
|
||
<td class="px-4 py-2.5 text-right"><button @click="edit(a)" class="text-blue-600 dark:text-blue-400 hover:underline text-xs">编辑/绑定</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>`,
|
||
setup() {
|
||
const domains = computed(() => store.assets.filter(a => a.asset_type === 'domain'));
|
||
return { store, Fmt, domains, edit: openAssetEdit };
|
||
},
|
||
};
|
||
|
||
const AIAccountsView = {
|
||
template: `
|
||
<div class="space-y-4">
|
||
<div class="flex justify-between items-center flex-wrap gap-2">
|
||
<div class="text-sm text-slate-500">共 {{ totalAccounts }} 个账号 · 总余额 {{ totalBalance }}</div>
|
||
<button @click="addAny" class="text-sm px-3 py-1.5 rounded-lg bg-blue-600 text-white hover:bg-blue-700">+ 新增账号</button>
|
||
</div>
|
||
<div v-for="g in groups" :key="g.provider" 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-3 flex-wrap gap-2">
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-semibold text-sm">{{ g.provider }}</span>
|
||
<span class="text-xs px-2 py-0.5 rounded-full bg-violet-500/10 text-violet-600 dark:text-violet-400">{{ g.accounts.length }} 个账号</span>
|
||
</div>
|
||
<div class="flex items-center gap-3 text-xs">
|
||
<span class="text-slate-500">余额合计 <b class="text-slate-800 dark:text-slate-200">{{ g.totalBalance }}</b></span>
|
||
<button @click="add(g.provider)" class="text-blue-600 dark:text-blue-400 hover:underline">+ 添加账号</button>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<div v-for="a in g.accounts" :key="a.id" class="flex items-center justify-between px-3 py-2 rounded-lg bg-slate-50 dark:bg-slate-800/50 text-sm gap-2">
|
||
<div class="min-w-0">
|
||
<span class="font-medium">{{ a.name }}</span>
|
||
<span v-if="a.ai_detail && a.ai_detail.plan" class="text-xs text-slate-400 ml-2">{{ a.ai_detail.plan }}</span>
|
||
</div>
|
||
<div class="flex items-center gap-3 text-xs shrink-0">
|
||
<span :class="balanceClass(a.ai_detail && a.ai_detail.balance)">余额 {{ fmtBal(a.ai_detail && a.ai_detail.balance) }}{{ a.ai_detail && a.ai_detail.balance !== null && a.ai_detail.balance !== undefined ? ' ' + a.ai_detail.currency : '' }}</span>
|
||
<span v-if="a.ai_detail && a.ai_detail.monthly_usage !== null && a.ai_detail.monthly_usage !== undefined" class="text-slate-500">用量 {{ a.ai_detail.monthly_usage }}/{{ a.ai_detail.monthly_limit ?? '∞' }}</span>
|
||
<button @click="edit(a)" class="text-blue-600 dark:text-blue-400 hover:underline">编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="!groups.length" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-8 text-center text-slate-400 text-sm">暂无 AI 账号，点右上角「新增账号」添加（同一平台可添加多个）</div>
|
||
</div>`,
|
||
setup() {
|
||
const aiList = () => store.assets.filter(a => a.asset_type === 'ai_agent');
|
||
const groups = computed(() => {
|
||
const map = {};
|
||
for (const a of aiList()) {
|
||
const prov = (a.ai_detail && a.ai_detail.provider) || a.provider || '其他';
|
||
if (!map[prov]) map[prov] = { provider: prov, accounts: [], totalBalance: 0 };
|
||
map[prov].accounts.push(a);
|
||
const bal = a.ai_detail && a.ai_detail.balance;
|
||
if (bal) map[prov].totalBalance += Number(bal);
|
||
}
|
||
return Object.values(map).map(g => ({ ...g, totalBalance: Math.round(g.totalBalance * 100) / 100 })).sort((x, y) => y.totalBalance - x.totalBalance);
|
||
});
|
||
const totalAccounts = computed(() => aiList().length);
|
||
const totalBalance = computed(() => Math.round(aiList().reduce((s, a) => s + (a.ai_detail && a.ai_detail.balance ? Number(a.ai_detail.balance) : 0), 0) * 100) / 100);
|
||
function balanceClass(b) {
|
||
if (b === null || b === undefined) return 'text-slate-400';
|
||
if (Number(b) < 10) return 'text-red-600 dark:text-red-400 font-semibold';
|
||
if (Number(b) < 50) return 'text-amber-600 dark:text-amber-400';
|
||
return 'text-emerald-600 dark:text-emerald-400';
|
||
}
|
||
function fmtBal(b) { return (b === null || b === undefined) ? '—' : b; }
|
||
return { store, groups, totalAccounts, totalBalance, balanceClass, fmtBal, add: openAICreate, addAny: () => openAICreate(''), edit: openAssetEdit };
|
||
},
|
||
};
|
||
|
||
const SettingsView = {
|
||
template: `
|
||
<div class="max-w-lg space-y-4">
|
||
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
|
||
<h3 class="font-semibold text-sm mb-3">API Key（写操作鉴权）</h3>
|
||
<p class="text-xs text-slate-500 mb-2">若服务端 .env 配置了 API_KEY，请在此填写相同的值，前端写操作会自动携带。</p>
|
||
<div class="flex gap-2">
|
||
<input v-model="settings.apiKey" type="password" placeholder="留空表示服务端未启用鉴权" class="flex-1 text-sm px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900">
|
||
<button @click="save" class="text-sm px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700">{{ settings.saved ? '已保存' : '保存' }}</button>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
|
||
<h3 class="font-semibold text-sm mb-2">通知与续费提醒</h3>
|
||
<div class="text-xs text-slate-500 mb-3">已配置渠道：
|
||
<span v-if="notifyChannels.length" class="text-emerald-600 dark:text-emerald-400">{{ notifyChannels.join('、') }}</span>
|
||
<span v-else class="text-slate-400">未配置（在 .env 设置 TELEGRAM_*/SMTP_*）</span>
|
||
</div>
|
||
<div class="flex gap-2 flex-wrap">
|
||
<button @click="testNotify" 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="checkRenewals" class="text-sm px-3 py-1.5 rounded-lg bg-blue-600 text-white hover:bg-blue-700">检查续费并提醒</button>
|
||
</div>
|
||
<div v-if="notifyResult" class="mt-3 text-xs px-3 py-2 rounded-lg bg-slate-50 dark:bg-slate-800/50 whitespace-pre-wrap break-words">{{ notifyResult }}</div>
|
||
</div>
|
||
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
|
||
<h3 class="font-semibold text-sm mb-2">外观</h3>
|
||
<label class="flex items-center gap-2 text-sm">
|
||
<input type="checkbox" v-model="store.dark" @change="applyDark"> 深色模式
|
||
</label>
|
||
</div>
|
||
</div>`,
|
||
setup() {
|
||
const notifyChannels = ref([]);
|
||
const notifyResult = ref('');
|
||
onMounted(async () => {
|
||
try { const r = await Api.get('/notify/channels'); notifyChannels.value = r.channels || []; } catch (e) { /* ignore */ }
|
||
});
|
||
async function testNotify() {
|
||
notifyResult.value = '发送中…';
|
||
try {
|
||
const r = await Api.post('/notify/test', {});
|
||
notifyResult.value = r.notifications.map(n => '[' + n.channel + '] ' + (n.ok ? '成功' : '失败：' + n.message)).join('\n');
|
||
} catch (e) { notifyResult.value = '失败：' + e.message; }
|
||
}
|
||
async function checkRenewals() {
|
||
notifyResult.value = '检查中…';
|
||
try {
|
||
const r = await Api.post('/notify/renewals?send=true', {});
|
||
let text = '即将到期 ' + r.expiring_count + ' 项（阈值 ' + r.threshold_days + ' 天）';
|
||
if (r.expiring.length) text += '\n' + r.expiring.map(i => '• ' + i.name + ' [' + i.provider + '] ' + i.days + ' 天后').join('\n');
|
||
if (r.notifications && r.notifications.length) text += '\n\n通知：' + r.notifications.map(n => '[' + n.channel + '] ' + (n.ok ? '成功' : '失败：' + n.message)).join('，');
|
||
notifyResult.value = text;
|
||
} catch (e) { notifyResult.value = '失败：' + e.message; }
|
||
}
|
||
return { store, settings, save: saveSettings, applyDark, notifyChannels, notifyResult, testNotify, checkRenewals };
|
||
},
|
||
};
|
||
|
||
/* ================= 资产编辑模态框 ================= */
|
||
const AssetModal = {
|
||
template: `
|
||
<div v-if="store.assetModal.show" class="fixed inset-0 bg-black/40 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
|
||
<div class="bg-white dark:bg-slate-900 w-full md:max-w-lg md:rounded-xl rounded-t-xl max-h-[92vh] overflow-y-auto">
|
||
<div class="px-5 py-3 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center sticky top-0 bg-white dark:bg-slate-900">
|
||
<h3 class="font-semibold text-sm">{{ store.assetModal.editing ? '编辑资产' : '新增资产' }}</h3>
|
||
<button @click="store.assetModal.show=false" class="text-slate-400 hover:text-slate-600">✕</button>
|
||
</div>
|
||
<form @submit.prevent="save" class="px-5 py-4 space-y-3" v-if="f">
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<label class="col-span-2 block"><span class="text-xs text-slate-500">名称 *</span>
|
||
<input v-model="f.name" required class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-500">类型 *</span>
|
||
<select v-model="f.asset_type" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm">
|
||
<option v-for="(l,k) in Fmt.TYPE_LABELS" :key="k" :value="k">{{ l }}</option>
|
||
</select></label>
|
||
<label class="block"><span class="text-xs text-slate-500">所属平台</span>
|
||
<select v-model="f.provider_id" @change="onProviderChange" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm">
|
||
<option :value="null">未指定</option>
|
||
<option v-for="p in providersForType" :key="p.id" :value="p.id">{{ p.name }}</option>
|
||
</select></label>
|
||
<label class="block"><span class="text-xs text-slate-500">到期时间</span>
|
||
<input type="date" v-model="f.expiry_date" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-500">续费周期</span>
|
||
<select v-model="f.renewal_cycle" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm">
|
||
<option value="">未设定</option><option v-for="(l,k) in Fmt.CYCLE_LABELS" :key="k" :value="k">{{ l }}</option>
|
||
</select></label>
|
||
<label class="block"><span class="text-xs text-slate-500">费用</span>
|
||
<input type="number" step="0.01" v-model.number="f.cost" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-500">币种</span>
|
||
<select v-model="f.currency" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm">
|
||
<option>USD</option><option>CNY</option><option>JPY</option><option>EUR</option>
|
||
</select></label>
|
||
<label class="col-span-2 block"><span class="text-xs text-slate-500">续费网址</span>
|
||
<input v-model="f.renew_url" placeholder="https://…（去哪续费）" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="col-span-2 block"><span class="text-xs text-slate-500">取消订阅网址</span>
|
||
<input v-model="f.cancel_url" placeholder="https://…（去哪取消）" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-500">状态</span>
|
||
<select v-model="f.status" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm">
|
||
<option v-for="(l,k) in Fmt.STATUS_LABELS" :key="k" :value="k">{{ l }}</option>
|
||
</select></label>
|
||
<label class="block"><span class="text-xs text-slate-500">所属账号</span>
|
||
<input v-model="f.account" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<div class="col-span-2 flex gap-5 text-sm text-slate-600 dark:text-slate-300">
|
||
<label class="flex items-center gap-2"><input type="checkbox" v-model="f.auto_renew"> 自动续费</label>
|
||
<label class="flex items-center gap-2"><input type="checkbox" v-model="f.is_archived"> 已归档</label>
|
||
</div>
|
||
</div>
|
||
|
||
<fieldset v-if="f.asset_type==='vps'" class="border border-slate-200 dark:border-slate-700 rounded-lg p-3">
|
||
<legend class="text-xs font-medium text-slate-600 dark:text-slate-300 px-1">VPS 详情</legend>
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<label class="block"><span class="text-xs text-slate-400">公网 IP *</span><input v-model="f.vps_detail.ip_address" required class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">Tailscale IP</span><input v-model="f.vps_detail.tailscale_ip" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">区域</span><input v-model="f.vps_detail.region" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">系统</span><input v-model="f.vps_detail.os" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">CPU核</span><input type="number" v-model.number="f.vps_detail.cpu_cores" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">内存GB</span><input type="number" step="0.5" v-model.number="f.vps_detail.memory_gb" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">磁盘GB</span><input type="number" v-model.number="f.vps_detail.disk_gb" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">SSH端口</span><input type="number" v-model.number="f.vps_detail.ssh_port" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">SSH用户</span><input v-model="f.vps_detail.ssh_user" placeholder="root" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">登录方式</span><select v-model="f.vps_detail.login_method" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"><option value="key">密钥</option><option value="password">密码</option><option value="other">其他</option></select></label>
|
||
<label class="block"><span class="text-xs text-slate-400">SSH密钥</span><input v-model="f.vps_detail.ssh_key" type="password" :placeholder="store.assetModal.editing ? '留空不修改' : ''" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">密码</span><input v-model="f.vps_detail.password" type="password" :placeholder="store.assetModal.editing ? '留空不修改' : ''" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="col-span-2 block"><span class="text-xs text-slate-400">用途/项目</span><input v-model="f.vps_detail.purpose" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset v-if="f.asset_type==='domain'" class="border border-slate-200 dark:border-slate-700 rounded-lg p-3">
|
||
<legend class="text-xs font-medium text-slate-600 dark:text-slate-300 px-1">域名详情</legend>
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<label class="col-span-2 block"><span class="text-xs text-slate-400">域名 *</span><input v-model="f.domain_detail.domain_name" required class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">注册商</span><input v-model="f.domain_detail.registrar" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">DNS托管</span><input v-model="f.domain_detail.dns_provider" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">CF账号</span><input v-model="f.domain_detail.cloudflare_account" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">绑定资产ID</span><input type="number" v-model.number="f.domain_detail.bind_asset_id" placeholder="关联VPS的ID" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="col-span-2 flex items-center gap-2 text-sm text-slate-600 dark:text-slate-300"><input type="checkbox" v-model="f.domain_detail.is_using"> 仍在实际使用</label>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset v-if="f.asset_type==='ai_agent'" class="border border-slate-200 dark:border-slate-700 rounded-lg p-3">
|
||
<legend class="text-xs font-medium text-slate-600 dark:text-slate-300 px-1">AI 账号详情</legend>
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<label class="block"><span class="text-xs text-slate-400">服务商 *</span><input v-model="f.ai_detail.provider" required class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">计划</span><input v-model="f.ai_detail.plan" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="col-span-2 block"><span class="text-xs text-slate-400">API Key</span><input v-model="f.ai_detail.api_key" type="password" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">余额</span><input type="number" step="0.01" v-model.number="f.ai_detail.balance" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-400">月限额</span><input type="number" step="0.01" v-model.number="f.ai_detail.monthly_limit" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<label class="block"><span class="text-xs text-slate-500">备注</span>
|
||
<textarea v-model="f.remark" rows="2" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></textarea></label>
|
||
|
||
<div class="flex justify-end gap-2 pt-1">
|
||
<button type="button" @click="store.assetModal.show=false" class="px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-700 text-sm text-slate-600 dark:text-slate-300">取消</button>
|
||
<button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm hover:bg-blue-700">{{ store.assetModal.editing ? '保存' : '创建' }}</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>`,
|
||
setup() {
|
||
const f = computed(() => store.assetModal.form);
|
||
const providersForType = computed(() => {
|
||
const t = f.value ? f.value.asset_type : null;
|
||
const map = { vps: 'vps', domain: 'domain', ai_agent: 'ai_agent', cloudflare: 'cloudflare' };
|
||
const cat = map[t];
|
||
return cat ? store.providers.filter(p => p.category === cat || p.category === 'other') : store.providers;
|
||
});
|
||
function onProviderChange() {
|
||
const p = store.providers.find(x => x.id === f.value.provider_id);
|
||
if (p) f.value.provider = p.slug;
|
||
}
|
||
return { store, Fmt, f, providersForType, onProviderChange, save: saveAsset };
|
||
},
|
||
};
|
||
|
||
const ProviderModal = {
|
||
template: `
|
||
<div v-if="store.providerModal.show" class="fixed inset-0 bg-black/40 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
|
||
<div class="bg-white dark:bg-slate-900 w-full md:max-w-md md:rounded-xl rounded-t-xl max-h-[92vh] overflow-y-auto">
|
||
<div class="px-5 py-3 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
|
||
<h3 class="font-semibold text-sm">{{ store.providerModal.editing ? '编辑平台' : '新增平台' }}</h3>
|
||
<button @click="store.providerModal.show=false" class="text-slate-400 hover:text-slate-600">✕</button>
|
||
</div>
|
||
<form @submit.prevent="save" class="px-5 py-4 space-y-3" v-if="f">
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<label class="block"><span class="text-xs text-slate-500">标识 slug *</span><input v-model="f.slug" required placeholder="aliyun" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-500">名称 *</span><input v-model="f.name" required class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="block"><span class="text-xs text-slate-500">分类</span><select v-model="f.category" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"><option v-for="(l,k) in Fmt.CATEGORY_LABELS" :key="k" :value="k">{{ l }}</option></select></label>
|
||
<label class="block"><span class="text-xs text-slate-500">SDK类型</span><select v-model="f.sdk_type" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"><option value="">未指定</option><option v-for="o in sdkOptions" :key="o.type" :value="o.type">{{ o.type }}</option></select></label>
|
||
<label class="col-span-2 block"><span class="text-xs text-slate-500">官网</span><input v-model="f.website" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<label class="col-span-2 block"><span class="text-xs text-slate-500">管理面板URL</span><input v-model="f.console_url" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
<div v-if="currentFields.length" class="col-span-2 border border-slate-200 dark:border-slate-700 rounded-lg p-3 space-y-2">
|
||
<div class="text-xs font-medium text-slate-600 dark:text-slate-300">API 凭证（加密存储）</div>
|
||
<label v-for="field in currentFields" :key="field" class="block"><span class="text-xs text-slate-400">{{ field }}</span><input v-model="apiFields[field]" type="password" :placeholder="store.providerModal.editing ? '留空不修改' : '填写 ' + field" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
|
||
</div>
|
||
<div v-else-if="f.sdk_type" class="col-span-2 text-xs text-amber-600 dark:text-amber-400">该 SDK 类型暂无预设凭证字段（可后续扩展）</div>
|
||
<label class="col-span-2 flex items-center gap-2 text-sm text-slate-600 dark:text-slate-300"><input type="checkbox" v-model="f.enabled"> 启用</label>
|
||
</div>
|
||
<div class="flex justify-end gap-2">
|
||
<button type="button" @click="store.providerModal.show=false" class="px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-700 text-sm text-slate-600 dark:text-slate-300">取消</button>
|
||
<button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm hover:bg-blue-700">保存</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>`,
|
||
setup() {
|
||
const f = computed(() => store.providerModal.form);
|
||
const adapterMeta = ref([]);
|
||
const apiFields = reactive({});
|
||
onMounted(async () => {
|
||
try { const r = await Api.get('/providers/adapters'); adapterMeta.value = r.adapters || []; } catch (e) { /* ignore */ }
|
||
});
|
||
const sdkOptions = computed(() => {
|
||
const opts = [];
|
||
for (const m of adapterMeta.value) for (const t of (m.sdk_types || [])) opts.push({ type: t, fields: m.required_config || [] });
|
||
return opts;
|
||
});
|
||
const currentFields = computed(() => {
|
||
const opt = sdkOptions.value.find(o => o.type === (f.value && f.value.sdk_type));
|
||
return opt ? opt.fields : [];
|
||
});
|
||
function save() {
|
||
const cfg = {};
|
||
for (const field of currentFields.value) if (apiFields[field]) cfg[field] = apiFields[field];
|
||
if (Object.keys(cfg).length) f.value.api_config = JSON.stringify(cfg);
|
||
saveProvider();
|
||
}
|
||
return { store, Fmt, f, sdkOptions, currentFields, apiFields, save };
|
||
},
|
||
};
|
||
|
||
/* ================= 根组件 ================= */
|
||
const AppRoot = {
|
||
components: { DashboardView, AssetsView, ProvidersView, ServersView, DomainsView, SettingsView, AssetModal, ProviderModal },
|
||
template: `
|
||
<div class="min-h-screen md:flex">
|
||
<aside class="hidden md:flex flex-col w-52 shrink-0 border-r border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 sticky top-0 h-screen">
|
||
<div class="px-2 py-3 font-bold text-slate-900 dark:text-white">📦 {{ appName }}</div>
|
||
<nav class="space-y-1 mt-2">
|
||
<button v-for="n in navs" :key="n.key" @click="go(n.key)" class="w-full text-left px-3 py-2 rounded-lg text-sm flex items-center gap-2 transition" :class="store.view===n.key ? 'bg-blue-500/10 text-blue-600 dark:text-blue-400 font-medium' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800'">
|
||
<span>{{ n.icon }}</span>{{ n.label }}
|
||
</button>
|
||
</nav>
|
||
<div class="mt-auto pt-3 border-t border-slate-100 dark:border-slate-800">
|
||
<button @click="toggleDark" class="w-full text-left px-3 py-2 rounded-lg text-sm text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800">{{ store.dark ? '☀️ 浅色' : '🌙 深色' }}</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="flex-1 flex flex-col min-w-0">
|
||
<header class="sticky top-0 z-30 bg-white/80 dark:bg-slate-900/80 backdrop-blur border-b border-slate-200 dark:border-slate-800 px-4 py-3 flex items-center gap-3">
|
||
<h1 class="font-semibold text-slate-900 dark:text-white md:text-lg">{{ currentNav.label }}</h1>
|
||
<div class="ml-auto flex items-center gap-2">
|
||
<input v-if="store.view==='assets'" v-model="store.search" @input="reload" 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-48">
|
||
<button @click="quickAdd" class="text-sm px-3 py-1.5 rounded-lg bg-blue-600 text-white hover:bg-blue-700 whitespace-nowrap">+ 新增</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div v-if="store.error" class="mx-4 mt-3 px-4 py-2.5 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-900/50 text-red-700 dark:text-red-400 text-sm flex justify-between">
|
||
<span>⚠️ {{ store.error }}</span><button @click="store.error=''" class="font-bold">✕</button>
|
||
</div>
|
||
|
||
<main class="flex-1 p-4 pb-20 md:pb-6 overflow-y-auto">
|
||
<component :is="viewComponent"></component>
|
||
</main>
|
||
</div>
|
||
|
||
<nav class="md:hidden fixed bottom-0 inset-x-0 z-30 bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 flex">
|
||
<button v-for="n in navs" :key="n.key" @click="go(n.key)" class="flex-1 py-2 flex flex-col items-center gap-0.5 text-xs" :class="store.view===n.key ? 'text-blue-600 dark:text-blue-400' : 'text-slate-400'">
|
||
<span class="text-base">{{ n.icon }}</span>{{ n.label }}
|
||
</button>
|
||
</nav>
|
||
|
||
<asset-modal></asset-modal>
|
||
<provider-modal></provider-modal>
|
||
</div>`,
|
||
setup() {
|
||
const appName = Api.CFG.appName;
|
||
const navs = [
|
||
{ key: 'dashboard', label: '总览', icon: '📊' },
|
||
{ key: 'assets', label: '资产', icon: '📦' },
|
||
{ key: 'servers', label: '服务器', icon: '🖥️' },
|
||
{ key: 'domains', label: '域名', icon: '🌐' },
|
||
{ key: 'subscriptions', label: '订阅', icon: '💳' },
|
||
{ key: 'ai', label: 'AI账号', icon: '🤖' },
|
||
{ key: 'providers', label: '平台', icon: '🏢' },
|
||
{ key: 'settings', label: '设置', icon: '⚙️' },
|
||
];
|
||
const viewMap = { dashboard: 'dashboard-view', assets: 'assets-view', servers: 'servers-view', domains: 'domains-view', subscriptions: 'subscriptions-view', ai: 'ai-view', providers: 'providers-view', settings: 'settings-view' };
|
||
const currentNav = computed(() => navs.find(n => n.key === store.view) || navs[0]);
|
||
const viewComponent = computed(() => viewMap[store.view] || 'dashboard-view');
|
||
function go(key) { store.view = key; if (key !== 'servers') store.serverMetrics = {}; if (key === 'ai') { store.filterType = ''; store.filterStatus = ''; store.search = ''; loadAssets(); } }
|
||
function quickAdd() {
|
||
if (store.view === 'providers') return openProviderCreate();
|
||
if (store.view === 'ai') return openAICreate('');
|
||
const preset = store.view === 'domains' ? 'domain' : 'vps';
|
||
openAssetCreate(preset);
|
||
}
|
||
function toggleDark() { store.dark = !store.dark; applyDark(); }
|
||
return { store, appName, navs, currentNav, viewComponent, go, quickAdd, toggleDark, reload: loadAssets };
|
||
},
|
||
};
|
||
|
||
/* ================= 挂载 ================= */
|
||
const app = createApp(AppRoot);
|
||
app.component('dashboard-view', DashboardView);
|
||
app.component('assets-view', AssetsView);
|
||
app.component('providers-view', ProvidersView);
|
||
app.component('servers-view', ServersView);
|
||
app.component('domains-view', DomainsView);
|
||
app.component('subscriptions-view', SubscriptionsView);
|
||
app.component('ai-view', AIAccountsView);
|
||
app.component('settings-view', SettingsView);
|
||
applyDark();
|
||
loadAll();
|
||
app.mount('#app');
|