2023-02-04

king

2023-02-04 954628f0f6ca66aa93347d703309b0ab36db646b

2023-02-04

 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);
}

 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

 src/menu/stylecontroller/syscolorsketch/index.jsx

New file
@@ -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

 src/menu/stylecontroller/syscolorsketch/index.scss

New file
@@ -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;
  }
}

 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}

 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;

 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;


 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;

 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 {