From 954628f0f6ca66aa93347d703309b0ab36db646b Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期六, 04 二月 2023 22:34:01 +0800
Subject: [PATCH] 2023-02-04
---
src/menu/stylecontroller/syscolorsketch/index.jsx | 44 ++++++++++++++
src/assets/css/viewstyle.scss | 45 +++++++++++++++
src/views/mobdesign/index.scss | 8 ++
src/views/pcdesign/index.scss | 6 ++
src/views/menudesign/index.scss | 6 ++
src/menu/stylecontroller/index.jsx | 39 +++++++++++-
src/tabviews/custom/components/group/normal-group/index.jsx | 2
src/menu/stylecontroller/syscolorsketch/index.scss | 13 ++++
src/views/tabledesign/index.scss | 6 ++
9 files changed, 163 insertions(+), 6 deletions(-)
diff --git a/src/assets/css/viewstyle.scss b/src/assets/css/viewstyle.scss
index 931d12a..b79b5a2 100644
--- a/src/assets/css/viewstyle.scss
+++ b/src/assets/css/viewstyle.scss
@@ -397,6 +397,9 @@
body[class*='mk-blue-'] {
--mk-sys-color: #1890ff;
--mk-sys-color1: #e6f7ff;
+ --mk-sys-color2: #bae7ff;
+ --mk-sys-color3: #91d5ff;
+ --mk-sys-color4: #69c0ff;
--mk-sys-color5: #40a9ff;
@include viewstyle(#e6f7ff, #bae7ff, #91d5ff, #69c0ff, #40a9ff, #1890ff, #096dd9);
}
@@ -404,6 +407,9 @@
body[class*='mk-red-'] {
--mk-sys-color: #f5222d;
--mk-sys-color1: #fff1f0;
+ --mk-sys-color2: #ffccc7;
+ --mk-sys-color3: #ffa39e;
+ --mk-sys-color4: #ff7875;
--mk-sys-color5: #ff4d4f;
@include viewstyle(#fff1f0, #ffccc7, #ffa39e, #ff7875, #ff4d4f, #f5222d, #cf1322);
}
@@ -411,6 +417,9 @@
body[class*='mk-orange-red-'] {
--mk-sys-color: #fa541c;
--mk-sys-color1: #fff2e8;
+ --mk-sys-color2: #ffd8bf;
+ --mk-sys-color3: #ffbb96;
+ --mk-sys-color4: #ff9c6e;
--mk-sys-color5: #ff7a45;
@include viewstyle(#fff2e8, #ffd8bf, #ffbb96, #ff9c6e, #ff7a45, #fa541c, #d4380d);
}
@@ -418,6 +427,9 @@
body[class*='mk-orange-'] {
--mk-sys-color: #fa8c16;
--mk-sys-color1: #fff7e6;
+ --mk-sys-color2: #ffe7ba;
+ --mk-sys-color3: #ffd591;
+ --mk-sys-color4: #ffc069;
--mk-sys-color5: #ffa940;
@include viewstyle(#fff7e6, #ffe7ba, #ffd591, #ffc069, #ffa940, #fa8c16, #d46b08);
}
@@ -425,6 +437,9 @@
body[class*='mk-orange-yellow-'] {
--mk-sys-color: #faad14;
--mk-sys-color1: #fffbe6;
+ --mk-sys-color2: #fff1b8;
+ --mk-sys-color3: #ffe58f;
+ --mk-sys-color4: #ffd666;
--mk-sys-color5: #ffc53d;
@include viewstyle(#fffbe6, #fff1b8, #ffe58f, #ffd666, #ffc53d, #faad14, #d48806);
}
@@ -432,6 +447,9 @@
body[class*='mk-yellow-'] {
--mk-sys-color: #fadb14;
--mk-sys-color1: #feffe6;
+ --mk-sys-color2: #ffffb8;
+ --mk-sys-color3: #fffb8f;
+ --mk-sys-color4: #fff566;
--mk-sys-color5: #ffec3d;
@include viewstyle(#feffe6, #ffffb8, #fffb8f, #fff566, #ffec3d, #fadb14, #d4b106);
}
@@ -439,6 +457,9 @@
body[class*='mk-yellow-green-'] {
--mk-sys-color: #a0d911;
--mk-sys-color1: #fcffe6;
+ --mk-sys-color2: #f4ffb8;
+ --mk-sys-color3: #eaff8f;
+ --mk-sys-color4: #d3f261;
--mk-sys-color5: #bae637;
@include viewstyle(#fcffe6, #f4ffb8, #eaff8f, #d3f261, #bae637, #a0d911, #7cb305);
}
@@ -446,6 +467,9 @@
body[class*='mk-green-'] {
--mk-sys-color: #52c41a;
--mk-sys-color1: #f6ffed;
+ --mk-sys-color2: #d9f7be;
+ --mk-sys-color3: #b7eb8f;
+ --mk-sys-color4: #95de64;
--mk-sys-color5: #73d13d;
@include viewstyle(#f6ffed, #d9f7be, #b7eb8f, #95de64, #73d13d, #52c41a, #389e0d);
}
@@ -453,6 +477,9 @@
body[class*='mk-cyan-'] {
--mk-sys-color: #13c2c2;
--mk-sys-color1: #e6fffb;
+ --mk-sys-color2: #b5f5ec;
+ --mk-sys-color3: #87e8de;
+ --mk-sys-color4: #5cdbd3;
--mk-sys-color5: #36cfc9;
@include viewstyle(#e6fffb, #b5f5ec, #87e8de, #5cdbd3, #36cfc9, #13c2c2, #08979c);
}
@@ -460,6 +487,9 @@
body[class*='mk-blue-purple-'] {
--mk-sys-color: #2f54eb;
--mk-sys-color1: #f0f5ff;
+ --mk-sys-color2: #d6e4ff;
+ --mk-sys-color3: #adc6ff;
+ --mk-sys-color4: #85a5ff;
--mk-sys-color5: #597ef7;
@include viewstyle(#f0f5ff, #d6e4ff, #adc6ff, #85a5ff, #597ef7, #2f54eb, #1d39c4);
}
@@ -467,6 +497,9 @@
body[class*='mk-purple-'] {
--mk-sys-color: #722ed1;
--mk-sys-color1: #f9f0ff;
+ --mk-sys-color2: #efdbff;
+ --mk-sys-color3: #d3adf7;
+ --mk-sys-color4: #b37feb;
--mk-sys-color5: #9254de;
@include viewstyle(#f9f0ff, #efdbff, #d3adf7, #b37feb, #9254de, #722ed1, #531dab);
}
@@ -474,6 +507,9 @@
body[class*='mk-magenta-'] {
--mk-sys-color: #eb2f96;
--mk-sys-color1: #fff0f6;
+ --mk-sys-color2: #ffd6e7;
+ --mk-sys-color3: #ffadd2;
+ --mk-sys-color4: #ff85c0;
--mk-sys-color5: #f759ab;
@include viewstyle(#fff0f6, #ffd6e7, #ffadd2, #ff85c0, #f759ab, #eb2f96, #c41d7f);
}
@@ -481,6 +517,9 @@
body[class*='mk-grass-green-'] {
--mk-sys-color: #aeb303;
--mk-sys-color1: #f2efda;
+ --mk-sys-color2: #e6de97;
+ --mk-sys-color3: #d9d26c;
+ --mk-sys-color4: #ccc845;
--mk-sys-color5: #bfbf22;
@include viewstyle(#f2efda, #e6de97, #d9d26c, #ccc845, #bfbf22, #aeb303, #838c00);
}
@@ -488,6 +527,9 @@
body[class*='mk-deep-red-'] {
--mk-sys-color: #c32539;
--mk-sys-color1: #fff0f0;
+ --mk-sys-color2: #f5cbcb;
+ --mk-sys-color3: #e89b9e;
+ --mk-sys-color4: #db7077;
--mk-sys-color5: #cf4856;
@include viewstyle(#fff0f0, #f5cbcb, #e89b9e, #db7077, #cf4856, #c32539, #9c162c);
}
@@ -495,6 +537,9 @@
body[class*='mk-deep-blue-'] {
--mk-sys-color: #1d3661;
--mk-sys-color1: #eff1f4;
+ --mk-sys-color2: #e0e3e9;
+ --mk-sys-color3: #dbdfe6;
+ --mk-sys-color4: #c6cede;
--mk-sys-color5: #394c6f;
@include viewstyle(#eff1f4, #e0e3e9, #dbdfe6, #c6cede, #394c6f, #1d3661, #1d3661);
}
\ No newline at end of file
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index 397fa05..b9e30ca 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -35,6 +35,7 @@
import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
import StyleInput from './styleInput'
+import SysColorSketch from './syscolorsketch'
import MainLogo from '@/assets/img/main-logo.png'
import './index.scss'
@@ -574,6 +575,13 @@
>
<ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} />
</Form.Item>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="绯荤粺鑹�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <SysColorSketch onChange={this.changeFontColor} />
+ </Form.Item>
</Col> : null}
{fonts.includes('fontStyle') ? <Col span={24}>
<Form.Item
@@ -624,6 +632,13 @@
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
<ColorSketch value={card.backgroundColor || '#ffffff'} onChange={this.changeBackgroundColor} />
+ </Form.Item>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="绯荤粺鑹�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <SysColorSketch onChange={this.changeBackgroundColor} />
</Form.Item>
</Col>
{window.develop === true ? <Col span={24}>
@@ -768,11 +783,18 @@
label={<BgColorsOutlined title="杈规棰滆壊"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- {borposition === 'outer' ? <ColorSketch defaultValue={card.borderColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'left' ? <ColorSketch defaultValue={card.borderLeftColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'right' ? <ColorSketch defaultValue={card.borderRightColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'top' ? <ColorSketch defaultValue={card.borderTopColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'bottom' ? <ColorSketch defaultValue={card.borderBottomColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'outer' ? <ColorSketch value={card.borderColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'left' ? <ColorSketch value={card.borderLeftColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'right' ? <ColorSketch value={card.borderRightColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'top' ? <ColorSketch value={card.borderTopColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'bottom' ? <ColorSketch value={card.borderBottomColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
+ </Form.Item>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="绯荤粺鑹�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <SysColorSketch onChange={this.changeBorderColor} />
</Form.Item>
</Col>
<Col span={24}>
@@ -794,6 +816,13 @@
>
<ColorSketch value={card.shadowColor || 'transparent'} onChange={this.changeShadowColor} />
</Form.Item>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="绯荤粺鑹�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <SysColorSketch onChange={this.changeShadowColor} />
+ </Form.Item>
</Col>
<Col span={24}>
<Form.Item
diff --git a/src/menu/stylecontroller/syscolorsketch/index.jsx b/src/menu/stylecontroller/syscolorsketch/index.jsx
new file mode 100644
index 0000000..20c35fc
--- /dev/null
+++ b/src/menu/stylecontroller/syscolorsketch/index.jsx
@@ -0,0 +1,44 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+import './index.scss'
+
+class SysColorSketch extends Component {
+ static propTpyes = {
+ onChange: PropTypes.func
+ }
+ state = {
+ colors: ['#1890ff', '#40a9ff', '#69c0ff', '#91d5ff', '#bae7ff', '#e6f7ff']
+ }
+
+ handleChange = (color) => {
+ let _color = 'var(--mk-sys-color)'
+ if (color === '#1890ff') {
+ _color = 'var(--mk-sys-color)'
+ } else if (color === '#40a9ff') {
+ _color = 'var(--mk-sys-color5)'
+ } else if (color === '#69c0ff') {
+ _color = 'var(--mk-sys-color4)'
+ } else if (color === '#91d5ff') {
+ _color = 'var(--mk-sys-color3)'
+ } else if (color === '#bae7ff') {
+ _color = 'var(--mk-sys-color2)'
+ } else if (color === '#e6f7ff') {
+ _color = 'var(--mk-sys-color1)'
+ }
+
+ this.props.onChange(_color)
+ }
+
+ render() {
+ const { colors } = this.state
+
+ return (
+ <div className="sys-color-sketch-block">
+ {colors.map(color => <span onClick={() => this.handleChange(color)} style={ {background: color} }></span>)}
+ </div>
+ )
+ }
+}
+
+export default SysColorSketch
\ No newline at end of file
diff --git a/src/menu/stylecontroller/syscolorsketch/index.scss b/src/menu/stylecontroller/syscolorsketch/index.scss
new file mode 100644
index 0000000..a948d17
--- /dev/null
+++ b/src/menu/stylecontroller/syscolorsketch/index.scss
@@ -0,0 +1,13 @@
+.sys-color-sketch-block {
+ height: 40px;
+ width: 100%;
+
+ span {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ margin-right: 10px;
+ cursor: pointer;
+ vertical-align: middle;
+ }
+}
\ No newline at end of file
diff --git a/src/tabviews/custom/components/group/normal-group/index.jsx b/src/tabviews/custom/components/group/normal-group/index.jsx
index 44124b6..c7967b1 100644
--- a/src/tabviews/custom/components/group/normal-group/index.jsx
+++ b/src/tabviews/custom/components/group/normal-group/index.jsx
@@ -388,7 +388,7 @@
if (!config.components || config.components.length === 0) return (<div style={config.style}></div>)
return (
- <div className={'normal-group-wrap ' + (config.setting.layout || '')} id={config.uuid} style={config.style}>
+ <div className={'normal-group-wrap ' + (config.setting.layout || '')} id={'anchor' + config.uuid} style={config.style}>
{config.setting && config.setting.title ? <div className="group-header" style={config.headerStyle}>
<span className="title">{config.setting.title}</span>
</div> : null}
diff --git a/src/views/menudesign/index.scss b/src/views/menudesign/index.scss
index 1d47004..2916916 100644
--- a/src/views/menudesign/index.scss
+++ b/src/views/menudesign/index.scss
@@ -1,6 +1,12 @@
body {
overflow-x: hidden;
overflow-y: hidden;
+ --mk-sys-color: #1890ff;
+ --mk-sys-color1: #e6f7ff;
+ --mk-sys-color2: #bae7ff;
+ --mk-sys-color3: #91d5ff;
+ --mk-sys-color4: #69c0ff;
+ --mk-sys-color5: #40a9ff;
}
.pc-menu-view {
background: #000;
diff --git a/src/views/mobdesign/index.scss b/src/views/mobdesign/index.scss
index 5c787d6..2ef712e 100644
--- a/src/views/mobdesign/index.scss
+++ b/src/views/mobdesign/index.scss
@@ -1,3 +1,11 @@
+body {
+ --mk-sys-color: #1890ff;
+ --mk-sys-color1: #e6f7ff;
+ --mk-sys-color2: #bae7ff;
+ --mk-sys-color3: #91d5ff;
+ --mk-sys-color4: #69c0ff;
+ --mk-sys-color5: #40a9ff;
+}
.mk-mob-view {
min-height: 100vh;
diff --git a/src/views/pcdesign/index.scss b/src/views/pcdesign/index.scss
index ef0c9a0..23ce3cb 100644
--- a/src/views/pcdesign/index.scss
+++ b/src/views/pcdesign/index.scss
@@ -1,5 +1,11 @@
body {
overflow-x: hidden;
+ --mk-sys-color: #1890ff;
+ --mk-sys-color1: #e6f7ff;
+ --mk-sys-color2: #bae7ff;
+ --mk-sys-color3: #91d5ff;
+ --mk-sys-color4: #69c0ff;
+ --mk-sys-color5: #40a9ff;
}
.mk-pc-view {
background: #000;
diff --git a/src/views/tabledesign/index.scss b/src/views/tabledesign/index.scss
index 2fe5621..9a2c961 100644
--- a/src/views/tabledesign/index.scss
+++ b/src/views/tabledesign/index.scss
@@ -1,6 +1,12 @@
body {
overflow-x: hidden;
overflow-y: hidden;
+ --mk-sys-color: #1890ff;
+ --mk-sys-color1: #e6f7ff;
+ --mk-sys-color2: #bae7ff;
+ --mk-sys-color3: #91d5ff;
+ --mk-sys-color4: #69c0ff;
+ --mk-sys-color5: #40a9ff;
}
.mk-source-wrap {
.ant-radio-button-wrapper:last-child {
--
Gitblit v1.8.0