feat: Optimize code editor intelli sense

JerryFan626 · JerryFan626 · commit 2424b76103f9 · 2023-10-12T14:52:12.000+08:00
diff --git a/chat2db-client/src/components/TabsNew/index.tsx b/chat2db-client/src/components/TabsNew/index.tsx
@@ -37,7 +37,6 @@ export default memo<IProps>((props) => {
   const [internalTabs, setInternalTabs] = useState<ITabItem[]>([]);
   const [internalActiveTab, setInternalActiveTab] = useState<number | string | undefined>();
   const [editingTab, setEditingTab] = useState<ITabItem['key'] | undefined>();
-  console.log('items', items);
 
   useEffect(() => {
     if (activeKey !== null && activeKey !== undefined) {
diff --git a/chat2db-client/src/pages/main/workspace/components/WorkspaceRight/index.tsx b/chat2db-client/src/pages/main/workspace/components/WorkspaceRight/index.tsx
@@ -17,7 +17,11 @@ import { handleLocalStorageSavedConsole } from '@/utils';
 import { useUpdateEffect } from '@/hooks/useUpdateEffect';
 import { v4 as uuidV4 } from 'uuid';
 import { IWorkspaceTab } from '@/typings';
-import { registerIntelliSenseField, registerIntelliSenseKeyword, registerIntelliSenseTable } from '@/utils/IntelliSense';
+import {
+  registerIntelliSenseField,
+  registerIntelliSenseKeyword,
+  registerIntelliSenseTable,
+} from '@/utils/IntelliSense';
 
 interface IProps {
   className?: string;
@@ -305,18 +309,16 @@ const WorkspaceRight = memo<IProps>((props: IProps) => {
   useEffect(() => {
     const { dataSourceId, databaseName, schemaName, databaseType } = curWorkspaceParams;
     if (databaseName) {
-      fetch(
-        `/api/rdb/table/table_list?dataSourceId=${dataSourceId}&databaseName=${databaseName}`,
-        // `/api/rdb/table/table_list?dataSourceId=${dataSourceId}&databaseName=${databaseName}&schemaName=${schemaName}`,
-        {},
-      )
-        .then((res) => {
-          return res.json();
+      sqlService
+        .getAllTableList({
+          dataSourceId,
+          databaseName,
+          schemaName,
         })
         .then((data) => {
-          console.log('databaseName', data.data);
-          tableList.current = (data.data || []).map((item: any) => item.name);
-          registerIntelliSenseTable(data.data, databaseName, databaseType);
+          console.log('databaseName', data);
+          tableList.current = (data || []).map((item: any) => item.name);
+          registerIntelliSenseTable(data, databaseName, databaseType);
           registerIntelliSenseField(tableList.current, dataSourceId, databaseName, schemaName);
         });
     }
diff --git a/chat2db-client/src/service/sql.ts b/chat2db-client/src/service/sql.ts
@@ -1,5 +1,13 @@
 import createRequest from './base';
-import { IPageResponse, IPageParams, IUniversalTableParams, IManageResultData, IRoutines, IDatabaseSupportField, IEditTableInfo } from '@/typings';
+import {
+  IPageResponse,
+  IPageParams,
+  IUniversalTableParams,
+  IManageResultData,
+  IRoutines,
+  IDatabaseSupportField,
+  IEditTableInfo,
+} from '@/typings';
 import { DatabaseTypeCode } from '@/constants';
 import { ExportSizeEnum, ExportTypeEnum } from '@/typings/resultTable';
 
@@ -133,71 +141,112 @@ export interface IExportParams extends IExecuteSqlParams {
 const getViewList = createRequest<IGetListParams, IPageResponse<IRoutines>>('/api/rdb/view/list', { method: 'get' });
 
 /** 获取函数列表 */
-const getFunctionList = createRequest<IGetListParams, IPageResponse<IRoutines>>('/api/rdb/function/list', { method: 'get' });
+const getFunctionList = createRequest<IGetListParams, IPageResponse<IRoutines>>('/api/rdb/function/list', {
+  method: 'get',
+});
 
 /** 获取触发器列表 */
-const getTriggerList = createRequest<IGetListParams, IPageResponse<IRoutines>>('/api/rdb/trigger/list', { method: 'get' });
+const getTriggerList = createRequest<IGetListParams, IPageResponse<IRoutines>>('/api/rdb/trigger/list', {
+  method: 'get',
+});
 
 /** 获取过程列表 */
-const getProcedureList = createRequest<IGetListParams, IPageResponse<IRoutines>>('/api/rdb/procedure/list', { method: 'get' });
+const getProcedureList = createRequest<IGetListParams, IPageResponse<IRoutines>>('/api/rdb/procedure/list', {
+  method: 'get',
+});
 
 /** 获取视图列列表 */
-const getViewColumnList = createRequest<IGetListParams, IPageResponse<IRoutines>>('/api/rdb/view/column_list', { method: 'get' });
+const getViewColumnList = createRequest<IGetListParams, IPageResponse<IRoutines>>('/api/rdb/view/column_list', {
+  method: 'get',
+});
 
 /** 获取视图详情 */
-const getViewDetail = createRequest<{
-  dataSourceId: number;
-  databaseName: string;
-  schemaName?: string;
-  tableName: string
-}, {ddl: string}>('/api/rdb/view/detail', { method: 'get' });
+const getViewDetail = createRequest<
+  {
+    dataSourceId: number;
+    databaseName: string;
+    schemaName?: string;
+    tableName: string;
+  },
+  { ddl: string }
+>('/api/rdb/view/detail', { method: 'get' });
 
 /** 获取触发器详情 */
-const getTriggerDetail = createRequest<{
-  dataSourceId: number;
-  databaseName: string;
-  schemaName?: string;
-  triggerName: string
-}, {triggerBody: string}>('/api/rdb/trigger/detail', { method: 'get' });
+const getTriggerDetail = createRequest<
+  {
+    dataSourceId: number;
+    databaseName: string;
+    schemaName?: string;
+    triggerName: string;
+  },
+  { triggerBody: string }
+>('/api/rdb/trigger/detail', { method: 'get' });
 
 /** 获取函数详情 */
-const getFunctionDetail = createRequest<{
-  dataSourceId: number;
-  databaseName: string;
-  schemaName?: string;
-  functionName: string
-}, {functionBody: string}>('/api/rdb/function/detail', { method: 'get' });
+const getFunctionDetail = createRequest<
+  {
+    dataSourceId: number;
+    databaseName: string;
+    schemaName?: string;
+    functionName: string;
+  },
+  { functionBody: string }
+>('/api/rdb/function/detail', { method: 'get' });
 
 /** 获取过程详情 */
-const getProcedureDetail = createRequest<{
-  dataSourceId: number;
-  databaseName: string;
-  schemaName?: string;
-  procedureName: string
-}, { procedureBody: string }>('/api/rdb/procedure/detail', { method: 'get' });
+const getProcedureDetail = createRequest<
+  {
+    dataSourceId: number;
+    databaseName: string;
+    schemaName?: string;
+    procedureName: string;
+  },
+  { procedureBody: string }
+>('/api/rdb/procedure/detail', { method: 'get' });
 
 /** 格式化sql */
-const sqlFormat = createRequest<{
-  sql: string;
-  dbType: DatabaseTypeCode;
-}, string>('/api/sql/format', { method: 'get' });
-
-/** 数据库支持的数据类型 */ 
-const getDatabaseFieldTypeList = createRequest<{
-  dataSourceId: number;
-  databaseName: string;
-}, IDatabaseSupportField>('/api/rdb/table/table_meta', { method: 'get' });
-
-/** 获取表的详情 */ 
-const getTableDetails = createRequest<{
-  dataSourceId: number;
-  databaseName: string;
-  schemaName?: string | null;
-  tableName: string;
-  refresh: boolean;
-}, IEditTableInfo>('/api/rdb/table/query', { method: 'get' });
-
-export interface IModifyTableSqlParams { 
+const sqlFormat = createRequest<
+  {
+    sql: string;
+    dbType: DatabaseTypeCode;
+  },
+  string
+>('/api/sql/format', { method: 'get' });
+
+/** 数据库支持的数据类型 */
+const getDatabaseFieldTypeList = createRequest<
+  {
+    dataSourceId: number;
+    databaseName: string;
+  },
+  IDatabaseSupportField
+>('/api/rdb/table/table_meta', { method: 'get' });
+
+/** 获取表的详情 */
+const getTableDetails = createRequest<
+  {
+    dataSourceId: number;
+    databaseName: string;
+    schemaName?: string | null;
+    tableName: string;
+    refresh: boolean;
+  },
+  IEditTableInfo
+>('/api/rdb/table/query', { method: 'get' });
+
+/** 获取库的所有表 */
+const getAllTableList = createRequest<
+  { dataSourceId: number; databaseName: string; schemaName?: string | null },
+  Array<{ name: string; comment: string }>
+>('/api/rdb/table/table_list', { method: 'get' });
+
+/** 获取表的所有字段 */
+const getAllFieldByTable = createRequest<
+  { dataSourceId: number; databaseName: string; schemaName?: string | null; tableName: string },
+  Array<{ name: string; tableName: string }>
+>('/api/rdb/table/column_list', { method: 'get' });
+
+export interface IModifyTableSqlParams {
   dataSourceId: number;
   databaseName: string;
   schemaName?: string | null;
@@ -207,16 +256,24 @@ export interface IModifyTableSqlParams {
   refresh: boolean;
 }
 
-/** 获取修改表的sql */ 
-const getModifyTableSql = createRequest<IModifyTableSqlParams, { sql: string }[]>('/api/rdb/table/modify/sql', { method: 'post' });
+/** 获取修改表的sql */
+const getModifyTableSql = createRequest<IModifyTableSqlParams, { sql: string }[]>('/api/rdb/table/modify/sql', {
+  method: 'post',
+});
 
-/** 执行编辑表的sql, 专为编辑表而生 */ 
-const executeDDL = createRequest<IExecuteSqlParams, { success: boolean, message: string, originalSql: string }>('/api/rdb/dml/execute_ddl', { method: 'post' });
+/** 执行编辑表的sql, 专为编辑表而生 */
+const executeDDL = createRequest<IExecuteSqlParams, { success: boolean; message: string; originalSql: string }>(
+  '/api/rdb/dml/execute_ddl',
+  { method: 'post' },
+);
 
 // 执行修改表数据的sql
-const executeUpdateDataSql = createRequest<IExecuteSqlParams, { success: boolean, message: string, sql:string }>('/api/rdb/dml/execute_update', { method: 'post' });
+const executeUpdateDataSql = createRequest<IExecuteSqlParams, { success: boolean; message: string; sql: string }>(
+  '/api/rdb/dml/execute_update',
+  { method: 'post' },
+);
 
-/** 获取修改表数据的接口 */ 
+/** 获取修改表数据的接口 */
 const getExecuteUpdateSql = createRequest<any, string>('/api/rdb/dml/get_update_sql', { method: 'post' });
 
 export default {
@@ -253,6 +310,6 @@ export default {
   deleteTablePin,
   getDMLCount,
   // exportResultTable
+  getAllTableList,
+  getAllFieldByTable
 };
-
-
diff --git a/chat2db-client/src/utils/IntelliSense/field.ts b/chat2db-client/src/utils/IntelliSense/field.ts
@@ -1,6 +1,7 @@
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import sqlService from '@/service/sql';
 
-let fieldList: Record<string, string[]> = {};
+let fieldList: Record<string, Array<{ name: string; tableName: string }>> = {};
 
 /** 当前库下的表 */
 let intelliSenseField = monaco.languages.registerCompletionItemProvider('sql', {
@@ -15,9 +16,8 @@ const registerIntelliSenseField = (tableList: string[], dataSourceId, databaseNa
   intelliSenseField.dispose();
   fieldList = {};
   intelliSenseField = monaco.languages.registerCompletionItemProvider('sql', {
-    triggerCharacters: [' ', '.'],
+    triggerCharacters: [' ', '.', '`', "'", '"'],
     provideCompletionItems: async (model, position) => {
-      console.log('registerIntelliSenseField start');
       // 获取到当前行文本
       const textUntilPosition = model.getValueInRange({
         startLineNumber: position.lineNumber,
@@ -26,24 +26,26 @@ const registerIntelliSenseField = (tableList: string[], dataSourceId, databaseNa
         endColumn: position.column,
       });
 
-      // 查找最后一个单词，这里通过正则获取空格或句号之前的最后一个单词
-      const match = textUntilPosition.match(/([\w]+)[\s\.]$/);
+      const match = textUntilPosition.match(/(\b\w+\b)[^\w]*$/);
+      let word;
+      if (match) {
+        word = match[1];
+        console.log(word); // 输出: text
+      }
 
-      if (!match) {
+      console.log('registerIntelliSenseField start', textUntilPosition, word);
+      if (!word) {
         return; // 如果没有匹配到，直接返回
       }
-
-      const word = match[1]; // 获取匹配到的单词
-
       if (word && tableList.includes(word) && !fieldList[word]) {
         console.log('registerIntelliSenseField start word');
-        const response = await fetch(
-          `/api/rdb/table/column_list?dataSourceId=${dataSourceId}&databaseName=${databaseName}&tableName=${word}`,
-          {},
-        );
-        const data = await response.json();
-
-        fieldList[word] = data.data;
+        const data = await sqlService.getAllFieldByTable({
+          dataSourceId,
+          databaseName,
+          schemaName,
+          tableName: word,
+        });
+        fieldList[word] = data;
       }
 
       const suggestions = Object.keys(fieldList).reduce((acc, cur) => {
diff --git a/chat2db-client/src/utils/IntelliSense/table.ts b/chat2db-client/src/utils/IntelliSense/table.ts
@@ -17,12 +17,13 @@ const registerIntelliSenseTable = (
 ) => {
   intelliSenseTable.dispose();
   intelliSenseTable = monaco.languages.registerCompletionItemProvider('sql', {
+    triggerCharacters: [' '],
     provideCompletionItems: (model, position) => {
       const handleInsertText = (text) => {
         if (databaseCode === DatabaseTypeCode.POSTGRESQL) {
-          return `"${text}"`;
+          return `${text}`;
         } else {
-          return `\`${text}\``;
+          return `${text}`;
         }
       };
       return {
