// ✅ 正确的扩展方式
interface OptimizationRequest {
  // 现有字段保持不变
  optimizationMode: OptimizationMode;
  targetPrompt: string;
  
  // 新功能作为可选字段
  advancedContext?: {
    variables?: Record<string, string>;
    messages?: ConversationMessage[];
  };
}

// ❌ 错误的方式：创建新接口
interface AdvancedOptimizationRequest extends OptimizationRequest {
  // 这会破坏现有代码
}

<!-- 高级模式按钮 - 始终可见，引导用户发现 -->
<ActionButtonUI
  icon="🚀"
  :text="$t('nav.advancedMode')"
  @click="toggleAdvancedMode"
  :class="{ 'active-button': advancedModeEnabled }"
/>

<!-- 变量管理按钮 - 仅在高级模式下显示 -->
<ActionButtonUI
  v-if="advancedModeEnabled"
  icon="📊"
  :text="$t('nav.variableManager')"
  @click="showVariableManager = true"
/>

// 统一的工具调用结果格式
export interface ToolCall {
  id: string;
  type: 'function';
  function: {
    name: string;
    arguments: string;
  };
}

// OpenAI直接映射
const openaiToolCall = chunk.choices[0]?.delta?.tool_calls?.[0];

// Gemini需要转换
const geminiToolCall: ToolCall = {
  id: `call_${Date.now()}`,
  type: 'function' as const,
  function: {
    name: functionCall.name,
    arguments: JSON.stringify(functionCall.args)
  }
};

// ✅ 推荐的状态管理方式
export function useVariableManager() {
  const customVariables = ref<Record<string, string>>({});
  
  // 响应式计算属性
  const allVariables = computed(() => {
    return { ...predefinedVariables.value, ...customVariables.value };
  });
  
  // 方法封装
  const setVariable = (name: string, value: string) => {
    customVariables.value[name] = value;
    saveToStorage(); // 自动持久化
  };
  
  return { allVariables, setVariable };
}

// 问题：string类型不能赋值给字面量类型
const toolCall = {
  type: 'function'  // TypeScript推断为string
};

// 解决方案1：使用as const断言
const toolCall = {
  type: 'function' as const  // 推断为'function'
};

// 解决方案2：显式类型声明
const toolCall: ToolCall = {
  type: 'function'  // 符合ToolCall类型定义
};

// App.vue 创建统一实例
const variableManager = new VariableManager();

// 子组件优先使用传入实例
const activeVariableManager = computed(() => {
  return props.variableManager || localVariableManager;
});

<!-- ❌ 硬编码样式 -->
<div class="bg-white dark:bg-gray-800 border rounded-lg p-4">

<!-- ✅ 使用主题系统 -->
<div class="theme-manager-card theme-manager-padding">

// ❌ 不要过早抽象
interface BasicRequest { /* ... */ }
interface AdvancedRequest { /* ... */ }
interface SuperAdvancedRequest { /* ... */ }

// ✅ 渐进式扩展
interface Request {
  // 核心字段
  basic: string;
  // 第一次扩展
  advanced?: AdvancedOptions;
  // 第二次扩展  
  superAdvanced?: SuperAdvancedOptions;
}

<!-- ❌ 避免深层传递 -->
<GrandParent>
  <Parent :data="data">
    <Child :data="data">
      <GrandChild :data="data" />
    </Child>
  </Parent>
</GrandParent>

// ✅ 通过服务层通信
const variableService = inject('variableService');
// 任何组件都可以直接使用服务

// 功能完成后的性能优化
const debouncedSave = debounce(saveVariables, 300);
const virtualizedList = useVirtualList(largeVariableList);

describe('VariableManager', () => {
  it('should handle invalid variable names', () => {
    // 测试特殊字符、空字符串、保留字等
  });
  
  it('should recover from storage corruption', () => {
    // 测试存储数据损坏的恢复机制
  });
});

// UI层：变量管理UI逻辑
export class VariableManagerUI {
  private customVariables = ref({});
  
  // UI相关方法：验证、格式化、本地存储
  validateAndSave(name: string, value: string) { /* ... */ }
}

// Core层：模板处理逻辑
export class TemplateProcessor {
  // 纯业务逻辑：变量替换、模板渲染
  replaceVariables(template: string, variables: Record<string, string>) { /* ... */ }
}

export interface IVariableProvider {
  getVariables(): Record<string, string>;
}

export class VariableManager {
  private providers: IVariableProvider[] = [];
  
  // 支持插件注册
  addProvider(provider: IVariableProvider) {
    this.providers.push(provider);
  }
}

// 层次1：业务逻辑错误
class VariableValidationError extends Error {
  constructor(variableName: string) {
    super(`Invalid variable name: ${variableName}`);
  }
}

// 层次2：系统级错误  
class StorageError extends Error {
  constructor(operation: string) {
    super(`Storage ${operation} failed`);
  }
}

// 层次3：用户友好提示
const handleError = (error: Error) => {
  if (error instanceof VariableValidationError) {
    toast.warning('变量名格式不正确');
  } else {
    toast.error('操作失败，请重试');
  }
};

// 传统方式：用户手动配置测试环境
// 创新方式：智能模板生成
if (optimizationMode === 'system') {
  // 系统提示词：创建系统+用户消息对
  conversationMessages = [
    { role: 'system', content: '{{currentPrompt}}' },
    { role: 'user', content: '请展示你的能力并与我互动' }
  ];
} else {
  // 用户提示词：创建用户消息
  conversationMessages = [
    { role: 'user', content: '{{currentPrompt}}' }
  ];
}

// 变量：用于内容模板化
const variables = { userName: 'Alice', task: 'coding' };
const template = 'Hello {{userName}}, let\'s start {{task}}';

// 工具：用于LLM功能调用
const tools = [{ 
  function: { name: 'get_weather', parameters: { ... } }
}];

const featureVisibility = computed(() => ({
  basicMode: true,
  advancedMode: advancedModeEnabled.value,
  variableManager: advancedModeEnabled.value,
  toolManager: advancedModeEnabled.value && hasTools.value
}));