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

f42c6775 · Mr.奇淼（ · 7e8eddf1 · f42c6775 · 7e8eddf1 · f42c6775
9 changed file
--- a/server/model/sys_user.go
+++ b/server/model/sys_user.go
@@ -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"` // 基础颜色
 }
--- a/web/src/components/themeChange/index.vue
+++ b/web/src/components/themeChange/index.vue
-<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>
--- a/web/src/store/module/user.js
+++ b/web/src/store/module/user.js
 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',
+      sideMode: 'dark',
-      theme: variables.colorPrimary,
+      activeColor: '#1890ff',
+      baseColor: '#fff'
    },
    token: ''
  },
@@ -42,11 +45,14 @@ export const user = {
        ...userInfo
      }
    },
-    CHANGETHEME: (state, value) => {
+    ChangeActiveColor: async(state, val) => {
-      state.theme = value
+      state.userInfo.activeColor = val
+    },
+    ChangeSideMode: async(state, val) => {
+      state.userInfo.sideMode = val
    },
-    CHANGESIDEMODE: (state ,val) => {
+    ChangeBaseColor: (state, val) => {
-      state.sideMode = val
+      state.userInfo.baseColor = val
    }
  },
  actions: {
@@ -74,11 +80,35 @@ export const user = {
        commit('LoginOut')
      }
    },
-    changeTheme({ commit }, data) {
+    async changeActiveColor({ commit, state }, data) {
-      commit('CHANGETHEME', 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) {
+    async changeSideMode({ commit, state }, data) {
-      commit('CHANGESIDEMODE',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) {
+    sideMode(state) {
-      return state.sideMode
+      return state.userInfo.sideMode
+    },
+    baseColor(state) {
+      return state.userInfo.baseColor
+    },
+    activeColor(state) {
+      return state.userInfo.activeColor
    }
  }

--- a/web/src/style/main.scss
+++ b/web/src/style/main.scss
@@ -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
--- a/web/src/view/layout/aside/historyComponent/history.vue
+++ b/web/src/view/layout/aside/historyComponent/history.vue
 <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;

--- a/web/src/view/layout/aside/index.vue
+++ b/web/src/view/layout/aside/index.vue
@@ -6,10 +6,10 @@
          :collapse="isCollapse"
          :collapse-transition="true"
          :default-active="active"
-          :active-text-color="$store.getters['user/getSideMode'] === 'dark' ? '#1890ff' : '#1890ff'"
+          :background-color="backgroundColor"
-          :background-color="$store.getters['user/getSideMode'] === 'dark' ? '#191a23 ' : '#fff'"
+          :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%;

--- a/web/src/view/layout/index.vue
+++ b/web/src/view/layout/index.vue
@@ -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;

--- a/web/src/view/layout/setting/index.vue
+++ b/web/src/view/layout/setting/index.vue
 <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="系统配置"
+      title="系统配置"
-        :visible.sync="drawer"
+      :visible.sync="drawer"
-        :direction="direction"
+      :direction="direction"
-        :before-close="handleClose"
+      :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')">
+            <div class="theme-box">
-              <i v-if="sideMode === 'light'" class="el-icon-check check" />
+              <div class="item" @click="changeMode('light')">
-              <img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
+                <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')">
+            <div class="color-box">
-              <i v-if="sideMode === 'dark'" class="el-icon-check check" />
+              <div>
-              <img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
+                <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',
+      direction: 'rtl'
-      sideMode: 'dark'
    }
  },
-  components: {
+  computed: {
-    themeChange
+    ...mapGetters('user', ['sideMode', 'baseColor', 'activeColor'])
  },
  methods: {
    handleClose() {
      this.drawer = false
    },
-    showSettingDrawar() {
+    showSettingDrawer() {
      this.drawer = true
    },
-    chageMode(e) {
+    changeMode(e) {
-      this.sideMode = e
+      if (e === null) {
-      this.$store.dispatch('user/changeSideMode',e)
+        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) {
+    activeColorChange(e) {
-      this.$store.dispatch('user/changeTheme', val)
+      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;

--- a/web/yarn.lock
+++ b/web/yarn.lock