Merge pull request #1 from flipped-aurora/master

拉取代码

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"` // 基础颜色
 }

server/resource/template/web/form.vue.tpl

@@ -27,8 +27,8 @@
       </el-form-item>
     {{ end -}}
       <el-form-item>
-        <el-button type="primary" @click="save">保存</el-button>
-        <el-button type="primary" @click="back">返回</el-button>
+        <el-button size="mini" type="primary" @click="save">保存</el-button>
+        <el-button size="mini" type="primary" @click="back">返回</el-button>
       </el-form-item>
     </el-form>
 </div>

server/resource/template/web/table.vue.tpl

@@ -22,19 +22,15 @@
           <el-input placeholder="搜索条件" v-model="searchInfo.{{.FieldJson}}" />
         </el-form-item> {{ end }} {{ end }}  {{ end }}
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">查询</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="openDialog">新增{{.Description}}</el-button>
-        </el-form-item>
-        <el-form-item>
+          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
+          <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>
           <el-popover v-model="deleteVisible" placement="top" width="160">
             <p>确定要删除吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button>
               <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
             </div>
-            <el-button slot="reference" icon="el-icon-delete" size="mini" type="danger">批量删除</el-button>
+            <el-button slot="reference" icon="el-icon-delete" size="mini" type="danger" style="margin-left: 10px;">批量删除</el-button>
           </el-popover>
         </el-form-item>
       </el-form>

server/service/sys_initdb.go

@@ -81,7 +81,7 @@ func InitDB(conf request.InitDB) error {
 		conf.Port = "3306"
 	}
 	dsn := fmt.Sprintf("%s:%s@tcp(%s:%s)/", conf.UserName, conf.Password, conf.Host, conf.Port)
-	createSql := fmt.Sprintf("CREATE DATABASE IF NOT EXISTS %s DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci;", conf.DBName)
+	createSql := fmt.Sprintf("CREATE DATABASE IF NOT EXISTS `%s` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci;", conf.DBName)
 	if err := createTable(dsn, "mysql", createSql); err != nil {
 		return err
 	}

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>

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',
-      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: '设置成功'
+        })
+      }
+    },
+    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: '设置成功'
+        })
+      }
     },
-    changeSideMode({ commit },data) {
-      commit('CHANGESIDEMODE',data)
+    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,32 @@ export const user = {
     token(state) {
       return state.token
     },
-    getSideMode(state) {
-      return state.sideMode
+    mode(state) {
+      return state.userInfo.sideMode
+    },
+    sideMode(state) {
+      if (state.userInfo.sideMode === 'dark') {
+        return '#191a23'
+      } else if (state.userInfo.sideMode === 'light') {
+        return '#fff'
+      } else {
+        return state.userInfo.sideMode
+      }
+    },
+    baseColor(state) {
+      if (state.userInfo.sideMode === 'dark') {
+        return '#fff'
+      } else if (state.userInfo.sideMode === 'light') {
+        return '#191a23'
+      } else {
+        return state.userInfo.baseColor
+      }
+    },
+    activeColor(state) {
+      if (state.userInfo.sideMode === 'dark' || state.userInfo.sideMode === 'light') {
+        return '#1890ff'
+      }
+      return state.userInfo.activeColor
     }
 
   }

web/src/style/element_visiable.scss

 /* 改变主题色变量 */
 $--color-primary: #1890ff;
 
-/* 改变 icon 字体路径变量，必需 */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-
-
-
-@import "~element-ui/packages/theme-chalk/src/index";
-
+#app{
+  .el-button{
+    font-weight: 400;
+    border-radius: 4px;
+  }
+}
+///* 改变 icon 字体路径变量，必需 */
+//$--font-path: '~element-ui/lib/theme-chalk/fonts';
+//
+//
+//
+//@import "~element-ui/packages/theme-chalk/src/index";
+//
 
 
 :export {
   colorPrimary: $--color-primary
-}
\ No newline at end of file
+}

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{
@@ -715,7 +716,7 @@ li {
 }
 
 .admin-box {
-    padding: 15px 20px;
+    padding: 14px 20px;
     .el-button {
         padding: 7px 10px;
     }
@@ -732,13 +733,13 @@ li {
 .admin-box {
     min-height: calc(100vh - 200px);
     background-color: $white-bg;
-    padding: 15px;
-    margin: 115px 15px 20px;
+    padding: 14px;
+    margin: 114px 14px 20px;
     border-radius: 2px;
 
     .el-table--border {
         border-radius: 4px;
-        margin-bottom: 15px;
+        margin-bottom: 14px;
     }
 
     .el-table {
@@ -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;
         }
     }
-   
+
 
 }
 
@@ -1226,7 +1212,7 @@ $mainHight: 100vh;
         line-height: $height-header;
         text-align: center;
         vertical-align: middle;
-        margin-right: 40px;
+        margin-right: 10px;
 
         img {
             vertical-align: middle;
@@ -1246,7 +1232,7 @@ $mainHight: 100vh;
             line-height: $height-header;
             display: inline-block;
             background-color: #fff;
-            padding: 0 24px;
+            padding: 0;
         }
 
         .fl-right {
@@ -1284,7 +1270,6 @@ $mainHight: 100vh;
         .el-menu-vertical {
             height: calc(100vh - 64px) !important;
             visibility: auto;
-
             &:not(.el-menu--collapse) {
                 width: 220px;
             }
@@ -1485,7 +1470,7 @@ $mainHight: 100vh;
 }
 
 .shadow {
-    margin: 5px 0;
+    margin: 4px 0;
 
     .grid-content {
         background-color: $white-bg;
@@ -1521,4 +1506,4 @@ $mainHight: 100vh;
 
 ::-webkit-scrollbar-thumb:hover {
     background-color: #bbb;
-}
\ No newline at end of file
+}

web/src/style/mobile.scss

@@ -10,12 +10,12 @@
                     padding: 0 $padding-xs;
                 }
             }
-        } 
+        }
         .layout-cont{
             .right-box{
                 margin-right: $margin-xs;
             }
-        } 
+        }
         .search-component{
             width: 30px;
         }
@@ -29,7 +29,7 @@
                 margin-right: 0;
             }
             .big.admin-box{
-                padding: 0 0 15px 0;
+                padding: 0;
             }
             .big {
                 .bottom {
@@ -44,7 +44,7 @@
                 }
             }
         }
-       
+
         .card .car-left,
         .card .car-right{
             width: 100%;
@@ -64,13 +64,13 @@
             }
         }
         .shadow{
-            margin-left: 5px;
-            margin-right: 5px;
+            margin-left: 4px;
+            margin-right: 4px;
             .grid-content{
                 margin-bottom: 10px;
                 padding: 0;
             }
-        } 
+        }
         .el-dialog{
             width: 90%;
         }
@@ -83,7 +83,7 @@
                 padding: 0 5px;
                 display: inline-block;
             }
-           
+
         }
-       
-}
\ No newline at end of file
+
+}

web/src/view/dashboard/index.vue

@@ -173,7 +173,6 @@ export default {
   margin: 100px 0 0 0;
   padding-top: 0;
   background-color: rgb(243, 243, 243);
-  padding-top: 15px;
   .top {
     width: 100%;
     height: 360px;

web/src/view/example/breakpoint/breakpoint.vue

@@ -7,7 +7,7 @@
         <input v-show="false" id="file" ref="Input" multiple="multiple" type="file" @change="choseFile">
       </div>
     </form>
-    <el-button :disabled="limitFileSize" type="primary" size="medium" class="uploadBtn" @click="getFile">上传文件</el-button>
+    <el-button :disabled="limitFileSize" type="primary" size="mini" class="uploadBtn" @click="getFile">上传文件</el-button>
     <div class="el-upload__tip">请上传不超过5MB的文件</div>
     <div class="list">
       <transition name="list" tag="p">
@@ -186,7 +186,8 @@ a {
   display: inline-block;
 }
 .fileUpload{
-    padding: 4px 10px;
+    padding: 3px 10px;
+    font-size: 12px;
     height: 20px;
     line-height: 20px;
     position: relative;

web/src/view/example/customer/customer.vue

@@ -3,7 +3,7 @@
     <div class="search-term">
       <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
         <el-form-item>
-          <el-button type="primary" @click="openDialog">新增客户</el-button>
+          <el-button size="mini" type="primary" icon="el-icon-search" @click="openDialog">新增</el-button>
         </el-form-item>
       </el-form>
     </div>

web/src/view/example/excel/excel.vue

 <template>
   <div class="upload">
-    <el-row>
-      <el-col :span="2">
-        <el-upload
-          :action="`${path}/excel/importExcel`"
-          :headers="{'x-token':token}"
-          :on-success="loadExcel"
-          :show-file-list="false"
-        >
-          <el-button size="small" type="primary" icon="el-icon-upload2">导入</el-button>
-        </el-upload>
-      </el-col>
-      <el-col :span="2">
-        <el-button size="small" type="primary" icon="el-icon-download" @click="handleExcelExport('ExcelExport.xlsx')">导出</el-button>
-      </el-col>
-      <el-col :span="2">
-        <el-button size="small" type="success" icon="el-icon-download" @click="downloadExcelTemplate()">下载模板</el-button>
-      </el-col>
-    </el-row>
+    <div class="btn-list">
+      <el-upload
+        class="excel-btn"
+        :action="`${path}/excel/importExcel`"
+        :headers="{'x-token':token}"
+        :on-success="loadExcel"
+        :show-file-list="false"
+      >
+        <el-button size="small" type="primary" icon="el-icon-upload2">导入</el-button>
+      </el-upload>
+      <el-button class="excel-btn" size="small" type="primary" icon="el-icon-download" @click="handleExcelExport('ExcelExport.xlsx')">导出</el-button>
+      <el-button class="excel-btn" size="small" type="success" icon="el-icon-download" @click="downloadExcelTemplate()">下载模板</el-button>
+    </div>
     <el-table :data="tableData" border row-key="ID" stripe>
       <el-table-column label="ID" min-width="100" prop="ID" />
       <el-table-column label="路由Name" min-width="160" prop="name" />
@@ -73,3 +68,13 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.btn-list{
+  display: flex;
+  margin-bottom: 12px;
+  .excel-btn+.excel-btn{
+    margin-left: 12px;
+  }
+}
+</style>

web/src/view/example/simpleUploader/simpleUploader.vue

@@ -145,7 +145,7 @@ export default {
 .uploader-example {
   width: 880px;
   padding: 15px;
-  margin: 115px 15px 20px;
+  margin: 15px 15px 20px;
   font-size: 12px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
 }

web/src/view/layout/aside/historyComponent/history.vue

-<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: activeValue===name(item)?activeColor:'#333'}"><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

@@ -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="sideMode"
+          :active-text-color="activeColor"
+          :text-color="baseColor"
           class="el-menu-vertical"
-          text-color="#999"
           unique-opened
           @select="selectMenuItem"
         >
@@ -37,7 +37,8 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('router', ['asyncRouters'])
+    ...mapGetters('router', ['asyncRouters']),
+    ...mapGetters('user', ['baseColor', 'activeColor', 'sideMode'])
   },
   watch: {
     $route() {
@@ -83,6 +84,21 @@ export default {
 </script>
 
 <style lang="scss">
+.el-submenu__title,.el-menu-item{
+  i{
+    color: inherit !important;
+  }
+}
+
+.el-submenu__title:hover,.el-menu-item:hover{
+  i{
+    color: inherit !important;
+  }
+  span{
+    color: inherit !important;
+  }
+}
+
 .el-scrollbar {
   .el-scrollbar__view {
     height: 100%;

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;

web/src/view/layout/search/search.vue

@@ -23,7 +23,7 @@
       :style="{display:'inline-block',float:'right',width:'31px',textAlign:'left',fontSize:'16px',paddingTop:'2px'}"
       class="user-box"
     >
-      <i :style="{cursor:'pointer'}" class="el-icon-refresh reload" :class="[reload ? 'reloading' : '']" @click="handleReload" />
+      <i :style="{cursor:'pointer',paddingLeft:'1px'}" class="el-icon-refresh reload" :class="[reload ? 'reloading' : '']" @click="handleReload" />
     </div>
     <div :style="{display:'inline-block',float:'right'}" class="user-box">
       <i :style="{cursor:'pointer'}" class="el-icon-search search-icon" @click="showSearch()" />

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="系统配置"
-        :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_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="mode === '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="mode === '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', 'mode'])
   },
   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)
     }
   }
 }
@@ -66,9 +89,9 @@ export default {
 
 <style lang="scss" scoped>
 .drawer-container {
-  position: absolute;
+  position: fixed;
   right: 0;
-  top: 20%;
+  bottom: 15%;
   height: 40px;
   width: 40px;
   display: flex;
@@ -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/src/view/superAdmin/api/api.vue

@@ -22,19 +22,15 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">查询</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="openDialog('addApi')">新增api</el-button>
-        </el-form-item>
-        <el-form-item>
+          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
+          <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button>
           <el-popover v-model="deleteVisible" placement="top" width="160">
             <p>确定要删除吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button>
               <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
             </div>
-            <el-button slot="reference" icon="el-icon-delete" size="mini" type="danger">批量删除</el-button>
+            <el-button slot="reference" icon="el-icon-delete" size="mini" type="danger" style="margin-left: 10px;">批量删除</el-button>
           </el-popover>
         </el-form-item>
       </el-form>

web/src/view/superAdmin/authority/authority.vue

 <template>
   <div class="authority">
     <div class="button-box clearflex">
-      <el-button type="primary" @click="addAuthority('0')">新增角色</el-button>
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="addAuthority('0')">新增角色</el-button>
     </div>
     <el-table
       :data="tableData"
@@ -15,28 +15,28 @@
       <el-table-column label="角色名称" min-width="180" prop="authorityName" />
       <el-table-column fixed="right" label="操作" width="460">
         <template slot-scope="scope">
-          <el-button size="small" type="primary" @click="opdendrawer(scope.row)">设置权限</el-button>
+          <el-button size="mini" type="primary" @click="opdendrawer(scope.row)">设置权限</el-button>
           <el-button
             icon="el-icon-plus"
-            size="small"
+            size="mini"
             type="primary"
             @click="addAuthority(scope.row.authorityId)"
           >新增子角色</el-button>
           <el-button
             icon="el-icon-copy-document"
-            size="small"
+            size="mini"
             type="primary"
             @click="copyAuthority(scope.row)"
           >拷贝</el-button>
           <el-button
             icon="el-icon-edit"
-            size="small"
+            size="mini"
             type="primary"
             @click="editAuthority(scope.row)"
           >编辑</el-button>
           <el-button
             icon="el-icon-delete"
-            size="small"
+            size="mini"
             type="danger"
             @click="deleteAuth(scope.row)"
           >删除</el-button>

web/src/view/superAdmin/dictionary/sysDictionary.vue

@@ -18,10 +18,8 @@
           <el-input v-model="searchInfo.desc" placeholder="搜索条件" />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">查询</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="openDialog">新增字典</el-button>
+          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
+          <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -50,8 +48,8 @@
 
       <el-table-column label="按钮组">
         <template slot-scope="scope">
-          <el-button size="small" type="success" @click="toDetile(scope.row)">详情</el-button>
-          <el-button size="small" type="primary" @click="updateSysDictionary(scope.row)">变更</el-button>
+          <el-button size="mini" type="success" @click="toDetile(scope.row)">详情</el-button>
+          <el-button size="mini" type="primary" @click="updateSysDictionary(scope.row)">变更</el-button>
           <el-popover v-model="scope.row.visible" placement="top" width="160">
             <p>确定要删除吗？</p>
             <div style="text-align: right; margin: 0">

web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue

@@ -15,10 +15,10 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">查询</el-button>
+          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="openDialog">新增字典项</el-button>
+          <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增字典项</el-button>
         </el-form-item>
       </el-form>
     </div>

web/src/view/superAdmin/menu/menu.vue

 <template>
   <div>
     <div class="button-box clearflex">
-      <el-button type="primary" @click="addMenu('0')">新增根菜单</el-button>
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="addMenu('0')">新增根菜单</el-button>
     </div>
 
     <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
@@ -31,19 +31,19 @@
       <el-table-column fixed="right" label="操作" width="300">
         <template slot-scope="scope">
           <el-button
-            size="small"
+            size="mini"
             type="primary"
             icon="el-icon-edit"
             @click="addMenu(scope.row.ID)"
           >添加子菜单</el-button>
           <el-button
-            size="small"
+            size="mini"
             type="primary"
             icon="el-icon-edit"
             @click="editMenu(scope.row.ID)"
           >编辑</el-button>
           <el-button
-            size="small"
+            size="mini"
             type="danger"
             icon="el-icon-delete"
             @click="deleteMenu(scope.row.ID)"

web/src/view/superAdmin/operation/sysOperationRecord.vue

@@ -12,16 +12,14 @@
           <el-input v-model="searchInfo.status" placeholder="搜索条件" />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">查询</el-button>
-        </el-form-item>
-        <el-form-item>
+          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
           <el-popover v-model="deleteVisible" placement="top" width="160">
             <p>确定要删除吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button>
               <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
             </div>
-            <el-button slot="reference" icon="el-icon-delete" size="mini" type="danger">批量删除</el-button>
+            <el-button slot="reference" icon="el-icon-delete" size="mini" type="danger" style="margin-left: 10px;">批量删除</el-button>
           </el-popover>
         </el-form-item>
       </el-form>

web/src/view/superAdmin/user/user.vue

 <template>
   <div>
     <div class="button-box clearflex">
-      <el-button type="primary" @click="addUser">新增用户</el-button>
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="addUser">新增用户</el-button>
     </div>
     <el-table :data="tableData" border stripe>
       <el-table-column label="头像" min-width="50">
@@ -34,7 +34,7 @@
               <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
               <el-button type="primary" size="mini" @click="deleteUser(scope.row)">确定</el-button>
             </div>
-            <el-button slot="reference" type="danger" icon="el-icon-delete" size="small">删除</el-button>
+            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
           </el-popover>
         </template>
       </el-table-column>

web/src/view/systemTools/autoCode/component/fieldDialog.vue

@@ -13,7 +13,7 @@
           <el-input v-model="dialogMiddle.fieldName" autocomplete="off" />
         </el-col>
         <el-col :offset="1" :span="2">
-          <el-button @click="autoFill">自动填充</el-button>
+          <el-button size="mini" @click="autoFill">自动填充</el-button>
         </el-col>
       </el-form-item>
       <el-form-item label="Field中文名" prop="fieldDesc">

web/src/view/systemTools/autoCode/index.vue

@@ -36,7 +36,7 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="getColumn">使用此表创建</el-button>
+            <el-button size="mini" type="primary" @click="getColumn">使用此表创建</el-button>
           </el-form-item>
         </el-form>
       </el-collapse-item>
@@ -69,7 +69,7 @@
     </el-form>
     <!-- 组件列表 -->
     <div class="button-box clearflex">
-      <el-button type="primary" @click="editAndAddField()">新增Field</el-button>
+      <el-button size="mini" type="primary" @click="editAndAddField()">新增Field</el-button>
     </div>
     <el-table :data="form.fields" border stripe>
       <el-table-column type="index" label="序列" width="100" />
@@ -117,15 +117,15 @@
     <el-tag type="danger">id , created_at , updated_at , deleted_at 会自动生成请勿重复创建</el-tag>
     <!-- 组件列表 -->
     <div class="button-box clearflex">
-      <el-button type="primary" @click="enterForm(true)">预览代码</el-button>
-      <el-button type="primary" @click="enterForm(false)">生成代码</el-button>
+      <el-button size="mini" type="primary" @click="enterForm(true)">预览代码</el-button>
+      <el-button size="mini" type="primary" @click="enterForm(false)">生成代码</el-button>
     </div>
     <!-- 组件弹窗 -->
     <el-dialog title="组件内容" :visible.sync="dialogFlag">
       <FieldDialog v-if="dialogFlag" ref="fieldDialog" :dialog-middle="dialogMiddle" />
       <div slot="footer" class="dialog-footer">
-        <el-button @click="closeDialog">取 消</el-button>
-        <el-button type="primary" @click="enterDialog">确 定</el-button>
+        <el-button size="mini" @click="closeDialog">取 消</el-button>
+        <el-button size="mini" type="primary" @click="enterDialog">确 定</el-button>
       </div>
     </el-dialog>