feat(webui): 新增webui和状态查看接口

2025-10-07 15:01:33 +08:00
parent 0359e2a9d5
commit 950e2fada5
5 changed files with 418 additions and 1 deletions
@@ -0,0 +1,136 @@
+class TimerController {
+    constructor() {
+        this.secret = localStorage.getItem('timerSecret') || '';
+        this.baseURL = window.location.origin;
+        this.initElements();
+        this.bindEvents();
+        this.updateSecretDisplay();
+        
+        // 自动刷新状态
+        this.startAutoRefresh();
+    }
+
+    initElements() {
+        this.secretInput = document.getElementById('secret');
+        this.saveSecretBtn = document.getElementById('save-secret');
+        this.refreshStatusBtn = document.getElementById('refresh-status');
+        this.sendSignalBtn = document.getElementById('send-signal');
+        this.remainingTimeEl = document.getElementById('remaining-time');
+        this.progressFillEl = document.getElementById('progress-fill');
+        this.notificationEl = document.getElementById('notification');
+    }
+
+    bindEvents() {
+        this.saveSecretBtn.addEventListener('click', () => this.saveSecret());
+        this.refreshStatusBtn.addEventListener('click', () => this.fetchStatus());
+        this.sendSignalBtn.addEventListener('click', () => this.sendSignal());
+        
+        // 回车键保存密钥
+        this.secretInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                this.saveSecret();
+            }
+        });
+    }
+
+    saveSecret() {
+        const secret = this.secretInput.value.trim();
+        if (!secret) {
+            this.showNotification('请输入密钥', 'error');
+            return;
+        }
+        
+        this.secret = secret;
+        localStorage.setItem('timerSecret', secret);
+        this.updateSecretDisplay();
+        this.showNotification('密钥已保存', 'success');
+        this.fetchStatus(); // 保存后自动刷新状态
+    }
+
+    updateSecretDisplay() {
+        if (this.secret) {
+            this.secretInput.placeholder = '密钥已保存';
+            this.secretInput.value = '';
+        } else {
+            this.secretInput.placeholder = '输入您的访问密钥';
+        }
+    }
+
+    async fetchStatus() {
+        try {
+            const response = await fetch(`${this.baseURL}/timer/status`);
+            const data = await response.json();
+            
+            if (data.code === 200) {
+                this.displayTime(data.remaining_time);
+            } else {
+                this.showNotification('获取状态失败', 'error');
+            }
+        } catch (error) {
+            console.error('Error fetching status:', error);
+            this.showNotification('网络错误，请稍后重试', 'error');
+        }
+    }
+
+    displayTime(seconds) {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = Math.floor(seconds % 60);
+        
+        this.remainingTimeEl.textContent = 
+            `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        
+        // 更新进度条（假设最大时间为24小时）
+        const maxTime = 24 * 3600; // 24小时
+        const progress = Math.min(100, (seconds / maxTime) * 100);
+        this.progressFillEl.style.width = `${100 - progress}%`;
+    }
+
+    async sendSignal() {
+        if (!this.secret) {
+            this.showNotification('请先设置密钥', 'error');
+            return;
+        }
+        
+        try {
+            const response = await fetch(`${this.baseURL}/signal?secret=${encodeURIComponent(this.secret)}`);
+            const data = await response.json();
+            
+            if (data.code === 200) {
+                this.showNotification('信号发送成功！', 'success');
+                setTimeout(() => this.fetchStatus(), 1000); // 1秒后刷新状态
+            } else {
+                this.showNotification(`操作失败: ${data.message}`, 'error');
+            }
+        } catch (error) {
+            console.error('Error sending signal:', error);
+            this.showNotification('网络错误，请稍后重试', 'error');
+        }
+    }
+
+    showNotification(message, type) {
+        this.notificationEl.textContent = message;
+        this.notificationEl.className = `notification ${type} show`;
+        
+        setTimeout(() => {
+            this.notificationEl.classList.remove('show');
+        }, 3000);
+    }
+
+    startAutoRefresh() {
+        // 每30秒自动刷新一次状态
+        setInterval(() => {
+            if (this.secret) {
+                this.fetchStatus();
+            }
+        }, 30000);
+        
+        // 页面加载完成后立即获取一次状态
+        setTimeout(() => this.fetchStatus(), 1000);
+    }
+}
+
+// 初始化应用
+document.addEventListener('DOMContentLoaded', () => {
+    new TimerController();
+});