From ef2c35dbb1e4af119478d75638e3b9b12b3ebc2a Mon Sep 17 00:00:00 2001
From: wucm667 <stevenwucongmin@gmail.com>
Date: Wed, 11 Feb 2026 17:04:57 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95/=E6=B3=A8=E5=86=8C=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=20Logo=20=E4=B8=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=8F=8A=E9=97=AA=E7=83=81=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sanitizeUrl 新增 allowDataUrl 选项，支持 data:image/ 格式的 base64 图片 URL
- AuthLayout 改用 appStore 缓存数据，避免重复 API 请求和默认 Logo 闪烁

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/layout/AuthLayout.vue | 48 +++++++++----------
 frontend/src/utils/url.ts                     |  6 +++
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/layout/AuthLayout.vue b/frontend/src/components/layout/AuthLayout.vue
index 3cfc1d4d..129e8301 100644
--- a/frontend/src/components/layout/AuthLayout.vue
+++ b/frontend/src/components/layout/AuthLayout.vue
@@ -29,17 +29,19 @@
       <!-- Logo/Brand -->
       <div class="mb-8 text-center">
         <!-- Custom Logo or Default Logo -->
-        <div
-          class="mb-4 inline-flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl shadow-lg shadow-primary-500/30"
-        >
-          <img :src="siteLogo || '/logo.png'" alt="Logo" class="h-full w-full object-contain" />
-        </div>
-        <h1 class="text-gradient mb-2 text-3xl font-bold">
-          {{ siteName }}
-        </h1>
-        <p class="text-sm text-gray-500 dark:text-dark-400">
-          {{ siteSubtitle }}
-        </p>
+        <template v-if="settingsLoaded">
+          <div
+            class="mb-4 inline-flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl shadow-lg shadow-primary-500/30"
+          >
+            <img :src="siteLogo || '/logo.png'" alt="Logo" class="h-full w-full object-contain" />
+          </div>
+          <h1 class="text-gradient mb-2 text-3xl font-bold">
+            {{ siteName }}
+          </h1>
+          <p class="text-sm text-gray-500 dark:text-dark-400">
+            {{ siteSubtitle }}
+          </p>
+        </template>
       </div>
 
       <!-- Card Container -->
@@ -61,25 +63,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { getPublicSettings } from '@/api/auth'
+import { computed, onMounted } from 'vue'
+import { useAppStore } from '@/stores'
 import { sanitizeUrl } from '@/utils/url'
 
-const siteName = ref('Sub2API')
-const siteLogo = ref('')
-const siteSubtitle = ref('Subscription to API Conversion Platform')
+const appStore = useAppStore()
+
+const siteName = computed(() => appStore.siteName || 'Sub2API')
+const siteLogo = computed(() => sanitizeUrl(appStore.siteLogo || '', { allowRelative: true, allowDataUrl: true }))
+const siteSubtitle = computed(() => appStore.cachedPublicSettings?.site_subtitle || 'Subscription to API Conversion Platform')
+const settingsLoaded = computed(() => appStore.publicSettingsLoaded)
 
 const currentYear = computed(() => new Date().getFullYear())
 
-onMounted(async () => {
-  try {
-    const settings = await getPublicSettings()
-    siteName.value = settings.site_name || 'Sub2API'
-    siteLogo.value = sanitizeUrl(settings.site_logo || '', { allowRelative: true })
-    siteSubtitle.value = settings.site_subtitle || 'Subscription to API Conversion Platform'
-  } catch (error) {
-    console.error('Failed to load public settings:', error)
-  }
+onMounted(() => {
+  appStore.fetchPublicSettings()
 })
 </script>
 
diff --git a/frontend/src/utils/url.ts b/frontend/src/utils/url.ts
index a4dc0351..57c6487f 100644
--- a/frontend/src/utils/url.ts
+++ b/frontend/src/utils/url.ts
@@ -6,6 +6,7 @@
  */
 type SanitizeOptions = {
   allowRelative?: boolean
+  allowDataUrl?: boolean
 }
 
 export function sanitizeUrl(value: string, options: SanitizeOptions = {}): string {
@@ -18,6 +19,11 @@ export function sanitizeUrl(value: string, options: SanitizeOptions = {}): strin
     return trimmed
   }
 
+  // 允许 data:image/ 开头的 data URL（仅限图片类型）
+  if (options.allowDataUrl && trimmed.startsWith('data:image/')) {
+    return trimmed
+  }
+
   // 只接受绝对 URL，不使用 base URL 来避免相对路径被解析为当前域名
   // 检查是否以 http:// 或 https:// 开头
   if (!trimmed.match(/^https?:\/\//i)) {