feat 页面标题和页面的favicon.ico动态修复

.env.production

@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 可视化电子围栏管理系统
+VITE_APP_TITLE = 可视化电子围栏管理系统11111
 VITE_APP_LOGO_TITLE = RuoYi-Vue-Plus
 
 # 生产环境配置

src/layout/components/Sidebar/Logo.vue

@@ -2,11 +2,11 @@
   <div class="sidebar-logo-container" :class="{ collapse: collapse }">
     <transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logoUrl" class="sidebar-logo" />
+        <img v-if="showLogoImage" :src="logoUrl" class="sidebar-logo" />
         <h1 v-else class="sidebar-title">{{ logoName }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logoUrl" class="sidebar-logo" />
+        <img v-if="showLogoImage" :src="logoUrl" class="sidebar-logo" />
         <h1 class="sidebar-title">{{ logoName }}</h1>
       </router-link>
     </transition>
@@ -15,11 +15,9 @@
 
 <script setup lang="ts">
 import variables from '@/assets/styles/variables.module.scss';
-import logo from '@/assets/logo/logo.png';
 import { useSettingsStore } from '@/store/modules/settings';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 import { NavTypeEnum } from '@/enums/NavTypeEnum';
-import { getDemo } from '@/api/systemList/index';
 
 defineProps({
   collapse: {
@@ -28,13 +26,15 @@ defineProps({
   }
 });
 
-const title = import.meta.env.VITE_APP_LOGO_TITLE;
 const settingsStore = useSettingsStore();
 const sideTheme = computed(() => settingsStore.sideTheme);
+const logoUrl = computed(() => settingsStore.appLogoUrl || '');
+const logoName = computed(() => settingsStore.appTitle || import.meta.env.VITE_APP_LOGO_TITLE || 'RuoYi-Vue-Plus');
+const showLogoImage = computed(() => Boolean(logoUrl.value));
 
 // 获取Logo背景色
 const getLogoBackground = computed(() => {
-  if (settingsStore.isDark) {
+  if (settingsStore.dark) {
     return 'var(--sidebar-bg)';
   }
   if (settingsStore.navType == NavTypeEnum.TOP) {
@@ -45,7 +45,7 @@ const getLogoBackground = computed(() => {
 
 // 获取Logo文字颜色
 const getLogoTextColor = computed(() => {
-  if (settingsStore.isDark) {
+  if (settingsStore.dark) {
     return 'var(--sidebar-text)';
   }
   if (settingsStore.navType == NavTypeEnum.TOP) {
@@ -53,18 +53,6 @@ const getLogoTextColor = computed(() => {
   }
   return sideTheme.value === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor;
 });
-
-// 获取Logo图片
-const logoUrl = ref();
-const logoName = ref();
-onMounted(() => {
-  getDemo().then((res) => {
-    console.log('系统11111111111', res);
-
-    logoName.value = res.data.name;
-    logoUrl.value = res.data.url;
-  });
-});
 </script>
 
 <style lang="scss" scoped>

src/main.ts

@@ -30,6 +30,8 @@ import './permission';
 
 // 国际化
 import i18n from '@/lang/index';
+import { useSettingsStore } from '@/store/modules/settings';
+import { getDemo } from '@/api/systemList/index';
 
 // vxeTable
 import VXETable from 'vxe-table';
@@ -54,4 +56,24 @@ app.use(plugins);
 // 自定义指令
 directive(app);
 
+const settingsStore = useSettingsStore();
+getDemo()
+  .then((res) => {
+    const name = res?.data?.name;
+    const url = res?.data?.url;
+    if (name || url) {
+      settingsStore.setSystemInfo(name || '', url || '');
+
+      if (url) {
+        const link = document.querySelector("link[rel='icon']") as HTMLLinkElement | null;
+        if (link) {
+          link.href = url;
+        }
+      }
+    }
+  })
+  .catch(() => {
+    // ignore
+  });
+
 app.mount('#app');

src/store/modules/settings.ts

@@ -19,6 +19,8 @@ export const useSettingsStore = defineStore('setting', () => {
     radiusBase: defaultSettings.radiusBase
   });
   const title = ref<string>(defaultSettings.title);
+  const appTitle = ref<string>(defaultSettings.title);
+  const appLogoUrl = ref<string>('');
   const theme = ref<string>(storageSetting.value.theme);
   const sideTheme = ref<string>(storageSetting.value.sideTheme);
   const showSettings = ref<boolean>(defaultSettings.showSettings);
@@ -36,8 +38,17 @@ export const useSettingsStore = defineStore('setting', () => {
     title.value = value;
     useDynamicTitle();
   };
+
+  const setSystemInfo = (name: string, url: string) => {
+    appTitle.value = name || defaultSettings.title;
+    appLogoUrl.value = url || '';
+    useDynamicTitle();
+  };
+
   return {
     title,
+    appTitle,
+    appLogoUrl,
     theme,
     sideTheme,
     showSettings,
@@ -50,6 +61,7 @@ export const useSettingsStore = defineStore('setting', () => {
     dark,
     navType,
     radiusBase,
-    setTitle
+    setTitle,
+    setSystemInfo
   };
 });

src/utils/dynamicTitle.ts

@@ -6,9 +6,12 @@ import { useSettingsStore } from '@/store/modules/settings';
  */
 export const useDynamicTitle = () => {
   const settingsStore = useSettingsStore();
+  const pageTitle = settingsStore.title || (defaultSettings.title as string);
+  const appTitle = settingsStore.appTitle || (defaultSettings.title as string);
+
   if (settingsStore.dynamicTitle) {
-    document.title = settingsStore.title + ' - ' + import.meta.env.VITE_APP_TITLE;
+    document.title = `${pageTitle} - ${appTitle}`;
   } else {
-    document.title = defaultSettings.title as string;
+    document.title = appTitle;
   }
 };