From 2d5d60d5f165546299d1b42004b1469cb6d2b3ef Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 09 三月 2023 11:53:13 +0800
Subject: [PATCH] 2023-03-09
---
src/pc/bgcontroller/index.jsx | 151 +++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 129 insertions(+), 22 deletions(-)
diff --git a/src/pc/bgcontroller/index.jsx b/src/pc/bgcontroller/index.jsx
index 63c0545..35f3fd0 100644
--- a/src/pc/bgcontroller/index.jsx
+++ b/src/pc/bgcontroller/index.jsx
@@ -1,14 +1,15 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Form, Select } from 'antd'
-import { ArrowUpOutlined, ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons'
+import { Form, Select, Input } from 'antd'
+import { ArrowUpOutlined, ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined, BgColorsOutlined, ColumnWidthOutlined } from '@ant-design/icons'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const StyleInput = asyncComponent(() => import('@/menu/stylecontroller/styleInput'))
+const SysColorSketch = asyncComponent(() => import('@/menu/stylecontroller/syscolorsketch'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
const { Option } = Select
@@ -19,11 +20,12 @@
}
state = {
+ background: '',
backgroundColor: '',
backgroundImage: '',
backgroundSize: '',
backgroundRepeat: '',
- backgroundPositon: '',
+ backgroundPosition: '',
opacity: '',
}
@@ -38,11 +40,12 @@
}
this.setState({
+ background: config.style.background || '',
backgroundColor: config.style.backgroundColor,
backgroundImage: bgImg,
backgroundSize: config.style.backgroundSize || '100%',
backgroundRepeat: config.style.backgroundRepeat || 'repeat',
- backgroundPositon: config.style.backgroundPositon || 'center'
+ backgroundPosition: config.style.backgroundPosition || 'center'
})
}
@@ -114,18 +117,87 @@
backgroundPositonChange = (val) => {
this.setState({
- backgroundPositon: val
+ backgroundPosition: val
})
let config = fromJS(this.props.config).toJS()
- config.style.backgroundPositon = val
+ config.style.backgroundPosition = val
+
+ this.props.updateConfig(config)
+ }
+
+ changeBackground = (val) => {
+ this.setState({
+ background: val,
+ })
+
+ if (!val || /(^linear-gradient|^radial-gradient)\(.*\)$/.test(val)) {
+ let config = fromJS(this.props.config).toJS()
+ config.style.background = val
+
+ delete config.style.backgroundColor
+ delete config.style.backgroundImage
+
+ if (!val) {
+ delete config.style.background
+ }
+
+ this.setState({
+ backgroundImage: '',
+ backgroundColor: ''
+ })
+
+ this.props.updateConfig(config)
+ }
+ }
+
+ /**
+ * @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠�
+ */
+ changeShadowColor = (val) => {
+ let config = fromJS(this.props.config).toJS()
+ config.style.shadowColor = val
+ config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`
+
+ this.props.updateConfig(config)
+ }
+
+ /**
+ * @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠�
+ */
+ changeShadowBlur = (val) => {
+ let config = fromJS(this.props.config).toJS()
+ config.style.shadowBlur = val
+ config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`
+
+ this.props.updateConfig(config)
+ }
+
+ /**
+ * @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠�
+ */
+ changeHShadow = (val) => {
+ let config = fromJS(this.props.config).toJS()
+ config.style.hShadow = val
+ config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`
+
+ this.props.updateConfig(config)
+ }
+
+ /**
+ * @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠�
+ */
+ changeVShadow = (val) => {
+ let config = fromJS(this.props.config).toJS()
+ config.style.vShadow = val
+ config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`
this.props.updateConfig(config)
}
render () {
- const { config } = this.props
- const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, backgroundPositon } = this.state
+ const { config, type } = this.props
+ const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, backgroundPosition, background } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -140,15 +212,22 @@
return (
<div className="pc-style-controller">
<Form {...formItemLayout}>
- <Form.Item
+ {/* <Form.Item
colon={false}
label="瀹藉害"
+ className="normal-view"
>
<StyleInput defaultValue={config.style.width || '100%'} options={['px', '%', 'vw']} onChange={(val) => this.changePadding(val, 'width')}/>
- </Form.Item>
- <Form.Item className="color-control" colon={false} label="鑳屾櫙鑹�">
+ </Form.Item> */}
+ <Form.Item className="color-control" style={{marginBottom: '0px'}} colon={false} label="鑳屾櫙鑹�">
<ColorSketch value={backgroundColor} onChange={this.changeBackgroundColor} />
</Form.Item>
+ <Form.Item colon={false} label="绯荤粺鑹�">
+ <SysColorSketch onChange={this.changeBackgroundColor} />
+ </Form.Item>
+ {window.develop === true ? <Form.Item colon={false} label="棰滆壊">
+ <Input value={background} onChange={(e) => this.changeBackground(e.target.value)} />
+ </Form.Item> : null}
<Form.Item colon={false} label="鑳屾櫙鍥�">
<SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/>
</Form.Item>
@@ -157,6 +236,8 @@
<Option value="100%">100%</Option>
<Option value="100% 100%">100% 100%</Option>
<Option value="auto 100%">auto 100%</Option>
+ <Option value="100% auto">100% auto</Option>
+ <Option value="auto">auto</Option>
<Option value="contain">contain</Option>
<Option value="cover">cover</Option>
</Select>
@@ -170,61 +251,87 @@
</Select>
</Form.Item>
<Form.Item colon={false} label="浣嶇疆">
- <Select defaultValue={backgroundPositon} onChange={this.backgroundPositonChange}>
+ <Select defaultValue={backgroundPosition} onChange={this.backgroundPositonChange}>
<Option value="center">center</Option>
<Option value="top">top</Option>
<Option value="bottom">bottom</Option>
</Select>
</Form.Item>
- <p style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>鍐呰竟璺�</p>
+ {type === 'mob_popview' ? <p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>闃村奖</p> : null}
+ {type === 'mob_popview' ? <>
+ <Form.Item colon={false} label={<BgColorsOutlined title="闃村奖棰滆壊"/>}>
+ <ColorSketch value={config.style.shadowColor || 'transparent'} onChange={this.changeShadowColor} />
+ </Form.Item>
+ <Form.Item colon={false} label={<BgColorsOutlined title="绯荤粺鑹�"/>}>
+ <SysColorSketch onChange={this.changeShadowColor} />
+ </Form.Item>
+ <Form.Item colon={false} label={<ColumnWidthOutlined title="妯＄硦璺濈"/>}>
+ <StyleInput defaultValue={config.style.shadowBlur || '0px'} options={['px']} onChange={this.changeShadowBlur}/>
+ </Form.Item>
+ <Form.Item colon={false} label={<ArrowRightOutlined title="姘村钩浣嶇疆"/>}>
+ <StyleInput defaultValue={config.style.hShadow || '0px'} options={['px']} onChange={this.changeHShadow}/>
+ </Form.Item>
+ <Form.Item colon={false} label={<ArrowDownOutlined title="鍨傜洿浣嶇疆"/>}>
+ <StyleInput defaultValue={config.style.vShadow || '0px'} options={['px']} onChange={this.changeVShadow}/>
+ </Form.Item>
+ </> : null}
+ <p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>鍐呰竟璺�</p>
<Form.Item
colon={false}
+ className="normal-view"
label={<ArrowUpOutlined title="涓婅竟璺�"/>}
>
- <StyleInput defaultValue={config.style.paddingTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingTop')}/>
+ <StyleInput defaultValue={config.style.paddingTop || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingTop')}/>
</Form.Item>
<Form.Item
colon={false}
+ className="normal-view"
label={<ArrowDownOutlined title="涓嬭竟璺�"/>}
>
- <StyleInput defaultValue={config.style.paddingBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingBottom')}/>
+ <StyleInput defaultValue={config.style.paddingBottom || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingBottom')}/>
</Form.Item>
<Form.Item
colon={false}
+ className="normal-view"
label={<ArrowLeftOutlined title="宸﹁竟璺�"/>}
>
- <StyleInput defaultValue={config.style.paddingLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingLeft')}/>
+ <StyleInput defaultValue={config.style.paddingLeft || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingLeft')}/>
</Form.Item>
<Form.Item
colon={false}
+ className="normal-view"
label={<ArrowRightOutlined title="鍙宠竟璺�"/>}
>
- <StyleInput defaultValue={config.style.paddingRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingRight')}/>
+ <StyleInput defaultValue={config.style.paddingRight || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingRight')}/>
</Form.Item>
- <p style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>澶栬竟璺�</p>
+ <p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>澶栬竟璺�</p>
<Form.Item
colon={false}
+ className="normal-view"
label={<ArrowUpOutlined title="涓婅竟璺�"/>}
>
- <StyleInput defaultValue={config.style.marginTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginTop')}/>
+ <StyleInput defaultValue={config.style.marginTop || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginTop')}/>
</Form.Item>
<Form.Item
colon={false}
+ className="normal-view"
label={<ArrowDownOutlined title="涓嬭竟璺�"/>}
>
- <StyleInput defaultValue={config.style.marginBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginBottom')}/>
+ <StyleInput defaultValue={config.style.marginBottom || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginBottom')}/>
</Form.Item>
<Form.Item
colon={false}
+ className="normal-view"
label={<ArrowLeftOutlined title="宸﹁竟璺�"/>}
>
- <StyleInput defaultValue={config.style.marginLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginLeft')}/>
+ <StyleInput defaultValue={config.style.marginLeft || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginLeft')}/>
</Form.Item>
<Form.Item
colon={false}
+ className="normal-view"
label={<ArrowRightOutlined title="鍙宠竟璺�"/>}
>
- <StyleInput defaultValue={config.style.marginRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginRight')}/>
+ <StyleInput defaultValue={config.style.marginRight || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginRight')}/>
</Form.Item>
</Form>
</div>
--
Gitblit v1.8.0