原始架构                    扩展后架构
┌─────────────┐           ┌─────────────────────────────────┐
│ BasicTestPanel │    →     │ AdvancedTestPanel (主组件)      │
└─────────────┘           │ ├── BasicTestMode               │
                          │ ├── ConversationManager         │
                          │ ├── VariableManagerModal        │
                          │ └── ToolManager                 │
                          └─────────────────────────────────┘

export class VariableManager implements IVariableManager {
  private customVariables: Record<string, string> = {};
  private readonly predefinedVariables = [
    'originalPrompt', 
    'lastOptimizedPrompt', 
    'iterateInput',
    'currentPrompt'  // 新增：测试阶段使用
  ];
  
  // 变量CRUD操作
  setVariable(name: string, value: string): void {
    if (!this.validateVariableName(name)) {
      throw new Error(`Invalid variable name: ${name}`);
    }
    this.customVariables[name] = value;
    this.saveCustomVariables();
  }
  
  // 解析所有变量（预定义 + 自定义）
  resolveAllVariables(context: TemplateContext): Record<string, string> {
    const predefinedVars = this.extractPredefinedVariables(context);
    return { ...predefinedVars, ...this.customVariables };
  }
}

export function useConversationManager() {
  const messages = ref<ConversationMessage[]>([]);
  
  // 检测缺失变量
  const getMissingVariables = (content: string): string[] => {
    const referencedVars = variableManager.scanVariablesInContent(content);
    const availableVars = Object.keys(variableManager.listVariables());
    return referencedVars.filter(variable => !availableVars.includes(variable));
  };
  
  // 预览消息（变量替换后）
  const previewMessages = (variables: Record<string, string>): ConversationMessage[] => {
    return messages.value.map(message => ({
      ...message,
      content: replaceVariables(message.content, variables)
    }));
  };
}

<!-- MainLayout导航菜单集成 -->
<div class="navigation-actions">
  <!-- 高级模式导航按钮 -->
  <ActionButtonUI
    icon="🚀"
    :text="$t('nav.advancedMode')"
    @click="toggleAdvancedMode"
    :class="{ 'active-button': advancedModeEnabled }"
  />
  
  <!-- 变量管理按钮 - 仅在高级模式下显示 -->
  <ActionButtonUI
    v-if="advancedModeEnabled"
    icon="📊"
    :text="$t('nav.variableManager')"
    @click="showVariableManager = true"
  />
</div>

export interface ToolCall {
  id: string;
  type: 'function';
  function: {
    name: string;
    arguments: string;
  };
}

export interface StreamHandlers {
  onToken: (token: string) => void;
  onReasoningToken?: (token: string) => void;
  onToolCall?: (toolCall: ToolCall) => void;  // 新增
  onComplete: (response?: LLMResponse) => void;
  onError: (error: Error) => void;
}

async streamOpenAIMessageWithTools(
  messages: Message[],
  modelConfig: ModelConfig,
  tools: ToolDefinition[],
  callbacks: StreamHandlers
): Promise<void> {
  const completionConfig: any = {
    model: modelConfig.defaultModel,
    messages: formattedMessages,
    tools: tools,
    tool_choice: 'auto',
    stream: true,
    ...restLlmParams
  };
  
  // 处理工具调用delta
  const toolCallDeltas = chunk.choices[0]?.delta?.tool_calls;
  if (toolCallDeltas) {
    for (const toolCallDelta of toolCallDeltas) {
      // delta处理逻辑
      if (callbacks.onToolCall) {
        callbacks.onToolCall(currentToolCall);
      }
    }
  }
}

async streamGeminiMessageWithTools(
  messages: Message[],
  modelConfig: ModelConfig,
  tools: ToolDefinition[],
  callbacks: StreamHandlers
): Promise<void> {
  // 转换工具格式为Gemini标准
  const geminiTools = this.convertToGeminiTools(tools);
  
  // 处理Gemini工具调用
  const functionCalls = chunk.functionCalls();
  if (functionCalls && functionCalls.length > 0) {
    for (const functionCall of functionCalls) {
      const toolCall: ToolCall = {
        id: `call_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
        type: 'function' as const,
        function: {
          name: functionCall.name,
          arguments: JSON.stringify(functionCall.args)
        }
      };
      
      if (callbacks.onToolCall) {
        callbacks.onToolCall(toolCall);
      }
    }
  }
}

const variableManager: Ref<VariableManagerHooks | null> = computed(() => {
  if (props.variableManager) {
    return props.variableManager  // 使用App.vue传入的统一实例
  }
  return localVariableManager      // 后备方案
})

const toolCall: ToolCall = {
  id: `call_${Date.now()}`,
  type: 'function' as const,  // 添加 as const 断言
  function: {
    name: functionCall.name,
    arguments: JSON.stringify(functionCall.args)
  }
};

<div class="add-message-row theme-manager-card">
  <button class="add-message-btn theme-manager-button-secondary">
    添加消息
  </button>
</div>

const applyOptimizedPromptToTest = (optimizationData: {
  originalPrompt: string
  optimizedPrompt: string
  optimizationMode: string
}) => {
  if (optimizationData.optimizationMode === 'system') {
    // 系统提示词优化：系统消息 + 用户交互消息
    conversationMessages.value = [
      { role: 'system', content: '{{currentPrompt}}' },
      { role: 'user', content: '请按照你的角色设定，展示你的能力并与我互动。' }
    ]
  } else {
    // 用户提示词优化：仅用户消息
    conversationMessages.value = [
      { role: 'user', content: '{{currentPrompt}}' }
    ]
  }
}

ContextEditor (工具创建和管理)
      ↓ 
ConversationManager (工具统计和同步)
      ↓
AdvancedTestPanel (工具调用测试)