Skip to content
Permalink
Browse files

动态改变颜色

  • Loading branch information...
FairyEver committed Jun 11, 2019
1 parent 179b298 commit 90c7f6ac555b8e7f9c441900973296b854eef941
1 .env
@@ -3,3 +3,4 @@ VUE_APP_API=/api/
VUE_APP_REPO=https://github.com/d2-projects/d2-admin
VUE_APP_I18N_LOCALE=zh-chs
VUE_APP_I18N_FALLBACK_LOCALE=en
VUE_APP_ELEMENT_COLOR=#409EFF
@@ -1,5 +1,7 @@
module.exports = {
presets: [
'@vue/app'
]
],
// 允许两种编码引入方式共存,也就是 common 规范与 es6 规范的共存处理
sourceType: 'unambiguous'
}

Large diffs are not rendered by default.

@@ -15,22 +15,21 @@
},
"dependencies": {
"@d2-admin/filters-dayjs": "^1.0.3",
"@d2-projects/d2-crud": "^2.0.5",
"@d2-projects/d2-crud": "^2.1.1",
"@d2-projects/vue-table-export": "^1.0.1",
"@d2-projects/vue-table-import": "^1.0.0",
"axios": "^0.18.0",
"axios": "^0.19.0",
"better-scroll": "^1.15.2",
"clipboard-polyfill": "^2.8.0",
"core-js": "^2.6.5",
"clipboard-polyfill": "^2.8.1",
"countup.js": "^2.0.4",
"dayjs": "^1.8.12",
"dayjs": "^1.8.14",
"echarts": "^4.2.1",
"element-ui": "^2.7.2",
"element-ui": "^2.9.1",
"flex.css": "^1.1.7",
"fuse.js": "^3.4.4",
"fuse.js": "^3.4.5",
"github-markdown-css": "^3.0.1",
"highlight.js": "^9.15.6",
"hotkeys-js": "^3.6.2",
"highlight.js": "^9.15.8",
"hotkeys-js": "^3.6.11",
"js-cookie": "^2.2.0",
"lodash": "^4.17.11",
"lowdb": "^1.0.0",
@@ -41,37 +40,37 @@
"quill": "^1.3.6",
"screenfull": "^4.2.0",
"simplemde": "^1.11.2",
"ua-parser-js": "^0.7.19",
"ua-parser-js": "^0.7.20",
"v-charts": "^1.19.0",
"v-contextmenu": "^2.8.0",
"vue": "^2.6.10",
"vue-grid-layout": "^2.3.4",
"vue-i18n": "^8.0.0",
"vue-i18n": "^8.11.2",
"vue-json-tree-view": "^2.1.4",
"vue-router": "^3.0.3",
"vue-router": "^3.0.6",
"vue-splitpane": "^1.0.4",
"vue-ueditor-wrap": "^2.4.1",
"vuex": "^3.0.1"
"vuex": "^3.1.1"
},
"devDependencies": {
"@kazupon/vue-i18n-loader": "^0.3.0",
"@vue/cli-plugin-babel": "^3.6.0",
"@vue/cli-plugin-eslint": "^3.6.0",
"@vue/cli-plugin-unit-jest": "^3.6.0",
"@vue/cli-service": "^3.6.0",
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-plugin-unit-jest": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-jest": "^24.8.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.18.0",
"eslint-plugin-vue": "^5.2.2",
"sass": "^1.21.0",
"sass-loader": "^7.1.0",
"svg-sprite-loader": "^4.1.3",
"svg-sprite-loader": "^4.1.6",
"text-loader": "0.0.1",
"uglifyjs-webpack-plugin": "^2.1.2",
"uglifyjs-webpack-plugin": "^2.1.3",
"vue-cli-plugin-i18n": "^0.6.0",
"vue-template-compiler": "^2.5.21"
"vue-template-compiler": "^2.6.10",
"webpack-theme-color-replacer": "^1.2.5"
}
}
@@ -170,6 +170,9 @@
padding: 14px 12px;
border-radius: 4px;
margin: 0px !important;
&.el-color-picker.el-color-picker--mini {
padding: 9px 6px;
}
}
.el-dropdown {
@extend %unable-select;
@@ -0,0 +1,44 @@
<template>
<el-color-picker
class="btn-text can-hover"
:value="value"
:predefine="predefine"
size="mini"
@change="set"/>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'd2-header-color',
data () {
return {
predefine: [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585'
]
}
},
computed: {
...mapState('d2admin/color', [
'value'
])
},
watch: {
value (value) {
this.set(value)
}
},
methods: {
...mapActions('d2admin/color', [
'set'
])
}
}
</script>
@@ -32,6 +32,7 @@
<d2-header-theme/>
<d2-header-size/>
<d2-header-locales/>
<d2-header-color/>
<d2-header-user/>
</div>
</div>
@@ -92,6 +93,7 @@ import d2HeaderSize from './components/header-size'
import d2HeaderTheme from './components/header-theme'
import d2HeaderUser from './components/header-user'
import d2HeaderLog from './components/header-log'
import d2HeaderColor from './components/header-color'
import { mapState, mapGetters, mapActions } from 'vuex'
import mixinSearch from './mixins/search'
export default {
@@ -109,7 +111,8 @@ export default {
d2HeaderSize,
d2HeaderTheme,
d2HeaderUser,
d2HeaderLog
d2HeaderLog,
d2HeaderColor
},
data () {
return {
@@ -107,6 +107,8 @@ export default {
await dispatch('d2admin/menu/asideCollapseLoad', null, { root: true })
// DB -> store 持久化数据加载全局尺寸
await dispatch('d2admin/size/load', null, { root: true })
// DB -> store 持久化数据加载颜色设置
await dispatch('d2admin/color/load', null, { root: true })
// end
resolve()
})
@@ -0,0 +1,77 @@
import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'

export default {
namespaced: true,
state: {
// 颜色
value: process.env.VUE_APP_ELEMENT_COLOR
},
actions: {
/**
* @description 设置颜色
* @param {Object} state vuex state
* @param {String} color 尺寸
*/
set ({ state, dispatch, commit }, color) {
return new Promise(async resolve => {
// 记录上个值
const old = state.value
// store 赋值
state.value = color || process.env.VUE_APP_ELEMENT_COLOR
// 持久化
await dispatch('d2admin/db/set', {
dbName: 'sys',
path: 'color.value',
value: state.value,
user: true
}, { root: true })
// 应用
commit('apply', {
oldColor: old,
newColor: state.value
})
// end
resolve()
})
},
/**
* @description 从持久化数据读取颜色设置
* @param {Object} state vuex state
*/
load ({ state, dispatch, commit }) {
return new Promise(async resolve => {
// 记录上个值
const old = state.value
// store 赋值
state.value = await dispatch('d2admin/db/get', {
dbName: 'sys',
path: 'color.value',
defaultValue: process.env.VUE_APP_ELEMENT_COLOR,
user: true
}, { root: true })
// 应用
commit('apply', {
oldColor: old,
newColor: state.value
})
// end
resolve()
})
}
},
mutations: {
/**
* @description 将 vuex 中的主题颜色设置应用到系统中
* @param {Object} state vuex state
* @param {Object} payload 设置
*/
apply (state, { oldColor, newColor }) {
var options = {
oldColors: [...forElementUI.getElementUISeries(oldColor)],
newColors: [...forElementUI.getElementUISeries(newColor)]
}
client.changer.changeColor(options)
}
}
}
@@ -91,9 +91,9 @@
</a>
</p>
<p class="page-login--content-footer-copyright">
{{ $t('views.system.login.footer.copyright.copyright') }}
<d2-icon name="copyright"/>
{{ $t('views.system.login.footer.copyright.content') }}
{{ $t('views.system.login.footer.copyright.copyright') }}
<d2-icon name="copyright"/>
{{ $t('views.system.login.footer.copyright.content') }}
<a href="https://github.com/FairyEver">
@{{ $t('views.system.login.footer.copyright.author') }}
</a>
@@ -1,6 +1,9 @@
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const VueFilenameInjector = require('./tools/vue-filename-injector')

const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')

// 拼接路径
const resolve = dir => require('path').join(__dirname, dir)

@@ -26,6 +29,22 @@ module.exports = {
}
}
},
// node_modules 需要babel成es5的包
transpileDependencies: [
'webpack-theme-color-replacer'
],
configureWebpack: {
plugins: [
new ThemeColorReplacer({
fileName: 'css/theme-colors.[contenthash:8].css',
matchColors: [
...forElementUI.getElementUISeries(process.env.VUE_APP_ELEMENT_COLOR) // Element-ui主色系列
],
externalCssFiles: [ './node_modules/element-ui/lib/theme-chalk/index.css' ], // optional, String or string array. Set external css files (such as cdn css) to extract colors.
changeSelector: forElementUI.changeSelector
})
]
},
// 默认设置: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config/base.js
chainWebpack: config => {
/**

0 comments on commit 90c7f6a

Please sign in to comment.
You can’t perform that action at this time.