added ant color

src/components/layout/HeaderNotice.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-popover trigger="click" placement="bottomRight">
+  <a-popover trigger="click" placement="bottomRight" :overlayStyle="{ width: '300px' }">
     <template slot="content">
       <a-spin :spinning="loadding">
         <a-tabs>

src/components/layout/LayoutMain.vue

@@ -38,6 +38,8 @@
         <layout-footer/>
       </a-layout-footer>
     </a-layout>
+
+    <setting-drawer ref="settingdw"></setting-drawer>
   </a-layout>
 </template>
 
@@ -45,14 +47,17 @@
   import SiderMenu from '@/components/menu/SiderMenu'
   import LayoutHeader from './LayoutHeader'
   import LayoutFooter from './LayoutFooter'
+  import SettingDrawer from '@/components/tools/SettingDrawer'
   import { mapState, mapActions } from 'vuex'
 
+
   export default {
     name: "LayoutView",
     components: {
       SiderMenu,
       LayoutHeader,
-      LayoutFooter
+      LayoutFooter,
+      SettingDrawer
     },
     data() {
       return {
@@ -77,6 +82,9 @@
     },
     mounted() {
       this.collapsed = this.sidebarOpened
+
+      // this.$refs.settingdw.showDrawer()
+      // this.$refs.settingdw.onClose()
     },
     methods: {
       ...mapActions(['setSidebar']),

src/components/tools/SettingDrawer.vue

@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <a-drawer
+      width="300"
+      :destroyOnClose="false"
+      placement="right"
+      :closable="false"
+      @close="onClose"
+      :visible="visible"
+    >
+      <div class="setting-drawer-index-content">
+
+        <div :style="{ marginBottom: '24px' }">
+          <h3 class="setting-drawer-index-title">整体风格设置</h3>
+
+          <div class="setting-drawer-index-blockChecbox">
+            <div class="setting-drawer-index-item" @click="changeMenuTheme('dark')">
+              <img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
+              <div class="setting-drawer-index-selectIcon" v-if="theme === 'dark'">
+                <a-icon type="check"/>
+              </div>
+            </div>
+            <div class="setting-drawer-index-item" @click="changeMenuTheme('light')">
+              <img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
+              <div class="setting-drawer-index-selectIcon" v-if="theme !== 'dark'">
+                <a-icon type="check"/>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div :style="{ marginBottom: '24px' }">
+          <h3 class="setting-drawer-index-title">主题色</h3>
+
+          <div>
+            <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
+              <template slot='title'>
+                {{ item.key }}
+              </template>
+              <a-tag :color="item.color" @click="changeColor(item)">
+                <a-icon type="check" v-if="item.color === colorObj.color"></a-icon>
+              </a-tag>
+            </a-tooltip>
+
+          </div>
+        </div>
+      </div>
+    </a-drawer>
+    <div class="setting-drawer-index-handle" :style="{ right: visible && '283px' || '0' }" @click="toggle">
+      <a-icon type="setting" v-if="!visible"/>
+      <a-icon type="close" v-else/>
+    </div>
+  </div>
+</template>
+
+<script>
+  import DetailList from '@/components/tools/DetailList'
+  import { updateTheme } from '@/components/tools/setting'
+
+  import { mapState } from 'vuex'
+
+  const colorList = [
+    {
+      key: 'dust',
+      color: '#F5222D',
+    },
+    {
+      key: 'volcano',
+      color: '#FA541C',
+    },
+    {
+      key: 'sunset',
+      color: '#FAAD14',
+    },
+    {
+      key: 'cyan',
+      color: '#13C2C2',
+    },
+    {
+      key: 'green',
+      color: '#52C41A',
+    },
+    {
+      key: 'daybreak',
+      color: '#1890FF',
+    },
+    {
+      key: 'geekblue',
+      color: '#2F54EB',
+    },
+    {
+      key: 'purple',
+      color: '#722ED1',
+    },
+  ];
+
+  export default {
+    components: {
+      DetailList
+    },
+    data() {
+      return {
+        visible: false,
+        colorList,
+      }
+    },
+    computed: {
+      ...mapState({
+        theme: state => state.app.theme,
+        colorObj: state => state.app.color,
+      })
+    },
+    mounted () {
+      const vm = this
+
+      updateTheme(this.colorObj.color)
+    },
+    methods: {
+      showDrawer() {
+        this.visible = true
+      },
+      onClose() {
+        this.visible = false
+      },
+      toggle() {
+        this.visible = !this.visible
+      },
+      changeMenuTheme(theme) {
+        this.$store.dispatch('ToggleTheme', theme)
+      },
+      changeColor(color) {
+        updateTheme(color.color)
+        this.$store.dispatch('ToggleColor', color)
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+
+  .setting-drawer-index-content {
+
+    .setting-drawer-index-title {
+      font-size: 14px;
+      color: rgba(0, 0, 0, .85);
+      line-height: 22px;
+      margin-bottom: 12px;
+    }
+    .setting-drawer-index-blockChecbox {
+      display: flex;
+
+      .setting-drawer-index-item {
+        margin-right: 16px;
+        position: relative;
+        border-radius: 4px;
+        cursor: pointer;
+
+        img {
+          width: 48px;
+        }
+
+        .setting-drawer-index-selectIcon {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 100%;
+          padding-top: 15px;
+          padding-left: 24px;
+          height: 100%;
+          color: #1890ff;
+          font-size: 14px;
+          font-weight: 700;
+        }
+      }
+    }
+    .setting-drawer-theme-color-colorBlock {
+      width: 20px;
+      height: 20px;
+      border-radius: 2px;
+      float: left;
+      cursor: pointer;
+      margin-right: 8px;
+      padding-left: 0px;
+      padding-right: 0px;
+      text-align: center;
+      color: #fff;
+      font-weight: 700;
+
+      i {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .setting-drawer-index-handle {
+    position: absolute;
+    top: 240px;
+    background: #1890ff;
+    width: 48px;
+    height: 48px;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    pointer-events: auto;
+    z-index: 1001;
+    text-align: center;
+    font-size: 16px;
+    border-radius: 4px 0 0 4px;
+
+    i {
+      color: rgb(255, 255, 255);
+      font-size: 20px;
+    }
+  }
+</style>

src/components/tools/setting.js

@@ -0,0 +1,67 @@
+import { message } from 'ant-design-vue/es';
+// import defaultSettings from '../defaultSettings';
+
+let lessNodesAppended;
+
+const updateTheme = primaryColor => {
+  // Don't compile less in production!
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+  // Determine if the component is remounted
+  if (!primaryColor) {
+    return;
+  }
+  const hideMessage = message.loading('正在编译主题！', 0);
+  function buildIt() {
+    if (!window.less) {
+      return;
+    }
+    setTimeout(() => {
+      window.less
+        .modifyVars({
+          '@primary-color': primaryColor,
+        })
+        .then(() => {
+          hideMessage();
+        })
+        .catch(() => {
+          message.error('Failed to update theme');
+          hideMessage();
+        });
+    }, 200);
+  }
+  if (!lessNodesAppended) {
+    // insert less.js and color.less
+    const lessStyleNode = document.createElement('link');
+    const lessConfigNode = document.createElement('script');
+    const lessScriptNode = document.createElement('script');
+    lessStyleNode.setAttribute('rel', 'stylesheet/less');
+    lessStyleNode.setAttribute('href', '/color.less');
+    lessConfigNode.innerHTML = `
+      window.less = {
+        async: true,
+        env: 'production',
+        javascriptEnabled: true
+      };
+    `;
+    lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
+    lessScriptNode.async = true;
+    lessScriptNode.onload = () => {
+      buildIt();
+      lessScriptNode.onload = null;
+    };
+    document.body.appendChild(lessStyleNode);
+    document.body.appendChild(lessConfigNode);
+    document.body.appendChild(lessScriptNode);
+    lessNodesAppended = true;
+  } else {
+    buildIt();
+  }
+};
+
+const updateColorWeak = colorWeak => {
+  document.body.className = colorWeak ? 'colorWeak' : '';
+};
+
+export { updateTheme, updateColorWeak }

src/main.js

@@ -14,7 +14,7 @@ import * as dayjs from 'dayjs' // 日期时间支持库
 
 import '@/permission' // permission control
 
-import { ACCESS_TOKEN, DEFAULT_THEME, SIDEBAR_TYPE } from "@/store/mutation-types"
+import {ACCESS_TOKEN, DEFAULT_COLOR, DEFAULT_THEME, SIDEBAR_TYPE} from "@/store/mutation-types"
 
 Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
   return dayjs(dataStr).format(pattern)
@@ -39,6 +39,7 @@ new Vue({
   mounted () {
     store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
     store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, 'dark'))
+    store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, { key: 'daybreak', color: '#1890FF' }))
     store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
 
   },

src/store/getters.js

@@ -1,6 +1,7 @@
 const getters = {
   device: state => state.app.device,
   theme: state => state.app.theme,
+  color: state => state.app.color,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   nickname: state => state.user.name,

src/store/modules/app.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { SIDEBAR_TYPE, DEFAULT_THEME } from "@/store/mutation-types"
+import {SIDEBAR_TYPE, DEFAULT_THEME, DEFAULT_COLOR} from "@/store/mutation-types"
 
 const app = {
   state: {
@@ -8,7 +8,8 @@ const app = {
       withoutAnimation: false
     },
     device: 'desktop',
-    theme: ''
+    theme: '',
+    color: null
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
@@ -27,6 +28,10 @@ const app = {
       // setStore('_DEFAULT_THEME', theme)
       Vue.ls.set(DEFAULT_THEME, theme)
       state.theme = theme
+    },
+    TOGGLE_COLOR: (state, color) => {
+      Vue.ls.set(DEFAULT_COLOR, color)
+      state.color = color
     }
   },
   actions: {
@@ -41,6 +46,9 @@ const app = {
     },
     ToggleTheme({ commit }, theme) {
       commit('TOGGLE_THEME', theme)
+    },
+    ToggleColor({ commit }, color) {
+      commit('TOGGLE_COLOR', color)
     }
   }
 }

src/store/mutation-types.js

@@ -1,3 +1,4 @@
 export const ACCESS_TOKEN = 'Access-Token'
 export const SIDEBAR_TYPE = 'SIDEBAR_TYPE'
-export const DEFAULT_THEME = 'DEFAULT_THEME'
+export const DEFAULT_THEME = 'DEFAULT_THEME'
+export const DEFAULT_COLOR = 'DEFAULT_COLOR'