feat(boot): use boot-loader as splash with cached tenant logo

Remove the Vue splash overlay and unused duplicate public logos from dist output.

Co-authored-by: Cursor <cursoragent@cursor.com>

index.html

@@ -41,8 +41,14 @@
       }
 
       .boot-loader {
-          min-height: 100vh;
+          position: fixed;
+          inset: 0;
+          z-index: 2147483646;
+          width: 100%;
+          min-height: 100%;
+          min-height: 100dvh;
           display: flex;
+          flex-direction: column;
           align-items: center;
           justify-content: center;
           direction: rtl;
@@ -53,71 +59,36 @@
                   "Segoe UI",
                   sans-serif;
           background:
-                  radial-gradient(circle at top, var(--boot-orb), transparent 38%),
-                  linear-gradient(
-                          135deg,
-                          var(--boot-bg) 0%,
-                          var(--boot-bg-soft) 100%
-                  );
+                  radial-gradient(ellipse 70% 45% at 50% 28%, var(--boot-orb), transparent 70%),
+                  linear-gradient(180deg, var(--boot-bg) 0%, var(--boot-bg-soft) 100%);
           color: var(--boot-text);
           overflow: hidden;
       }
 
-      .boot-loader__card {
-          position: relative;
-          width: min(340px, calc(100vw - 48px));
-          padding: 30px 22px 28px;
-          border-radius: 24px;
-          text-align: center;
-          background: var(--boot-card);
-          border: 1px solid var(--boot-border);
-          box-shadow: 0 18px 48px var(--boot-shadow);
-          backdrop-filter: blur(10px);
+      .boot-loader__logo {
+          height: min(20vh, 160px);
+          width: auto;
+          max-width: min(70vw, 280px);
+          object-fit: contain;
+          opacity: 0;
+          transition: opacity 0.28s ease;
       }
 
-      .boot-loader__orb {
-          position: absolute;
-          top: -72px;
-          left: 50%;
-          width: 150px;
-          height: 150px;
-          transform: translateX(-50%);
-          border-radius: 999px;
-          background: var(--boot-orb);
-          filter: blur(8px);
-          pointer-events: none;
+      .boot-loader__logo.is-ready {
+          opacity: 1;
       }
 
       .boot-loader__spinner {
-          position: relative;
-          z-index: 1;
-          width: 56px;
-          height: 56px;
-          margin: 0 auto 20px;
+          position: absolute;
+          bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
+          width: 26px;
+          height: 26px;
           border-radius: 999px;
-          border: 4px solid var(--boot-spinner-track);
+          border: 3px solid var(--boot-spinner-track);
           border-top-color: var(--boot-accent);
           animation: boot-spin 0.9s linear infinite;
       }
 
-      .boot-loader__title {
-          position: relative;
-          z-index: 1;
-          margin: 0;
-          font-size: 19px;
-          font-weight: 800;
-          letter-spacing: -0.02em;
-      }
-
-      .boot-loader__text {
-          position: relative;
-          z-index: 1;
-          margin: 10px 0 0;
-          color: var(--boot-muted);
-          font-size: 14px;
-          line-height: 2;
-      }
-
       @keyframes boot-spin {
           to {
               transform: rotate(360deg);
@@ -143,16 +114,25 @@
         try {
           var rawCookie = getCookie(CONFIG_COOKIE_NAME)
 
-          if (!rawCookie) return null
-
-          var decoded = decodeURIComponent(rawCookie)
-          var payload = JSON.parse(decoded)
-
-          return payload && payload.config ? payload.config : null
+          if (rawCookie) {
+            var decoded = decodeURIComponent(rawCookie)
+            var payload = JSON.parse(decoded)
+            if (payload && payload.config) return payload.config
+          }
         } catch (error) {
           console.warn('Boot theme: failed to read cached config', error)
-          return null
         }
+
+        try {
+          var rawLs = localStorage.getItem('APP_CONFIG_LS_CACHE')
+          if (!rawLs) return null
+          var lsPayload = JSON.parse(rawLs)
+          if (lsPayload && lsPayload.config) return lsPayload.config
+        } catch (error) {
+          console.warn('Boot theme: failed to read LS config cache', error)
+        }
+
+        return null
       }
 
       function normalizeHex(hex) {
@@ -238,6 +218,123 @@
         document.documentElement.style.setProperty(name, value)
       }
 
+      var BOOT_LOGO_KEY = 'BOOT_LOGO_URL'
+      var BOOT_LOGO_VERSION_KEY = 'BOOT_LOGO_VERSION'
+
+      function pickAvatarRaw(value) {
+        if (value == null) return ''
+        if (typeof value === 'string') return String(value).trim()
+        if (typeof value === 'object') {
+          return String(value.full_src || value.url || value.src || value.avatar || '').trim()
+        }
+        return ''
+      }
+
+      function logoCacheValid() {
+        try {
+          var v = String(localStorage.getItem('version') || '').trim()
+          var lv = String(localStorage.getItem(BOOT_LOGO_VERSION_KEY) || '').trim()
+          if (v && lv && v !== lv) return false
+          return true
+        } catch (e) {
+          return false
+        }
+      }
+
+      function readCachedLogoUrl() {
+        if (!logoCacheValid()) return ''
+        try {
+          return String(localStorage.getItem(BOOT_LOGO_KEY) || '').trim()
+        } catch (e) {
+          return ''
+        }
+      }
+
+      function resolveAbsoluteLogoUrl(raw) {
+        if (!raw) return ''
+        if (/^(https?:\/\/|data:|blob:)/i.test(raw)) {
+          return window.location.protocol === 'https:' ? raw.replace(/^http:\/\//i, 'https://') : raw
+        }
+        var path = raw.replace(/^\/+/, '')
+        return window.location.origin + '/server/' + path
+      }
+
+      function resolveBootLogoUrl(config) {
+        var cached = readCachedLogoUrl()
+        if (cached && /^(data:|blob:)/i.test(cached)) return cached
+        if (cached && /^(https?:\/\/)/i.test(cached)) return resolveAbsoluteLogoUrl(cached)
+
+        var nested = config && config.user && typeof config.user === 'object' ? config.user : {}
+        var root = config && typeof config === 'object' ? config : {}
+        var raw = pickAvatarRaw(nested.avatar) || pickAvatarRaw(root.avatar) || cached
+        return resolveAbsoluteLogoUrl(raw)
+      }
+
+      function persistLogoCache(logoUrl) {
+        try {
+          var v = String(localStorage.getItem('version') || '').trim()
+          if (v) localStorage.setItem(BOOT_LOGO_VERSION_KEY, v)
+          if (!logoUrl) return
+          localStorage.setItem(BOOT_LOGO_KEY, logoUrl)
+          if (logoUrl.indexOf('data:') === 0 || typeof fetch !== 'function') return
+          fetch(logoUrl, { mode: 'cors', credentials: 'omit' })
+            .then(function (res) {
+              return res && res.ok ? res.blob() : Promise.reject()
+            })
+            .then(function (blob) {
+              if (!blob || blob.size > 450000) return
+              var reader = new FileReader()
+              reader.onloadend = function () {
+                try {
+                  if (typeof reader.result === 'string' && reader.result.indexOf('data:') === 0) {
+                    localStorage.setItem(BOOT_LOGO_KEY, reader.result)
+                  }
+                } catch (e) {}
+              }
+              reader.readAsDataURL(blob)
+            })
+            .catch(function () {})
+        } catch (e) {}
+      }
+
+      function applyBootLogo(config) {
+        var img = document.getElementById('boot-logo')
+        if (!img) return
+
+        var logoUrl = resolveBootLogoUrl(config || {})
+        if (!logoUrl) {
+          img.hidden = true
+          img.removeAttribute('src')
+          img.classList.remove('is-ready')
+          return
+        }
+
+        function markReady() {
+          img.hidden = false
+          img.removeAttribute('hidden')
+          img.classList.add('is-ready')
+          persistLogoCache(logoUrl)
+        }
+
+        img.onload = markReady
+        img.onerror = function () {
+          img.hidden = true
+          img.classList.remove('is-ready')
+        }
+
+        if (img.getAttribute('src') === logoUrl && img.complete && img.naturalWidth > 0) {
+          markReady()
+          return
+        }
+
+        img.hidden = false
+        img.removeAttribute('hidden')
+        img.src = logoUrl
+        if (logoUrl.indexOf('data:') === 0) markReady()
+      }
+
+      window.__APPLY_BOOT_BRANDING__ = applyBootLogo
+
       function applyBootTheme() {
         var config = readCachedConfig()
         var user = config && config.user ? config.user : null
@@ -289,6 +386,7 @@
       }
 
       applyBootTheme()
+      applyBootLogo(readCachedConfig())
     })()
   </script>
 </head>
@@ -296,15 +394,15 @@
 <body>
 <div id="app">
   <div class="boot-loader">
-    <div class="boot-loader__card">
-      <div class="boot-loader__orb"></div>
-      <div class="boot-loader__spinner"></div>
-
-      <h1 class="boot-loader__title">در حال هدایت به سامانه</h1>
-      <p class="boot-loader__text">لطفاً چند لحظه صبر کنید...</p>
-    </div>
+    <img id="boot-logo" class="boot-loader__logo" alt="" decoding="async" hidden />
+    <div class="boot-loader__spinner" aria-hidden="true"></div>
   </div>
 </div>
+<script>
+  if (typeof window.__APPLY_BOOT_BRANDING__ === 'function') {
+    window.__APPLY_BOOT_BRANDING__()
+  }
+</script>
 
 <script>
   ;(function () {
@@ -571,6 +669,10 @@
           CONFIG_COOKIE_MAX_AGE_SECONDS +
           '; SameSite=Lax' +
           secure
+
+        if (typeof window.__APPLY_BOOT_BRANDING__ === 'function') {
+          window.__APPLY_BOOT_BRANDING__(config)
+        }
       } catch (error) {
         console.warn('Failed to write config cookie:', error)
       }

src/App.vue

@@ -2,7 +2,6 @@
   <div class="desktopConfig w-full right-0 left-0">
     <transition mode="out-in" name="fade">
       <AConfigProvider
-        v-if="!showSplash"
         :theme="{
           token: {
             colorPrimary: colors.primary,
@@ -19,34 +18,10 @@
           </transition>
         </router-view>
       </AConfigProvider>
-
-      <div v-else class="app-splash-screen flex items-center justify-center bg-white">
-        <div class="app-splash-screen__gradient app-splash-screen__gradient--top h-1/3 flex">
-          <img :src="img_topGradiant" alt="" class="absolute z-10 w-full h-full object-cover" />
-          <img :src="img_pattern" alt="" class="absolute w-full h-full object-none" />
-        </div>
-        <div class="app-splash-screen__gradient app-splash-screen__gradient--bottom h-1/3">
-          <img
-            :src="img_bottomGradiant"
-            alt=""
-            class="absolute z-10 w-full h-full object-cover"
-          />
-          <img :src="img_pattern" alt="" class="absolute w-full h-full object-none" />
-        </div>
-        <div class="splash_appear_fade_in relative z-10">
-          <img :src="logoFull" class="h-[20vh] max-h-[180px] w-auto object-contain" alt="" />
-        </div>
-        <div class="app-splash-screen__version home_appear_fade_in_up">
-          <div class="text-center text-xs">نسخه: {{ displayVersion }}</div>
-        </div>
-        <div class="app-splash-screen__spinner">
-          <a-spin :indicator="indicator" size="small" />
-        </div>
-      </div>
     </transition>
 
     <div
-      v-if="showSupportButton && !showSplash && route.name !== 'support' && !hideAppChrome"
+      v-if="showSupportButton && route.name !== 'support' && !hideAppChrome"
       id="support-button"
       ref="supportButtonEl"
       class="draggable-support-button"
@@ -87,7 +62,7 @@
     />
 
     <div
-      v-if="!showSplash && !hideAppChrome && !isDesktop"
+      v-if="!hideAppChrome && !isDesktop"
       class="app-credit-footer app-credit-footer--mobile"
       :class="{ 'app-credit-footer--login': isLoginRoute }"
     >
@@ -95,7 +70,7 @@
       <AppCreditLink variant="mobile" />
     </div>
     <div
-      v-if="!showSplash && !hideAppChrome && showDesktopFloatingCredit"
+      v-if="!hideAppChrome && showDesktopFloatingCredit"
       class="app-credit-footer app-credit-footer--desktop-float"
       :class="{ 'app-credit-footer--login': isLoginRoute }"
     >
@@ -110,15 +85,10 @@
 
 <script lang="ts" setup>
 import { colors } from './themeConfig'
-import pkg from '../package.json'
-import { getDisplayAppVersion } from '@/config/config-cache'
-import { computed, defineAsyncComponent, h, onMounted, ref, watch } from 'vue'
+import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { message } from 'ant-design-vue'
 import { showBrowserNotification } from '@/utils/browserNotification'
-import img_topGradiant from '@/views/login/assets/img/gr_top_white.svg'
-import img_pattern from '@/views/login/assets/img/pattern.svg'
-import { LoadingOutlined } from '@ant-design/icons-vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import { useSupportMessenger } from '@/composables/useSupportMessenger'
 import { loadSupportMessengerFromSettings } from '@/utils/supportMessenger'
@@ -137,29 +107,13 @@ import { useSettingsStore } from '@/store/settingsStore'
 import { connectChatIfExists, disconnectChat, isSettingFlagOn, unreadSupportCount, useChatService } from '@/utils/chat'
 import { getToken } from '@/utils'
 
-import img_bottomGradiant from '@/views/login/assets/img/gr_bottom_white.svg'
-import logoFull from '@/assets/img/logo_full_.png'
-
 const VersionUpdateModal = defineAsyncComponent(
   () => import('@/modules/version/VersionUpdateModal.vue')
 )
 
-const indicator = h(LoadingOutlined, {
-  style: {
-    fontSize: '24px'
-  },
-  spin: true
-})
-const displayVersion = getDisplayAppVersion(pkg.version)
-const showSplash = ref(!isTvBoardPath())
 const route = useRoute()
 const hideAppChrome = computed(() => route.meta.hideChrome === true || route.name === 'tvMonitor')
 
-function isTvBoardPath() {
-  const path = window.location.pathname.replace(/\/+$/, '')
-  return path.endsWith('/tv') || path.endsWith('/monitor')
-}
-
 useApplyDesktopLayoutClass()
 
 const isDesktop = useDesktopBreakpoint()
@@ -224,17 +178,6 @@ function handleSupportPointerUp(event: PointerEvent) {
 
 onMounted(async () => {
   await loadSupportMessengerFromSettings()
-  if (hideAppChrome.value) {
-    showSplash.value = false
-    return
-  }
-  setTimeout(() => {
-    showSplash.value = false
-  }, 2000)
-})
-
-watch(hideAppChrome, (hidden) => {
-  if (hidden) showSplash.value = false
 })
 
 const userStore = useUserStore()

src/config/app-config.ts

@@ -55,6 +55,13 @@ let appConfig: RawAppConfig | null = null
 export function setAppConfig(config: RawAppConfig) {
   appConfig = normalizeAppConfig(config || {})
   window.__APP_CONFIG__ = appConfig
+  try {
+    const apply = (window as Window & {__APPLY_BOOT_BRANDING__?: (c: unknown) => void})
+      .__APPLY_BOOT_BRANDING__
+    if (typeof apply === 'function') apply(appConfig)
+  } catch {
+    /* boot DOM ممکن است هنوز نباشد */
+  }
 }
 
 export function getRawAppConfig() {

src/config/config-cache.ts

@@ -62,8 +62,29 @@ export function readCachedAppConfig(): AppConfig | null {
   }
 }
 
+function persistBootLogo(config: AppConfig) {
+  try {
+    const nested = (config as {user?: Record<string, unknown>})?.user
+    const root = (config || {}) as Record<string, unknown>
+    const avatar = String(nested?.avatar || root.avatar || '').trim()
+    const version = String(localStorage.getItem(VERSION_STORAGE_KEY) || '').trim()
+    const cachedUrl = localStorage.getItem('BOOT_LOGO_URL') || ''
+    const cachedVer = localStorage.getItem('BOOT_LOGO_VERSION') || ''
+    const cacheFresh = !!(cachedUrl && version && cachedVer && version === cachedVer)
+    if (!cacheFresh && avatar) localStorage.setItem('BOOT_LOGO_URL', avatar)
+    if (version) localStorage.setItem('BOOT_LOGO_VERSION', version)
+    const apply = (window as Window & {__APPLY_BOOT_BRANDING__?: (c: unknown) => void})
+      .__APPLY_BOOT_BRANDING__
+    if (typeof apply === 'function') apply(config)
+  } catch {
+    /* ignore */
+  }
+}
+
 export function writeCachedAppConfig(config: AppConfig) {
   try {
+    persistBootLogo(config)
+
     const payload: CachedConfigPayload = {
       cached_at: Date.now(),
       config
@@ -206,12 +227,22 @@ export async function clearBrowserRuntimeCaches() {
 
 function clearLocalStorageExceptToken() {
   const token = localStorage.getItem(tokenName)
+  let bootLogo = ''
+  let bootLogoVer = ''
+  try {
+    bootLogo = localStorage.getItem('BOOT_LOGO_URL') || ''
+    bootLogoVer = localStorage.getItem('BOOT_LOGO_VERSION') || ''
+  } catch {
+    /* ignore */
+  }
 
   localStorage.clear()
 
   if (token) {
     localStorage.setItem(tokenName, token)
   }
+  if (bootLogo) localStorage.setItem('BOOT_LOGO_URL', bootLogo)
+  if (bootLogoVer) localStorage.setItem('BOOT_LOGO_VERSION', bootLogoVer)
 }
 
 export function clearAppStorageExceptToken() {
@@ -254,6 +285,11 @@ export async function refreshConfigCacheForVersion(
 
   writeCachedAppConfig(freshConfig)
   finishVersionUpdateBeforeReload(normalizedVersion)
+  try {
+    localStorage.setItem('BOOT_LOGO_VERSION', normalizedVersion)
+  } catch {
+    /* ignore */
+  }
 
   return freshConfig
 }
@@ -275,6 +311,11 @@ export async function resetAppAndRefreshConfig(
 
   if (normalizedVersion) {
     writeStoredAppVersion(normalizedVersion)
+    try {
+      localStorage.setItem('BOOT_LOGO_VERSION', normalizedVersion)
+    } catch {
+      /* ignore */
+    }
   }
 
   return freshConfig