feat: Add Web UI for account and quota management

## Summary Add an optional Web UI for managing accounts and monitoring quotas. WebUI is implemented as a modular plugin with minimal changes to server.js (only 5 lines added). ## New Features - Dashboard: Real-time model quota visualization with Chart.js - Accounts: OAuth-based account management (add/enable/disable/refresh/remove) - Logs: Live server log streaming via SSE with search and level filtering - Settings: System configuration with 4 tabs - Interface: Language (EN/zh_CN), polling interval, log buffer size, display options - Claude CLI: Proxy connection config, model selection, alias overrides (~/.claude.json) - Models: Model visibility and ordering management - Server Info: Runtime info and account config reload ## Technical Changes - Add src/webui/index.js as modular plugin (all WebUI routes encapsulated) - Add src/config.js for centralized configuration (~/.config/antigravity-proxy/config.json) - Add authMiddleware for optional password protection (WEBUI_PASSWORD env var) - Enhance logger with EventEmitter for SSE log streaming - Make constants configurable via config.json - Merge with main v1.2.6 (model fallback, cross-model thinking) - server.js changes: only 5 lines added to import and mount WebUI module ## Bug Fixes - Fix Alpine.js $watch error in settings-store.js (not supported in store init) - Fix "OK" label to "SUCCESS" in logs filter - Add saveSettings() calls to settings toggles for proper persistence - Improve Claude CLI config robustness (handle empty/invalid JSON files) - Add safety check for empty config.env in claude-config component - Improve config.example.json instructions with clear Windows/macOS/Linux paths ## New Files - src/webui/index.js - WebUI module with all API routes - public/ - Complete Web UI frontend (Alpine.js + TailwindCSS + DaisyUI) - src/config.js - Configuration management - src/utils/claude-config.js - Claude CLI settings helper - tests/frontend/ - Frontend test suite ## API Endpoints Added - GET/POST /api/config - Server configuration - GET/POST /api/claude/config - Claude CLI configuration - POST /api/models/config - Model alias/hidden settings - GET /api/accounts - Account list with status - POST /api/accounts/:email/toggle - Enable/disable account - POST /api/accounts/:email/refresh - Refresh account token - DELETE /api/accounts/:email - Remove account - GET /api/logs - Log history - GET /api/logs/stream - Live log streaming (SSE) - GET /api/auth/url - OAuth URL generation - GET /oauth/callback - OAuth callback handler ## Backward Compatibility - Default port remains 8080 - All existing CLI/API functionality unchanged - WebUI is entirely optional - Can be disabled by removing mountWebUI() call
2026-01-04 08:32:36 +08:00
parent d03c79cc39
commit 85f7d3bae7
34 changed files with 4330 additions and 23 deletions
--- a/public/js/app-init.js
+++ b/public/js/app-init.js
@@ -0,0 +1,106 @@
+/**
+ * App Initialization (Non-module version)
+ * This must load BEFORE Alpine initializes
+ */
+
+document.addEventListener('alpine:init', () => {
+    console.log('Registering app component...');
+
+    // Main App Controller
+    Alpine.data('app', () => ({
+        // Re-expose store properties for easier access in navbar
+        get connectionStatus() {
+            return Alpine.store('data').connectionStatus;
+        },
+        get loading() {
+            return Alpine.store('data').loading;
+        },
+
+        init() {
+            console.log('App component initializing...');
+
+            // Theme setup
+            document.documentElement.setAttribute('data-theme', 'black');
+            document.documentElement.classList.add('dark');
+
+            // Chart Defaults
+            if (typeof Chart !== 'undefined') {
+                Chart.defaults.color = '#71717a';
+                Chart.defaults.borderColor = '#27272a';
+                Chart.defaults.font.family = '"JetBrains Mono", monospace';
+            }
+
+            // Start Data Polling
+            this.startAutoRefresh();
+            document.addEventListener('refresh-interval-changed', () => this.startAutoRefresh());
+
+            // Initial Fetch
+            Alpine.store('data').fetchData();
+        },
+
+        refreshTimer: null,
+
+        fetchData() {
+            Alpine.store('data').fetchData();
+        },
+
+        startAutoRefresh() {
+            if (this.refreshTimer) clearInterval(this.refreshTimer);
+            const interval = parseInt(Alpine.store('settings').refreshInterval);
+            if (interval > 0) {
+                this.refreshTimer = setInterval(() => Alpine.store('data').fetchData(), interval * 1000);
+            }
+        },
+
+        // Translation helper for modal (not in a component scope)
+        t(key) {
+            return Alpine.store('global').t(key);
+        },
+
+        // Add account handler for modal
+        async addAccountWeb(reAuthEmail = null) {
+            const password = Alpine.store('global').webuiPassword;
+            try {
+                const urlPath = reAuthEmail
+                    ? `/api/auth/url?email=${encodeURIComponent(reAuthEmail)}`
+                    : '/api/auth/url';
+
+                const { response, newPassword } = await window.utils.request(urlPath, {}, password);
+                if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+                const data = await response.json();
+
+                if (data.status === 'ok') {
+                    const width = 600;
+                    const height = 700;
+                    const left = (screen.width - width) / 2;
+                    const top = (screen.height - height) / 2;
+
+                    window.open(
+                        data.url,
+                        'google_oauth',
+                        `width=${width},height=${height},top=${top},left=${left},scrollbars=yes`
+                    );
+
+                    const messageHandler = (event) => {
+                        if (event.data?.type === 'oauth-success') {
+                            const action = reAuthEmail ? 're-authenticated' : 'added';
+                            Alpine.store('global').showToast(`Account ${event.data.email} ${action} successfully`, 'success');
+                            Alpine.store('data').fetchData();
+
+                            const modal = document.getElementById('add_account_modal');
+                            if (modal) modal.close();
+                        }
+                    };
+
+                    window.addEventListener('message', messageHandler);
+                    setTimeout(() => window.removeEventListener('message', messageHandler), 300000);
+                } else {
+                    Alpine.store('global').showToast(data.error || 'Failed to get auth URL', 'error');
+                }
+            } catch (e) {
+                Alpine.store('global').showToast('Failed to start OAuth flow: ' + e.message, 'error');
+            }
+        }
+    }));
+});