Skip to content

A
ant-design-pro-vue
Commit 9d79cf10 by Sendya
Options

added ant color

parent 8567dd01
Showing with 312 additions and 7 deletions
public/color.less 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/layout/HeaderNotice.vue
<template> <template>
<a-popover trigger="click" placement="bottomRight"> <a-popover trigger="click" placement="bottomRight" :overlayStyle="{ width: '300px' }">
<template slot="content"> <template slot="content">
<a-spin :spinning="loadding"> <a-spin :spinning="loadding">
<a-tabs> <a-tabs>
......
src/components/layout/LayoutMain.vue
...@@ -38,6 +38,8 @@ ...@@ -38,6 +38,8 @@
<layout-footer/> <layout-footer/>
</a-layout-footer> </a-layout-footer>
</a-layout> </a-layout>
<setting-drawer ref="settingdw"></setting-drawer>
</a-layout> </a-layout>
</template> </template>
...@@ -45,14 +47,17 @@ ...@@ -45,14 +47,17 @@
import SiderMenu from '@/components/menu/SiderMenu' import SiderMenu from '@/components/menu/SiderMenu'
import LayoutHeader from './LayoutHeader' import LayoutHeader from './LayoutHeader'
import LayoutFooter from './LayoutFooter' import LayoutFooter from './LayoutFooter'
import SettingDrawer from '@/components/tools/SettingDrawer'
import { mapState, mapActions } from 'vuex' import { mapState, mapActions } from 'vuex'
export default { export default {
name: "LayoutView", name: "LayoutView",
components: { components: {
SiderMenu, SiderMenu,
LayoutHeader, LayoutHeader,
LayoutFooter LayoutFooter,
SettingDrawer
}, },
data() { data() {
return { return {
...@@ -77,6 +82,9 @@ ...@@ -77,6 +82,9 @@
}, },
mounted() { mounted() {
this.collapsed = this.sidebarOpened this.collapsed = this.sidebarOpened
// this.$refs.settingdw.showDrawer()
// this.$refs.settingdw.onClose()
}, },
methods: { methods: {
...mapActions(['setSidebar']), ...mapActions(['setSidebar']),
......
src/components/tools/SettingDrawer.vue 0 → 100644
<template>
<div>
<a-drawer
width="300"
:destroyOnClose="false"
placement="right"
:closable="false"
@close="onClose"
:visible="visible"
>
<div class="setting-drawer-index-content">
<div :style="{ marginBottom: '24px' }">
<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"/>
</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"/>
</div>
</div>
</div>
</div>
<div :style="{ marginBottom: '24px' }">
<h3 class="setting-drawer-index-title">主题色</h3>
<div>
<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>
</a-tooltip>
</div>
</div>
</div>
</a-drawer>
<div class="setting-drawer-index-handle" :style="{ right: visible && '283px' || '0' }" @click="toggle">
<a-icon type="setting" v-if="!visible"/>
<a-icon type="close" v-else/>
</div>
</div>
</template>
<script>
import DetailList from '@/components/tools/DetailList'
import { updateTheme } from '@/components/tools/setting'
import { mapState } from 'vuex'
const colorList = [
{
key: 'dust',
color: '#F5222D',
},
{
key: 'volcano',
color: '#FA541C',
},
{
key: 'sunset',
color: '#FAAD14',
},
{
key: 'cyan',
color: '#13C2C2',
},
{
key: 'green',
color: '#52C41A',
},
{
key: 'daybreak',
color: '#1890FF',
},
{
key: 'geekblue',
color: '#2F54EB',
},
{
key: 'purple',
color: '#722ED1',
},
];
export default {
components: {
DetailList
},
data() {
return {
visible: false,
colorList,
}
},
computed: {
...mapState({
theme: state => state.app.theme,
colorObj: state => state.app.color,
})
},
mounted () {
const vm = this
updateTheme(this.colorObj.color)
},
methods: {
showDrawer() {
this.visible = true
},
onClose() {
this.visible = false
},
toggle() {
this.visible = !this.visible
},
changeMenuTheme(theme) {
this.$store.dispatch('ToggleTheme', theme)
},
changeColor(color) {
updateTheme(color.color)
this.$store.dispatch('ToggleColor', color)
}
},
}
</script>
<style lang="scss" scoped>
.setting-drawer-index-content {
.setting-drawer-index-title {
font-size: 14px;
color: rgba(0, 0, 0, .85);
line-height: 22px;
margin-bottom: 12px;
}
.setting-drawer-index-blockChecbox {
display: flex;
.setting-drawer-index-item {
margin-right: 16px;
position: relative;
border-radius: 4px;
cursor: pointer;
img {
width: 48px;
}
.setting-drawer-index-selectIcon {
position: absolute;
top: 0;
right: 0;
width: 100%;
padding-top: 15px;
padding-left: 24px;
height: 100%;
color: #1890ff;
font-size: 14px;
font-weight: 700;
}
}
}
.setting-drawer-theme-color-colorBlock {
width: 20px;
height: 20px;
border-radius: 2px;
float: left;
cursor: pointer;
margin-right: 8px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
color: #fff;
font-weight: 700;
i {
font-size: 14px;
}
}
}
.setting-drawer-index-handle {
position: absolute;
top: 240px;
background: #1890ff;
width: 48px;
height: 48px;
right: 0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
pointer-events: auto;
z-index: 1001;
text-align: center;
font-size: 16px;
border-radius: 4px 0 0 4px;
i {
color: rgb(255, 255, 255);
font-size: 20px;
}
}
</style>
\ No newline at end of file
src/components/tools/setting.js 0 → 100644
import { message } from 'ant-design-vue/es';
// import defaultSettings from '../defaultSettings';
let lessNodesAppended;
const updateTheme = primaryColor => {
// Don't compile less in production!
if (process.env.NODE_ENV === 'production') {
return;
}
// Determine if the component is remounted
if (!primaryColor) {
return;
}
const hideMessage = message.loading('正在编译主题！', 0);
function buildIt() {
if (!window.less) {
return;
}
setTimeout(() => {
window.less
.modifyVars({
'@primary-color': primaryColor,
})
.then(() => {
hideMessage();
})
.catch(() => {
message.error('Failed to update theme');
hideMessage();
});
}, 200);
}
if (!lessNodesAppended) {
// insert less.js and color.less
const lessStyleNode = document.createElement('link');
const lessConfigNode = document.createElement('script');
const lessScriptNode = document.createElement('script');
lessStyleNode.setAttribute('rel', 'stylesheet/less');
lessStyleNode.setAttribute('href', '/color.less');
lessConfigNode.innerHTML = `
window.less = {
async: true,
env: 'production',
javascriptEnabled: true
};
`;
lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
lessScriptNode.async = true;
lessScriptNode.onload = () => {
buildIt();
lessScriptNode.onload = null;
};
document.body.appendChild(lessStyleNode);
document.body.appendChild(lessConfigNode);
document.body.appendChild(lessScriptNode);
lessNodesAppended = true;
} else {
buildIt();
}
};
const updateColorWeak = colorWeak => {
document.body.className = colorWeak ? 'colorWeak' : '';
};
export { updateTheme, updateColorWeak }
\ No newline at end of file
src/main.js
...@@ -14,7 +14,7 @@ import * as dayjs from 'dayjs' // 日期时间支持库 ...@@ -14,7 +14,7 @@ import * as dayjs from 'dayjs' // 日期时间支持库
import '@/permission' // permission control import '@/permission' // permission control
import { ACCESS_TOKEN, DEFAULT_THEME, SIDEBAR_TYPE } from "@/store/mutation-types" import {ACCESS_TOKEN, DEFAULT_COLOR, DEFAULT_THEME, SIDEBAR_TYPE} from "@/store/mutation-types"
Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') { Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return dayjs(dataStr).format(pattern) return dayjs(dataStr).format(pattern)
...@@ -39,6 +39,7 @@ new Vue({ ...@@ -39,6 +39,7 @@ new Vue({
mounted () { mounted () {
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true)) store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, 'dark')) store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, 'dark'))
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, { key: 'daybreak', color: '#1890FF' }))
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN)) store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
}, },
......
src/store/getters.js
const getters = { const getters = {
device: state => state.app.device, device: state => state.app.device,
theme: state => state.app.theme, theme: state => state.app.theme,
color: state => state.app.color,
token: state => state.user.token, token: state => state.user.token,
avatar: state => state.user.avatar, avatar: state => state.user.avatar,
nickname: state => state.user.name, nickname: state => state.user.name,
......
src/store/modules/app.js
import Vue from 'vue' import Vue from 'vue'
import { SIDEBAR_TYPE, DEFAULT_THEME } from "@/store/mutation-types" import {SIDEBAR_TYPE, DEFAULT_THEME, DEFAULT_COLOR} from "@/store/mutation-types"
const app = { const app = {
state: { state: {
...@@ -8,7 +8,8 @@ const app = { ...@@ -8,7 +8,8 @@ const app = {
withoutAnimation: false withoutAnimation: false
}, },
device: 'desktop', device: 'desktop',
theme: '' theme: '',
color: null
}, },
mutations: { mutations: {
SET_SIDEBAR_TYPE: (state, type) => { SET_SIDEBAR_TYPE: (state, type) => {
...@@ -27,6 +28,10 @@ const app = { ...@@ -27,6 +28,10 @@ const app = {
// setStore('_DEFAULT_THEME', theme) // setStore('_DEFAULT_THEME', theme)
Vue.ls.set(DEFAULT_THEME, theme) Vue.ls.set(DEFAULT_THEME, theme)
state.theme = theme state.theme = theme
},
TOGGLE_COLOR: (state, color) => {
Vue.ls.set(DEFAULT_COLOR, color)
state.color = color
} }
}, },
actions: { actions: {
...@@ -41,6 +46,9 @@ const app = { ...@@ -41,6 +46,9 @@ const app = {
}, },
ToggleTheme({ commit }, theme) { ToggleTheme({ commit }, theme) {
commit('TOGGLE_THEME', theme) commit('TOGGLE_THEME', theme)
},
ToggleColor({ commit }, color) {
commit('TOGGLE_COLOR', color)
} }
} }
} }
......
src/store/mutation-types.js
export const ACCESS_TOKEN = 'Access-Token' export const ACCESS_TOKEN = 'Access-Token'
export const SIDEBAR_TYPE = 'SIDEBAR_TYPE' export const SIDEBAR_TYPE = 'SIDEBAR_TYPE'
export const DEFAULT_THEME = 'DEFAULT_THEME' export const DEFAULT_THEME = 'DEFAULT_THEME'
\ No newline at end of file export const DEFAULT_COLOR = 'DEFAULT_COLOR'
\ No newline at end of file
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