st-comp 0.0.277 → 0.0.279

package/packages/MonacoEditor/index.vue

@@ -1,1141 +0,0 @@
-<script setup>
-import { debounce } from "st-func";
-import { InfoFilled } from "@element-plus/icons-vue";
-import { ref, onMounted, onUnmounted, nextTick, inject } from "vue";
-import { extractVariables } from "./tools";
-import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
-import "monaco-editor/esm/vs/basic-languages/python/python.contribution";
-import "monaco-editor/esm/vs/basic-languages/lua/lua.contribution";
-import VarietySelect from "../VarSelectDialog/VarietySelect.vue";
-
-const { request } = inject("stConfig"); // 组件库全局配置
-
-const emit = defineEmits(["change"]);
-const props = defineProps({
-  // 编辑器相关参数
-  defaultValue: {
-    type: String,
-    default: "",
-  },
-  language: {
-    type: String,
-    default: "python",
-  },
-  theme: {
-    type: String,
-    default: "vs-dark",
-  },
-  // 自定义函数建议列表开关
-  suggestionEnable: {
-    type: Boolean,
-    default: false,
-  },
-  // 变量列表开关
-  variableEnable: {
-    type: Boolean,
-    default: false,
-  },
-  // 变量列表类型
-  useCase: {
-    type: String,
-    default: "1", // 1-选股, 2-回测
-  },
-});
-
-let editorInstance = null;
-let lastCursorPosition = null;
-const editorContainer = ref(null);
-
-// 建议项相关参数
-const suggestions = ref([]);
-const suggestionIndex = ref(-1);
-const suggestionBoxRef = ref(null);
-const isShowingSuggestions = ref(false);
-
-// 变量列表相关参数
-const variables = ref([]);
-const variableIndex = ref(-1);
-const variableBoxRef = ref(null);
-const isShowingVariables = ref(false);
-const currentVarName = ref(null);
-const currentFormatList = ref([]);
-const currentKeyword = ref("");
-
-// 变量数据源
-const varList = ref([]);
-
-// 格式化配置项的下拉框数据源
-const handleOptionsStrToArray = (str) => {
-  const trimmedStr = str.replace(/^\[|\]$/g, "");
-  const items = trimmedStr.split("],[");
-
-  return items.map((item) => {
-    const cleanItem = item.replace(/\[|\]/g, "");
-    const [label, value] = cleanItem.split(",");
-
-    return {
-      label: label.trim(),
-      value: value.trim(),
-    };
-  });
-};
-
-// 获取变量列表数据
-const fetchVariables = async () => {
-  if (!props.variableEnable) return;
-  try {
-    const { body } = await request.post("/common/conf/queryAllBackVariables", { useCase: props.useCase });
-    varList.value = body ?? [];
-  } catch (error) {
-    console.error("获取变量列表失败:", error);
-  }
-};
-
-// [变量列表] 数据筛选
-const getVariables = debounce(async (keyword = "") => {
-  if (!props.variableEnable) return;
-
-  currentKeyword.value = keyword;
-
-  // 根据关键字筛选变量名
-  const filtered = varList.value.filter(({ varName }) => varName.toLowerCase().includes(keyword.toLowerCase()));
-
-  if (filtered.length > 0) {
-    showVariables(filtered);
-  } else {
-    hideVariables();
-  }
-}, 200);
-
-// [变量列表] 展示
-const showVariables = async (options) => {
-  if (!props.variableEnable) return;
-  variables.value = options;
-  variableIndex.value = options.length > 0 ? 0 : -1;
-  isShowingVariables.value = true;
-
-  // 如果有选中项，更新其格式列表
-  if (variableIndex.value !== -1) {
-    updateCurrentFormatList();
-  }
-
-  updateVariableBoxPosition();
-};
-
-// [变量列表] 隐藏
-const hideVariables = () => {
-  if (!props.variableEnable) return;
-  variables.value = [];
-  variableIndex.value = -1;
-  isShowingVariables.value = false;
-  currentVarName.value = null;
-  currentFormatList.value = [];
-};
-
-// [变量列表] 更新当前选中变量的格式列表
-const updateCurrentFormatList = () => {
-  if (variableIndex.value === -1 || !variables.value[variableIndex.value]) return;
-
-  const selectedVar = variables.value[variableIndex.value];
-  currentVarName.value = selectedVar.varName;
-  currentFormatList.value = selectedVar.formatList ?? [];
-};
-
-// [变量列表] 更新DOM位置
-const updateVariableBoxPosition = () => {
-  if (!props.variableEnable) return;
-  nextTick(() => {
-    if (!editorInstance || !variableBoxRef.value) return;
-    const position = editorInstance.getPosition();
-    const cursorCoords = editorInstance.getScrolledVisiblePosition(position);
-
-    if (cursorCoords) {
-      const editorDom = editorInstance.getDomNode();
-      const editorRect = editorDom.getBoundingClientRect();
-
-      // 计算相对于编辑器容器的位置（在光标右侧，但比建议列表低一些）
-      const left = cursorCoords.left + editorRect.left + 40;
-      const top = cursorCoords.top + editorRect.top + cursorCoords.height + 5;
-
-      variableBoxRef.value.style.left = `${left}px`;
-      variableBoxRef.value.style.top = `${top}px`;
-    }
-  });
-};
-
-// [变量列表] 插入变量内容
-const insertVariableContent = (configList) => {
-  if (!editorInstance) return;
-
-  // 1.校验是否填写完整 + 生成输出值
-  const result = [];
-  for (let index = 0; index < configList.length; index++) {
-    const item = configList[index];
-    switch (item.vtype) {
-      case "text": {
-        result.push(item.param);
-        break;
-      }
-      default: {
-        if (!item.modelValue) {
-          ElMessage.error("请检查插入格式内是否填写完整");
-          return;
-        }
-        let formatValue = item.modelValue;
-        if (item.prefix) formatValue = `${item.prefix}${formatValue}`;
-        if (item.suffix) formatValue = `${formatValue}${item.suffix}`;
-        result.push(formatValue);
-        break;
-      }
-    }
-  }
-
-  // 2.插入内容
-  const content = result.join("_");
-  const position = editorInstance.getPosition();
-
-  const currentValue = editorInstance.getValue();
-  const lines = currentValue.split("\n");
-
-  // 如果光标位置有效
-  if (position.lineNumber <= lines.length) {
-    const lineIndex = position.lineNumber - 1;
-    const line = lines[lineIndex];
-    const columnIndex = position.column - 1;
-
-    // 获取光标前后的字符
-    const prevChar = columnIndex > 0 ? line[columnIndex - 1] : "";
-    const nextChar = columnIndex < line.length ? line[columnIndex] : "";
-
-    // 检测是否需要添加空格
-    let contentToInsert = content;
-
-    // 如果前面有内容且不是空格或行首，在前面添加空格
-    if (prevChar && prevChar !== " " && !/[\s({[ ]/.test(prevChar)) {
-      contentToInsert = " " + contentToInsert;
-    }
-
-    // 如果后面有内容且不是空格或行尾，在后面添加空格
-    if (nextChar && nextChar !== " " && !/[\s)}\]]/.test(nextChar)) {
-      contentToInsert = contentToInsert + " ";
-    }
-
-    // 获取当前光标前的单词范围（用于替换）
-    const wordUntilPosition = editorInstance.getModel().getWordUntilPosition(position);
-
-    // 如果当前有正在输入的变量名，替换整个单词
-    const startPosition = {
-      lineNumber: position.lineNumber,
-      column: wordUntilPosition.startColumn,
-    };
-
-    const endPosition = {
-      lineNumber: position.lineNumber,
-      column: position.column,
-    };
-
-    // 执行编辑操作
-    editorInstance.executeEdits("variable-insert", [
-      {
-        range: new monaco.Range(startPosition.lineNumber, startPosition.column, endPosition.lineNumber, endPosition.column),
-        text: contentToInsert,
-        forceMoveMarkers: true,
-      },
-    ]);
-
-    // 将光标移动到插入内容之后
-    const newColumn = startPosition.column + contentToInsert.length;
-    editorInstance.setPosition({
-      lineNumber: position.lineNumber,
-      column: newColumn,
-    });
-    editorInstance.focus();
-  }
-
-  // 插入后保持变量列表显示（不关闭）
-};
-
-// [建议列表] 数据获取
-const getSuggestions = debounce(async (keyword = "") => {
-  if (!props.suggestionEnable) return;
-  try {
-    const { body } = await request.post("/common/qt/querySearchFunctions");
-    const result = body.filter(({ funcName }) => funcName.toLowerCase().includes(keyword.toLowerCase()));
-    if (result.length > 0) {
-      showSuggestions(result);
-    } else {
-      hideSuggestions();
-    }
-  } catch (error) {
-    console.error("获取自定义函数失败:", error);
-    hideSuggestions();
-  }
-}, 200);
-
-// [建议列表] 展示
-const showSuggestions = async (options) => {
-  if (!props.suggestionEnable) return;
-  suggestions.value = options;
-  suggestionIndex.value = options.length > 0 ? 0 : -1;
-  isShowingSuggestions.value = true;
-  updateSuggestionBoxPosition();
-};
-
-// [建议列表] 隐藏
-const hideSuggestions = () => {
-  if (!props.suggestionEnable) return;
-  suggestions.value = [];
-  suggestionIndex.value = -1;
-  isShowingSuggestions.value = false;
-};
-
-// [建议列表] 更新DOM位置
-const updateSuggestionBoxPosition = () => {
-  if (!props.suggestionEnable) return;
-  nextTick(() => {
-    if (!editorInstance || !suggestionBoxRef.value) return;
-    const position = editorInstance.getPosition();
-    const cursorCoords = editorInstance.getScrolledVisiblePosition(position);
-
-    if (cursorCoords) {
-      const editorDom = editorInstance.getDomNode();
-      const editorRect = editorDom.getBoundingClientRect();
-
-      const left = cursorCoords.left + editorRect.left + 40;
-      const top = cursorCoords.top + editorRect.top + cursorCoords.height;
-
-      suggestionBoxRef.value.style.left = `${left}px`;
-      suggestionBoxRef.value.style.top = `${top}px`;
-    }
-  });
-};
-
-// [建议列表] 插入内容到编辑器
-const insertSelectedSuggestion = () => {
-  if (!props.suggestionEnable) return;
-  if (suggestionIndex.value === -1 || !suggestions.value[suggestionIndex.value]) return;
-
-  const { funcName, funcExpression } = suggestions.value[suggestionIndex.value];
-  let content = funcName;
-  const varArray = extractVariables(funcExpression);
-  if (varArray.length) {
-    const str = varArray.reduce((result, item, index, arry) => {
-      result += `${item}=`;
-      if (index < arry.length - 1) result += ",";
-      return result;
-    }, "");
-    content = `${content}(${str})`;
-  }
-
-  const currentPosition = editorInstance.getPosition();
-
-  const model = editorInstance.getModel();
-  const lineContent = model.getLineContent(currentPosition.lineNumber);
-
-  const hashIndex = lineContent.lastIndexOf("#", currentPosition.column - 2);
-  if (hashIndex === -1) {
-    hideSuggestions();
-    return;
-  }
-
-  const startPosition = {
-    lineNumber: currentPosition.lineNumber,
-    column: hashIndex + 1,
-  };
-
-  const endPosition = {
-    lineNumber: currentPosition.lineNumber,
-    column: currentPosition.column,
-  };
-
-  editorInstance.executeEdits("suggestion", [
-    {
-      range: new monaco.Range(startPosition.lineNumber, startPosition.column, endPosition.lineNumber, endPosition.column),
-      text: content,
-      forceMoveMarkers: true,
-    },
-  ]);
-
-  const newPosition = {
-    lineNumber: currentPosition.lineNumber,
-    column: hashIndex + 1 + content.length,
-  };
-
-  editorInstance.setPosition(newPosition);
-  editorInstance.focus();
-
-  hideSuggestions();
-};
-
-// [建议列表] 选项自动滚动
-const scrollToSelectedSuggestion = () => {
-  if (!props.suggestionEnable) return;
-  if (!suggestionBoxRef.value || suggestionIndex.value === -1) return;
-
-  const suggestionList = suggestionBoxRef.value.querySelector(".suggestion-list");
-  const selectedItem = suggestionBoxRef.value.querySelector(".suggestion-item.selected");
-
-  if (suggestionList && selectedItem) {
-    const listRect = suggestionList.getBoundingClientRect();
-    const itemRect = selectedItem.getBoundingClientRect();
-
-    if (itemRect.top < listRect.top) {
-      suggestionList.scrollTop -= listRect.top - itemRect.top;
-    } else if (itemRect.bottom > listRect.bottom) {
-      suggestionList.scrollTop += itemRect.bottom - listRect.bottom;
-    }
-  }
-};
-
-// [变量列表] 选项自动滚动
-const scrollToSelectedVariable = () => {
-  if (!props.variableEnable) return;
-  if (!variableBoxRef.value || variableIndex.value === -1) return;
-
-  const variableList = variableBoxRef.value.querySelector(".variable-list");
-  const selectedItem = variableBoxRef.value.querySelector(".variable-item.selected");
-
-  if (variableList && selectedItem) {
-    const listRect = variableList.getBoundingClientRect();
-    const itemRect = selectedItem.getBoundingClientRect();
-
-    if (itemRect.top < listRect.top) {
-      variableList.scrollTop -= listRect.top - itemRect.top;
-    } else if (itemRect.bottom > listRect.bottom) {
-      variableList.scrollTop += itemRect.bottom - listRect.bottom;
-    }
-  }
-};
-
-// 检查当前输入内容，决定显示建议列表还是变量列表
-const checkForCompletions = async () => {
-  const position = editorInstance.getPosition();
-  const model = editorInstance.getModel();
-  const lineContent = model.getLineContent(position.lineNumber);
-
-  const textBeforeCursor = lineContent.substring(0, position.column - 1);
-  const lastHashIndex = textBeforeCursor.lastIndexOf("#");
-
-  // 如果是#触发，显示建议列表
-  if (lastHashIndex !== -1) {
-    // 如果变量列表正在显示，先隐藏
-    if (isShowingVariables.value) hideVariables();
-
-    const keyword = textBeforeCursor.substring(lastHashIndex + 1);
-    if (lastCursorPosition && (lastCursorPosition.lineNumber !== position.lineNumber || lastCursorPosition.column !== position.column)) {
-      hideSuggestions();
-    }
-    lastCursorPosition = { ...position };
-
-    if (props.suggestionEnable) {
-      getSuggestions(keyword);
-    }
-  }
-  // 否则检查变量列表
-  else {
-    // 如果建议列表正在显示，先隐藏
-    if (isShowingSuggestions.value) hideSuggestions();
-
-    // 获取光标前的单词作为关键字
-    const wordUntilPosition = model.getWordUntilPosition(position);
-    const keyword = wordUntilPosition.word;
-
-    if (lastCursorPosition && (lastCursorPosition.lineNumber !== position.lineNumber || lastCursorPosition.column !== position.column)) {
-      hideVariables();
-    }
-    lastCursorPosition = { ...position };
-
-    if (props.variableEnable && keyword.length > 0) {
-      getVariables(keyword);
-    } else if (keyword.length === 0) {
-      hideVariables();
-    }
-  }
-};
-
-// [代码编辑器] 键盘事件
-const handleKeyDown = (e) => {
-  // 变量列表键盘导航
-  if (isShowingVariables.value) {
-    switch (e.code) {
-      case "ArrowUp": {
-        e.preventDefault();
-        e.stopPropagation();
-        variableIndex.value = variableIndex.value <= 0 ? variables.value.length - 1 : variableIndex.value - 1;
-        updateCurrentFormatList();
-        nextTick(() => scrollToSelectedVariable());
-        break;
-      }
-      case "ArrowDown": {
-        e.preventDefault();
-        e.stopPropagation();
-        variableIndex.value = variableIndex.value >= variables.value.length - 1 ? 0 : variableIndex.value + 1;
-        updateCurrentFormatList();
-        nextTick(() => scrollToSelectedVariable());
-        break;
-      }
-      case "Escape": {
-        e.preventDefault();
-        e.stopPropagation();
-        hideVariables();
-        break;
-      }
-      default:
-        break;
-    }
-  }
-
-  // 建议列表键盘导航
-  if (isShowingSuggestions.value) {
-    switch (e.code) {
-      case "ArrowUp": {
-        e.preventDefault();
-        e.stopPropagation();
-        suggestionIndex.value = suggestionIndex.value <= 0 ? suggestions.value.length - 1 : suggestionIndex.value - 1;
-        nextTick(() => scrollToSelectedSuggestion());
-        break;
-      }
-      case "ArrowDown": {
-        e.preventDefault();
-        e.stopPropagation();
-        suggestionIndex.value = suggestionIndex.value >= suggestions.value.length - 1 ? 0 : suggestionIndex.value + 1;
-        nextTick(() => scrollToSelectedSuggestion());
-        break;
-      }
-      case "Enter": {
-        if (isShowingSuggestions.value) {
-          e.preventDefault();
-          e.stopPropagation();
-          insertSelectedSuggestion();
-        }
-        break;
-      }
-      case "Escape": {
-        e.preventDefault();
-        e.stopPropagation();
-        if (isShowingSuggestions.value) hideSuggestions();
-        if (isShowingVariables.value) hideVariables();
-        break;
-      }
-      default:
-        break;
-    }
-  }
-};
-
-// [代码编辑器] 内容变化回调
-const handleContentChange = (event) => {
-  if (!editorInstance) return;
-  emit("change", editorInstance.getValue());
-  checkForCompletions();
-};
-
-// [代码编辑器] 光标变化回调
-const handleCursorPositionChange = (event) => {
-  if (isShowingSuggestions.value) {
-    updateSuggestionBoxPosition();
-  }
-  if (isShowingVariables.value) {
-    updateVariableBoxPosition();
-  }
-};
-
-// [document] 全局监听的点击事件
-const handleClickOutside = (event) => {
-  // 如果点击了建议列表外面的区域，就自动关闭
-  if (suggestionBoxRef.value && !suggestionBoxRef.value.contains(event.target)) {
-    hideSuggestions();
-  }
-  // 如果点击了变量列表外面的区域，就自动关闭
-  if (variableBoxRef.value && !variableBoxRef.value.contains(event.target)) {
-    hideVariables();
-  }
-};
-
-onMounted(() => {
-  editorInstance = monaco.editor.create(editorContainer.value, {
-    value: props.defaultValue,
-    language: props.language,
-    theme: props.theme,
-  });
-
-  editorInstance.onKeyDown(handleKeyDown);
-  editorInstance.onDidChangeModelContent(handleContentChange);
-  editorInstance.onDidChangeCursorPosition(handleCursorPositionChange);
-
-  document.addEventListener("click", handleClickOutside);
-
-  // 获取变量列表数据
-  fetchVariables();
-});
-
-onUnmounted(() => {
-  editorInstance?.dispose();
-  document.removeEventListener("click", handleClickOutside);
-});
-
-defineExpose({
-  resize: () => {
-    editorInstance.layout();
-  },
-  getInstance: () => {
-    return editorInstance;
-  },
-  getValue: () => {
-    return editorInstance.getValue();
-  },
-  setValue: (value) => {
-    editorInstance.setValue(value);
-  },
-  setReadOnly: (readOnly = true) => {
-    editorInstance.updateOptions({ readOnly });
-  },
-  focusToEnd: () => {
-    if (!editorInstance) return;
-
-    const model = editorInstance.getModel();
-    if (!model) return;
-
-    const lineCount = model.getLineCount();
-    const lastLine = model.getLineContent(lineCount);
-
-    const position = {
-      lineNumber: lineCount,
-      column: lastLine.length + 1,
-    };
-
-    editorInstance.setPosition(position);
-    editorInstance.focus();
-    editorInstance.revealPositionInCenter(position);
-  },
-});
-</script>
-
-<template>
-  <div class="editor-wrapper">
-    <!-- 代码编辑器 -->
-    <div
-      ref="editorContainer"
-      class="editor-container"
-    />
-
-    <!-- 建议列表 -->
-    <Teleport
-      to="body"
-      v-if="isShowingSuggestions && suggestions.length > 0"
-    >
-      <div
-        ref="suggestionBoxRef"
-        class="suggestion-box"
-      >
-        <div class="suggestion-header">
-          <span class="suggestion-title">相关自定义函数</span>
-          <span class="suggestion-count">{{ suggestions.length }} 项</span>
-        </div>
-        <div class="suggestion-list">
-          <div
-            v-for="(item, index) in suggestions"
-            :key="item.id"
-            :class="['suggestion-item', { selected: index === suggestionIndex }]"
-            @click="
-              suggestionIndex = index;
-              insertSelectedSuggestion();
-            "
-          >
-            <span class="suggestion-text">{{ item.funcName }}</span>
-          </div>
-        </div>
-        <div class="suggestion-footer">使用 ↑↓ 选择，Enter 确认，Esc 取消</div>
-      </div>
-    </Teleport>
-
-    <!-- 变量列表 -->
-    <Teleport
-      to="body"
-      v-if="isShowingVariables && variables.length > 0"
-    >
-      <div
-        ref="variableBoxRef"
-        class="variable-box"
-      >
-        <div class="variable-header">
-          <span class="variable-title">变量列表</span>
-          <span class="variable-count">{{ variables.length }} 项</span>
-          <span
-            class="variable-keyword"
-            v-if="currentKeyword"
-            >"{{ currentKeyword }}"</span
-          >
-        </div>
-
-        <div class="variable-content">
-          <!-- 左侧变量名列表 -->
-          <div class="variable-list">
-            <div
-              v-for="(item, index) in variables"
-              :key="item.varName"
-              :class="['variable-item', { selected: index === variableIndex }]"
-              @click="
-                variableIndex = index;
-                updateCurrentFormatList();
-              "
-            >
-              <span class="variable-name">{{ item.varName }}</span>
-            </div>
-          </div>
-
-          <!-- 右侧格式配置区域 -->
-          <div
-            class="format-section"
-            v-if="currentFormatList.length"
-          >
-            <div
-              class="format-item"
-              v-for="(formatItem, formatIndex) in currentFormatList"
-              :key="formatIndex"
-            >
-              <div class="format-header">
-                <span>格式{{ formatIndex + 1 }}</span>
-                <el-tooltip
-                  effect="dark"
-                  placement="top-start"
-                >
-                  <template #content>
-                    <div style="max-width: 820px">
-                      <span style="white-space: pre-line">{{ formatItem.tip }}</span>
-                    </div>
-                  </template>
-                  <el-icon><InfoFilled /></el-icon>
-                </el-tooltip>
-              </div>
-
-              <!-- 配置项 -->
-              <div class="config-list">
-                <template v-for="(config, configIndex) in formatItem.configList">
-                  <div class="config-item">
-                    <!-- 类型: 固定值 -->
-                    <template v-if="config.vtype === 'text'">
-                      <span>{{ config.param }}</span>
-                    </template>
-                    <template v-if="config.vtype === 'inputVariety'">
-                      <VarietySelect
-                        size="small"
-                        :placeholder="config.param"
-                        :selectClearEnable="false"
-                        :labelShowEnable="false"
-                        @select="({ name, code }) => (config.modelValue = code)"
-                        @change="(value) => (config.modelValue = value)"
-                        style="width: 100px"
-                      />
-                    </template>
-                    <template v-if="config.vtype === 'input'">
-                      <span v-if="config.prefix">{{ config.prefix }}</span>
-                      <el-input
-                        v-model="config.modelValue"
-                        :placeholder="config.param"
-                        size="small"
-                      />
-                      <span v-if="config.suffix">{{ config.suffix }}</span>
-                    </template>
-                    <template v-if="config.vtype === 'select'">
-                      <el-select
-                        v-model="config.modelValue"
-                        :placeholder="config.param"
-                        clearable
-                        size="small"
-                      >
-                        <el-option
-                          v-for="item in handleOptionsStrToArray(config.optionsStr)"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
-                        />
-                      </el-select>
-                    </template>
-                  </div>
-                  <span
-                    v-if="configIndex !== formatItem.configList.length - 1"
-                    class="separator"
-                    >_</span
-                  >
-                </template>
-              </div>
-
-              <!-- 插入变量按钮 -->
-              <el-button
-                type="primary"
-                size="small"
-                class="insert-btn"
-                @click="insertVariableContent(formatItem.configList)"
-              >
-                插入变量
-              </el-button>
-            </div>
-          </div>
-        </div>
-
-        <div class="variable-footer">使用 ↑↓ 选择变量，点击插入按钮确认，Esc 取消</div>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<style lang="scss">
-/* 变量列表下拉框和tooltip的全局样式 */
-.variable-select-popper,
-.variable-variety-popper,
-.variable-tooltip-popper {
-  z-index: 100000 !important;
-}
-
-/* 确保所有 Element Plus 的弹层都有足够高的层级 */
-.el-popper {
-  z-index: 100000 !important;
-}
-
-/* 如果是旧版本 Element Plus */
-.el-select__popper,
-.el-tooltip__popper {
-  z-index: 100000 !important;
-}
-</style>
-<style scoped lang="scss">
-.editor-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-.editor-container {
-  width: 100%;
-  height: 100%;
-}
-
-// 建议列表样式
-.suggestion-box {
-  position: fixed;
-  background: #1e1e1e;
-  border: 1px solid #444;
-  border-radius: 6px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
-  z-index: 99999;
-  min-width: 240px;
-  max-height: 280px;
-  overflow: hidden;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: -6px;
-    left: 12px;
-    width: 12px;
-    height: 12px;
-    background: #1e1e1e;
-    border-left: 1px solid #444;
-    border-top: 1px solid #444;
-    transform: rotate(45deg);
-    z-index: -1;
-  }
-
-  .suggestion-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 12px;
-    background: #2d2d30;
-    border-bottom: 1px solid #444;
-    font-size: 12px;
-    color: #969696;
-
-    .suggestion-title {
-      font-weight: 600;
-    }
-
-    .suggestion-count {
-      font-size: 11px;
-      opacity: 0.8;
-    }
-  }
-
-  .suggestion-list {
-    max-height: 200px;
-    overflow-y: auto;
-    padding: 4px 0;
-
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: #424242;
-      border-radius: 3px;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background: #4a4a4a;
-    }
-
-    .suggestion-item {
-      display: flex;
-      align-items: center;
-      padding: 8px 12px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      border-left: 3px solid transparent;
-
-      &:hover {
-        background: #2a2d2e;
-        border-left-color: #007acc;
-      }
-
-      &.selected {
-        background: #094771;
-        border-left-color: #007acc;
-
-        .suggestion-text {
-          color: #ffffff;
-          font-weight: 500;
-        }
-      }
-
-      .suggestion-text {
-        font-size: 13px;
-        color: #d4d4d4;
-        line-height: 1.4;
-      }
-    }
-  }
-
-  .suggestion-footer {
-    padding: 6px 12px;
-    background: #2d2d30;
-    border-top: 1px solid #444;
-    font-size: 11px;
-    color: #969696;
-    text-align: center;
-  }
-}
-// 变量列表样式
-.variable-box {
-  position: fixed;
-  background: #1e1e1e;
-  border: 1px solid #444;
-  border-radius: 6px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
-  z-index: 9999;
-  min-width: 600px;
-  max-width: 900px;
-  overflow: hidden;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: -6px;
-    left: 12px;
-    width: 12px;
-    height: 12px;
-    background: #1e1e1e;
-    border-left: 1px solid #444;
-    border-top: 1px solid #444;
-    transform: rotate(45deg);
-    z-index: -1;
-  }
-
-  .variable-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 12px;
-    background: #2d2d30;
-    border-bottom: 1px solid #444;
-    font-size: 12px;
-    color: #969696;
-
-    .variable-title {
-      font-weight: 600;
-    }
-
-    .variable-count {
-      font-size: 11px;
-      opacity: 0.8;
-    }
-
-    .variable-keyword {
-      font-size: 11px;
-      color: #007acc;
-      background: #09477133;
-      padding: 2px 6px;
-      border-radius: 4px;
-    }
-  }
-
-  .variable-content {
-    display: flex;
-    max-height: 300px;
-    overflow: hidden;
-
-    .variable-list {
-      width: 160px;
-      border-right: 1px solid #444;
-      overflow-y: auto;
-      padding: 4px 0;
-
-      &::-webkit-scrollbar {
-        width: 6px;
-      }
-
-      &::-webkit-scrollbar-track {
-        background: transparent;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: #424242;
-        border-radius: 3px;
-      }
-
-      .variable-item {
-        padding: 8px 12px;
-        cursor: pointer;
-        border-left: 3px solid transparent;
-        font-size: 12px;
-        color: #d4d4d4;
-
-        &:hover {
-          background: #2a2d2e;
-          border-left-color: #007acc;
-        }
-
-        &.selected {
-          background: #094771;
-          border-left-color: #007acc;
-          color: #ffffff;
-          font-weight: 500;
-        }
-      }
-    }
-
-    .format-section {
-      flex: 1;
-      padding: 12px;
-      overflow-y: auto;
-      max-height: 300px;
-
-      &::-webkit-scrollbar {
-        width: 6px;
-      }
-
-      &::-webkit-scrollbar-track {
-        background: transparent;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: #424242;
-        border-radius: 3px;
-      }
-
-      .format-item {
-        margin-bottom: 16px;
-        padding: 8px;
-        background: #2d2d30;
-        border-radius: 4px;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-
-        .format-header {
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          margin-bottom: 8px;
-          font-size: 11px;
-          color: #969696;
-
-          .el-icon {
-            cursor: help;
-            font-size: 14px;
-
-            &:hover {
-              color: #007acc;
-            }
-          }
-        }
-
-        .config-list {
-          display: flex;
-          align-items: center;
-          flex-wrap: wrap;
-          gap: 4px 8px;
-          margin-bottom: 8px;
-
-          .config-item {
-            display: flex;
-            align-items: center;
-            gap: 2px;
-
-            span {
-              font-size: 12px;
-              color: #d4d4d4;
-            }
-
-            :deep(.el-input) {
-              width: 100px;
-
-              .el-input__wrapper {
-                background: #3c3c3c;
-                box-shadow: none;
-                padding: 1px 8px;
-
-                input {
-                  color: #d4d4d4;
-                }
-              }
-            }
-
-            :deep(.el-select) {
-              width: 100px;
-
-              .el-select__wrapper {
-                background: #3c3c3c;
-                box-shadow: none;
-                min-height: 24px;
-                padding: 0 8px;
-
-                .el-select__placeholder {
-                  color: #969696;
-                }
-
-                .el-select__selected-item {
-                  color: #d4d4d4;
-                }
-              }
-            }
-          }
-
-          .separator {
-            color: #969696;
-            font-size: 12px;
-          }
-        }
-
-        .insert-btn {
-          width: 100%;
-          margin-top: 4px;
-        }
-      }
-    }
-  }
-
-  .variable-footer {
-    padding: 6px 12px;
-    background: #2d2d30;
-    border-top: 1px solid #444;
-    font-size: 11px;
-    color: #969696;
-    text-align: center;
-  }
-}
-</style>