104 lines
6.5 KiB
JavaScript
104 lines
6.5 KiB
JavaScript
/* 设置视图 */
|
||
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 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>
|
||
<p class="text-xs text-slate-500 mb-2">导出所有资产为 JSON，可导入到新部署的实例，实现数据迁移。</p>
|
||
<div class="flex gap-2 flex-wrap items-center">
|
||
<button @click="exportData" 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>
|
||
<label 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 cursor-pointer">导入数据<input type="file" accept=".json" @change="onImportFile" class="hidden"></label>
|
||
</div>
|
||
<div v-if="dataResult" class="mt-2 text-xs px-3 py-2 rounded-lg bg-slate-50 dark:bg-slate-800/50">{{ dataResult }}</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">当前运行版本：<span class="text-slate-700 dark:text-slate-300 font-mono">v{{ version }} ({{ commit }})</span></div>
|
||
<p class="text-xs text-slate-400 mt-1">与本地 git rev-parse --short HEAD 比对，可确认线上是否为最新代码。</p>
|
||
</div>
|
||
</div>`,
|
||
setup() {
|
||
const notifyChannels = Vue.ref([]);
|
||
const notifyResult = Vue.ref('');
|
||
const dataResult = Vue.ref('');
|
||
const version = Api.CFG.version || 'dev';
|
||
const commit = Api.CFG.commit || 'unknown';
|
||
Vue.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; }
|
||
}
|
||
async function exportData() {
|
||
dataResult.value = '导出中…';
|
||
try {
|
||
const r = await Api.get('/assets/export');
|
||
const blob = new Blob([JSON.stringify(r, null, 2)], { type: 'application/json' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = 'vps-manager-export-' + new Date().toISOString().slice(0, 10) + '.json';
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
dataResult.value = '导出成功：' + r.count + ' 个资产';
|
||
} catch (e) { dataResult.value = '导出失败：' + e.message; }
|
||
}
|
||
function onImportFile(e) {
|
||
const file = e.target.files[0];
|
||
if (!file) return;
|
||
const reader = new FileReader();
|
||
reader.onload = async (ev) => {
|
||
dataResult.value = '导入中…';
|
||
try {
|
||
const data = JSON.parse(ev.target.result);
|
||
const r = await Api.post('/assets/import', data);
|
||
dataResult.value = '导入完成：新增 ' + r.created + '，更新 ' + r.updated + (r.errors && r.errors.length ? '，错误 ' + r.errors.length : '');
|
||
await loadAssets();
|
||
} catch (err) { dataResult.value = '导入失败：' + err.message; }
|
||
};
|
||
reader.readAsText(file);
|
||
}
|
||
return { store, settings, save: saveSettings, applyDark, notifyChannels, notifyResult, testNotify, checkRenewals, dataResult, exportData, onImportFile, version, commit };
|
||
},
|
||
};
|