动态控制主题样式
dydwang
5 years ago
parent
f95ee72676
commit
dd02f47d82
@ -0,0 +1,25 @@
|
||||
// 动态更新antd主题颜色
|
||||
const path = require('path');
|
||||
const { generateTheme } = require('antd-theme-generator');
|
||||
const options = {
|
||||
antDir: path.join(__dirname, './node_modules/ant-design-vue'), //依赖位置
|
||||
// stylesDir: path.join(__dirname, './src/style'), //处理style下所有less
|
||||
varFile: path.join(__dirname, './src/style/antd-variables.less'), //antd全局变量
|
||||
themeVariables: [
|
||||
'@primary-color',
|
||||
'@secondary-color',
|
||||
'@text-color',
|
||||
'@text-color-secondary',
|
||||
'@heading-color',
|
||||
'@layout-body-background',
|
||||
'@btn-primary-bg',
|
||||
'@layout-header-background'
|
||||
], // 指定所有我们自定义的需要切换的样式变量。
|
||||
outputFilePath: path.join(__dirname, './public/antd_color.less'), // 输出样式
|
||||
}
|
||||
generateTheme(options).then(() => {
|
||||
console.log('Theme generated successfully');
|
||||
}).catch(error => {
|
||||
console.log('Error', error);
|
||||
});
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
server {
|
||||
listen 9007;
|
||||
server_name localhost;
|
||||
client_max_body_size 90m;
|
||||
|
||||
location /api {
|
||||
proxy_pass http://localhost:8099/api;
|
||||
}
|
||||
|
||||
location /{
|
||||
root D:\hzleaper_auto_install\logistics_web_package;
|
||||
index index.html index.html;
|
||||
}
|
||||
|
||||
location /api/node {
|
||||
proxy_pass http://127.0.0.1:8117;
|
||||
rewrite "^/api/node/(.*)$" /$1 break;
|
||||
}
|
||||
location /api/pic {
|
||||
alias d:\data\media\\;
|
||||
}
|
||||
|
||||
location /api/mp4 {
|
||||
alias d:\\data\mp4\\;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
updateStylesAPI: {
|
||||
url: '/node/styles/update',
|
||||
name: '更新标题菜单样式',
|
||||
method: 'POST'
|
||||
},
|
||||
getStylesAPI: {
|
||||
url: '/node/default_css.json',
|
||||
name: '获取标题菜单样式',
|
||||
method: 'GET'
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import Vue from "vue";
|
||||
import {
|
||||
ColorPicker, // 颜色选择器
|
||||
Form,
|
||||
FormItem
|
||||
} from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
Vue.use(ColorPicker);
|
||||
Vue.use(Form);
|
||||
Vue.use(FormItem);
|
||||
@ -0,0 +1,6 @@
|
||||
import less from 'less'
|
||||
export default {
|
||||
...less,
|
||||
async: false, // 是否同步
|
||||
env: 'production', // 环境
|
||||
};
|
||||
@ -0,0 +1,18 @@
|
||||
import less from './less';
|
||||
// 更换antd主题色
|
||||
export const changeTheme = (color) => {
|
||||
console.log(less, color);
|
||||
less
|
||||
.modifyVars({
|
||||
'@primary-color': color,
|
||||
'@link-color': color,
|
||||
'@btn-primary-bg': color
|
||||
})
|
||||
.then(() => {
|
||||
console.log('antd主题颜色成功')
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('antd主题颜色失败')
|
||||
console.error(error)
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
import Vue from "vue";
|
||||
const vue = new Vue();
|
||||
import api from '@/plugins/axios/index'
|
||||
const { httpNodeApi } = api;
|
||||
import axios from "axios";
|
||||
import {changeTheme} from '@/plugins/themePicker'
|
||||
const store = {
|
||||
state: {
|
||||
data:{
|
||||
"theme":{
|
||||
"primary-color":"rgba(184, 68, 13, 1)"
|
||||
},
|
||||
"title":{
|
||||
"text":"ROBO垛机视觉系统",
|
||||
"style":{
|
||||
"color":"rgba(255, 255, 255, 1)",
|
||||
"background-color":"rgba(163, 60, 12, 1)",
|
||||
"font-size":"24px"
|
||||
}
|
||||
},
|
||||
"menu":{
|
||||
"default":{
|
||||
"color":"rgba(230, 224, 224, 1)",
|
||||
"background-color":"rgba(163, 60, 12, 1)"
|
||||
},
|
||||
"select":{
|
||||
"color":"rgba(255, 255, 255, 1)",
|
||||
"background-color":"rgba(184, 68, 13, 1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mutations:{
|
||||
UPDATE_STYLES(state, data) {
|
||||
// for(let key in data) {
|
||||
// // state[key] = data[key];
|
||||
// vue.$set(state, key, data[key])
|
||||
// }
|
||||
state.data = data;
|
||||
// 改变主题颜色
|
||||
changeTheme(data.theme['primary-color']);
|
||||
// setItem(data);
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
// 更新样式
|
||||
async updateStyles({commit}, data) {
|
||||
console.log(Vue.prototype.$api);
|
||||
commit('UPDATE_STYLES', data);
|
||||
await httpNodeApi.updateStylesAPI({data})
|
||||
},
|
||||
// 获取样式
|
||||
async getStyles({commit}){
|
||||
console.log('获取样式');
|
||||
const data = await axios.get('/api/node/default_css.json');
|
||||
commit('UPDATE_STYLES', data.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 初始加载时默认更新一次主题
|
||||
changeTheme(store.state.data.theme['primary-color']);
|
||||
export default store;
|
||||
@ -0,0 +1,24 @@
|
||||
// @import "ant-design-vue/lib/style/themes/default.less";
|
||||
@primary-color: #1890ff; // 全局主色
|
||||
@link-color: #1890ff; // 链接色
|
||||
@success-color: #52c41a; // 成功色
|
||||
@warning-color: #faad14; // 警告色
|
||||
@error-color: #f5222d; // 错误色
|
||||
@font-size-base: 14px; // 主字号
|
||||
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
|
||||
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
|
||||
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
|
||||
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
|
||||
@border-radius-base: 4px; // 组件/浮层圆角
|
||||
@border-color-base: #d9d9d9; // 边框色
|
||||
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
|
||||
|
||||
//:export {
|
||||
// primary-color: @primary-color;
|
||||
//}
|
||||
:root {
|
||||
--PC: @primary-color;
|
||||
}
|
||||
.primary-color{
|
||||
color:@primary-color
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<el-color-picker
|
||||
show-alpha
|
||||
size="medium"
|
||||
:value="color"
|
||||
:predefine="predefineColors"
|
||||
@change="val => $emit('change', val)"
|
||||
>
|
||||
</el-color-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SelectColor",
|
||||
components: {},
|
||||
props: {
|
||||
color: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
model: {
|
||||
prop: 'color',
|
||||
event: 'change'
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
predefineColors: [
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577'
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
created() {
|
||||
},
|
||||
destroyed() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.SelectColor {
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="StylesMenu">
|
||||
<p>默认</p>
|
||||
<el-form-item label="字体颜色">
|
||||
<select-color v-model="form.default.color"></select-color>
|
||||
</el-form-item>
|
||||
<el-form-item label="背景颜色">
|
||||
<select-color v-model="form.default['background-color']"></select-color>
|
||||
</el-form-item>
|
||||
<p>选中后</p>
|
||||
<el-form-item label="字体颜色">
|
||||
<select-color v-model="form.select.color"></select-color>
|
||||
</el-form-item>
|
||||
<el-form-item label="背景颜色">
|
||||
<select-color v-model="form.select['background-color']"></select-color>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectColor from "./SelectColor";
|
||||
export default {
|
||||
name: "StylesMenu",
|
||||
components: {SelectColor},
|
||||
props: {
|
||||
form:{}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
created() {
|
||||
},
|
||||
destroyed() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.StylesMenu {
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="StylesTheme">
|
||||
<el-form-item label="主题颜色">
|
||||
<select-color v-model="form['primary-color']"></select-color>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectColor from "./SelectColor";
|
||||
export default {
|
||||
name: "StylesTheme",
|
||||
components: {
|
||||
SelectColor
|
||||
},
|
||||
props: {
|
||||
form:{}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
created() {
|
||||
},
|
||||
destroyed() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.StylesTheme {
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="styles-title">
|
||||
<el-form-item label="标题文字" prop="title.text" :rules="{ required: true, message: '请输入标题', trigger: ['blur', 'change'] }">
|
||||
<a-input v-model="form.text" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字体颜色">
|
||||
<select-color v-model="form.style.color"></select-color>
|
||||
</el-form-item>
|
||||
<el-form-item label="背景颜色">
|
||||
<select-color v-model="form.style['background-color']"></select-color>
|
||||
</el-form-item>
|
||||
<!-- <a-form-item label="style">-->
|
||||
<!--<!– json编辑器–>-->
|
||||
<!-- <vue-json-editor-->
|
||||
<!-- v-model="form.style"-->
|
||||
<!-- :mode="'code'"-->
|
||||
<!-- lang="zh"-->
|
||||
<!-- @json-change="onJsonChange"-->
|
||||
<!-- @has-error="onError">-->
|
||||
<!-- </vue-json-editor>-->
|
||||
<!-- </a-form-item>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectColor from "./SelectColor";
|
||||
// import vueJsonEditor from 'vue-json-editor'
|
||||
export default {
|
||||
name: "StylesTitle",
|
||||
components: {
|
||||
SelectColor
|
||||
// vueJsonEditor
|
||||
},
|
||||
props: {
|
||||
form: {}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
created() {
|
||||
},
|
||||
destroyed() {
|
||||
},
|
||||
methods: {
|
||||
onJsonChange(data) {
|
||||
if(typeof data === "object") {
|
||||
this.form.style = data;
|
||||
}
|
||||
},
|
||||
onError(err) {
|
||||
// console.log(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.styles-title /deep/{
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="index">
|
||||
<el-form :model="formData" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||
<a-collapse v-model="activeKey">
|
||||
<a-collapse-panel key="0" header="主题">
|
||||
<styles-theme :form.sync="formData.theme"></styles-theme>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="1" header="标题">
|
||||
<styles-title :form.sync="formData.title"></styles-title>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header="菜单">
|
||||
<styles-menu :form.sync="formData.menu"></styles-menu>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<el-form-item>
|
||||
<span style="float: right">
|
||||
<a-button type="primary" @click="handleSubmit()" style="margin-right: 10px">
|
||||
保存
|
||||
</a-button>
|
||||
<a-button type="info" @click="init()">
|
||||
重置
|
||||
</a-button>
|
||||
</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import StylesTitle from "./StylesTitle";
|
||||
import StylesMenu from "./StylesMenu";
|
||||
import StylesTheme from "./StylesTheme";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components: {StylesTheme, StylesMenu, StylesTitle},
|
||||
props: {},
|
||||
computed: {
|
||||
...mapGetters(['styles']),
|
||||
watchStyles() {
|
||||
return JSON.stringify(this.styles);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
watchStyles() {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeKey: ['0', '1', '2'],
|
||||
formData: {},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
created() {
|
||||
console.log(this.styles);
|
||||
this.init();
|
||||
},
|
||||
destroyed() {
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['updateStyles']),
|
||||
init() {
|
||||
console.log('init');
|
||||
this.formData = JSON.parse(JSON.stringify(this.styles));
|
||||
},
|
||||
// 提交
|
||||
handleSubmit() {
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.updateStyles(this.formData);
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.index /deep/{
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
.ant-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.jsoneditor-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue