40 lines
1.4 KiB
Vue
40 lines
1.4 KiB
Vue
<template>
|
||
<el-config-provider :locale="locale" :size="size">
|
||
<!-- 开启水印 -->
|
||
<el-watermark :font="{ color: fontColor }" :content="watermarkEnabled ? defaultSettings.watermarkContent : ''"
|
||
:z-index="9999" class="wh-full">
|
||
<!-- 🔴 修改开始：使用 v-slot 处理路由组件 -->
|
||
<router-view v-slot="{ Component, route }">
|
||
<!--
|
||
1. 使用 <transition> 包裹，防止渲染冲突
|
||
2. 加上 :key="route.path" 强制 Vue 在路由变化时重新渲染，避免复用导致的空白
|
||
-->
|
||
<transition name="fade" mode="out-in">
|
||
<component :is="Component" :key="route.path" />
|
||
</transition>
|
||
</router-view>
|
||
<!-- 🟢 修改结束 -->
|
||
</el-watermark>
|
||
</el-config-provider>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// test 11
|
||
import { useAppStore, useSettingsStore } from "@/store";
|
||
import defaultSettings from "@/settings";
|
||
import { ThemeEnum } from "@/enums/ThemeEnum";
|
||
import { SizeEnum } from "@/enums/SizeEnum";
|
||
|
||
const appStore = useAppStore();
|
||
const settingsStore = useSettingsStore();
|
||
|
||
const locale = computed(() => appStore.locale);
|
||
const size = computed(() => appStore.size as SizeEnum);
|
||
const watermarkEnabled = computed(() => settingsStore.watermarkEnabled);
|
||
|
||
// 明亮/暗黑主题水印字体颜色适配
|
||
const fontColor = computed(() => {
|
||
return settingsStore.theme === ThemeEnum.DARK ? "rgba(255, 255, 255, .15)" : "rgba(0, 0, 0, .15)";
|
||
});
|
||
</script>
|