Optimize UI loading speed

Author: zhaojing1987

src/App.css

@@ -0,0 +1,67 @@
+/* 骨架屏脉动动画 */
+@keyframes pulse {
+    0% {
+        opacity: 1;
+        background-color: #f0f0f0;
+    }
+
+    50% {
+        opacity: 0.4;
+        background-color: #e0e0e0;
+    }
+
+    100% {
+        opacity: 1;
+        background-color: #f0f0f0;
+    }
+}
+
+/* 应用图标样式优化 */
+.app-icon {
+    transition: transform 0.2s ease, opacity 0.3s ease;
+}
+
+.app-icon:hover {
+    transform: scale(1.05);
+}
+
+/* 图片加载渐变效果 */
+.app-image-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.app-image-loading {
+    opacity: 0;
+    animation: fadeIn 0.3s ease forwards;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+/* 骨架屏容器 */
+.skeleton-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+
+    100% {
+        background-position: 200% 0;
+    }
+}

src/helpers/api/apiCore.js

@@ -260,4 +260,4 @@ class APICore {
     };
 }
 
-export { APICore };
+export { APICore, getNginxConfig, getApiKey };

src/helpers/api/appHub.js

@@ -26,5 +26,11 @@ function GetSettingsBySection(section, params) {
     return api.get(`${baseUrl}`, params);
 }
 
-export { AppAvailable, AppCatalog, AppInstall, GetSettingsBySection };
+// 更新设置
+function UpdateSettingsBySection(section, key, value, params) {
+    const baseUrl = `/settings/${section}`;
+    return api.put(`${baseUrl}`, null, { ...params, key, value });
+}
+
+export { AppAvailable, AppCatalog, AppInstall, GetSettingsBySection, UpdateSettingsBySection };
 

src/helpers/api/configManager.js

@@ -0,0 +1,182 @@
+import cockpit from 'cockpit';
+import { getNginxConfig, getApiKey } from './apiCore';
+
+class ConfigManager {
+    constructor() {
+        this.config = null;
+        this.initializing = false;
+        this.initPromise = null;
+        this.cacheTimeout = 24 * 60 * 60 * 1000; // 24小时缓存
+    }
+
+    async initialize() {
+        if (this.config) {
+            console.log('[ConfigManager] Using cached config:', this.config);
+            return this.config;
+        }
+
+        if (this.initializing) {
+            console.log('[ConfigManager] Initialization in progress, waiting...');
+            return this.initPromise;
+        }
+
+        console.log('[ConfigManager] Starting config initialization...');
+        this.initializing = true;
+        this.initPromise = this._fetchConfig();
+
+        try {
+            this.config = await this.initPromise;
+            return this.config;
+        } finally {
+            this.initializing = false;
+        }
+    }
+
+    async _fetchConfig() {
+        console.time('[ConfigManager] Total config fetch time');
+
+        try {
+            // 先尝试从本地缓存获取（如果最近获取过且未过期）
+            const cachedConfig = this._getCachedConfig();
+            if (cachedConfig && this._isCacheValid(cachedConfig)) {
+                console.log('[ConfigManager] Using valid cache from localStorage');
+                console.timeEnd('[ConfigManager] Total config fetch time');
+                return cachedConfig.config;
+            }
+
+            console.log('[ConfigManager] Fetching fresh config...');
+
+            // 并行获取所有配置（利用apiCore中已有的缓存机制）
+            console.time('[ConfigManager] Config fetch');
+            const [nginxPort, apiKey] = await Promise.all([
+                getNginxConfig(),
+                getApiKey().catch(() => null) // API key 可选，失败时返回 null
+            ]);
+            console.timeEnd('[ConfigManager] Config fetch');
+
+            const config = {
+                nginxPort,
+                apiKey,
+                baseURL: `${window.location.protocol}//${window.location.hostname}:${nginxPort}`,
+                apiURL: `${window.location.protocol}//${window.location.hostname}:${nginxPort}/api`,
+                timestamp: Date.now()
+            };
+
+            // 缓存到本地存储
+            this._saveToCache(config);
+
+            console.log('[ConfigManager] Config initialized successfully:', config);
+            console.timeEnd('[ConfigManager] Total config fetch time');
+
+            return config;
+        } catch (error) {
+            console.error('[ConfigManager] Config initialization failed:', error);
+
+            // 尝试使用过期的缓存作为fallback
+            const cachedConfig = this._getCachedConfig();
+            if (cachedConfig) {
+                console.warn('[ConfigManager] Using expired cache as fallback');
+                return cachedConfig.config;
+            }
+
+            // 最后的fallback：默认配置
+            console.warn('[ConfigManager] Using default config as last resort');
+            const defaultConfig = this._getDefaultConfig();
+            console.timeEnd('[ConfigManager] Total config fetch time');
+            return defaultConfig;
+        }
+    }
+
+    _getCachedConfig() {
+        try {
+            const cached = localStorage.getItem('websoft9_app_config_cache');
+            return cached ? JSON.parse(cached) : null;
+        } catch (error) {
+            console.warn('[ConfigManager] Failed to read cache:', error);
+            return null;
+        }
+    }
+
+    _isCacheValid(cachedData) {
+        if (!cachedData || !cachedData.timestamp) {
+            return false;
+        }
+        return (Date.now() - cachedData.timestamp) < this.cacheTimeout;
+    }
+
+    _saveToCache(config) {
+        try {
+            const cacheData = {
+                config,
+                timestamp: Date.now()
+            };
+            localStorage.setItem('websoft9_app_config_cache', JSON.stringify(cacheData));
+            console.log('[ConfigManager] Config saved to cache');
+        } catch (error) {
+            console.warn('[ConfigManager] Failed to save cache:', error);
+        }
+    }
+
+    _getDefaultConfig() {
+        return {
+            nginxPort: 9000,
+            apiKey: null,
+            baseURL: `${window.location.protocol}//${window.location.hostname}:9000`,
+            apiURL: `${window.location.protocol}//${window.location.hostname}:9000/api`,
+            timestamp: Date.now()
+        };
+    }
+
+    getConfig() {
+        return this.config || this._getDefaultConfig();
+    }
+
+    // 清除缓存（用于调试或强制刷新）
+    clearCache() {
+        try {
+            localStorage.removeItem('websoft9_app_config_cache');
+            this.config = null;
+            this.initializing = false;
+            this.initPromise = null;
+            console.log('[ConfigManager] Cache cleared');
+        } catch (error) {
+            console.warn('[ConfigManager] Failed to clear cache:', error);
+        }
+    }
+
+    // 预加载配置（可选，用于进一步优化首次加载）
+    async preload() {
+        if (!this.config && !this.initializing) {
+            // 后台预加载，不阻塞UI
+            this.initialize().catch(error => {
+                console.warn('[ConfigManager] Preload failed:', error);
+            });
+        }
+    }
+
+    // 获取配置的简化方法
+    async getBaseURL() {
+        const config = await this.initialize();
+        return config.baseURL;
+    }
+
+    async getApiURL() {
+        const config = await this.initialize();
+        return config.apiURL;
+    }
+
+    async getNginxPort() {
+        const config = await this.initialize();
+        return config.nginxPort;
+    }
+}
+
+// 单例实例
+const configManager = new ConfigManager();
+
+// 开发环境下暴露到全局，方便调试
+if (process.env.NODE_ENV === 'development') {
+    window.configManager = configManager;
+}
+
+export default configManager;

src/helpers/api/index.js

@@ -1,6 +1,6 @@
 // @flow
-import { AppAvailable, AppCatalog, AppInstall, GetSettingsBySection } from './appHub';
+import { AppAvailable, AppCatalog, AppInstall, GetSettingsBySection, UpdateSettingsBySection } from './appHub';
 
 export {
-    AppAvailable, AppCatalog, AppInstall, GetSettingsBySection
+    AppAvailable, AppCatalog, AppInstall, GetSettingsBySection, UpdateSettingsBySection
 };