st-comp 0.0.239 → 0.0.242

package/packages/MonacoEditor/index.vue

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