feat(webui): optimize CSS build system and enhance UI quality

2026-01-11 02:56:51 +08:00
parent a56bc06cc1
commit bda9623f3a
11 changed files with 81 additions and 35 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Mark generated CSS file to reduce diff noise
+public/css/style.css linguist-generated=true -diff
--- a/public/css/src/input.css
+++ b/public/css/src/input.css
@@ -63,6 +63,10 @@
 }

 /* Custom Scrollbar */
+.custom-scrollbar {
+  scrollbar-gutter: stable;
+}
+
 ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
@@ -259,6 +263,7 @@
        rgba(15, 15, 17, 0.75) 0%,
        rgba(18, 18, 20, 0.70) 100%
    );
+    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.02) inset,
--- a/public/css/style.css
+++ b/public/css/style.css
--- a/public/index.html
+++ b/public/index.html
@@ -91,8 +91,8 @@
            <div class="h-4 w-px bg-space-border"></div>

            <!-- Refresh Button -->
-            <button class="btn btn-ghost btn-xs btn-square text-gray-400 hover:text-white hover:bg-white/5"
-                @click="fetchData" :disabled="loading" :title="$store.global.t('refreshData')">
+            <button type="button" class="btn btn-ghost btn-xs btn-square text-gray-400 hover:text-white hover:bg-white/5"
+                @click="fetchData" :disabled="loading" :title="$store.global.t('refreshData')" aria-label="Refresh data">
                <svg class="w-4 h-4" :class="{'animate-spin': loading}" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -171,15 +171,15 @@
            <!-- Footer Info -->
            <div class="mt-auto px-6 text-[10px] text-gray-700 font-mono">
                <div class="flex justify-between">
-                    <span>V 1.0.0</span>
-                    <a href="https://github.com/badri-s2001/antigravity-claude-proxy" target="_blank"
+                    <span x-text="'V ' + $store.global.version">V 1.0.0</span>
+                    <a href="https://github.com/badri-s2001/antigravity-claude-proxy" target="_blank" rel="noopener noreferrer"
                        class="hover:text-neon-purple transition-colors">GitHub</a>
                </div>
            </div>
        </div>

        <!-- Main Content -->
-        <div class="flex-1 overflow-auto bg-space-950 relative custom-scrollbar" style="scrollbar-gutter: stable;">
+        <div class="flex-1 overflow-auto bg-space-950 relative custom-scrollbar">

            <!-- Views Container -->
            <!-- Dashboard -->
@@ -257,12 +257,12 @@

            <div class="modal-action mt-6">
                <form method="dialog">
-                    <button class="btn btn-ghost hover:bg-white/10" x-text="$store.global.t('close')">Close</button>
+                    <button type="button" class="btn btn-ghost hover:bg-white/10" x-text="$store.global.t('close')">Close</button>
                </form>
            </div>
        </div>
        <form method="dialog" class="modal-backdrop">
-            <button x-text="$store.global.t('close')">close</button>
+            <button type="button" x-text="$store.global.t('close')">close</button>
        </form>
    </dialog>

--- a/public/js/components/claude-config.js
+++ b/public/js/components/claude-config.js
@@ -6,6 +6,7 @@ window.Components = window.Components || {};

 window.Components.claudeConfig = () => ({
    config: { env: {} },
+    configPath: '', // Dynamic path from backend
    models: [],
    loading: false,
    gemini1mSuffix: false,
@@ -76,7 +77,7 @@ window.Components.claudeConfig = () => ({
     */
    selectModel(field, modelId) {
        if (!this.config.env) this.config.env = {};
-        
+
        let finalModelId = modelId;
        // If 1M mode is enabled and it's a Gemini model, append the suffix
        if (this.gemini1mSuffix && modelId.toLowerCase().includes('gemini')) {
@@ -84,7 +85,7 @@ window.Components.claudeConfig = () => ({
                finalModelId = finalModelId.trim() + ' [1m]';
            }
        }
-        
+
        this.config.env[field] = finalModelId;
    },

@@ -97,6 +98,7 @@ window.Components.claudeConfig = () => ({
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            const data = await response.json();
            this.config = data.config || {};
+            this.configPath = data.path || '~/.claude/settings.json'; // Save dynamic path
            if (!this.config.env) this.config.env = {};

            // Default MCP CLI to true if not set
@@ -106,10 +108,10 @@ window.Components.claudeConfig = () => ({

            // Detect existing [1m] suffix state, default to true
            const hasExistingSuffix = this.detectGemini1mSuffix();
-            const hasGeminiModels = this.geminiModelFields.some(f => 
+            const hasGeminiModels = this.geminiModelFields.some(f =>
                this.config.env[f]?.toLowerCase().includes('gemini')
            );
-            
+
            // Default to enabled: if no suffix found but Gemini models exist, apply suffix
            if (!hasExistingSuffix && hasGeminiModels) {
                this.toggleGemini1mSuffix(true);
--- a/public/js/components/dashboard/charts.js
+++ b/public/js/components/dashboard/charts.js
@@ -149,7 +149,7 @@ window.DashboardCharts.updateCharts = function (component) {

  // Safety checks
  if (!canvas) {
-    console.warn("quotaChart canvas not found");
+    console.debug("quotaChart canvas not found");
    return;
  }
  if (typeof Chart === "undefined") {
@@ -157,7 +157,7 @@ window.DashboardCharts.updateCharts = function (component) {
    return;
  }
  if (!isCanvasReady(canvas)) {
-    console.warn("quotaChart canvas not ready, skipping update");
+    console.debug("quotaChart canvas not ready, skipping update");
    return;
  }

--- a/public/js/data-store.js
+++ b/public/js/data-store.js
@@ -69,6 +69,11 @@ document.addEventListener('alpine:init', () => {

                this.connectionStatus = 'connected';
                this.lastUpdated = new Date().toLocaleTimeString();
+
+                // Fetch version from config endpoint if not already loaded
+                if (this.initialLoad) {
+                    this.fetchVersion(password);
+                }
            } catch (error) {
                console.error('Fetch error:', error);
                this.connectionStatus = 'disconnected';
@@ -80,6 +85,20 @@ document.addEventListener('alpine:init', () => {
            }
        },

+        async fetchVersion(password) {
+            try {
+                const { response } = await window.utils.request('/api/config', {}, password);
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data.version) {
+                        Alpine.store('global').version = data.version;
+                    }
+                }
+            } catch (error) {
+                console.warn('Failed to fetch version:', error);
+            }
+        },
+
        computeQuotaRows() {
            const models = this.models || [];
            const rows = [];
--- a/public/js/store.js
+++ b/public/js/store.js
@@ -98,7 +98,8 @@ document.addEventListener('alpine:init', () => {
                opusAlias: "Opus Alias",
                sonnetAlias: "Sonnet Alias",
                haikuAlias: "Haiku Alias",
-                claudeSettingsAlert: "Settings below directly modify ~/.claude/settings.json. Restart Claude CLI to apply.",
+                claudeSettingsAlertPrefix: "Settings below directly modify",
+        claudeSettingsAlertSuffix: "Restart Claude CLI to apply.",
                applyToClaude: "Apply to Claude CLI",
                // Settings - Server
                port: "Port",
@@ -118,7 +119,7 @@ document.addEventListener('alpine:init', () => {
                sonnetModel: "Sonnet Model",
                haikuModel: "Haiku Model",
                authToken: "Auth Token",
-                saveConfig: "Save to ~/.claude/settings.json",
+                saveConfig: "Save to Claude CLI settings",
                envVar: "Env",
                // New Keys
                systemName: "ANTIGRAVITY",
@@ -346,7 +347,8 @@ document.addEventListener('alpine:init', () => {
                opusAlias: "Opus 别名",
                sonnetAlias: "Sonnet 别名",
                haikuAlias: "Haiku 别名",
-                claudeSettingsAlert: "以下设置直接修改 ~/.claude/settings.json。重启 Claude CLI 生效。",
+                claudeSettingsAlertPrefix: "以下设置直接修改",
+        claudeSettingsAlertSuffix: "重启 Claude CLI 生效。",
                applyToClaude: "应用到 Claude CLI",
                // Settings - Server
                port: "端口",
@@ -366,7 +368,7 @@ document.addEventListener('alpine:init', () => {
                sonnetModel: "Sonnet 模型",
                haikuModel: "Haiku 模型",
                authToken: "认证令牌",
-                saveConfig: "保存到 ~/.claude/settings.json",
+                saveConfig: "保存到 Claude CLI 设置",
                envVar: "环境变量",
                // New Keys
                systemName: "ANTIGRAVITY",
--- a/public/views/settings.html
+++ b/public/views/settings.html
@@ -53,7 +53,7 @@
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+                            d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
                    </svg>
                    <span x-text="$store.global.t('tabServer')">Server</span>
                </button>
@@ -197,9 +197,11 @@
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
-                    <span class="text-gray-400" x-text="$store.global.t('claudeSettingsAlert')">Settings below directly
-                        modify <code class="text-neon-cyan font-mono">~/.claude/settings.json</code>. Restart Claude CLI
-                        to apply.</span>
+                    <span class="text-gray-400">
+                        <span x-text="$store.global.t('claudeSettingsAlertPrefix')">Settings below directly modify</span>
+                        <code class="text-neon-cyan font-mono" x-text="configPath">~/.claude/settings.json</code>.
+                        <span x-text="$store.global.t('claudeSettingsAlertSuffix')">Restart Claude CLI to apply.</span>
+                    </span>
                </div>

                <!-- Base URL -->
--- a/src/webui/index.js
+++ b/src/webui/index.js
@@ -13,6 +13,8 @@
 */

 import path from 'path';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
 import express from 'express';
 import { getPublicConfig, saveConfig, config } from '../config.js';
 import { DEFAULT_PORT, ACCOUNT_CONFIG_PATH } from '../constants.js';
@@ -21,6 +23,18 @@ import { logger } from '../utils/logger.js';
 import { getAuthorizationUrl, completeOAuthFlow, startCallbackServer } from '../auth/oauth.js';
 import { loadAccounts, saveAccounts } from '../account-manager/storage.js';

+// Get package version
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+let packageVersion = '1.0.0';
+try {
+    const packageJsonPath = path.join(__dirname, '../../package.json');
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+    packageVersion = packageJson.version;
+} catch (error) {
+    logger.warn('[WebUI] Could not read package.json version, using default');
+}
+
 // OAuth state storage (state -> { server, verifier, state, timestamp })
 // Maps state ID to active OAuth flow data
 const pendingOAuthFlows = new Map();
@@ -254,6 +268,7 @@ export function mountWebUI(app, dirname, accountManager) {
            res.json({
                status: 'ok',
                config: publicConfig,
+                version: packageVersion,
                note: 'Edit ~/.config/antigravity-proxy/config.json or use env vars to change these values'
            });
        } catch (error) {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: [
-    "./public/**/*.{html,js}",
-    "./public/views/**/*.html",
-    "./public/js/**/*.js"
+    "./public/**/*.{html,js}"  // Simplified: already covers all subdirectories
  ],
  darkMode: 'class',
  theme: {
@@ -37,16 +35,17 @@ export default {
  daisyui: {
    themes: [{
      antigravity: {
-        "primary": "var(--color-neon-purple)",
-        "secondary": "var(--color-neon-green)",
-        "accent": "var(--color-neon-cyan)",
-        "neutral": "var(--color-space-800)",
-        "base-100": "var(--color-space-950)",
-        "info": "var(--color-neon-cyan)",
-        "success": "var(--color-neon-green)",
-        "warning": "var(--color-neon-yellow)",
-        "error": "var(--color-neon-red)",
+        "primary": "#a855f7",    // neon-purple
+        "secondary": "#22c55e",  // neon-green
+        "accent": "#06b6d4",     // neon-cyan
+        "neutral": "#18181b",    // space-800
+        "base-100": "#09090b",   // space-950
+        "info": "#06b6d4",       // neon-cyan
+        "success": "#22c55e",    // neon-green
+        "warning": "#eab308",    // neon-yellow
+        "error": "#ef4444",      // neon-red
      }
-    }]
+    }],
+    logs: false  // Disable console logs in production
  }
 }