From b38439a4dad082a885f34d15bd8d169986843e57 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Mon, 29 Aug 2022 18:13:26 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=E6=96=B0=E5=A2=9E=E7=BD=91=E7=9B=98l?=
 =?UTF-8?q?ogo=E5=92=8C=E5=90=8D=E7=A7=B0=E7=9A=84=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/setting-api.js                 |   7 ++
 src/components/Logo/index.vue          |  49 +++++++++
 src/icons/svg/yes.svg                  |   1 +
 src/layout/components/Sidebar/Logo.vue |  18 +++-
 src/store/modules/user.js              |  17 ++-
 src/views/login/index.vue              |  24 +++--
 src/views/setting/cloudManager.vue     | 140 +++++++++++++++++--------
 7 files changed, 203 insertions(+), 53 deletions(-)
 create mode 100644 src/components/Logo/index.vue
 create mode 100644 src/icons/svg/yes.svg

diff --git a/src/api/setting-api.js b/src/api/setting-api.js
index beff27a..6c0f6a9 100644
--- a/src/api/setting-api.js
+++ b/src/api/setting-api.js
@@ -15,6 +15,13 @@ export default {
       params
     })
   },
+  updateNetdiskName(params) {
+    return request({
+      url: '/user/setting/update_netdisk_name',
+      method: 'put',
+      params
+    })
+  },
   getWebp(params) {
     return request({
       url: '/user/setting/get/webp',
diff --git a/src/components/Logo/index.vue b/src/components/Logo/index.vue
new file mode 100644
index 0000000..3e80d7a
--- /dev/null
+++ b/src/components/Logo/index.vue
@@ -0,0 +1,49 @@
+<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'}"/>
+    </div>
+</template>
+
+<script>
+import fileConfig from "@/utils/file-config";
+
+export default {
+  name: "Logo",
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: Number,
+      default: 50
+    }
+  },
+  data() {
+    return {
+      logoUrl: ''
+    }
+  },
+  watch: {
+    'value': {
+      handler(value)  {
+        if (!value) {
+          return
+        }
+        this.setLogUrl(value)
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    setLogUrl(name) {
+      this.logoUrl = fileConfig.logoUrl(name)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/icons/svg/yes.svg b/src/icons/svg/yes.svg
new file mode 100644
index 0000000..7f206f0
--- /dev/null
+++ b/src/icons/svg/yes.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661742106648" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1767" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M409.31328 790.44608a39.69024 39.69024 0 0 1-28.2112-11.68384L107.85792 505.51808a39.936 39.936 0 1 1 56.43264-56.43264l245.0432 245.0432 449.95584-449.98656a39.936 39.936 0 1 1 56.43264 56.43264l-478.208 478.208a39.58784 39.58784 0 0 1-28.2112 11.68384z m0 0" fill="#1F91F2" p-id="1768"></path></svg>
\ No newline at end of file
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 9494b35..017b64a 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -3,12 +3,13 @@
     <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>
-        <h1 class="sidebar-title">{{ title }} </h1>
+<!--        <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="/">
         <!--<img v-if="logo" :src="logo" class="sidebar-logo">-->
-        <svg-icon class="sidebar-logo-expand" icon-class="jmal-cloud"></svg-icon>
+<!--        <svg-icon class="sidebar-logo-expand" icon-class="jmal-cloud"></svg-icon>-->
+        <Logo v-model="netdiskLogo" width="25" class="sidebar-logo-expand"></Logo>
         <h1 class="sidebar-title">{{ title }} </h1>
       </router-link>
     </transition>
@@ -16,17 +17,28 @@
 </template>
 
 <script>
+import Bus from "@/assets/js/bus";
+import Logo from "@/components/Logo";
+
 export default {
   name: 'SidebarLogo',
+  components: {Logo},
   props: {
     collapse: {
       type: Boolean,
       required: true
     }
   },
+  mounted() {
+    Bus.$on('updateLogo', () => {
+      console.log('updateLogo', this.$store.state.user.netdiskLogo)
+      this.netdiskLogo = this.$store.state.user.netdiskLogo
+    })
+  },
   data() {
     return {
       title: 'jmalcloud',
+      netdiskLogo: ''
     }
   }
 }
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 05790fe..7346ffe 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -14,7 +14,9 @@ const getDefaultState = () => {
     userInfo: {},
     avatar: '',
     userId: getConsumerId(),
-    menuList: []
+    menuList: [],
+    netdiskName: '',
+    netdiskLogo: '',
   }
 }
 
@@ -44,6 +46,12 @@ const mutations = {
   },
   SET_USER_INFO:(state,userInfo) => {
     state.userInfo = userInfo;
+  },
+  SET_NETDISK_NAME:(state,netdiskName) => {
+    state.netdiskName = netdiskName;
+  },
+  SET_NETDISK_LOGO:(state,netdiskLogo) => {
+    state.netdiskLogo = netdiskLogo;
   }
 }
 
@@ -85,6 +93,13 @@ const actions = {
     })
   },
 
+  // set logo
+  setLogo({ commit }, logoInfo) {
+    const { netdiskName, netdiskLogo } = logoInfo
+    commit('SET_NETDISK_NAME', netdiskName)
+    commit('SET_NETDISK_LOGO', netdiskLogo)
+  },
+
   // get user info
   getInfo({ commit, state }) {
     return new Promise((resolve, reject) => {
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index eeb7556..09ed569 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -9,9 +9,13 @@
       <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
 
         <div class="title-container">
-          <h3 v-if="!initialize" class="title">
-            <span class="jmal-cloud-log"><svg-icon icon-class="jmal-cloud"></svg-icon></span>
-            <span>JmalCloud</span>
+          <h3 v-if="!initialize">
+            <div  class="title">
+              <Logo v-model="webstieRecord.netdiskLogo" width="65"></Logo>
+              <div class="jmal-cloud-name">
+                <div>{{ webstieRecord.netdiskName }}</div>
+              </div>
+            </div>
           </h3>
           <h3 v-if="initialize" class="title">创建管理员</h3>
         </div>
@@ -100,10 +104,11 @@
 import { getWebstieRecord } from "@/api/setting-api";
 import { hasUser, initialization } from '@/api/user'
 import { getRememberName } from '@/utils/auth'
-import store from "@/store";
+import Logo from "@/components/Logo";
 
 export default {
   name: 'Login',
+  components: {Logo},
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!this.validUsername(value)) {
@@ -131,7 +136,9 @@ export default {
     return {
       webstieRecord: {
         copyright: 'Copyright © 2020 Journey Magical AL',
-        recordPermissionNum: '"鄂 ICP 备 2020021454 号 - 1"'
+        recordPermissionNum: '"鄂 ICP 备 2020021454 号 - 1"',
+        netdiskName: 'jmalcloud',
+        netdiskLogo: ''
       },
       loginForm: {
         username: '',
@@ -364,10 +371,13 @@ $light_gray:#eee;
       margin: 20px auto 40px auto;
       text-align: center;
       font-weight: 500;
+      display: inline-flex;
     }
 
-    .jmal-cloud-log {
-      font-size: 42px;
+    .jmal-cloud-name {
+      font-size: 22px;
+      line-height: 65px;
+      margin-left: 10px;
     }
   }
 
diff --git a/src/views/setting/cloudManager.vue b/src/views/setting/cloudManager.vue
index 067bc6d..8c6698a 100644
--- a/src/views/setting/cloudManager.vue
+++ b/src/views/setting/cloudManager.vue
@@ -9,17 +9,23 @@
         </div>
       </div>
       <div>
-        <div>
+        <div class="config-itme-label">网盘名称：
+          <el-input placeholder="请输入网盘名称" v-model="netdiskName" minlength="1" maxlength="8" size="medium" :style="{width: inputNetdiskNameWidth+'px'}"
+                    @keyup.enter.native="updateNetdiskName" @input="inputNetdiskName">
+            <el-button  v-if="showAckBtn" slot="append" icon="el-icon-check" @click="updateNetdiskName"></el-button>
+          </el-input>
+        </div>
+        <div class="config-itme-label logo">网盘Logo：
           <el-upload
             class="avatar-uploader"
             :action="uploadUrl"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload">
-            <img v-if="logoUrl" :src="logoUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <Logo v-model="logoFileName" width="80" class="avatar"></Logo>
           </el-upload>
         </div>
+        <span class="instruction">点击更换Logo</span>
         <div class="config-itme-label">启用webp：
           <el-switch
             v-model="webpEnabled"
@@ -34,11 +40,13 @@
           <a href="https://baike.baidu.com/item/webp%E6%A0%BC%E5%BC%8F" target="_blank">什么是webp?</a>
         </span>
         <div class="config-itme-label">网盘同步：
-          <el-button class="sync-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i class="el-icon-refresh"></i></el-button>
+          <el-button class="sync-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i
+            class="el-icon-refresh"></i></el-button>
         </div>
         <span class="instruction">一般用于初始化操作, 将文件数据同步到数据库</span>
         <div class="config-itme-label">重置角色、菜单：
-          <el-button class="sync-button" size="mini" :loading="resetLoading" type="danger" @click="resetMenuAndRole()"><i class="el-icon-refresh-left"></i></el-button>
+          <el-button class="sync-button" size="mini" :loading="resetLoading" type="danger" @click="resetMenuAndRole()">
+            <i class="el-icon-refresh-left"></i></el-button>
         </div>
         <span class="instruction">一般用于初始化角色、菜单数据</span>
       </div>
@@ -48,12 +56,12 @@
 
 <script>
 
-import settingApi from "@/api/setting-api";
-import {getSetting} from '@/api/setting-api'
+import settingApi, {getSetting} from "@/api/setting-api";
 import Bus from "@/assets/js/bus";
-import fileConfig from "@/utils/file-config";
+import Logo from "@/components/Logo";
 
 export default {
+  components: {Logo},
   data() {
     return {
       uploadUrl: process.env.VUE_APP_BASE_API + '/user/setting/upload_logo?jmal-token=' + this.$store.state.user.token,
@@ -61,7 +69,11 @@ export default {
       syncLoading: false,
       resetLoading: false,
       webpEnabled: false,
-      logoUrl: ''
+      logoFileName: '',
+      netdiskName: 'jmalcloud',
+      showAckBtn: false,
+      inputNetdiskNameWidth: 150,
+      logoFileTypeList: ['image/svg+xml', 'image/jpg', 'image/png', 'image/jpeg']
     }
   },
   mounted() {
@@ -76,30 +88,70 @@ export default {
     Bus.$off()
   },
   methods: {
-    handleAvatarSuccess(res, file) {
+    handleAvatarSuccess(res) {
       if (res.code === 0) {
-        this.logoUrl = fileConfig.logoUrl(res.data)
+        this.logoFileName = res.data
+        this.$store.dispatch('user/setLogo', {netdiskName: this.netdiskName, netdiskLogo: this.logoFileName}).then(()=> {
+          Bus.$emit('updateLogo')
+        })
       } else {
         this.$message.error(res.message)
       }
     },
     beforeAvatarUpload(file) {
-      const isLtOneM = file.size / 1024 / 1024 < 1;
-      if (!isLtOneM) {
-        this.$message.error('上传头像图片大小不能超过 1MB!');
+      const correctFormat = this.logoFileTypeList.includes(file.type);
+      const isLtOneM = file.size / 1024 < 128;
+      if (!correctFormat) {
+        this.$message.error('网盘Logo只能是 SVG|JPG|JPEG|PNG 格式!');
       }
-      return isLtOneM;
+      if (!isLtOneM) {
+        this.$message.error('网盘Logo大小不能超过 128k!');
+      }
+      return correctFormat && isLtOneM;
     },
     // 获取网站设置
     getWebsiteSetting() {
       getSetting({userId: this.$store.state.user.userId}).then((res) => {
-        if(res.data) {
-          this.logoUrl = fileConfig.logoUrl(res.data.netdiskLogo)
-          // this.logoUrl = '../../icons/svg/jmal-cloud.svg'
+        if (res.data) {
+          if (res.data.netdiskLogo) {
+            this.logoFileName = res.data.netdiskLogo
+          }
+          if (res.data.netdiskName) {
+            this.netdiskName = res.data.netdiskName
+          }
         }
       })
     },
-    getInfo(){
+    inputNetdiskName(input) {
+      if (input) {
+        this.showAckBtn = true
+        this.inputNetdiskNameWidth = 206
+      }
+    },
+    setInputBlur() {
+      this.showAckBtn = false
+      this.inputNetdiskNameWidth = 150
+    },
+    // 修改网盘名称
+    updateNetdiskName() {
+      if (!this.netdiskName) {
+        this.$message.warning("网盘名称不能为空")
+        return
+      }
+      //中文，数字，字母，下划线
+      const reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
+      if(reg.test(this.netdiskName)) {
+        settingApi.updateNetdiskName({netdiskName: this.netdiskName}).then(() => {
+          this.$message.success("网盘名称 修改成功")
+          this.setInputBlur()
+        }).catch(()=>{
+          this.setInputBlur()
+        })
+      } else {
+        this.$message.warning("网盘名称 只能包含中文，数字，字母，下划线")
+      }
+    },
+    getInfo() {
       settingApi.getWebp({userId: this.$store.state.user.userId}).then((res) => {
         this.webpEnabled = !res.data
       })
@@ -117,13 +169,12 @@ export default {
       }).then(() => {
         this.syncLoading = true
         settingApi.sync({username: this.$store.state.user.name}).then(() => {
-        }).catch(() => {
+          this.$message.success("开始同步...")
         })
-      }).catch(() => {
       })
     },
     // 重置角色菜单
-    resetMenuAndRole(){
+    resetMenuAndRole() {
       this.$confirm('您确定要删除当前角色、菜单吗? ', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -133,7 +184,7 @@ export default {
         settingApi.resetMenuAndRole().then(() => {
           this.$message.success("重置完成")
           this.resetLoading = false
-        }).catch(()=> {
+        }).catch(() => {
           this.resetLoading = false
         })
       }).catch(() => {
@@ -153,32 +204,37 @@ export default {
 
 <style lang="scss" scoped>
 @import "src/styles/setting";
+
 >>> .el-textarea {
   max-width: 1080px;
 }
 
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
+.config-itme-label.logo {
+  display: flex;
+  line-height: 80px;
 }
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
+
+.netdisk-name {
+  width: 220px;
 }
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 150px;
-  height: 150px;
-  line-height: 150px;
-  text-align: center;
-}
-.avatar {
-  width: 150px;
-  height: 150px;
+
+.avatar-uploader >>> .el-upload {
   display: block;
+
+  .avatar {
+    width: 80px;
+    height: 80px;
+    display: block;
+
+    &:hover {
+      -webkit-filter: grayscale(100%);
+      -moz-filter: grayscale(100%);
+      -ms-filter: grayscale(100%);
+      -o-filter: grayscale(100%);
+      filter: grayscale(100%);
+      filter: gray;
+    }
+  }
 }
 
 </style>