添加Prometheus初始化页面

public/init.html

@@ -124,6 +124,39 @@
         <button class="btn btn-add" id="btnInit">初始化数据库</button>
       </div>
     </div>
+    
+    <div class="init-form" id="promForm" style="display: none;">
+      <div class="form-row">
+        <div class="form-group form-group-wide">
+          <label for="promName">数据源名称 (Name)</label>
+          <input type="text" id="promName" placeholder="例如：生产环境" autocomplete="off">
+        </div>
+      </div>
+      
+      <div class="form-row">
+        <div class="form-group form-group-wide">
+          <label for="promUrl">Prometheus URL</label>
+          <input type="url" id="promUrl" placeholder="http://ip:9090" autocomplete="off">
+        </div>
+      </div>
+      
+      <div class="form-row">
+        <div class="form-group form-group-wide">
+          <label for="promDesc">描述 (Description)</label>
+          <input type="text" id="promDesc" placeholder="可选" autocomplete="off">
+        </div>
+      </div>
+      
+      <div class="form-message" id="promMessageBox"></div>
+      
+      <div class="actions">
+        <button class="btn btn-test" id="btnPromTest">测试连接</button>
+        <button class="btn btn-add" id="btnPromAdd">保存并应用</button>
+      </div>
+      <div style="text-align: center; margin-top: 15px;">
+        <a href="/" style="color: var(--text-muted); font-size: 14px; text-decoration: none;">跳过此步，直接进入系统</a>
+      </div>
+    </div>
   </div>
 
   <script src="/js/init.js"></script>

public/js/init.js

@@ -9,10 +9,27 @@ document.addEventListener('DOMContentLoaded', () => {
   const btnInit = document.getElementById('btnInit');
   const messageBox = document.getElementById('messageBox');
   
+  const initHeaderTitle = document.querySelector('.init-header h2');
+  const initHeaderDesc = document.querySelector('.init-header p');
+  
+  const promForm = document.getElementById('promForm');
+  const initForm = document.getElementById('initForm');
+  const promName = document.getElementById('promName');
+  const promUrl = document.getElementById('promUrl');
+  const promDesc = document.getElementById('promDesc');
+  const btnPromTest = document.getElementById('btnPromTest');
+  const btnPromAdd = document.getElementById('btnPromAdd');
+  const promMessageBox = document.getElementById('promMessageBox');
+
   function showMessage(msg, isError = false) {
     messageBox.textContent = msg;
     messageBox.className = 'form-message ' + (isError ? 'error' : 'success');
   }
+
+  function showPromMessage(msg, isError = false) {
+    promMessageBox.textContent = msg;
+    promMessageBox.className = 'form-message ' + (isError ? 'error' : 'success');
+  }
   
   btnTest.addEventListener('click', async () => {
     btnTest.disabled = true;
@@ -61,10 +78,13 @@ document.addEventListener('DOMContentLoaded', () => {
       });
       const data = await res.json();
       if (data.success) {
-        showMessage('初始化成功！即将跳转到系统首页面...');
+        showMessage('数据库初始化成功！进入下一步...');
         setTimeout(() => {
-          window.location.href = '/';
+          initForm.style.display = 'none';
-        }, 1500);
+          promForm.style.display = 'block';
+          initHeaderTitle.textContent = '配置 Prometheus';
+          initHeaderDesc.textContent = '配置您的第一个 Prometheus 数据源监控连接';
+        }, 1000);
       } else {
         showMessage('初始化失败: ' + (data.error || '未知错误'), true);
         btnInit.disabled = false;
@@ -76,4 +96,62 @@ document.addEventListener('DOMContentLoaded', () => {
       btnInit.textContent = oldText;
     }
   });
+
+  btnPromTest.addEventListener('click', async () => {
+    const url = promUrl.value.trim();
+    if (!url) return showPromMessage('请输入 Prometheus URL', true);
+    
+    btnPromTest.disabled = true;
+    const oldText = btnPromTest.textContent;
+    btnPromTest.textContent = '测试中...';
+    try {
+      const res = await fetch('/api/sources/test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url })
+      });
+      const data = await res.json();
+      if (data.status === 'ok') {
+        showPromMessage(`连接成功！Prometheus 版本: ${data.version}`);
+      } else {
+        showPromMessage(`连接失败: ${data.message || '未知错误'}`, true);
+      }
+    } catch (err) {
+      showPromMessage('请求失败: ' + err.message, true);
+    } finally {
+      btnPromTest.disabled = false;
+      btnPromTest.textContent = oldText;
+    }
+  });
+
+  btnPromAdd.addEventListener('click', async () => {
+    const name = promName.value.trim();
+    const url = promUrl.value.trim();
+    const description = promDesc.value.trim();
+    if (!name || !url) return showPromMessage('请填写名称和URL', true);
+    
+    btnPromAdd.disabled = true;
+    const oldText = btnPromAdd.textContent;
+    btnPromAdd.textContent = '保存中...';
+    try {
+      const res = await fetch('/api/sources', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, url, description })
+      });
+      if (res.ok) {
+        showPromMessage('数据源添加成功！即将跳转...');
+        setTimeout(() => window.location.href = '/', 1500);
+      } else {
+        const err = await res.json();
+        showPromMessage(`添加失败: ${err.error || '未知错误'}`, true);
+        btnPromAdd.disabled = false;
+        btnPromAdd.textContent = oldText;
+      }
+    } catch (err) {
+      showPromMessage('请求失败: ' + err.message, true);
+      btnPromAdd.disabled = false;
+      btnPromAdd.textContent = oldText;
+    }
+  });
 });