Merge pull request #559 from wucm667/fix/auth-page-logo
fix: 修复登录/注册页面自定义 Logo 不显示及闪烁问题
This commit is contained in:
@@ -29,17 +29,19 @@
|
|||||||
<!-- Logo/Brand -->
|
<!-- Logo/Brand -->
|
||||||
<div class="mb-8 text-center">
|
<div class="mb-8 text-center">
|
||||||
<!-- Custom Logo or Default Logo -->
|
<!-- Custom Logo or Default Logo -->
|
||||||
<div
|
<template v-if="settingsLoaded">
|
||||||
class="mb-4 inline-flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl shadow-lg shadow-primary-500/30"
|
<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>
|
<img :src="siteLogo || '/logo.png'" alt="Logo" class="h-full w-full object-contain" />
|
||||||
<h1 class="text-gradient mb-2 text-3xl font-bold">
|
</div>
|
||||||
{{ siteName }}
|
<h1 class="text-gradient mb-2 text-3xl font-bold">
|
||||||
</h1>
|
{{ siteName }}
|
||||||
<p class="text-sm text-gray-500 dark:text-dark-400">
|
</h1>
|
||||||
{{ siteSubtitle }}
|
<p class="text-sm text-gray-500 dark:text-dark-400">
|
||||||
</p>
|
{{ siteSubtitle }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Card Container -->
|
<!-- Card Container -->
|
||||||
@@ -61,25 +63,21 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, onMounted } from 'vue'
|
import { computed, onMounted } from 'vue'
|
||||||
import { getPublicSettings } from '@/api/auth'
|
import { useAppStore } from '@/stores'
|
||||||
import { sanitizeUrl } from '@/utils/url'
|
import { sanitizeUrl } from '@/utils/url'
|
||||||
|
|
||||||
const siteName = ref('Sub2API')
|
const appStore = useAppStore()
|
||||||
const siteLogo = ref('')
|
|
||||||
const siteSubtitle = ref('Subscription to API Conversion Platform')
|
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())
|
const currentYear = computed(() => new Date().getFullYear())
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(() => {
|
||||||
try {
|
appStore.fetchPublicSettings()
|
||||||
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)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -6,6 +6,7 @@
|
|||||||
*/
|
*/
|
||||||
type SanitizeOptions = {
|
type SanitizeOptions = {
|
||||||
allowRelative?: boolean
|
allowRelative?: boolean
|
||||||
|
allowDataUrl?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export function sanitizeUrl(value: string, options: SanitizeOptions = {}): string {
|
export function sanitizeUrl(value: string, options: SanitizeOptions = {}): string {
|
||||||
@@ -18,6 +19,11 @@ export function sanitizeUrl(value: string, options: SanitizeOptions = {}): strin
|
|||||||
return trimmed
|
return trimmed
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 允许 data:image/ 开头的 data URL(仅限图片类型)
|
||||||
|
if (options.allowDataUrl && trimmed.startsWith('data:image/')) {
|
||||||
|
return trimmed
|
||||||
|
}
|
||||||
|
|
||||||
// 只接受绝对 URL,不使用 base URL 来避免相对路径被解析为当前域名
|
// 只接受绝对 URL,不使用 base URL 来避免相对路径被解析为当前域名
|
||||||
// 检查是否以 http:// 或 https:// 开头
|
// 检查是否以 http:// 或 https:// 开头
|
||||||
if (!trimmed.match(/^https?:\/\//i)) {
|
if (!trimmed.match(/^https?:\/\//i)) {
|
||||||
|
|||||||
Reference in New Issue
Block a user