From 79e4981aa6cc9354276fc54cdf6d14eb08ab7fee Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 22 六月 2023 15:59:04 +0800
Subject: [PATCH] Merge branch 'develop' of ssh://121.36.20.145:29418/~jinfei/pc-plat into develop
---
src/menu/stylecontroller/index.jsx | 199 +++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 164 insertions(+), 35 deletions(-)
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index e06a198..a781f01 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -1,7 +1,6 @@
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 +28,7 @@
ArrowLeftOutlined,
ArrowRightOutlined,
SwapOutlined,
- EnterOutlined,
+ EnterOutlined
} from '@ant-design/icons'
import MKEmitter from '@/utils/events.js'
@@ -42,14 +41,10 @@
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 {
- static propTpyes = {
- editElem: PropTypes.any,
- updateStyle: PropTypes.func,
- }
-
state = {
card: null,
fonts: null,
@@ -167,7 +162,7 @@
this.callback = null
}
- updateStyle = (style, prop) => {
+ updateStyle = (style) => {
const { card } = this.state
let _style = {
@@ -175,8 +170,16 @@
...style
}
- if (prop && !_style[prop]) {
- delete _style[prop]
+ Object.keys(style).forEach(key => {
+ if (!_style[key] && _style[key] !== 0) {
+ delete _style[key]
+ }
+ })
+
+ if (_style.position === 'relative' || _style.position === 'absolute') {
+ _style.zIndex = 1
+ } else {
+ delete _style.zIndex
}
this.setState({
@@ -282,7 +285,7 @@
* @description 淇敼鑳屾櫙棰滆壊 锛岄鑹叉帶浠�
*/
changeBackgroundColor = (val) => {
- this.updateStyle({backgroundColor: val}, 'backgroundColor')
+ this.updateStyle({backgroundColor: val})
}
changeBackground = (val) => {
@@ -442,15 +445,86 @@
}
changeWidth = (val) => {
- this.updateStyle({width: val === '0px' ? '' : val}, 'width')
+ this.updateStyle({width: val})
}
changeHeight = (val) => {
- this.updateStyle({height: val === '0px' ? '' : val}, 'height')
+ this.updateStyle({height: val})
}
changeNormalStyle = (val, type) => {
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 () {
@@ -492,7 +566,7 @@
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', '%', 'auto']} onChange={this.changeWidth}/>
+ <StyleInput clear={true} defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%', 'auto']} onChange={this.changeWidth}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -503,7 +577,7 @@
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}/>
+ <StyleInput clear={true} defaultValue={card.height || ''} options={['px', 'vh', 'vw']} onChange={this.changeHeight}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -561,7 +635,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 +845,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}
@@ -791,7 +865,7 @@
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')}/>
+ <StyleInput clear={true} defaultValue={card.borderRadius || ''} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -802,7 +876,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}
@@ -847,7 +921,7 @@
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')}/>
+ <StyleInput clear={true} defaultValue={card.marginTop || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -856,7 +930,7 @@
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')}/>
+ <StyleInput clear={true} defaultValue={card.marginBottom || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -865,7 +939,7 @@
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')}/>
+ <StyleInput clear={true} defaultValue={card.marginLeft || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -874,7 +948,7 @@
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')}/>
+ <StyleInput clear={true} defaultValue={card.marginRight || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -885,7 +959,7 @@
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')}/>
+ <StyleInput clear={true} defaultValue={card.paddingTop || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -894,7 +968,7 @@
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')}/>
+ <StyleInput clear={true} defaultValue={card.paddingBottom || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -903,7 +977,7 @@
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')}/>
+ <StyleInput clear={true} defaultValue={card.paddingLeft || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -912,7 +986,7 @@
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')}/>
+ <StyleInput clear={true} defaultValue={card.paddingRight || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -938,7 +1012,7 @@
label={<ColumnHeightOutlined title="鏈�灏忛珮搴�"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.minHeight || ''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'minHeight')}/>
+ <StyleInput clear={true} defaultValue={card.minHeight || ''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'minHeight')}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -970,10 +1044,65 @@
</Form.Item>
</Col>
</Panel> : null}
+ {options.includes('position') ? <Panel header="瀹氫綅" key="position">
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<SwapOutlined title="瀹氫綅"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.position || 'unset'} onChange={(e) => this.changeNormalStyle(e.target.value, 'position')}>
+ <Radio value="unset">鏃�</Radio>
+ <Radio value="relative">鐩稿瀹氫綅</Radio>
+ <Radio value="absolute">缁濆瀹氫綅</Radio>
+ </Radio.Group>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<ArrowUpOutlined title="涓�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <StyleInput clear={true} defaultValue={card.top || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'top')}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<ArrowDownOutlined title="涓�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <StyleInput clear={true} defaultValue={card.bottom || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'bottom')}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<ArrowLeftOutlined title="宸�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <StyleInput clear={true} defaultValue={card.left || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'left')}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<ArrowRightOutlined title="鍙�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <StyleInput clear={true} defaultValue={card.right || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'right')}/>
+ </Form.Item>
+ </Col>
+ </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