Merge branch 'master' of http://gogsb.soaringnova.com/liutao/ai-proj-demo

package.json

@@ -8,9 +8,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "@uiw/react-codemirror": "^4.11.4",
     "add": "^2.0.6",
     "antd": "^4.22.4",
     "axios": "^0.27.2",
+    "codemirror": "^6.0.1",
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

src/module/datasource/component/DataTableStruct.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { Table } from 'antd'
 import styled from 'styled-components'
+import JsonEditor from './utils/JsonEditor'
 
 const DataTable = styled.div`
   .table-style {
@@ -41,13 +42,14 @@ export default function DataTableStruct({ currentStep, tableData, datax }) {
 
   useEffect(() => {
     setjsonData(datax)
-    console.log(JSON.parse(datax))
+    console.log(JSON.stringify(datax))
   }, [datax])
 
   let content = (
     <Table columns={columns} dataSource={tableData} className={'table-style'} />
   )
   if (currentStep === 3) {
+    content = <JsonEditor code={JSON.stringify(datax)}/>
   }
 
   return <DataTable>{content}</DataTable>

src/module/datasource/component/utils/JsonEditor.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import CodeMirror from "@uiw/react-codemirror";
+// import "codemirror/keymap/sublime";
+// import "codemirror/theme/monokai.css";
+
+// const code = "const a = 0;";
+
+
+export default function JsonEditor({code}) {
+  return (
+    <CodeMirror
+      value={code}
+      options={{
+        theme: "monokai",
+        keyMap: "sublime",
+        mode: "jsx",
+        // 括号匹配
+        matchBrackets: true,
+        // tab缩进
+        tabSize: 2,
+      }}
+    />
+  );
+}