2021-12-22

king

2021-12-22 efad1f9eff8d6af31f5b15edceee7b855b3db957

 src/menu/stylecontroller/index.jsx

@@ -1,7 +1,35 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Collapse, Form, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd'
import { Collapse, Form, Col, InputNumber, Select, Radio, Drawer, Button } from 'antd'
import {
  ColumnHeightOutlined,
  FontSizeOutlined,
  BoldOutlined,
  LineHeightOutlined,
  ColumnWidthOutlined,
  FontColorsOutlined,
  ItalicOutlined,
  AlignLeftOutlined,
  AlignCenterOutlined,
  AlignRightOutlined,
  UnderlineOutlined,
  StrikethroughOutlined,
  BgColorsOutlined,
  PictureOutlined,
  BorderOutlined,
  BorderOuterOutlined,
  BorderLeftOutlined,
  BorderRightOutlined,
  BorderTopOutlined,
  BorderBottomOutlined,
  RadiusSettingOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  ArrowLeftOutlined,
  ArrowRightOutlined,
  SwapOutlined,
} from '@ant-design/icons'

import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
@@ -381,7 +409,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="宽度" type="column-width" />}
                    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}/>
@@ -392,7 +420,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="高度" type="column-height" />}
                    label={<ColumnHeightOutlined title="高度"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.height || ''} options={['px', 'vh', 'vw']} onChange={this.changeHeight}/>
@@ -401,12 +429,12 @@
              </Panel> : null}
              {options.includes('font') ? <Panel header="字体" key="font">
                <Col span={12}>
                  <Form.Item colon={false} label={<Icon title="字体大小" type="font-size" />}>
                  <Form.Item colon={false} label={<FontSizeOutlined title="字体大小"/>}>
                    <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" />}>
                  <Form.Item colon={false} label={<BoldOutlined title="字体粗细"/>}>
                    <Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}>
                      <Option value="normal">normal</Option>
                      <Option value="bold">bold</Option>
@@ -425,19 +453,19 @@
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item colon={false} label={<Icon title="行高" type="line-height" />}>
                  <Form.Item colon={false} label={<LineHeightOutlined title="行高"/>}>
                    <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" />}>
                  <Form.Item colon={false} label={<ColumnWidthOutlined title="字间距"/>}>
                    <InputNumber defaultValue={card.letterSpacing || 0} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="字体颜色" type="font-colors" />}
                    label={<FontColorsOutlined title="字体颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} />
@@ -451,7 +479,7 @@
                  >
                    <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="italic"><ItalicOutlined title="斜体"/></Radio.Button>
                      <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="倾斜">B</span></Radio.Button>
                    </Radio.Group>
                  </Form.Item>
@@ -463,9 +491,9 @@
                    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.Button value="left"><AlignLeftOutlined title="左对齐"/></Radio.Button>
                      <Radio.Button value="center"><AlignCenterOutlined title="居中对齐"/></Radio.Button>
                      <Radio.Button value="right"><AlignRightOutlined title="右对齐"/></Radio.Button>
                    </Radio.Group>
                  </Form.Item>
                </Col>
@@ -477,8 +505,8 @@
                  >
                    <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="underline"><UnderlineOutlined title="下划线"/></Radio.Button>
                      <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>
@@ -488,7 +516,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="背景颜色" type="bg-colors" />}
                    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} />
@@ -497,7 +525,7 @@
                {!options.includes('backgroundColor') ? <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="背景图片" type="picture" />}
                    label={<PictureOutlined title="背景图片"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/>
@@ -552,22 +580,22 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="边框位置" type="border" />}
                    label={<BorderOutlined title="边框位置"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group className="border-position" defaultValue={'outer'} onChange={(e) => this.setState({borposition: e.target.value})}>
                      <Radio value="outer"><Icon title="外边框" type="border-outer" /></Radio>
                      <Radio value="left"><Icon title="左边框" type="border-left" /></Radio>
                      <Radio value="right"><Icon title="右边框" type="border-right" /></Radio>
                      <Radio value="top"><Icon title="上边框" type="border-top" /></Radio>
                      <Radio value="bottom"><Icon title="下边框" type="border-bottom" /></Radio>
                      <Radio value="outer"><BorderOuterOutlined title="外边框"/></Radio>
                      <Radio value="left"><BorderLeftOutlined title="左边框"/></Radio>
                      <Radio value="right"><BorderRightOutlined title="右边框"/></Radio>
                      <Radio value="top"><BorderTopOutlined title="上边框"/></Radio>
                      <Radio value="bottom"><BorderBottomOutlined title="下边框"/></Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="边框样式" type="border-outer" />}
                    label={<BorderOuterOutlined title="边框样式"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    {borposition === 'outer' ? <Select defaultValue={card.borderStyle || 'solid'} onChange={this.changeBorderStyle}>
@@ -605,7 +633,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="边框宽度" type="column-width" />}
                    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}
@@ -618,7 +646,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="边框颜色" type="bg-colors" />}
                    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}
@@ -631,7 +659,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="圆角" type="radius-setting" />}
                    label={<RadiusSettingOutlined title="圆角"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.borderRadius || '0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/>
@@ -642,7 +670,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="阴影颜色" type="bg-colors" />}
                    label={<BgColorsOutlined title="阴影颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={card.shadowColor || 'transparent'} onChange={this.changeShadowColor} />
@@ -651,7 +679,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="模糊距离" type="column-width" />}
                    label={<ColumnWidthOutlined title="模糊距离"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.shadowBlur || '0px'} options={['px']} onChange={this.changeShadowBlur}/>
@@ -660,7 +688,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="水平位置" type="arrow-right" />}
                    label={<ArrowRightOutlined title="水平位置"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.hShadow || '0px'} options={['px']} onChange={this.changeHShadow}/>
@@ -669,7 +697,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="垂直位置" type="arrow-down" />}
                    label={<ArrowDownOutlined title="垂直位置"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.vShadow || '0px'} options={['px']} onChange={this.changeVShadow}/>
@@ -680,7 +708,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="上边距" type="arrow-up"/>}
                    label={<ArrowUpOutlined title="上边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.marginTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/>
@@ -689,7 +717,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="下边距" type="arrow-down"/>}
                    label={<ArrowDownOutlined title="下边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.marginBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/>
@@ -698,7 +726,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="左边距" type="arrow-left"/>}
                    label={<ArrowLeftOutlined title="左边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.marginLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/>
@@ -707,7 +735,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="右边距" type="arrow-right"/>}
                    label={<ArrowRightOutlined title="右边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.marginRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/>
@@ -718,7 +746,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="上边距" type="arrow-up"/>}
                    label={<ArrowUpOutlined title="上边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.paddingTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/>
@@ -727,7 +755,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="下边距" type="arrow-down"/>}
                    label={<ArrowDownOutlined title="下边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.paddingBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/>
@@ -736,7 +764,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="左边距" type="arrow-left"/>}
                    label={<ArrowLeftOutlined title="左边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.paddingLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/>
@@ -745,7 +773,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="右边距" type="arrow-right"/>}
                    label={<ArrowRightOutlined title="右边距"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={card.paddingRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/>
@@ -756,7 +784,7 @@
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="浮动" type="swap" />}
                    label={<SwapOutlined title="浮动"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.float || 'left'} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}>