king
2024-04-29 f9816a4078fdba44115c69025d9982997f23b484
src/menu/stylecontroller/index.jsx
@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import { is, fromJS } from 'immutable'
import { Collapse, Form, Col, InputNumber, Input, Select, Radio, Drawer, Button, message } from 'antd'
import { Collapse, Form, Col, InputNumber, Input, Select, Radio, Drawer, Button, message, Checkbox } from 'antd'
import {
  ColumnHeightOutlined,
  FontSizeOutlined,
@@ -53,7 +53,8 @@
    backgroundImage: '',
    options: [],
    borposition: 'outer',
    type: ''
    type: '',
    logo: sessionStorage.getItem('CloudLogo') || MainLogo
  }
  callback = null
@@ -130,30 +131,37 @@
  onCloseDrawer = () => {
    let card = fromJS(this.state.card).toJS()
    let check = false
    if (card.borderWidth === '0px') {
    if (card.borderWidth === '0px' || !card.borderWidth) {
      delete card.borderWidth
      delete card.borderColor
      check = true
    } else if (card.borderLeftWidth === '0px') {
      delete card.borderLeftWidth
      delete card.borderLeftColor
      check = true
    } else if (card.borderRightWidth === '0px') {
      delete card.borderRightWidth
      delete card.borderRightColor
      check = true
    } else if (card.borderTopWidth === '0px') {
      delete card.borderTopWidth
      delete card.borderTopColor
      check = true
    } else if (card.borderBottomWidth === '0px') {
      delete card.borderBottomWidth
      delete card.borderBottomColor
      check = true
    }
    if (check) {
    if (card.borderLeftWidth === '0px' || !card.borderLeftWidth) {
      delete card.borderLeftWidth
      delete card.borderLeftColor
    }
    if (card.borderRightWidth === '0px' || !card.borderRightWidth) {
      delete card.borderRightWidth
      delete card.borderRightColor
    }
    if (card.borderTopWidth === '0px' || !card.borderTopWidth) {
      delete card.borderTopWidth
      delete card.borderTopColor
    }
    if (card.borderBottomWidth === '0px' || !card.borderBottomWidth) {
      delete card.borderBottomWidth
      delete card.borderBottomColor
    }
    if (/0px 0px 0px | transparent/.test(card.boxShadow)) {
      delete card.hShadow
      delete card.vShadow
      delete card.shadowBlur
      delete card.shadowColor
      delete card.boxShadow
    }
    if (!is(fromJS(this.state.card), fromJS(card))) {
      this.callback && this.callback(card)
    }
@@ -285,7 +293,7 @@
  changeShadowColor = (val) => {
    const { card } = this.state
    let boxShadow = `${card.hShadow || '0px'} ${card.vShadow || '0px'} ${card.shadowBlur || '0px'} ${val}`
    let boxShadow = `${card.hShadow || '0px'} ${card.vShadow || '0px'} ${card.shadowBlur || '0px'} ${val || 'transparent'}`
    this.updateStyle({shadowColor: val, boxShadow})
  }
@@ -561,7 +569,7 @@
  }
  render () {
    const { card, options, backgroundImage, borposition, fonts, type } = this.state
    const { card, options, backgroundImage, borposition, fonts, type, logo } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -577,7 +585,7 @@
      <Drawer
        title={
          <div className="header-logo">
            <img src={MainLogo} alt=""/>
            <img src={logo} alt=""/>
          </div>
        }
        placement="left"
@@ -716,6 +724,25 @@
                      <Radio.Button value="line-through"><StrikethroughOutlined title="中划线"/></Radio.Button>
                      <Radio.Button value="overline" style={{textDecoration: 'overline'}}><span title="上划线">O</span></Radio.Button>
                    </Radio.Group>
                  </Form.Item>
                </Col> : null}
                {options.includes('fontFamily') ? <Col span={24}>
                  <Form.Item
                    colon={false}
                    label=" "
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Checkbox.Group options={[
                      { label: '微软雅黑', value: 'Microsoft YaHei' },
                      { label: '宋体', value: 'Simsun' },
                      { label: '黑体', value: 'Simhei' },
                      { label: '仿宋', value: 'FangSong' },
                      { label: '楷体', value: 'KaiTi' },
                      // { label: 'Helvetica', value: 'Helvetica' },
                      // { label: 'Arial', value: 'Arial' },
                      // { label: 'Verdana', value: 'Verdana' },
                      // { label: 'Georgia', value: 'Georgia' },
                    ]} defaultValue={card.fontFamily} onChange={(val) => this.changeNormalStyle(val, 'fontFamily')} />
                  </Form.Item>
                </Col> : null}
              </Panel> : null}
@@ -865,11 +892,11 @@
                    label={<ColumnWidthOutlined title="边框宽度"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    {borposition === 'outer' ? <StyleInput defaultValue={card.borderWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'left' ? <StyleInput defaultValue={card.borderLeftWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'right' ? <StyleInput defaultValue={card.borderRightWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'top' ? <StyleInput defaultValue={card.borderTopWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'bottom' ? <StyleInput defaultValue={card.borderBottomWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'outer' ? <StyleInput defaultValue={card.borderWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'left' ? <StyleInput defaultValue={card.borderLeftWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'right' ? <StyleInput defaultValue={card.borderRightWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'top' ? <StyleInput defaultValue={card.borderTopWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'bottom' ? <StyleInput defaultValue={card.borderBottomWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                  </Form.Item>
                </Col>
                <Col span={24}>
@@ -878,11 +905,11 @@
                    label={<BgColorsOutlined title="边框颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    {borposition === 'outer' ? <ColorSketch value={card.borderColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'left' ? <ColorSketch value={card.borderLeftColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'right' ? <ColorSketch value={card.borderRightColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'top' ? <ColorSketch value={card.borderTopColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'bottom' ? <ColorSketch value={card.borderBottomColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'outer' ? <ColorSketch allowClear={true} value={card.borderColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'left' ? <ColorSketch allowClear={true} value={card.borderLeftColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'right' ? <ColorSketch allowClear={true} value={card.borderRightColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'top' ? <ColorSketch allowClear={true} value={card.borderTopColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'bottom' ? <ColorSketch allowClear={true} value={card.borderBottomColor || ''} onChange={this.changeBorderColor} /> : null}
                  </Form.Item>
                  <Form.Item
                    colon={false}
@@ -909,7 +936,7 @@
                    label={<BgColorsOutlined title="阴影颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={card.shadowColor || ''} onChange={this.changeShadowColor} />
                    <ColorSketch allowClear={true} value={card.shadowColor || ''} onChange={this.changeShadowColor} />
                  </Form.Item>
                  <Form.Item
                    colon={false}