perf: 优化自定义网盘logo

src/components/Logo/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div :style="{width: width + 'px',height: width + 'px'}">
-      <el-image v-if="logoUrl" :src="logoUrl" fit="cover" :style="{width: width + 'px',height: width + 'px'}"></el-image>
-      <svg-icon v-else icon-class="jmal-cloud" :style="{width: width + 'px',height: width + 'px'}"/>
+      <el-image v-if="logoUrl" :src="logoUrl" fit="cover" :style="{width: width + 'px',height: width + 'px', padding: padding + 'px'}"></el-image>
+      <svg-icon v-else icon-class="jmal-cloud" :style="{width: width + 'px',height: width + 'px', padding: padding + 'px'}"/>
     </div>
 </template>
 
@@ -18,6 +18,10 @@ export default {
     width: {
       type: Number,
       default: 50
+    },
+    padding: {
+      type: Number,
+      default: 0
     }
   },
   data() {

src/layout/components/Sidebar/Logo.vue

@@ -6,10 +6,10 @@
 <!--        <svg-icon class="sidebar-logo" icon-class="jmal-cloud"></svg-icon>-->
         <Logo v-model="netdiskLogo" width="25"></Logo>
       </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+      <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="25" class="sidebar-logo-expand"></Logo>
+        <Logo v-model="netdiskLogo" width="50" padding="8"></Logo>
         <h1 class="sidebar-title">{{ title }} </h1>
       </router-link>
     </transition>
@@ -29,6 +29,21 @@ export default {
       required: true
     }
   },
+  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'
+    },
+    netdiskLogo() {
+      if (this.$store.state.user.netdiskLogo) {
+        return this.$store.state.user.netdiskLogo
+      }
+      return ''
+    }
+  },
   mounted() {
     Bus.$on('updateLogo', () => {
       console.log('updateLogo', this.$store.state.user.netdiskLogo)
@@ -37,8 +52,6 @@ export default {
   },
   data() {
     return {
-      title: 'jmalcloud',
-      netdiskLogo: ''
     }
   }
 }
@@ -94,8 +107,13 @@ export default {
 
   &.collapse {
     .sidebar-logo {
-      margin-right: 0px;
+      margin-right: 0;
     }
   }
+
+  .logo-expand {
+    display: inline-flex !important;
+    width: auto !important;
+  }
 }
 </style>

src/permission.js

@@ -5,6 +5,8 @@ import 'nprogress/nprogress.css' // 进度条样式
 import { getToken } from '@/utils/auth' // 认证获取token
 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/'] // 白名单
@@ -13,6 +15,7 @@ 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

@@ -112,13 +112,15 @@ const actions = {
           // reject('Verification failed, please Login again.')
         }
 
-        const { id, username, showName, avatar } = data
+        const { id, username, showName, avatar, netdiskName, netdiskLogo} = data
 
         commit('SET_NAME', username)
         commit('SET_SHOW_NAME', showName)
         commit('SET_AVATAR', avatar)
         commit('SET_USERID', id)
         commit('SET_USER_INFO', data)
+        commit('SET_NETDISK_NAME', netdiskName)
+        commit('SET_NETDISK_LOGO', netdiskLogo)
         sessionStorage.setItem('store', JSON.stringify(state))
         resolve(data)
       }).catch(error => {

src/utils/get-page-title.js

@@ -4,6 +4,7 @@ const title = defaultSettings.title || 'Vue Admin Template'
 
 export default function getPageTitle(pageTitle) {
   if (pageTitle) {
+    console.log('title', title)
     return `${pageTitle} - ${title}`
   }
   return `${title}`

src/utils/logo.js

@@ -0,0 +1,25 @@
+import Cookies from 'js-cookie'
+
+const titleKey = 'netdisk-name'
+
+const logoKey = 'netdisk-logo'
+
+export function getLogoName() {
+  const res = Cookies.get(titleKey)
+  return !res || res === 'undefined' ? res : 'jmalcloud'
+}
+
+export function getLogo() {
+  const res = Cookies.get(logoKey)
+  return !res || res === 'undefined' ? res : ''
+}
+
+export function setLogoName(logoName, logo) {
+  Cookies.set(titleKey, logoName)
+  return Cookies.set(logoKey, logo)
+}
+
+export function removeLogo() {
+  Cookies.remove(titleKey)
+  return Cookies.remove(logoKey)
+}

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 }}</div>
+                <div>{{ webstieRecord.netdiskName ? webstieRecord.netdiskName : 'jmalcloud' }}</div>
               </div>
             </div>
           </h3>

src/views/setting/cloudManager.vue

@@ -142,6 +142,9 @@ export default {
       const reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
       if(reg.test(this.netdiskName)) {
         settingApi.updateNetdiskName({netdiskName: this.netdiskName}).then(() => {
+          this.$store.dispatch('user/setLogo', {netdiskName: this.netdiskName, netdiskLogo: this.logoFileName}).then(()=> {
+            Bus.$emit('updateLogo')
+          })
           this.$message.success("网盘名称 修改成功")
           this.setInputBlur()
         }).catch(()=>{