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

el-drawer滚动
6 years ago · 1f02e2ecd4
parent 3adbf2bd87
commit 1f02e2ecd4
11 changed files with 153 additions and 65 deletions
--- a/vue/package-lock.json
+++ b/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",
--- a/vue/package.json
+++ b/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": {
--- a/vue/src/api/message/user.js
+++ b/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)
--- a/vue/src/assets/styles/element-ui.scss
+++ b/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;
--- a/vue/src/components/ColorCheckBox/group.vue
+++ b/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>
--- a/vue/src/components/ColorCheckBox/index.vue
+++ b/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>
--- a/vue/src/config/index.js
+++ b/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`
--- a/vue/src/layout/components/Navbar/components/Bell.vue
+++ b/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">
-        <i class="el-icon-bell navbar-icon" title="消息提醒"/>
+    <el-badge :hidden="hidden" class="bell-badge" is-dot>
+        <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'
-                if (this.$route.path === target) target = '/redirect' + target
+                let target = baseUrl
+                if (this.$route.path === target) target = `/redirect${target}`
                this.$router.replace(target)
            }
        },
--- a/vue/src/layout/components/Navbar/components/SettingDrawer.vue
+++ b/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: {
-            value: Boolean
-        },
+        components: {ColorCheckBox, ColorCheckboxGroup},

-        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)
            }
--- a/vue/src/utils/errorLog.js
+++ b/vue/src/utils/errorLog.js
@ -1,22 +1,7 @@
 import Vue from 'vue'
-import {isString} from '@/utils/validate'
-import settings from '@/config'
+import {errorLog} from '@/config'

-// errorLog:'production' | ['production', 'development']
-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()) {
+if (errorLog) {
    Vue.config.errorHandler = function (err, vm, info, a) {
        //忽略image-viewer错误
        if (err.message === `Cannot read property 'complete' of undefined`) return
--- a/vue/vue.config.js
+++ b/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";`,}
    }
-    }*/
 }