From efad1f9eff8d6af31f5b15edceee7b855b3db957 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 22 十二月 2021 00:00:28 +0800 Subject: [PATCH] 2021-12-22 --- src/mob/components/navbar/normal-navbar/menusetting/index.jsx | 5 src/mob/components/navbar/normal-navbar/index.jsx | 17 +- src/menu/sysinterface/settingform/simplescript/index.jsx | 13 +- src/mob/colorsketch/index.jsx | 5 src/mob/components/menubar/normal-menubar/menucomponent/index.jsx | 18 +- src/menu/components/tree/antd-tree/index.scss | 13 + src/menu/stylecontroller/index.jsx | 106 +++++++++++------ src/tabviews/custom/components/tree/antd-tree/index.jsx | 4 src/mob/components/menubar/normal-menubar/index.jsx | 15 +- src/mob/components/formdragelement/card.jsx | 26 ++-- src/menu/components/tree/antd-tree/index.jsx | 2 src/tabviews/custom/components/tree/antd-tree/index.scss | 9 src/menu/stylecombcontroller/index.jsx | 95 ++++++++++----- src/menu/sysinterface/index.jsx | 13 +- 14 files changed, 206 insertions(+), 135 deletions(-) diff --git a/src/menu/components/tree/antd-tree/index.jsx b/src/menu/components/tree/antd-tree/index.jsx index 544f078..5911a79 100644 --- a/src/menu/components/tree/antd-tree/index.jsx +++ b/src/menu/components/tree/antd-tree/index.jsx @@ -166,7 +166,7 @@ let _style = resetStyle(card.style) return ( - <div className="menu-editor-sand-box" style={_style} onClick={this.clickComponent} id={card.uuid}> + <div className="menu-tree-box" style={_style} onClick={this.clickComponent} id={card.uuid}> <NormalHeader config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> diff --git a/src/menu/components/tree/antd-tree/index.scss b/src/menu/components/tree/antd-tree/index.scss index c096ca8..ff7b7fb 100644 --- a/src/menu/components/tree/antd-tree/index.scss +++ b/src/menu/components/tree/antd-tree/index.scss @@ -1,11 +1,12 @@ -.menu-editor-sand-box { +.menu-tree-box { position: relative; box-sizing: border-box; background: #ffffff; background-position: center center; background-repeat: no-repeat; background-size: cover; - min-height: 30px; + min-height: 50px; + overflow-y: auto; .anticon-tool { position: absolute; @@ -25,12 +26,16 @@ color: #bcbcbc; } } -.menu-editor-sand-box::after { +.menu-tree-box::after { display: block; content: ' '; clear: both; } -.menu-editor-sand-box:hover { +.menu-tree-box:hover { z-index: 1; box-shadow: 0px 0px 4px #1890ff; } +.menu-tree-box::-webkit-scrollbar { + display: none; +} + diff --git a/src/menu/stylecombcontroller/index.jsx b/src/menu/stylecombcontroller/index.jsx index f7b3ffa..e9b5f91 100644 --- a/src/menu/stylecombcontroller/index.jsx +++ b/src/menu/stylecombcontroller/index.jsx @@ -1,7 +1,34 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Collapse, Form, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd' +import { Collapse, Form, Col, InputNumber, Select, Radio, Drawer, Button } from 'antd' +import { + ColumnHeightOutlined, + FontSizeOutlined, + BoldOutlined, + LineHeightOutlined, + ColumnWidthOutlined, + FontColorsOutlined, + ItalicOutlined, + AlignLeftOutlined, + AlignCenterOutlined, + AlignRightOutlined, + UnderlineOutlined, + StrikethroughOutlined, + BgColorsOutlined, + BorderOutlined, + BorderOuterOutlined, + BorderLeftOutlined, + BorderRightOutlined, + BorderTopOutlined, + BorderBottomOutlined, + RadiusSettingOutlined, + ArrowUpOutlined, + ArrowDownOutlined, + ArrowLeftOutlined, + ArrowRightOutlined, + SwapOutlined, +} from '@ant-design/icons' import MKEmitter from '@/utils/events.js' import ColorSketch from '@/mob/colorsketch' @@ -254,7 +281,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="楂樺害" type="column-height" />} + label={<ColumnHeightOutlined title="楂樺害" />} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={this.changeHeight}/> @@ -263,12 +290,12 @@ </Panel> : null} {options.includes('font') ? <Panel header="瀛椾綋" key="font"> <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛椾綋澶у皬" type="font-size" />}> + <Form.Item colon={false} label={<FontSizeOutlined title="瀛椾綋澶у皬"/>}> <InputNumber defaultValue={''} min={12} max={100} precision={0} onChange={this.changeFontSize} /> </Form.Item> </Col> <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛椾綋绮楃粏" type="bold" />}> + <Form.Item colon={false} label={<BoldOutlined title="瀛椾綋绮楃粏"/>}> <Select defaultValue={''} onChange={this.boldChange}> <Option value="normal">normal</Option> <Option value="bold">bold</Option> @@ -287,19 +314,19 @@ </Form.Item> </Col> <Col span={12}> - <Form.Item colon={false} label={<Icon title="琛岄珮" type="line-height" />}> + <Form.Item colon={false} label={<LineHeightOutlined title="琛岄珮" />}> <InputNumber defaultValue={''} min={1} max={10} precision={1} onChange={this.changeLineHeight} /> </Form.Item> </Col> <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛楅棿璺�" type="column-width" />}> + <Form.Item colon={false} label={<ColumnWidthOutlined title="瀛楅棿璺�"/>}> <InputNumber defaultValue={''} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/> </Form.Item> </Col> <Col span={24}> <Form.Item colon={false} - label={<Icon title="瀛椾綋棰滆壊" type="font-colors" />} + label={<FontColorsOutlined title="瀛椾綋棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <ColorSketch onChange={this.changeFontColor} /> @@ -313,7 +340,7 @@ > <Radio.Group defaultValue={''} onChange={this.changeFontStyle}> <Radio.Button value="normal"><span title="鏍囧噯">N</span></Radio.Button> - <Radio.Button value="italic"><Icon title="鏂滀綋" type="italic" /></Radio.Button> + <Radio.Button value="italic"><ItalicOutlined title="鏂滀綋"/></Radio.Button> <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="鍊炬枩">B</span></Radio.Button> </Radio.Group> </Form.Item> @@ -325,9 +352,9 @@ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <Radio.Group className="text-align" defaultValue={''} onChange={this.changeTextAlign}> - <Radio.Button value="left"><Icon title="宸﹀榻�" type="align-left" /></Radio.Button> - <Radio.Button value="center"><Icon title="灞呬腑瀵归綈" type="align-center" /></Radio.Button> - <Radio.Button value="right"><Icon title="鍙冲榻�" type="align-right" /></Radio.Button> + <Radio.Button value="left"><AlignLeftOutlined title="宸﹀榻�"/></Radio.Button> + <Radio.Button value="center"><AlignCenterOutlined title="灞呬腑瀵归綈"/></Radio.Button> + <Radio.Button value="right"><AlignRightOutlined title="鍙冲榻�"/></Radio.Button> </Radio.Group> </Form.Item> </Col> @@ -339,8 +366,8 @@ > <Radio.Group className="text-decoration" defaultValue={''} onChange={this.changeTextDecoration}> <Radio.Button value="none"><span title="鏍囧噯">N</span></Radio.Button> - <Radio.Button value="underline"><Icon title="涓嬪垝绾�" type="underline" /></Radio.Button> - <Radio.Button value="line-through"><Icon title="涓垝绾�" type="strikethrough" /></Radio.Button> + <Radio.Button value="underline"><UnderlineOutlined title="涓嬪垝绾�"/></Radio.Button> + <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> @@ -350,7 +377,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鑳屾櫙棰滆壊" type="bg-colors" />} + label={<BgColorsOutlined title="鑳屾櫙棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <ColorSketch onChange={this.changeBackgroundColor} /> @@ -361,22 +388,22 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规浣嶇疆" type="border" />} + label={<BorderOutlined title="杈规浣嶇疆"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <Radio.Group className="border-position" defaultValue={'outer'} onChange={(e) => this.setState({borposition: e.target.value})}> - <Radio value="outer"><Icon title="澶栬竟妗�" type="border-outer" /></Radio> - <Radio value="left"><Icon title="宸﹁竟妗�" type="border-left" /></Radio> - <Radio value="right"><Icon title="鍙宠竟妗�" type="border-right" /></Radio> - <Radio value="top"><Icon title="涓婅竟妗�" type="border-top" /></Radio> - <Radio value="bottom"><Icon title="涓嬭竟妗�" type="border-bottom" /></Radio> + <Radio value="outer"><BorderOuterOutlined title="澶栬竟妗�"/></Radio> + <Radio value="left"><BorderLeftOutlined title="宸﹁竟妗�"/></Radio> + <Radio value="right"><BorderRightOutlined title="鍙宠竟妗�"/></Radio> + <Radio value="top"><BorderTopOutlined title="涓婅竟妗�"/></Radio> + <Radio value="bottom"><BorderBottomOutlined title="涓嬭竟妗�"/></Radio> </Radio.Group> </Form.Item> </Col> <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规鏍峰紡" type="border-outer" />} + label={<BorderOuterOutlined title="杈规鏍峰紡"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > {borposition === 'outer' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}> @@ -414,7 +441,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规瀹藉害" type="column-width" />} + label={<ColumnWidthOutlined title="杈规瀹藉害"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > {borposition === 'outer' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null} @@ -427,7 +454,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规棰滆壊" type="bg-colors" />} + label={<BgColorsOutlined title="杈规棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > {borposition === 'outer' ? <ColorSketch onChange={this.changeBorderColor} /> : null} @@ -440,7 +467,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍦嗚" type="radius-setting" />} + label={<RadiusSettingOutlined title="鍦嗚"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={'0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/> @@ -451,7 +478,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="闃村奖棰滆壊" type="bg-colors" />} + label={<BgColorsOutlined title="闃村奖棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <ColorSketch onChange={this.changeShadowColor} /> @@ -462,7 +489,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓婅竟璺�" type="arrow-up"/>} + label={<ArrowUpOutlined title="涓婅竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/> @@ -471,7 +498,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} + label={<ArrowDownOutlined title="涓嬭竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/> @@ -480,7 +507,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} + label={<ArrowLeftOutlined title="宸﹁竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/> @@ -489,7 +516,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} + label={<ArrowRightOutlined title="鍙宠竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/> @@ -500,7 +527,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓婅竟璺�" type="arrow-up"/>} + label={<ArrowUpOutlined title="涓婅竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/> @@ -509,7 +536,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} + label={<ArrowDownOutlined title="涓嬭竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/> @@ -518,7 +545,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} + label={<ArrowLeftOutlined title="宸﹁竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/> @@ -527,7 +554,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} + label={<ArrowRightOutlined title="鍙宠竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/> @@ -538,7 +565,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="娴姩" type="swap" />} + label={<SwapOutlined title="娴姩"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <Radio.Group defaultValue={''} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}> diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx index 046b8ed..f3e7bef 100644 --- a/src/menu/stylecontroller/index.jsx +++ b/src/menu/stylecontroller/index.jsx @@ -1,7 +1,35 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Collapse, Form, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd' +import { Collapse, Form, Col, InputNumber, Select, Radio, Drawer, Button } from 'antd' +import { + ColumnHeightOutlined, + FontSizeOutlined, + BoldOutlined, + LineHeightOutlined, + ColumnWidthOutlined, + FontColorsOutlined, + ItalicOutlined, + AlignLeftOutlined, + AlignCenterOutlined, + AlignRightOutlined, + UnderlineOutlined, + StrikethroughOutlined, + BgColorsOutlined, + PictureOutlined, + BorderOutlined, + BorderOuterOutlined, + BorderLeftOutlined, + BorderRightOutlined, + BorderTopOutlined, + BorderBottomOutlined, + RadiusSettingOutlined, + ArrowUpOutlined, + ArrowDownOutlined, + ArrowLeftOutlined, + ArrowRightOutlined, + SwapOutlined, +} from '@ant-design/icons' import MKEmitter from '@/utils/events.js' import asyncComponent from '@/utils/asyncComponent' @@ -381,7 +409,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="瀹藉害" type="column-width" />} + 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}/> @@ -392,7 +420,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="楂樺害" type="column-height" />} + label={<ColumnHeightOutlined title="楂樺害"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.height || ''} options={['px', 'vh', 'vw']} onChange={this.changeHeight}/> @@ -401,12 +429,12 @@ </Panel> : null} {options.includes('font') ? <Panel header="瀛椾綋" key="font"> <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛椾綋澶у皬" type="font-size" />}> + <Form.Item colon={false} label={<FontSizeOutlined title="瀛椾綋澶у皬"/>}> <InputNumber defaultValue={card.fontSize || 14} min={12} max={100} precision={0} onChange={this.changeFontSize} /> </Form.Item> </Col> <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛椾綋绮楃粏" type="bold" />}> + <Form.Item colon={false} label={<BoldOutlined title="瀛椾綋绮楃粏"/>}> <Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}> <Option value="normal">normal</Option> <Option value="bold">bold</Option> @@ -425,19 +453,19 @@ </Form.Item> </Col> <Col span={12}> - <Form.Item colon={false} label={<Icon title="琛岄珮" type="line-height" />}> + <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}> - <Form.Item colon={false} label={<Icon title="瀛楅棿璺�" type="column-width" />}> + <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}> <Form.Item colon={false} - label={<Icon title="瀛椾綋棰滆壊" type="font-colors" />} + label={<FontColorsOutlined title="瀛椾綋棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} /> @@ -451,7 +479,7 @@ > <Radio.Group defaultValue={card.fontStyle || 'normal'} onChange={this.changeFontStyle}> <Radio.Button value="normal"><span title="鏍囧噯">N</span></Radio.Button> - <Radio.Button value="italic"><Icon title="鏂滀綋" type="italic" /></Radio.Button> + <Radio.Button value="italic"><ItalicOutlined title="鏂滀綋"/></Radio.Button> <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="鍊炬枩">B</span></Radio.Button> </Radio.Group> </Form.Item> @@ -463,9 +491,9 @@ 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.Button value="left"><Icon title="宸﹀榻�" type="align-left" /></Radio.Button> - <Radio.Button value="center"><Icon title="灞呬腑瀵归綈" type="align-center" /></Radio.Button> - <Radio.Button value="right"><Icon title="鍙冲榻�" type="align-right" /></Radio.Button> + <Radio.Button value="left"><AlignLeftOutlined title="宸﹀榻�"/></Radio.Button> + <Radio.Button value="center"><AlignCenterOutlined title="灞呬腑瀵归綈"/></Radio.Button> + <Radio.Button value="right"><AlignRightOutlined title="鍙冲榻�"/></Radio.Button> </Radio.Group> </Form.Item> </Col> @@ -477,8 +505,8 @@ > <Radio.Group className="text-decoration" defaultValue={card.textDecoration || 'none'} onChange={this.changeTextDecoration}> <Radio.Button value="none"><span title="鏍囧噯">N</span></Radio.Button> - <Radio.Button value="underline"><Icon title="涓嬪垝绾�" type="underline" /></Radio.Button> - <Radio.Button value="line-through"><Icon title="涓垝绾�" type="strikethrough" /></Radio.Button> + <Radio.Button value="underline"><UnderlineOutlined title="涓嬪垝绾�"/></Radio.Button> + <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> @@ -488,7 +516,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鑳屾櫙棰滆壊" type="bg-colors" />} + 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} /> @@ -497,7 +525,7 @@ {!options.includes('backgroundColor') ? <Col span={24}> <Form.Item colon={false} - label={<Icon title="鑳屾櫙鍥剧墖" type="picture" />} + label={<PictureOutlined title="鑳屾櫙鍥剧墖"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/> @@ -552,22 +580,22 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规浣嶇疆" type="border" />} + label={<BorderOutlined title="杈规浣嶇疆"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <Radio.Group className="border-position" defaultValue={'outer'} onChange={(e) => this.setState({borposition: e.target.value})}> - <Radio value="outer"><Icon title="澶栬竟妗�" type="border-outer" /></Radio> - <Radio value="left"><Icon title="宸﹁竟妗�" type="border-left" /></Radio> - <Radio value="right"><Icon title="鍙宠竟妗�" type="border-right" /></Radio> - <Radio value="top"><Icon title="涓婅竟妗�" type="border-top" /></Radio> - <Radio value="bottom"><Icon title="涓嬭竟妗�" type="border-bottom" /></Radio> + <Radio value="outer"><BorderOuterOutlined title="澶栬竟妗�"/></Radio> + <Radio value="left"><BorderLeftOutlined title="宸﹁竟妗�"/></Radio> + <Radio value="right"><BorderRightOutlined title="鍙宠竟妗�"/></Radio> + <Radio value="top"><BorderTopOutlined title="涓婅竟妗�"/></Radio> + <Radio value="bottom"><BorderBottomOutlined title="涓嬭竟妗�"/></Radio> </Radio.Group> </Form.Item> </Col> <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规鏍峰紡" type="border-outer" />} + label={<BorderOuterOutlined title="杈规鏍峰紡"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > {borposition === 'outer' ? <Select defaultValue={card.borderStyle || 'solid'} onChange={this.changeBorderStyle}> @@ -605,7 +633,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规瀹藉害" type="column-width" />} + 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} @@ -618,7 +646,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规棰滆壊" type="bg-colors" />} + 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} @@ -631,7 +659,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍦嗚" type="radius-setting" />} + label={<RadiusSettingOutlined title="鍦嗚"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.borderRadius || '0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/> @@ -642,7 +670,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="闃村奖棰滆壊" type="bg-colors" />} + label={<BgColorsOutlined title="闃村奖棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <ColorSketch value={card.shadowColor || 'transparent'} onChange={this.changeShadowColor} /> @@ -651,7 +679,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="妯$硦璺濈" type="column-width" />} + label={<ColumnWidthOutlined title="妯$硦璺濈"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.shadowBlur || '0px'} options={['px']} onChange={this.changeShadowBlur}/> @@ -660,7 +688,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="姘村钩浣嶇疆" type="arrow-right" />} + label={<ArrowRightOutlined title="姘村钩浣嶇疆"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.hShadow || '0px'} options={['px']} onChange={this.changeHShadow}/> @@ -669,7 +697,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍨傜洿浣嶇疆" type="arrow-down" />} + label={<ArrowDownOutlined title="鍨傜洿浣嶇疆"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.vShadow || '0px'} options={['px']} onChange={this.changeVShadow}/> @@ -680,7 +708,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓婅竟璺�" type="arrow-up"/>} + label={<ArrowUpOutlined title="涓婅竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.marginTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/> @@ -689,7 +717,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} + label={<ArrowDownOutlined title="涓嬭竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.marginBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/> @@ -698,7 +726,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} + label={<ArrowLeftOutlined title="宸﹁竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.marginLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/> @@ -707,7 +735,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} + label={<ArrowRightOutlined title="鍙宠竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.marginRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/> @@ -718,7 +746,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓婅竟璺�" type="arrow-up"/>} + label={<ArrowUpOutlined title="涓婅竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.paddingTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/> @@ -727,7 +755,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} + label={<ArrowDownOutlined title="涓嬭竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.paddingBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/> @@ -736,7 +764,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} + label={<ArrowLeftOutlined title="宸﹁竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.paddingLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/> @@ -745,7 +773,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} + label={<ArrowRightOutlined title="鍙宠竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.paddingRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/> @@ -756,7 +784,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="娴姩" type="swap" />} + label={<SwapOutlined title="娴姩"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.float || 'left'} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}> diff --git a/src/menu/sysinterface/index.jsx b/src/menu/sysinterface/index.jsx index 0837130..41ca3dc 100644 --- a/src/menu/sysinterface/index.jsx +++ b/src/menu/sysinterface/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Modal, Button, Icon, Popconfirm, message } from 'antd' +import { Modal, Button, Popconfirm, message } from 'antd' +import { StopTwoTone, CopyOutlined, EditOutlined, CheckCircleTwoTone, DeleteOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import asyncComponent from '@/utils/asyncComponent' @@ -35,13 +36,13 @@ ( <div> 绂佺敤 - <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" /> + <StopTwoTone style={{marginLeft: '5px'}} twoToneColor="#ff4d4f" /> </div> ) : ( <div> 鍚敤 - <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" /> + <CheckCircleTwoTone style={{marginLeft: '5px'}} twoToneColor="#52c41a" /> </div> ) }, @@ -52,14 +53,14 @@ dataIndex: 'operation', render: (text, record) => (<div style={{textAlign: 'center'}}> - <span onClick={() => this.handleEdit(record)} style={{color: '#1890ff', cursor: 'pointer', fontSize: '16px', marginRight: '15px'}}><Icon type="edit" /></span> - <span onClick={() => {this.copy(record)}} style={{color: '#26C281', cursor: 'pointer', fontSize: '16px', marginRight: '15px'}}><Icon type="copy" /></span> + <span onClick={() => this.handleEdit(record)} style={{color: '#1890ff', cursor: 'pointer', fontSize: '16px', marginRight: '15px'}}><EditOutlined /></span> + <span onClick={() => {this.copy(record)}} style={{color: '#26C281', cursor: 'pointer', fontSize: '16px', marginRight: '15px'}}><CopyOutlined /></span> <Popconfirm overlayClassName="popover-confirm" title="纭畾鍒犻櫎锛�" onConfirm={() => this.deleteScript(record) }> - <span style={{color: '#ff4d4f', cursor: 'pointer', fontSize: '16px'}}><Icon type="delete" /></span> + <span style={{color: '#ff4d4f', cursor: 'pointer', fontSize: '16px'}}><DeleteOutlined /></span> </Popconfirm> </div>) } diff --git a/src/menu/sysinterface/settingform/simplescript/index.jsx b/src/menu/sysinterface/settingform/simplescript/index.jsx index 0e3f3ef..5b6a80f 100644 --- a/src/menu/sysinterface/settingform/simplescript/index.jsx +++ b/src/menu/sysinterface/settingform/simplescript/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Row, Col, Icon, Button, notification, Select, Popconfirm, Typography, Modal, Radio } from 'antd' +import { Form, Row, Col, Button, notification, Select, Popconfirm, Typography, Modal, Radio } from 'antd' +import { StopTwoTone, SwapOutlined, EditOutlined, CheckCircleTwoTone, DeleteOutlined } from '@ant-design/icons' import moment from 'moment' import Utils from '@/utils/utils.js' @@ -66,13 +67,13 @@ ( <div> {this.props.dict['model.status.forbidden']} - <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" /> + <StopTwoTone style={{marginLeft: '5px'}} twoToneColor="#ff4d4f" /> </div> ) : ( <div> {this.props.dict['model.status.open']} - <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" /> + <CheckCircleTwoTone style={{marginLeft: '5px'}} twoToneColor="#52c41a" /> </div> ) }, @@ -83,14 +84,14 @@ dataIndex: 'operation', render: (text, record) => (<div style={{textAlign: 'center'}}> - <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><Icon type="edit" /></span> - <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><Icon type="swap" /></span> + <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><EditOutlined /></span> + <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><SwapOutlined /></span> <Popconfirm overlayClassName="popover-confirm" title={this.props.dict['model.query.delete']} onConfirm={() => this.handleDelete(record) }> - <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span> + <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span> </Popconfirm> </div>) } diff --git a/src/mob/colorsketch/index.jsx b/src/mob/colorsketch/index.jsx index afa975a..c56caab 100644 --- a/src/mob/colorsketch/index.jsx +++ b/src/mob/colorsketch/index.jsx @@ -2,7 +2,8 @@ import PropTypes from 'prop-types' // import { is, fromJS } from 'immutable' import { SketchPicker } from 'react-color' -import { Popover, Icon } from 'antd' +import { Popover } from 'antd' +import { CloseOutlined } from '@ant-design/icons' import './index.scss' @@ -90,7 +91,7 @@ <div className="color-sketch-block-inner" style={ {background: color} }></div> </div> </Popover> - <div className="color-sketch-value">{color}{allowClear && color ? <Icon onClick={this.clear} type="close"/> : null}</div> + <div className="color-sketch-value">{color}{allowClear && color ? <CloseOutlined onClick={this.clear}/> : null}</div> </div> ) } diff --git a/src/mob/components/formdragelement/card.jsx b/src/mob/components/formdragelement/card.jsx index a92dc7f..73cf503 100644 --- a/src/mob/components/formdragelement/card.jsx +++ b/src/mob/components/formdragelement/card.jsx @@ -1,9 +1,11 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Button, Popover, Switch, Checkbox, Form, Rate } from 'antd' +import { Button, Popover, Switch, Checkbox, Form, Rate } from 'antd' +import { ScanOutlined, RightOutlined, PlusOutlined, StarFilled, EditOutlined, CopyOutlined, CloseOutlined } from '@ant-design/icons' import moment from 'moment' import asyncComponent from '@/utils/asyncComponent' +import MkIcon from '@/components/mk-icon' import './index.scss' const CheckCard = asyncComponent(() => import('@/templates/modalconfig/checkCard')) @@ -60,17 +62,17 @@ let formItem = null if (card.type === 'text' || card.type === 'number') { - formItem = (<div className={'am-list-item ' + (card.place || '')}><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval ? card.initval : <span style={{color: '#bcbcbc'}}>{card.placeholder || ''}</span> }</div>{card.scan && card.scan !== 'false' ? <div className="am-list-extra"><Icon type="scan" /></div> : null}</div></div>) + formItem = (<div className={'am-list-item ' + (card.place || '')}><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval ? card.initval : <span style={{color: '#bcbcbc'}}>{card.placeholder || ''}</span> }</div>{card.scan && card.scan !== 'false' ? <div className="am-list-extra"><ScanOutlined /></div> : null}</div></div>) } else if (card.type === 'number') { formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval}</div></div></div>) } else if (card.type === 'select' || card.type === 'link') { - formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{selectval || '璇烽�夋嫨'}</div><div className="am-list-extra"><Icon type="right" /></div></div></div>) + formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{selectval || '璇烽�夋嫨'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>) } else if (card.type === 'date') { - formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD') : '璇烽�夋嫨'}</div><div className="am-list-extra"><Icon type="right" /></div></div></div>) + formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD') : '璇烽�夋嫨'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>) } else if (card.type === 'datemonth') { - formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'month').format('YYYY-MM') : '璇烽�夋嫨'}</div><div className="am-list-extra"><Icon type="right" /></div></div></div>) + formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'month').format('YYYY-MM') : '璇烽�夋嫨'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>) } else if (card.type === 'datetime') { - formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD HH:mm') : '璇烽�夋嫨'}</div><div className="am-list-extra"><Icon type="right" /></div></div></div>) + formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD HH:mm') : '璇烽�夋嫨'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>) } else if (card.type === 'textarea') { let height = (card.maxRows || 2) * 25 formItem = (<div className="am-list-item check-card"> @@ -86,7 +88,7 @@ </div>) } else if (card.type === 'rate') { formItem = (<div className={'am-list-item ' + (card.place || '')}><div className="am-list-line"><div className="am-input-label">{card.label}</div><div style={{textAlign: 'left'}} className={'am-input-control ' + (card.place === 'up_down' ? 'left' : '')}> - <Rate value={card.initval || 0} count={card.rateCount || 5} character={card.character ? <Icon type={card.character}/> : <Icon type="star" theme="filled"/>} allowHalf={card.allowHalf === 'true'} /> + <Rate value={card.initval || 0} count={card.rateCount || 5} character={card.character ? <MkIcon type={card.character}/> : <StarFilled />} allowHalf={card.allowHalf === 'true'} /> </div></div></div>) } else if (card.type === 'fileupload') { formItem = ( @@ -94,9 +96,7 @@ <div className="am-list-line"> <div className="am-input-label">{card.label}</div> <div className="am-input-control" style={{textAlign: 'left'}}> - {/* {card.fileType !== 'picture-card' ? <Icon type="upload" style={{position: 'absolute', right: '10px', top: '10px'}} /> : null} */} - {/* {card.fileType === 'picture-card' ? <Button style={{width: '100px', marginBottom: '10px', height: '100px', fontSize: '50px', color: '#d9d9d9'}}><Icon type="plus" /></Button> : null} */} - <Button style={{width: '100px', marginBottom: '10px', height: '100px', fontSize: '50px', color: '#d9d9d9'}}><Icon type="plus" /></Button> + <Button style={{width: '100px', marginBottom: '10px', height: '100px', fontSize: '50px', color: '#d9d9d9'}}><PlusOutlined /></Button> </div> </div> </div> @@ -184,9 +184,9 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" type="edit" onClick={edit} /> - <Icon className="copy" type="copy" onClick={copy} /> - <Icon className="close" type="close" onClick={close} /> + <EditOutlined className="edit" onClick={edit} /> + <CopyOutlined className="copy" onClick={copy} /> + <CloseOutlined className="close" onClick={close} /> </div> } trigger="hover"> <div className="page-card" style={{ opacity: opacity}}> diff --git a/src/mob/components/menubar/normal-menubar/index.jsx b/src/mob/components/menubar/normal-menubar/index.jsx index 2ad9a87..93d9aff 100644 --- a/src/mob/components/menubar/normal-menubar/index.jsx +++ b/src/mob/components/menubar/normal-menubar/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Modal } from 'antd' +import { Popover, Modal } from 'antd' +import { ToolOutlined, PlusOutlined, SettingOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -270,20 +271,20 @@ {card.wrap.title ? <NormalHeader config={card} updateComponent={this.updateComponent}/> : null} <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鑿滃崟" onClick={this.addMenu} type="plus" /> + <PlusOutlined className="plus" title="娣诲姞鑿滃崟" onClick={this.addMenu}/> <NormalForm title="鑿滃崟璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="menubar" card={card}/> <PasteComponent config={card} options={['menucell']} updateConfig={this.updateComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} /> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> {card.wrap.datatype === 'dynamic' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} - {card.wrap.datatype !== 'dynamic' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} + {card.wrap.datatype !== 'dynamic' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> {card.subMenus.map((menu, index) => (<MenuComponent key={menu.uuid} offset={!index ? offset : 0} cards={card} card={menu} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} </div> diff --git a/src/mob/components/menubar/normal-menubar/menucomponent/index.jsx b/src/mob/components/menubar/normal-menubar/menucomponent/index.jsx index 4999373..2fe6362 100644 --- a/src/mob/components/menubar/normal-menubar/menucomponent/index.jsx +++ b/src/mob/components/menubar/normal-menubar/menucomponent/index.jsx @@ -1,12 +1,14 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Popover, Icon, Col } from 'antd' +import { Popover, Col } from 'antd' +import { SwapOutlined, ArrowLeftOutlined, ArrowRightOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined } from '@ant-design/icons' import asyncIconComponent from '@/utils/asyncIconComponent' import Utils from '@/utils/utils.js' import getSettingForm from './options' import { resetStyle } from '@/utils/utils-custom.js' +import MkIcon from '@/components/mk-icon' import MKEmitter from '@/utils/events.js' import './index.scss' @@ -127,24 +129,24 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="鑿滃崟缂栬緫" width={900} update={this.updateSetting} getForms={this.getSettingForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="menucell" card={card}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="宸︾Щ" type="arrow-left" onClick={() => this.props.move(card, 'left')} /> - <Icon className="close" title="鍙崇Щ" type="arrow-right" onClick={() => this.props.move(card, 'right')} /> + <ArrowLeftOutlined className="plus" title="宸︾Щ" onClick={() => this.props.move(card, 'left')} /> + <ArrowRightOutlined className="close" title="鍙崇Щ" onClick={() => this.props.move(card, 'right')} /> </div> } trigger="hover" getPopupContainer={() => document.getElementById(card.uuid + 'swap')}> - <Icon type="swap" id={card.uuid + 'swap'}/> + <SwapOutlined id={card.uuid + 'swap'}/> </Popover> - <Icon className="close" title="鍒犻櫎鑿滃崟" type="delete" onClick={() => this.props.deleteElement(card)} /> + <DeleteOutlined className="close" title="鍒犻櫎鑿滃崟" onClick={() => this.props.deleteElement(card)} /> </div> } trigger="hover"> <div className="menu-item" onDoubleClick={() => this.changeMenu()} style={_style}> {card.setting.sign === 'icon' ? <div className="menu-sign"> - <Icon style={{ + <MkIcon style={{ fontSize: card.setting.iconFont || 20, padding: card.setting.padding, background: card.setting.background, diff --git a/src/mob/components/navbar/normal-navbar/index.jsx b/src/mob/components/navbar/normal-navbar/index.jsx index d80c2fc..bc0925f 100644 --- a/src/mob/components/navbar/normal-navbar/index.jsx +++ b/src/mob/components/navbar/normal-navbar/index.jsx @@ -1,10 +1,11 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncIconComponent from '@/utils/asyncIconComponent' - +import MkIcon from '@/components/mk-icon' import MKEmitter from '@/utils/events.js' import getWrapForm from './options' import './index.scss' @@ -159,15 +160,15 @@ <div className="mk-popover-control"> <MenuComponent config={card} updateConfig={this.updateComponent} /> <NormalForm title="鑿滃崟鏍忚缃�" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} - {card.wrap.datatype === 'static' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} + {card.wrap.datatype === 'static' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <div className="menu"> {card.menus.map(menu => { @@ -175,7 +176,7 @@ <div key={menu.MenuID} className="am-tab-bar-tab" onDoubleClick={() => this.changeMenu(menu)}> {menu.icon ? <div className="am-tab-bar-tab-icon"> <span className="am-badge am-tab-bar-tab-badge tab-badge"> - <Icon type={menu.icon} /> + <MkIcon type={menu.icon} /> {menu.tip ? <sup className="am-badge-text"></sup> : null} </span> </div> : null} diff --git a/src/mob/components/navbar/normal-navbar/menusetting/index.jsx b/src/mob/components/navbar/normal-navbar/menusetting/index.jsx index 633fff4..345ec24 100644 --- a/src/mob/components/navbar/normal-navbar/menusetting/index.jsx +++ b/src/mob/components/navbar/normal-navbar/menusetting/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal } from 'antd' +import { Modal } from 'antd' +import { MenuOutlined } from '@ant-design/icons' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' @@ -37,7 +38,7 @@ return ( <div className="model-menu-setting-wrap"> - <Icon type="menu" title="鑿滃崟" onClick={() => this.setState({ visible: true })}/> + <MenuOutlined title="鑿滃崟" onClick={() => this.setState({ visible: true })}/> <Modal wrapClassName="popview-modal" title="鑿滃崟缂栬緫" diff --git a/src/tabviews/custom/components/tree/antd-tree/index.jsx b/src/tabviews/custom/components/tree/antd-tree/index.jsx index fc666d5..ebbd2d7 100644 --- a/src/tabviews/custom/components/tree/antd-tree/index.jsx +++ b/src/tabviews/custom/components/tree/antd-tree/index.jsx @@ -49,6 +49,8 @@ _sync = false } + _config.wrap.contentHeight = config.wrap.title || config.wrap.searchable === 'true' ? 'calc(100% - 45px)' : '100%' + this.setState({ config: _config, data: _data, @@ -441,7 +443,7 @@ <span className="title">{config.wrap.title}</span> {config.wrap.searchable === 'true' ? <Search allowClear onSearch={this.treeFilter} /> : null} </div> : null} - {treeNodes && treeNodes.length > 0 ? <div className="tree-box"> + {treeNodes && treeNodes.length > 0 ? <div className="tree-box" style={{height: config.wrap.contentHeight}}> <Tree blockNode onSelect={this.selectTreeNode} diff --git a/src/tabviews/custom/components/tree/antd-tree/index.scss b/src/tabviews/custom/components/tree/antd-tree/index.scss index 5c43bad..e60ec78 100644 --- a/src/tabviews/custom/components/tree/antd-tree/index.scss +++ b/src/tabviews/custom/components/tree/antd-tree/index.scss @@ -4,7 +4,7 @@ background-position: center center; background-repeat: no-repeat; background-size: cover; - min-height: 180px; + min-height: 50px; .tree-header { position: relative; @@ -41,7 +41,7 @@ } } .tree-box { - overflow-x: auto; + overflow: auto; padding-bottom: 10px; .ant-tree-node-content-wrapper-close > span > span > .anticon-folder-open { @@ -51,8 +51,9 @@ display: none; } } + .tree-box::-webkit-scrollbar { - height: 10px; + width: 7px; } .tree-box::-webkit-scrollbar-thumb { border-radius: 5px; @@ -61,7 +62,7 @@ } .tree-box::-webkit-scrollbar-track {/*婊氬姩鏉¢噷闈㈣建閬�*/ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); - border-radius: 3px; + border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.07); background: rgba(0, 0, 0, 0); } -- Gitblit v1.8.0