From 8f984c1eeadb0a5e263e6d5750716b0d1cff2906 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 20 一月 2021 18:40:09 +0800
Subject: [PATCH] 2021-01-20
---
src/menu/components/code/sandbox/editorcode/index.scss | 24 +++--
src/menu/components/code/sandbox/index.scss | 2
src/menu/components/code/sandbox/codecontent/index.scss | 25 ++++++
src/menu/components/code/sandbox/index.jsx | 7 -
src/menu/components/code/sandbox/codecontent/index.jsx | 64 ++++++++++++++++
src/menu/components/code/sandbox/editorcode/index.jsx | 42 ++++++---
src/menu/components/code/sandbox/wrapsetting/settingform/index.jsx | 55 +------------
src/templates/zshare/codemirror/index.jsx | 4
8 files changed, 139 insertions(+), 84 deletions(-)
diff --git a/src/menu/components/code/sandbox/codecontent/index.jsx b/src/menu/components/code/sandbox/codecontent/index.jsx
new file mode 100644
index 0000000..716adf8
--- /dev/null
+++ b/src/menu/components/code/sandbox/codecontent/index.jsx
@@ -0,0 +1,64 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { Empty } from 'antd'
+
+import './index.scss'
+
+class BraftContent extends Component {
+ static propTpyes = {
+ html: PropTypes.any,
+ css: PropTypes.any,
+ }
+
+ state = {
+ csselement: null
+ }
+
+ UNSAFE_componentWillMount () {
+ const { css } = this.props
+
+ if (css) {
+ // let style = css.replace(/^[^}{]*{|}[^}{]*{/ig, (word) => {
+ // return word.replace(/}\n*/ig, `}\n#${mark}`).replace(/,/ig, `,#${mark} `)
+ // })
+ // style = `\n/* 鑷畾涔� */\n#${mark} ${style}\n`
+
+ let ele = document.createElement('style')
+ ele.innerHTML = css
+ document.getElementsByTagName('head')[0].appendChild(ele)
+ // document.getElementsByTagName('head')[0].prepend(ele)
+
+ this.setState({csselement: ele})
+ }
+ }
+
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ if (this.props.css !== nextProps.css) {
+ const { csselement } = this.state
+
+ if (csselement && csselement.remove) {
+ csselement.remove()
+ }
+ if (nextProps.css) {
+ let ele = document.createElement('style')
+ ele.innerHTML = nextProps.css
+ document.getElementsByTagName('head')[0].appendChild(ele)
+
+ this.setState({csselement: ele})
+ }
+ }
+ }
+
+ render() {
+ const { html } = this.props
+
+ if (!html) return <Empty style={{padding: '10px 0px'}} description={null}/>
+
+ return (
+ <div dangerouslySetInnerHTML={{ __html: html }}></div>
+ )
+ }
+}
+
+
+export default BraftContent
\ No newline at end of file
diff --git a/src/menu/components/code/sandbox/codecontent/index.scss b/src/menu/components/code/sandbox/codecontent/index.scss
new file mode 100644
index 0000000..ee9d422
--- /dev/null
+++ b/src/menu/components/code/sandbox/codecontent/index.scss
@@ -0,0 +1,25 @@
+.braft-content {
+ .media-wrap {
+ max-width: 100%;
+ }
+ img {
+ max-width: 100%;
+ }
+ video {
+ max-width: 100%;
+ }
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+ margin: 10px 0px;
+ tr:first-child {
+ background-color: #f0f0f0;
+ }
+ td, th {
+ padding: 5px 14px;
+ font-size: 16px;
+ border: 1px solid #ddd;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/menu/components/code/sandbox/editorcode/index.jsx b/src/menu/components/code/sandbox/editorcode/index.jsx
index 69ad361..dc9923a 100644
--- a/src/menu/components/code/sandbox/editorcode/index.jsx
+++ b/src/menu/components/code/sandbox/editorcode/index.jsx
@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Icon, Modal } from 'antd'
+import { Icon, Modal, Tabs } from 'antd'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
@@ -9,6 +9,7 @@
import './index.scss'
const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror'))
+const { TabPane } = Tabs
class DataSource extends Component {
static propTpyes = {
@@ -19,7 +20,8 @@
state = {
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
visible: false,
- html: null
+ html: '',
+ css: ''
}
shouldComponentUpdate (nextProps, nextState) {
@@ -31,38 +33,41 @@
this.setState({
visible: true,
- html: config.html || null
+ html: config.html || '',
+ css: config.css || ''
})
}
verifySubmit = () => {
const { config } = this.props
- const { html } = this.state
+ const { html, css } = this.state
this.setState({
visible: false
})
- this.props.updateConfig({...config, html})
+ this.props.updateConfig({...config, html, css})
}
- onChange = (val) => {
+ onHtmlChange = (val) => {
this.setState({
html: val
})
}
- render () {
- const { config } = this.props
- const { visible, dict, html } = this.state
+ onCssChange = (val) => {
+ this.setState({
+ css: val
+ })
+ }
- if (!config) return null
+ render () {
+ const { visible, dict, html, css } = this.state
return (
- <div className="model-menu-edit-content-wrap">
- {config.wrap.datatype === 'static' ? <Icon title="鍐呭缂栬緫" type="form" onClick={() => this.trigger()} /> : null}
- {config.wrap.datatype !== 'static' ? <Icon title="鍐呭缂栬緫" style={{color: '#eeeeee', cursor: 'not-allowed'}} type="form"/> : null}
+ <div style={{display: 'inline-block'}}>
+ <Icon title="浠ｇ爜缂栬緫" style={{color: 'purple'}} type="form" onClick={() => this.trigger()} />
<Modal
- wrapClassName="popview-modal model-menu-edit-content-form"
+ wrapClassName="popview-modal code-sand-box-code-editor"
title="鍐呭缂栬緫"
visible={visible}
width={950}
@@ -72,7 +77,14 @@
onCancel={() => { this.setState({ visible: false }) }}
destroyOnClose
>
- <CodeMirror value={html} onChange={this.onChange} />
+ <Tabs>
+ <TabPane tab="HTML" key="HTML">
+ <CodeMirror mode="text/xml" value={html} onChange={this.onHtmlChange} />
+ </TabPane>
+ <TabPane tab="CSS" key="CSS">
+ <CodeMirror mode="text/css" value={css} onChange={this.onCssChange} />
+ </TabPane>
+ </Tabs>
</Modal>
</div>
)
diff --git a/src/menu/components/code/sandbox/editorcode/index.scss b/src/menu/components/code/sandbox/editorcode/index.scss
index dc27e8c..7392632 100644
--- a/src/menu/components/code/sandbox/editorcode/index.scss
+++ b/src/menu/components/code/sandbox/editorcode/index.scss
@@ -1,14 +1,16 @@
-.model-menu-edit-content-wrap {
- display: inline-block;
+.code-sand-box-code-editor.popview-modal {
+ .ant-modal-body {
+ padding-top: 0px;
+ .ant-tabs-bar {
+ margin: 0;
+ }
- >.anticon-form {
- color: purple;
- }
-}
-.model-menu-edit-content-form {
- .normal-braft-editor {
- border: 1px solid #d9d9d9;
- border-radius: 4px;
- overflow-x: hidden;
+ .code-mirror-wrap .code-mirror-area {
+ border-radius: 0;
+
+ .CodeMirror {
+ height: 400px;
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/menu/components/code/sandbox/index.jsx b/src/menu/components/code/sandbox/index.jsx
index 0cb56a5..705dfda 100644
--- a/src/menu/components/code/sandbox/index.jsx
+++ b/src/menu/components/code/sandbox/index.jsx
@@ -18,7 +18,7 @@
const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent'))
const WrapComponent = asyncIconComponent(() => import('./wrapsetting'))
const EditorCode = asyncIconComponent(() => import('./editorcode'))
-const BraftContent = asyncComponent(() => import('@/tabviews/custom/components/share/braftContent'))
+const CodeContent = asyncComponent(() => import('./codecontent'))
class CodeSandBox extends Component {
static propTpyes = {
@@ -167,10 +167,7 @@
} trigger="hover">
<Icon type="tool" />
</Popover>
- <BraftContent
- value={card.wrap.datatype !== 'static' ? '<p class="empty-content">瀵屾枃鏈�</p>' : card.html}
- encryption="false"
- />
+ <CodeContent html={card.html} css={card.css}/>
</div>
)
}
diff --git a/src/menu/components/code/sandbox/index.scss b/src/menu/components/code/sandbox/index.scss
index 5301c03..c096ca8 100644
--- a/src/menu/components/code/sandbox/index.scss
+++ b/src/menu/components/code/sandbox/index.scss
@@ -5,7 +5,7 @@
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
- min-height: 100px;
+ min-height: 30px;
.anticon-tool {
position: absolute;
diff --git a/src/menu/components/code/sandbox/wrapsetting/settingform/index.jsx b/src/menu/components/code/sandbox/wrapsetting/settingform/index.jsx
index b93fffd..76806c6 100644
--- a/src/menu/components/code/sandbox/wrapsetting/settingform/index.jsx
+++ b/src/menu/components/code/sandbox/wrapsetting/settingform/index.jsx
@@ -14,7 +14,6 @@
state = {
roleList: [],
- datatype: this.props.wrap.datatype || 'dynamic'
}
UNSAFE_componentWillMount () {
@@ -53,14 +52,10 @@
}
}
- changeDataType = (e) => {
- this.setState({datatype: e.target.value})
- }
-
render() {
- const { wrap, config } = this.props
+ const { wrap } = this.props
const { getFieldDecorator } = this.props.form
- const { roleList, datatype } = this.state
+ const { roleList } = this.state
const formItemLayout = {
labelCol: {
@@ -77,13 +72,6 @@
<div className="model-menu-setting-form">
<Form {...formItemLayout}>
<Row gutter={24}>
- <Col span={12}>
- <Form.Item label="鏍囬">
- {getFieldDecorator('title', {
- initialValue: wrap.title || ''
- })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)}
- </Form.Item>
- </Col>
<Col span={12}>
<Form.Item label={
<Tooltip placement="topLeft" title="鐢ㄤ簬缁勪欢闂寸殑鍖哄垎銆�">
@@ -128,50 +116,15 @@
</Tooltip>
}>
{getFieldDecorator('datatype', {
- initialValue: datatype
+ initialValue: wrap.datatype || 'dynamic'
})(
- <Radio.Group onChange={this.changeDataType}>
+ <Radio.Group>
<Radio value="dynamic">鍔ㄦ��</Radio>
<Radio value="static">闈欐��</Radio>
</Radio.Group>
)}
</Form.Item>
</Col>
- {datatype === 'dynamic' ? <Col span={12}>
- <Form.Item label={
- <Tooltip placement="topLeft" title="閫夋嫨鍔ㄦ�佸�兼椂锛岄渶璁剧疆鏂囨湰瀛楁鎵嶅彲鐢熸晥銆�">
- <Icon type="question-circle" />
- 鏂囨湰瀛楁
- </Tooltip>
- }>
- {getFieldDecorator('field', {
- initialValue: wrap.field || ''
- })(
- <Select>
- {config.columns.map(option =>
- <Select.Option key={option.uuid} value={option.field}>{option.label}</Select.Option>
- )}
- </Select>
- )}
- </Form.Item>
- </Col> : null}
- {datatype === 'dynamic' ? <Col span={12}>
- <Form.Item label={
- <Tooltip placement="topLeft" title="浠庢暟鎹簮鑾峰彇鐨勬暟鎹槸鍚﹂渶瑕佽В鐮併��">
- <Icon type="question-circle" />
- 鏁版嵁瑙ｇ爜
- </Tooltip>
- }>
- {getFieldDecorator('encryption', {
- initialValue: wrap.encryption || 'true'
- })(
- <Radio.Group>
- <Radio value="true">鏄�</Radio>
- <Radio value="false">鍚�</Radio>
- </Radio.Group>
- )}
- </Form.Item>
- </Col> : null}
<Col span={12}>
<Form.Item label="榛戝悕鍗�">
{getFieldDecorator('blacklist', {
diff --git a/src/templates/zshare/codemirror/index.jsx b/src/templates/zshare/codemirror/index.jsx
index 4351acb..edba82c 100644
--- a/src/templates/zshare/codemirror/index.jsx
+++ b/src/templates/zshare/codemirror/index.jsx
@@ -6,6 +6,8 @@
import {UnControlled as CodeMirror} from 'react-codemirror2'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/sql/sql'
+import 'codemirror/mode/xml/xml'
+import 'codemirror/mode/css/css'
import 'codemirror/addon/display/fullscreen.js'
import 'codemirror/addon/display/fullscreen.css'
@@ -26,7 +28,7 @@
editor: null, // code瀵硅薄
defaultVal: '', // 鍒濆鍊�
value: '', // 瀹炴椂鍐呭
- options: null, // mode : text/javascript銆乼ext/x-mysql ; theme : cobalt - 榛戝簳
+ options: null, // mode : text/xml, text/css, text/javascript銆乼ext/x-mysql ; theme : cobalt - 榛戝簳
fullScreen: false,
style: {fontSize: '18px', lineHeight: '32px'},
display: true
--
Gitblit v1.8.0