vps-manager/static/js/views/settings.js

/* 设置视图 */
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', {});
        // days 可为负（已过期），文案统一走 Fmt.countdownText，避免直出「-3 天后」
        const overdue = r.expiring.filter(i => i.days < 0).length;
        let text = (overdue ? '已过期 ' + overdue + ' 项 + ' : '') +
          '即将到期 ' + (r.expiring_count - overdue) + ' 项（阈值 ' + r.threshold_days + ' 天）';
        if (r.expiring.length) text += '\n' + r.expiring.map(i => '• ' + i.name + ' [' + i.provider + '] ' + Fmt.countdownText(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 };
  },
};