From a6bf05582856d656f3f8474f50d874139ec559f0 Mon Sep 17 00:00:00 2001 From: Afiq Date: Fri, 30 May 2025 11:45:35 +0800 Subject: [PATCH] Enhance loading experience by implementing quick loading logo fetch during SSR, update loading logo and site name retrieval logic, and replace toast notifications with alert prompts in site settings management. Remove unused Metabase and Notes pages. --- components/Loading.vue | 41 ++++++++++++++-- navigation/index.js | 12 ++--- pages/devtool/config/site-settings/index.vue | 38 +++++++-------- pages/metabase/index.vue | 49 -------------------- pages/notes/index.vue | 30 ------------ server/api/devtool/config/loading-logo.js | 44 ++++++++++++++++++ 6 files changed, 106 insertions(+), 108 deletions(-) delete mode 100644 pages/metabase/index.vue delete mode 100644 pages/notes/index.vue create mode 100644 server/api/devtool/config/loading-logo.js diff --git a/components/Loading.vue b/components/Loading.vue index 622fac5..1843a70 100644 --- a/components/Loading.vue +++ b/components/Loading.vue @@ -12,16 +12,49 @@ const refreshPage = () => { window.location.reload(true); }; +// Fast loading logo - fetch during SSR to prevent hydration flash +const { data: quickLoadingData } = await useLazyFetch("/api/devtool/config/loading-logo", { + default: () => ({ + data: { + siteLoadingLogo: '', + siteName: 'Loading...' + } + }), + transform: (response) => response.data || { + siteLoadingLogo: '', + siteName: 'Loading...' + } +}); + const loadingLogoSrc = computed(() => { - return 'http://localhost:3003/uploads/site-settings/loading-logo.png'; + // First priority: Quick loading data if available + if (quickLoadingData.value?.siteLoadingLogo) { + return quickLoadingData.value.siteLoadingLogo; + } + + // Second priority: Full site settings if loaded + if (!siteSettingsLoading.value && siteSettings.value.siteLoadingLogo) { + return siteSettings.value.siteLoadingLogo; + } + + // Fallback: Default logo + return '/img/logo/corradAF-logo.svg'; }); // Get site name with fallback const getSiteName = () => { - if (siteSettingsLoading.value) { - return 'Loading Logo'; + // First priority: Quick loading data + if (quickLoadingData.value?.siteName) { + return quickLoadingData.value.siteName; } - return siteSettings.value?.siteName || 'Loading Logo'; + + // Second priority: Full site settings + if (!siteSettingsLoading.value && siteSettings.value.siteName) { + return siteSettings.value.siteName; + } + + // Fallback + return 'Loading...'; }; diff --git a/navigation/index.js b/navigation/index.js index 6c10fbd..6002a6f 100644 --- a/navigation/index.js +++ b/navigation/index.js @@ -4,12 +4,12 @@ export default [ description: "", child: [ { - title: "Dashboard", - path: "/dashboard", - icon: "ic:outline-dashboard", - child: [], - meta: {}, - }, + "title": "Dashboard", + "path": "/dashboard", + "icon": "ic:outline-dashboard", + "child": [], + "meta": {} + } ], meta: {}, }, diff --git a/pages/devtool/config/site-settings/index.vue b/pages/devtool/config/site-settings/index.vue index d22b6e4..05f2139 100644 --- a/pages/devtool/config/site-settings/index.vue +++ b/pages/devtool/config/site-settings/index.vue @@ -5,7 +5,7 @@ definePageMeta({ requiresAuth: true, }); -const { $swal, $toast } = useNuxtApp(); +const { $swal } = useNuxtApp(); const { siteSettings, updateSiteSettings, applyThemeSettings, updateGlobalMeta } = useSiteSettings(); // Reactive data @@ -139,7 +139,7 @@ const loadSettings = async () => { } } catch (error) { console.error("Error loading settings:", error); - $toast.error("Failed to load site settings"); + alert("Failed to load site settings"); } finally { loading.value = false; } @@ -148,7 +148,7 @@ const loadSettings = async () => { // Save settings const saveSettings = async () => { if (!validateForm()) { - $toast.error("Please fix the validation errors"); + alert("Please fix the validation errors"); return; } @@ -160,7 +160,7 @@ const saveSettings = async () => { if (result && result.success) { originalSettings.value = { ...settings.value }; - $toast.success("Settings saved successfully"); + alert("Settings saved successfully"); // Apply changes // applyChanges(); // Temporarily commented out to isolate the error source @@ -175,7 +175,7 @@ const saveSettings = async () => { console.error("[SiteSettingsPage] 'result' from updateSiteSettings was undefined."); } - $toast.error(errorMsg); + alert(errorMsg); if (result && result.error && result.error.details) { console.error("[SiteSettingsPage] Save settings error details:", result.error.details); @@ -189,7 +189,7 @@ const saveSettings = async () => { // This catch block is for unexpected errors during the saveSettings execution itself, // or if updateSiteSettings somehow re-throws an error not caught by its own try-catch. console.error("Critical error saving settings:", error); - $toast.error("A critical error occurred. Failed to save settings."); + alert("A critical error occurred. Failed to save settings."); } finally { saving.value = false; } @@ -220,7 +220,7 @@ const applyFontFromSource = () => { } } - $toast.success('Font applied successfully'); + alert('Font applied successfully'); } }; @@ -241,7 +241,7 @@ const uploadFile = async (file, type) => { return response.data.url; } catch (error) { console.error(`Error uploading ${type}:`, error); - $toast.error(`Failed to upload ${type}`); + alert(`Failed to upload ${type}`); return null; } }; @@ -253,7 +253,7 @@ const handleLogoUpload = async (event) => { const url = await uploadFile(file, 'logo'); if (url) { settings.value.siteLogo = url; - $toast.success('Logo uploaded successfully'); + alert('Logo uploaded successfully'); } } }; @@ -264,7 +264,7 @@ const handleLoadingLogoUpload = async (event) => { const url = await uploadFile(file, 'loading-logo'); if (url) { settings.value.siteLoadingLogo = url; - $toast.success('Loading logo uploaded successfully'); + alert('Loading logo uploaded successfully'); } } }; @@ -275,7 +275,7 @@ const handleFaviconUpload = async (event) => { const url = await uploadFile(file, 'favicon'); if (url) { settings.value.siteFavicon = url; - $toast.success('Favicon uploaded successfully'); + alert('Favicon uploaded successfully'); } } }; @@ -286,7 +286,7 @@ const handleLoginLogoUpload = async (event) => { const url = await uploadFile(file, 'login-logo'); if (url) { settings.value.siteLoginLogo = url; - $toast.success('Login logo uploaded successfully'); + alert('Login logo uploaded successfully'); } } }; @@ -295,14 +295,14 @@ const handleCSSUpload = async (event) => { const file = event.target.files[0]; if (file) { if (!file.name.endsWith('.css')) { - $toast.error('Please upload a valid CSS file'); + alert('Please upload a valid CSS file'); return; } const reader = new FileReader(); reader.onload = (e) => { settings.value.customCSS = e.target.result; - $toast.success('CSS file loaded successfully'); + alert('CSS file loaded successfully'); }; reader.readAsText(file); } @@ -314,7 +314,7 @@ const handleOgImageUpload = async (event) => { const url = await uploadFile(file, 'og-image'); if (url) { settings.value.seoOgImage = url; - $toast.success('OG image uploaded successfully'); + alert('OG image uploaded successfully'); } } }; @@ -332,7 +332,7 @@ const resetSettings = () => { settings.value = { ...originalSettings.value }; errors.value = {}; applyChanges(); - $toast.info('Settings reset to last saved state'); + alert('Settings reset to last saved state'); }; // Check for changes @@ -364,7 +364,7 @@ const applyGoogleFont = (font) => { settings.value.fontSource = googleFontUrl; settings.value.currentFont = font.name; applyFontFromSource(); - $toast.success(`${font.name} font applied successfully`); + alert(`${font.name} font applied successfully`); // Reset the dropdown after selection selectedGoogleFont.value = ''; } @@ -451,7 +451,7 @@ watch(() => settings.value.showSiteNameInHeader, (newValue) => {
-