feat(ui): 重构变量系统并实现测试区独立变量管理

## 核心功能 ### 变量系统重构 - 移除会话变量系统，实现独立的测试变量功能 - 将 useContextManagement 从 web 模块迁移到 ui 模块 - 升级 usePromptTester 支持测试变量注入和上下文 ### 测试区临时变量管理 - 临时变量数据结构升级为 { value, timestamp } - 按时间戳降序排序显示（最新在前） - 支持手动增删改操作 - 添加变量对话框，支持变量名验证 - 删除按钮，支持单个变量删除 - 与优化后提示词解耦，不再自动绑定 ### 变量提取功能 - 新增 variable-extraction 组件目录 - VariableAwareInput: 支持文本选择提取变量 - VariableExtractionDialog: 变量提取对话框 - useTextSelection: 文本选择管理 - useInputHistory: 输入历史管理 - 支持全局/临时变量类型选择 - 支持全部替换功能 ## 技术改进 ### 组件优化 - TestAreaPanel.vue: testVariables 从 Record<string, string> 升级为 Record<string, TestVariable> - InputPanel.vue: 集成 VariableAwareInput 组件，支持变量提取 - ContextUserWorkspace.vue: 新增 temporaryVariables 状态管理 ### 国际化完善 - 补充缺失的 test.invalidVariables 和 test.getVariablesFailed 键 - 新增变量提取相关的完整国际化文本 - 覆盖中文简体/繁体/英文三种语言 - 同步三语言国际化键值（en-US/zh-CN/zh-TW） ## 其他更新 - 修复 web/extension 中未使用变量和错误 API 调用 - 更新测试文件的组件导入路径 - 清理过度 debug 日志 - 更新相关文档（ui-refactor-plan.md, variable-system-redesign.md） ## 相关 Issue - 解决测试区变量显示依赖优化结果的问题 - 实现变量独立管理需求 - 补充缺失的国际化文本 **测试：所有测试通过（core: 367, ui: 95）**

Author: linshenkx

docs/workspace/ui-design-analysis.md

@@ -70,8 +70,22 @@
  </NFlex>
  </NFlex>
 
- <!-- 输入框 -->
+ <!-- 输入框 - 使用变量感知输入框 (支持变量提取) -->
+ <VariableAwareInput
+ v-if="enableVariableExtraction"
+ :model-value="modelValue"
+ @update:model-value="$emit('update:modelValue', $event)"
+ :placeholder="placeholder"
+ :autosize="{ minRows: 4, maxRows: 12 }"
+ :existing-global-variables="existingGlobalVariables"
+ :existing-temporary-variables="existingTemporaryVariables"
+ :predefined-variables="predefinedVariables"
+ @variable-extracted="handleVariableExtracted"
+ />
+
+ <!-- 原生输入框 (不支持变量提取) -->
  <NInput
+ v-else
  :value="modelValue"
  @update:value="$emit('update:modelValue', $event)"
  type="textarea"
@@ -164,19 +178,50 @@ import {
 } from "naive-ui";
 import { useFullscreen } from "../composables/useFullscreen";
 import FullscreenDialog from "./FullscreenDialog.vue";
+import { VariableAwareInput } from "./variable-extraction";
+
+/**
+ * 输入面板组件
+ *
+ * 功能：
+ * 1. 提供输入框用于用户输入内容
+ * 2. 支持全屏编辑模式
+ * 3. 支持变量提取功能 (可选)
+ * 4. 提供模型选择、模板选择等控制面板
+ */
 
 interface Props {
+ /** 输入框的值 */
  modelValue: string;
+ /** 选中的模型 */
  selectedModel: string;
+ /** 面板标题 */
  label: string;
+ /** 占位符文本 */
  placeholder?: string;
+ /** 模型选择标签 */
  modelLabel: string;
+ /** 模板选择标签 */
  templateLabel?: string;
+ /** 提交按钮文本 */
  buttonText: string;
+ /** 加载中文本 */
  loadingText: string;
+ /** 是否正在加载 */
  loading?: boolean;
+ /** 是否禁用 */
  disabled?: boolean;
+ /** 是否显示预览按钮 */
  showPreview?: boolean;
+
+ /** 🆕 是否启用变量提取功能 */
+ enableVariableExtraction?: boolean;
+ /** 🆕 已存在的全局变量名列表 */
+ existingGlobalVariables?: string[];
+ /** 🆕 已存在的临时变量名列表 */
+ existingTemporaryVariables?: string[];
+ /** 🆕 系统预定义变量名列表 */
+ predefinedVariables?: string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -185,6 +230,10 @@ const props = withDefaults(defineProps<Props>(), {
  loading: false,
  disabled: false,
  showPreview: false,
+ enableVariableExtraction: false,
+ existingGlobalVariables: () => [],
+ existingTemporaryVariables: () => [],
+ predefinedVariables: () => [],
 });
 
 const emit = defineEmits<{
@@ -193,11 +242,28 @@ const emit = defineEmits<{
  submit: [];
  configModel: [];
  "open-preview": [];
+ /** 🆕 变量提取事件 */
+ "variable-extracted": [
+ data: {
+ variableName: string;
+ variableValue: string;
+ variableType: "global" | "temporary";
+ },
+ ];
 }>();
 
 // 使用全屏组合函数
 const { isFullscreen, fullscreenValue, openFullscreen } = useFullscreen(
  computed(() => props.modelValue),
  (value) => emit("update:modelValue", value),
 );
+
+// 处理变量提取事件
+const handleVariableExtracted = (data: {
+ variableName: string;
+ variableValue: string;
+ variableType: "global" | "temporary";
+}) => {
+ emit("variable-extracted", data);
+};
 </script>