2023-06-21

king

2023-06-21 59271e4c863abe2fb4562e30549e1c5e3acdde8f

2023-06-21

 src/menu/components/card/cardcellcomponent/dragaction/index.scss

@@ -213,6 +213,7 @@
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: unset!important;
  }
  .sort-wrap {
    position: relative;

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

@@ -171,6 +171,10 @@
      options = ['padding', 'margin']
    }

    if (element.eleType !== 'button') {
      options.push('position')
    }

    options.push('clear')

    this.setState({

 src/menu/stylecontroller/index.jsx

@@ -1,5 +1,4 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Collapse, Form, Col, InputNumber, Input, Select, Radio, Drawer, Button, message } from 'antd'
import {
@@ -46,11 +45,6 @@
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,
@@ -168,7 +162,7 @@
    this.callback = null
  }

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

    let _style = {
@@ -176,8 +170,16 @@
      ...style
    }

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

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

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

  changeBackground = (val) => {
@@ -443,11 +445,11 @@
  }

  changeWidth = (val) => {
    this.updateStyle({width: val === '0px' ? '' : val}, 'width')
    this.updateStyle({width: val})
  }

  changeHeight = (val) => {
    this.updateStyle({height: val === '0px' ? '' : val}, 'height')
    this.updateStyle({height: val})
  }

  changeNormalStyle = (val, type) => {
@@ -564,7 +566,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', '%', 'auto']} onChange={this.changeWidth}/>
                    <StyleInput clear={true} defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%', 'auto']} onChange={this.changeWidth}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
@@ -575,7 +577,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={this.changeHeight}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
@@ -863,7 +865,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}
@@ -919,7 +921,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}>
@@ -928,7 +930,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}>
@@ -937,7 +939,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}>
@@ -946,7 +948,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}
@@ -957,7 +959,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}>
@@ -966,7 +968,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}>
@@ -975,7 +977,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}>
@@ -984,7 +986,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}
@@ -1010,7 +1012,7 @@
                    label={<ColumnHeightOutlined title="最小高度"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.minHeight || ''} options={['px', 'vh', 'vw']} 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}
@@ -1042,6 +1044,57 @@
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('position') ? <Panel header="定位" key="position">
                <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.position || 'unset'} onChange={(e) => this.changeNormalStyle(e.target.value, 'position')}>
                      <Radio value="unset">无</Radio>
                      <Radio value="relative">相对定位</Radio>
                      <Radio value="absolute">绝对定位</Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<ArrowUpOutlined title="上"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <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: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <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: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <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: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput clear={true} defaultValue={card.right || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'right')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
            </Collapse> : null}
          </Form>
          <div style={{textAlign: 'right', lineHeight: '60px', marginBottom: '30px'}}>

 src/menu/stylecontroller/styleInput/index.jsx

@@ -105,6 +105,7 @@
  }

  changeValue = (e) => {
    const { clear } = this.props
    const { unit } = this.state
    let val = e.target.value

@@ -126,7 +127,7 @@

    if (this.props.onChange) {
      if (!_val) {
        this.props.onChange('0px')
        this.props.onChange(clear ? '' : '0px')
      } else {
        this.props.onChange(`${_val}${unit}`)
      }