Remove workflow code editor dependency

2026-06-10 17:16:22 +08:00
parent 8862f8ec99
commit f272d75315
12 changed files with 103 additions and 781 deletions
@@ -26,15 +26,6 @@
    "#/*": "./src/*"
  },
  "dependencies": {
    "@codemirror/autocomplete": "^6.20.0",
    "@codemirror/commands": "^6.10.0",
    "@codemirror/lang-json": "^6.0.2",
    "@codemirror/lang-python": "^6.2.1",
    "@codemirror/lang-sql": "^6.10.0",
    "@codemirror/language": "^6.11.3",
    "@codemirror/state": "^6.5.2",
    "@codemirror/theme-one-dark": "^6.1.3",
    "@codemirror/view": "^6.39.4",
    "@element-plus/icons-vue": "^2.3.2",
    "@tanstack/vue-virtual": "^3.13.18",
    "@vben-core/menu-ui": "workspace:*",
@@ -130,11 +130,6 @@ const ZqIconPicker = defineAsyncComponent(() =>
    (res) => res.default,
  ),
 );
 const CodeEditor = defineAsyncComponent(() =>
  import('#/components/zq-form/code-editor/code-editor.vue').then(
    (res) => res.default,
  ),
 );
 const withDefaultPlaceholder = <T extends Component>(
  component: T,
@@ -275,7 +270,10 @@ function initComponentAdapter() {
    ImageSelector: withDefaultPlaceholder(ImageSelector, 'select'),
    Input: withDefaultPlaceholder(ElInput, 'input'),
    Textarea: withDefaultPlaceholder(ElInput, 'input', { type: 'textarea' }),
-    CodeEditor,
+    CodeEditor: withDefaultPlaceholder(ElInput, 'input', {
      autosize: { minRows: 8 },
      type: 'textarea',
    }),
    InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
    RadioGroup: (props, { attrs, slots }) => {
      let defaultSlot;
@@ -355,7 +353,7 @@ function initComponentAdapter() {
  // 定义全局共享状态中的消息提示
  globalShareState.defineMessage({
    // 复制成功消息提示
-    copyPreferencesSuccess: (title, content) => {
+    copyPreferencesSuccess: (title: string, content: string) => {
      void import('element-plus/es/components/notification/index').then(
        ({ ElNotification }) => {
          ElNotification({
@@ -1,406 +0,0 @@
 <script setup lang="ts">
 import type { Extension } from '@codemirror/state';
 import type {
  CodeEditorEmits,
  CodeEditorExpose,
  CodeEditorProps,
 } from './types';
 import {
  computed,
  onBeforeUnmount,
  onMounted,
  ref,
  shallowRef,
  watch,
 } from 'vue';
 import { usePreferences } from '@vben/preferences';
 import { autocompletion } from '@codemirror/autocomplete';
 import {
  defaultKeymap,
  history,
  historyKeymap,
  indentWithTab,
 } from '@codemirror/commands';
 import {
  bracketMatching,
  defaultHighlightStyle,
  foldGutter,
  indentOnInput,
  syntaxHighlighting,
 } from '@codemirror/language';
 import { Compartment, EditorState } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 import {
  crosshairCursor,
  drawSelection,
  dropCursor,
  EditorView,
  highlightActiveLine,
  highlightActiveLineGutter,
  highlightSpecialChars,
  keymap,
  lineNumbers,
  placeholder as placeholderExt,
  rectangularSelection,
 } from '@codemirror/view';
 import { getLanguageExtension } from './languages';
 const props = withDefaults(defineProps<CodeEditorProps>(), {
  modelValue: '',
  language: 'javascript',
  theme: 'auto',
  readonly: false,
  disabled: false,
  height: 'auto',
  minHeight: '100px',
  tabSize: 2,
  lineNumbers: true,
  lineWrapping: false,
  foldGutter: true,
  highlightActiveLine: true,
  bracketMatching: true,
  autocompletion: true,
  indentGuide: true,
 });
 const emit = defineEmits<CodeEditorEmits>();
 const editorRef = ref<HTMLDivElement>();
 const view = shallowRef<EditorView | null>(null);
 // 主题跟随系统
 const { isDark } = usePreferences();
 // Compartments 用于动态更新配置
 const languageCompartment = new Compartment();
 const themeCompartment = new Compartment();
 const readonlyCompartment = new Compartment();
 const lineNumbersCompartment = new Compartment();
 const lineWrappingCompartment = new Compartment();
 const foldGutterCompartment = new Compartment();
 const highlightActiveLineCompartment = new Compartment();
 const bracketMatchingCompartment = new Compartment();
 const autocompletionCompartment = new Compartment();
 const placeholderCompartment = new Compartment();
 // 计算当前主题
 const currentTheme = computed(() => {
  if (props.theme === 'auto') {
    return isDark.value ? 'dark' : 'light';
  }
  return props.theme;
 });
 // 计算样式
 const editorStyle = computed(() => {
  const style: Record<string, string> = {};
  if (props.height !== 'auto') {
    style.height =
      typeof props.height === 'number' ? `${props.height}px` : props.height;
  }
  if (props.minHeight) {
    style.minHeight =
      typeof props.minHeight === 'number'
        ? `${props.minHeight}px`
        : props.minHeight;
  }
  if (props.maxHeight) {
    style.maxHeight =
      typeof props.maxHeight === 'number'
        ? `${props.maxHeight}px`
        : props.maxHeight;
  }
  return style;
 });
 // 获取主题扩展
 function getThemeExtension(): Extension {
  return currentTheme.value === 'dark' ? oneDark : [];
 }
 // 创建基础扩展
 function createBaseExtensions(): Extension[] {
  return [
    highlightSpecialChars(),
    history(),
    drawSelection(),
    dropCursor(),
    crosshairCursor(),
    rectangularSelection(),
    indentOnInput(),
    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
    keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
    EditorState.tabSize.of(props.tabSize),
    EditorView.updateListener.of((update) => {
      if (update.docChanged) {
        const value = update.state.doc.toString();
        emit('update:modelValue', value);
        emit('change', value);
      }
      if (update.focusChanged) {
        if (update.view.hasFocus) {
          emit('focus');
        } else {
          emit('blur');
        }
      }
    }),
  ];
 }
 // 初始化编辑器
 async function initEditor() {
  if (!editorRef.value) return;
  const languageExt = await getLanguageExtension(props.language);
  const extensions: Extension[] = [
    ...createBaseExtensions(),
    languageCompartment.of(languageExt || []),
    themeCompartment.of(getThemeExtension()),
    readonlyCompartment.of(
      EditorState.readOnly.of(props.readonly || props.disabled),
    ),
    lineNumbersCompartment.of(
      props.lineNumbers ? [lineNumbers(), highlightActiveLineGutter()] : [],
    ),
    lineWrappingCompartment.of(
      props.lineWrapping ? EditorView.lineWrapping : [],
    ),
    foldGutterCompartment.of(props.foldGutter ? foldGutter() : []),
    highlightActiveLineCompartment.of(
      props.highlightActiveLine ? highlightActiveLine() : [],
    ),
    bracketMatchingCompartment.of(
      props.bracketMatching ? bracketMatching() : [],
    ),
    autocompletionCompartment.of(props.autocompletion ? autocompletion() : []),
    placeholderCompartment.of(
      props.placeholder ? placeholderExt(props.placeholder) : [],
    ),
  ];
  const state = EditorState.create({
    doc: props.modelValue,
    extensions,
  });
  view.value = new EditorView({
    state,
    parent: editorRef.value,
  });
  emit('ready', view.value);
 }
 // 更新编辑器内容
 function updateContent(value: string) {
  if (!view.value) return;
  const currentValue = view.value.state.doc.toString();
  if (currentValue !== value) {
    view.value.dispatch({
      changes: {
        from: 0,
        to: currentValue.length,
        insert: value,
      },
    });
  }
 }
 // 监听 modelValue 变化
 watch(
  () => props.modelValue,
  (value) => {
    updateContent(value);
  },
 );
 // 监听语言变化
 watch(
  () => props.language,
  async (language) => {
    if (!view.value) return;
    const languageExt = await getLanguageExtension(language);
    view.value.dispatch({
      effects: languageCompartment.reconfigure(languageExt || []),
    });
  },
 );
 // 监听主题变化
 watch(currentTheme, () => {
  if (!view.value) return;
  view.value.dispatch({
    effects: themeCompartment.reconfigure(getThemeExtension()),
  });
 });
 // 监听只读状态变化
 watch(
  () => [props.readonly, props.disabled],
  ([readonly, disabled]) => {
    if (!view.value) return;
    view.value.dispatch({
      effects: readonlyCompartment.reconfigure(
        EditorState.readOnly.of(Boolean(readonly || disabled)),
      ),
    });
  },
 );
 // 监听行号显示变化
 watch(
  () => props.lineNumbers,
  (show) => {
    if (!view.value) return;
    view.value.dispatch({
      effects: lineNumbersCompartment.reconfigure(
        show ? [lineNumbers(), highlightActiveLineGutter()] : [],
      ),
    });
  },
 );
 // 监听自动换行变化
 watch(
  () => props.lineWrapping,
  (wrap) => {
    if (!view.value) return;
    view.value.dispatch({
      effects: lineWrappingCompartment.reconfigure(
        wrap ? EditorView.lineWrapping : [],
      ),
    });
  },
 );
 // 监听占位符变化
 watch(
  () => props.placeholder,
  (text) => {
    if (!view.value) return;
    view.value.dispatch({
      effects: placeholderCompartment.reconfigure(
        text ? placeholderExt(text) : [],
      ),
    });
  },
 );
 // 暴露方法
 const expose: CodeEditorExpose = {
  getView: () => view.value,
  focus: () => view.value?.focus(),
  getValue: () => view.value?.state.doc.toString() || '',
  setValue: (value: string) => updateContent(value),
  format: () => {
    if (!view.value || props.language !== 'json') return;
    try {
      const content = view.value.state.doc.toString();
      const formatted = JSON.stringify(
        JSON.parse(content),
        null,
        props.tabSize,
      );
      updateContent(formatted);
    } catch {
      // JSON 解析失败，忽略
    }
  },
 };
 defineExpose(expose);
 onMounted(() => {
  initEditor();
 });
 onBeforeUnmount(() => {
  view.value?.destroy();
  view.value = null;
 });
 </script>
 <template>
  <div
    ref="editorRef"
    class="code-editor"
    :class="{
      'code-editor--disabled': disabled,
      'code-editor--readonly': readonly,
      'code-editor--dark': currentTheme === 'dark',
    }"
    :style="editorStyle"
  ></div>
 </template>
 <style scoped>
 .code-editor {
  width: 100%;
  overflow: auto;
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
 }
 .code-editor :deep(.cm-editor) {
  width: 100%;
  height: 100%;
  outline: none;
 }
 .code-editor :deep(.cm-content) {
  width: 99%;
 }
 .code-editor :deep(.cm-scroller) {
  font-family: 'Fira Code', Monaco, Menlo, 'Ubuntu Mono', Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
 }
 .code-editor :deep(.cm-focused) {
  outline: none;
 }
 .code-editor:focus-within {
  border-color: var(--el-color-primary);
 }
 .code-editor--disabled {
  cursor: not-allowed;
  opacity: 0.6;
 }
 .code-editor--disabled :deep(.cm-editor) {
  pointer-events: none;
 }
 .code-editor :deep(.cm-gutters) {
  background-color: var(--el-fill-color-light);
  border-right: 1px solid var(--el-border-color-lighter);
 }
 .code-editor--dark :deep(.cm-gutters) {
  background-color: var(--el-fill-color-darker);
  border-right-color: var(--el-border-color-darker);
 }
 .code-editor :deep(.cm-activeLineGutter) {
  background-color: var(--el-fill-color);
 }
 .code-editor :deep(.cm-placeholder) {
  color: var(--el-text-color-placeholder);
 }
 </style>
@@ -1,3 +0,0 @@
 export { default as CodeEditor } from './code-editor.vue';
 export { supportedLanguages } from './languages';
 export * from './types';
@@ -1,43 +0,0 @@
 import type { Extension } from '@codemirror/state';
 import type { CodeLanguage } from './types';
 // 语言扩展懒加载映射
 const languageLoaders: Record<CodeLanguage, () => Promise<Extension>> = {
  python: async () => {
    const { python } = await import('@codemirror/lang-python');
    return python();
  },
  sql: async () => {
    const { sql } = await import('@codemirror/lang-sql');
    return sql();
  },
  json: async () => {
    const { json } = await import('@codemirror/lang-json');
    return json();
  },
 };
 /**
 * 获取语言扩展
 * @param language 语言类型
 * @returns 语言扩展
 */
 export async function getLanguageExtension(
  language: CodeLanguage | string,
 ): Promise<Extension | null> {
  const loader = languageLoaders[language as CodeLanguage];
  if (loader) {
    return await loader();
  }
  return null;
 }
 /**
 * 支持的语言列表
 */
 export const supportedLanguages: CodeLanguage[] = [
  'python',
  'sql',
  'json',
 ];
@@ -1,64 +0,0 @@
 import type { EditorView } from '@codemirror/view';
 export type CodeLanguage =
  | 'json'
  | 'python'
  | 'sql';
 export interface CodeEditorProps {
  /** 代码内容 */
  modelValue?: string;
  /** 语言类型 */
  language?: CodeLanguage | string;
  /** 主题: light/dark/auto(跟随系统) */
  theme?: 'auto' | 'dark' | 'light';
  /** 是否只读 */
  readonly?: boolean;
  /** 是否禁用 */
  disabled?: boolean;
  /** 高度 */
  height?: number | string;
  /** 最小高度 */
  minHeight?: number | string;
  /** 最大高度 */
  maxHeight?: number | string;
  /** 占位符 */
  placeholder?: string;
  /** Tab 大小 */
  tabSize?: number;
  /** 是否显示行号 */
  lineNumbers?: boolean;
  /** 是否自动换行 */
  lineWrapping?: boolean;
  /** 是否显示代码折叠 */
  foldGutter?: boolean;
  /** 是否高亮当前行 */
  highlightActiveLine?: boolean;
  /** 是否显示括号匹配 */
  bracketMatching?: boolean;
  /** 是否启用自动补全 */
  autocompletion?: boolean;
  /** 是否显示缩进指南 */
  indentGuide?: boolean;
 }
 export interface CodeEditorEmits {
  (e: 'update:modelValue', value: string): void;
  (e: 'change', value: string): void;
  (e: 'focus'): void;
  (e: 'blur'): void;
  (e: 'ready', view: EditorView): void;
 }
 export interface CodeEditorExpose {
  /** 获取 EditorView 实例 */
  getView: () => EditorView | null;
  /** 聚焦编辑器 */
  focus: () => void;
  /** 获取代码内容 */
  getValue: () => string;
  /** 设置代码内容 */
  setValue: (value: string) => void;
  /** 格式化代码(仅支持 JSON) */
  format: () => void;
 }
@@ -17,7 +17,6 @@ import {
 } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { CodeEditor } from '#/components/zq-form/code-editor';
 import { ZqDialog } from '#/components/zq-dialog';
 export interface IterationResult {
@@ -254,15 +253,8 @@ const formattedInputs = computed(() => {
          <div class="text-foreground mb-2 text-sm font-medium">
            {{ $t('ai-platform.workflow.editor.nodeResultCard.input') }}
          </div>
-          <div class="min-h-0 flex-1 overflow-hidden rounded border">
+          <div class="result-json-view min-h-0 flex-1 overflow-auto rounded border">
-            <CodeEditor
+            <pre>{{ formattedInputs }}</pre>
              :model-value="formattedInputs"
              language="json"
              height="100%"
              :readonly="true"
              :line-numbers="true"
              :fold-gutter="true"
            />
          </div>
        </div>
@@ -270,15 +262,8 @@ const formattedInputs = computed(() => {
          <div class="text-foreground mb-2 text-sm font-medium">
            {{ $t('ai-platform.workflow.editor.nodeResultCard.output') }}
          </div>
-          <div class="min-h-0 flex-1 overflow-hidden rounded border">
+          <div class="result-json-view min-h-0 flex-1 overflow-auto rounded border">
-            <CodeEditor
+            <pre>{{ formattedOutput }}</pre>
              :model-value="formattedOutput"
              language="json"
              height="100%"
              :readonly="true"
              :line-numbers="true"
              :fold-gutter="true"
            />
          </div>
        </div>
      </div>
@@ -477,3 +462,23 @@ const formattedInputs = computed(() => {
    </div>
  </div>
 </template>
 <style scoped>
 .result-json-view {
  background: hsl(var(--muted) / 35%);
  padding: 12px;
 }
 .result-json-view pre {
  min-height: 100%;
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
 }
 </style>
@@ -13,7 +13,6 @@ import {
  ElSwitch,
 } from 'element-plus';
 import { CodeEditor } from '#/components/zq-form/code-editor';
 import { ZqDialog } from '#/components/zq-dialog';
 interface SchemaField {
@@ -464,11 +463,11 @@ const previewSchema = computed(() => {
        <!-- JSON 编辑模式 -->
        <div v-if="editMode === 'json'" class="flex h-full flex-col">
-          <CodeEditor
+          <ElInput
            v-model="jsonContent"
-            language="json"
+            type="textarea"
-            height="100%"
+            resize="none"
-            :line-wrapping="true"
+            class="schema-json-textarea"
          />
          <div v-if="jsonError" class="mt-2 text-xs text-red-500">
            {{ jsonError }}
@@ -1136,4 +1135,17 @@ const previewSchema = computed(() => {
  border-radius: 4px;
  overflow: hidden;
 }
 :deep(.schema-json-textarea),
 :deep(.schema-json-textarea textarea) {
  height: 100%;
 }
 :deep(.schema-json-textarea textarea) {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
 }
 </style>
@@ -13,7 +13,6 @@ import {
  ElTooltip,
 } from 'element-plus';
 import { CodeEditor } from '#/components/zq-form/code-editor';
 import { ZqDialog } from '#/components/zq-dialog';
 import SmartInput from '../components/SmartInput.vue';
@@ -186,15 +185,13 @@ const codeEditorVisible = ref(false);
          </ElButton>
        </ElTooltip>
      </div>
-      <CodeEditor
+      <ElInput
        v-model="form.code"
-        language="python"
+        type="textarea"
-        height="280px"
+        :rows="14"
        resize="vertical"
        class="workflow-code-textarea"
        :placeholder="$t('ai-platform.workflow.panels.code.codePlaceholder')"
        :fold-gutter="true"
        :bracket-matching="true"
        :autocompletion="true"
        :line-numbers="false"
      />
    </div>
  </ElForm>
@@ -207,15 +204,12 @@ const codeEditorVisible = ref(false);
    :show-footer="false"
  >
    <div class="code-editor-dialog-content">
-      <CodeEditor
+      <ElInput
        v-model="form.code"
-        language="python"
+        type="textarea"
-        height="100%"
+        resize="none"
        class="workflow-code-textarea workflow-code-textarea--dialog"
        :placeholder="$t('ai-platform.workflow.panels.code.codePlaceholder')"
        :fold-gutter="true"
        :bracket-matching="true"
        :autocompletion="true"
        :line-numbers="true"
      />
    </div>
  </ZqDialog>
@@ -245,12 +239,6 @@ const codeEditorVisible = ref(false);
  min-height: 0;
 }
 .code-editor-dialog .code-editor-dialog-content .code-editor {
  flex: 1;
  min-height: 0;
  height: 100% !important;
 }
 .code-editor-dialog.is-fullscreen .el-dialog__body {
  display: flex;
  flex: 1;
@@ -266,4 +254,17 @@ const codeEditorVisible = ref(false);
 .code-editor-dialog.is-fullscreen .zq-dialog-body .el-scrollbar {
  height: 100% !important;
 }
 .workflow-code-textarea textarea {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
 }
 .workflow-code-textarea--dialog,
 .workflow-code-textarea--dialog textarea {
  height: 100%;
 }
 </style>
@@ -17,7 +17,6 @@ import {
  ElTooltip,
 } from 'element-plus';
 import { CodeEditor } from '#/components/zq-form/code-editor';
 import { ZqDialog } from '#/components/zq-dialog';
 import { getParamTypeOptions } from '#/views/_core/data-source/data';
@@ -171,16 +170,13 @@ function handleConnectionChange(payload: { dbName: string; dbType: string }) {
          </ElButton>
        </ElTooltip>
      </div>
-      <CodeEditor
+      <ElInput
        v-model="form.sql"
-        language="sql"
+        type="textarea"
-        height="280px"
+        :rows="12"
        resize="vertical"
        :placeholder="$t('ai-platform.workflow.panels.dbSql.sqlPlaceholder')"
-        :fold-gutter="true"
+        class="workflow-code-textarea"
        :bracket-matching="true"
        :autocompletion="true"
        :line-numbers="false"
        class="font-mono"
      />
      <div class="mt-2 flex flex-wrap items-center gap-1">
        <span class="text-muted-foreground mr-2 text-xs">
@@ -290,16 +286,12 @@ function handleConnectionChange(payload: { dbName: string; dbType: string }) {
    :show-footer="false"
  >
    <div class="code-editor-dialog-content">
-      <CodeEditor
+      <ElInput
        v-model="form.sql"
-        language="sql"
+        type="textarea"
-        height="100%"
+        resize="none"
        :placeholder="$t('ai-platform.workflow.panels.dbSql.sqlPlaceholder')"
-        :fold-gutter="true"
+        class="workflow-code-textarea workflow-code-textarea--dialog"
        :bracket-matching="true"
        :autocompletion="true"
        :line-numbers="true"
        class="font-mono"
      />
    </div>
  </ZqDialog>
@@ -314,6 +306,14 @@ function handleConnectionChange(payload: { dbName: string; dbType: string }) {
  width: 100%;
  min-width: 0;
 }
 :deep(.workflow-code-textarea textarea) {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
 }
 </style>
 <style>
@@ -340,12 +340,6 @@ function handleConnectionChange(payload: { dbName: string; dbType: string }) {
  min-height: 0;
 }
 .code-editor-dialog .code-editor-dialog-content .code-editor {
  flex: 1;
  min-height: 0;
  height: 100% !important;
 }
 .code-editor-dialog.is-fullscreen .el-dialog__body {
  display: flex;
  flex: 1;
@@ -361,4 +355,9 @@ function handleConnectionChange(payload: { dbName: string; dbType: string }) {
 .code-editor-dialog.is-fullscreen .zq-dialog-body .el-scrollbar {
  height: 100% !important;
 }
 .workflow-code-textarea--dialog,
 .workflow-code-textarea--dialog textarea {
  height: 100%;
 }
 </style>
@@ -16,8 +16,6 @@ import {
  ElTabs,
 } from 'element-plus';
 import { CodeEditor } from '#/components/zq-form/code-editor';
 import SmartInput from '../components/SmartInput.vue';
 const props = defineProps<{ data: any; nodeId: string }>();
@@ -175,13 +173,13 @@ const removeParam = (index: number) => {
      </ElTabPane>
      <ElTabPane label="Body">
-        <CodeEditor
+        <ElInput
          v-model="form.body"
-          language="json"
+          type="textarea"
-          height="200px"
+          :rows="10"
          resize="vertical"
          class="workflow-code-textarea"
          placeholder='{"key": "value"}'
          :fold-gutter="true"
          :bracket-matching="true"
        />
        <div class="text-muted-foreground mt-1 text-xs">
          {{ $t('ai-platform.workflow.panels.http.bodyHint') }}
@@ -206,4 +204,12 @@ const removeParam = (index: number) => {
 :deep(.http-tabs .el-tabs__content) {
  padding: 12px;
 }
 :deep(.workflow-code-textarea textarea) {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
 }
 </style>
@@ -644,33 +644,6 @@ importers:
  apps/web-ele:
    dependencies:
      '@codemirror/autocomplete':
        specifier: ^6.20.0
        version: 6.20.0
      '@codemirror/commands':
        specifier: ^6.10.0
        version: 6.10.0
      '@codemirror/lang-json':
        specifier: ^6.0.2
        version: 6.0.2
      '@codemirror/lang-python':
        specifier: ^6.2.1
        version: 6.2.1
      '@codemirror/lang-sql':
        specifier: ^6.10.0
        version: 6.10.0
      '@codemirror/language':
        specifier: ^6.11.3
        version: 6.11.3
      '@codemirror/state':
        specifier: ^6.5.2
        version: 6.5.2
      '@codemirror/theme-one-dark':
        specifier: ^6.1.3
        version: 6.1.3
      '@codemirror/view':
        specifier: ^6.39.4
        version: 6.39.4
      '@element-plus/icons-vue':
        specifier: ^2.3.2
        version: 2.3.2(vue@3.5.25(typescript@5.9.3))
@@ -2634,33 +2607,6 @@ packages:
    resolution: {integrity: sha512-Nu8ahitGFFJztxUml9oD/DLb7Z28C8cd8F46IVQ7y5Btz575pvMY8AqZsXkX7Gds29eCKdMgIHjIvzskHgPSFg==}
    engines: {node: '>=18.0.0'}
  '@codemirror/autocomplete@6.20.0':
    resolution: {integrity: sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==}
  '@codemirror/commands@6.10.0':
    resolution: {integrity: sha512-2xUIc5mHXQzT16JnyOFkh8PvfeXuIut3pslWGfsGOhxP/lpgRm9HOl/mpzLErgt5mXDovqA0d11P21gofRLb9w==}
  '@codemirror/lang-json@6.0.2':
    resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==}
  '@codemirror/lang-python@6.2.1':
    resolution: {integrity: sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==}
  '@codemirror/lang-sql@6.10.0':
    resolution: {integrity: sha512-6ayPkEd/yRw0XKBx5uAiToSgGECo/GY2NoJIHXIIQh1EVwLuKoU8BP/qK0qH5NLXAbtJRLuT73hx7P9X34iO4w==}
  '@codemirror/language@6.11.3':
    resolution: {integrity: sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==}
  '@codemirror/state@6.5.2':
    resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
  '@codemirror/theme-one-dark@6.1.3':
    resolution: {integrity: sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==}
  '@codemirror/view@6.39.4':
    resolution: {integrity: sha512-xMF6OfEAUVY5Waega4juo1QGACfNkNF+aJLqpd8oUJz96ms2zbfQ9Gh35/tI3y8akEV31FruKfj7hBnIU/nkqA==}
  '@commitlint/cli@19.8.1':
    resolution: {integrity: sha512-LXUdNIkspyxrlV6VDHWBmCZRtkEVRpBKxi2Gtw3J54cGWhLCTouVD/Q6ZSaSvd2YaDObWK8mDjrz3TIKtaQMAA==}
    engines: {node: '>=v18'}
@@ -3681,21 +3627,6 @@ packages:
  '@keyv/serialize@1.1.1':
    resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
  '@lezer/common@1.4.0':
    resolution: {integrity: sha512-DVeMRoGrgn/k45oQNu189BoW4SZwgZFzJ1+1TV5j2NJ/KFC83oa/enRqZSGshyeMk5cPWMhsKs9nx+8o0unwGg==}
  '@lezer/highlight@1.2.3':
    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
  '@lezer/json@1.0.3':
    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
  '@lezer/lr@1.4.5':
    resolution: {integrity: sha512-/YTRKP5yPPSo1xImYQk7AZZMAgap0kegzqCSYHjAL9x1AZ0ZQW+IpcEzMKagCsbTsLnVeWkxYrCNeXG8xEPrjg==}
  '@lezer/python@1.1.18':
    resolution: {integrity: sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==}
  '@manypkg/find-root@1.1.0':
    resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
@@ -3719,9 +3650,6 @@ packages:
    engines: {node: '>=18'}
    hasBin: true
  '@marijn/find-cluster-break@1.0.2':
    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
  '@microsoft/api-extractor-model@7.32.1':
    resolution: {integrity: sha512-u4yJytMYiUAnhcNQcZDTh/tVtlrzKlyKrQnLOV+4Qr/5gV+cpufWzCYAB1Q23URFqD6z2RoL2UYncM9xJVGNKA==}
@@ -5693,9 +5621,6 @@ packages:
    resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
    engines: {node: '>= 14'}
  crelt@1.0.6:
    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
  cron-parser@4.9.0:
    resolution: {integrity: sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==}
    engines: {node: '>=12.0.0'}
@@ -9691,9 +9616,6 @@ packages:
  stubborn-utils@1.0.2:
    resolution: {integrity: sha512-zOh9jPYI+xrNOyisSelgym4tolKTJCQd5GBhK0+0xJvcYDcwlOoxF/rnFKQ2KRZknXSG9jWAp66fwP6AxN9STg==}
  style-mod@4.1.3:
    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
  style-search@0.1.0:
    resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
@@ -10597,9 +10519,6 @@ packages:
  vxe-table@4.17.22:
    resolution: {integrity: sha512-eqZtGtoE7hjU/7COEth175/5UFGRhBpXoUzCgbkUzg6ChIqeow/RyBsBFnYlsi2t7alUhxE9FDFp2ku5Gkon8Q==}
  w3c-keyname@2.2.8:
    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
  w3c-xmlserializer@5.0.0:
    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
    engines: {node: '>=18'}
@@ -12082,69 +12001,6 @@ snapshots:
    dependencies:
      mime: 3.0.0
  '@codemirror/autocomplete@6.20.0':
    dependencies:
      '@codemirror/language': 6.11.3
      '@codemirror/state': 6.5.2
      '@codemirror/view': 6.39.4
      '@lezer/common': 1.4.0
  '@codemirror/commands@6.10.0':
    dependencies:
      '@codemirror/language': 6.11.3
      '@codemirror/state': 6.5.2
      '@codemirror/view': 6.39.4
      '@lezer/common': 1.4.0
  '@codemirror/lang-json@6.0.2':
    dependencies:
      '@codemirror/language': 6.11.3
      '@lezer/json': 1.0.3
  '@codemirror/lang-python@6.2.1':
    dependencies:
      '@codemirror/autocomplete': 6.20.0
      '@codemirror/language': 6.11.3
      '@codemirror/state': 6.5.2
      '@lezer/common': 1.4.0
      '@lezer/python': 1.1.18
  '@codemirror/lang-sql@6.10.0':
    dependencies:
      '@codemirror/autocomplete': 6.20.0
      '@codemirror/language': 6.11.3
      '@codemirror/state': 6.5.2
      '@lezer/common': 1.4.0
      '@lezer/highlight': 1.2.3
      '@lezer/lr': 1.4.5
  '@codemirror/language@6.11.3':
    dependencies:
      '@codemirror/state': 6.5.2
      '@codemirror/view': 6.39.4
      '@lezer/common': 1.4.0
      '@lezer/highlight': 1.2.3
      '@lezer/lr': 1.4.5
      style-mod: 4.1.3
  '@codemirror/state@6.5.2':
    dependencies:
      '@marijn/find-cluster-break': 1.0.2
  '@codemirror/theme-one-dark@6.1.3':
    dependencies:
      '@codemirror/language': 6.11.3
      '@codemirror/state': 6.5.2
      '@codemirror/view': 6.39.4
      '@lezer/highlight': 1.2.3
  '@codemirror/view@6.39.4':
    dependencies:
      '@codemirror/state': 6.5.2
      crelt: 1.0.6
      style-mod: 4.1.3
      w3c-keyname: 2.2.8
  '@commitlint/cli@19.8.1(@types/node@24.10.1)(typescript@5.9.3)':
    dependencies:
      '@commitlint/format': 19.8.1
@@ -13187,28 +13043,6 @@ snapshots:
  '@keyv/serialize@1.1.1': {}
  '@lezer/common@1.4.0': {}
  '@lezer/highlight@1.2.3':
    dependencies:
      '@lezer/common': 1.4.0
  '@lezer/json@1.0.3':
    dependencies:
      '@lezer/common': 1.4.0
      '@lezer/highlight': 1.2.3
      '@lezer/lr': 1.4.5
  '@lezer/lr@1.4.5':
    dependencies:
      '@lezer/common': 1.4.0
  '@lezer/python@1.1.18':
    dependencies:
      '@lezer/common': 1.4.0
      '@lezer/highlight': 1.2.3
      '@lezer/lr': 1.4.5
  '@manypkg/find-root@1.1.0':
    dependencies:
      '@babel/runtime': 7.28.4
@@ -13253,8 +13087,6 @@ snapshots:
      - encoding
      - supports-color
  '@marijn/find-cluster-break@1.0.2': {}
  '@microsoft/api-extractor-model@7.32.1(@types/node@24.10.1)':
    dependencies:
      '@microsoft/tsdoc': 0.16.0
@@ -15415,8 +15247,6 @@ snapshots:
      crc-32: 1.2.2
      readable-stream: 4.7.0
  crelt@1.0.6: {}
  cron-parser@4.9.0:
    dependencies:
      luxon: 3.7.2
@@ -19686,8 +19516,6 @@ snapshots:
  stubborn-utils@1.0.2: {}
  style-mod@4.1.3: {}
  style-search@0.1.0: {}
  style-value-types@5.1.2:
@@ -20876,8 +20704,6 @@ snapshots:
    transitivePeerDependencies:
      - vue
  w3c-keyname@2.2.8: {}
  w3c-xmlserializer@5.0.0:
    dependencies:
      xml-name-validator: 5.0.0