st-comp 0.0.237 → 0.0.238

package/packages/MonacoEditor/index.vue

@@ -1,18 +1,15 @@
 <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";
+import { extractVariables } from "./tools";
 
 const { request } = inject("stConfig"); // 组件库全局配置
 
 const emit = defineEmits(["change"]);
 const props = defineProps({
-  // 编辑器相关参数
   defaultValue: {
     type: String,
     default: "",
@@ -30,16 +27,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  // 变量列表开关
-  variableEnable: {
-    type: Boolean,
-    default: false,
-  },
-  // 变量列表类型
-  useCase: {
-    type: String,
-    default: "1", // 1-选股, 2-回测
-  },
 });
 
 let editorInstance = null;
@@ -52,209 +39,6 @@ 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;
@@ -271,7 +55,6 @@ const getSuggestions = debounce(async (keyword = "") => {
     hideSuggestions();
   }
 }, 200);
-
 // [建议列表] 展示
 const showSuggestions = async (options) => {
   if (!props.suggestionEnable) return;
@@ -280,7 +63,6 @@ const showSuggestions = async (options) => {
   isShowingSuggestions.value = true;
   updateSuggestionBoxPosition();
 };
-
 // [建议列表] 隐藏
 const hideSuggestions = () => {
   if (!props.suggestionEnable) return;
@@ -288,7 +70,6 @@ const hideSuggestions = () => {
   suggestionIndex.value = -1;
   isShowingSuggestions.value = false;
 };
-
 // [建议列表] 更新DOM位置
 const updateSuggestionBoxPosition = () => {
   if (!props.suggestionEnable) return;
@@ -301,7 +82,8 @@ const updateSuggestionBoxPosition = () => {
       const editorDom = editorInstance.getDomNode();
       const editorRect = editorDom.getBoundingClientRect();
 
-      const left = cursorCoords.left + editorRect.left + 40;
+      // 计算相对于编辑器容器的位置
+      const left = cursorCoords.left + editorRect.left + 40; // 在光标右侧
       const top = cursorCoords.top + editorRect.top + cursorCoords.height;
 
       suggestionBoxRef.value.style.left = `${left}px`;
@@ -309,7 +91,6 @@ const updateSuggestionBoxPosition = () => {
     }
   });
 };
-
 // [建议列表] 插入内容到编辑器
 const insertSelectedSuggestion = () => {
   if (!props.suggestionEnable) return;
@@ -321,6 +102,7 @@ const insertSelectedSuggestion = () => {
   if (varArray.length) {
     const str = varArray.reduce((result, item, index, arry) => {
       result += `${item}=`;
+      // 如果不是最后一个, 就需要加个逗号
       if (index < arry.length - 1) result += ",";
       return result;
     }, "");
@@ -366,49 +148,9 @@ const insertSelectedSuggestion = () => {
 
   hideSuggestions();
 };
-
-// [建议列表] 选项自动滚动
-const scrollToSelectedSuggestion = () => {
+// [建议列表] 随用户内容输入变动检查建议项
+const checkForSuggestions = async () => {
   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);
@@ -416,140 +158,104 @@ const checkForCompletions = async () => {
   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);
-    }
+    getSuggestions(keyword);
+  } else {
+    hideSuggestions();
   }
-  // 否则检查变量列表
-  else {
-    // 如果建议列表正在显示，先隐藏
-    if (isShowingSuggestions.value) hideSuggestions();
+};
+// [建议列表] 选项自动滚动
+const scrollToSelectedSuggestion = () => {
+  if (!props.suggestionEnable) return;
+  if (!suggestionBoxRef.value || suggestionIndex.value === -1) return;
 
-    // 获取光标前的单词作为关键字
-    const wordUntilPosition = model.getWordUntilPosition(position);
-    const keyword = wordUntilPosition.word;
+  const suggestionList = suggestionBoxRef.value.querySelector(".suggestion-list");
+  const selectedItem = suggestionBoxRef.value.querySelector(".suggestion-item.selected");
 
-    if (lastCursorPosition && (lastCursorPosition.lineNumber !== position.lineNumber || lastCursorPosition.column !== position.column)) {
-      hideVariables();
-    }
-    lastCursorPosition = { ...position };
+  if (suggestionList && selectedItem) {
+    const listRect = suggestionList.getBoundingClientRect();
+    const itemRect = selectedItem.getBoundingClientRect();
 
-    if (props.variableEnable && keyword.length > 0) {
-      getVariables(keyword);
-    } else if (keyword.length === 0) {
-      hideVariables();
+    // 如果选中项在可视区域上方
+    if (itemRect.top < listRect.top) {
+      suggestionList.scrollTop -= listRect.top - itemRect.top;
+    }
+    // 如果选中项在可视区域下方
+    else if (itemRect.bottom > listRect.bottom) {
+      suggestionList.scrollTop += itemRect.bottom - listRect.bottom;
     }
   }
 };
 
 // [代码编辑器] 键盘事件
 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) return;
+  switch (e.code) {
+    case "ArrowUp": {
+      e.preventDefault();
+      e.stopPropagation();
+      suggestionIndex.value = suggestionIndex.value <= 0 ? suggestions.value.length - 1 : suggestionIndex.value - 1;
+      nextTick(() => scrollToSelectedSuggestion());
+      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;
+    case "ArrowDown": {
+      e.preventDefault();
+      e.stopPropagation();
+      suggestionIndex.value = suggestionIndex.value >= suggestions.value.length - 1 ? 0 : suggestionIndex.value + 1;
+      nextTick(() => scrollToSelectedSuggestion());
+      break;
+    }
+    case "ArrowLeft": {
+      e.preventDefault();
+      e.stopPropagation();
+      break;
     }
+    case "ArrowRight": {
+      e.preventDefault();
+      e.stopPropagation();
+      break;
+    }
+    case "Enter": {
+      e.preventDefault();
+      e.stopPropagation();
+      insertSelectedSuggestion();
+      break;
+    }
+    case "Escape": {
+      e.preventDefault();
+      e.stopPropagation();
+      hideSuggestions();
+      break;
+    }
+    default:
+      break;
   }
 };
-
 // [代码编辑器] 内容变化回调
 const handleContentChange = (event) => {
   if (!editorInstance) return;
   emit("change", editorInstance.getValue());
-  checkForCompletions();
+  checkForSuggestions();
 };
-
 // [代码编辑器] 光标变化回调
 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(() => {
@@ -558,22 +264,15 @@ onMounted(() => {
     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();
@@ -596,9 +295,11 @@ defineExpose({
     const model = editorInstance.getModel();
     if (!model) return;
 
+    // 获取最后一行
     const lineCount = model.getLineCount();
     const lastLine = model.getLineContent(lineCount);
 
+    // 设置光标位置到最后一行末尾
     const position = {
       lineNumber: lineCount,
       column: lastLine.length + 1,
@@ -606,6 +307,8 @@ defineExpose({
 
     editorInstance.setPosition(position);
     editorInstance.focus();
+
+    // 滚动到光标位置
     editorInstance.revealPositionInCenter(position);
   },
 });
@@ -618,7 +321,6 @@ defineExpose({
       ref="editorContainer"
       class="editor-container"
     />
-
     <!-- 建议列表 -->
     <Teleport
       to="body"
@@ -648,157 +350,9 @@ defineExpose({
         <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;
@@ -809,8 +363,6 @@ defineExpose({
   width: 100%;
   height: 100%;
 }
-
-// 建议列表样式
 .suggestion-box {
   position: fixed;
   background: #1e1e1e;
@@ -835,7 +387,6 @@ defineExpose({
     transform: rotate(45deg);
     z-index: -1;
   }
-
   .suggestion-header {
     display: flex;
     justify-content: space-between;
@@ -855,7 +406,6 @@ defineExpose({
       opacity: 0.8;
     }
   }
-
   .suggestion-list {
     max-height: 200px;
     overflow-y: auto;
@@ -908,7 +458,6 @@ defineExpose({
       }
     }
   }
-
   .suggestion-footer {
     padding: 6px 12px;
     background: #2d2d30;
@@ -918,224 +467,4 @@ defineExpose({
     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>