odboy/d2-admin-start-kit
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

同步完整版代码

Browse Source 
增加颜色切换功能


Former-commit-id: 37d688a0ee4ebadbb1980f2509d722931099c82c
This commit is contained in:
FairyEver
2019-10-08 09:48:19 +08:00
parent 789becde48
commit f3481b370c
11 changed files with 1330 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+3
View File
@@ -12,3 +12,6 @@ VUE_APP_REPO=https://github.com/d2-projects/d2-admin-start-kit
# 国际化配置
VUE_APP_I18N_LOCALE=zh-chs
VUE_APP_I18N_FALLBACK_LOCALE=en
# element 颜色
VUE_APP_ELEMENT_COLOR=#409EFF
.env.netlify
+10
View File
@@ -0,0 +1,10 @@
# travis
# 指定构建模式
NODE_ENV=production
# 标记当前构建方式
VUE_APP_BUILD_MODE=NETLIFY
# 显示源码按钮
VUE_APP_SCOURCE_LINK=TRUE
.env.nomock
+1 -1
View File
@@ -4,4 +4,4 @@
NODE_ENV=production
# 标记当前是 No Mock 构建
VUE_APP_BUILD_MODE=nomock
VUE_APP_BUILD_MODE=NOMOCK
.env.travis
+3
View File
@@ -5,3 +5,6 @@ NODE_ENV=production
# 标记当前是 CI 自动构建
VUE_APP_BUILD_MODE=TRAVIS
# 显示源码按钮
VUE_APP_SCOURCE_LINK=TRUE
package-lock.json
Generated
+1147 -367
View File
File diff suppressed because it is too large Load Diff
package.json
+14 -12
View File
@@ -35,21 +35,23 @@
},
"devDependencies": {
"@d2-projects/vue-filename-injector": "^1.0.0",
"@kazupon/vue-i18n-loader": "^0.4.1",
"@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",
"@kazupon/vue-i18n-loader": "^0.3.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-eslint": "^10.0.2",
"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",
"vue-template-compiler": "^2.5.21"
"svg-sprite-loader": "^4.1.6",
"text-loader": "0.0.1",
"vue-cli-plugin-i18n": "^0.6.0",
"vue-template-compiler": "^2.6.10",
"webpack-theme-color-replacer": "^1.2.15"
}
}
src/layout/header-aside/components/header-color/index.vue
+44
View File
@@ -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>
src/layout/header-aside/layout.vue
+4 -1
View File
@@ -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 {
src/store/modules/d2admin/modules/account.js
+2
View File
@@ -104,6 +104,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()
})
src/store/modules/d2admin/modules/color.js
+78
View File
@@ -0,0 +1,78 @@
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} context
* @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} context
*/
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} context
* @param {Object} payload oldColor {String} 旧的颜色
* @param {Object} payload newColor {String} 新颜色
*/
apply (state, { oldColor, newColor }) {
var options = {
oldColors: [...forElementUI.getElementUISeries(oldColor)],
newColors: [...forElementUI.getElementUISeries(newColor)]
}
client.changer.changeColor(options)
}
}
}
vue.config.js
+24 -3
View File
@@ -1,5 +1,8 @@
const VueFilenameInjector = require('@d2-projects/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)
@@ -11,7 +14,8 @@ process.env.VUE_APP_BUILD_TIME = require('dayjs')().format('YYYY-M-D HH:mm:ss')
let publicPath = '/'
module.exports = {
publicPath, // 根据你的实际情况更改这里
// 根据你的实际情况更改这里
publicPath,
lintOnSave: true,
devServer: {
publicPath // 和 publicPath 保持一致
@@ -38,6 +42,16 @@ module.exports = {
// 解决 cli3 热更新失效 https://github.com/vuejs/vue-cli/issues/1559
config.resolve
.symlinks(true)
config
.plugin('theme-color-replacer')
.use(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
}])
config
// 开发环境
.when(process.env.NODE_ENV === 'development',
@@ -45,11 +59,18 @@ module.exports = {
config => config.devtool('cheap-source-map')
)
// TRAVIS 构建 vue-loader 添加 filename
.when(process.env.VUE_APP_BUILD_MODE === 'TRAVIS' || process.env.NODE_ENV === 'development',
.when(process.env.VUE_APP_SCOURCE_LINK === 'TRUE',
VueFilenameInjector(config, {
propName: process.env.VUE_APP_SOURCE_VIEWER_PROP_NAME
})
)
// markdown
config.module
.rule('md')
.test(/\.md$/)
.use('text-loader')
.loader('text-loader')
.end()
// svg
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
@@ -75,7 +96,7 @@ module.exports = {
.set('@api', resolve('src/api'))
// 判断环境加入模拟数据
const entry = config.entry('app')
if (process.env.VUE_APP_BUILD_MODE !== 'nomock') {
if (process.env.VUE_APP_BUILD_MODE !== 'NOMOCK') {
entry
.add('@/mock')
.end()