perf: 优化平台logo获取方式

pure-admin · Oct 21, 2023 · 1462411 · 1462411 · xiaoxian521 · Oct 21, 2023
1 parent af224dc
commit 1462411
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/src/layout/components/sidebar/horizontal.vue b/src/layout/components/sidebar/horizontal.vue
@@ -21,6 +21,7 @@ const {
   logout,
   backTopMenu,
   onPanel,
+  getLogo,
   username,
   userAvatar,
   avatarsStyle,
@@ -43,7 +44,7 @@ nextTick(() => {
     class="horizontal-header"
   >
     <div class="horizontal-header-left" @click="backTopMenu">
-      <img src="/logo.svg" alt="logo" />
+      <img :src="getLogo()" alt="logo" />
       <span>{{ title }}</span>
     </div>
     <el-menu

diff --git a/src/layout/components/sidebar/logo.vue b/src/layout/components/sidebar/logo.vue
@@ -6,7 +6,7 @@ const props = defineProps({
   collapse: Boolean
 });
 
-const { title } = useNav();
+const { title, getLogo } = useNav();
 </script>
 
 <template>
@@ -19,7 +19,7 @@ const { title } = useNav();
         class="sidebar-logo-link"
         :to="getTopMenu()?.path ?? '/'"
       >
-        <img src="/logo.svg" alt="logo" />
+        <img :src="getLogo()" alt="logo" />
         <span class="sidebar-title">{{ title }}</span>
       </router-link>
       <router-link
@@ -29,7 +29,7 @@ const { title } = useNav();
         class="sidebar-logo-link"
         :to="getTopMenu()?.path ?? '/'"
       >
-        <img src="/logo.svg" alt="logo" />
+        <img :src="getLogo()" alt="logo" />
         <span class="sidebar-title">{{ title }}</span>
       </router-link>
     </transition>

diff --git a/src/layout/hooks/useNav.ts b/src/layout/hooks/useNav.ts
@@ -124,6 +124,11 @@ export function useNav() {
     return remainingPaths.includes(path);
   }
 
+  /** 获取`logo` */
+  function getLogo() {
+    return new URL("/logo.svg", import.meta.url).href;
+  }
+
   return {
     title,
     device,
@@ -139,6 +144,7 @@ export function useNav() {
     menuSelect,
     handleResize,
     resolvePath,
+    getLogo,
     isCollapse,
     pureApp,
     username,

diff --git a/src/views/components/animatecss/index.vue b/src/views/components/animatecss/index.vue
@@ -8,7 +8,9 @@ defineOptions({
 
 const icon = ref("");
 
-watch(icon, () => console.log("icon", icon.value));
+watch(icon, () => {
+  console.log("icon", icon.value);
+});
 </script>
 
 <template>