TestAreaPanel.vue (检测变量,提供输入)
    ↓ (通过 ref.getVariableValues())
ContextUserWorkspace.vue / ContextSystemWorkspace.vue (获取变量)
    ↓ (通过 emit('test', testVariables))
App.vue (接收变量)
    ↓ (调用 promptTester.executeTest(testVariables))
usePromptTester.ts (执行测试,合并变量)

const variables = {
  ...baseVars,              // 全局自定义变量
  ...(testVars || {}),      // 测试变量(优先级高于全局)
  currentPrompt: selectedPrompt,    // 预定义变量
  userQuestion: userPrompt,         // 预定义变量
}

多上下文管理系统:
- 上下文1: 写歌词项目 → 会话变量: style=流行, mood=欢快
- 上下文2: 写代码项目 → 会话变量: language=TypeScript
- 可以切换上下文,每个上下文有独立的变量集

❌ 只有一个永久的默认上下文
❌ 无法创建/切换上下文
❌ UI层没有上下文管理器
❌ "会话变量"实际上是另一个全局变量池

测试区操作栏: [📊全局变量] [📝会话变量] [🔧工具管理]
                                ↑ 用户点击后发现和全局变量差不多

变量系统架构:
┌─────────────────────────────────────┐
│ 📊 全局变量 (VariableManager)      │
│   - 持久化到 localStorage/文件      │
│   - 跨会话共享                      │
│   - 手动CRUD管理                    │
│   - 用途: API密钥、常用配置         │
└─────────────────────────────────────┘
              ↓ (低优先级)
┌─────────────────────────────────────┐
│ 🧪 测试变量 (TestAreaPanel 内存)   │
│   - 仅存在内存 (ref)                │
│   - 刷新页面丢失                    │
│   - 测试区直接输入                  │
│   - 用途: 当前测试的变量值          │
└─────────────────────────────────────┘
              ↓ (高优先级,覆盖全局)
┌─────────────────────────────────────┐
│ 🔧 预定义变量 (运行时计算)         │
│   - currentPrompt, userQuestion...  │
│   - 优先级最高,不可覆盖             │
└─────────────────────────────────────┘

变量合并优先级: 预定义 > 测试变量 > 全局变量

globalVariables = {
  apiKey: "sk-xxxx...",
  userName: "张三",
  defaultLanguage: "中文",
  tone: "专业",
}

// 用户在测试区输入:
testVariables = {
  topic: "今天测试写歌",    // 临时话题
  style: "欢快",            // 这次测试用欢快
}

// 如果全局变量中也有 style: "正式"
// 测试时使用 "欢快" (测试变量优先级更高)

// TestAreaPanel.vue
const testVariables = ref<Record<string, string>>({})

// 不持久化,刷新页面后 testVariables 自动重置为 {}

// 测试完成后缓存
localStorage.setItem('test.lastVariables', JSON.stringify(testVariables.value))

// 下次打开页面时恢复 (但刷新页面仍然清空)
// 这样用户连续测试时不需要重新输入

predefinedVariables = {
  currentPrompt: "当前提示词内容",
  userQuestion: "用户测试问题",
  originalPrompt: "原始提示词",
  lastOptimizedPrompt: "上次优化结果",
  // ... 其他预定义变量
}

┌─────────────────────────────────────────┐
│ 测试区                                   │
├─────────────────────────────────────────┤
│ [测试] [📊全局变量] [📝会话变量] [🔧工具] │
│         ↑ 点击打开全局变量管理器          │
│         ↑ 点击打开上下文编辑器-变量标签   │
├─────────────────────────────────────────┤
│ (测试内容...)                            │
└─────────────────────────────────────────┘

┌─────────────────────────────────────────┐
│ 测试区                                   │
├─────────────────────────────────────────┤
│ [测试] [📊全局变量] [🔧工具管理]        │
│         ↑ 点击打开全局变量管理器          │
│         ❌ 移除会话变量按钮               │
├─────────────────────────────────────────┤
│ 变量输入 (临时,刷新丢失):               │
│ {{style}}    [欢快________] 📊          │
│              ↑ 输入框      ↑ 来自全局    │
│ {{topic}}    [写歌________]             │
│              ↑ 新输入                   │
├─────────────────────────────────────────┤
│ [▶ 测试]                                │
└─────────────────────────────────────────┘

✨ 改进点:
1. 移除"会话变量"按钮,减少困惑
2. 测试区直接显示变量输入框
3. 如果不填写,自动使用全局变量的值
4. 刷新页面后输入框清空

<template>
  <div class="test-area-panel">
    <!-- 标题栏 -->
    <div class="test-header">
      <NText strong>{{ $t('test.areaTitle') }}</NText>
      <NFlex :size="8">
        <NButton 
          size="small" 
          quaternary 
          @click="emit('open-global-variables')"
        >
          <template #icon><span>📊</span></template>
          {{ $t('contextMode.actions.globalVariables') }}
        </NButton>
        <NButton 
          size="small" 
          quaternary 
          @click="emit('open-tool-manager')"
        >
          <template #icon><span>🔧</span></template>
          {{ $t('contextMode.actions.tools') }}
        </NButton>
      </NFlex>
    </div>

    <!-- 变量输入区 -->
    <div v-if="detectedVariables.length > 0" class="variable-inputs">
      <NAlert type="info" size="small" closable>
        <template #icon>💡</template>
        {{ $t('test.variableInputHint') }}
        <!-- "测试变量仅用于当前测试,刷新页面后会清空。如需保存,请添加到全局变量。" -->
      </NAlert>

      <div 
        v-for="varName in detectedVariables" 
        :key="varName"
        class="variable-input-row"
      >
        <!-- 变量名标签 -->
        <NTag size="small" :bordered="false">
          <template #icon>
            <span v-if="globalVariables[varName]">📊</span>
            <span v-else>🧪</span>
          </template>
          {{ `{{${varName}}}` }}
        </NTag>
        
        <!-- 变量值输入 -->
        <NInput
          :value="testVariables[varName] || ''"
          @update:value="handleVariableInput(varName, $event)"
          :placeholder="getPlaceholder(varName)"
          size="small"
        >
          <!-- 快速保存到全局变量 -->
          <template #suffix>
            <NTooltip v-if="testVariables[varName] && !globalVariables[varName]">
              <template #trigger>
                <NButton
                  text
                  size="tiny"
                  @click="saveToGlobal(varName)"
                >
                  📌
                </NButton>
              </template>
              {{ $t('test.saveToGlobal') }}
            </NTooltip>
            
            <!-- 显示使用全局变量 -->
            <NTag 
              v-else-if="!testVariables[varName] && globalVariables[varName]"
              size="tiny"
              type="info"
            >
              📊
            </NTag>
          </template>
        </NInput>
      </div>
    </div>

    <!-- 测试按钮区 -->
    <NButton @click="handleTest" type="primary" block>
      {{ $t('test.run') }}
    </NButton>
  </div>
</template>

<script setup lang="ts">
const getPlaceholder = (varName: string) => {
  if (globalVariables[varName]) {
    return `全局默认值: ${globalVariables[varName]}`
  }
  return $t('test.enterVariableValue')
}

const saveToGlobal = (varName: string) => {
  const value = testVariables.value[varName]
  if (!value) return
  
  emit('save-to-global', varName, value)
  window.$message?.success(
    $t('test.savedToGlobal', { name: varName })
  )
}
</script>

// TestAreaPanel.vue
const testVariables = ref<Record<string, string>>({})

const mergedVariables = computed(() => ({
  ...props.globalVariables,      // 全局变量 (低优先级)
  ...testVariables.value,        // 测试变量 (高优先级)
  ...props.predefinedVariables,  // 预定义变量 (最高优先级)
}))

const handleVariableInput = (varName: string, value: string) => {
  if (value && value.trim()) {
    testVariables.value[varName] = value
  } else {
    delete testVariables.value[varName]
  }
}

// useContextManagement.ts
// ❌ 删除
const currentContextVariables = computed(() => {
  return contextEditorState.value.variables || {}
})

// ❌ 删除
const updateContextVariable = async (name: string, value: string) => {
  // ...
}

// ❌ 删除
contextEditorState.value = {
  messages: [],
  tools: [],
  variables: {},  // ← 删除这个字段
}

// 测试时缓存变量值
const LAST_TEST_VARS_KEY = 'test.lastVariables'

const handleTest = () => {
  // 缓存当前测试变量
  try {
    localStorage.setItem(
      LAST_TEST_VARS_KEY, 
      JSON.stringify(testVariables.value)
    )
  } catch (e) {
    console.warn('Failed to cache test variables:', e)
  }
  
  // 执行测试...
}

// 组件挂载时尝试恢复
onMounted(() => {
  try {
    const cached = localStorage.getItem(LAST_TEST_VARS_KEY)
    if (cached) {
      testVariables.value = JSON.parse(cached)
    }
  } catch (e) {
    console.warn('Failed to restore test variables:', e)
  }
})

核心逻辑:
├── packages/ui/src/components/TestAreaPanel.vue          (新增测试变量逻辑)
├── packages/web/src/composables/useContextManagement.ts (移除会话变量)
├── packages/ui/src/components/ContextEditor.vue         (移除变量标签页)
└── packages/web/src/App.vue                             (更新变量合并逻辑)

UI组件:
├── packages/ui/src/components/context-mode/ContextUserWorkspace.vue    (移除会话变量按钮)
├── packages/ui/src/components/context-mode/ContextSystemWorkspace.vue  (移除会话变量按钮)
└── packages/ui/src/components/context-mode/ContextModeActions.vue      (可删除)

国际化:
├── packages/ui/src/i18n/locales/zh-CN.ts (新增测试变量相关文本)
├── packages/ui/src/i18n/locales/en-US.ts (新增测试变量相关文本)
└── packages/ui/src/i18n/locales/zh-TW.ts (新增测试变量相关文本)

新增代码: ~200 行 (测试变量实现)
删除代码: ~150 行 (会话变量移除)
修改代码: ~50 行  (变量合并逻辑)
净增代码: ~100 行