[fix](com render sql): replace code for render sql com

packages/sqle/src/components/RenderSQL/index.tsx

@@ -8,7 +8,7 @@ import { RenderSQLStyleWrapper } from './style';
 const RenderSQL: React.FC<RenderSQLProps> = ({
   sql,
   rows = 10,
-  tooltip,
+  tooltip = true,
   onClick
 }) => {
   if (!sql) {

packages/sqle/src/page/AuditPlan/PlanDetail/DetailCom/index.tsx

@@ -16,75 +16,70 @@
 import { IAuditPlanSQLHeadV1 } from '@actiontech/shared/lib/api/sqle/service/common';
 import { AuditPlanSQLHeadV1TypeEnum } from '@actiontech/shared/lib/api/sqle/service/common.enum';
 import { formatTime } from '@actiontech/shared/lib/utils/Common';
-import HighlightCode from '../../../../utils/HighlightCode';
 import { useTableRequestParams } from '@actiontech/shared/lib/components/ActiontechTable';
 
+import RenderSQL from '../../../../components/RenderSQL';
+
 const DetailCom = () => {
   const { t } = useTranslation();
 
   const urlParams = useParams<PlanDetailUrlParams>();
   const { projectName } = useCurrentProject();
 
   const {
     data: auditTask,
     run: getTaskInfo,
     loading: taskLoading
   } = useRequest(() => {
     return audit_plan
       .getAuditPlanV1({
         audit_plan_name: urlParams.auditPlanName ?? '',
         project_name: projectName
       })
       .then((res) => res.data);
   });
 
   const { pagination, tableChange } = useTableRequestParams();
   const [columns, setColumns] = useState<ColumnType<any>[]>([]);
 
   const {
     loading,
     data: sqlList,
     refresh
   } = useRequest(
     () =>
       audit_plan
         .getAuditPlanSQLsV1({
           project_name: projectName,
           audit_plan_name: urlParams.auditPlanName ?? '',
           page_index: pagination.page_index,
           page_size: pagination.page_size
         })
         .then((res) => {
           return {
             head: res.data.data?.head,
             list: res.data.data?.rows,
             total: res.data.total_nums
           };
         }),
     {
       ready: !!urlParams.auditPlanName,
       refreshDeps: [urlParams.auditPlanName, pagination],
 
       onSuccess: (res) => {
         const { head = [] } = res;
         setColumns(
           (head as IAuditPlanSQLHeadV1[]).map((item) => ({
             title: item.desc,
             dataIndex: item.name,
-            width: item.type === AuditPlanSQLHeadV1TypeEnum.sql ? 300 : 'auto',
+            width: item.type === AuditPlanSQLHeadV1TypeEnum.sql ? 500 : 'auto',
             render: (text) => {
               if (item.type === AuditPlanSQLHeadV1TypeEnum.sql) {
-                // todo: RenderSQL
                 return (
-                  <div className="sql-cont-width">
-                    <pre
-                      dangerouslySetInnerHTML={{
-                        __html: HighlightCode.highlightSql(text)
-                      }}
-                      className="pre-warp-break-all"
-                    ></pre>
+                  <div className="sql-cont-width" style={{ width: 500 }}>
+                    <RenderSQL sql={text} />
                   </div>
                 );
               }
               if (item.name === 'last_receive_timestamp') {
                 return formatTime(text);