pc端平台
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
king
2021-12-22 efad1f9eff8d6af31f5b15edceee7b855b3db957 
 src/menu/stylecombcontroller/index.jsx


@@ -1,7 +1,34 @@


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,


  BorderOutlined,


  BorderOuterOutlined,


  BorderLeftOutlined,


  BorderRightOutlined,


  BorderTopOutlined,


  BorderBottomOutlined,


  RadiusSettingOutlined,


  ArrowUpOutlined,


  ArrowDownOutlined,


  ArrowLeftOutlined,


  ArrowRightOutlined,


  SwapOutlined,


} from '@ant-design/icons'




import MKEmitter from '@/utils/events.js'


import ColorSketch from '@/mob/colorsketch'


@@ -254,7 +281,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={''} options={['px', 'vh', 'vw']} onChange={this.changeHeight}/>


@@ -263,12 +290,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={''} 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={''} onChange={this.boldChange}>


                      <Option value="normal">normal</Option>


                      <Option value="bold">bold</Option>


@@ -287,19 +314,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={''} 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={''} 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 onChange={this.changeFontColor} />


@@ -313,7 +340,7 @@


                  >


                    <Radio.Group defaultValue={''} 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>


@@ -325,9 +352,9 @@


                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }


                  >


                    <Radio.Group className="text-align" defaultValue={''} 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>


@@ -339,8 +366,8 @@


                  >


                    <Radio.Group className="text-decoration" defaultValue={''} 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>


@@ -350,7 +377,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 onChange={this.changeBackgroundColor} />


@@ -361,22 +388,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={'solid'} onChange={this.changeBorderStyle}>


@@ -414,7 +441,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={''} options={['px']} onChange={this.changeBorderWidth}/> : null}


@@ -427,7 +454,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 onChange={this.changeBorderColor} /> : null}


@@ -440,7 +467,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={'0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/>


@@ -451,7 +478,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 onChange={this.changeShadowColor} />


@@ -462,7 +489,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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/>


@@ -471,7 +498,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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/>


@@ -480,7 +507,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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/>


@@ -489,7 +516,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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/>


@@ -500,7 +527,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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/>


@@ -509,7 +536,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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/>


@@ -518,7 +545,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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/>


@@ -527,7 +554,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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/>


@@ -538,7 +565,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 defaultValue={''} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}>