2020-09-28

king

2020-09-28 e812829d83b1fd296b25fbc244f89e9b38f687a9

2020-09-28

 src/menu/actioncomponent/dragaction/index.jsx

@@ -55,14 +55,9 @@
    copycard.uuid = Utils.getuuid()
    copycard.origin = false
    copycard.copyType = 'action'
    copycard.label = copycard.label + '(copy)'
    copycard.focus = true

    copycard.originCard = card

    if (copycard.OpenType === 'popview') { // 待完善
      copycard.linkTab = ''
    }

    let _val = fromJS(copycard).toJS()


 src/menu/components/card/cardcellcomponent/dragaction/card.jsx

@@ -102,6 +102,7 @@
      <div className="mk-popover-control">
        <Icon className="edit" title="edit" type="edit" onClick={() => editCard(id)} />
        <Icon className="close" title="close" type="close" onClick={() => delCard(id)} />
        {/* <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" /> */}
      </div>
    } trigger="hover">
      <div ref={node => drag(drop(node))} className={'ant-col card-cell ant-col-' + card.width} style={_style}>

 src/menu/components/card/cardcellcomponent/elementform/index.jsx

@@ -13,6 +13,7 @@
  number: ['eleType', 'datatype', 'value', 'format', 'fontSize', 'fontWeight', 'width', 'height', 'color', 'align', 'padding', 'prefix', 'postfix'],
  picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'radius', 'padding', 'url'],
  icon: ['eleType', 'icon', 'fontSize', 'width', 'height', 'color', 'align', 'padding', 'tooltip'],
  link: ['eleType', 'datatype', 'value', 'labelfield', 'fontSize', 'width', 'height', 'color', 'align', 'padding', 'prefix'],
  slider: ['eleType', 'field', 'width', 'color', 'padding', 'maxValue'],
  splitline: ['eleType', 'color', 'width', 'padding'],
}
@@ -59,6 +60,16 @@
              })
            }
          })
        } else if (item.key === 'labelfield') {
          item.options = []
          config.columns.forEach(col => {
            if (/^Nvarchar/ig.test(col.datatype)) {
              item.options.push({
                value: col.field,
                text: col.label
              })
            }
          })
        }

        return item
@@ -69,7 +80,7 @@
  getOptions = (eleType, datatype) => {
    let _options = fromJS(cardTypeOptions[eleType]).toJS() // 选项列表
    
    if (['text', 'number', 'picture'].includes(eleType)) {
    if (['text', 'number', 'picture', 'link'].includes(eleType)) {
      if (datatype === 'dynamic') {
        _options.push('field')
      }

 src/menu/components/card/cardcellcomponent/formconfig.jsx

@@ -23,6 +23,7 @@
        { value: 'number', text: '数值'},
        { value: 'picture', text: '图片'},
        { value: 'icon', text: '图标'},
        { value: 'link', text: '链接'},
        { value: 'slider', text: '进度条'},
        { value: 'splitline', text: '分割线'},
      ]
@@ -62,6 +63,14 @@
      required: true
    },
    {
      type: 'select',
      key: 'labelfield',
      label: '提示字段',
      initVal: card.labelfield || '',
      required: false,
      options: []
    },
    {
      type: 'text',
      key: 'prefix',
      label: '前缀',

 src/menu/components/card/data-card/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Icon, Popover } from 'antd'
import { Icon, Popover, Switch } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
@@ -15,7 +15,7 @@

const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const WrapComponent = asyncIconComponent(() => import('./wrapsetting'))
const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
// const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
const CardCellComponent = asyncComponent(() => import('../cardcellcomponent'))

class antvBarLineChart extends Component {
@@ -27,7 +27,8 @@

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    card: null
    card: null,
    back: false
  }

  UNSAFE_componentWillMount () {
@@ -60,9 +61,10 @@
        subtype: card.subtype,
        setting: { interType: 'system' },
        wrap: { name: card.name, width: 24, cardWidth: 6, addable: 'false', switch: 'false' },
        style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
        columns: [],
        scripts: [],
        action: [],
        // action: [],
        elements: []
      }
      this.setState({
@@ -77,7 +79,7 @@
  }

  componentDidMount () {

    MKEmitter.addListener('submitStyle', this.getStyle)
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -91,6 +93,7 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('submitStyle', this.getStyle)
  }

  updateComponent = (component) => {
@@ -148,17 +151,41 @@
  }

  changeStyle = () => {
    // MKEmitter.emit('changeStyle', card.uuid, newcard)
    const { card } = this.state

    MKEmitter.emit('changeStyle', [card.uuid], ['font', 'background', 'border'], {})
  }

  changeOutStyle = () => {
    const { card } = this.state

    MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style)
  }

  getStyle = (comIds, style) => {
    const { card } = this.state

    if (comIds[0] !== card.uuid) return

    this.setState({
      card: {...card, style}
    })
    console.log(style)
  }

  changeSide = () => {
    this.setState(prev => ({ back: !prev.back }))
  }

  render() {
    const { card } = this.state

    return (
      <div className="menu-data-card-edit-box">
      <div className="menu-data-card-edit-box" style={card.style}>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <WrapComponent config={card} updateConfig={this.updateComponent} />
            <Icon className="style" title="调整样式" onClick={this.changeOutStyle} type="font-colors" />
            <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            <SettingComponent config={card} updateConfig={this.updateComponent} />
          </div>
@@ -167,13 +194,14 @@
        </Popover>
        <div className={'ant-col card-item ant-col-' + (card.wrap.cardWidth || 6)} style={{height: card.wrap.height ? card.wrap.height + 'px' : 'auto'}}>
          <CardCellComponent config={card} updateElement={this.updateComponent}/>
          <ActionComponent plus="false" config={card} updateaction={this.updateComponent}/>
          {/* <ActionComponent plus="false" config={card} updateaction={this.updateComponent}/> */}
          <div className="card-control">
            <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
              <div className="mk-popover-control">
                <Icon className="plus" title="添加元素" onClick={this.addElement} type="plus" />
                <Icon className="plus" title="添加按钮" onClick={this.addButton} type="plus-square" />
                <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
                <Switch size="small" onClick={this.changeSide} defaultChecked />
              </div>
            } trigger="hover">
              <Icon type="tool" />

 src/menu/components/card/data-card/index.scss

@@ -2,27 +2,28 @@
  position: relative;
  box-sizing: border-box;
  background: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  
  .card-control {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 26px;
    height: 27px;
    z-index: 1;
    background: #ffffff;
    left: 0px;
    .anticon-tool {
      padding: 5px;
      right: auto;
      left: 1px;
    }
  }
  .anticon-tool {
    position: absolute;
    z-index: 1;
    font-size: 16px;
    right: 0;
    top: 0;
    right: 1px;
    top: 1px;
    cursor: pointer;
    padding: 10px;
    padding: 5px;
    background: #ffffff;
  }

  .card-item {

 src/menu/components/chart/antv-bar/index.jsx

@@ -84,6 +84,7 @@
        name: _plot.name,
        subtype: card.subtype,
        setting: { interType: 'system' },
        style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
        columns: [],
        scripts: [],
        search: [],
@@ -642,7 +643,7 @@
    const { card } = this.state

    return (
      <div className="menu-line-chart-edit-box" style={{height: card.plot.height || 400}}>
      <div className="menu-line-chart-edit-box" style={{...card.style, height: card.plot.height || 400}}>
        <div className="chart-header">
          <span className="chart-title">{card.plot.title || ''}</span>
          <SearchComponent

 src/menu/components/tabs/antv-tabs/index.jsx

@@ -47,6 +47,7 @@
        width: 24,
        name: tabs.name,
        setting: {width: 24, position: 'top', tabStyle: 'line', name: tabs.name},
        style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
        subtabs: [
          { uuid: Utils.getuuid(), parentId: tabs.uuid, floor: tabs.floor, label: 'Tab 1', icon: '', components: [] },
          { uuid: Utils.getuuid(), parentId: tabs.uuid, floor: tabs.floor, label: 'Tab 2', icon: '', components: [] },
@@ -206,7 +207,7 @@
    const { tabs, dict, labelvisible, editab } = this.state

    return (
      <div className="menu-tabs-edit-box">
      <div className="menu-tabs-edit-box" style={tabs.style}>
        <Tabs defaultActiveKey="1" tabPosition={tabs.setting.position} type={tabs.setting.tabStyle}>
          {tabs.subtabs.map((tab, index) => (
            <TabPane tab={

 src/menu/menushell/index.scss

@@ -4,14 +4,6 @@
  width: 100%;
  background-size: 100%;

  >.ant-row {
    margin-left: -4px;
    margin-right: -4px;
    margin-top: -4px;
    >.ant-col {
      padding: 8px;
    }
  }
  .anticon {
    cursor: unset;
  }

 src/menu/stylecontroller/index.jsx

@@ -1,8 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Popover, Menu, Drawer } from 'antd'
import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Drawer } from 'antd'

import MKEmitter from '@/utils/events.js'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import ColorSketch from '@/mob/colorsketch'
@@ -21,54 +22,73 @@
  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    card: null,
    comIds: [],
    fontColor: '#000000',
    backgroundColor: '#ffffff',
    bgimages: [],
    marginTop: '',
    marginTopVal: '',
    marginBottom: '',
    marginBottomVal: '',
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.editElem), fromJS(nextProps.editElem))) {
      this.setState({
        card: null
      }, () => {
        if (!nextProps.editElem) return
        let _card = fromJS(nextProps.editElem).toJS()
        let bgImg = _card.backgroundImage || ''

        if (bgImg && /^linear-gradient/.test(bgImg)) {
          bgImg = bgImg.replace('linear-gradient(', '')
          bgImg = bgImg.replace(')', '')
        } else if (bgImg && /^url/.test(bgImg)) {
          bgImg = bgImg.replace('url(', '')
          bgImg = bgImg.replace(')', '')
        }

        this.setState({
          card: _card,
          fontColor: _card.color || '#000000',
          backgroundColor: _card.backgroundColor || '#ffffff',
          backgroundImage: bgImg,
          marginTop: _card.marginTop ? _card.marginTop : '',
          marginTopVal: _card.marginTop ? parseInt(_card.marginTop) : '',
          marginBottom: _card.marginBottom ? _card.marginBottom : '',
          marginBottomVal: _card.marginBottomVal ? parseInt(_card.marginBottomVal) : ''
        })
      })
    }
    backgroundImage: '',
    options: [],
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  updateStyle = (style) => {
    const { card } = this.state
  componentDidMount () {
    MKEmitter.addListener('changeStyle', this.initStyle)
  }

    this.props.updateStyle({componentId: card.componentId, classId: card.classId, uuid: card.uuid, style})
  /**
   * @description 组件销毁，清除state更新，清除快捷键设置
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('changeStyle', this.initStyle)
  }

  initStyle = (comIds, options, style = {}) => {
    let backgroundImage = ''
    if (style.backgroundImage) {
      if (/^url/ig.test(style.backgroundImage)) {
        backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
      } else if (/^linear-gradient/ig.test(style.backgroundImage)) {
        backgroundImage = style.backgroundImage.replace(/^linear-gradient\(/ig, '').replace(/\)$/ig, '')
      }
    }

    this.setState({
      visible: true,
      comIds: comIds,
      card: fromJS(style).toJS(),
      options: options,
      backgroundImage
    })
  }

  onCloseDrawer = () => {
    this.setState({
      visible: false,
      comIds: [],
      card: null,
      options: [],
      backgroundImage: ''
    })
  }

  updateStyle = (style) => {
    const { comIds, card } = this.state

    let _style = {
      ...card,
      ...style
    }

    this.setState({
      card: _style,
    })

    MKEmitter.emit('submitStyle', comIds, _style)
  }

  /**
@@ -155,19 +175,7 @@
   * @description 修改背景颜色 ，颜色控件
   */
  changeBackgroundColor = (val) => {
    this.setState({
      backgroundColor: val
    })
    this.updateStyle({backgroundColor: val})
  }

  /**
   * @description 修改字体颜色 ，手动输入
   */
  changeBackgroundColorInput = (e) => {
    this.setState({
      backgroundColor: e.target.value
    })
  }

  imgChange = (list) => {
@@ -183,12 +191,6 @@
  }

  changeBackgroundImageInput = (e) => {
    this.setState({
      backgroundImage: e.target.value
    })
  }

  submitBackgroundImage = (e) => {
    let val = e.target.value
    val = val.replace(/^\s*|\s*$/ig, '')

@@ -197,68 +199,35 @@
    } else if (/^#|,/ig.test(val)) {
      val = `linear-gradient(${val})`
    }

    this.setState({backgroundImage: e.target.value})
    this.updateStyle({backgroundImage: val})
  }

  submitBorder = (val, type) => {
    this.updateStyle({[type]: val})
  submitBorder = (val) => {
    let border = '0px'
    if (!/,\s0\)$/.test(val)) {
      border = `1px solid ${val}`
    }
    this.updateStyle({border: border})
  }

  changeBorderRadius = (val) => {
    let value = parseFloat(val)

    if (isNaN(value) || value < 0 || value > 500) return

    this.updateStyle({borderRadius: `${value}px`})
  }

  changeMarginTop = (e) => {
  changeBorderRadius = (e) => {
    let val = e.target.value
    let _val = parseInt(val)

    this.setState({
      marginTop: val
    })

    if (isNaN(_val)) return

    this.setState({
      marginTopVal: _val
    })
    this.updateStyle({borderRadius: val})
  }

  submitMarginTop = (val) => {
    this.setState({
      marginTop: val
    })
    this.updateStyle({marginTop: val})
  }
  changeMarginOrPadding = (val, type) => {
    val = parseInt(val)

  changeMarginBottom = (e) => {
    let val = e.target.value
    let _val = parseInt(val)
    if (isNaN(val)) {
      val = 0
    }

    this.setState({
      marginBottom: val
    })

    if (isNaN(_val)) return

    this.setState({
      marginBottomVal: _val
    })
  }

  submitMarginBottom = (val) => {
    this.setState({
      marginBottom: val
    })
    this.updateStyle({marginBottom: val})
    this.updateStyle({[type]: `${val}px`})
  }

  render () {
    const { card, fontColor, backgroundColor, backgroundImage, bgimages, marginTop, marginTopVal, marginBottom, marginBottomVal } = this.state
    const { card, options, backgroundImage, bgimages } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -272,20 +241,26 @@

    return (
      <Drawer
        title="样式修改"
        title={
          <div className="header-logo">
            <img src="http://cloud.mk9h.cn/Content/images/upload/2020-03-26/2020032615132185788026_xiazai.png" alt=""/>
          </div>
        }
        placement="left"
        width="300"
        className="menu-style-drawer"
        closable={true}
        maskStyle={{opacity: 0.2}}
        onClose={this.onCloseDrawer}
        maskStyle={{opacity: 0.1}}
        visible={this.state.visible}
      >
        <div className="mob-controller">
        <div className="menu-style-controller">
          <Form {...formItemLayout}>
            {card ? <Collapse expandIconPosition="right" defaultActiveKey={card.items[0]} accordion={true}>
              {card.items.includes('font') ? <Panel header="字体" key="font">
            {card ? <Collapse expandIconPosition="right" destroyInactivePanel={true} defaultActiveKey={options[0]} accordion={true}>
              {options.includes('font') ? <Panel header="字体" key="font">
                <Col span={12}>
                  <Form.Item colon={false} label={<Icon title="字体大小" type="font-size" />}>
                    <InputNumber defaultValue={card.fontSize || 14} min={12} max={100} precision={0} onChange={this.changeFontSize} />
                    <InputNumber defaultValue={card.fontSize} min={12} max={100} precision={0} onChange={this.changeFontSize} />
                  </Form.Item>
                </Col>
                <Col span={12}>
@@ -324,7 +299,6 @@
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={card.color || '#000000'} onChange={this.changeFontColor} />
                    <Input value={fontColor} onChange={this.changeFontColorInput} />
                  </Form.Item>
                </Col>
                <Col span={24}>
@@ -368,15 +342,14 @@
                  </Form.Item>
                </Col>
              </Panel> : null}
              {card.items.includes('background') ? <Panel header="背景" key="background">
              {options.includes('background') ? <Panel header="背景" key="background">
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="背景颜色" type="bg-colors" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch color={card.backgroundColor || '#ffffff'} changeColor={this.changeBackgroundColor} />
                    <Input value={backgroundColor} onChange={this.changeBackgroundColorInput} />
                    <ColorSketch value={card.backgroundColor || '#ffffff'} onChange={this.changeBackgroundColor} />
                  </Form.Item>
                </Col>
                <Col span={24}>
@@ -386,54 +359,18 @@
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <FileUpload value={bgimages} maxFile={2} fileType="text" onChange={this.imgChange}/>
                    <Input placeholder="" value={backgroundImage} autoComplete="off" onBlur={this.submitBackgroundImage} onPressEnter={this.submitBackgroundImage} onChange={this.changeBackgroundImageInput} />
                    <Input placeholder="" value={backgroundImage} autoComplete="off" onChange={this.changeBackgroundImageInput} />
                  </Form.Item>
                </Col>
              </Panel> : null}
              {card.items.includes('border') ? <Panel header="边框" key="border">
              {options.includes('border') ? <Panel header="边框" key="border">
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="外边框" type="border-outer" />}
                    label={<Icon title="边框" type="border-outer" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Input placeholder="" defaultValue={card.border || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'border')} onPressEnter={(e) => this.submitBorder(e.target.value, 'border')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="左边框" type="border-left" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Input placeholder="" defaultValue={card.borderLeft || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderLeft')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderLeft')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="右边框" type="border-right" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Input placeholder="" defaultValue={card.borderRight || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderRight')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderRight')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="上边框" type="border-top" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Input placeholder="" defaultValue={card.borderTop || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderTop')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderTop')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="下边框" type="border-bottom" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Input placeholder="" defaultValue={card.borderBottom || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderBottom')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderBottom')}/>
                    <ColorSketch defaultValue={card.border ? card.border.replace(/^1px solid /ig, '').replace('0px', 'transparent') : 'transparent'} onChange={this.submitBorder} />
                  </Form.Item>
                </Col>
                <Col span={24}>
@@ -442,41 +379,81 @@
                    label={<Icon title="圆角" type="radius-setting" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <InputNumber defaultValue={card.borderRadius || 0} min={0} max={500} precision={0} onChange={this.changeBorderRadius}/>
                    <Radio.Group onChange={this.changeBorderRadius} defaultValue={card.borderRadius || ''}>
                      <Radio value="0px">无</Radio>
                      <Radio value="2px">2px</Radio>
                      <Radio value="4px">4px</Radio>
                      <Radio value="25%">25%</Radio>
                      <Radio value="50%">50%</Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {card.items.includes('margin') ? <Panel header="外边距" key="margin">
              {options.includes('margin') ? <Panel header="外边距" key="margin">
                <Col span={12}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="上边距" type="vertical-align-top"/>}
                    label={<Icon title="上边距" type="arrow-up"/>}
                  >
                    <Popover placement="bottom" overlayClassName="margin-popover" content={
                      marginTopVal !== '' ?
                      <Menu>
                        <Menu.Item onClick={() => this.submitMarginTop(`${marginTopVal}px`)}>{marginTopVal} px</Menu.Item>
                        <Menu.Item onClick={() => this.submitMarginTop(`${marginTopVal}vh`)}>{marginTopVal} vh</Menu.Item>
                      </Menu> : null
                    } trigger="hover">
                      <Input value={marginTop} onChange={this.changeMarginTop}/>
                    </Popover>
                    <InputNumber defaultValue={card.marginTop || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginTop')}/>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="下边距" type="vertical-align-bottom"/>}
                    label={<Icon title="下边距" type="arrow-down"/>}
                  >
                    <Popover placement="bottom" overlayClassName="margin-popover" content={
                      marginBottomVal !== '' ?
                      <Menu>
                        <Menu.Item onClick={() => this.submitMarginBottom(`${marginBottomVal}px`)}>{marginBottomVal} px</Menu.Item>
                        <Menu.Item onClick={() => this.submitMarginBottom(`${marginBottomVal}vh`)}>{marginBottomVal} vh</Menu.Item>
                      </Menu> : null
                    } trigger="hover">
                      <Input value={marginBottom} onChange={this.changeMarginBottom}/>
                    </Popover>
                    <InputNumber defaultValue={card.marginBottom || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginBottom')}/>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="左边距" type="arrow-left"/>}
                  >
                    <InputNumber defaultValue={card.marginLeft || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginLeft')}/>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="右边距" type="arrow-right"/>}
                  >
                    <InputNumber defaultValue={card.marginRight || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginRight')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('padding') ? <Panel header="内边距" key="padding">
                <Col span={12}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="上边距" type="arrow-up"/>}
                  >
                    <InputNumber defaultValue={card.paddingTop || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingTop')}/>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="下边距" type="arrow-down"/>}
                  >
                    <InputNumber defaultValue={card.paddingBottom || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingBottom')}/>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="左边距" type="arrow-left"/>}
                  >
                    <InputNumber defaultValue={card.paddingLeft || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingLeft')}/>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="右边距" type="arrow-right"/>}
                  >
                    <InputNumber defaultValue={card.paddingRight || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingRight')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}

 src/menu/stylecontroller/index.scss

@@ -1,7 +1,7 @@
.mob-controller {
.menu-style-controller {
  width: 100%;
  height: 100%;
  overflow: hidden;

  >.ant-form >.ant-collapse {
    border: 0;
    background: #262E3F;
@@ -77,6 +77,9 @@
                }
              }
              .ant-radio-group {
                span {
                  color: rgba(255, 255, 255, 0.65);
                }
                .ant-radio-button-wrapper {
                  background: transparent;
                  color: rgba(255, 255, 255, 0.65);
@@ -144,4 +147,61 @@
  .ant-popover-arrow {
    display: none;
  }
}

.menu-style-drawer {
  .ant-drawer-body {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
  .ant-drawer-body::-webkit-scrollbar {
    width: 7px;
  }
  .ant-drawer-body::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
    background: rgba(0, 0, 0, 0.13);
  }
  .ant-drawer-body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
  }
  .ant-drawer-wrapper-body {
    background: #262E3F;
    .ant-drawer-header {
      background: #001529;
      padding: 0px;
      height: 48px;
      border-radius: 0;
      border: 0;
      .header-logo {
        width: 180px;
        line-height: 48px;
        height: 48px;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
      .ant-drawer-close {
        height: 48px;
        width: 48px;
        line-height: 48px;
        color: rgba(255, 255, 255, 0.65);
      }
    }
  }
  .ant-drawer-body {
    padding: 0;
    .color-sketch-block {
      .color-sketch-block-inner {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
      }
      .color-sketch-value {
        color: rgba(255, 255, 255, 0.65);
      }
    }
  }
}

 src/mob/colorsketch/index.jsx

@@ -6,36 +6,42 @@

import './index.scss'

const presetColors = [
  '#f5222d', '#fa541c', '#fa8c16', '#faad14', '#fadb14', '#a0d911', '#52c41a', '#13c2c2', '#1890ff', '#2f54eb', '#722ed1',
  '#eb2f96', '#595959', '#ffa39e', '#ffbb96', '#ffd591', '#ffe58f', '#fffb8f', '#eaff8f', '#b7eb8f', '#87e8de', '#91d5ff',
  '#adc6ff', '#d3adf7', '#ffadd2', '#d9d9d9', '#000000', '#ffffff', 'transparent'
]

class ColorSketch extends Component {
  static propTpyes = {
    defaultValue: PropTypes.any,
    value: PropTypes.any,
    onChange: PropTypes.func
  }
  state = {
    color: this.props.value,
    color: this.props.defaultValue || this.props.value,
  }

  handleChange = (color) => {
    let _color = `rgba(${ color.rgb.r }, ${ color.rgb.g }, ${ color.rgb.b }, ${ color.rgb.a })`
    
    this.setState({ color: _color }, () => {
      this.props.onChange(_color)
      this.props.onChange && this.props.onChange(_color)
    })
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.state.color) {
    if (nextProps.value && nextProps.value !== this.state.color) {
      this.setState({ color: nextProps.value })
    }
  }

  render() {
    const { color } = this.state

    return (
      <div className="color-sketch-block">
        <Popover content={
          <SketchPicker color={ color } onChange={ this.handleChange } />
          <SketchPicker color={ color } presetColors={presetColors} onChange={ this.handleChange } />
        } overlayClassName="color-sketch-popover" placement="bottomRight" title="" trigger="click">
          <div className="color-sketch-block-inner" style={ {background: color} }></div>
        </Popover>

 src/mob/colorsketch/index.scss

@@ -28,7 +28,7 @@
  .ant-popover-inner-content {
    padding: 0;
    .sketch-picker {
      width: 210px!important;
      width: 250px!important;
    }
  }
}

 src/mob/controller/index.jsx

@@ -367,7 +367,7 @@
                  label={<Icon title="背景颜色" type="bg-colors" />}
                  labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                >
                  <ColorSketch color={card.backgroundColor || '#ffffff'} changeColor={this.changeBackgroundColor} />
                  <ColorSketch value={card.backgroundColor || '#ffffff'} onChange={this.changeBackgroundColor} />
                  <Input value={backgroundColor} onChange={this.changeBackgroundColorInput} />
                </Form.Item>
              </Col>