开发环境下增加了主题色修改功能

el-drawer滚动

vue/package-lock.json

@@ -11331,22 +11331,6 @@
       "integrity": "sha1-RWjwIW54dg7h2/Ok0s9T4iQRKGY=",
       "dev": true
     },
-    "v-viewer": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/v-viewer/-/v-viewer-1.5.1.tgz",
-      "integrity": "sha512-Q5ICKzmYQD0qTf+hti2Lhgy6UYY2zgFr+YrN9a3yPgr7pOjYrG405Pz4+6Z6FXlhdhGysCWFJUNCI2tsIyvjWQ==",
-      "requires": {
-        "throttle-debounce": "^2.0.1",
-        "viewerjs": "^1.5.0"
-      },
-      "dependencies": {
-        "throttle-debounce": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
-          "integrity": "sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg=="
-        }
-      }
-    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npm.taobao.org/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz",
@@ -11380,11 +11364,6 @@
         "extsprintf": "^1.2.0"
       }
     },
-    "viewerjs": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.5.0.tgz",
-      "integrity": "sha512-ZiJ0vrXDvomLSY3ixaZCJtmdenomsvPPQwZKwvtXUMCiO2HHtFGoB/KqpS9QzABSeKaRLfcENp1uRYJ7l1MkYQ=="
-    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -12090,6 +12069,15 @@
         "source-map": "~0.6.1"
       }
     },
+    "webpack-theme-color-replacer": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/webpack-theme-color-replacer/-/webpack-theme-color-replacer-1.3.14.tgz",
+      "integrity": "sha512-PKT/OD2+iXxGuGDxH/MVkt36EKYtYckowzPlZBdPOgGIVk8MbvLfdRFYOmWz6vhVJpyIGWtpfpoP9ecWZP8qYg==",
+      "dev": true,
+      "requires": {
+        "webpack-sources": "*"
+      }
+    },
     "websocket-driver": {
       "version": "0.6.5",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz",

vue/package.json

@@ -41,7 +41,8 @@
     "svg-sprite-loader": "^4.3.0",
     "svgo": "^1.3.2",
     "vue-template-compiler": "^2.6.11",
-    "webpack-bundle-analyzer": "^3.6.1"
+    "webpack-bundle-analyzer": "^3.6.1",
+    "webpack-theme-color-replacer": "^1.3.14"
   },
   "postcss": {
     "plugins": {

vue/src/api/message/user.js

@@ -1,6 +1,6 @@
 import request from "@/config/request"
 
-const baseUrl = '/message/user'
+export const baseUrl = '/message/user'
 
 export function search(data) {
     return request.post(`${baseUrl}/search`, data).then(({data}) => data.data)

vue/src/assets/styles/element-ui.scss

@@ -70,6 +70,12 @@
     }
 }
 
+.el-drawer {
+    &__body {
+        overflow-y: overlay;
+    }
+}
+
 .el-loading-mask {
     background: #fff;
     color: $--color-primary;

vue/src/components/ColorCheckBox/group.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="color-checkbox-group">
+        <slot/>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "ColorCheckGroup",
+
+        provide() {
+            return {
+                colorCheckGroup: this
+            }
+        },
+
+        props: {value: String},
+
+        data: () => ({children: []})
+    }
+</script>
+
+<style lang="scss">
+    @import "~@/assets/styles/variables.scss";
+
+    .color-checkbox-group {
+        @include clearfix
+    }
+</style>

vue/src/components/ColorCheckBox/index.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="color-checkbox" :style="{backgroundColor: color}" @click="click">
+        <i v-if="checked" class="el-icon-check"/>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "ColorCheckBox",
+
+        inject: ['colorCheckGroup'],
+
+        props: {color: String},
+
+        computed: {
+            checked() {
+                const group = this.colorCheckGroup
+                return group && group.value === this.color
+            }
+        },
+
+        methods: {
+            click() {
+                if (this.checked) return
+                this.colorCheckGroup.$emit('input', this.color)
+            }
+        },
+
+        created() {
+            const group = this.colorCheckGroup
+            group && group.children.push(this.color)
+        },
+    }
+</script>
+
+<style>
+    .color-checkbox {
+        float: left;
+        width: 20px;
+        height: 20px;
+        border-radius: 2px;
+        cursor: pointer;
+        margin-right: 8px;
+        text-align: center;
+        font-weight: bold;
+        color: #fff;
+    }
+</style>

vue/src/config/index.js

@@ -1,8 +1,10 @@
-const isDevelopment = process.env.NODE_ENV === 'development'
+const isDev = process.env.NODE_ENV === 'development'
 
 const contextPath = '/'
 
 module.exports = {
+    isDev,
+
     title: 'BiuBiuBiu~',
 
     //项目的部署路径
@@ -15,11 +17,11 @@ module.exports = {
     routerMode: 'history',
 
     //socket连接地址
-    socketUrl: isDevelopment ? 'localhost:12580' : 'wss://toesbieya.cn',
+    socketUrl: isDev ? 'localhost:12580' : 'wss://toesbieya.cn',
 
     sidebarLogoUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png',
 
-    errorLog: ['production', 'development'],
+    errorLog: true,
 
     //storage的相关键名
     sessionUserKey: 'GCC-SESS-USER',
@@ -37,7 +39,7 @@ module.exports = {
     attachmentPrefix: 'https://static.toesbieya.cn/',
 
     //文件预览接口前缀
-    filePreviewPrefix: isDevelopment ? 'http://localhost:8012' : 'https://preview.toesbieya.cn',
+    filePreviewPrefix: isDev ? 'http://localhost:8012' : 'https://preview.toesbieya.cn',
 
     //省市地区json数据请求地址
     regionDataUrl: `${contextPath}static/json/region-pca.json`

vue/src/layout/components/Navbar/components/Bell.vue

@@ -1,10 +1,12 @@
 <template>
-    <el-badge :hidden="hidden" class="bell-badge" is-dot @click.native="jump">
+    <el-badge :hidden="hidden" class="bell-badge" is-dot>
-        <i class="el-icon-bell navbar-icon" title="消息提醒"/>
+        <i class="el-icon-bell navbar-icon" title="消息提醒" @click="jump"/>
     </el-badge>
 </template>
 
 <script>
+    import {baseUrl} from '@/api/message/user'
+
     export default {
         name: "Bell",
 
@@ -16,8 +18,8 @@
 
         methods: {
             jump() {
-                let target = '/message/user'
+                let target = baseUrl
-                if (this.$route.path === target) target = '/redirect' + target
+                if (this.$route.path === target) target = `/redirect${target}`
                 this.$router.replace(target)
             }
         },

vue/src/layout/components/Navbar/components/SettingDrawer.vue

@@ -1,16 +1,29 @@
 <template>
-    <el-drawer :visible="value" :with-header="false" append-to-body size="300px" @close="$emit('input', false)">
+    <el-drawer :visible="value" :with-header="false" append-to-body size="288px" @close="$emit('input', false)">
         <div class="drawer-container">
-            <el-divider><h3>个性化设置</h3></el-divider>
+            <el-divider>主题色</el-divider>
+            <div class="drawer-item">
+                <color-checkbox-group :value="color" @input="changeColor">
+                    <color-check-box v-for="i in colors" :key="i" :color="i"/>
+                </color-checkbox-group>
+            </div>
+
+            <el-divider>其他设置</el-divider>
             <div v-for="{name,key} in settings" :key="key" class="drawer-item">
                 <span>{{name}}</span>
-                <el-switch :value="getValue(key)" @input="setValue($event,key)" class="drawer-switch"/>
+                <el-switch :value="getValue(key)" class="drawer-switch" @input="e => setValue(e,key)"/>
             </div>
         </div>
     </el-drawer>
 </template>
 
 <script>
+    import ColorCheckBox from "@/components/ColorCheckBox"
+    import ColorCheckboxGroup from "@/components/ColorCheckBox/group"
+    import {isDev} from '@/config'
+    import client from 'webpack-theme-color-replacer/client'
+    import forElementUI from 'webpack-theme-color-replacer/forElementUI'
+
     const settings = [
         {name: '显示logo', key: 'showLogo'},
         {name: '显示面包屑', key: 'showBreadcrumb'},
@@ -22,21 +35,31 @@
         {name: '头部自动隐藏', key: 'headerAutoHidden'},
         {name: '显示返回顶部按钮', key: 'showBackToTop'}
     ]
+    const colors = ['#f5222d', '#fa541c', '#fadb14', '#3eaf7c', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96']
 
     export default {
         name: "SettingDrawer",
 
-        props: {
+        components: {ColorCheckBox, ColorCheckboxGroup},
-            value: Boolean
-        },
 
-        data: () => ({settings}),
+        props: {value: Boolean},
+
+        data() {
+            return {
+                settings,
+                colors,
+                color: '#1890ff'
+            }
+        },
 
         methods: {
+            changeColor(color) {
+                this.color = color
+                isDev && client.changer.changeColor({newColors: forElementUI.getElementUISeries(color)})
+            },
             getValue(key) {
                 return this.$store.state.setting[key]
             },
-
             setValue(value, key) {
                 this.$store.commit(`setting/${key}`, value)
             }

vue/src/utils/errorLog.js

@@ -1,22 +1,7 @@
 import Vue from 'vue'
-import {isString} from '@/utils/validate'
+import {errorLog} from '@/config'
-import settings from '@/config'
 
-// errorLog:'production' | ['production', 'development']
+if (errorLog) {
-const {errorLog} = settings
-
-function checkNeed() {
-    const env = process.env.NODE_ENV
-    if (isString(errorLog)) {
-        return env === errorLog
-    }
-    if (Array.isArray(errorLog)) {
-        return errorLog.includes(env)
-    }
-    return false
-}
-
-if (checkNeed()) {
     Vue.config.errorHandler = function (err, vm, info, a) {
         //忽略image-viewer错误
         if (err.message === `Cannot read property 'complete' of undefined`) return

vue/vue.config.js

@@ -3,8 +3,10 @@ const path = require('path')
 const settings = require('./src/config')
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const ThemeColorReplacer = require('webpack-theme-color-replacer')
+const forElementUI = require('webpack-theme-color-replacer/forElementUI')
 
-const isDev = process.env.NODE_ENV === 'development'
+const EMPTY_PLUGIN = {apply: () => ({})}
 
 function resolve(dir) {
     return path.join(__dirname, dir)
@@ -17,7 +19,7 @@ module.exports = {
     assetsDir: 'static',
     runtimeCompiler: true,
     lintOnSave: false,
-    productionSourceMap: isDev,
+    productionSourceMap: settings.isDev,
     parallel: true,
     devServer: {
         port: process.env.port || 8079,
@@ -59,7 +61,14 @@ module.exports = {
                 minRatio: 0.8,
                 deleteOriginalAssets: false,//是否删除源文件
             }),
-            isDev ? {apply: () => ({})} : new BundleAnalyzerPlugin()
+            settings.isDev
+                ? new ThemeColorReplacer({
+                    fileName: 'css/theme-colors.[contenthash:8].css',
+                    matchColors: forElementUI.getElementUISeries('#1890ff'),
+                    changeSelector: forElementUI.changeSelector
+                })
+                : EMPTY_PLUGIN,
+            settings.isDev ? EMPTY_PLUGIN : new BundleAnalyzerPlugin()
         ]
     },
     chainWebpack(config) {
@@ -80,10 +89,5 @@ module.exports = {
             .loader('svg-sprite-loader')
             .options({symbolId: 'icon-[name]'})
             .end()
-    },
+    }
-    /*css: {
-        loaderOptions: {
-            sass: {prependData: `@import "src/assets/styles/variables.scss";`,}
-        }
-    }*/
 }