From 0b8381328068394891541b6e3824f9afb2cc9fa1 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 04 七月 2023 13:53:33 +0800
Subject: [PATCH] 2023-07-04
---
src/menu/stylecontroller/index.jsx | 150 ++++++++++++++++---------------------------------
1 files changed, 50 insertions(+), 100 deletions(-)
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index a781f01..f47e2fc 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -176,8 +176,12 @@
}
})
- if (_style.position === 'relative' || _style.position === 'absolute') {
+ if (_style.position === 'relative') {
_style.zIndex = 1
+ } else if (_style.position === 'absolute') {
+ _style.zIndex = 2
+ } else if (_style.position === 'fixed') {
+ _style.zIndex = 3
} else {
delete _style.zIndex
}
@@ -239,55 +243,6 @@
this.updateStyle({textIndent: `${value}px`})
}
- /**
- * @description 淇敼瀛椾綋绮楃粏
- */
- boldChange = (val) => {
- this.updateStyle({fontWeight: val})
- }
-
- /**
- * @description 鑷姩鎹㈣
- */
- wordBreakChange = (val) => {
- this.updateStyle({wordBreak: val})
- }
-
- /**
- * @description 淇敼瀛椾綋棰滆壊 锛岄鑹叉帶浠�
- */
- changeFontColor = (val) => {
- this.updateStyle({color: val})
- }
-
- /**
- * @description 瀛椾綋瀵归綈
- */
- changeTextAlign = (e) => {
- this.updateStyle({textAlign: e.target.value})
- }
-
- /**
- * @description 瀛椾綋鏍峰紡锛屽�炬枩
- */
- changeFontStyle = (e) => {
- this.updateStyle({fontStyle: e.target.value})
- }
-
- /**
- * @description 瀛椾綋瑁呴グ锛屼笅鍒掔嚎銆佽疮绌跨嚎銆佷笂鍒掔嚎
- */
- changeTextDecoration = (e) => {
- this.updateStyle({textDecoration: e.target.value})
- }
-
- /**
- * @description 淇敼鑳屾櫙棰滆壊 锛岄鑹叉帶浠�
- */
- changeBackgroundColor = (val) => {
- this.updateStyle({backgroundColor: val})
- }
-
changeBackground = (val) => {
const { card } = this.state
@@ -309,27 +264,6 @@
if (!val || /(^linear-gradient|^radial-gradient)\(.*\)$/.test(val)) {
this.callback && this.callback(_style)
}
- }
-
- /**
- * @description 淇敼鑳屾櫙澶у皬
- */
- changeBackgroundSize = (val) => {
- this.updateStyle({backgroundSize: val})
- }
-
- /**
- * @description 淇敼鑳屾櫙浣嶇疆
- */
- changeBackgroundPositon= (val) => {
- this.updateStyle({backgroundPosition: val})
- }
-
- /**
- * @description 淇敼鑳屾櫙閲嶅璁剧疆
- */
- changeBackgroundRepeat = (val) => {
- this.updateStyle({backgroundRepeat: val})
}
/**
@@ -442,14 +376,6 @@
}
this.updateStyle(_style)
- }
-
- changeWidth = (val) => {
- this.updateStyle({width: val})
- }
-
- changeHeight = (val) => {
- this.updateStyle({height: val})
}
changeNormalStyle = (val, type) => {
@@ -566,7 +492,7 @@
label={<ColumnWidthOutlined title="瀹藉害"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput clear={true} defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%', 'auto']} onChange={this.changeWidth}/>
+ <StyleInput clear={true} defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%', 'auto']} onChange={(val) => this.changeNormalStyle(val, 'width')}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -577,7 +503,7 @@
label={<ColumnHeightOutlined title="楂樺害"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput clear={true} defaultValue={card.height || ''} options={['px', 'vh', 'vw']} onChange={this.changeHeight}/>
+ <StyleInput clear={true} defaultValue={card.height || ''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'height')}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -589,7 +515,7 @@
</Col> : null}
{fonts.includes('fontWeight') ? <Col span={12}>
<Form.Item colon={false} label={<BoldOutlined title="瀛椾綋绮楃粏"/>}>
- <Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}>
+ <Select defaultValue={card.fontWeight || 'normal'} onChange={(val) => this.changeNormalStyle(val, 'fontWeight')}>
<Option value="normal">normal</Option>
<Option value="bold">bold</Option>
<Option value="bolder">bolder</Option>
@@ -623,7 +549,7 @@
</Col> : null}
{fonts.includes('wordBreak') ? <Col span={12}>
<Form.Item colon={false} label={<EnterOutlined title="鑷姩鎹㈣"/>}>
- <Select defaultValue={card.wordBreak || 'normal'} onChange={this.wordBreakChange}>
+ <Select defaultValue={card.wordBreak || 'normal'} onChange={(val) => this.changeNormalStyle(val, 'wordBreak')}>
<Option value="normal">normal</Option>
<Option value="break-all">break-all</Option>
</Select>
@@ -635,14 +561,14 @@
label={<FontColorsOutlined title="瀛椾綋棰滆壊"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch value={card.color || ''} onChange={this.changeFontColor} />
+ <ColorSketch value={card.color || ''} onChange={(val) => this.changeNormalStyle(val, 'color')} />
</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} />
+ <SysColorSketch onChange={(val) => this.changeNormalStyle(val, 'color')} />
</Form.Item>
</Col> : null}
{fonts.includes('fontStyle') ? <Col span={24}>
@@ -651,7 +577,7 @@
label={' '}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Radio.Group defaultValue={card.fontStyle || 'normal'} onChange={this.changeFontStyle}>
+ <Radio.Group defaultValue={card.fontStyle || 'normal'} onChange={(e) => this.changeNormalStyle(e.target.value, 'fontStyle')}>
<Radio.Button value="normal"><span title="鏍囧噯">N</span></Radio.Button>
<Radio.Button value="italic"><ItalicOutlined title="鏂滀綋"/></Radio.Button>
<Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="鍊炬枩">B</span></Radio.Button>
@@ -664,7 +590,7 @@
label={' '}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Radio.Group className="text-align" defaultValue={card.textAlign || 'left'} onChange={this.changeTextAlign}>
+ <Radio.Group className="text-align" defaultValue={card.textAlign || 'left'} onChange={(e) => this.changeNormalStyle(e.target.value, 'textAlign')}>
<Radio.Button value="left"><AlignLeftOutlined title="宸﹀榻�"/></Radio.Button>
<Radio.Button value="center"><AlignCenterOutlined title="灞呬腑瀵归綈"/></Radio.Button>
<Radio.Button value="right"><AlignRightOutlined title="鍙冲榻�"/></Radio.Button>
@@ -677,7 +603,7 @@
label={' '}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Radio.Group className="text-decoration" defaultValue={card.textDecoration || 'none'} onChange={this.changeTextDecoration}>
+ <Radio.Group className="text-decoration" defaultValue={card.textDecoration || 'none'} onChange={(e) => this.changeNormalStyle(e.target.value, 'textDecoration')}>
<Radio.Button value="none"><span title="鏍囧噯">N</span></Radio.Button>
<Radio.Button value="underline"><UnderlineOutlined title="涓嬪垝绾�"/></Radio.Button>
<Radio.Button value="line-through"><StrikethroughOutlined title="涓垝绾�"/></Radio.Button>
@@ -693,14 +619,14 @@
label={<BgColorsOutlined title="鑳屾櫙棰滆壊"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch allowClear={true} value={card.backgroundColor || ''} onChange={this.changeBackgroundColor} />
+ <ColorSketch allowClear={true} value={card.backgroundColor || ''} onChange={(val) => this.changeNormalStyle(val, 'backgroundColor')} />
</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} />
+ <SysColorSketch onChange={(val) => this.changeNormalStyle(val, 'backgroundColor')} />
</Form.Item>
</Col>
{window.develop === true ? <Col span={24}>
@@ -727,7 +653,7 @@
label="姣斾緥"
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Select defaultValue={card.backgroundSize || 'cover'} onChange={this.changeBackgroundSize}>
+ <Select defaultValue={card.backgroundSize || 'cover'} onChange={(val) => this.changeNormalStyle(val, 'backgroundSize')}>
<Option value="100%">100%</Option>
<Option value="100% 100%">100% 100%</Option>
<Option value="auto 100%">auto 100%</Option>
@@ -744,7 +670,7 @@
label="閲嶅"
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Select defaultValue={card.backgroundRepeat || 'no-repeat'} onChange={this.changeBackgroundRepeat}>
+ <Select defaultValue={card.backgroundRepeat || 'no-repeat'} onChange={(val) => this.changeNormalStyle(val, 'backgroundRepeat')}>
<Option value="repeat">repeat</Option>
<Option value="no-repeat">no-repeat</Option>
<Option value="repeat-x">repeat-x</Option>
@@ -758,7 +684,7 @@
label="浣嶇疆"
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Select defaultValue={card.backgroundPosition || 'center'} onChange={this.changeBackgroundPositon}>
+ <Select defaultValue={card.backgroundPosition || 'center'} onChange={(val) => this.changeNormalStyle(val, 'backgroundPosition')}>
<Option value="center">center</Option>
<Option value="center top">center top</Option>
<Option value="center bottom">center bottom</Option>
@@ -1045,16 +971,18 @@
</Col>
</Panel> : null}
{options.includes('position') ? <Panel header="瀹氫綅" key="position">
+ <div style={{paddingLeft: '35px', fontSize: '12px'}}>娉細瀹氫綅鏁堟灉璇峰湪杩愯鐜涓煡鐪嬨��</div>
<Col span={24}>
<Form.Item
colon={false}
label={<SwapOutlined title="瀹氫綅"/>}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
>
<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 value="relative">鐩稿</Radio>
+ <Radio value="absolute">缁濆</Radio>
+ <Radio value="fixed">鍥哄畾</Radio>
</Radio.Group>
</Form.Item>
</Col>
@@ -1062,7 +990,7 @@
<Form.Item
colon={false}
label={<ArrowUpOutlined title="涓�"/>}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
>
<StyleInput clear={true} defaultValue={card.top || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'top')}/>
</Form.Item>
@@ -1071,7 +999,7 @@
<Form.Item
colon={false}
label={<ArrowDownOutlined title="涓�"/>}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
>
<StyleInput clear={true} defaultValue={card.bottom || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'bottom')}/>
</Form.Item>
@@ -1080,7 +1008,7 @@
<Form.Item
colon={false}
label={<ArrowLeftOutlined title="宸�"/>}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
>
<StyleInput clear={true} defaultValue={card.left || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'left')}/>
</Form.Item>
@@ -1089,12 +1017,34 @@
<Form.Item
colon={false}
label={<ArrowRightOutlined title="鍙�"/>}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
>
<StyleInput clear={true} defaultValue={card.right || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'right')}/>
</Form.Item>
</Col>
</Panel> : null}
+ {options.includes('transform') ? <Panel header="浣嶇疆鍙樻崲" key="transform">
+ <div style={{paddingLeft: '50px', fontSize: '12px'}}>娉細鍙樻崲鏁堟灉璇峰湪杩愯鐜涓煡鐪嬨��</div>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<BorderOuterOutlined title="鍙樻崲"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Select defaultValue={card.transform || ''} onChange={(val) => this.changeNormalStyle(val, 'transform')}>
+ <Option value="">鏃�</Option>
+ <Option value="translateY(-50%)">涓婄Щ50%</Option>
+ <Option value="translateY(50%)">涓嬬Щ50%</Option>
+ <Option value="translateX(-50%)">宸︾Щ50%</Option>
+ <Option value="translateX(50%)">鍙崇Щ50%</Option>
+ <Option value="translate(-50%, -50%)">宸︿笂绉�50%</Option>
+ <Option value="translate(-50%, 50%)">宸︿笅绉�50%</Option>
+ <Option value="translate(50%, -50%)">鍙充笂绉�50%</Option>
+ <Option value="translate(50%, 50%)">鍙充笅绉�50%</Option>
+ </Select>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
</Collapse> : null}
</Form>
<div style={{textAlign: 'right', lineHeight: '60px', marginBottom: '30px'}}>
--
Gitblit v1.8.0