2020-07-06

king

2020-07-06 e0e5aa28cbd509579c7a83672a93241c9a5ed7e9

2020-07-06

 src/mob/colorsketch/index.jsx

@@ -8,34 +8,34 @@

class ColorSketch extends Component {
  static propTpyes = {
    card: PropTypes.object,
    onDoubleClick: PropTypes.func
    color: PropTypes.any,
    changeColor: PropTypes.func
  }
  state = {
    visible: false,
    color: '#f8e71c',
  };

  handleClick = () => {
    this.setState({ visible: !this.state.visible })
  };

  handleClose = () => {
    this.setState({ visible: false })
  };
    color: this.props.color,
  }

  handleChange = (color) => {
    this.setState({ color: color.rgb })
  };
    this.props.changeColor(`rgba(${ color.rgb.r }, ${ color.rgb.g }, ${ color.rgb.b }, ${ color.rgb.a })`)
  }

  render() {
    const { color } = this.state

    let _color = ''
    if (typeof(color) === 'string') {
      _color = color
    } else {
      _color = `rgba(${ color.r }, ${ color.g }, ${ color.b }, ${ color.a })`
    }

    return (
      <Popover content={
        <SketchPicker color={ this.state.color } onChange={ this.handleChange } />
      } overlayClassName="color-sketch-popover" placement="bottomRight" title="" trigger="click">
        <div className="color-sketch-block" onClick={ this.handleClick }>
          <div className="color-sketch-block-inner" style={ {background: `rgba(${ color.r }, ${ color.g }, ${ color.b }, ${ color.a })`} }></div>
        <div className="color-sketch-block">
          <div className="color-sketch-block-inner" style={ {background: _color} }></div>
        </div>
      </Popover>
    )

 src/mob/controller/index.jsx

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Collapse, Form, Input, Col, Icon, InputNumber, Select } from 'antd'
import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio } from 'antd'

import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
@@ -14,22 +14,153 @@
class MobController extends Component {
  static propTpyes = {
    editElem: PropTypes.any,
    updateStyle: PropTypes.func,
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    card: null,
    fontColor: '#000000',
    backgroundColor: '#ffffff'
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.editElem), fromJS(nextProps.editElem))) {
      this.setState({
        card: null
      }, () => {
        if (!nextProps.editElem) return
        let _card = fromJS(nextProps.editElem).toJS()

        this.setState({
          card: _card,
          fontColor: _card.color || '#000000',
          backgroundColor: _card.backgroundColor || '#ffffff'
        })
      })
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
    return !is(fromJS(this.state), fromJS(nextState))
  }

  /**
   * @description 字体大小切换，超出范围忽略
   */
  changeFontSize = (val) => {
    const { card } = this.state
    let value = parseInt(val)

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

    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {fontSize: `${value}px`}})
  }

  /**
   * @description 修改行间距，超出范围忽略
   */
  changeLineHeight = (val) => {
    const { card } = this.state
    let value = parseFloat(val)

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

    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {lineHeight: value}})
  }

  /**
   * @description 字体间距修改，超出范围忽略
   */
  changeLetterSpacing = (val) => {
    const { card } = this.state
    let value = parseFloat(val)

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

    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {letterSpacing: `${value}px`}})
  }

  /**
   * @description 修改字体粗细
   */
  boldChange = (val) => {
    console.log(val)
    const { card } = this.state

    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {fontWeight: val}})
  }

  /**
   * @description 修改字体颜色 ，颜色控件
   */
  changeFontColor = (val) => {
    const { card } = this.state

    this.setState({
      fontColor: val
    })
    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {color: val}})
  }

  /**
   * @description 修改字体颜色 ，手动输入
   */
  changeFontColorInput = (e) => {
    this.setState({
      fontColor: e.target.value
    })
  }

  /**
   * @description 字体对齐
   */
  changeTextAlign = (e) => {
    const { card } = this.state

    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {textAlign: e.target.value}})
  }

  /**
   * @description 字体样式，倾斜
   */
  changeFontStyle = (e) => {
    const { card } = this.state

    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {fontStyle: e.target.value}})
  }

  /**
   * @description 字体装饰，下划线、贯穿线、上划线
   */
  changeTextDecoration = (e) => {
    const { card } = this.state

    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {textDecoration: e.target.value}})
  }

  /**
   * @description 修改背景颜色 ，颜色控件
   */
  changeBackgroundColor = (val) => {
    const { card } = this.state

    this.setState({
      backgroundColor: val
    })
    this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {backgroundColor: val}})
  }

  /**
   * @description 修改字体颜色 ，手动输入
   */
  changeBackgroundColorInput = (e) => {
    this.setState({
      backgroundColor: e.target.value
    })
  }

  render () {
    const { editElem } = this.props
    const { card, fontColor, backgroundColor } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -40,19 +171,20 @@
        sm: { span: 16 }
      }
    }

    return (
      <div className="mob-controller">
        <Form {...formItemLayout}>
          {editElem ? <Collapse expandIconPosition="right" accordion={true}>
            {editElem.items.includes('font') ? <Panel header="字体" key="0">
          {card ? <Collapse expandIconPosition="right" defaultActiveKey={card.items[0]} accordion={true}>
            {card.items.includes('font') ? <Panel header="字体" key="font">
              <Col span={12}>
                <Form.Item colon={false} label={<Icon title="字体大小" type="font-size" />}>
                  <InputNumber min={12} max={100} precision={0} />
                  <InputNumber defaultValue={card.fontSize || 14} min={12} max={100} precision={0} onChange={this.changeFontSize} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item colon={false} label={<Icon title="字体粗细" type="bold" />}>
                  <Select defaultValue="normal" onChange={this.boldChange}>
                  <Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}>
                    <Option value="normal">normal</Option>
                    <Option value="bold">bold</Option>
                    <Option value="bolder">bolder</Option>
@@ -71,12 +203,12 @@
              </Col>
              <Col span={12}>
                <Form.Item colon={false} label={<Icon title="行间距" type="line-height" />}>
                  <InputNumber min={1} max={10} precision={1} />
                  <InputNumber defaultValue={card.lineHeight || 1.5} min={1} max={10} precision={1} onChange={this.changeLineHeight} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item colon={false} label={<Icon title="字间距" type="column-width" />}>
                  <InputNumber min={0} max={100} precision={0} />
                  <InputNumber defaultValue={card.letterSpacing || 0} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/>
                </Form.Item>
              </Col>
              <Col span={24}>
@@ -85,19 +217,73 @@
                  label={<Icon title="字体颜色" type="font-colors" />}
                  labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                >
                  <ColorSketch  />
                  <Input  />
                  <ColorSketch color={card.color || '#000000'} changeColor={this.changeFontColor} />
                  <Input value={fontColor} onChange={this.changeFontColorInput} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item colon={false} label={<Icon title="字体粗细" type="bold" />}>
                  <Input  />
              <Col span={24}>
                <Form.Item
                  colon={false}
                  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.Button value="normal"><span title="标准">N</span></Radio.Button>
                    <Radio.Button value="italic"><Icon title="斜体" type="italic" /></Radio.Button>
                    <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="倾斜">B</span></Radio.Button>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  colon={false}
                  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.Button value="left"><Icon title="左对齐" type="align-left" /></Radio.Button>
                    <Radio.Button value="center"><Icon title="居中对齐" type="align-center" /></Radio.Button>
                    <Radio.Button value="right"><Icon title="右对齐" type="align-right" /></Radio.Button>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  colon={false}
                  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.Button value="none"><span title="标准">N</span></Radio.Button>
                    <Radio.Button value="underline"><Icon title="下划线" type="underline" /></Radio.Button>
                    <Radio.Button value="line-through"><Icon title="中划线" type="strikethrough" /></Radio.Button>
                    <Radio.Button value="overline" style={{textDecoration: 'overline'}}><span title="上划线">O</span></Radio.Button>
                  </Radio.Group>
                </Form.Item>
              </Col>
            </Panel> : null}
            <Panel header="背景" key="1">
              背景
            </Panel>
            {card.items.includes('background') ? <Panel header="背景" key="1">
              <Col span={24}>
                <Form.Item
                  colon={false}
                  label={<Icon title="背景颜色" type="bg-colors" />}
                  labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                >
                  <ColorSketch color={card.backgroundColor || '#ffffff'} changeColor={this.changeBackgroundColor} />
                  <Input value={backgroundColor} onChange={this.changeBackgroundColorInput} />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  colon={false}
                  label={<Icon title="背景图片" type="picture" />}
                  labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                >
                  <ColorSketch color={card.backgroundColor || '#ffffff'} changeColor={this.changeBackgroundColor} />
                  <Input value={backgroundColor} onChange={this.changeBackgroundColorInput} />
                </Form.Item>
              </Col>
            </Panel> : null}
            <Panel header="边距" key="2">
              边距
            </Panel>

 src/mob/controller/index.scss

@@ -54,8 +54,10 @@
              }
              .color-sketch-block + .ant-input {
                float: right;
                width: 60%;
                width: 70%;
                margin-top: 9px;
                padding-right: 5px;
                padding-left: 5px;
              }
              .ant-select-arrow {
                color: inherit;
@@ -72,6 +74,17 @@
                  background: transparent;
                }
              }
              .ant-radio-group {
                .ant-radio-button-wrapper {
                  background: transparent;
                  color: rgba(255, 255, 255, 0.65);
                  height: 27px;
                  line-height: 25px;
                  span {
                    font-style: inherit;
                  }
                }
              }
            }
          }
        }

 src/mob/contupdate/index.jsx

@@ -13,6 +13,7 @@

class ContentUpdate extends Component {
  static propTpyes = {
    deletable: PropTypes.any,
    element: PropTypes.object,
    updateContent: PropTypes.func
  }
@@ -91,13 +92,13 @@
  }

  render () {
    const { element } = this.props
    const { element, deletable } = this.props
    const { getFieldDecorator } = this.props.form
    const { visible, images } = this.state

    return (
      <div className="mob-content-update">
        <Icon type="delete" onClick={this.deleteElement} />
        {deletable !== false ? <Icon type="delete" onClick={this.deleteElement} /> : null}
        <Popover content={
          <div>
            {element.eleType === 'img' ? <FileUpload value={images} maxFile={1} fileType="text" onChange={this.imgChange}/> : null}

 src/mob/contupdate/index.scss

@@ -6,6 +6,7 @@
  color: #ffffff;
  font-size: 14px;
  display: none;
  line-height: 1.5;

  i {
    padding: 2px 5px;

 src/mob/login/index.jsx

@@ -59,9 +59,10 @@
    const { card } = this.props
    e.stopPropagation()
    let element = {
      ...fromJS(card.logo.style).toJS(),
      componentId: card.uuid,
      uuid: card.logo.uuid,
      items: ['picture'],
      item: fromJS(card.logo).toJS()
      items: []
    }
    this.props.triggerEdit(element)
  }
@@ -70,9 +71,10 @@
    const { card } = this.props
    e.stopPropagation()
    let element = {
      ...fromJS(card.title.style).toJS(),
      componentId: card.uuid,
      uuid: card.title.uuid,
      items: ['font'],
      item: fromJS(card.title).toJS()
    }
    this.props.triggerEdit(element)
  }
@@ -81,9 +83,22 @@
    const { card } = this.props
    e.stopPropagation()
    let element = {
      ...fromJS(card.copyright.style).toJS(),
      componentId: card.uuid,
      uuid: card.copyright.uuid,
      items: ['font'],
      item: fromJS(card.copyright).toJS()
    }
    this.props.triggerEdit(element)
  }

  editLogin = (e) => {
    const { card } = this.props
    e.stopPropagation()
    let element = {
      ...fromJS(card.login.style).toJS(),
      componentId: card.uuid,
      uuid: card.login.uuid,
      items: ['font', 'background']
    }
    this.props.triggerEdit(element)
  }
@@ -92,9 +107,10 @@
    const { card } = this.props
    e.stopPropagation()
    let element = {
      ...fromJS(card.box.style).toJS(),
      componentId: card.uuid,
      uuid: card.box.uuid,
      items: ['font', 'padding', 'background'],
      item: fromJS(card.box).toJS()
    }
    this.props.triggerEdit(element)
  }
@@ -109,12 +125,12 @@
    const { rember } = this.state

    return (
      <div className="mob-login" onClick={this.editBox} style={{paddingTop: `calc(17vh - 10px)`}}>
      <div className="mob-login" onClick={this.editBox} style={card.box.style}>
        {card.logo ? <div className={'logo ' + (editId === card.logo.uuid ? 'editing' : '')} onClick={this.editLogo}>
          <ContentUpdate element={card.logo} updateContent={(ele) => this.updateContent({...card, logo: ele})}/>
          <img src={card.logo.content} alt=""/>
        </div> : null}
        {card.title ? <div className={'plat-name ' + (editId === card.title.uuid ? 'editing' : '')} onClick={this.editTitle}>
        {card.title ? <div className={'plat-name ' + (editId === card.title.uuid ? 'editing' : '')} style={card.title.style} onClick={this.editTitle}>
          <ContentUpdate element={card.title} updateContent={(ele) => this.updateContent({...card, title: ele})}/>
          {card.title.content}
        </div> : null}
@@ -149,10 +165,19 @@
          <List.Item className="lang">中文简体</List.Item>
          <div className="clear-both"></div>
        </div>
        <Button type="primary" onDoubleClick={() => this.props.doubleClickCard(card.login)}>登录</Button>
        {card.copyright ? <div className={'company-msg ' + (editId === card.copyright.uuid ? 'editing' : '')} onClick={this.editMsg}>
        <Button 
          type="primary"
          className={'login ' + (editId === card.login.uuid ? 'editing' : '')} 
          onDoubleClick={() => this.props.doubleClickCard(card.login)}
          style={card.login.style}
          onClick={this.editLogin}
        >
          <ContentUpdate element={card.login} deletable={false} updateContent={(ele) => this.updateContent({...card, login: ele})}/>
          {card.login.content}
        </Button>
        {card.copyright ? <div className={'company-msg ' + (editId === card.copyright.uuid ? 'editing' : '')} style={card.copyright.style} onClick={this.editMsg}>
          <ContentUpdate element={card.copyright} updateContent={(ele) => this.updateContent({...card, copyright: ele})}/>
          <p>{card.copyright.content}</p>
          {card.copyright.content}
        </div> : null}
      </div>
    )

 src/mob/login/index.scss

@@ -3,15 +3,17 @@
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(#378DBE, #46C29E, #48A9D6);
  // background-image: linear-gradient(#378DBE, #46C29E, #48A9D6);

  .logo {
    position: relative;
    font-size: 14px;
    max-width: 280px;
    min-height: 10px;
    margin: 0 auto;
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.5;
    border: 1px dotted transparent;
    img {
      max-width: 100%;
@@ -33,9 +35,11 @@
    margin-top: 15px;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.5;
    font-size: 20px;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 0px;
    border: 1px dotted transparent;
  }
  .plat-name.editing {
@@ -54,30 +58,32 @@
    position: relative;
    z-index: 1;
    width: 245px;
    font-size: 14px;
    max-width: 270px;
    line-height: 1.5;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.3);
    .am-input-label {
      width: 30px;
      color: #ffffff;
      color: inherit;
      padding-top: 10px;
    }
    input {
      color: #fafafa;
      color: inherit;
    }
    input::-webkit-input-placeholder {
      color: #ffffff;
      color: inherit;
    }
    input:-moz-placeholder {
      color: #ffffff;
      color: inherit;
    }
    input::-moz-placeholder {
      color: #ffffff;
      color: inherit;
    }
    input:-ms-input-placeholder {
      color: #ffffff;
      color: inherit;
    }

    .am-input-control input:disabled {
@@ -90,8 +96,10 @@
  .other-setting {
    position: relative;
    z-index: 1;
    font-size: 14px;
    width: 245px;
    max-width: 270px;
    line-height: 1.5;
    margin: 0 auto;
    margin-bottom: 10px;
    .am-list-item {
@@ -114,7 +122,7 @@
      }
      .am-list-line .am-list-content {
        font-size: 14px;
        color: #fafafa;
        color: inherit;
        cursor: pointer;
      }
      .am-list-extra {
@@ -141,6 +149,12 @@
    margin: 0 auto;
    border-radius: 30px;
    border: 1px dotted transparent;
    overflow: visible;
    letter-spacing: 0px;
    span {
      font-style: inherit;
      font-weight: inherit;
    }
  }
  >.am-button:hover {
    color: #fff;
@@ -156,6 +170,8 @@
    font-size: 12px;
    color: #fafafa;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0px;
    border: 1px dotted transparent;
  }
  .company-msg.editing {

 src/mob/modelsource/option.jsx

@@ -14,11 +14,11 @@
      sourceType: 'mob-login-1', type: 'mob', url: mobLogin1,  style: {},
      param: {
        type: 'login', subtype: 'mob-login-1',
        box: { editable: true, eleType: 'box', paddingTop: '17vh', background: '', color: '#ffffff' },
        logo: { editable: true, eleType: 'img', content: mklogo },
        title: { editable: true, eleType: 'text', content: '明科商业智能开放平台', fontSize: '20px', fontWeight: 'bold', color: '#ffffff' },
        login: { editable: true, eleType: 'button', content: '登录', fontSize: '20px', fontWeight: 'bold', color: '#ffffff' },
        copyright: { editable: true, eleType: 'textarea', content: 'Copyright©2017  所有相关版权归  北京明科普华信息技术有限公司', fontSize: '12px', color: '#ffffff' }
        box: { editable: true, eleType: 'box', style: {paddingTop: '17vh', color: '#ffffff', backgroundImage: 'linear-gradient(#378DBE, #46C29E, #48A9D6)'}},
        logo: { editable: true, eleType: 'img', content: mklogo, style: {} },
        title: { editable: true, eleType: 'text', content: '明科商业智能开放平台', style: {fontSize: '20px', fontWeight: 'bold', color: '#ffffff', textAlign: 'center'}},
        login: { editable: true, eleType: 'button', content: '登录', style: {fontSize: '18px', color: '#ffffff', textAlign: 'center', lineHeight: 2.4}},
        copyright: { editable: true, eleType: 'textarea', content: 'Copyright©2017  所有相关版权归  北京明科普华信息技术有限公司', style: {fontSize: '12px', color: '#ffffff', textAlign: 'center'} }
      }
    },
  ]

 src/views/mobdesign/index.jsx

@@ -125,6 +125,22 @@
    })
  }

  updateStyle = (proper) => {
    const { config } = this.state

    config.components = config.components.map(component => {
      if (component.uuid === proper.componentId) {
        Object.keys(component).forEach(key => {
          if (component[key].editable && component[key].uuid === proper.uuid) {
            component[key].style = {...component[key].style, ...proper.style}
          }
        })
      }
      return component
    })
    this.setState({config})
  }

  updateConfig = (config) => {
    this.setState({
      config: config
@@ -162,10 +178,10 @@
              </div> : null
            }
            <div className="mob-setting">
              {config ? <Tabs defaultActiveKey="2" animated={false} size="small">
              {config ? <Tabs defaultActiveKey="1" animated={false} size="small">
                <TabPane tab="配置" key="1">
                  {/* <SketchPicker /> */}
                  <Controller editElem={editElem} />
                  <Controller editElem={editElem} updateStyle={this.updateStyle} />
                </TabPane>
                <TabPane tab="数据源" key="2">
                  <DataSource config={config} updateConfig={this.updateConfig} />