From cb9ade2afd2a367ad767bc605ab7086c695dd010 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 09 十二月 2022 15:53:32 +0800
Subject: [PATCH] 2022-12-09
---
src/menu/stylecontroller/index.jsx | 181 +++++++++++++++++++++++++++++++++++++-------
1 files changed, 150 insertions(+), 31 deletions(-)
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index a6143e6..80cde31 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Collapse, Form, Col, InputNumber, Select, Radio, Drawer, Button } from 'antd'
+import { Collapse, Form, Col, InputNumber, Input, Select, Radio, Drawer, Button } from 'antd'
import {
ColumnHeightOutlined,
FontSizeOutlined,
@@ -29,11 +29,13 @@
ArrowLeftOutlined,
ArrowRightOutlined,
SwapOutlined,
+ EnterOutlined,
} from '@ant-design/icons'
import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
import StyleInput from './styleInput'
+import MainLogo from '@/assets/img/main-logo.png'
import './index.scss'
const { Panel } = Collapse
@@ -49,11 +51,13 @@
state = {
card: null,
- comIds: [],
+ fonts: null,
backgroundImage: '',
options: [],
borposition: 'outer'
}
+
+ callback = null
shouldComponentUpdate (nextProps, nextState) {
return !is(fromJS(this.state), fromJS(nextState))
@@ -73,20 +77,37 @@
MKEmitter.removeListener('changeStyle', this.initStyle)
}
- initStyle = (comIds, options, style = {}) => {
+ initStyle = (options, style = {}, callback) => {
let backgroundImage = ''
if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) {
backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
}
+ let fonts = null
+ if (options.includes('font')) {
+ fonts = ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration']
+ } else if (options.includes('font1')) {
+ fonts = ['fontSize', 'fontWeight', 'color']
+ if (options[0] === 'font1') {
+ options[0] = 'font'
+ }
+ } else if (options.includes('font2')) {
+ fonts = ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration', 'textIndent', 'wordBreak']
+ if (options[0] === 'font2') {
+ options[0] = 'font'
+ }
+ }
+
+ this.callback = callback
this.setState({
visible: true,
- comIds: comIds,
+ fonts: fonts,
card: fromJS(style).toJS(),
options: options,
borposition: 'outer',
backgroundImage
})
+ window.GLOB.styling = true
}
onCloseDrawer = () => {
@@ -116,20 +137,21 @@
}
if (check) {
- MKEmitter.emit('submitStyle', this.state.comIds, card)
+ this.callback && this.callback(card)
}
this.setState({
visible: false,
- comIds: [],
card: null,
options: [],
backgroundImage: ''
})
+ window.GLOB.styling = false
+ this.callback = null
}
updateStyle = (style) => {
- const { comIds, card } = this.state
+ const { card } = this.state
let _style = {
...card,
@@ -140,7 +162,7 @@
card: _style,
})
- MKEmitter.emit('submitStyle', comIds, _style)
+ this.callback && this.callback(_style)
}
/**
@@ -149,7 +171,13 @@
changeFontSize = (val) => {
let value = parseInt(val)
- if (isNaN(value) || value < 12 || value > 100) return
+ if (isNaN(value)) return
+
+ if (value < 12) {
+ value = 12
+ } else if (value > 300) {
+ value = 300
+ }
this.updateStyle({fontSize: `${value}px`})
}
@@ -177,10 +205,28 @@
}
/**
+ * @description 棣栬缂╄繘
+ */
+ changeTextIndent = (val) => {
+ let value = parseFloat(val)
+
+ if (isNaN(value) || value < 0 || value > 100) return
+
+ this.updateStyle({textIndent: `${value}px`})
+ }
+
+ /**
* @description 淇敼瀛椾綋绮楃粏
*/
boldChange = (val) => {
this.updateStyle({fontWeight: val})
+ }
+
+ /**
+ * @description 鑷姩鎹㈣
+ */
+ wordBreakChange = (val) => {
+ this.updateStyle({wordBreak: val})
}
/**
@@ -218,6 +264,29 @@
this.updateStyle({backgroundColor: val})
}
+ changeBackground = (val) => {
+ const { card } = this.state
+
+ let _style = { ...card }
+
+ _style.background = val
+
+ delete _style.backgroundColor
+ delete _style.backgroundImage
+
+ if (!val) {
+ delete _style.background
+ }
+
+ this.setState({
+ card: _style,
+ })
+
+ if (!val || /(^linear-gradient|^radial-gradient)\(.*\)$/.test(val)) {
+ this.callback && this.callback(_style)
+ }
+ }
+
/**
* @description 淇敼鑳屾櫙澶у皬
*/
@@ -229,7 +298,7 @@
* @description 淇敼鑳屾櫙浣嶇疆
*/
changeBackgroundPositon= (val) => {
- this.updateStyle({backgroundPositon: val})
+ this.updateStyle({backgroundPosition: val})
}
/**
@@ -374,7 +443,7 @@
}
render () {
- const { card, options, backgroundImage, borposition } = this.state
+ const { card, options, backgroundImage, borposition, fonts } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -390,7 +459,7 @@
<Drawer
title={
<div className="header-logo">
- <img src={window.GLOB.mainlogo} alt=""/>
+ <img src={MainLogo} alt=""/>
</div>
}
placement="left"
@@ -427,13 +496,13 @@
</Form.Item>
</Col>
</Panel> : null}
- {options.includes('font') ? <Panel header="瀛椾綋" key="font">
- <Col span={12}>
+ {fonts ? <Panel header="瀛椾綋" key="font">
+ {fonts.includes('fontSize') ? <Col span={12}>
<Form.Item colon={false} label={<FontSizeOutlined title="瀛椾綋澶у皬"/>}>
- <InputNumber defaultValue={card.fontSize || 14} min={12} max={100} precision={0} onChange={this.changeFontSize} />
+ <InputNumber defaultValue={card.fontSize || 14} min={12} max={300} precision={0} onChange={this.changeFontSize} />
</Form.Item>
- </Col>
- <Col span={12}>
+ </Col> : null}
+ {fonts.includes('fontWeight') ? <Col span={12}>
<Form.Item colon={false} label={<BoldOutlined title="瀛椾綋绮楃粏"/>}>
<Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}>
<Option value="normal">normal</Option>
@@ -451,18 +520,31 @@
<Option value="900">900</Option>
</Select>
</Form.Item>
- </Col>
- <Col span={12}>
+ </Col> : null}
+ {fonts.includes('lineHeight') ? <Col span={12}>
<Form.Item colon={false} label={<LineHeightOutlined title="琛岄珮"/>}>
<InputNumber defaultValue={card.lineHeight || 1.5} min={1} max={10} precision={1} onChange={this.changeLineHeight} />
</Form.Item>
- </Col>
- <Col span={12}>
+ </Col> : null}
+ {fonts.includes('letterSpacing') ? <Col span={12}>
<Form.Item colon={false} label={<ColumnWidthOutlined title="瀛楅棿璺�"/>}>
<InputNumber defaultValue={card.letterSpacing || 0} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/>
</Form.Item>
- </Col>
- <Col span={24}>
+ </Col> : null}
+ {fonts.includes('textIndent') ? <Col span={12}>
+ <Form.Item colon={false} label={<AlignRightOutlined title="棣栬缂╄繘"/>}>
+ <InputNumber defaultValue={card.textIndent || 0} min={0} max={100} precision={0} onChange={this.changeTextIndent}/>
+ </Form.Item>
+ </Col> : null}
+ {fonts.includes('wordBreak') ? <Col span={12}>
+ <Form.Item colon={false} label={<EnterOutlined title="鑷姩鎹㈣"/>}>
+ <Select defaultValue={card.wordBreak || 'normal'} onChange={this.wordBreakChange}>
+ <Option value="normal">normal</Option>
+ <Option value="break-all">break-all</Option>
+ </Select>
+ </Form.Item>
+ </Col> : null}
+ {fonts.includes('color') ? <Col span={24}>
<Form.Item
colon={false}
label={<FontColorsOutlined title="瀛椾綋棰滆壊"/>}
@@ -470,8 +552,8 @@
>
<ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} />
</Form.Item>
- </Col>
- <Col span={24}>
+ </Col> : null}
+ {fonts.includes('fontStyle') ? <Col span={24}>
<Form.Item
colon={false}
label={' '}
@@ -483,8 +565,8 @@
<Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="鍊炬枩">B</span></Radio.Button>
</Radio.Group>
</Form.Item>
- </Col>
- <Col span={24}>
+ </Col> : null}
+ {fonts.includes('textAlign') ? <Col span={24}>
<Form.Item
colon={false}
label={' '}
@@ -496,8 +578,8 @@
<Radio.Button value="right"><AlignRightOutlined title="鍙冲榻�"/></Radio.Button>
</Radio.Group>
</Form.Item>
- </Col>
- <Col span={24}>
+ </Col> : null}
+ {fonts.includes('textDecoration') ? <Col span={24}>
<Form.Item
colon={false}
label={' '}
@@ -510,7 +592,7 @@
<Radio.Button value="overline" style={{textDecoration: 'overline'}}><span title="涓婂垝绾�">O</span></Radio.Button>
</Radio.Group>
</Form.Item>
- </Col>
+ </Col> : null}
</Panel> : null}
{options.includes('background') || options.includes('backgroundColor') ? <Panel header="鑳屾櫙" key="background">
<Col span={24}>
@@ -522,6 +604,15 @@
<ColorSketch value={card.backgroundColor || '#ffffff'} onChange={this.changeBackgroundColor} />
</Form.Item>
</Col>
+ {window.develop === true ? <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="鑳屾櫙棰滆壊"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Input value={card.background || ''} onChange={(e) => this.changeBackground(e.target.value)} />
+ </Form.Item>
+ </Col> : null}
{!options.includes('backgroundColor') ? <Col span={24}>
<Form.Item
colon={false}
@@ -568,7 +659,7 @@
label="浣嶇疆"
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Select defaultValue={card.backgroundPositon || 'center'} onChange={this.changeBackgroundPositon}>
+ <Select defaultValue={card.backgroundPosition || 'center'} onChange={this.changeBackgroundPositon}>
<Option value="center">center</Option>
<Option value="top">top</Option>
<Option value="bottom">bottom</Option>
@@ -806,6 +897,34 @@
</Form.Item>
</Col>
</Panel> : null}
+ {options.includes('clear') ? <Panel header="娴姩" key="clear">
+ <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.clear || 'none'} onChange={(e) => this.changeNormalStyle(e.target.value, 'clear')}>
+ <Radio value="none">宸︽诞鍔�</Radio>
+ <Radio value="left">涓嶆诞鍔�</Radio>
+ </Radio.Group>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
+ {options.includes('display') ? <Panel header="鏄剧ず" key="display">
+ <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.display || 'block'} onChange={(e) => this.changeNormalStyle(e.target.value, 'display')}>
+ <Radio value="block">鍧楃骇鍏冪礌</Radio>
+ <Radio value="inline-block">琛屽唴鍧楀厓绱�</Radio>
+ </Radio.Group>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
</Collapse> : null}
</Form>
<div style={{textAlign: 'right'}}>
--
Gitblit v1.8.0