From 2aa5ab63b4bbce5c36dbb3511b205b3b5f6af9bd Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 07 五月 2024 11:34:20 +0800
Subject: [PATCH] 2024-05-07
---
src/menu/stylecontroller/index.jsx | 241 ++++++++++++++++++++++++++++++++++++++---------
1 files changed, 194 insertions(+), 47 deletions(-)
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index 163a7c6..c5ed9e0 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/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,
@@ -29,7 +29,8 @@
ArrowRightOutlined,
SwapOutlined,
EnterOutlined,
- DragOutlined
+ DragOutlined,
+ EyeOutlined
} from '@ant-design/icons'
import MKEmitter from '@/utils/events.js'
@@ -52,10 +53,12 @@
backgroundImage: '',
options: [],
borposition: 'outer',
- type: ''
+ type: '',
+ logo: sessionStorage.getItem('CloudLogo') || MainLogo
}
callback = null
+ timer = null
shouldComponentUpdate (nextProps, nextState) {
return !is(fromJS(this.state), fromJS(nextState))
@@ -96,6 +99,8 @@
}
this.callback = callback
+ this.timer = null
+
let card = fromJS(style).toJS()
let borposition = 'outer'
@@ -126,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)
}
@@ -163,7 +175,7 @@
this.callback = null
}
- updateStyle = (style) => {
+ updateStyle = (style, delay) => {
const { card } = this.state
let _style = {
@@ -191,7 +203,15 @@
card: _style,
})
- this.callback && this.callback(_style)
+ this.timer && clearTimeout(this.timer)
+
+ if (delay) {
+ this.timer = setTimeout(() => {
+ this.callback && this.callback(_style)
+ }, 300)
+ } else {
+ this.callback && this.callback(_style)
+ }
}
/**
@@ -208,7 +228,7 @@
value = 300
}
- this.updateStyle({fontSize: `${value}px`})
+ this.updateStyle({fontSize: `${value}px`}, true)
}
/**
@@ -219,7 +239,7 @@
if (isNaN(value) || value < 1 || value > 10) return
- this.updateStyle({lineHeight: value})
+ this.updateStyle({lineHeight: value}, true)
}
/**
@@ -230,7 +250,7 @@
if (isNaN(value) || value < 0 || value > 100) return
- this.updateStyle({letterSpacing: `${value}px`})
+ this.updateStyle({letterSpacing: `${value}px`}, true)
}
/**
@@ -241,7 +261,7 @@
if (isNaN(value) || value < 0 || value > 100) return
- this.updateStyle({textIndent: `${value}px`})
+ this.updateStyle({textIndent: `${value}px`}, true)
}
changeBackground = (val) => {
@@ -273,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})
}
@@ -415,12 +435,106 @@
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 || {}
+
+ if (JSON.stringify(res.options) !== JSON.stringify(options)) {
+ res.options.forEach(n => {
+ if (options.includes(n)) return
+
+ if (n === 'width') {
+ delete style.width
+ } else if (n === 'height') {
+ delete style.height
+ } else if (n === 'font') {
+ if (options.includes('font1')) {
+ ['lineHeight', 'letterSpacing', 'fontStyle', 'textAlign', 'textDecoration'].forEach(m => {
+ delete style[m]
+ })
+ } else if (options.includes('font2')) {
+
+ } else {
+ ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration'].forEach(m => {
+ delete style[m]
+ })
+ }
+ } else if (n === 'font1') {
+ if (options.includes('font') || options.includes('font2')) {
+
+ } else {
+ ['fontSize', 'fontWeight', 'color'].forEach(m => {
+ delete style[m]
+ })
+ }
+ } else if (n === 'font2') {
+ if (options.includes('font')) {
+ ['textIndent', 'wordBreak'].forEach(m => {
+ delete style[m]
+ })
+ } else if (options.includes('font1')) {
+ ['lineHeight', 'letterSpacing', 'fontStyle', 'textAlign', 'textDecoration', 'textIndent', 'wordBreak'].forEach(m => {
+ delete style[m]
+ })
+ } else {
+ ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration', 'textIndent', 'wordBreak'].forEach(m => {
+ delete style[m]
+ })
+ }
+ } else if (n === 'background') {
+ if (!options.includes('backgroundColor')) {
+ delete style.backgroundColor
+ }
+ delete style.backgroundImage
+ delete style.backgroundSize
+ delete style.backgroundRepeat
+ delete style.backgroundPosition
+ } else if (n === 'backgroundColor') {
+ if (!options.includes('background')) {
+ delete style.backgroundColor
+ }
+ } else if (n === 'border') {
+ Object.keys(style).forEach(key => {
+ if (!/border/.test(key)) return
+ delete style[key]
+ })
+ } else if (n === 'shadow') {
+ delete style.boxShadow
+ delete style.hShadow
+ delete style.vShadow
+ delete style.shadowBlur
+ delete style.shadowColor
+ } else if (n === 'margin') {
+ delete style.marginTop
+ delete style.marginBottom
+ delete style.marginLeft
+ delete style.marginRight
+ } else if (n === 'padding') {
+ delete style.paddingTop
+ delete style.paddingBottom
+ delete style.paddingLeft
+ delete style.paddingRight
+ } else if (n === 'float') {
+ delete style.float
+ } else if (n === 'minHeight') {
+ delete style.minHeight
+ } else if (n === 'clear') {
+ delete style.clear
+ } else if (n === 'display') {
+ delete style.display
+ } else if (n === 'position') {
+ delete style.position
+ delete style.top
+ delete style.bottom
+ delete style.left
+ delete style.right
+ } else if (n === 'transform') {
+ delete style.transform
+ } else if (n === 'overflow') {
+ delete style.overflow
+ }
+ })
+ }
let backgroundImage = ''
if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) {
@@ -455,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 },
@@ -471,7 +585,7 @@
<Drawer
title={
<div className="header-logo">
- <img src={MainLogo} alt=""/>
+ <img src={logo} alt=""/>
</div>
}
placement="left"
@@ -610,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}
@@ -759,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}>
@@ -772,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}
@@ -803,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}
@@ -962,7 +1095,7 @@
<Col span={24}>
<Form.Item
colon={false}
- label={<SwapOutlined title="娴姩"/>}
+ label={<SwapOutlined title="鏄剧ず"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
<Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.display || 'block'} onChange={(e) => this.changeNormalStyle(e.target.value, 'display')}>
@@ -972,6 +1105,20 @@
</Form.Item>
</Col>
</Panel> : null}
+ {options.includes('overflow') ? <Panel header="婧㈠嚭" key="overflow">
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<EyeOutlined title="婧㈠嚭"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.overflow || 'hidden'} onChange={(e) => this.changeNormalStyle(e.target.value, 'overflow')}>
+ <Radio value="hidden">闅愯棌</Radio>
+ <Radio value="visible">鏄剧ず</Radio>
+ </Radio.Group>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
{options.includes('position') ? <Panel header="瀹氫綅" key="position">
<div style={{paddingLeft: '35px', fontSize: '12px'}}>娉細瀹氫綅鏁堟灉璇峰湪杩愯鐜涓煡鐪嬨��</div>
<Col span={24}>
--
Gitblit v1.8.0