Skip to content

A
ant-design-pro-vue
Commit fcc805c8 by Sendya
Options

update defaultConfig

parent 7d19bc36
Showing with 64 additions and 43 deletions
src/components/tools/SettingDrawer.vue
......@@ -14,36 +14,56 @@
<h3 class="setting-drawer-index-title">整体风格设置</h3>
<div class="setting-drawer-index-blockChecbox">
<div class="setting-drawer-index-item" @click="changeMenuTheme('dark')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
<div class="setting-drawer-index-selectIcon" v-if="theme === 'dark'">
<a-icon type="check"/>
<a-tooltip>
<template slot="title">
暗色菜单风格
</template>
<div class="setting-drawer-index-item" @click="changeMenuTheme('dark')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
<div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
<a-icon type="check"/>
</div>
</div>
</div>
<div class="setting-drawer-index-item" @click="changeMenuTheme('light')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
<div class="setting-drawer-index-selectIcon" v-if="theme !== 'dark'">
<a-icon type="check"/>
</a-tooltip>
<a-tooltip>
<template slot="title">
亮色菜单风格
</template>
<div class="setting-drawer-index-item" @click="changeMenuTheme('light')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
<div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'">
<a-icon type="check"/>
</div>
</div>
</div>
</a-tooltip>
</div>
</div>
<div :style="{ marginBottom: '24px' }">
<h3 class="setting-drawer-index-title">主题色</h3>
<div>
<div style="height: 20px">
<a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
<template slot='title'>
{{ item.key }}
</template>
<a-tag :color="item.color" @click="changeColor(item)">
<a-icon type="check" v-if="item.color === colorObj.color"></a-icon>
<a-tag :color="item.color" @click="changeColor(item.color)">
<a-icon type="check" v-if="item.color === primaryColor"></a-icon>
</a-tag>
</a-tooltip>
</div>
</div>
<a-divider />
<div :style="{ marginBottom: '24px' }">
<a-alert type="warning">
<span slot="message">
配置栏只在开发环境用于预览，生产环境不会展现，请手动修改配置文件
<a href="https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultConfig.js" target="_blank">src/defaultConfig.js</a>
</span>
</a-alert>
</div>
</div>
<div class="setting-drawer-index-handle" @click="toggle">
<a-icon type="setting" v-if="!visible"/>
......@@ -62,35 +82,35 @@
const colorList = [
{
key: 'dust',
key: '薄暮',
color: '#F5222D',
},
{
key: 'volcano',
key: '火山',
color: '#FA541C',
},
{
key: 'sunset',
key: '日暮',
color: '#FAAD14',
},
{
key: 'cyan',
key: '明青',
color: '#13C2C2',
},
{
key: 'green',
key: '极光绿',
color: '#52C41A',
},
{
key: 'daybreak',
key: '拂晓蓝（默认）',
color: '#1890FF',
},
{
key: 'geekblue',
key: '极客蓝',
color: '#2F54EB',
},
{
key: 'purple',
key: '酱紫',
color: '#722ED1',
},
];
......@@ -107,8 +127,8 @@
},
computed: {
...mapState({
theme: state => state.app.theme,
colorObj: state => state.app.color,
navTheme: state => state.app.theme,
primaryColor: state => state.app.color,
})
},
mounted () {
......@@ -117,8 +137,8 @@
vm.visible = false
}, 1)
// 当主题色不是默认色时，才进行主题编译
if (this.colorObj.color !== config.color.color) {
updateTheme(this.colorObj.color)
if (this.primaryColor !== config.primaryColor) {
updateTheme(this.primaryColor)
}
},
methods: {
......@@ -135,9 +155,9 @@
this.$store.dispatch('ToggleTheme', theme)
},
changeColor(color) {
if (this.colorObj.color !== color.color) {
if (this.primaryColor !== color) {
this.$store.dispatch('ToggleColor', color)
updateTheme(color.color)
updateTheme(color)
}
}
},
......
src/defaultConfig.js
export default {
color: {
key: 'daybreak',
color: '#1890FF'
},
theme: 'dark',
colorWeak: false
primaryColor: '#1890FF', // primary color of ant design
navTheme: 'dark', // theme for nav menu
colorWeak: false,
// vue-ls options
storageOptions: {
namespace: 'pro__', // key prefix
name: 'ls', // name variable Vue.[ls] or this.[$ls],
storage: 'local', // storage name session, local, memory
}
}
\ No newline at end of file
src/main.js
......@@ -21,15 +21,13 @@ Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return dayjs(dataStr).format(pattern)
})
const options = {
namespace: 'ant__', // key prefix
name: 'ls', // name variable Vue.[ls] or this.[$ls],
storage: 'local', // storage name session, local, memory
}
Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return dayjs(dataStr).format(pattern)
})
Vue.config.productionTip = false
Vue.use(Storage, options)
Vue.use(Storage, config.storageOptions)
Vue.use(Antd)
Vue.use(VueAxios, router)
Vue.use(Viser)
......@@ -39,10 +37,9 @@ new Vue({
store,
mounted () {
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, false))
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.theme))
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.color))
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
},
render: h => h(App)
}).$mount('#app')
src/router/index.js
......@@ -34,7 +34,7 @@ export const constantRouterMap = [
path: '/',
component: Layout,
redirect: '/login',
name: '首页',
name: 'home',
hidden: true
}
]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment