Merge branch 'develop'

king

2022-08-15 704f82b06befe96e5f739b2dce419f76f5683a6f

 src/pc/bgcontroller/index.jsx

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Select } from 'antd'
import { Form, Select, Input } from 'antd'
import { ArrowUpOutlined, ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons'

import asyncComponent from '@/utils/asyncComponent'
@@ -19,6 +19,7 @@
  }

  state = {
    background: '',
    backgroundColor: '',
    backgroundImage: '',
    backgroundSize: '',
@@ -38,6 +39,7 @@
    }

    this.setState({
      background: config.style.background || '',
      backgroundColor: config.style.backgroundColor,
      backgroundImage: bgImg,
      backgroundSize: config.style.backgroundSize || '100%',
@@ -123,9 +125,34 @@
    this.props.updateConfig(config)
  }

  changeBackground = (val) => {
    this.setState({
      background: val,
    })

    if (!val || /(^linear-gradient|^radial-gradient)\(.*\)$/.test(val)) {
      let config = fromJS(this.props.config).toJS()
      config.style.background = val

      delete config.style.backgroundColor
      delete config.style.backgroundImage

      if (!val) {
        delete config.style.background
      }

      this.setState({
        backgroundImage: '',
        backgroundColor: ''
      })

      this.props.updateConfig(config)
    }
  }

  render () {
    const { config } = this.props
    const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, backgroundPosition } = this.state
    const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, backgroundPosition, background } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -140,16 +167,19 @@
    return (
      <div className="pc-style-controller">
        <Form {...formItemLayout}>
          <Form.Item
          {/* <Form.Item
            colon={false}
            label="宽度"
            className="normal-view"
          >
            <StyleInput defaultValue={config.style.width || '100%'} options={['px', '%', 'vw']} onChange={(val) => this.changePadding(val, 'width')}/>
          </Form.Item>
          </Form.Item> */}
          <Form.Item className="color-control" colon={false} label="背景色">
            <ColorSketch value={backgroundColor} onChange={this.changeBackgroundColor} />
          </Form.Item>
          {window.develop === true ? <Form.Item colon={false} label="颜色">
            <Input value={background} onChange={(e) => this.changeBackground(e.target.value)} />
          </Form.Item> : null}
          <Form.Item colon={false} label="背景图">
            <SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/>
          </Form.Item>