lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨新增网盘logo和名称的修改

Browse Source
This commit is contained in:
jmal 2022-08-29 18:13:26 +08:00
parent b85098506f
commit b38439a4da
7 changed files with 203 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/setting-api.js
View File

@ -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',

49
src/components/Logo/index.vue Normal file
View File

@ -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>

1
src/icons/svg/yes.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 632 B

18
src/layout/components/Sidebar/Logo.vue
View File

@ -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: ''
}
}
}

17
src/store/modules/user.js
View File

@ -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) => {

24
src/views/login/index.vue
View File

@ -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;
}
}

140
src/views/setting/cloudManager.vue
View File

@ -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>