2023-03-11

king

2023-03-11 34e7681fd12b1c4e4994d3bea1a553870e10bc50

 src/pc/bgcontroller/index.jsx

@@ -2,13 +2,14 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Select, Input } from 'antd'
import { ArrowUpOutlined, ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons'
import { ArrowUpOutlined, ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined, BgColorsOutlined, ColumnWidthOutlined } from '@ant-design/icons'

import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const StyleInput = asyncComponent(() => import('@/menu/stylecontroller/styleInput'))
const SysColorSketch = asyncComponent(() => import('@/menu/stylecontroller/syscolorsketch'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
const { Option } = Select

@@ -150,8 +151,52 @@
    }
  }

  /**
   * @description 修改阴影颜色 ，颜色控件
   */
  changeShadowColor = (val) => {
    let config = fromJS(this.props.config).toJS()
    config.style.shadowColor = val
    config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`

    this.props.updateConfig(config)
  }

  /**
   * @description 修改阴影颜色 ，颜色控件
   */
  changeShadowBlur = (val) => {
    let config = fromJS(this.props.config).toJS()
    config.style.shadowBlur = val
    config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`

    this.props.updateConfig(config)
  }

  /**
   * @description 修改阴影颜色 ，颜色控件
   */
  changeHShadow = (val) => {
    let config = fromJS(this.props.config).toJS()
    config.style.hShadow = val
    config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`

    this.props.updateConfig(config)
  }

  /**
   * @description 修改阴影颜色 ，颜色控件
   */
  changeVShadow = (val) => {
    let config = fromJS(this.props.config).toJS()
    config.style.vShadow = val
    config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`

    this.props.updateConfig(config)
  }

  render () {
    const { config } = this.props
    const { config, type } = this.props
    const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, backgroundPosition, background } = this.state
    const formItemLayout = {
      labelCol: {
@@ -174,8 +219,11 @@
          >
            <StyleInput defaultValue={config.style.width || '100%'} options={['px', '%', 'vw']} onChange={(val) => this.changePadding(val, 'width')}/>
          </Form.Item> */}
          <Form.Item className="color-control" colon={false} label="背景色">
          <Form.Item className="color-control" style={{marginBottom: '0px'}} colon={false} label="背景色">
            <ColorSketch value={backgroundColor} onChange={this.changeBackgroundColor} />
          </Form.Item>
          <Form.Item colon={false} label="系统色">
            <SysColorSketch onChange={this.changeBackgroundColor} />
          </Form.Item>
          {window.develop === true ? <Form.Item colon={false} label="颜色">
            <Input value={background} onChange={(e) => this.changeBackground(e.target.value)} />
@@ -209,6 +257,24 @@
              <Option value="bottom">bottom</Option>
            </Select>
          </Form.Item>
          {type === 'mob_popview' ? <p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>阴影</p> : null}
          {type === 'mob_popview' ? <>
            <Form.Item colon={false} label={<BgColorsOutlined title="阴影颜色"/>}>
              <ColorSketch value={config.style.shadowColor || 'transparent'} onChange={this.changeShadowColor} />
            </Form.Item>
            <Form.Item colon={false} label={<BgColorsOutlined title="系统色"/>}>
              <SysColorSketch onChange={this.changeShadowColor} />
            </Form.Item>
            <Form.Item colon={false} label={<ColumnWidthOutlined title="模糊距离"/>}>
              <StyleInput defaultValue={config.style.shadowBlur || '0px'} options={['px']} onChange={this.changeShadowBlur}/>
            </Form.Item>
            <Form.Item colon={false} label={<ArrowRightOutlined title="水平位置"/>}>
              <StyleInput defaultValue={config.style.hShadow || '0px'} options={['px']} onChange={this.changeHShadow}/>
            </Form.Item>
            <Form.Item colon={false} label={<ArrowDownOutlined title="垂直位置"/>}>
              <StyleInput defaultValue={config.style.vShadow || '0px'} options={['px']} onChange={this.changeVShadow}/>
            </Form.Item>
          </> : null}
          <p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>内边距</p>
          <Form.Item
            colon={false}