feat(ui): 实现变量悬浮提示和高亮颜色主题适配功能

- 新增变量悬浮提示扩展，支持已存在变量的彩色标签卡片展示 - 实现全局/临时/预定义三种变量类型的视觉区分和智能颜色系统 - 引入 ExistingVariableTooltipTheme 接口，支持丰富的主题配置选项 - 使用等宽字体显示变量值，支持长内容滚动和格式保留 - 添加颜色解析与转换工具函数，实现颜色混合和透明度处理 - 实现暗色主题检测逻辑和亮度计算功能 - 优化变量高亮样式，确保在不同主题下的可读性 - 为活动行和行号槽添加主题适配样式，增强缺失变量视觉提示 - 在 VariableAwareInput 中集成悬浮提示扩展，支持主题动态切换

Author: linshenkx

packages/ui/src/components/variable-extraction/VariableAwareInput.vue

@@ -57,6 +57,7 @@ import {
  variableHighlighter,
  variableAutocompletion,
  missingVariableTooltip,
+ existingVariableTooltip,
  createThemeExtension,
  type VariableDetectionLabels,
 } from "./codemirror-extensions";
@@ -132,6 +133,7 @@ let editorView: EditorView | null = null;
 const autocompletionCompartment = new Compartment();
 const highlighterCompartment = new Compartment();
 const missingVariableTooltipCompartment = new Compartment();
+const existingVariableTooltipCompartment = new Compartment();
 const placeholderCompartment = new Compartment();
 const themeCompartment = new Compartment();
 
@@ -503,6 +505,23 @@ onMounted(() => {
  },
  ),
  ),
+ // 已存在变量提示
+ existingVariableTooltipCompartment.of(
+ existingVariableTooltip(
+ variableDetectionLabels.value,
+ {
+ backgroundColor: themeVars.value.cardColor,
+ borderColor: themeVars.value.borderColor,
+ borderRadius: themeVars.value.borderRadius,
+ textColor: themeVars.value.textColor2,
+ shadow: themeVars.value.boxShadow2,
+ sourceGlobalColor: themeVars.value.infoColor,
+ sourceTemporaryColor: themeVars.value.successColor,
+ sourcePredefinedColor: themeVars.value.warningColor,
+ surfaceOverlay: themeVars.value.popoverColor,
+ },
+ ),
+ ),
  // 主题适配
  themeCompartment.of(createThemeExtension(themeVars.value)),
  // 监听文档变化
@@ -586,6 +605,22 @@ watch(
  },
  ),
  ),
+ existingVariableTooltipCompartment.reconfigure(
+ existingVariableTooltip(
+ variableDetectionLabels.value,
+ {
+ backgroundColor: themeVars.value.cardColor,
+ borderColor: themeVars.value.borderColor,
+ borderRadius: themeVars.value.borderRadius,
+ textColor: themeVars.value.textColor2,
+ shadow: themeVars.value.boxShadow2,
+ sourceGlobalColor: themeVars.value.infoColor,
+ sourceTemporaryColor: themeVars.value.successColor,
+ sourcePredefinedColor: themeVars.value.warningColor,
+ surfaceOverlay: themeVars.value.popoverColor,
+ },
+ ),
+ ),
  ],
  });
  },
@@ -618,6 +653,36 @@ watch(
  editorView.dispatch({
  effects: [
  themeCompartment.reconfigure(createThemeExtension(vars)),
+ missingVariableTooltipCompartment.reconfigure(
+ missingVariableTooltip(
+ handleAddMissingVariable,
+ variableDetectionLabels.value,
+ {
+ backgroundColor: vars.cardColor,
+ borderColor: vars.borderColor,
+ borderRadius: vars.borderRadius,
+ textColor: vars.textColor2,
+ primaryColor: vars.primaryColor,
+ primaryColorHover: vars.primaryColorHover,
+ },
+ ),
+ ),
+ existingVariableTooltipCompartment.reconfigure(
+ existingVariableTooltip(
+ variableDetectionLabels.value,
+ {
+ backgroundColor: vars.cardColor,
+ borderColor: vars.borderColor,
+ borderRadius: vars.borderRadius,
+ textColor: vars.textColor2,
+ shadow: vars.boxShadow2,
+ sourceGlobalColor: vars.infoColor,
+ sourceTemporaryColor: vars.successColor,
+ sourcePredefinedColor: vars.warningColor,
+ surfaceOverlay: vars.popoverColor,
+ },
+ ),
+ ),
  ],
  });
  },