feat:优化SQL编辑器

src/utils/setIconfont.ts

@@ -1,6 +1,6 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = [
-	'//at.alicdn.com/t/font_2298093_y6u00apwst.css',
+	'https://at.alicdn.com/t/font_2298093_y6u00apwst.css',
 ];
 // 第三方 js url
 const jsCdnUrlList: Array<string> = [];

src/views/apihub/component/edit.vue

@@ -141,22 +141,10 @@
               </el-radio-group>
             </el-form-item>
             <el-form-item label="SQL内容" prop="sqlContent" class="sql-content-item">
-              <div class="monaco-editor-wrapper">
-                <div class="line-number-container">
-                  <div v-for="n in lineCount" :key="n" class="line-number">{{ n }}</div>
-                </div>
-                <div class="monaco-editor-container">
-                  <MonacoEditor
-                    v-model:value="formData.sqlContent"
-                    :options="monacoOptions"
-                    theme="vs-dark"
-                    language="sql"
-                    @change="onSqlContentChange"
-                    @editorDidMount="editorDidMount"
-                    @editorWillMount="editorWillMount"
-                  />
-                </div>
-              </div>
+              <SqlEditor
+                v-model="formData.sqlContent"
+                :dataSourceKey="formData.dataSourceKey"
+              />
             </el-form-item>
             <el-form-item label="返回格式" prop="returnFormat">
               <el-select v-model="formData.returnFormat" placeholder="请选择返回格式">
@@ -239,7 +227,7 @@ import {
   FullScreen as EleFullScreen,
   ScaleToOriginal as EleScaleToOriginal
 } from '@element-plus/icons-vue';
-import MonacoEditor from "@guolao/vue-monaco-editor";
+import SqlEditor from "./SqlEditor.vue";
 
 const emit = defineEmits(["getList"]);
 
@@ -248,113 +236,17 @@ const formRef = ref();
 const dataSources = ref<any[]>([]);
 const activeTab = ref('basic'); // 当前激活的Tab
 const isFullscreen = ref(false); // 是否全屏显示
-const lineCount = ref(1); // SQL编辑器行数
+// SQL编辑器相关变量已移至SqlEditor.vue组件
 const pluginParamsPlaceholder = '插件参数 (JSON格式，例如：{"key": "value"})';
 const originUrl: string = getOrigin("");
 
-// Monaco Editor 配置项
-const monacoOptions = {
-  automaticLayout: true,
-  scrollBeyondLastLine: false,
-  minimap: { enabled: false },
-  fontSize: 14,
-  tabSize: 2,
-  lineNumbers: 'off', // 关闭内置行号，因为我们自定义了行号显示
-  scrollbar: {
-    useShadows: false,
-    verticalScrollbarSize: 10,
-    horizontalScrollbarSize: 10,
-    alwaysConsumeMouseWheel: false
-  },
-  lineHeight: 20,
-  renderLineHighlight: 'line',
-  glyphMargin: false,
-  folding: true,
-  contextmenu: true,
-  cursorStyle: 'line',
-  fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace',
-  // 自动提示相关配置 - 使用Monaco编辑器自带的SQL支持
-  quickSuggestions: {
-    other: true,
-    comments: true,
-    strings: true
-  },
-  suggestOnTriggerCharacters: true,
-  acceptSuggestionOnEnter: 'on',
-  tabCompletion: 'on',
-  wordBasedSuggestions: true,
-  // 设置触发建议的字符数
-  quickSuggestionsDelay: 0, // 立即显示提示
-  // 自动提示相关配置
-  suggest: {
-    showKeywords: true,
-    showSnippets: true,
-    showWords: true,
-    showFunctions: true,
-    showIcons: true,
-    maxVisibleSuggestions: 15,
-    filterGraceful: false, // 不过滤建议，显示所有可能的选项
-    snippetSuggestions: 'top' // 将代码片段放在提示列表顶部
-  }
-};
+// Monaco Editor 配置项已移至SqlEditor.vue组件
 
-// SQL内容变化回调
-const onSqlContentChange = (value) => {
-  formData.sqlContent = value;
-  // 计算行数
-  const lines = value ? value.split('\n').length : 1;
-  lineCount.value = Math.max(1, lines);
-};
+// SQL内容变化回调已移至SqlEditor.vue组件
 
-// 编辑器将要加载时的回调
-const editorWillMount = (monaco) => {
-  // 自定义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: {}
-  });
-};
+// 编辑器将要加载时的回调已移至SqlEditor.vue组件
 
-// 编辑器挂载完成回调
-const editorDidMount = (editor) => {
-  // 初始化行数
-  const lines = formData.sqlContent ? formData.sqlContent.split('\n').length : 1;
-  lineCount.value = Math.max(1, lines);
-
-  // 使用editor实例以避免lint警告
-  if (editor) {
-    // 设置焦点
-    editor.focus();
-
-    // 添加输入监听，在用户开始输入时触发提示
-    editor.onDidChangeModelContent(() => {
-      // 触发自动提示
-      editor.trigger('keyboard', 'editor.action.triggerSuggest', {});
-    });
-
-    // 初始化时就触发一次提示
-    setTimeout(() => {
-      editor.trigger('keyboard', 'editor.action.triggerSuggest', {});
-    }, 100);
-
-    // 添加键盘事件处理，阻止回车键触发表单提交
-    editor.onKeyDown((e) => {
-      // 当用户在编辑器中按下回车键时
-      if (e.keyCode === 13 || e.code === 'Enter') {
-        // 阻止事件冒泡到表单
-        e.stopPropagation();
-      }
-    });
-  }
-};
+// 编辑器挂载完成回调已移至SqlEditor.vue组件
 
 // 检查哪个标签页有验证错误并切换到该标签页
 const checkTabWithErrors = () => {
@@ -887,47 +779,9 @@ defineExpose({ open });
   color: #909399;
 }
 
-/* Monaco Editor 样式 */
-.sql-content-item {
-  width: 100%;
-}
+/* Monaco Editor相关样式已移至SqlEditor.vue组件 */
 
-.monaco-editor-wrapper {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  overflow: hidden;
-  min-width: 500px;
-}
-
-.line-number-container {
-  background-color: #f5f7fa;
-  border-right: 1px solid #dcdfe6;
-  min-width: 40px;
-  width: 40px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 8px;
-}
-
-.line-number {
-  color: #909399;
-  font-family: monospace;
-  font-size: 12px;
-  line-height: 1.5;
-  text-align: center;
-  width: 100%;
-}
-
-.monaco-editor-container {
-  height: 350px; /* 增加编辑器高度，使其更好地利用空间 */
-  flex-grow: 1;
-  overflow: hidden;
-  border: none;
-}
+/* Monaco Editor相关样式已移至SqlEditor.vue组件 */
 
 /* API路径输入框样式 */
 .path-input-container {