perf: 优化自定义网盘logo

package.json

@@ -51,7 +51,6 @@
     "vue-runtime-helpers": "^1.1.2",
     "vue-simple-uploader": "^0.7.4",
     "vue-video-player": "^5.0.2",
-    "vue-wechat-title": "^2.0.5",
     "vuedraggable": "^2.23.2",
     "vuex": "^3.1.0",
     "websocket": "^1.0.34"

src/layout/components/Sidebar/Logo.vue

@@ -2,13 +2,9 @@
   <div class="sidebar-logo-container" :class="{'collapse':collapse}">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <!--<img v-if="logo" :src="logo" class="sidebar-logo">-->
-<!--        <svg-icon class="sidebar-logo" icon-class="jmal-cloud"></svg-icon>-->
-        <Logo v-model="netdiskLogo" width="25"></Logo>
+        <Logo v-model="netdiskLogo" width="50" padding="8"></Logo>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link logo-expand" to="/">
-        <!--<img v-if="logo" :src="logo" class="sidebar-logo">-->
-<!--        <svg-icon class="sidebar-logo-expand" icon-class="jmal-cloud"></svg-icon>-->
         <Logo v-model="netdiskLogo" width="50" padding="8"></Logo>
         <h1 class="sidebar-title">{{ title }} </h1>
       </router-link>
@@ -31,11 +27,10 @@ export default {
   },
   computed: {
     title() {
-      console.log('this.$store.state.user', this.$store.state.user)
       if (this.$store.state.user.netdiskName) {
         return this.$store.state.user.netdiskName
       }
-      return 'jmalcloud'
+      return 'JmalCloud'
     },
     netdiskLogo() {
       if (this.$store.state.user.netdiskLogo) {

src/main.js

@@ -9,8 +9,6 @@ import EVueContextmenu from 'e-vue-contextmenu'
 import App from './App'
 import store from './store'
 import router from './router'
-import VueWechatTitle from 'vue-wechat-title'
-
 
 // ant-design-vue
 import { Affix } from 'ant-design-vue';
@@ -33,7 +31,7 @@ import Viewer from 'v-viewer'
 
 Vue.use(Viewer)
 
-Vue.use(VueWechatTitle)
+// Vue.use(VueWechatTitle)
 
 Vue.use(uploader)
 Vue.use(EVueContextmenu)

src/permission.js

@@ -3,19 +3,21 @@ import store from './store'
 import NProgress from 'nprogress' // 进度条
 import 'nprogress/nprogress.css' // 进度条样式
 import { getToken } from '@/utils/auth' // 认证获取token
+import {setFavicon} from '@/utils/logo'
 import getPageTitle from '@/utils/get-page-title'
 
-import { getLogoName, getLogo } from '@/utils/logo'
-
 NProgress.configure({ showSpinner: false }) // NProgress配置
 
 const whiteList = ['/login','/s','/s/','/s_m','/s_m/'] // 白名单
 
+window.onload = function() {
+  setFavicon()
+}
+
 router.beforeEach(async(to, from, next) => {
   // 开始进度条
   NProgress.start()
   // 设置页面标题
-  console.log('to.meta.title', to.meta.title)
   document.title = getPageTitle(to.meta.title)
 
   // 确认用户是否已登录

src/store/modules/user.js

@@ -1,6 +1,7 @@
 import { login, logout, getInfo } from '@/api/user'
 import menuApi from '@/api/menu'
 import { getToken, setToken, getConsumerId, setConsumerId, removeToken, removeConsumerId , setRememberName, removeRememberName } from '@/utils/auth'
+import { setLogo } from '@/utils/logo'
 import { resetRouter } from '@/router'
 import router from '@/router'
 import Layout from '@/layout'
@@ -98,6 +99,7 @@ const actions = {
     const { netdiskName, netdiskLogo } = logoInfo
     commit('SET_NETDISK_NAME', netdiskName)
     commit('SET_NETDISK_LOGO', netdiskLogo)
+    setLogo(netdiskName, netdiskLogo)
   },
 
   // get user info
@@ -121,6 +123,7 @@ const actions = {
         commit('SET_USER_INFO', data)
         commit('SET_NETDISK_NAME', netdiskName)
         commit('SET_NETDISK_LOGO', netdiskLogo)
+        setLogo(netdiskName, netdiskLogo)
         sessionStorage.setItem('store', JSON.stringify(state))
         resolve(data)
       }).catch(error => {

src/utils/get-page-title.js

@@ -1,11 +1,16 @@
 import defaultSettings from '@/settings'
 
+import { getLogoName } from '@/utils/logo'
+
 const title = defaultSettings.title || 'Vue Admin Template'
 
 export default function getPageTitle(pageTitle) {
-  if (pageTitle) {
-    console.log('title', title)
-    return `${pageTitle} - ${title}`
+  let logoName = getLogoName()
+  if (!logoName || logoName === 'undefined') {
+    logoName = title
   }
-  return `${title}`
+  if (pageTitle) {
+    return `${pageTitle} - ${logoName}`
+  }
+  return `${logoName}`
 }

src/utils/logo.js

@@ -1,25 +1,37 @@
 import Cookies from 'js-cookie'
+import fileConfig from "@/utils/file-config";
+import getPageTitle from "@/utils/get-page-title";
 
 const titleKey = 'netdisk-name'
 
 const logoKey = 'netdisk-logo'
 
 export function getLogoName() {
-  const res = Cookies.get(titleKey)
-  return !res || res === 'undefined' ? res : 'jmalcloud'
+  return Cookies.get(titleKey)
 }
 
 export function getLogo() {
-  const res = Cookies.get(logoKey)
-  return !res || res === 'undefined' ? res : ''
+  return Cookies.get(logoKey)
 }
 
-export function setLogoName(logoName, logo) {
+export function setLogo(logoName, logo) {
   Cookies.set(titleKey, logoName)
-  return Cookies.set(logoKey, logo)
+  Cookies.set(logoKey, logo)
+  setFavicon()
 }
 
 export function removeLogo() {
   Cookies.remove(titleKey)
   return Cookies.remove(logoKey)
 }
+
+export function setFavicon() {
+  const logo = getLogo()
+  if (logo && logo !== 'undefined') {
+    let link = document.querySelector("link[rel*='icon']") || document.createElement('link')
+    link.type = 'image/x-icon'
+    link.rel = 'shortcut icon'
+    link.href = fileConfig.logoUrl(logo)
+    document.getElementsByTagName('head')[0].appendChild(link)
+  }
+}

src/views/login/index.vue

@@ -13,7 +13,7 @@
             <div  class="title">
               <Logo v-model="webstieRecord.netdiskLogo" width="65"></Logo>
               <div class="jmal-cloud-name">
-                <div>{{ webstieRecord.netdiskName ? webstieRecord.netdiskName : 'jmalcloud' }}</div>
+                <div>{{ webstieRecord.netdiskName ? webstieRecord.netdiskName : 'JmalCloud' }}</div>
               </div>
             </div>
           </h3>
@@ -105,6 +105,7 @@ import { getWebstieRecord } from "@/api/setting-api";
 import { hasUser, initialization } from '@/api/user'
 import { getRememberName } from '@/utils/auth'
 import Logo from "@/components/Logo";
+import Bus from "@/assets/js/bus";
 
 export default {
   name: 'Login',
@@ -119,14 +120,12 @@ export default {
     }
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('密码不能少于6位数字'))
       } else {
         callback()
       }
     }
     const confirmPassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('密码不能少于6位数字'))
       } else if(this.loginForm.password !== value) {
         callback(new Error('密码不一致'))
       } else {
@@ -189,6 +188,9 @@ export default {
 
     getWebstieRecord().then((res) => {
       this.webstieRecord = res.data
+      if (this.webstieRecord.netdiskName || this.webstieRecord.netdiskLogo) {
+        this.$store.dispatch('user/setLogo', {netdiskName: this.webstieRecord.netdiskName, netdiskLogo: this.webstieRecord.netdiskLogo})
+      }
     })
   },
   methods: {

src/views/setting/articles/articleManager.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-wechat-title="title">
+  <div>
     <el-dialog
       :title="title"
       :fullscreen="true"

src/views/setting/articles/categoryManager.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" v-wechat-title="title">
+  <div class="container">
     <el-dialog class="dialog-cm" width="500px" :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogVisible">
       <el-form ref="managerForm" size="medium" :model="form" label-position="left" :rules="rules" label-width="95px">
         <el-form-item label="分类名称:" prop="name">

src/views/setting/articles/tagManager.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" v-wechat-title="title">
+  <div class="container">
     <el-dialog class="dialog-cm" width="500px" :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogVisible">
       <el-form ref="managerForm" size="medium" :model="form" label-position="left" :rules="rules" label-width="95px">
         <el-form-item label="标签名称:" prop="name">

src/views/setting/cloudManager.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container" v-wechat-title="title">
+  <div class="app-container">
     <el-card class="box-card">
       <div slot="header">
         <div class="box-card-header">
@@ -59,6 +59,7 @@
 import settingApi, {getSetting} from "@/api/setting-api";
 import Bus from "@/assets/js/bus";
 import Logo from "@/components/Logo";
+import getPageTitle from "@/utils/get-page-title";
 
 export default {
   components: {Logo},
@@ -70,7 +71,7 @@ export default {
       resetLoading: false,
       webpEnabled: false,
       logoFileName: '',
-      netdiskName: 'jmalcloud',
+      netdiskName: 'JmalCloud',
       showAckBtn: false,
       inputNetdiskNameWidth: 150,
       logoFileTypeList: ['image/svg+xml', 'image/jpg', 'image/png', 'image/jpeg']
@@ -144,6 +145,7 @@ export default {
         settingApi.updateNetdiskName({netdiskName: this.netdiskName}).then(() => {
           this.$store.dispatch('user/setLogo', {netdiskName: this.netdiskName, netdiskLogo: this.logoFileName}).then(()=> {
             Bus.$emit('updateLogo')
+            document.title = getPageTitle(this.$route.meta.title)
           })
           this.$message.success("网盘名称 修改成功")
           this.setInputBlur()

src/views/setting/sys/cusomerInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" v-wechat-title="title">
+  <div class="container">
     <select-file title="选择头像" @select="selectedFile" :visible.sync="dialogSelectFile"></select-file>
     <el-dialog class="dialog-avatar" title="修改头像" :visible.sync="dialogAvatar" @close="handleCloseDialogAvatar">
       <cropper-dialog

src/views/setting/sys/cusomerManager.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" v-wechat-title="title">
+  <div class="container">
     <el-dialog class="dialog-form" width="600px" :title="dialogTitle" :visible.sync="dialogVisible" :close-on-click-modal="false">
       <el-form size="medium" ref="managerForm" label-width="90px"  :model="form" :rules="rules">
         <el-row :gutter="10">

src/views/setting/sys/menuManager.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" v-wechat-title="title">
+  <div class="container">
     <el-dialog class="dialog-form" width="600px" :title="dialogTitle" :visible.sync="dialogVisible">
       <el-form size="medium" ref="managerForm" label-width="90px"  :model="form" :rules="rules">
         <el-row :gutter="10">

src/views/setting/sys/roleManager.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" v-wechat-title="title">
+  <div class="container">
     <el-dialog class="dialog-form" width="400px" :title="dialogTitle" :visible.sync="dialogVisible">
       <el-form size="medium" ref="managerForm" label-width="90px"  :model="form" :rules="rules">
             <el-form-item label="角色名称:" prop="name">

vue.config.js

@@ -6,7 +6,7 @@ function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
-const name = defaultSettings.title || 'jmalCloud' // page title
+const name = defaultSettings.title || 'JmalCloud' // page title
 
 //如果您的端口设置为80，
 //使用管理员权限执行命令行。