/* 资产编辑模态框 */ const AssetModal = { template: `

{{ store.assetModal.editing ? '编辑资产' : '新增资产' }}

VPS 详情
域名详情
AI 账号详情
Cloudflare 子资产详情
`, setup() { const f = Vue.computed(() => store.assetModal.form); const providersForType = Vue.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]; if (!cat) return store.providers; // 综合平台按 services 过滤（如阿里云可同时选 vps/domain）；services 为空时回退分类匹配 return store.providers.filter(p => { if (p.services) return p.services.split(',').map(s => s.trim()).includes(cat); return p.category === cat || p.category === 'other'; }); }); function onProviderChange() { const p = store.providers.find(x => x.id === f.value.provider_id); if (p) f.value.provider = p.slug; } // 账号候选显示：平台名 + 账号标识（同名账号靠平台前缀区分），说明优先 function accountLabel(a) { const p = store.providers.find(x => x.slug === a.platform); const pname = p ? p.name : (a.platform || '未指定平台'); if (a.remark) return pname + ' · ' + a.remark + '（' + a.name + '）'; return pname + ' · ' + a.name; } return { store, Fmt, f, providersForType, onProviderChange, accountLabel, save: saveAsset }; }, }; /* 平台编辑模态框 */ const ProviderModal = { template: `

{{ store.providerModal.editing ? '编辑平台' : '新增平台' }}

提供服务（可多选，综合平台全选）
API 凭证请在平台账号中配置：保存后在平台卡片点「账号」→ 新增账号并填写 API 配置，即可测试/同步。
`, setup() { const f = Vue.computed(() => store.providerModal.form); const sdkOptions = Vue.ref([]); Vue.onMounted(async () => { try { const r = await Api.get('/providers/adapters'); const opts = []; for (const m of (r.adapters || [])) for (const t of (m.sdk_types || [])) opts.push(t); sdkOptions.value = opts; } catch (e) { /* ignore */ } }); // 提供服务多选：services 逗号分隔字符串 <-> checkbox 集合 const servicesSet = Vue.computed(() => new Set((f.value && f.value.services || '').split(',').map(s => s.trim()).filter(Boolean))); function toggleService(k) { const arr = (f.value.services || '').split(',').map(s => s.trim()).filter(Boolean); const idx = arr.indexOf(k); if (idx >= 0) arr.splice(idx, 1); else arr.push(k); f.value.services = arr.join(','); } // 凭证已下沉到账号层，平台表单不再收集 API 凭证 return { store, Fmt, f, sdkOptions, servicesSet, toggleService, save: saveProvider }; }, }; /* 账号编辑模态框（z-[60]：可能叠加在账号查看弹窗 z-50 之上打开，需更高层级） */ const AccountModal = { template: `

{{ store.accountModal.editing ? '编辑账号' : '新增账号' }}

API 配置（供 SDK 同步，加密存储）

修改账号标识后，引用该账号的资产会自动同步更新。

`, setup() { const f = Vue.computed(() => store.accountModal.form); const adapterMeta = Vue.ref([]); const apiFields = Vue.reactive({}); Vue.onMounted(async () => { try { const r = await Api.get('/providers/adapters'); adapterMeta.value = r.adapters || []; } catch (e) { /* ignore */ } }); // 按账号所属平台的 sdk_type 动态渲染所需凭证字段 const currentFields = Vue.computed(() => { const p = store.providers.find(x => x.slug === (f.value && f.value.platform)); if (!p || !p.sdk_type) return []; const m = adapterMeta.value.find(x => (x.sdk_types || []).includes(p.sdk_type)); return m ? (m.required_config || []) : []; }); // 每次打开清空残留输入，避免串号 Vue.watch(() => store.accountModal.show, (show) => { if (show) { for (const k of Object.keys(apiFields)) delete apiFields[k]; } }); function save() { const cfg = {}; for (const field of currentFields.value) if (apiFields[field]) cfg[field] = apiFields[field]; f.value.api_config = Object.keys(cfg).length ? JSON.stringify(cfg) : ''; saveAccount(); } return { store, f, currentFields, apiFields, save }; }, }; /* 账号查看弹窗：平台 → 账号 → 资产 三层结构，展开账号看名下资产 */ const AccountsViewModal = { template: `

👤 {{ title }}（{{ accountList.length }}）

暂无账号。一个平台可有多个账号（如代管/公司账号），添加后可在资产表单「所属账号」中选择。

{{ g.platform ? platformName(g.platform) : '未指定平台' }}
{{ a.remark || a.name }} 🔑登录 ⚙️API
{{ a.name }} · 关联 {{ assetsOf(a).length }} 个资产

该账号下暂无资产（编辑资产时在「所属账号」选择 {{ a.name }} 即可关联）

{{ Fmt.TYPE_LABELS[asset.asset_type] }} {{ asset.name }} {{ asset.expiry_date }} 到期

🔑 {{ pwd.name }} 的登录凭证

用户名 {{ pwd.login_user }}
密码 {{ pwd.password }}
2FA {{ otp.code }} {{ otp.expiresIn }}s
⚠ 此 2FA 的 secret 未经校验；若在该站点登录失败，请到凭据库核对补验。

{{ pwd.countdown }}s 后自动关闭

`, setup() { const expanded = Vue.reactive({}); const pwd = Vue.reactive({ show: false, name: '', login_user: '', password: '', copied: false, countdown: 0, otpId: null, otpVerified: false, _timer: null }); // 当前动态码（来自全局 otpState，服务端生成、secret 不下发） const otp = Vue.computed(() => (pwd.otpId ? (otpState[pwd.otpId] || { code: '', expiresIn: 0 }) : { code: '', expiresIn: 0 })); const singleProvider = Vue.computed(() => !!store.accountsModal.providerSlug); const title = Vue.computed(() => { const slug = store.accountsModal.providerSlug; if (!slug) return '全部账号'; const p = store.providers.find(x => x.slug === slug); return (p ? p.name : slug) + ' 的账号'; }); const accountList = Vue.computed(() => { const slug = store.accountsModal.providerSlug; return slug ? store.accounts.filter(a => a.platform === slug) : store.accounts; }); // 全部模式下按平台分组，保持 平台→账号→资产 层级 const groups = Vue.computed(() => { const m = new Map(); for (const a of accountList.value) { const key = a.platform || ''; if (!m.has(key)) m.set(key, []); m.get(key).push(a); } return [...m.entries()].map(([platform, accounts]) => ({ platform, accounts })); }); function platformName(slug) { const p = store.providers.find(x => x.slug === slug); return p ? p.name : slug; } function assetsOf(a) { // 用 allAssets（全量口径）：账号名下有多少资产是事实，不该受资产页筛选影响 return store.allAssets.filter(x => x.account_id === a.id); } function toggle(id) { expanded[id] = !expanded[id]; } // 账号所属平台配了 sdk_type 且账号有 API 配置时，提供测试/同步 function providerOf(a) { return store.providers.find(p => p.slug === a.platform) || store.providers.find(p => p.name === a.platform); } function canSync(a) { const p = providerOf(a); return !!(a.has_api_config && p && p.sdk_type); } async function testAcct(a) { try { const r = await Api.post('/accounts/' + a.id + '/test', {}); showResult(r.ok ? '测试成功' : '测试失败', r.message, !r.ok); } catch (e) { showResult('测试失败', e.message, true); } } async function syncAcct(a) { try { const r = await Api.post('/accounts/' + a.id + '/sync', {}); const lines = ['同步完成']; if (r.vps) lines.push('VPS：新增 ' + r.vps.created + ' / 更新 ' + r.vps.updated); if (r.domains) lines.push('域名：新增 ' + r.domains.created + ' / 更新 ' + r.domains.updated); if (r.vps_error) lines.push('VPS 错误：' + r.vps_error); if (r.domains_error) lines.push('域名错误：' + r.domains_error); showResult('同步完成', lines.join('\n')); // 同步会新建/更新资产（含到期日），总览的统计卡片也得跟着刷， // 否则回到总览看到的还是同步前的数字 await Promise.all([loadAccounts(), loadAssets(), loadOverview()]); } catch (e) { showResult('同步失败', e.message, true); } } // 每次打开重置展开状态；关闭时连带收掉密码弹窗 // 外层弹窗用 v-if 控制，但本组件实例并不卸载，onUnmounted 不会触发： // 不主动清理就会留下 OTP 轮询定时器与驻留的明文密码，重开弹窗还会复现旧内容 Vue.watch(() => store.accountsModal.show, (show) => { if (show) { for (const k of Object.keys(expanded)) delete expanded[k]; } else closePwd(); }); // 查看密码：拉取明文并展示，8 秒后自动关闭；账号绑定 2FA 时一并取动态码且不自动关 async function viewPwd(a) { try { const r = await Api.get('/accounts/' + a.id + '/password'); pwd.name = a.remark || a.name; pwd.login_user = r.login_user || ''; pwd.password = r.password; pwd.copied = false; pwd.show = true; if (pwd._timer) clearInterval(pwd._timer); if (a.has_otp && a.credential_id) { // 验证码需看满 30s 周期，此时不自动关闭（countdown=0 不显示倒计时） pwd.otpId = a.credential_id; pwd.otpVerified = !!a.otp_verified; pwd.countdown = 0; fetchOtp(a.credential_id); } else { pwd.otpId = null; pwd.countdown = 8; pwd._timer = setInterval(() => { pwd.countdown--; if (pwd.countdown <= 0) closePwd(); }, 1000); } } catch (e) { showResult('获取密码失败', e.message, true); } } function closePwd() { pwd.show = false; pwd.password = ''; if (pwd.otpId) { stopOtp(pwd.otpId); pwd.otpId = null; } if (pwd._timer) { clearInterval(pwd._timer); pwd._timer = null; } } function copyOtpCode() { if (otp.value.code) copyText(otp.value.code, '验证码'); } function copyPwd() { const done = () => { pwd.copied = true; setTimeout(() => { pwd.copied = false; }, 1500); }; if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(pwd.password).then(done).catch(() => fallbackCopy()); } else { fallbackCopy(); } function fallbackCopy() { const ta = document.createElement('textarea'); ta.value = pwd.password; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); done(); } catch (e) {} document.body.removeChild(ta); } } // 关闭弹窗时清定时器并停掉动态码刷新，避免泄漏 Vue.watch(() => pwd.show, (v) => { if (!v) closePwd(); }); return { store, Fmt, expanded, pwd, otp, singleProvider, title, accountList, groups, platformName, assetsOf, toggle, canSync, testAcct, syncAcct, viewPwd, copyPwd, closePwd, copyOtpCode, copyAcctPwd: copyAccountPassword, add: () => openAccountCreate(store.accountsModal.providerSlug || ''), edit: openAccountEdit, del: deleteAccount, }; }, }; /* 凭据编辑模态框（密码库） * * 粒度 = 站点 × 登录方式：同一邮箱注册多个站点就录多条，密码相同也各存一份。 * 2FA 的动态码是选填：填了就当场校验（防 secret 手误成废条目），拿不到可以先存着， * 条目会标「未验证」，之后在列表里随时补验。 */ const CredentialModal = { template: `

{{ store.credentialModal.editing ? '编辑凭据' : '新增凭据' }}

{{ g.name }}

「{{ f.oauth_provider }}」不在候选里，会按原样保存，并记入上面的自定义候选

🛡 2FA（TOTP 动态码）

粘贴 otpauth:// 链接或直接填 secret。当前 6 位动态码能拿到就顺手填上（服务端校验，确认没抄错）；拿不到就留空先存着，条目会标「未验证」，之后在列表里随时补验。

`, setup() { const f = Vue.computed(() => store.credentialModal.form); // 候选清单：手填留存值置顶（最近用过），其后按预设的国内/国际/开发者分组 const oauthAll = Vue.computed(() => [ ...store.oauthCustom.map(k => ({ key: k, label: k, group: '自定义（我填过的）', custom: true })), ...Fmt.OAUTH_PRESETS, ]); function groupOptions(list) { const groups = []; for (const o of list) { let g = groups.find(x => x.name === o.group); if (!g) { g = { name: o.group, items: [] }; groups.push(g); } g.items.push(o); } return groups; } // 输入时同步过滤（key / 中文名都能搜）；没命中就退回完整清单，避免逼用户先删字 const oauthGroups = Vue.computed(() => { const all = oauthAll.value; const kw = ((f.value && f.value.oauth_provider) || '').trim().toLowerCase(); if (!kw) return groupOptions(all); const hit = all.filter(o => o.key.toLowerCase().includes(kw) || o.label.toLowerCase().includes(kw)); return hit.length ? groupOptions(hit) : groupOptions(all); }); // 手填的新值给出明确反馈：会按原样入库并成为候选 const oauthUnmatched = Vue.computed(() => { const key = Fmt.normalizeOauth((f.value && f.value.oauth_provider) || ''); return !!key && !oauthAll.value.some(o => o.key === key); }); function pickOauth(key) { if (f.value) f.value.oauth_provider = key; } // 动态码为可选：填了就要求格式正确（值由服务端校验），没填则存为「未验证」。 // 不能再要求必填：secret 多为历史留存，录入时手上常常没有可用验证器。 function save() { const code = ((f.value && f.value.otp_code) || '').trim(); if (code && !/^\d{6}$/.test(code)) { store.error = '动态码需为 6 位数字；拿不到可以留空先存着'; return; } saveCredential(); } return { store, Fmt, f, oauthGroups, oauthUnmatched, pickOauth, dropOauth: dropOauthProvider, save }; }, }; /* ================= 云资源操作弹窗（启停/重启/续费） ================= * 每个按钮都会真实改变云端资源，所以： * 1. 可用性完全由后端 /actions/{id}/capabilities 决定，前端不自作主张放开 * 2. 点击后先出二次确认条，写清后果（续费会扣款、关机会中断服务） * 3. 不支持时如实说明原因，而不是给一个点了才报错的按钮 */ const ActionModal = { template: `

⚡ 云资源操作

{{ m.asset && m.asset.name }}
{{ m.asset.provider }} · {{ m.asset.external_id }}
正在查询该平台支持的操作…
{{ m.error }}
该平台暂不支持远程操作
{{ m.caps.reason || '适配器未实现对应能力，请到云厂商控制台操作。' }}
`, setup() { const m = actionModal; const actions = [ { key: 'start', label: '开机', icon: '▶', cls: 'border-emerald-300 dark:border-emerald-800 text-emerald-700 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-900/20' }, { key: 'stop', label: '关机', icon: '⏻', cls: 'border-red-300 dark:border-red-800 text-red-700 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20' }, { key: 'reboot', label: '重启', icon: '⟳', cls: 'border-amber-300 dark:border-amber-800 text-amber-700 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/20' }, { key: 'renew', label: '续费', icon: '💳', cls: 'border-blue-300 dark:border-blue-800 text-blue-700 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20' }, ]; const capsText = Vue.computed(() => { if (!m.caps || !m.caps.sdk_type || !m.caps.sdk_type.length) return '未知'; return m.caps.sdk_type.join(' / '); }); return { m, actions, capsText, label: (k) => ACTION_LABELS[k] || k, warn: (k) => ACTION_WARNS[k] || '', ask: askAction, run: runAction, close: closeActions, }; }, }; /* ================= DNS 解析记录管理弹窗 ================= */ const DnsModal = { template: `

🌐 DNS 解析 · {{ m.zoneId }}

正在读取解析记录…
{{ m.error }}
`, setup() { const m = dnsModal; const isCloudflare = Vue.computed(() => m.provider === 'cloudflare' || m.provider === 'cloudflare-api'); // 显式判 null：MX 优先级 0 是合法值且为 falsy，用 r.priority 直接当真值会漏显示 const hasPriority = (r) => r.priority !== null && r.priority !== undefined && r.priority !== ''; return { m, recordTypes: RECORD_TYPES, isCloudflare, hasPriority, newRecord: newDnsRecord, editRecord: editDnsRecord, cancelEdit: cancelDnsEdit, save: saveDnsRecord, del: deleteDnsRecord, close: closeDns, }; }, }; /* ================= 全局确认弹窗（替代原生 confirm） ================= */ const ConfirmModal = { template: `

{{ store.confirmModal.title }}

{{ store.confirmModal.message }}

`, setup() { return { store, closeConfirm }; }, }; /* ================= 全局结果弹窗（替代原生 alert） ================= */ const ResultModal = { template: `

{{ store.resultModal.title }}

{{ store.resultModal.message }}

`, setup() { return { store, closeResult }; }, };