Skip to content

G
gin-vue-admin

FLIPPED-AURORA / gin-vue-admin
10 个月 前同步成功

通知 324
Star 18154
Fork 5505
G
gin-vue-admin

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 f42c6775 编写于 作者: Mr.奇淼（'s avatar Mr.奇淼（
浏览文件
操作

增加自定义皮肤功能 清理无用文件

上级 7e8eddf1
展开全部 隐藏空白更改
内联 并排
Showing with 192 addition and 9882 deletion
server/model/sys_user.go
浏览文件 @ f42c6775
......@@ -14,4 +14,7 @@ type SysUser struct {
HeaderImg string `json:"headerImg" gorm:"default:http://qmplusimg.henrongyi.top/head.png;comment:用户头像"` // 用户头像
Authority SysAuthority `json:"authority" gorm:"foreignKey:AuthorityId;references:AuthorityId;comment:用户角色"`
AuthorityId string `json:"authorityId" gorm:"default:888;comment:用户角色ID"` // 用户角色ID
SideMode string `json:"sideMode" gorm:"default:dark;comment:用户角色ID"` // 用户侧边主题
ActiveColor string `json:"activeColor" gorm:"default:#1890ff;comment:用户角色ID"` // 活跃颜色
BaseColor string `json:"baseColor" gorm:"default:#fff;comment:用户角色ID"` // 基础颜色
}
web/src/components/themeChange/index.vue 已删除 100644 → 0
浏览文件 @ 7e8eddf1
<template>
<el-color-picker
v-model="theme"
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</template>
<script>
const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color
export default {
data() {
return {
chalk: '', // content of theme-chalk css
theme: ''
}
},
computed: {
defaultTheme() {
return this.$store.state.user.theme
}
},
watch: {
defaultTheme: {
handler: function(val, oldVal) {
this.theme = val
},
immediate: true
},
async theme(val) {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
const $message = this.$message({
message: '修改主题色中',
customClass: 'theme-message',
type: 'success',
duration: 0,
iconClass: 'el-icon-loading'
})
const getHandler = (variable, id) => {
return () => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
let styleTag = document.getElementById(id)
if (!styleTag) {
styleTag = document.createElement('style')
styleTag.setAttribute('id', id)
document.head.appendChild(styleTag)
}
styleTag.innerText = newStyle
}
}
if (!this.chalk) {
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
await this.getCSSString(url, 'chalk')
}
const chalkHandler = getHandler('chalk', 'chalk-style')
chalkHandler()
const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
})
styles.forEach(style => {
const { innerText } = style
if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
})
this.$emit('change', val)
$message.close()
}
},
methods: {
updateStyle(style, oldCluster, newCluster) {
let newStyle = style
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
})
return newStyle
},
getCSSString(url, variable) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
resolve()
}
}
xhr.open('GET', url)
xhr.send()
})
},
getThemeCluster(theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
if (tint === 0) { // when primary color is in its rgb space
return [red, green, blue].join(',')
} else {
red += Math.round(tint * (255 - red))
green += Math.round(tint * (255 - green))
blue += Math.round(tint * (255 - blue))
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
}
const shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
red = Math.round((1 - shade) * red)
green = Math.round((1 - shade) * green)
blue = Math.round((1 - shade) * blue)
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
const clusters = [theme]
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
}
clusters.push(shadeColor(theme, 0.1))
return clusters
}
}
}
</script>
<style>
.theme-message,
.theme-picker-dropdown {
z-index: 99999 !important;
}
.theme-picker .el-color-picker__trigger {
height: 26px !important;
width: 26px !important;
padding: 2px;
}
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
</style>
web/src/store/module/user.js
浏览文件 @ f42c6775
import { login } from '@/api/user'
import { jsonInBlacklist } from '@/api/jwt'
import router from '@/router/index'
import variables from '@/style/element_visiable.scss'
import { setUserInfo } from '@/api/user'
import { Message } from 'element-ui'
export const user = {
namespaced: true,
state: {
......@@ -10,8 +12,9 @@ export const user = {
nickName: '',
headerImg: '',
authority: '',
sideMode : 'dark',
theme: variables.colorPrimary,
sideMode: 'dark',
activeColor: '#1890ff',
baseColor: '#fff'
},
token: ''
},
......@@ -42,11 +45,14 @@ export const user = {
...userInfo
}
},
CHANGETHEME: (state, value) => {
state.theme = value
ChangeActiveColor: async(state, val) => {
state.userInfo.activeColor = val
},
ChangeSideMode: async(state, val) => {
state.userInfo.sideMode = val
},
CHANGESIDEMODE: (state ,val) => {
state.sideMode = val
ChangeBaseColor: (state, val) => {
state.userInfo.baseColor = val
}
},
actions: {
......@@ -74,11 +80,35 @@ export const user = {
commit('LoginOut')
}
},
changeTheme({ commit }, data) {
commit('CHANGETHEME', data)
async changeActiveColor({ commit, state }, data) {
const res = await setUserInfo({ activeColor: data, ID: state.userInfo.ID })
if (res.code === 0) {
commit('ChangeActiveColor', data)
Message({
type: 'success',
message: '设置成功'
})
}
},
changeSideMode({ commit },data) {
commit('CHANGESIDEMODE',data)
async changeSideMode({ commit, state }, data) {
const res = await setUserInfo({ sideMode: data, ID: state.userInfo.ID })
if (res.code === 0) {
commit('ChangeSideMode', data)
Message({
type: 'success',
message: '设置成功'
})
}
},
async changeBaseColor({ commit, state }, data) {
const res = await setUserInfo({ baseColor: data, ID: state.userInfo.ID })
if (res.code === 0) {
commit('ChangeBaseColor', data)
Message({
type: 'success',
message: '设置成功'
})
}
}
},
getters: {
......@@ -88,8 +118,14 @@ export const user = {
token(state) {
return state.token
},
getSideMode(state) {
return state.sideMode
sideMode(state) {
return state.userInfo.sideMode
},
baseColor(state) {
return state.userInfo.baseColor
},
activeColor(state) {
return state.userInfo.activeColor
}
}
......
web/src/style/main.scss
浏览文件 @ f42c6775
......@@ -563,13 +563,13 @@ li {
.el-menu {
border-right: none;
}
.tilte {
min-height: $height-aside-tilte;
line-height: $height-aside-tilte;
background: $bg-aside;
text-align: center;
transition: all 0.3s;
.logoimg {
width: $width-aside-img;
height: $height-aside-img;
......@@ -593,6 +593,7 @@ li {
.aside {
.el-menu-vertical {
transition: all 0.3s;
background-color: $bg-aside;
}
.el-submenu {
......@@ -603,7 +604,7 @@ li {
height: 44px;
line-height: 44px;
}
.is-active {
.is-active {
background-color: #1890ff;
// 关闭三级菜单二级菜单样式
ul{
......@@ -1090,21 +1091,6 @@ li {
border-left: 1px solid $border-color;
}
.el-tabs__item::before {
content: "";
width: 9px;
height: 9px;
margin-right: 8px;
display: inline-block;
background-color: #ddd;
border-radius: 50%;
transition: background-color .2s;
}
.el-tabs__item.is-active::before {
background-color: #409eff;
}
.el-tabs__item.is-active {
background-color: rgba(64, 158, 255, .08);
}
......@@ -1210,7 +1196,7 @@ $mainHight: 100vh;
height: 60px;
}
}
}
......@@ -1284,7 +1270,6 @@ $mainHight: 100vh;
.el-menu-vertical {
height: calc(100vh - 64px) !important;
visibility: auto;
&:not(.el-menu--collapse) {
width: 220px;
}
......@@ -1521,4 +1506,4 @@ $mainHight: 100vh;
::-webkit-scrollbar-thumb:hover {
background-color: #bbb;
}
\ No newline at end of file
}
web/src/view/layout/aside/historyComponent/history.vue
浏览文件 @ f42c6775
<template>
<template>
<div class="router-history">
<el-tabs
v-model="activeValue"
......@@ -10,11 +10,14 @@
>
<el-tab-pane
v-for="item in historys"
:key="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
:key="name(item)"
:label="item.meta.title"
:name="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
:name="name(item)"
:tab="item"
/>
class="gva-tab"
>
<span slot="label" :style="{color: activeColor}"><i class="dot" :style="{backgroundColor:activeValue===name(item)?activeColor:'#ddd'}" /> {{ item.meta.title }}</span>
</el-tab-pane>
</el-tabs>
<!--自定义右键菜单html代码-->
......@@ -49,7 +52,7 @@ export default {
}
},
computed: {
...mapGetters('user', ['userInfo']),
...mapGetters('user', ['userInfo', 'activeColor']),
defaultRouter() {
return this.userInfo.authority.defaultRouter
}
......@@ -108,7 +111,9 @@ export default {
this.$bus.off('mobile')
},
methods: {
name(item) {
return item.name + JSON.stringify(item.query) + JSON.stringify(item.params)
},
openContextMenu(e) {
if (this.historys.length === 1 && this.$route.name === this.defaultRouter) {
return false
......@@ -277,6 +282,19 @@ export default {
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
}
.el-tabs__item .el-icon-close{
color: initial !important;
}
.el-tabs__item .dot {
content: "";
width: 9px;
height: 9px;
margin-right: 8px;
display: inline-block;
border-radius: 50%;
transition: background-color .2s;
}
.contextmenu li {
margin: 0;
padding: 7px 16px;
......
web/src/view/layout/aside/index.vue
浏览文件 @ f42c6775
......@@ -6,10 +6,10 @@
:collapse="isCollapse"
:collapse-transition="true"
:default-active="active"
:active-text-color="$store.getters['user/getSideMode'] === 'dark' ? '#1890ff' : '#1890ff'"
:background-color="$store.getters['user/getSideMode'] === 'dark' ? '#191a23 ' : '#fff'"
:background-color="backgroundColor"
:active-text-color="activeColor"
:text-color="textColor"
class="el-menu-vertical"
text-color="#999"
unique-opened
@select="selectMenuItem"
>
......@@ -37,7 +37,26 @@ export default {
}
},
computed: {
...mapGetters('router', ['asyncRouters'])
...mapGetters('router', ['asyncRouters']),
...mapGetters('user', ['baseColor', 'activeColor', 'sideMode']),
backgroundColor() {
if (this.sideMode === 'dark') {
return '#191a23'
} else if (this.sideMode === 'light') {
return '#fff'
} else {
return this.sideMode
}
},
textColor() {
if (this.$store.getters['user/sideMode'] === 'dark') {
return '#fff'
} else if (this.$store.getters['user/sideMode'] === 'light') {
return '#191a23'
} else {
return this.baseColor
}
}
},
watch: {
$route() {
......@@ -83,6 +102,11 @@ export default {
</script>
<style lang="scss">
.el-submenu__title,.el-menu-item{
i{
color: inherit !important;
}
}
.el-scrollbar {
.el-scrollbar__view {
height: 100%;
......
web/src/view/layout/index.vue
浏览文件 @ f42c6775
......@@ -3,9 +3,9 @@
<el-container :class="[isSider?'openside':'hideside',isMobile ? 'mobile': '']">
<el-row :class="[isShadowBg?'shadowBg':'']" @click.native="changeShadow()" />
<el-aside class="main-cont main-left">
<div class="tilte" :class="$store.getters['user/getSideMode']">
<div class="tilte" :style="{background: backgroundColor}">
<img alt class="logoimg" :src="$GIN_VUE_ADMIN.appLogo">
<h2 v-if="isSider" class="tit-text" :class="$store.getters['user/getSideMode']">{{ $GIN_VUE_ADMIN.appName }}</h2>
<h2 v-if="isSider" class="tit-text" :style="{color:textColor}">{{ $GIN_VUE_ADMIN.appName }}</h2>
</div>
<Aside class="aside" />
</el-aside>
......@@ -114,7 +114,25 @@ export default {
}
},
computed: {
...mapGetters('user', ['userInfo']),
...mapGetters('user', ['userInfo', 'sideMode', 'baseColor']),
textColor() {
if (this.$store.getters['user/sideMode'] === 'dark') {
return '#fff'
} else if (this.$store.getters['user/sideMode'] === 'light') {
return '#191a23'
} else {
return this.baseColor
}
},
backgroundColor() {
if (this.sideMode === 'dark') {
return '#191a23'
} else if (this.sideMode === 'light') {
return '#fff'
} else {
return this.sideMode
}
},
title() {
return this.$route.meta.title || '当前页面'
},
......@@ -196,152 +214,6 @@ export default {
<style lang="scss">
@import '@/style/mobile.scss';
// $headerHigh: 52px;
// $mainHight: 100vh;
// .dropdown-group {
// min-width: 100px;
// }
// .topfix {
// position: fixed;
// top: 0;
// box-sizing: border-box;
// z-index: 999;
// }
// .admin-box {
// min-height: calc(100vh - 240px);
// background-color: rgb(255, 255, 255);
// margin-top: 100px;
// }
// .el-scrollbar__wrap {
// padding-bottom: 17px;
// }
// .layout-cont {
// .right-box {
// text-align: center;
// vertical-align: middle;
// img {
// vertical-align: middle;
// border: 1px solid #ccc;
// border-radius: 6px;
// }
// }
// .header-cont {
// height: $headerHigh !important;
// background: #fff;
// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
// line-height: $headerHigh;
// }
// .main-cont {
// .breadcrumb {
// line-height: 48px;
// display: inline-block;
// padding: 0 24px;
// // padding: 6px;
// // border-bottom: 1px solid #eee;
// }
// &.el-main {
// overflow: auto;
// background: #fff;
// // padding: 0px 10px;
// // background: #fff;
// }
// height: $mainHight !important;
// overflow: visible;
// position: relative;
// .menu-total {
// // z-index: 5;
// // position: absolute;
// // top: 10px;
// // right: -35px;
// margin-left: -10px;
// float: left;
// margin-top: 10px;
// width: 30px;
// height: 30px;
// line-height: 30px;
// font-size: 30px;
// // border: 0 solid #ffffff;
// // border-radius: 50%;
// // background: #fff;
// }
// .aside {
// overflow: auto;
// // background: #fff;
// &::-webkit-scrollbar {
// display: none;
// }
// }
// .el-menu-vertical {
// height: calc(100vh - 64px) !important;
// visibility: auto;
// &:not(.el-menu--collapse) {
// width: 220px;
// }
// }
// .el-menu--collapse {
// width: 54px;
// li {
// .el-tooltip,
// .el-submenu__title {
// padding: 0px 15px !important;
// }
// }
// }
// &::-webkit-scrollbar {
// display: none;
// }
// &.main-left {
// width: auto !important;
// }
// &.main-right {
// .admin-title {
// float: left;
// font-size: 16px;
// vertical-align: middle;
// margin-left: 20px;
// img {
// vertical-align: middle;
// }
// &.collapse {
// width: 53px;
// }
// }
// }
// }
// }
// .tilte {
// background: #001529;
// min-height: 64px;
// line-height: 64px;
// background: #002140;
// text-align: center;
// .logoimg {
// width: 30px;
// height: 30px;
// vertical-align: middle;
// background: #fff;
// border-radius: 50%;
// padding: 3px;
// }
// .tit-text {
// display: inline-block;
// color: #fff;
// font-weight: 600;
// font-size: 20px;
// vertical-align: middle;
// }
// }
// .screenfull {
// display: inline-block;
// }
// .header-avatar{
// display: flex;
// justify-content: center;
// align-items: center;
// }
.dark{
background-color: #191a23 !important;
color: #fff !important;
......
web/src/view/layout/setting/index.vue
浏览文件 @ f42c6775
<template>
<div>
<el-button type="primary" class="drawer-container" icon="el-icon-setting" @click="showSettingDrawar" />
<el-button type="primary" class="drawer-container" icon="el-icon-setting" @click="showSettingDrawer" />
<el-drawer
title="系统配置"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose"
title="系统配置"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose"
>
<div class="setting_body">
<div class="setting_card">
<div class="setting_title">侧边栏主题</div>
<div class="setting_content">
<div class="item" @click="chageMode('light')">
<i v-if="sideMode === 'light'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
<div class="theme-box">
<div class="item" @click="changeMode('light')">
<i v-if="sideMode === 'light'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
</div>
<div class="item" @click="changeMode('dark')">
<i v-if="sideMode === 'dark'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
</div>
</div>
<div class="item" @click="chageMode('dark')">
<i v-if="sideMode === 'dark'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
<div class="color-box">
<div>
<div class="setting_title">自定义背景色</div>
<el-color-picker :value="sideMode" @change="changeMode" />
</div>
<div>
<div class="setting_title">自定义基础色</div>
<el-color-picker :value="baseColor" @change="changeBaseColor" />
</div>
<div>
<div class="setting_title">活跃色</div>
<el-color-picker :value="activeColor" @change="activeColorChange" />
</div>
</div>
</div>
</div>
<!-- <div class="setting_card">-->
<!-- <div class="setting_title">主题色</div>-->
<!-- <div class="">-->
<!-- <theme-change style="width: 30px;height: 30px;margin-top: 20px" @change="themeChange" />-->
<!-- </div>-->
<!-- </div>-->
</div>
</el-drawer>
......@@ -34,31 +44,44 @@
</template>
<script>
import themeChange from '@/components/themeChange'
import { mapGetters } from 'vuex'
export default {
data() {
return {
drawer: false,
direction: 'rtl',
sideMode: 'dark'
direction: 'rtl'
}
},
components: {
themeChange
computed: {
...mapGetters('user', ['sideMode', 'baseColor', 'activeColor'])
},
methods: {
handleClose() {
this.drawer = false
},
showSettingDrawar() {
showSettingDrawer() {
this.drawer = true
},
chageMode(e) {
this.sideMode = e
this.$store.dispatch('user/changeSideMode',e)
changeMode(e) {
if (e === null) {
this.$store.dispatch('user/changeSideMode', 'dark')
return
}
this.$store.dispatch('user/changeSideMode', e)
},
changeBaseColor(e) {
if (e === null) {
this.$store.dispatch('user/changeBaseColor', '#fff')
return
}
this.$store.dispatch('user/changeBaseColor', e)
},
themeChange(val) {
this.$store.dispatch('user/changeTheme', val)
activeColorChange(e) {
if (e === null) {
this.$store.dispatch('user/changeActiveColor', '#1890ff')
return
}
this.$store.dispatch('user/changeActiveColor', e)
}
}
}
......@@ -88,6 +111,16 @@ export default {
.setting_content{
margin-top: 20px;
display: flex;
flex-direction: column;
>.theme-box{
display: flex;
}
>.color-box{
div{
display: flex;
flex-direction: column;
}
}
.item{
position: relative;
display: flex;
......
web/yarn.lock 已删除 100644 → 0
浏览文件 @ 7e8eddf1
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或