2023-03-11

king

2023-03-11 34e7681fd12b1c4e4994d3bea1a553870e10bc50

 src/menu/stylecontroller/index.jsx

@@ -35,6 +35,7 @@
import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
import StyleInput from './styleInput'
import SysColorSketch from './syscolorsketch'
import MainLogo from '@/assets/img/main-logo.png'
import './index.scss'

@@ -54,7 +55,8 @@
    fonts: null,
    backgroundImage: '',
    options: [],
    borposition: 'outer'
    borposition: 'outer',
    type: ''
  }

  callback = null
@@ -77,7 +79,7 @@
    MKEmitter.removeListener('changeStyle', this.initStyle)
  }

  initStyle = (options, style = {}, callback) => {
  initStyle = (options, style = {}, callback, type) => {
    let backgroundImage = ''
    if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) {
      backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
@@ -115,6 +117,7 @@

    this.setState({
      visible: true,
      type: type || '',
      fonts: fonts,
      card: card,
      options: options,
@@ -164,12 +167,16 @@
    this.callback = null
  }

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

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

    if (prop && !_style[prop]) {
      delete _style[prop]
    }

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

  changeBackground = (val) => {
@@ -435,21 +442,11 @@
  }

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

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

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

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

  changeNormalStyle = (val, type) => {
@@ -457,7 +454,7 @@
  }

  render () {
    const { card, options, backgroundImage, borposition, fonts } = this.state
    const { card, options, backgroundImage, borposition, fonts, type } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -485,7 +482,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">
@@ -495,7 +492,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 defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%', 'auto']} onChange={this.changeWidth}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
@@ -566,6 +563,13 @@
                  >
                    <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} />
                  </Form.Item>
                  <Form.Item
                    colon={false}
                    label={<BgColorsOutlined title="系统色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <SysColorSketch onChange={this.changeFontColor} />
                  </Form.Item>
                </Col> : null}
                {fonts.includes('fontStyle') ? <Col span={24}>
                  <Form.Item
@@ -609,13 +613,20 @@
                </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={this.changeBackgroundColor} />
                  </Form.Item>
                  <Form.Item
                    colon={false}
                    label={<BgColorsOutlined title="系统色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <SysColorSketch onChange={this.changeBackgroundColor} />
                  </Form.Item>
                </Col>
                {window.develop === true ? <Col span={24}>
@@ -627,7 +638,7 @@
                    <Input value={card.background || ''} onChange={(e) => this.changeBackground(e.target.value)} />
                  </Form.Item>
                </Col> : null}
                {!options.includes('backgroundColor') ? <Col span={24}>
                {!options.includes('backgroundColor') ? <Col span={24} className="bg-image-panel">
                  <Form.Item
                    colon={false}
                    label={<PictureOutlined title="背景图片"/>}
@@ -675,8 +686,14 @@
                  >
                    <Select defaultValue={card.backgroundPosition || 'center'} onChange={this.changeBackgroundPositon}>
                      <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}
@@ -754,11 +771,18 @@
                    label={<BgColorsOutlined title="边框颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    {borposition === 'outer' ? <ColorSketch defaultValue={card.borderColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'left' ? <ColorSketch defaultValue={card.borderLeftColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'right' ? <ColorSketch defaultValue={card.borderRightColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'top' ? <ColorSketch defaultValue={card.borderTopColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'bottom' ? <ColorSketch defaultValue={card.borderBottomColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'outer' ? <ColorSketch value={card.borderColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'left' ? <ColorSketch value={card.borderLeftColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'right' ? <ColorSketch value={card.borderRightColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'top' ? <ColorSketch value={card.borderTopColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'bottom' ? <ColorSketch value={card.borderBottomColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                  </Form.Item>
                  <Form.Item
                    colon={false}
                    label={<BgColorsOutlined title="系统色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <SysColorSketch onChange={this.changeBorderColor} />
                  </Form.Item>
                </Col>
                <Col span={24}>
@@ -779,6 +803,13 @@
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={card.shadowColor || 'transparent'} onChange={this.changeShadowColor} />
                  </Form.Item>
                  <Form.Item
                    colon={false}
                    label={<BgColorsOutlined title="系统色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <SysColorSketch onChange={this.changeShadowColor} />
                  </Form.Item>
                </Col>
                <Col span={24}>
@@ -907,7 +938,7 @@
                    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 defaultValue={card.minHeight || ''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'minHeight')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}