From 49f09cc6f8ff8c30a75ed1a9d6f510b69b73962a Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 12 十二月 2023 21:05:37 +0800
Subject: [PATCH] 2023-12-12

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

diff --git a/src/menu/components/code/sandbox/editorcode/index.jsx b/src/menu/components/code/sandbox/editorcode/index.jsx
index 69ad361..d03991d 100644
--- a/src/menu/components/code/sandbox/editorcode/index.jsx
+++ b/src/menu/components/code/sandbox/editorcode/index.jsx
@@ -1,14 +1,14 @@
 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'
 import asyncComponent from '@/utils/asyncComponent'
 import './index.scss'
 
 const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror'))
+const { TabPane } = Tabs
 
 class DataSource extends Component {
   static propTpyes = {
@@ -17,9 +17,10 @@
   }
 
   state = {
-    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
     visible: false,
-    html: null
+    html: '',
+    css: '',
+    js: ''
   }
 
   shouldComponentUpdate (nextProps, nextState) {
@@ -31,48 +32,73 @@
 
     this.setState({
       visible: true,
-      html: config.html || null
+      html: config.html || '',
+      css: config.css || '',
+      js: config.js || '// Function(data, result, Api, notification, systemType) data-鏁版嵁鍒楄〃锛宺esult-鏌ヨ鎺ュ彛杩斿洖缁撴灉锛孉pi-鎺ュ彛锛宯otification-淇℃伅鎻愮ず鎺т欢锛堢Щ鍔ㄧ涓篢oast锛夛紝systemType-绯荤粺绫诲瀷锛堟寮忎负 production锛屾祴璇曚负绌猴級',
     })
   }
 
   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, 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}
           maskClosable={false}
-          okText={dict['model.submit']}
+          okText="鎻愪氦"
           onOk={this.verifySubmit}
           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