From 1607bcf25594cfb033b209c8028c70f9842a1a1e Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 29 九月 2022 18:18:18 +0800
Subject: [PATCH] 2022-09-29

---
 src/menu/components/code/sandbox/editorcode/index.jsx |   61 ++++++++++++++++++++++--------
 1 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/src/menu/components/code/sandbox/editorcode/index.jsx b/src/menu/components/code/sandbox/editorcode/index.jsx
index 69ad361..a1de4bf 100644
--- a/src/menu/components/code/sandbox/editorcode/index.jsx
+++ b/src/menu/components/code/sandbox/editorcode/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, Tabs, message } from 'antd'
+import { FormOutlined } from '@ant-design/icons'
 
 import zhCN from '@/locales/zh-CN/model.js'
 import enUS from '@/locales/en-US/model.js'
@@ -9,6 +10,7 @@
 import './index.scss'
 
 const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror'))
+const { TabPane } = Tabs
 
 class DataSource extends Component {
   static propTpyes = {
@@ -17,9 +19,11 @@
   }
 
   state = {
-    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
+    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
     visible: false,
-    html: null
+    html: '',
+    css: '',
+    js: ''
   }
 
   shouldComponentUpdate (nextProps, nextState) {
@@ -31,38 +35,53 @@
 
     this.setState({
       visible: true,
-      html: config.html || null
+      html: config.html || '',
+      css: config.css || '',
+      js: config.js || '',
     })
   }
 
   verifySubmit = () => {
     const { config } = this.props
-    const { html } = this.state
+    const { html, css, js } = this.state
 
     this.setState({
       visible: false
     })
-    this.props.updateConfig({...config, html})
+    this.props.updateConfig({...config, html, css, js})
   }
 
-  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
+  onJsChange = (val) => {
+    if (/document\.getElementsByTagName/g.test(val)) {
+      message.warning('涓洪槻姝唬鐮佸啿绐侊紝js涓笉鍙娇鐢╠ocument.getElementsByTagName鏂规硶!')
+      return
+    }
+
+    this.setState({
+      js: val
+    })
+  }
+
+  render () {
+    const { visible, dict, html, css, js } = 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'}}>
+        <FormOutlined title="浠ｇ爜缂栬緫" style={{color: 'purple'}} 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 +91,17 @@
           onCancel={() => { this.setState({ visible: false }) }}
           destroyOnClose
         >
-          <CodeMirror value={html} onChange={this.onChange} />
+          <Tabs>
+            <TabPane tab="HTML" key="HTML">
+              <CodeMirror mode="text/xml" theme="cobalt" value={html} onChange={this.onHtmlChange} />
+            </TabPane>
+            <TabPane tab="CSS" key="CSS">
+              <CodeMirror mode="text/css" theme="cobalt" value={css} onChange={this.onCssChange} />
+            </TabPane>
+            <TabPane tab="JS" key="JS">
+              <CodeMirror mode="text/javascript" theme="cobalt" value={js} onChange={this.onJsChange} />
+            </TabPane>
+          </Tabs>
         </Modal>
       </div>
     )

--
Gitblit v1.8.0