From 4e570c993e66a47ead0f83de76b63b0a2f8c5446 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 05 六月 2023 17:28:16 +0800 Subject: [PATCH] 2023-06-05 --- src/menu/stylecontroller/index.jsx | 98 +++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 87 insertions(+), 11 deletions(-) diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx index e06a198..6acd6cc 100644 --- a/src/menu/stylecontroller/index.jsx +++ b/src/menu/stylecontroller/index.jsx @@ -1,7 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Collapse, Form, Col, InputNumber, Input, Select, Radio, Drawer, Button } from 'antd' +import { Collapse, Form, Col, InputNumber, Input, Select, Radio, Drawer, Button, message } from 'antd' import { ColumnHeightOutlined, FontSizeOutlined, @@ -29,7 +29,7 @@ ArrowLeftOutlined, ArrowRightOutlined, SwapOutlined, - EnterOutlined, + EnterOutlined } from '@ant-design/icons' import MKEmitter from '@/utils/events.js' @@ -42,6 +42,7 @@ const { Panel } = Collapse const { Option } = Select const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) +const PasteBoard = asyncComponent(() => import('@/components/pasteboard')) const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent')) class MobController extends Component { @@ -453,6 +454,77 @@ this.updateStyle({[type]: val}) } + copy = () => { + const { card, options } = this.state + + let msg = { copyType: 'style' } + + msg.data = card + msg.options = options + + try { + msg = window.btoa(window.encodeURIComponent(JSON.stringify(msg))) + } catch (e) { + console.warn('Stringify Failure') + msg = '' + } + + if (msg) { + let oInput = document.createElement('input') + oInput.value = msg + document.body.appendChild(oInput) + oInput.select() + document.execCommand('Copy') + document.body.removeChild(oInput) + message.success('澶嶅埗鎴愬姛銆�') + } + } + + paste = (res, callback) => { + const { options } = this.state + + if (res.copyType !== 'style') { + message.warning('閰嶇疆淇℃伅鏍煎紡閿欒锛�', 5) + return + } else if (JSON.stringify(res.options) !== JSON.stringify(options)) { + message.warning('鏍峰紡閫夐」涓嶄竴鑷达紝涓嶅彲绮樿创锛�', 5) + return + } + + let style = res.data || {} + + let backgroundImage = '' + if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) { + backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '') + } + + let borposition = 'outer' + + if (!style.borderWidth) { + if (style.borderLeftWidth) { + borposition = 'left' + } else if (style.borderRightWidth) { + borposition = 'right' + } else if (style.borderTopWidth) { + borposition = 'top' + } else if (style.borderBottomWidth) { + borposition = 'bottom' + } + } + + this.setState({ + card: style, + borposition, + backgroundImage + }) + + this.callback && this.callback(style) + + callback() + + message.success('绮樿创鎴愬姛銆�') + } + render () { const { card, options, backgroundImage, borposition, fonts, type } = this.state const formItemLayout = { @@ -561,7 +633,7 @@ 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} /> + <ColorSketch value={card.color || ''} onChange={this.changeFontColor} /> </Form.Item> <Form.Item colon={false} @@ -771,11 +843,11 @@ label={<BgColorsOutlined title="杈规棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > - {borposition === 'outer' ? <ColorSketch value={card.borderColor || 'transparent'} onChange={this.changeBorderColor} /> : null} - {borposition === 'left' ? <ColorSketch value={card.borderLeftColor || 'transparent'} onChange={this.changeBorderColor} /> : null} - {borposition === 'right' ? <ColorSketch value={card.borderRightColor || 'transparent'} onChange={this.changeBorderColor} /> : null} - {borposition === 'top' ? <ColorSketch value={card.borderTopColor || 'transparent'} onChange={this.changeBorderColor} /> : null} - {borposition === 'bottom' ? <ColorSketch value={card.borderBottomColor || 'transparent'} onChange={this.changeBorderColor} /> : null} + {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} </Form.Item> <Form.Item colon={false} @@ -802,7 +874,7 @@ 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} /> + <ColorSketch value={card.shadowColor || ''} onChange={this.changeShadowColor} /> </Form.Item> <Form.Item colon={false} @@ -972,8 +1044,12 @@ </Panel> : null} </Collapse> : null} </Form> - <div style={{textAlign: 'right'}}> - <Button style={{margin: '30px 10px 30px 0px'}} onClick={this.onCloseDrawer}>鍏抽棴</Button> + <div style={{textAlign: 'right', lineHeight: '60px', marginBottom: '30px'}}> + <div style={{float: 'left'}}> + <Button onClick={() => this.copy()} className="mk-border-green" style={{marginRight: '10px'}}>澶嶅埗</Button> + <PasteBoard getPasteValue={this.paste}><Button style={{borderColor: 'rgb(64, 169, 255)', color: 'rgb(64, 169, 255)'}}>绮樿创</Button></PasteBoard> + </div> + <Button style={{marginRight: '10px'}} onClick={this.onCloseDrawer}>鍏抽棴</Button> </div> </div> </Drawer> -- Gitblit v1.8.0