外观偏好异步补齐C:顶栏 Logo 接平台键 yh-logo-url(服务端学校 Logo 异步生效)

- .logo-badge img 改动态 src:localStorage["yh-logo-url"](yh-theme-init 异步补齐段写入)优先,本仓 yunhai-logo.svg 兜底,@error 回落兜底——绝无空 src/裂图
- mounted 读一次 + 监听 yh-appearance-updated 即时切换(无需刷新)
This commit is contained in:
chenxing
2026-10-08 18:51:51 +08:00
parent e37ff9f8d1
commit f4d0c7d97a
+24 -2
View File
@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onBeforeMount, watch, computed } from "vue"; import { ref, onBeforeMount, onBeforeUnmount, onMounted, watch, computed } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { Message } from "view-ui-plus"; import { Message } from "view-ui-plus";
import { resolveMenuPage } from "@/utils/menuRoute"; import { resolveMenuPage } from "@/utils/menuRoute";
import ThemeSwitcher from "@/components/ThemeSwitcher.vue"; import ThemeSwitcher from "@/components/ThemeSwitcher.vue";
import UserAvatar from "@/components/UserAvatar.vue"; import UserAvatar from "@/components/UserAvatar.vue";
import defaultLogo from "@/assets/image/yunhai-logo.svg";
const props = defineProps<{ layoutData: Record<string, any> }>(); const props = defineProps<{ layoutData: Record<string, any> }>();
const route = useRoute(); const route = useRoute();
@@ -24,6 +25,27 @@ const modList = computed(() => props.layoutData?.modList || []);
const pathNavStyle = computed(() => (isAlone.value ? { left: "0", width: "100%" } : null)); const pathNavStyle = computed(() => (isAlone.value ? { left: "0", width: "100%" } : null));
// 顶栏 Logo:localStorage["yh-logo-url"](平台键,yh-theme-init 异步补齐段写入)优先,本仓资产兜底——绝无空 src/裂图。
// 刷新:mounted 读一次 + 监听 yh-appearance-updated(服务端偏好到达后即时切换,无需刷新页面)。
const logoUrl = ref<string>(defaultLogo);
const readLogoUrl = () => {
let v: string | null = null;
try {
v = localStorage.getItem("yh-logo-url");
} catch {
v = null;
}
logoUrl.value = v || defaultLogo;
};
const onLogoError = () => {
if (logoUrl.value !== defaultLogo) logoUrl.value = defaultLogo;
};
onMounted(() => {
readLogoUrl();
document.addEventListener("yh-appearance-updated", readLogoUrl);
});
onBeforeUnmount(() => document.removeEventListener("yh-appearance-updated", readLogoUrl));
onBeforeMount(() => { onBeforeMount(() => {
routeChange(route); routeChange(route);
}); });
@@ -159,7 +181,7 @@ function linkHomePage() {
<div class="layout-wrap"> <div class="layout-wrap">
<header class="header-container fix"> <header class="header-container fix">
<!-- 云海 logo 徽标(结构与 Cms SchoolLayout 对齐,皮肤见通道 base.layout.css .logo-badge) --> <!-- 云海 logo 徽标(结构与 Cms SchoolLayout 对齐,皮肤见通道 base.layout.css .logo-badge) -->
<span class="logo-badge fl"><img src="@/assets/image/yunhai-logo.svg" alt="云海" /></span> <span class="logo-badge fl"><img :src="logoUrl" alt="云海" @error="onLogoError" /></span>
<div class="delimiter fl align-middle"></div> <div class="delimiter fl align-middle"></div>
<h4 class="fl align-middle">{{ appName }}</h4> <h4 class="fl align-middle">{{ appName }}</h4>
<div class="school-bg"></div> <div class="school-bg"></div>