更新themeColor

Author: hzsrc

build/utils.js

@@ -65,7 +65,7 @@ exports.styleLoaders = function (options) {
 
     const result = [
         getCssRule('css', false),
-        getCssRule('postcss', false),
+        //getCssRule('postcss', false),
         getCssRule('less', 'less'),
         getCssRule('sass', 'sass', { implementation: require('sass'), indentedSyntax: true }),
         getCssRule('scss', 'sass', { implementation: require('sass') }),
@@ -75,11 +75,3 @@ exports.styleLoaders = function (options) {
     return result;
 }
 
-function getPostCssLoader(sourceMap) {
-    return {
-        loader: 'postcss-loader',
-        options: {
-            sourceMap: sourceMap
-        }
-    }
-}

build/webpack.base.conf.js

@@ -6,7 +6,7 @@ const webpack = require('webpack')
 const { VueLoaderPlugin } = require('vue-loader');
 const appConfig = require('../config/app-config')
 const ThemeColorReplacer = require('webpack-theme-color-replacer')
-const forElementUI = require('webpack-theme-color-replacer/forElementUI')
+const themeUtil = require('webpack-theme-color-replacer/themeUtil')
 const JoinFileContentPlugin = require('join-file-content-plugin')
 
 function resolve(dir) {
@@ -98,9 +98,8 @@ module.exports = {
         new ThemeColorReplacer({
             fileName: 'css/theme-colors.[contenthash:8].css',
 
-            matchColors: appConfig.getThemeColors(appConfig.themeColor, forElementUI.getElementUISeries, ThemeColorReplacer.varyColor
-                , ['#0cdd3a', '#c655dd']),
-            changeSelector: forElementUI.changeSelector,
+            matchColors: themeUtil.getMyColors(appConfig.themeColor, ['#0cdd3a', '#c655dd']),
+            changeSelector: themeUtil.changeSelector,
             isJsUgly: config.isBuild,
             // injectCss: false,
             // resolveCss(resultCss) { // optional. Resolve result css code as you wish.

config/app-config.js

@@ -1,17 +1,8 @@
+
 module.exports = {
     LOGIN_PATH: './',
     title: 'vue + webpack4 + element-ui脚手架项目',
     description: 'vue + webpack4 + element-ui脚手架项目',
 
-    themeColor: '#f67a17',
-    getThemeColors: function (color, getElementUISeries, varyColor, others) {
-        var colors = getElementUISeries(color);//element-ui主色系列
-        colors.push(
-            varyColor.mix('#000', color, 0.1),
-            varyColor.mix('#000', color, 0.2),
-            varyColor.mix('#000', color, 0.7)
-        );
-        colors.push.apply(colors, others)
-        return colors
-    }
+    themeColor: '#f67a17'
 }

package-lock.json

@@ -56,7 +56,7 @@
         "cross-spawn": "^7.0.3",
         "css-loader": "^5.1.1",
         "css-minimizer-webpack-plugin": "^1.2.0",
-        "dynamic-mocker": "^1.2.14",
+        "dynamic-mocker": "^1.2.16",
         "eslint": "^7.21.0",
         "eslint-config-standard": "^16.0.2",
         "eslint-friendly-formatter": "4.0.1",
@@ -70,13 +70,13 @@
         "file-loader": "^6.2.0",
         "hard-source-webpack-plugin": "^0.13.1",
         "html-webpack-plugin": "^5.2.0",
-        "join-file-content-plugin": "latest",
-        "js-conditional-compile-loader": "latest",
+        "join-file-content-plugin": "^1.0.3",
+        "js-conditional-compile-loader": "^1.0.14",
         "mini-css-extract-plugin": "^1.3.9",
         "opn": "^6.0.0",
         "ora": "^5.3.0",
-        "postcss-loader": "^5.0.0",
-        "postcss-pxtorem": "^5.1.1",
+        "postcss-loader": "^5.3.0",
+        "postcss-pxtorem": "5.1.1",
         "rimraf": "^3.0.2",
         "sass": "^1.32.8",
         "sass-loader": "^11.0.1",
@@ -90,9 +90,9 @@
         "webpack-dev-middleware": "^4.1.0",
         "webpack-dev-server": "^3.11.2",
         "webpack-hot-middleware": "^2.25.0",
-        "webpack-iconfont-plugin-nodejs": "^1.0.18",
+        "webpack-iconfont-plugin-nodejs": "^1.0.19",
         "webpack-merge": "^5.7.3",
-        "webpack-theme-color-replacer": "^1.3.20"
+        "webpack-theme-color-replacer": "^1.3.26"
     },
     "engines": {
         "node": ">= 4.0.0",

package.json

@@ -1,5 +1,5 @@
 <template>
-    <ul class="flex-column white-bg lft-menu">
+    <ul class="f-column white-bg lft-menu">
         <li v-for="(menu, index) in leftMenus" :index="String(index)" :key="menu.url"
             @click="clickMenu(menu,index)" :class="{active: index===curIndex}" class="pointer ellipsis">
             <i :class="menu.icon"></i>

src/component/leftMenu.vue

@@ -3,7 +3,7 @@
         <aside class="logo h100 left f-middle">
             <img src="../images/logo.jpg"/>
         </aside>
-        <aside v-if="userInfo" class="flex-center pd-10 right">
+        <aside v-if="userInfo" class="f-center pd-10 right">
             <el-avatar icon="el-icon-user-solid" size="small"></el-avatar>
             <el-dropdown>
                 <span class="pointer el-dropdown-link"
@@ -19,8 +19,8 @@
             &emsp;
             <a class="el-icon-switch-button" @click="logOut"></a>
         </aside>
-        <div class="h100 flex-center t-menus">
-            <nav class="h100 pointer flex-center"
+        <div class="h100 f-center t-menus">
+            <nav class="h100 pointer f-center"
                  v-for="(menu, index) in topMenus" :index="String(index)" :key="index"
                  :class="{active: curIndex==index}" @click="clickMenu(index)">
                 <i v-if="menu.icon" class="menu.icon"></i>

src/component/topHeader.vue

@@ -94,7 +94,7 @@ body, input, select, textarea, button {
 }
 
 .radius {
-    border-radius: 4px;
+    border-radius: 5px;
 }
 
 .pointer, .pointer * {
@@ -154,13 +154,17 @@ body, input, select, textarea, button {
     justify-content: center;
 }
 
-.flex-center {
+.f-wrap {
+    flex-wrap: wrap;
+}
+
+.f-center {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.flex-column {
+.f-column {
     display: flex;
     flex-direction: column;
 }
@@ -271,3 +275,34 @@ table {
         flex-basis: 51%;
     }
 }
+
+
+//常用的10px 20px间距和空白
+$areas: (t: top, r: right, b: bottom, l: left);
+$sizes: 20 10;
+@each $size in $sizes {
+    .pd-#{$size} {
+        padding: #{$size}px;
+    }
+    .mg-#{$size} {
+        margin: #{$size}px;
+    }
+}
+
+@each $size in $sizes {
+    @each $key, $area in $areas {
+        .pd#{$key}-#{$size} {
+            padding-#{$area}: #{$size}px;
+        }
+        .mg#{$key}-#{$size} {
+            margin-#{$area}: #{$size}px;
+        }
+    }
+}
+
+//0间距
+@each $key, $area in $areas {
+    .pd#{$key}-0 {
+        padding-#{$area}: 0;
+    }
+}

src/css/utils.scss

@@ -1,5 +1,5 @@
 import client from 'webpack-theme-color-replacer/client'
-import getElementUISeries from 'webpack-theme-color-replacer/forElementUI/getElementUISeries'
+import themeUtil from 'webpack-theme-color-replacer/themeUtil'
 
 import appConfig from '../../config/app-config.js'
 
@@ -10,7 +10,7 @@ export function changeThemeColor(newColor) {
     var customB = parseInt(Math.random() * 256).toString(16); // 按你需要生成颜色
     if (customB.length == 1) customB = '0' + customB
     const options = {
-        newColors: appConfig.getThemeColors(newColor, getElementUISeries, client.varyColor, ['#88' + customB + customB, '#' + customB + '88' + customB]),
+        newColors: themeUtil.getMyColors(newColor, ['#88' + customB + customB, '#' + customB + '88' + customB]),
     }
     return client.changer.changeColor(options, Promise)
         .then(t => {

src/js/themeColorClient.js

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex-center flex-column" style="height: 300px">
+    <div class="f-center f-column" style="height: 300px">
         <h3>页面正在开发中~</h3>
         <div><a href="#/">点击返回</a></div>
     </div>