新增数据查询功能，包括执行SQL、查看执行计划和查询历史

添加了新的数据查询页面，用户可以执行SQL查询、查看查询的执行计划以及浏览查询历史。实现了基础的查询功能，包括运行、格式化和保存SQL。同时，提供了执行计划分析和历史记录查看的功能，以帮助用户更好地理解和管理查询操作。

此外，引入了代码编辑器和SQL格式化工具，以增强用户体验和代码可读性。用户可以通过拖拽操作添加查询表，并且可以通过AI助手辅助生成SQL语句，提供了处理不同类型SQL语句（如select、delete、insert等）的功能。

最后，实现了查询信息的持久化和查询树结构的管理功能，包括添加、删除和重命名查询或文件夹。这些功能的实现，为用户提供了强大的数据查询和管理工具。

config/routes.ts

@@ -196,6 +196,16 @@
       },
     ]
   },
+  {
+    path: '/dataQuery',
+    component: '../layouts/HomeLayout',
+    routes: [
+      {
+        path: '/dataQuery',
+        component: './dataQuery',
+      },
+    ]
+  },
   {
     path: '/home',
     component: '../layouts/HomeLayout',

src/layouts/HomeLayout/_defaultProps.tsx

@@ -1,4 +1,4 @@
-import {DatabaseNetwork, EveryUser, HomeTwo, Sphere, Table, Timeline, User} from "@icon-park/react";
+import {DatabaseNetwork, EveryUser, HomeTwo, Sphere, Table, Timeline, User, Search} from "@icon-park/react";
 
 export default {
   route: {
@@ -14,6 +14,11 @@ export default {
         name: '数据模型',
         icon: <Table theme="filled" size="18" fill="#DE2910" strokeWidth={2}/>,
       },
+      {
+        path: '/dataQuery',
+        name: '数据查询',
+        icon: <Search theme="filled" size="18" fill="#DE2910" strokeWidth={2}/>,
+      },
 
       {
         path: '/databaseConfig',

src/pages/dataQuery/component/ExplainResult.tsx

@@ -0,0 +1,41 @@
+import {ProTable} from "@ant-design/pro-components";
+import React from "react";
+
+export type ExplainResultProps = {
+  tableResult: { columns: any, dataSource: any, total: number };
+};
+
+
+const ExplainResult: React.FC<ExplainResultProps> = (props) => {
+
+
+  const getColumns = () => {
+    return props.tableResult.columns.map((k: any) => ({
+      title: k,
+      key: k,
+      dataIndex: k,
+      ellipsis: true,
+      width: 150,
+      render: (text: any) => text === null ? <span style={{fontWeight: '100'}}>{"<null>"}</span> : text
+    }))
+  }
+
+  return (<>
+    <ProTable
+      size={'small'}
+      scroll={{ x: 1300 }}
+      dataSource={props.tableResult.dataSource}
+      rowKey="id"
+      pagination={{
+        showQuickJumper: true,
+        total: props.tableResult.total
+      }}
+      columns={getColumns()}
+      search={false}
+      options={false}
+      dateFormatter="string"
+    />
+  </>);
+};
+
+export default React.memo(ExplainResult)

src/pages/dataQuery/component/QueryHistory.tsx

@@ -0,0 +1,91 @@
+import {ProColumns, ProTable} from "@ant-design/pro-components";
+import React, {useEffect} from "react";
+import {GET} from "@/services/crud";
+import {useSearchParams} from "@@/exports";
+import * as cache from "@/utils/cache";
+import {CONSTANT} from "@/utils/constant";
+
+export type QueryHistoryProps = {
+  queryId: string | number;
+  key: string;
+};
+
+type QueryHistoryItem = {
+  id: number | string;
+  title: string;
+  sqlInfo: string;
+  dbName: string;
+  createTime: string;
+  creator: string;
+  duration: number;
+};
+
+
+const QueryHistory: React.FC<QueryHistoryProps> = (props) => {
+  useEffect(() => {
+  }, [props.key])
+
+  const columns: ProColumns<QueryHistoryItem>[] = [
+    {
+      title: 'SQL',
+      dataIndex: 'sqlInfo',
+      copyable: true,
+      ellipsis: true,
+    },
+    {
+      title: '执行数据库',
+      dataIndex: 'dbName',
+    },
+    {
+      title: '耗时',
+      dataIndex: 'duration',
+    },
+    {
+      title: '执行时间',
+      dataIndex: 'createTime',
+    },
+    {
+      title: '执行人',
+      dataIndex: 'creator',
+    },
+  ]
+
+
+  const [searchParams] = useSearchParams();
+  let projectId = searchParams.get("projectId") || '';
+  if (!projectId || projectId === '') {
+    projectId = cache.getItem(CONSTANT.PROJECT_ID) || '';
+  }
+
+
+  return (<>
+    <ProTable
+      size={'small'}
+      scroll={{x: 1300}}
+      rowKey="id"
+      request={
+        async (params) => {
+          const result = await GET('/ncnb/queryHistory', {
+            ...params,
+            size: params.pageSize,
+            queryId: props.queryId,
+          });
+          return {
+            data: result?.data?.records,
+            total: result?.data?.total,
+            success: result.code === 200
+          }
+        }
+      }
+      pagination={{
+        pageSize: 6,
+      }}
+      columns={columns}
+      search={false}
+      options={false}
+      dateFormatter="string"
+    />
+  </>);
+};
+
+export default React.memo(QueryHistory)

src/pages/dataQuery/component/QueryResult.tsx

@@ -0,0 +1,41 @@
+import {ProTable} from "@ant-design/pro-components";
+import React from "react";
+
+export type QueryResultProps = {
+  tableResult: { columns: any, dataSource: any, total: number };
+};
+
+
+const QueryResult: React.FC<QueryResultProps> = (props) => {
+
+
+  const getColumns = () => {
+    return props.tableResult.columns.map((k: any) => ({
+      title: k,
+      key: k,
+      dataIndex: k,
+      ellipsis: true,
+      width: 150,
+      render: (text: any) => text === null ? <span style={{fontWeight: '100'}}>{"<null>"}</span> : text
+    }))
+  }
+
+  return (<>
+    <ProTable
+      size={'small'}
+      scroll={{ x: 1300 }}
+      dataSource={props.tableResult.dataSource}
+      rowKey="id"
+      pagination={{
+        showQuickJumper: true,
+        total: props.tableResult.total
+      }}
+      columns={getColumns()}
+      search={false}
+      options={false}
+      dateFormatter="string"
+    />
+  </>);
+};
+
+export default React.memo(QueryResult)