2024-05-07

king

2024-05-07 2aa5ab63b4bbce5c36dbb3511b205b3b5f6af9bd

 src/menu/stylecontroller/index.jsx

@@ -1,7 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Collapse, Form, Col, InputNumber, Select, Radio, Drawer, Button } from 'antd'
import { Collapse, Form, Col, InputNumber, Input, Select, Radio, Drawer, Button, message, Checkbox } from 'antd'
import {
  ColumnHeightOutlined,
  FontSizeOutlined,
@@ -30,32 +29,36 @@
  ArrowRightOutlined,
  SwapOutlined,
  EnterOutlined,
  DragOutlined,
  EyeOutlined
} from '@ant-design/icons'

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'

const { Panel } = Collapse
const { Option } = Select
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const PasteBoard = asyncComponent(() => import('@/components/pasteboard'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))

class MobController extends Component {
  static propTpyes = {
    editElem: PropTypes.any,
    updateStyle: PropTypes.func,
  }

  state = {
    card: null,
    fonts: null,
    comIds: [],
    backgroundImage: '',
    options: [],
    borposition: 'outer'
    borposition: 'outer',
    type: '',
    logo: sessionStorage.getItem('CloudLogo') || MainLogo
  }

  callback = null
  timer = null

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
@@ -75,7 +78,7 @@
    MKEmitter.removeListener('changeStyle', this.initStyle)
  }

  initStyle = (comIds, options, style = {}) => {
  initStyle = (options, style = {}, callback, type) => {
    let backgroundImage = ''
    if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) {
      backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
@@ -95,13 +98,31 @@
      }
    }

    this.callback = callback
    this.timer = null

    let card = fromJS(style).toJS()
    let borposition = 'outer'

    if (!card.borderWidth) {
      if (card.borderLeftWidth) {
        borposition = 'left'
      } else if (card.borderRightWidth) {
        borposition = 'right'
      } else if (card.borderTopWidth) {
        borposition = 'top'
      } else if (card.borderBottomWidth) {
        borposition = 'bottom'
      }
    }

    this.setState({
      visible: true,
      type: type || '',
      fonts: fonts,
      comIds: comIds,
      card: fromJS(style).toJS(),
      card: card,
      options: options,
      borposition: 'outer',
      borposition: borposition,
      backgroundImage
    })
    window.GLOB.styling = true
@@ -110,56 +131,87 @@
  onCloseDrawer = () => {
    let card = fromJS(this.state.card).toJS()

    let check = false
    if (card.borderWidth === '0px') {
    if (card.borderWidth === '0px' || !card.borderWidth) {
      delete card.borderWidth
      delete card.borderColor
      check = true
    } else if (card.borderLeftWidth === '0px') {
      delete card.borderLeftWidth
      delete card.borderLeftColor
      check = true
    } else if (card.borderRightWidth === '0px') {
      delete card.borderRightWidth
      delete card.borderRightColor
      check = true
    } else if (card.borderTopWidth === '0px') {
      delete card.borderTopWidth
      delete card.borderTopColor
      check = true
    } else if (card.borderBottomWidth === '0px') {
      delete card.borderBottomWidth
      delete card.borderBottomColor
      check = true
    }

    if (check) {
      MKEmitter.emit('submitStyle', this.state.comIds, card)
    if (card.borderLeftWidth === '0px' || !card.borderLeftWidth) {
      delete card.borderLeftWidth
      delete card.borderLeftColor
    }
    if (card.borderRightWidth === '0px' || !card.borderRightWidth) {
      delete card.borderRightWidth
      delete card.borderRightColor
    }
    if (card.borderTopWidth === '0px' || !card.borderTopWidth) {
      delete card.borderTopWidth
      delete card.borderTopColor
    }
    if (card.borderBottomWidth === '0px' || !card.borderBottomWidth) {
      delete card.borderBottomWidth
      delete card.borderBottomColor
    }

    if (/0px 0px 0px | transparent/.test(card.boxShadow)) {
      delete card.hShadow
      delete card.vShadow
      delete card.shadowBlur
      delete card.shadowColor
      delete card.boxShadow
    }

    if (!is(fromJS(this.state.card), fromJS(card))) {
      this.callback && this.callback(card)
    }

    this.setState({
      visible: false,
      comIds: [],
      card: null,
      options: [],
      backgroundImage: ''
    })
    window.GLOB.styling = false
    this.callback = null
  }

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

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

    Object.keys(style).forEach(key => {
      if (!_style[key] && _style[key] !== 0) {
        delete _style[key]
      }
    })

    if (_style.position === 'relative') {
      _style.zIndex = 1
    } else if (_style.position === 'absolute') {
      _style.zIndex = 2
    } else if (_style.position === 'fixed') {
      _style.zIndex = 3
    } else {
      delete _style.zIndex
    }

    this.setState({
      card: _style,
    })

    MKEmitter.emit('submitStyle', comIds, _style)
    this.timer && clearTimeout(this.timer)

    if (delay) {
      this.timer = setTimeout(() => {
        this.callback && this.callback(_style)
      }, 300)
    } else {
      this.callback && this.callback(_style)
    }
  }

  /**
@@ -176,7 +228,7 @@
      value = 300
    }

    this.updateStyle({fontSize: `${value}px`})
    this.updateStyle({fontSize: `${value}px`}, true)
  }

  /**
@@ -187,7 +239,7 @@

    if (isNaN(value) || value < 1 || value > 10) return

    this.updateStyle({lineHeight: value})
    this.updateStyle({lineHeight: value}, true)
  }

  /**
@@ -198,7 +250,7 @@

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

    this.updateStyle({letterSpacing: `${value}px`})
    this.updateStyle({letterSpacing: `${value}px`}, true)
  }

  /**
@@ -209,77 +261,30 @@

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

    this.updateStyle({textIndent: `${value}px`})
    this.updateStyle({textIndent: `${value}px`}, true)
  }

  /**
   * @description 修改字体粗细
   */
  boldChange = (val) => {
    this.updateStyle({fontWeight: val})
  }
  changeBackground = (val) => {
    const { card } = this.state

  /**
   * @description 自动换行
   */
  wordBreakChange = (val) => {
    this.updateStyle({wordBreak: val})
  }
    let _style = { ...card }

  /**
   * @description 修改字体颜色 ，颜色控件
   */
  changeFontColor = (val) => {
    this.updateStyle({color: val})
  }
    _style.background = val

  /**
   * @description 字体对齐
   */
  changeTextAlign = (e) => {
    this.updateStyle({textAlign: e.target.value})
  }
    delete _style.backgroundColor
    delete _style.backgroundImage

  /**
   * @description 字体样式，倾斜
   */
  changeFontStyle = (e) => {
    this.updateStyle({fontStyle: e.target.value})
  }
    if (!val) {
      delete _style.background
    }

  /**
   * @description 字体装饰，下划线、贯穿线、上划线
   */
  changeTextDecoration = (e) => {
    this.updateStyle({textDecoration: e.target.value})
  }
    this.setState({
      card: _style,
    })

  /**
   * @description 修改背景颜色 ，颜色控件
   */
  changeBackgroundColor = (val) => {
    this.updateStyle({backgroundColor: val})
  }

  /**
   * @description 修改背景大小
   */
  changeBackgroundSize = (val) => {
    this.updateStyle({backgroundSize: val})
  }

  /**
   * @description 修改背景位置
   */
  changeBackgroundPositon= (val) => {
    this.updateStyle({backgroundPositon: val})
  }

  /**
   * @description 修改背景重复设置
   */
  changeBackgroundRepeat = (val) => {
    this.updateStyle({backgroundRepeat: val})
    if (!val || /(^linear-gradient|^radial-gradient)\(.*\)$/.test(val)) {
      this.callback && this.callback(_style)
    }
  }

  /**
@@ -288,7 +293,7 @@
  changeShadowColor = (val) => {
    const { card } = this.state

    let boxShadow = `${card.hShadow || '0px'} ${card.vShadow || '0px'} ${card.shadowBlur || '0px'} ${val}`
    let boxShadow = `${card.hShadow || '0px'} ${card.vShadow || '0px'} ${card.shadowBlur || '0px'} ${val || 'transparent'}`

    this.updateStyle({shadowColor: val, boxShadow})
  }
@@ -394,30 +399,177 @@
    this.updateStyle(_style)
  }

  changeWidth = (val) => {
    let _val = val
    if (_val === '0px') {
      _val = 'auto'
    }

    this.updateStyle({width: _val})
  }

  changeHeight = (val) => {
    let _val = val
    if (_val === '0px') {
      _val = 'auto'
    }

    this.updateStyle({height: _val})
  }

  changeNormalStyle = (val, type) => {
    this.updateStyle({[type]: val})
  }

  copy = () => {
    const { card, options } = this.state

    let msg = { copyType: 'style' }

    msg.data = card
    msg.options = options

    try {
      msg = window.btoa(window.encodeURIComponent(JSON.stringify(msg)))
    } catch (e) {
      console.warn('Stringify Failure')
      msg = ''
    }

    if (msg) {
      let oInput = document.createElement('input')
      oInput.value = msg
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      document.body.removeChild(oInput)
      message.success('复制成功。')
    }
  }

  paste = (res, callback) => {
    const { options } = this.state

    if (res.copyType !== 'style') {
      message.warning('配置信息格式错误！', 5)
      return
    }

    let style = res.data || {}

    if (JSON.stringify(res.options) !== JSON.stringify(options)) {
      res.options.forEach(n => {
        if (options.includes(n)) return

        if (n === 'width') {
          delete style.width
        } else if (n === 'height') {
          delete style.height
        } else if (n === 'font') {
          if (options.includes('font1')) {
            ['lineHeight', 'letterSpacing', 'fontStyle', 'textAlign', 'textDecoration'].forEach(m => {
              delete style[m]
            })
          } else if (options.includes('font2')) {

          } else {
            ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration'].forEach(m => {
              delete style[m]
            })
          }
        } else if (n === 'font1') {
          if (options.includes('font') || options.includes('font2')) {

          } else {
            ['fontSize', 'fontWeight', 'color'].forEach(m => {
              delete style[m]
            })
          }
        } else if (n === 'font2') {
          if (options.includes('font')) {
            ['textIndent', 'wordBreak'].forEach(m => {
              delete style[m]
            })
          } else if (options.includes('font1')) {
            ['lineHeight', 'letterSpacing', 'fontStyle', 'textAlign', 'textDecoration', 'textIndent', 'wordBreak'].forEach(m => {
              delete style[m]
            })
          } else {
            ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration', 'textIndent', 'wordBreak'].forEach(m => {
              delete style[m]
            })
          }
        } else if (n === 'background') {
          if (!options.includes('backgroundColor')) {
            delete style.backgroundColor
          }
          delete style.backgroundImage
          delete style.backgroundSize
          delete style.backgroundRepeat
          delete style.backgroundPosition
        } else if (n === 'backgroundColor') {
          if (!options.includes('background')) {
            delete style.backgroundColor
          }
        } else if (n === 'border') {
          Object.keys(style).forEach(key => {
            if (!/border/.test(key)) return
            delete style[key]
          })
        } else if (n === 'shadow') {
          delete style.boxShadow
          delete style.hShadow
          delete style.vShadow
          delete style.shadowBlur
          delete style.shadowColor
        } else if (n === 'margin') {
          delete style.marginTop
          delete style.marginBottom
          delete style.marginLeft
          delete style.marginRight
        } else if (n === 'padding') {
          delete style.paddingTop
          delete style.paddingBottom
          delete style.paddingLeft
          delete style.paddingRight
        } else if (n === 'float') {
          delete style.float
        } else if (n === 'minHeight') {
          delete style.minHeight
        } else if (n === 'clear') {
          delete style.clear
        } else if (n === 'display') {
          delete style.display
        } else if (n === 'position') {
          delete style.position
          delete style.top
          delete style.bottom
          delete style.left
          delete style.right
        } else if (n === 'transform') {
          delete style.transform
        } else if (n === 'overflow') {
          delete style.overflow
        }
      })
    }

    let backgroundImage = ''
    if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) {
      backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
    }

    let borposition = 'outer'

    if (!style.borderWidth) {
      if (style.borderLeftWidth) {
        borposition = 'left'
      } else if (style.borderRightWidth) {
        borposition = 'right'
      } else if (style.borderTopWidth) {
        borposition = 'top'
      } else if (style.borderBottomWidth) {
        borposition = 'bottom'
      }
    }

    this.setState({
      card: style,
      borposition,
      backgroundImage
    })

    this.callback && this.callback(style)

    callback()

    message.success('粘贴成功。')
  }

  render () {
    const { card, options, backgroundImage, borposition, fonts } = this.state
    const { card, options, backgroundImage, borposition, fonts, type, logo } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -433,7 +585,7 @@
      <Drawer
        title={
          <div className="header-logo">
            <img src={window.GLOB.mainlogo} alt=""/>
            <img src={logo} alt=""/>
          </div>
        }
        placement="left"
@@ -445,7 +597,7 @@
        maskStyle={{opacity: 0.1}}
        visible={this.state.visible}
      >
        <div className="menu-style-controller">
        <div className={'menu-style-controller ' + (type || '')}>
          <Form {...formItemLayout}>
            {card ? <Collapse expandIconPosition="right" destroyInactivePanel={true} defaultActiveKey={options[0]}>
              {options.includes('width') ? <Panel header="宽度" key="width">
@@ -455,7 +607,7 @@
                    label={<ColumnWidthOutlined title="宽度"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%']} onChange={this.changeWidth}/>
                    <StyleInput clear={true} defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%', 'auto']} onChange={(val) => this.changeNormalStyle(val, 'width')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
@@ -466,7 +618,7 @@
                    label={<ColumnHeightOutlined title="高度"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.height || ''} options={['px', 'vh', 'vw']} onChange={this.changeHeight}/>
                    <StyleInput clear={true} defaultValue={card.height || ''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'height')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
@@ -478,7 +630,7 @@
                </Col> : null}
                {fonts.includes('fontWeight') ? <Col span={12}>
                  <Form.Item colon={false} label={<BoldOutlined title="字体粗细"/>}>
                    <Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}>
                    <Select defaultValue={card.fontWeight || 'normal'} onChange={(val) => this.changeNormalStyle(val, 'fontWeight')}>
                      <Option value="normal">normal</Option>
                      <Option value="bold">bold</Option>
                      <Option value="bolder">bolder</Option>
@@ -512,7 +664,7 @@
                </Col> : null}
                {fonts.includes('wordBreak') ? <Col span={12}>
                  <Form.Item colon={false} label={<EnterOutlined title="自动换行"/>}>
                    <Select defaultValue={card.wordBreak || 'normal'} onChange={this.wordBreakChange}>
                    <Select defaultValue={card.wordBreak || 'normal'} onChange={(val) => this.changeNormalStyle(val, 'wordBreak')}>
                      <Option value="normal">normal</Option>
                      <Option value="break-all">break-all</Option>
                    </Select>
@@ -524,7 +676,14 @@
                    label={<FontColorsOutlined title="字体颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} />
                    <ColorSketch value={card.color || ''} onChange={(val) => this.changeNormalStyle(val, 'color')} />
                  </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={(val) => this.changeNormalStyle(val, 'color')} />
                  </Form.Item>
                </Col> : null}
                {fonts.includes('fontStyle') ? <Col span={24}>
@@ -533,7 +692,7 @@
                    label={' '}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group defaultValue={card.fontStyle || 'normal'} onChange={this.changeFontStyle}>
                    <Radio.Group defaultValue={card.fontStyle || 'normal'} onChange={(e) => this.changeNormalStyle(e.target.value, 'fontStyle')}>
                      <Radio.Button value="normal"><span title="标准">N</span></Radio.Button>
                      <Radio.Button value="italic"><ItalicOutlined title="斜体"/></Radio.Button>
                      <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="倾斜">B</span></Radio.Button>
@@ -546,7 +705,7 @@
                    label={' '}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group className="text-align" defaultValue={card.textAlign || 'left'} onChange={this.changeTextAlign}>
                    <Radio.Group className="text-align" defaultValue={card.textAlign || 'left'} onChange={(e) => this.changeNormalStyle(e.target.value, 'textAlign')}>
                      <Radio.Button value="left"><AlignLeftOutlined title="左对齐"/></Radio.Button>
                      <Radio.Button value="center"><AlignCenterOutlined title="居中对齐"/></Radio.Button>
                      <Radio.Button value="right"><AlignRightOutlined title="右对齐"/></Radio.Button>
@@ -559,7 +718,7 @@
                    label={' '}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group className="text-decoration" defaultValue={card.textDecoration || 'none'} onChange={this.changeTextDecoration}>
                    <Radio.Group className="text-decoration" defaultValue={card.textDecoration || 'none'} onChange={(e) => this.changeNormalStyle(e.target.value, 'textDecoration')}>
                      <Radio.Button value="none"><span title="标准">N</span></Radio.Button>
                      <Radio.Button value="underline"><UnderlineOutlined title="下划线"/></Radio.Button>
                      <Radio.Button value="line-through"><StrikethroughOutlined title="中划线"/></Radio.Button>
@@ -567,18 +726,53 @@
                    </Radio.Group>
                  </Form.Item>
                </Col> : null}
                {options.includes('fontFamily') ? <Col span={24}>
                  <Form.Item
                    colon={false}
                    label=" "
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Checkbox.Group options={[
                      { label: '微软雅黑', value: 'Microsoft YaHei' },
                      { label: '宋体', value: 'Simsun' },
                      { label: '黑体', value: 'Simhei' },
                      { label: '仿宋', value: 'FangSong' },
                      { label: '楷体', value: 'KaiTi' },
                      // { label: 'Helvetica', value: 'Helvetica' },
                      // { label: 'Arial', value: 'Arial' },
                      // { label: 'Verdana', value: 'Verdana' },
                      // { label: 'Georgia', value: 'Georgia' },
                    ]} defaultValue={card.fontFamily} onChange={(val) => this.changeNormalStyle(val, 'fontFamily')} />
                  </Form.Item>
                </Col> : null}
              </Panel> : null}
              {options.includes('background') || options.includes('backgroundColor') ? <Panel header="背景" key="background">
                <Col span={24}>
                <Col span={24} className="bg-color-panel">
                  <Form.Item
                    colon={false}
                    label={<BgColorsOutlined title="背景颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={card.backgroundColor || '#ffffff'} onChange={this.changeBackgroundColor} />
                    <ColorSketch allowClear={true} value={card.backgroundColor || ''} onChange={(val) => this.changeNormalStyle(val, 'backgroundColor')} />
                  </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={(val) => this.changeNormalStyle(val, 'backgroundColor')} />
                  </Form.Item>
                </Col>
                {!options.includes('backgroundColor') ? <Col span={24}>
                {window.develop === true ? <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<BgColorsOutlined title="背景颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Input value={card.background || ''} onChange={(e) => this.changeBackground(e.target.value)} />
                  </Form.Item>
                </Col> : null}
                {!options.includes('backgroundColor') ? <Col span={24} className="bg-image-panel">
                  <Form.Item
                    colon={false}
                    label={<PictureOutlined title="背景图片"/>}
@@ -593,7 +787,7 @@
                    label="比例"
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Select defaultValue={card.backgroundSize || 'cover'} onChange={this.changeBackgroundSize}>
                    <Select defaultValue={card.backgroundSize || 'cover'} onChange={(val) => this.changeNormalStyle(val, 'backgroundSize')}>
                      <Option value="100%">100%</Option>
                      <Option value="100% 100%">100% 100%</Option>
                      <Option value="auto 100%">auto 100%</Option>
@@ -610,7 +804,7 @@
                    label="重复"
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Select defaultValue={card.backgroundRepeat || 'no-repeat'} onChange={this.changeBackgroundRepeat}>
                    <Select defaultValue={card.backgroundRepeat || 'no-repeat'} onChange={(val) => this.changeNormalStyle(val, 'backgroundRepeat')}>
                      <Option value="repeat">repeat</Option>
                      <Option value="no-repeat">no-repeat</Option>
                      <Option value="repeat-x">repeat-x</Option>
@@ -624,10 +818,16 @@
                    label="位置"
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Select defaultValue={card.backgroundPositon || 'center'} onChange={this.changeBackgroundPositon}>
                    <Select defaultValue={card.backgroundPosition || 'center'} onChange={(val) => this.changeNormalStyle(val, 'backgroundPosition')}>
                      <Option value="center">center</Option>
                      <Option value="top">top</Option>
                      <Option value="bottom">bottom</Option>
                      <Option value="center top">center top</Option>
                      <Option value="center bottom">center bottom</Option>
                      <Option value="left top">left top</Option>
                      <Option value="left center">left center</Option>
                      <Option value="left bottom">left bottom</Option>
                      <Option value="right top">right top</Option>
                      <Option value="right center">right center</Option>
                      <Option value="right bottom">right bottom</Option>
                    </Select>
                  </Form.Item>
                </Col> : null}
@@ -639,7 +839,7 @@
                    label={<BorderOutlined title="边框位置"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group className="border-position" defaultValue={'outer'} onChange={(e) => this.setState({borposition: e.target.value})}>
                    <Radio.Group className="border-position" defaultValue={borposition} onChange={(e) => this.setState({borposition: e.target.value})}>
                      <Radio value="outer"><BorderOuterOutlined title="外边框"/></Radio>
                      <Radio value="left"><BorderLeftOutlined title="左边框"/></Radio>
                      <Radio value="right"><BorderRightOutlined title="右边框"/></Radio>
@@ -692,11 +892,11 @@
                    label={<ColumnWidthOutlined title="边框宽度"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    {borposition === 'outer' ? <StyleInput defaultValue={card.borderWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'left' ? <StyleInput defaultValue={card.borderLeftWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'right' ? <StyleInput defaultValue={card.borderRightWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'top' ? <StyleInput defaultValue={card.borderTopWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'bottom' ? <StyleInput defaultValue={card.borderBottomWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'outer' ? <StyleInput defaultValue={card.borderWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'left' ? <StyleInput defaultValue={card.borderLeftWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'right' ? <StyleInput defaultValue={card.borderRightWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'top' ? <StyleInput defaultValue={card.borderTopWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'bottom' ? <StyleInput defaultValue={card.borderBottomWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                  </Form.Item>
                </Col>
                <Col span={24}>
@@ -705,11 +905,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 allowClear={true} value={card.borderColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'left' ? <ColorSketch allowClear={true} value={card.borderLeftColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'right' ? <ColorSketch allowClear={true} value={card.borderRightColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'top' ? <ColorSketch allowClear={true} value={card.borderTopColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'bottom' ? <ColorSketch allowClear={true} value={card.borderBottomColor || ''} 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}>
@@ -718,7 +925,7 @@
                    label={<RadiusSettingOutlined title="圆角"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.borderRadius || '0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/>
                    <StyleInput clear={true} defaultValue={card.borderRadius || ''} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
@@ -729,7 +936,14 @@
                    label={<BgColorsOutlined title="阴影颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={card.shadowColor || 'transparent'} onChange={this.changeShadowColor} />
                    <ColorSketch allowClear={true} value={card.shadowColor || ''} 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}>
@@ -767,7 +981,7 @@
                    label={<ArrowUpOutlined title="上边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.marginTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/>
                    <StyleInput clear={true} defaultValue={card.marginTop || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
@@ -776,7 +990,7 @@
                    label={<ArrowDownOutlined title="下边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.marginBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/>
                    <StyleInput clear={true} defaultValue={card.marginBottom || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
@@ -785,7 +999,7 @@
                    label={<ArrowLeftOutlined title="左边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.marginLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/>
                    <StyleInput clear={true} defaultValue={card.marginLeft || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
@@ -794,7 +1008,7 @@
                    label={<ArrowRightOutlined title="右边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.marginRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/>
                    <StyleInput clear={true} defaultValue={card.marginRight || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
@@ -805,7 +1019,7 @@
                    label={<ArrowUpOutlined title="上边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.paddingTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/>
                    <StyleInput clear={true} defaultValue={card.paddingTop || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
@@ -814,7 +1028,7 @@
                    label={<ArrowDownOutlined title="下边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.paddingBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/>
                    <StyleInput clear={true} defaultValue={card.paddingBottom || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
@@ -823,7 +1037,7 @@
                    label={<ArrowLeftOutlined title="左边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.paddingLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/>
                    <StyleInput clear={true} defaultValue={card.paddingLeft || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
@@ -832,7 +1046,7 @@
                    label={<ArrowRightOutlined title="右边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.paddingRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/>
                    <StyleInput clear={true} defaultValue={card.paddingRight || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
@@ -858,14 +1072,136 @@
                    label={<ColumnHeightOutlined title="最小高度"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.minHeight || '28px'} options={['px']} onChange={(val) => this.changeNormalStyle(val, 'minHeight')}/>
                    <StyleInput clear={true} defaultValue={card.minHeight || ''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'minHeight')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('clear') ? <Panel header="浮动" key="clear">
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<SwapOutlined title="浮动"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.clear || 'none'} onChange={(e) => this.changeNormalStyle(e.target.value, 'clear')}>
                      <Radio value="none">左浮动</Radio>
                      <Radio value="left">不浮动</Radio>
                      <Radio value="right">右浮动</Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('display') ? <Panel header="显示" key="display">
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<SwapOutlined title="显示"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.display || 'block'} onChange={(e) => this.changeNormalStyle(e.target.value, 'display')}>
                      <Radio value="block">块级元素</Radio>
                      <Radio value="inline-block">行内块元素</Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('overflow') ? <Panel header="溢出" key="overflow">
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<EyeOutlined title="溢出"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.overflow || 'hidden'} onChange={(e) => this.changeNormalStyle(e.target.value, 'overflow')}>
                      <Radio value="hidden">隐藏</Radio>
                      <Radio value="visible">显示</Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('position') ? <Panel header="定位" key="position">
                <div style={{paddingLeft: '35px', fontSize: '12px'}}>注：定位效果请在运行环境中查看。</div>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<SwapOutlined title="定位"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
                  >
                    <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.position || 'unset'} onChange={(e) => this.changeNormalStyle(e.target.value, 'position')}>
                      <Radio value="unset">无</Radio>
                      <Radio value="relative">相对</Radio>
                      <Radio value="absolute">绝对</Radio>
                      <Radio value="fixed">固定</Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<ArrowUpOutlined title="上"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
                  >
                    <StyleInput clear={true} defaultValue={card.top || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'top')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<ArrowDownOutlined title="下"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
                  >
                    <StyleInput clear={true} defaultValue={card.bottom || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'bottom')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<ArrowLeftOutlined title="左"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
                  >
                    <StyleInput clear={true} defaultValue={card.left || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'left')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<ArrowRightOutlined title="右"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
                  >
                    <StyleInput clear={true} defaultValue={card.right || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'right')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('transform') ? <Panel header="位置变换" key="transform">
                <div style={{paddingLeft: '50px', fontSize: '12px'}}>注：变换效果请在运行环境中查看。</div>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<DragOutlined title="变换"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Select defaultValue={card.transform || ''} onChange={(val) => this.changeNormalStyle(val, 'transform')}>
                      <Option value="">无</Option>
                      <Option value="translateY(-50%)">上移50%</Option>
                      <Option value="translateY(50%)">下移50%</Option>
                      <Option value="translateX(-50%)">左移50%</Option>
                      <Option value="translateX(50%)">右移50%</Option>
                      <Option value="translate(-50%, -50%)">左上移50%</Option>
                      <Option value="translate(-50%, 50%)">左下移50%</Option>
                      <Option value="translate(50%, -50%)">右上移50%</Option>
                      <Option value="translate(50%, 50%)">右下移50%</Option>
                    </Select>
                  </Form.Item>
                </Col>
              </Panel> : null}
            </Collapse> : null}
          </Form>
          <div style={{textAlign: 'right'}}>
            <Button style={{margin: '30px 10px 30px 0px'}} onClick={this.onCloseDrawer}>关闭</Button>
          <div style={{textAlign: 'right', lineHeight: '60px', marginBottom: '30px'}}>
            <div style={{float: 'left'}}>
              <Button onClick={() => this.copy()} className="mk-border-green" style={{marginRight: '10px'}}>复制</Button>
              <PasteBoard getPasteValue={this.paste}><Button style={{borderColor: 'rgb(64, 169, 255)', color: 'rgb(64, 169, 255)'}}>粘贴</Button></PasteBoard>
            </div>
            <Button style={{marginRight: '10px'}} onClick={this.onCloseDrawer}>关闭</Button>
          </div>
        </div>
      </Drawer>