feat:完善SQL编辑器

src/views/apihub/component/edit.vue

@@ -271,7 +271,7 @@ const monacoOptions = {
   contextmenu: true,
   cursorStyle: 'line',
   fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace',
-  // 自动提示相关配置
+  // 自动提示相关配置 - 使用Monaco编辑器自带的SQL支持
   quickSuggestions: {
     other: true,
     comments: true,
@@ -281,27 +281,19 @@ const monacoOptions = {
   acceptSuggestionOnEnter: 'on',
   tabCompletion: 'on',
   wordBasedSuggestions: true,
-  parameterHints: {
-    enabled: true
-  },
+  // 设置触发建议的字符数
+  quickSuggestionsDelay: 0, // 立即显示提示
+  // 自动提示相关配置
   suggest: {
-    showWords: true,
     showKeywords: true,
-    showFunctions: true,
-    showClasses: true,
-    showInterfaces: true,
-    showMethods: true,
-    showProperties: true,
-    showVariables: true,
-    showModules: true,
     showSnippets: true,
-    filterGraceful: true,
-    snippetsPreventQuickSuggestions: false
-  },
-  // 设置触发建议的字符数
-  quickSuggestionsDelay: 0, // 立即显示提示
-  // 自动触发建议的最小字符数
-  wordBasedSuggestionsOnlySameLanguage: false,
+    showWords: true,
+    showFunctions: true,
+    showIcons: true,
+    maxVisibleSuggestions: 15,
+    filterGraceful: false, // 不过滤建议，显示所有可能的选项
+    snippetSuggestions: 'top' // 将代码片段放在提示列表顶部
+  }
 };
 
 // SQL内容变化回调
@@ -314,54 +306,18 @@ const onSqlContentChange = (value) => {
 
 // 编辑器将要加载时的回调
 const editorWillMount = (monaco) => {
-  // 注册 SQL 语言的自动完成提供者
-  monaco.languages.registerCompletionItemProvider('sql', {
-    // 设置触发字符，空字符串表示在任何字符输入时都触发
-    triggerCharacters: [' ', '.', ',', '(', '=', '>', '<', '!', ';', ':', '*', '+', '-', '/', '%', '&', '|', '^', ''],
-    
-    provideCompletionItems: () => {
-      // SQL 关键字
-      const keywords = [
-        'SELECT', 'FROM', 'WHERE', 'INSERT', 'UPDATE', 'DELETE', 'CREATE', 'ALTER', 'DROP', 'TABLE',
-        'DATABASE', 'VIEW', 'INDEX', 'TRIGGER', 'PROCEDURE', 'FUNCTION', 'JOIN', 'LEFT', 'RIGHT', 'INNER',
-        'OUTER', 'FULL', 'GROUP BY', 'ORDER BY', 'HAVING', 'LIMIT', 'OFFSET', 'UNION', 'ALL', 'DISTINCT',
-        'AS', 'ON', 'BETWEEN', 'IN', 'LIKE', 'IS', 'NULL', 'NOT', 'AND', 'OR', 'EXISTS', 'CASE', 'WHEN',
-        'THEN', 'ELSE', 'END', 'DESC', 'ASC'
-      ];
-      
-      // SQL 函数
-      const functions = [
-        'COUNT', 'SUM', 'AVG', 'MIN', 'MAX', 'CONCAT', 'SUBSTRING', 'TRIM', 'LENGTH', 'UPPER', 'LOWER',
-        'DATE', 'NOW', 'CURRENT_DATE', 'CURRENT_TIME', 'CURRENT_TIMESTAMP', 'YEAR', 'MONTH', 'DAY'
-      ];
-      
-      const suggestions = [];
-      
-      // 添加关键字建议
-      keywords.forEach(keyword => {
-        suggestions.push({
-          label: keyword,
-          kind: monaco.languages.CompletionItemKind.Keyword,
-          insertText: keyword,
-          detail: 'SQL关键字',
-          sortText: '0' + keyword // 排序优先级
-        });
-      });
-      
-      // 添加函数建议
-      functions.forEach(func => {
-        suggestions.push({
-          label: func,
-          kind: monaco.languages.CompletionItemKind.Function,
-          insertText: func + '($0)',
-          insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-          detail: 'SQL函数',
-          sortText: '1' + func // 排序优先级
-        });
-      });
-      
-      return { suggestions };
-    }
+  // 自定义SQL关键字高亮
+  monaco.editor.defineTheme('sqlTheme', {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [
+      { token: 'keyword', foreground: '569cd6', fontStyle: 'bold' },
+      { token: 'operator', foreground: 'd4d4d4' },
+      { token: 'string', foreground: 'ce9178' },
+      { token: 'number', foreground: 'b5cea8' },
+      { token: 'comment', foreground: '6a9955', fontStyle: 'italic' }
+    ],
+    colors: {}
   });
 };
 
@@ -373,7 +329,7 @@ const editorDidMount = (editor) => {
 
   // 使用editor实例以避免lint警告
   if (editor) {
-    // 可以在这里添加编辑器的其他配置，如键盘快捷键等
+    // 设置焦点
     editor.focus();
     
     // 添加输入监听，在用户开始输入时触发提示
@@ -382,7 +338,7 @@ const editorDidMount = (editor) => {
       editor.trigger('keyboard', 'editor.action.triggerSuggest', {});
     });
     
-    // 初始化时就触发一次提示，这样用户一开始就能看到可用的关键字
+    // 初始化时就触发一次提示
     setTimeout(() => {
       editor.trigger('keyboard', 'editor.action.triggerSuggest', {});
     }, 100);
@@ -393,7 +349,6 @@ const editorDidMount = (editor) => {
       if (e.keyCode === 13 || e.code === 'Enter') {
         // 阻止事件冒泡到表单
         e.stopPropagation();
-        // 不需要阻止默认行为，因为我们希望编辑器中的回车还是能正常工作
       }
     });
   }