From 829a68feaada597ecd0f919708912ed87e2405a9 Mon Sep 17 00:00:00 2001
From: "meilin.huang" <954537473@qq.com>
Date: Tue, 19 Sep 2023 23:00:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=95=B0=E6=8D=AE=E5=BA=93=E5=A4=9A?=
 =?UTF-8?q?=E5=BA=93=E5=88=87=E6=8D=A2=E5=85=B3=E9=94=AE=E5=AD=97=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E9=94=99=E8=AF=AF=E4=BF=AE=E5=A4=8D&sql=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E7=BB=84=E4=BB=B6=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/monaco/MonacoEditor.vue    |  38 +-
 .../monaco/completionItemProvider.ts          |  25 ++
 mayfly_go_web/src/types/shim.d.ts             |  11 +-
 mayfly_go_web/src/views/ops/db/SqlExec.vue    |  17 +-
 .../src/views/ops/db/component/tab/Query.vue  | 394 +-----------------
 mayfly_go_web/src/views/ops/db/db.ts          | 314 ++++++++++++++
 server/pkg/config/mysql.go                    |   3 +
 server/pkg/ws/client_manager.go               |   4 +-
 8 files changed, 389 insertions(+), 417 deletions(-)
 create mode 100644 mayfly_go_web/src/components/monaco/completionItemProvider.ts

diff --git a/mayfly_go_web/src/components/monaco/MonacoEditor.vue b/mayfly_go_web/src/components/monaco/MonacoEditor.vue
index eaaf5e03..6c0d9670 100644
--- a/mayfly_go_web/src/components/monaco/MonacoEditor.vue
+++ b/mayfly_go_web/src/components/monaco/MonacoEditor.vue
@@ -9,7 +9,6 @@
 
 <script lang="ts" setup>
 import { ref, watch, toRefs, reactive, onMounted, onBeforeUnmount } from 'vue';
-// import * as monaco from 'monaco-editor';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 // 相关语言
 import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution.js';
@@ -155,7 +154,22 @@ const options = {
     },
 };
 
+const monacoTextarea: any = ref();
+
+let monacoEditorIns: editor.IStandaloneCodeEditor = null as any;
+let completionItemProvider: any = null;
+
+self.MonacoEnvironment = {
+    getWorker(_: any, label: string) {
+        if (label === 'json') {
+            return new JsonWorker();
+        }
+        return new EditorWorker();
+    },
+};
+
 const state = reactive({
+    editorHeight: '500px',
     languageMode: 'shell',
 });
 
@@ -173,6 +187,7 @@ onBeforeUnmount(() => {
         monacoEditorIns.dispose();
     }
     if (completionItemProvider) {
+        console.log('unmount=> dispose completion item provider');
         completionItemProvider.dispose();
     }
 });
@@ -203,20 +218,6 @@ watch(
     }
 );
 
-const monacoTextarea: any = ref(null);
-
-let monacoEditorIns: editor.IStandaloneCodeEditor = null as any;
-let completionItemProvider: any = null;
-
-self.MonacoEnvironment = {
-    getWorker(_: any, label: string) {
-        if (label === 'json') {
-            return new JsonWorker();
-        }
-        return new EditorWorker();
-    },
-};
-
 const initMonacoEditorIns = () => {
     console.log('初始化monaco编辑器');
     // options参数参考 https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html#language
@@ -260,6 +261,7 @@ const setEditorValue = (value: any) => {
  */
 const registerCompletionItemProvider = () => {
     if (completionItemProvider) {
+        console.log('exist competion item provider, dispose now');
         completionItemProvider.dispose();
     }
     if (state.languageMode == 'shell') {
@@ -299,7 +301,11 @@ const format = () => {
     monacoEditorIns.trigger('', 'editor.action.formatDocument', '');
 };
 
-defineExpose({ format });
+const getEditor = () => {
+    return monacoEditorIns;
+};
+
+defineExpose({ getEditor, format });
 </script>
 
 <style lang="scss">
diff --git a/mayfly_go_web/src/components/monaco/completionItemProvider.ts b/mayfly_go_web/src/components/monaco/completionItemProvider.ts
new file mode 100644
index 00000000..8030aefe
--- /dev/null
+++ b/mayfly_go_web/src/components/monaco/completionItemProvider.ts
@@ -0,0 +1,25 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+/**
+ * key: language, value: CompletionItemProvider
+ */
+const completionItemProviders: Map<string, any> = new Map();
+
+export function registerCompletionItemProvider(language: string, completionItemProvider: any, replace: boolean = true) {
+    const exist = completionItemProviders.get(language);
+    if (exist) {
+        if (!replace) {
+            return;
+        }
+        exist.dispose();
+    }
+    completionItemProviders.set(language, monaco.languages.registerCompletionItemProvider(language, completionItemProvider));
+}
+
+export function dispposeCompletionItemProvider(language: string) {
+    const exist = completionItemProviders.get(language);
+    if (exist) {
+        exist.dispose();
+        completionItemProviders.delete(language);
+    }
+}
diff --git a/mayfly_go_web/src/types/shim.d.ts b/mayfly_go_web/src/types/shim.d.ts
index a284db65..cbfd6acf 100644
--- a/mayfly_go_web/src/types/shim.d.ts
+++ b/mayfly_go_web/src/types/shim.d.ts
@@ -1,14 +1,5 @@
-/* eslint-disable */
-import {IDisposable} from 'monaco-editor';
-declare global {
-	interface Window {
-		completionItemProvider?: IDisposable | undefined;
-	}
-}
-
 // 申明外部 npm 插件模块
 declare module 'sql-formatter';
 declare module 'jsoneditor';
 declare module 'asciinema-player';
-declare module 'monaco-editor';
-declare module 'vue-grid-layout';
\ No newline at end of file
+declare module 'vue-grid-layout';
diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue
index 8b56cc68..9c081043 100644
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -95,13 +95,14 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, onMounted, reactive, ref, toRefs } from 'vue';
+import { defineAsyncComponent, onMounted, reactive, ref, toRefs, onBeforeUnmount } from 'vue';
 import { ElMessage } from 'element-plus';
 
-import { DbInst, TabInfo, TabType } from './db';
+import { DbInst, TabInfo, TabType, registerDbCompletionItemProvider } from './db';
 import { TagTreeNode } from '../component/tag';
 import TagTree from '../component/TagTree.vue';
 import { dbApi } from './api';
+import { dispposeCompletionItemProvider } from '../../../components/monaco/completionItemProvider';
 
 const Query = defineAsyncComponent(() => import('./component/tab/Query.vue'));
 const TableData = defineAsyncComponent(() => import('./component/tab/TableData.vue'));
@@ -144,12 +145,15 @@ const state = reactive({
 const { nowDbInst } = toRefs(state);
 
 onMounted(() => {
-    self.completionItemProvider?.dispose();
     setHeight();
     // 监听浏览器窗口大小变化,更新对应组件高度
     window.onresize = () => setHeight();
 });
 
+onBeforeUnmount(() => {
+    dispposeCompletionItemProvider('sql');
+});
+
 /**
  * 设置editor高度和数据表高度
  */
@@ -207,7 +211,6 @@ const loadNode = async (node: any) => {
     // 点击数据库实例 -> 加载库列表
     if (nodeType === NodeType.DbInst) {
         const dbs = params.database.split(' ')?.sort();
-        console.log(dbs);
         return dbs.map((x: any) => {
             return new TagTreeNode(`${data.key}.${x}`, x, NodeType.Db).withParams({
                 tagPath: params.tagPath,
@@ -406,9 +409,15 @@ const onTabChange = () => {
         state.db = '';
         return;
     }
+
     const nowTab = state.tabs.get(state.activeName);
     state.nowDbInst = DbInst.getInst(nowTab?.dbId);
     state.db = nowTab?.db as string;
+
+    if (nowTab?.type == TabType.Query) {
+        // 注册sql提示
+        registerDbCompletionItemProvider('sql', nowTab.dbId, nowTab.db, nowTab.params.dbs);
+    }
 };
 
 const onGenerateInsertSql = async (sql: string) => {
diff --git a/mayfly_go_web/src/views/ops/db/component/tab/Query.vue b/mayfly_go_web/src/views/ops/db/component/tab/Query.vue
index a8e30ada..31f54bd2 100644
--- a/mayfly_go_web/src/views/ops/db/component/tab/Query.vue
+++ b/mayfly_go_web/src/views/ops/db/component/tab/Query.vue
@@ -44,9 +44,7 @@
             </div>
         </div>
 
-        <div class="mt5 sqlEditor">
-            <div :id="'MonacoTextarea-' + ti.key" :style="{ height: editorHeight }"></div>
-        </div>
+        <MonacoEditor ref="monacoEditorRef" class="mt5" v-model="state.sql" language="sql" :height="editorHeight" :id="'MonacoTextarea-' + ti.key" />
 
         <div class="editor-move-resize" @mousedown="onDragSetHeight">
             <el-icon>
@@ -90,44 +88,22 @@
 
 <script lang="ts" setup>
 import { nextTick, watch, onMounted, reactive, toRefs, ref, Ref } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '@/store/themeConfig';
 import { getToken } from '@/common/utils/storage';
 import { isTrue, notBlank } from '@/common/assert';
 import { format as sqlFormatter } from 'sql-formatter';
 import config from '@/common/config';
 import { ElMessage, ElMessageBox } from 'element-plus';
 
-import { language as sqlLanguage } from 'monaco-editor/esm/vs/basic-languages/mysql/mysql.js';
-import { language as addSqlLanguage } from '../../lang/mysql.js';
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
-// import * as monaco from 'monaco-editor';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import { editor, languages, Position } from 'monaco-editor';
-// 相关语言
-import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js';
-import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js';
-import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestInlineCompletions.js';
-// 右键菜单
-import 'monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu.js';
-import 'monaco-editor/esm/vs/editor/contrib/caretOperations/browser/caretOperations.js';
-import 'monaco-editor/esm/vs/editor/contrib/clipboard//browser/clipboard.js';
-import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js';
-import 'monaco-editor/esm/vs/editor/contrib/format//browser/formatActions.js';
+import { editor } from 'monaco-editor';
 
-// 主题仓库 https://github.com/brijeshb42/monaco-themes
-// 主题例子 https://editor.bitwiser.in/
-import SolarizedLight from 'monaco-themes/themes/Solarized-light.json';
 import DbTable from '../DbTable.vue';
-import { DbInst, TabInfo } from '../../db';
+import { TabInfo } from '../../db';
 import { exportCsv } from '@/common/utils/export';
 import { dateStrFormat } from '@/common/utils/date';
 import { dbApi } from '../../api';
 
-const sqlCompletionKeywords = [...sqlLanguage.keywords, ...addSqlLanguage.keywords];
-const sqlCompletionOperators = [...sqlLanguage.operators, ...addSqlLanguage.operators];
-const sqlCompletionBuiltinFunctions = [...sqlLanguage.builtinFunctions, ...addSqlLanguage.builtinFunctions];
-const sqlCompletionBuiltinVariables = [...sqlLanguage.builtinVariables, ...addSqlLanguage.builtinVariables];
+import MonacoEditor from '@/components/monaco/MonacoEditor.vue';
 
 const emits = defineEmits(['saveSqlSuccess', 'deleteSqlSuccess']);
 
@@ -147,11 +123,12 @@ const props = defineProps({
     },
 });
 
-const { themeConfig } = storeToRefs(useThemeConfig());
 const token = getToken();
-let monacoEditor = {} as editor.IStandaloneCodeEditor;
+const monacoEditorRef: any = ref(null);
 const dbTableRef = ref(null) as Ref;
 
+let monacoEditor: editor.IStandaloneCodeEditor;
+
 const state = reactive({
     token,
     ti: {} as TabInfo,
@@ -180,15 +157,6 @@ watch(
     }
 );
 
-// 监听 themeConfig editorTheme配置文件的变化
-watch(
-    () => themeConfig.value.editorTheme,
-    (val) => {
-        console.log('monaco editor theme change: ', val);
-        monaco?.editor?.setTheme(val);
-    }
-);
-
 onMounted(async () => {
     console.log('in query mounted');
     state.ti = props.data;
@@ -207,39 +175,8 @@ onMounted(async () => {
     await state.ti.getNowDbInst().loadDbHints(state.ti.db);
 });
 
-self.MonacoEnvironment = {
-    getWorker() {
-        return new EditorWorker();
-    },
-};
-
 const initMonacoEditor = () => {
-    registerSqlCompletionItemProvider();
-
-    let monacoTextarea = document.getElementById('MonacoTextarea-' + state.ti.key) as HTMLElement;
-    // options参数参考 https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html#language
-    // 初始化一些主题
-    monaco.editor.defineTheme('SolarizedLight', SolarizedLight);
-    monacoEditor = monaco.editor.create(monacoTextarea, {
-        language: 'sql',
-        theme: themeConfig.value.editorTheme,
-        automaticLayout: true, //自适应宽高布局
-        folding: false,
-        roundedSelection: false, // 禁用选择文本背景的圆角
-        matchBrackets: 'near',
-        linkedEditing: true,
-        cursorBlinking: 'smooth', // 光标闪烁样式
-        mouseWheelZoom: true, // 在按住Ctrl键的同时使用鼠标滚轮时，在编辑器中缩放字体
-        overviewRulerBorder: false, // 不要滚动条的边框
-        tabSize: 2, // tab 缩进长度
-        // fontFamily: 'JetBrainsMono', // 字体 暂时不要设置，否则光标容易错位
-        fontWeight: 'bold',
-        // letterSpacing: 1, 字符间距
-        // quickSuggestions:false, // 禁用代码提示
-        minimap: {
-            enabled: false, // 不要小地图
-        },
-    });
+    monacoEditor = monacoEditorRef.value.getEditor();
 
     // 注册快捷键：ctrl + R 运行选中的sql
     monacoEditor.addAction({
@@ -294,11 +231,6 @@ const initMonacoEditor = () => {
             }
         },
     });
-
-    // 如果sql有值，则默认赋值
-    if (state.sql) {
-        monacoEditor.getModel()?.setValue(state.sql);
-    }
 };
 
 /**
@@ -308,7 +240,7 @@ const onDragSetHeight = () => {
     document.onmousemove = (e) => {
         e.preventDefault();
         //得到鼠标拖动的宽高距离：取绝对值
-        state.editorHeight = `${document.getElementById('MonacoTextarea-' + state.ti.key)!.offsetHeight + e.movementY}px`;
+        state.editorHeight = `${document.getElementById('MonacoTextarea-' + state.ti.key)!.clientHeight + e.movementY}px`;
         state.tableDataHeight -= e.movementY;
     };
     document.onmouseup = () => {
@@ -590,308 +522,6 @@ const submitUpdateFields = () => {
 const cancelUpdateFields = () => {
     dbTableRef.value.cancelUpdateFields();
 };
-
-const registerSqlCompletionItemProvider = () => {
-    // 参考 https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example
-    self.completionItemProvider =
-        self.completionItemProvider ||
-        monaco.languages.registerCompletionItemProvider('sql', {
-            triggerCharacters: ['.', ' '],
-            provideCompletionItems: async (model: editor.ITextModel, position: Position): Promise<languages.CompletionList | null | undefined> => {
-                let word = model.getWordUntilPosition(position);
-                const nowTab = props.data;
-                if (!nowTab) {
-                    return;
-                }
-                const { db, dbId } = nowTab;
-                const dbInst = DbInst.getInst(dbId);
-                const { lineNumber, column } = position;
-                const { startColumn, endColumn } = word;
-
-                // 当前行文本
-                let lineContent = model.getLineContent(lineNumber);
-                // 注释行不需要代码提示
-                if (lineContent.startsWith('--')) {
-                    return { suggestions: [] };
-                }
-
-                let range = {
-                    startLineNumber: lineNumber,
-                    endLineNumber: lineNumber,
-                    startColumn,
-                    endColumn,
-                };
-
-                //  光标前文本
-                const textBeforePointer = model.getValueInRange({
-                    startLineNumber: lineNumber,
-                    startColumn: 0,
-                    endLineNumber: lineNumber,
-                    endColumn: column,
-                });
-                const textBeforePointerMulti = model.getValueInRange({
-                    startLineNumber: 1,
-                    startColumn: 0,
-                    endLineNumber: lineNumber,
-                    endColumn: column,
-                });
-                // 光标后文本
-                const textAfterPointerMulti = model.getValueInRange({
-                    startLineNumber: lineNumber,
-                    startColumn: column,
-                    endLineNumber: model.getLineCount(),
-                    endColumn: model.getLineMaxColumn(model.getLineCount()),
-                });
-                // // const nextTokens = textAfterPointer.trim().split(/\s+/)
-                // // const nextToken = nextTokens[0].toLowerCase()
-                const tokens = textBeforePointer.trim().split(/\s+/);
-                let lastToken = tokens[tokens.length - 1].toLowerCase();
-                const secondToken = (tokens.length > 2 && tokens[tokens.length - 2].toLowerCase()) || '';
-
-                const dbs = (nowTab.params && nowTab.params.dbs && nowTab.params.dbs) || [];
-                // console.log("光标前文本：=>" + textBeforePointerMulti)
-                // console.log("最后输入的：=>" + lastToken)
-
-                let suggestions: languages.CompletionItem[] = [];
-                const tables = await dbInst.loadTables(db);
-
-                async function hintTableColumns(tableName: any, db: any) {
-                    let dbHits = await dbInst.loadDbHints(db);
-                    let columns = dbHits[tableName];
-                    let suggestions: languages.CompletionItem[] = [];
-                    columns?.forEach((a: string, index: any) => {
-                        // 字段数据格式  字段名 字段注释，  如： create_time  [datetime][创建时间]
-                        const nameAndComment = a.split('  ');
-                        const fieldName = nameAndComment[0];
-                        suggestions.push({
-                            label: {
-                                label: a,
-                                description: 'column',
-                            },
-                            kind: monaco.languages.CompletionItemKind.Property,
-                            detail: '', // 不显示detail, 否则选中时备注等会被遮挡
-                            insertText: fieldName, // create_time
-                            range,
-                            sortText: 100 + index + '', // 使用表字段声明顺序排序,排序需为字符串类型
-                        });
-                    });
-                    return suggestions;
-                }
-
-                if (lastToken.indexOf('.') > -1 || secondToken.indexOf('.') > -1) {
-                    // 如果是.触发代码提示，则进行【 库.表名联想 】 或 【 表别名.表字段联想 】
-                    let str = lastToken.substring(0, lastToken.lastIndexOf('.'));
-                    if (lastToken.trim().startsWith('.')) {
-                        str = secondToken;
-                    }
-                    // 如果字符串粘连起了如:'a.creator,a.',需要重新取出别名
-                    let aliasArr = lastToken.split(',');
-                    if (aliasArr.length > 1) {
-                        lastToken = aliasArr[aliasArr.length - 1];
-                        str = lastToken.substring(0, lastToken.lastIndexOf('.'));
-                        if (lastToken.trim().startsWith('.')) {
-                            str = secondToken;
-                        }
-                    }
-                    // 库.表名联想
-                    if (dbs && dbs.filter((a: any) => a === str)?.length > 0) {
-                        let tables = await dbInst.loadTables(str);
-                        let suggestions: languages.CompletionItem[] = [];
-                        for (let item of tables) {
-                            const { tableName, tableComment } = item;
-                            suggestions.push({
-                                label: {
-                                    label: tableName + (tableComment ? ' - ' + tableComment : ''),
-                                    description: 'table',
-                                },
-                                kind: monaco.languages.CompletionItemKind.File,
-                                insertText: tableName,
-                                range,
-                            });
-                        }
-                        return { suggestions };
-                    }
-
-                    let sql = textBeforePointerMulti.split(';')[textBeforePointerMulti.split(';').length - 1] + textAfterPointerMulti.split(';')[0];
-                    // 表别名.表字段联想
-                    let tableInfo = getTableByAlias(sql, db, str);
-                    if (tableInfo.tableName) {
-                        let tableName = tableInfo.tableName;
-                        let db = tableInfo.dbName;
-                        // 取出表名并提示
-                        let suggestions = await hintTableColumns(tableName, db);
-                        if (suggestions.length > 0) {
-                            return { suggestions };
-                        }
-                    }
-                    return { suggestions: [] };
-                } else {
-                    // 如果sql里含有表名，则提示表字段
-                    let mat = textBeforePointerMulti.match(/[from|update]\n*\s+\n*(\w+)\n*\s+\n*/i);
-                    if (mat && mat.length > 1) {
-                        let tableName = mat[1];
-                        // 取出表名并提示
-                        let addSuggestions = await hintTableColumns(tableName, db);
-                        if (addSuggestions.length > 0) {
-                            suggestions = suggestions.concat(addSuggestions);
-                        }
-                    }
-                }
-
-                // 表名联想
-                tables.forEach((tableMeta: any) => {
-                    const { tableName, tableComment } = tableMeta;
-                    suggestions.push({
-                        label: {
-                            label: tableName + ' - ' + tableComment,
-                            description: 'table',
-                        },
-                        kind: monaco.languages.CompletionItemKind.File,
-                        detail: tableComment,
-                        insertText: tableName + ' ',
-                        range,
-                    });
-                });
-
-                // mysql关键字
-                sqlCompletionKeywords.forEach((item: any) => {
-                    suggestions.push({
-                        label: {
-                            label: item,
-                            description: 'keyword',
-                        },
-                        kind: monaco.languages.CompletionItemKind.Keyword,
-                        insertText: item,
-                        range,
-                    });
-                });
-
-                // 操作符
-                sqlCompletionOperators.forEach((item: any) => {
-                    suggestions.push({
-                        label: {
-                            label: item,
-                            description: 'opt',
-                        },
-                        kind: monaco.languages.CompletionItemKind.Operator,
-                        insertText: item,
-                        range,
-                    });
-                });
-
-                let replacedFunctions = [] as string[];
-
-                // 添加的函数
-                addSqlLanguage.replaceFunctions.forEach((item: any) => {
-                    replacedFunctions.push(item.label);
-                    suggestions.push({
-                        label: {
-                            label: item.label,
-                            description: item.description,
-                        },
-                        kind: monaco.languages.CompletionItemKind.Function,
-                        insertText: item.insertText,
-                        range,
-                    });
-                });
-
-                // 内置函数
-                sqlCompletionBuiltinFunctions.forEach((item: any) => {
-                    replacedFunctions.indexOf(item) < 0 &&
-                        suggestions.push({
-                            label: {
-                                label: item,
-                                description: 'func',
-                            },
-                            kind: monaco.languages.CompletionItemKind.Function,
-                            insertText: item,
-                            range,
-                        });
-                });
-                // 内置变量
-                sqlCompletionBuiltinVariables.forEach((item: string) => {
-                    suggestions.push({
-                        label: {
-                            label: item,
-                            description: 'var',
-                        },
-                        kind: monaco.languages.CompletionItemKind.Variable,
-                        insertText: item,
-                        range,
-                    });
-                });
-
-                // 库名提示
-                if (dbs && dbs.length > 0) {
-                    dbs.forEach((a: any) => {
-                        suggestions.push({
-                            label: {
-                                label: a,
-                                description: 'schema',
-                            },
-                            kind: monaco.languages.CompletionItemKind.Folder,
-                            insertText: a,
-                            range,
-                        });
-                    });
-                }
-
-                // 默认提示
-                return {
-                    suggestions: suggestions,
-                };
-            },
-        });
-};
-
-/**
- * 根据别名获取sql里的表名
- * @param sql sql
- * @param db 默认数据库
- * @param alias 别名
- */
-const getTableByAlias = (sql: string, db: string, alias: string): { dbName: string; tableName: string } => {
-    // 表别名：表名
-    let result = {};
-    let defName = '';
-    let defResult = {};
-    // 正则匹配取出表名和表别名
-    // 测试sql
-    /*
-
-    `select * from database.Outvisit l
-left join patient p on l.patid=p.patientid
-join patstatic c on   l.patid=c.patid inner join patphone  ph  on l.patid=ph.patid
-where l.name='kevin' and exsits(select 1 from pharmacywestpas pw where p.outvisitid=l.outvisitid)
-unit all
-select * from invisit v where`.match(/(join|from)\s+(\w*-?\w*\.?\w+)\s*(as)?\s*(\w*)/gi)
-     */
-    let match = sql.match(/(join|from)\n*\s+\n*(\w*-?\w*\.?\w+)\s*(as)?\s*(\w*)\n*/gi);
-    if (match && match.length > 0) {
-        match.forEach((a) => {
-            // 去掉前缀，取出
-            let t = a
-                .substring(5, a.length)
-                .replaceAll(/\s+/g, ' ')
-                .replaceAll(/\s+as\s+/gi, ' ')
-                .replaceAll(/\r\n/g, ' ')
-                .trim()
-                .split(/\s+/);
-            let withDb = t[0].split('.');
-            // 表名是 db名.表名
-            let tName = withDb.length > 1 ? withDb[1] : withDb[0];
-            let dbName = withDb.length > 1 ? withDb[0] : db || '';
-            if (t.length == 2) {
-                // 表别名：表名
-                result[t[1]] = { tableName: tName, dbName };
-            } else {
-                // 只有表名无别名 取第一个无别名的表为默认表
-                !defName && (defResult = { tableName: tName, dbName: db });
-            }
-        });
-    }
-    return result[alias] || defResult;
-};
 </script>
 
 <style lang="scss">
@@ -905,12 +535,6 @@ select * from invisit v where`.match(/(join|from)\s+(\w*-?\w*\.?\w+)\s*(as)?\s*(
     text-decoration: none;
 }
 
-.sqlEditor {
-    font-size: 8pt;
-    font-weight: 600;
-    border: 1px solid var(--el-border-color-light, #ebeef5);
-}
-
 .update_field_active {
     background-color: var(--el-color-success);
 }
diff --git a/mayfly_go_web/src/views/ops/db/db.ts b/mayfly_go_web/src/views/ops/db/db.ts
index a0b7bc40..abc41d14 100644
--- a/mayfly_go_web/src/views/ops/db/db.ts
+++ b/mayfly_go_web/src/views/ops/db/db.ts
@@ -3,6 +3,18 @@ import { dbApi } from './api';
 import { getTextWidth } from '@/common/utils/string';
 import SqlExecBox from './component/SqlExecBox';
 
+import { language as sqlLanguage } from 'monaco-editor/esm/vs/basic-languages/mysql/mysql.js';
+import { language as addSqlLanguage } from './lang/mysql.js';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import { editor, languages, Position } from 'monaco-editor';
+
+import { registerCompletionItemProvider } from '@/components/monaco/completionItemProvider';
+
+const sqlCompletionKeywords = [...sqlLanguage.keywords, ...addSqlLanguage.keywords];
+const sqlCompletionOperators = [...sqlLanguage.operators, ...addSqlLanguage.operators];
+const sqlCompletionBuiltinFunctions = [...sqlLanguage.builtinFunctions, ...addSqlLanguage.builtinFunctions];
+const sqlCompletionBuiltinVariables = [...sqlLanguage.builtinVariables, ...addSqlLanguage.builtinVariables];
+
 const dbInstCache: Map<number, DbInst> = new Map();
 
 export class DbInst {
@@ -463,3 +475,305 @@ export type FieldsMeta = {
     // 新值
     newValue: string;
 };
+
+/**
+ * 注册数据库表、字段等信息提示
+ *
+ * @param language 语言
+ * @param dbId 数据库id
+ * @param db 库名
+ * @param dbs 该库所有库名
+ */
+export function registerDbCompletionItemProvider(language: string, dbId: number, db: string, dbs: [] = []) {
+    registerCompletionItemProvider(language, {
+        triggerCharacters: ['.', ' '],
+        provideCompletionItems: async (model: editor.ITextModel, position: Position): Promise<languages.CompletionList | null | undefined> => {
+            let word = model.getWordUntilPosition(position);
+            const dbInst = DbInst.getInst(dbId);
+            const { lineNumber, column } = position;
+            const { startColumn, endColumn } = word;
+
+            // 当前行文本
+            let lineContent = model.getLineContent(lineNumber);
+            // 注释行不需要代码提示
+            if (lineContent.startsWith('--')) {
+                return { suggestions: [] };
+            }
+
+            let range = {
+                startLineNumber: lineNumber,
+                endLineNumber: lineNumber,
+                startColumn,
+                endColumn,
+            };
+
+            //  光标前文本
+            const textBeforePointer = model.getValueInRange({
+                startLineNumber: lineNumber,
+                startColumn: 0,
+                endLineNumber: lineNumber,
+                endColumn: column,
+            });
+            const textBeforePointerMulti = model.getValueInRange({
+                startLineNumber: 1,
+                startColumn: 0,
+                endLineNumber: lineNumber,
+                endColumn: column,
+            });
+            // 光标后文本
+            const textAfterPointerMulti = model.getValueInRange({
+                startLineNumber: lineNumber,
+                startColumn: column,
+                endLineNumber: model.getLineCount(),
+                endColumn: model.getLineMaxColumn(model.getLineCount()),
+            });
+            // // const nextTokens = textAfterPointer.trim().split(/\s+/)
+            // // const nextToken = nextTokens[0].toLowerCase()
+            const tokens = textBeforePointer.trim().split(/\s+/);
+            let lastToken = tokens[tokens.length - 1].toLowerCase();
+            const secondToken = (tokens.length > 2 && tokens[tokens.length - 2].toLowerCase()) || '';
+
+            // console.log("光标前文本：=>" + textBeforePointerMulti)
+            // console.log("最后输入的：=>" + lastToken)
+
+            let suggestions: languages.CompletionItem[] = [];
+            const tables = await dbInst.loadTables(db);
+
+            async function hintTableColumns(tableName: any, db: any) {
+                let dbHits = await dbInst.loadDbHints(db);
+                let columns = dbHits[tableName];
+                let suggestions: languages.CompletionItem[] = [];
+                columns?.forEach((a: string, index: any) => {
+                    // 字段数据格式  字段名 字段注释，  如： create_time  [datetime][创建时间]
+                    const nameAndComment = a.split('  ');
+                    const fieldName = nameAndComment[0];
+                    suggestions.push({
+                        label: {
+                            label: a,
+                            description: 'column',
+                        },
+                        kind: monaco.languages.CompletionItemKind.Property,
+                        detail: '', // 不显示detail, 否则选中时备注等会被遮挡
+                        insertText: fieldName, // create_time
+                        range,
+                        sortText: 100 + index + '', // 使用表字段声明顺序排序,排序需为字符串类型
+                    });
+                });
+                return suggestions;
+            }
+
+            if (lastToken.indexOf('.') > -1 || secondToken.indexOf('.') > -1) {
+                // 如果是.触发代码提示，则进行【 库.表名联想 】 或 【 表别名.表字段联想 】
+                let str = lastToken.substring(0, lastToken.lastIndexOf('.'));
+                if (lastToken.trim().startsWith('.')) {
+                    str = secondToken;
+                }
+                // 如果字符串粘连起了如:'a.creator,a.',需要重新取出别名
+                let aliasArr = lastToken.split(',');
+                if (aliasArr.length > 1) {
+                    lastToken = aliasArr[aliasArr.length - 1];
+                    str = lastToken.substring(0, lastToken.lastIndexOf('.'));
+                    if (lastToken.trim().startsWith('.')) {
+                        str = secondToken;
+                    }
+                }
+                // 库.表名联想
+                if (dbs && dbs.filter((a: any) => a === str)?.length > 0) {
+                    let tables = await dbInst.loadTables(str);
+                    let suggestions: languages.CompletionItem[] = [];
+                    for (let item of tables) {
+                        const { tableName, tableComment } = item;
+                        suggestions.push({
+                            label: {
+                                label: tableName + (tableComment ? ' - ' + tableComment : ''),
+                                description: 'table',
+                            },
+                            kind: monaco.languages.CompletionItemKind.File,
+                            insertText: tableName,
+                            range,
+                        });
+                    }
+                    return { suggestions };
+                }
+
+                let sql = textBeforePointerMulti.split(';')[textBeforePointerMulti.split(';').length - 1] + textAfterPointerMulti.split(';')[0];
+                // 表别名.表字段联想
+                let tableInfo = getTableByAlias(sql, db, str);
+                if (tableInfo.tableName) {
+                    let tableName = tableInfo.tableName;
+                    let db = tableInfo.dbName;
+                    // 取出表名并提示
+                    let suggestions = await hintTableColumns(tableName, db);
+                    if (suggestions.length > 0) {
+                        return { suggestions };
+                    }
+                }
+                return { suggestions: [] };
+            } else {
+                // 如果sql里含有表名，则提示表字段
+                let mat = textBeforePointerMulti.match(/[from|update]\n*\s+\n*(\w+)\n*\s+\n*/i);
+                if (mat && mat.length > 1) {
+                    let tableName = mat[1];
+                    // 取出表名并提示
+                    let addSuggestions = await hintTableColumns(tableName, db);
+                    if (addSuggestions.length > 0) {
+                        suggestions = suggestions.concat(addSuggestions);
+                    }
+                }
+            }
+
+            // 表名联想
+            tables.forEach((tableMeta: any, index: any) => {
+                const { tableName, tableComment } = tableMeta;
+                suggestions.push({
+                    label: {
+                        label: tableName + ' - ' + tableComment,
+                        description: 'table',
+                    },
+                    kind: monaco.languages.CompletionItemKind.File,
+                    detail: tableComment,
+                    insertText: tableName + ' ',
+                    range,
+                    sortText: 300 + index + '',
+                });
+            });
+
+            // mysql关键字
+            sqlCompletionKeywords.forEach((item: any) => {
+                suggestions.push({
+                    label: {
+                        label: item,
+                        description: 'keyword',
+                    },
+                    kind: monaco.languages.CompletionItemKind.Keyword,
+                    insertText: item,
+                    range,
+                });
+            });
+
+            // 操作符
+            sqlCompletionOperators.forEach((item: any) => {
+                suggestions.push({
+                    label: {
+                        label: item,
+                        description: 'opt',
+                    },
+                    kind: monaco.languages.CompletionItemKind.Operator,
+                    insertText: item,
+                    range,
+                });
+            });
+
+            let replacedFunctions = [] as string[];
+
+            // 添加的函数
+            addSqlLanguage.replaceFunctions.forEach((item: any) => {
+                replacedFunctions.push(item.label);
+                suggestions.push({
+                    label: {
+                        label: item.label,
+                        description: item.description,
+                    },
+                    kind: monaco.languages.CompletionItemKind.Function,
+                    insertText: item.insertText,
+                    range,
+                });
+            });
+
+            // 内置函数
+            sqlCompletionBuiltinFunctions.forEach((item: any) => {
+                replacedFunctions.indexOf(item) < 0 &&
+                    suggestions.push({
+                        label: {
+                            label: item,
+                            description: 'func',
+                        },
+                        kind: monaco.languages.CompletionItemKind.Function,
+                        insertText: item,
+                        range,
+                    });
+            });
+            // 内置变量
+            sqlCompletionBuiltinVariables.forEach((item: string) => {
+                suggestions.push({
+                    label: {
+                        label: item,
+                        description: 'var',
+                    },
+                    kind: monaco.languages.CompletionItemKind.Variable,
+                    insertText: item,
+                    range,
+                });
+            });
+
+            // 库名提示
+            if (dbs && dbs.length > 0) {
+                dbs.forEach((a: any) => {
+                    suggestions.push({
+                        label: {
+                            label: a,
+                            description: 'schema',
+                        },
+                        kind: monaco.languages.CompletionItemKind.Folder,
+                        insertText: a,
+                        range,
+                    });
+                });
+            }
+
+            // 默认提示
+            return {
+                suggestions: suggestions,
+            };
+        },
+    });
+}
+
+/**
+ * 根据别名获取sql里的表名
+ * @param sql sql
+ * @param db 默认数据库
+ * @param alias 别名
+ */
+const getTableByAlias = (sql: string, db: string, alias: string): { dbName: string; tableName: string } => {
+    // 表别名：表名
+    let result = {};
+    let defName = '';
+    let defResult = {};
+    // 正则匹配取出表名和表别名
+    // 测试sql
+    /*
+
+    `select * from database.Outvisit l
+left join patient p on l.patid=p.patientid
+join patstatic c on   l.patid=c.patid inner join patphone  ph  on l.patid=ph.patid
+where l.name='kevin' and exsits(select 1 from pharmacywestpas pw where p.outvisitid=l.outvisitid)
+unit all
+select * from invisit v where`.match(/(join|from)\s+(\w*-?\w*\.?\w+)\s*(as)?\s*(\w*)/gi)
+     */
+    let match = sql.match(/(join|from)\n*\s+\n*(\w*-?\w*\.?\w+)\s*(as)?\s*(\w*)\n*/gi);
+    if (match && match.length > 0) {
+        match.forEach((a) => {
+            // 去掉前缀，取出
+            let t = a
+                .substring(5, a.length)
+                .replaceAll(/\s+/g, ' ')
+                .replaceAll(/\s+as\s+/gi, ' ')
+                .replaceAll(/\r\n/g, ' ')
+                .trim()
+                .split(/\s+/);
+            let withDb = t[0].split('.');
+            // 表名是 db名.表名
+            let tName = withDb.length > 1 ? withDb[1] : withDb[0];
+            let dbName = withDb.length > 1 ? withDb[0] : db || '';
+            if (t.length == 2) {
+                // 表别名：表名
+                result[t[1]] = { tableName: tName, dbName };
+            } else {
+                // 只有表名无别名 取第一个无别名的表为默认表
+                !defName && (defResult = { tableName: tName, dbName: db });
+            }
+        });
+    }
+    return result[alias] || defResult;
+};
diff --git a/server/pkg/config/mysql.go b/server/pkg/config/mysql.go
index 491e4ba7..3a9d04e1 100644
--- a/server/pkg/config/mysql.go
+++ b/server/pkg/config/mysql.go
@@ -26,6 +26,9 @@ func (m *Mysql) Default() {
 	if m.MaxIdleConns == 0 {
 		m.MaxIdleConns = 5
 	}
+	if m.MaxOpenConns == 0 {
+		m.MaxOpenConns = m.MaxIdleConns
+	}
 }
 
 func (m *Mysql) Dsn() string {
diff --git a/server/pkg/ws/client_manager.go b/server/pkg/ws/client_manager.go
index 67863745..aee950ca 100644
--- a/server/pkg/ws/client_manager.go
+++ b/server/pkg/ws/client_manager.go
@@ -31,7 +31,7 @@ func NewClientManager() (clientManager *ClientManager) {
 // 管道处理程序
 func (manager *ClientManager) Start() {
 	manager.HeartbeatTimer()
-	go manager.WriteMessage()
+	manager.WriteMessage()
 	for {
 		select {
 		case client := <-manager.ConnectChan:
@@ -118,7 +118,7 @@ func (manager *ClientManager) HeartbeatTimer() {
 				}
 				if err := cli.Ping(); err != nil {
 					manager.CloseClient(cli)
-					logx.Errorf("WS发送心跳失败: %v 总连接数：%d", userId, Manager.Count())
+					logx.Debugf("WS发送心跳失败: %v 总连接数：%d", userId, Manager.Count())
 				} else {
 					logx.Debugf("WS发送心跳成功: uid=%v", userId)
 				}