Optimization StudioConsole's StudioProcess click show flinksql the div overflow (#802)

dlink-web/src/components/Studio/StudioConsole/StudioHistory/index.tsx

@@ -20,20 +20,19 @@
 
 import {StateType} from "@/pages/DataStudio/model";
 import {connect} from "umi";
-import {Tag, Space, Typography, Divider, Badge, Modal} from 'antd';
-import {MessageOutlined,ClusterOutlined,FireOutlined,RocketOutlined} from "@ant-design/icons";
+import {Badge, Divider, Modal, Space, Tag, Typography} from 'antd';
+import {ClusterOutlined, FireOutlined, MessageOutlined, RocketOutlined} from "@ant-design/icons";
 import ProList from '@ant-design/pro-list';
 import {handleRemove, queryData} from "@/components/Common/crud";
 import ProDescriptions from '@ant-design/pro-descriptions';
 import React, {useState} from "react";
-import {
-  ModalForm,
-} from '@ant-design/pro-form';
+import {ModalForm,} from '@ant-design/pro-form';
 import styles from "./index.less";
 import {Scrollbars} from 'react-custom-scrollbars';
 import StudioPreview from "../StudioPreview";
 import {getJobData} from "@/pages/DataStudio/service";
 import {HistoryItem} from "@/components/Studio/StudioConsole/StudioHistory/data";
+import CodeShow from "@/components/Common/CodeShow";
 
 
 const { Title, Paragraph, Text, Link } = Typography;
@@ -356,7 +355,7 @@ const StudioHistory = (props: any) => {
               </Tag>
             </ProDescriptions.Item>
             <ProDescriptions.Item>
-              <pre className={styles.code}>{row.statement}</pre>
+              <CodeShow width={"100%"} height={"500px"} language={"sql"} code={row.statement} theme={"vs-dark"}/>
             </ProDescriptions.Item>
           </ProDescriptions>
         )}