Fix: Favicon and Name Systems (PanJiaChen#2317)

* Fix: Favicon and Name Systems * Suppor Favicon in Browser Chrome * login classs * Update index.vue * Update get-page-favicon.js --------- Co-authored-by: Edwin Betancourt <[email protected]>
EdwinBetanc0urt · Jun 4, 2024 · 3e6a1b3 · 3e6a1b3
1 parent 1f109c9
commit 3e6a1b3
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 5 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,8 +6,7 @@
     <link rel="manifest" href="<%= BASE_URL %>manifest.json">
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="icon" href="favicon.ico">
-    <link rel="icon" type="image/png" href="favicon.ico">
+    <link rel="icon" type="image/png" href="">
     <title><%= webpackConfig.name %></title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -31,6 +31,11 @@ export default {
     },
     defaultImageLogo() {
       return require('@/image/ADempiere/logo.jpg')
+    },
+    nameSystem() {
+      const { name } = this.$store.getters['user/getSystem']
+      if (name) return name
+      return 'ADempiere'
     }
   },
   watch: {
@@ -43,6 +48,7 @@ export default {
     link.rel = 'shortcut icon'
     link.type = 'image/x-icon'
     link.href = this.defaultImageLogo
+    document.title = this.nameSystem
     document.head.appendChild(link)
 
     this.$nextTick(() => {
@@ -63,6 +69,7 @@ export default {
       link.rel = 'shortcut icon'
       link.type = 'image/x-icon'
       link.href = this.defaultImageLogo
+      document.title = this.nameSystem
       document.head.appendChild(link)
     },
     getWindowWidth(event) {

diff --git a/src/permission.js b/src/permission.js
@@ -5,6 +5,7 @@ import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
 import { getToken } from '@/utils/auth' // get token from cookie
 import getPageTitle from '@/utils/get-page-title'
+import getPageFavicon from '@/utils/get-page-favicon'
 import { isEmptyValue } from '@/utils/ADempiere'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
@@ -14,7 +15,8 @@ const whiteList = ['/login', '/userEnrollment', '/createPassword', '/forgotPassw
 router.beforeEach(async(to, from, next) => {
   // start progress bar
   NProgress.start()
-
+  const link = getPageFavicon()
+  document.head.appendChild(link)
   // set page title
   document.title = getPageTitle(to.meta.title)
 

diff --git a/src/utils/get-page-favicon.js b/src/utils/get-page-favicon.js
@@ -0,0 +1,12 @@
+import store from '@/store'
+
+export default function getPageFavicon() {
+  const { logoUrl } = store.getters['user/getSystem']
+  let link = document.querySelector("link[rel~='icon']")
+  if (!link) {
+    link = document.createElement('link')
+    link.rel = 'icon'
+  }
+  link.href = logoUrl
+  return link
+}
diff --git a/src/utils/get-page-title.js b/src/utils/get-page-title.js
@@ -1,9 +1,10 @@
 import defaultSettings from '@/settings'
 import i18n from '@/lang'
-
-const title = defaultSettings.title || 'Vue Element Admin'
+import store from '@/store'
 
 export default function getPageTitle(key) {
+  const { name } = store.getters['user/getSystem']
+  const title = name || defaultSettings.title
   const hasKey = i18n.te(`route.${key}`)
   if (hasKey) {
     const pageName = i18n.t(`route.${key}`)

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
@@ -425,6 +425,10 @@ export default {
 </script>
 
 <style lang="scss">
+.image {
+  width: 80px;
+  height: 80px;
+}
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */