From 34e7681fd12b1c4e4994d3bea1a553870e10bc50 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期六, 11 三月 2023 17:58:54 +0800
Subject: [PATCH] 2023-03-11
---
src/menu/stylecontroller/index.jsx | 91 ++++++++++++++++++++++++++++++---------------
1 files changed, 61 insertions(+), 30 deletions(-)
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index 053ee15..e06a198 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -35,6 +35,7 @@
import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
import StyleInput from './styleInput'
+import SysColorSketch from './syscolorsketch'
import MainLogo from '@/assets/img/main-logo.png'
import './index.scss'
@@ -54,7 +55,8 @@
fonts: null,
backgroundImage: '',
options: [],
- borposition: 'outer'
+ borposition: 'outer',
+ type: ''
}
callback = null
@@ -77,7 +79,7 @@
MKEmitter.removeListener('changeStyle', this.initStyle)
}
- initStyle = (options, style = {}, callback) => {
+ initStyle = (options, style = {}, callback, type) => {
let backgroundImage = ''
if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) {
backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
@@ -115,6 +117,7 @@
this.setState({
visible: true,
+ type: type || '',
fonts: fonts,
card: card,
options: options,
@@ -164,12 +167,16 @@
this.callback = null
}
- updateStyle = (style) => {
+ updateStyle = (style, prop) => {
const { card } = this.state
let _style = {
...card,
...style
+ }
+
+ if (prop && !_style[prop]) {
+ delete _style[prop]
}
this.setState({
@@ -275,7 +282,7 @@
* @description 淇敼鑳屾櫙棰滆壊 锛岄鑹叉帶浠�
*/
changeBackgroundColor = (val) => {
- this.updateStyle({backgroundColor: val})
+ this.updateStyle({backgroundColor: val}, 'backgroundColor')
}
changeBackground = (val) => {
@@ -435,21 +442,11 @@
}
changeWidth = (val) => {
- let _val = val
- if (_val === '0px') {
- _val = 'auto'
- }
-
- this.updateStyle({width: _val})
+ this.updateStyle({width: val === '0px' ? '' : val}, 'width')
}
changeHeight = (val) => {
- let _val = val
- if (_val === '0px') {
- _val = 'auto'
- }
-
- this.updateStyle({height: _val})
+ this.updateStyle({height: val === '0px' ? '' : val}, 'height')
}
changeNormalStyle = (val, type) => {
@@ -457,7 +454,7 @@
}
render () {
- const { card, options, backgroundImage, borposition, fonts } = this.state
+ const { card, options, backgroundImage, borposition, fonts, type } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -485,7 +482,7 @@
maskStyle={{opacity: 0.1}}
visible={this.state.visible}
>
- <div className="menu-style-controller">
+ <div className={'menu-style-controller ' + (type || '')}>
<Form {...formItemLayout}>
{card ? <Collapse expandIconPosition="right" destroyInactivePanel={true} defaultActiveKey={options[0]}>
{options.includes('width') ? <Panel header="瀹藉害" key="width">
@@ -495,7 +492,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', '%']} onChange={this.changeWidth}/>
+ <StyleInput defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%', 'auto']} onChange={this.changeWidth}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -566,6 +563,13 @@
>
<ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} />
</Form.Item>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="绯荤粺鑹�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <SysColorSketch onChange={this.changeFontColor} />
+ </Form.Item>
</Col> : null}
{fonts.includes('fontStyle') ? <Col span={24}>
<Form.Item
@@ -609,13 +613,20 @@
</Col> : null}
</Panel> : null}
{options.includes('background') || options.includes('backgroundColor') ? <Panel header="鑳屾櫙" key="background">
- <Col span={24}>
+ <Col span={24} className="bg-color-panel">
<Form.Item
colon={false}
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} />
+ <ColorSketch allowClear={true} value={card.backgroundColor || ''} onChange={this.changeBackgroundColor} />
+ </Form.Item>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="绯荤粺鑹�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <SysColorSketch onChange={this.changeBackgroundColor} />
</Form.Item>
</Col>
{window.develop === true ? <Col span={24}>
@@ -627,7 +638,7 @@
<Input value={card.background || ''} onChange={(e) => this.changeBackground(e.target.value)} />
</Form.Item>
</Col> : null}
- {!options.includes('backgroundColor') ? <Col span={24}>
+ {!options.includes('backgroundColor') ? <Col span={24} className="bg-image-panel">
<Form.Item
colon={false}
label={<PictureOutlined title="鑳屾櫙鍥剧墖"/>}
@@ -675,8 +686,14 @@
>
<Select defaultValue={card.backgroundPosition || 'center'} onChange={this.changeBackgroundPositon}>
<Option value="center">center</Option>
- <Option value="top">top</Option>
- <Option value="bottom">bottom</Option>
+ <Option value="center top">center top</Option>
+ <Option value="center bottom">center bottom</Option>
+ <Option value="left top">left top</Option>
+ <Option value="left center">left center</Option>
+ <Option value="left bottom">left bottom</Option>
+ <Option value="right top">right top</Option>
+ <Option value="right center">right center</Option>
+ <Option value="right bottom">right bottom</Option>
</Select>
</Form.Item>
</Col> : null}
@@ -754,11 +771,18 @@
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}
- {borposition === 'left' ? <ColorSketch defaultValue={card.borderLeftColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'right' ? <ColorSketch defaultValue={card.borderRightColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'top' ? <ColorSketch defaultValue={card.borderTopColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'bottom' ? <ColorSketch defaultValue={card.borderBottomColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
+ {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}
+ </Form.Item>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="绯荤粺鑹�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <SysColorSketch onChange={this.changeBorderColor} />
</Form.Item>
</Col>
<Col span={24}>
@@ -779,6 +803,13 @@
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
<ColorSketch value={card.shadowColor || 'transparent'} onChange={this.changeShadowColor} />
+ </Form.Item>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="绯荤粺鑹�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <SysColorSketch onChange={this.changeShadowColor} />
</Form.Item>
</Col>
<Col span={24}>
@@ -907,7 +938,7 @@
label={<ColumnHeightOutlined title="鏈�灏忛珮搴�"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.minHeight || '28px'} options={['px']} onChange={(val) => this.changeNormalStyle(val, 'minHeight')}/>
+ <StyleInput defaultValue={card.minHeight || ''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'minHeight')}/>
</Form.Item>
</Col>
</Panel> : null}
--
Gitblit v1.8.0