┌────────────────────────────────────────────────────────┐
│ Prompt Optimizer | [基础|上下文|图像] | 📝📜⚙️...     │
├────────────────────────┬───────────────────────────────┤
│ [📊📝🔧]              │ 测试区                         │
│ ──────────────────────  │                               │
│ [系统|用户] [模型▾]    │                               │
│ 输入框...              │                               │
└────────────────────────┴───────────────────────────────┘
      ↑ 问题1: 层级混乱         ↑ 问题2: 操作距离远

┌────────────────────────────────────────────────────────┐
│ Prompt Optimizer                                       │
│ [基础|上下文|图像] [系统|用户] 📝📜⚙️...              │
│    ↑ 功能模式           ↑ 子模式（动态显示）           │
├────────────────────────┬───────────────────────────────┤
│ 优化区                 │ 测试区                         │
│                        │ ┌───────────────────────────┐ │
│ [模型▾] [模板▾]       │ │ 测试 📊全局 📝会话 🔧工具 │ │
│ 输入框...              │ └───────────────────────────┘ │
│ (空间增加)             │ 变量输入...                   │
└────────────────────────┴───────────────────────────────┘

App.vue (主应用)
├── ContextUserWorkspace.vue (用户模式工作区)
│   ├── ContextModeActions (快捷操作按钮)
│   ├── InputPanelUI (提示词输入)
│   ├── PromptPanelUI (优化结果)
│   └── TestAreaPanel (测试区域)
│
└── ContextSystemWorkspace.vue (系统模式工作区)
    ├── ContextModeActions (快捷操作按钮)
    ├── InputPanelUI (提示词输入)
    ├── ConversationManager (会话管理器) ← 系统模式专属
    ├── PromptPanelUI (优化结果)
    └── TestAreaPanel (测试区域)

共享组件:
├── ContextEditor.vue (上下文编辑器 - 模态框)
├── PromptPreviewPanel.vue (预览面板 - 模态框)
└── TestAreaPanel.vue (测试区域 - 复用)

packages/ui/src/components/
├── context-mode/
│   ├── ContextUserWorkspace.vue
│   ├── ContextSystemWorkspace.vue
│   ├── ContextModeActions.vue
│   ├── ContextEditor.vue
│   └── ConversationManager.vue
├── PromptPreviewPanel.vue
├── TestAreaPanel.vue
├── InputPanel.vue
└── PromptPanel.vue

packages/ui/src/composables/
└── usePromptPreview.ts

┌──────────────────────────────────────────────────────┐
│ 📊 全局变量  📝 会话变量  🔧 工具管理               │ ← 快捷操作
├──────────────────────────────────────────────────────┤
│ 左侧优化区                │ 右侧测试区              │
│ ┌─────────────────────┐  │ ┌──────────────────────┐│
│ │ 提示词输入面板       │  │ │ 变量值输入表单       ││
│ │ "写一首{{style}}的歌"│  │ │ style: [欢快____]   ││
│ └─────────────────────┘  │ └──────────────────────┘│
│ ┌─────────────────────┐  │ ┌──────────────────────┐│
│ │ 优化结果面板         │  │ │ 预览内容             ││
│ │ "请创作一首风格为    │  │ │ "请创作一首风格为    ││
│ │  {{style}}的歌..."  │  │ │  欢快的歌..."       ││
│ └─────────────────────┘  │ └──────────────────────┘│
│                          │ ┌──────────────────────┐│
│                          │ │ 测试结果             ││
│                          │ │ (LLM 响应)          ││
│                          │ └──────────────────────┘│
└──────────────────────────────────────────────────────┘

<!-- 用户模式工作区核心结构 -->
<template>
  <NFlex justify="space-between">
    <!-- 左侧优化区 -->
    <NFlex vertical>
      <!-- 快捷操作 (包含工具管理按钮) -->
      <NCard>
        <NButton @click="emit('open-global-variables')">📊</NButton>
        <NButton @click="emit('open-context-variables')">📝</NButton>
        <NButton @click="emit('open-tool-manager')">🔧</NButton>
      </NCard>
      
      <!-- 提示词输入 -->
      <NCard><InputPanelUI /></NCard>
      
      <!-- 无会话管理器 -->
      
      <!-- 优化结果 -->
      <NCard><PromptPanelUI /></NCard>
    </NFlex>
    
    <!-- 右侧测试区 -->
    <NCard>
      <TestAreaPanel 
        context-mode="user"
        :optimized-prompt="optimizedPrompt"
        :global-variables="globalVariables"
        :context-variables="contextVariables" />
    </NCard>
  </NFlex>
</template>

┌──────────────────────────────────────────────────────┐
│ 📊 全局变量  📝 会话变量                             │ ← 快捷操作
├──────────────────────────────────────────────────────┤
│ 左侧优化区                │ 右侧测试区              │
│ ┌─────────────────────┐  │ ┌──────────────────────┐│
│ │ 提示词输入面板       │  │ │ 变量值输入表单       ││
│ │ "优化以下对话..."   │  │ │ style: [欢快____]   ││
│ └─────────────────────┘  │ └──────────────────────┘│
│ ┌─────────────────────┐  │ ┌──────────────────────┐│
│ │ 会话管理器 [折叠]   │  │ │ 测试输入 (用户问题) ││
│ │ • system: 你是...   │  │ │ "请生成一首欢快的歌" ││
│ │ • user: {{style}}   │  │ └──────────────────────┘│
│ │ • assistant: ...    │  │ ┌──────────────────────┐│
│ │ [打开上下文编辑器]  │  │ │ 预览内容             ││
│ └─────────────────────┘  │ │ system: 你是歌曲创作 ││
│ ┌─────────────────────┐  │ │ user: 欢快          ││
│ │ 优化结果面板         │  │ └──────────────────────┘│
│ │ (优化后的对话上下文) │  │ ┌──────────────────────┐│
│ └─────────────────────┘  │ │ 测试结果             ││
│                          │ │ (LLM 响应)          ││
│                          │ └──────────────────────┘│
└──────────────────────────────────────────────────────┘

<!-- 系统模式工作区核心结构 -->
<template>
  <NFlex justify="space-between">
    <!-- 左侧优化区 -->
    <NFlex vertical>
      <!-- 快捷操作 (无工具管理按钮) -->
      <NCard>
        <NButton @click="emit('open-global-variables')">📊</NButton>
        <NButton @click="emit('open-context-variables')">📝</NButton>
      </NCard>
      
      <!-- 提示词输入 -->
      <NCard><InputPanelUI /></NCard>
      
      <!-- 会话管理器 (系统模式专属) -->
      <NCard>
        <ConversationManager
          :messages="optimizationContext"
          context-mode="system"
          @update:messages="emit('update:optimizationContext', $event)" />
      </NCard>
      
      <!-- 优化结果 -->
      <NCard><PromptPanelUI /></NCard>
    </NFlex>
    
    <!-- 右侧测试区 -->
    <NCard>
      <TestAreaPanel 
        context-mode="system"
        :test-content="testContent"
        :optimized-prompt="optimizedPrompt" />
    </NCard>
  </NFlex>
</template>

<template>
  <NFlex align="center" :wrap="false" :size="12">
    <!-- 全局变量 - 两种模式都显示 -->
    <NButton
      size="small"
      type="default"
      @click="$emit('open-global-variables')"
      :title="$t('contextMode.actions.globalVariables')"
    >
      <template #icon><span>📊</span></template>
      {{ $t('contextMode.actions.globalVariables') }}
    </NButton>

    <!-- 会话变量 - 两种模式都显示 -->
    <NButton
      size="small"
      @click="$emit('open-context-variables')"
    >
      <template #icon><span>📝</span></template>
      {{ $t('contextMode.actions.contextVariables') }}
    </NButton>

    <!-- 工具管理 - 仅用户模式显示 -->
    <NButton
      v-if="contextMode === 'user'"
      size="small"
      @click="$emit('open-tool-manager')"
    >
      <template #icon><span>🔧</span></template>
      {{ $t('contextMode.actions.tools') }}
    </NButton>
  </NFlex>
</template>

<script setup lang="ts">
import type { ContextMode } from '@prompt-optimizer/core'

defineProps<{
  contextMode: ContextMode
}>()

defineEmits<{
  'open-global-variables': []
  'open-context-variables': []
  'open-tool-manager': []
}>()
</script>

// 使用防抖减少频繁更新
const handleMessageUpdate = debounce(
  (index: number, message: ConversationMessage) => {
    const newMessages = [...props.messages];
    newMessages[index] = message;
    emit('update:messages', newMessages);
    emit('messageChange', index, message, 'update');
    recordUpdate();
  },
  150 // 150ms 平衡响应性和性能
);

// 批处理状态更新
const batchStateUpdate = batchExecute((updates: Array<() => void>) => {
  updates.forEach((update) => update());
  recordUpdate();
}, 16); // 16ms 匹配 60fps

const canEditMessages = computed(() => {
  // readonly 优先级最高
  if (props.readonly) return false;
  
  // 用户模式不允许编辑消息
  if (props.contextMode === 'user') return false;
  
  // 系统模式允许编辑
  return true;
});

<div class="cm-row">
  <!-- 角色标签 (小号，下拉选择) -->
  <NDropdown :options="roleOptions" @select="handleRoleSelect">
    <NTag :size="tagSize" clickable>
      {{ $t(`conversation.roles.${message.role}`) }}
    </NTag>
  </NDropdown>

  <!-- 内容输入，单行自增高 -->
  <div class="content">
    <NInput
      v-model="message.content"
      type="textarea"
      :autosize="{ minRows: 1, maxRows: 1 }"
      :resizable="false"
    />
  </div>

  <!-- 操作按钮 (hover 显示) -->
  <NSpace class="actions">
    <NButton @click="moveUp" quaternary circle />
    <NButton @click="moveDown" quaternary circle />
    <NButton @click="delete" quaternary circle type="error" />
  </NSpace>
</div>

<style scoped>
.cm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.cm-row .actions {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.cm-row:hover .actions {
  opacity: 1; /* Hover 时显示操作按钮 */
}

.cm-row .content {
  flex: 1 1 auto;
  min-width: 0;
}
</style>

当消息内容较长时:
system: "你是一个专业的歌曲创作助手，擅长创作各种风格的歌曲，包括流行、摇滚、民谣、说唱等..."

<script setup lang="ts">
const expandedRows = ref(new Set<number>());

const toggleExpand = (index: number) => {
  if (expandedRows.value.has(index)) {
    expandedRows.value.delete(index);
  } else {
    expandedRows.value.add(index);
  }
};
</script>

<template>
  <div class="cm-row" :class="{ 'expanded': expandedRows.has(index) }">
    <!-- 单行模式 -->
    <NInput
      v-if="!expandedRows.has(index)"
      :autosize="{ minRows: 1, maxRows: 1 }"
      @dblclick="toggleExpand(index)"
      placeholder="双击展开编辑"
    />
    
    <!-- 展开模式 -->
    <NInput
      v-else
      :autosize="{ minRows: 3, maxRows: 20 }"
      @blur="toggleExpand(index)"
    />
    
    <!-- 展开/折叠按钮 -->
    <NButton @click="toggleExpand(index)" quaternary circle>
      <template #icon>
        <svg v-if="!expandedRows.has(index)"><!-- 展开图标 --></svg>
        <svg v-else><!-- 折叠图标 --></svg>
      </template>
    </NButton>
  </div>
</template>

<NButton
  @click="emit('open-context-editor')"
  type="primary"
  :loading="loading"
>
  <template #icon>
    <svg><!-- 编辑图标 --></svg>
  </template>
  {{ $t('conversation.management.openEditor') }}
</NButton>

<NCard size="small" :title="$t('contextMode.preview.stats')">
  <NFlex :size="12" :wrap="true">
    <NTag :bordered="false" type="info">
      {{ $t('contextMode.preview.totalVars') }}: {{ variableStats.total }}
    </NTag>
    <NTag :bordered="false" type="success">
      {{ $t('contextMode.preview.providedVars') }}: {{ variableStats.provided }}
    </NTag>
    <NTag v-if="variableStats.missing > 0" :bordered="false" type="warning">
      {{ $t('contextMode.preview.missingVars') }}: {{ variableStats.missing }}
    </NTag>
  </NFlex>
</NCard>

<NCard
  v-if="hasMissingVariables"
  size="small"
  :title="$t('contextMode.preview.missingVarsWarning')"
>
  <NFlex :size="8" :wrap="true">
    <NTag
      v-for="varName in missingVariables"
      :key="varName"
      type="warning"
      :bordered="false"
    >
      <span v-text="`{{${varName}}}`"></span>
    </NTag>
  </NFlex>
  <template #footer>
    <NText depth="3">
      {{ $t('contextMode.preview.missingVarsHint') }}
    </NText>
  </template>
</NCard>

<NCard size="small" :title="$t('contextMode.preview.modeExplanation')">
  <NText depth="2">
    <template v-if="contextMode === 'user' && renderPhase === 'optimize'">
      {{ $t('contextMode.preview.userOptimizeHint') }}
      <!-- "用户优化模式：变量将在优化时保留，测试时替换为实际值" -->
    </template>
    <template v-else-if="contextMode === 'system' && renderPhase === 'optimize'">
      {{ $t('contextMode.preview.systemOptimizeHint') }}
      <!-- "系统优化模式：内置变量替换，自定义变量保留" -->
    </template>
    <template v-else>
      {{ $t('contextMode.preview.testPhaseHint') }}
      <!-- "测试阶段：所有变量替换为实际值" -->
    </template>
  </NText>
</NCard>

<!-- 缺失变量仅显示，无法快速操作 -->
<NTag v-for="varName in missingVariables" :key="varName" type="warning">
  {{{{ varName }}}}
</NTag>

<!-- 点击缺失变量快速创建/编辑 -->
<NTag
  v-for="varName in missingVariables"
  :key="varName"
  type="warning"
  clickable
  @click="handleQuickCreateVariable(varName)"
  :title="$t('contextMode.preview.clickToCreateVariable')"
>
  <span v-text="`{{${varName}}}`"></span>
</NTag>

<script setup lang="ts">
const emit = defineEmits<{
  'create-variable': [varName: string]
  'update:show': [value: boolean]
}>()

const handleQuickCreateVariable = (varName: string) => {
  // 方案1: 触发事件让父组件处理
  emit('create-variable', varName);
  
  // 方案2: 直接打开变量管理器并聚焦该变量
  // router.push({ name: 'variable-manager', query: { focus: varName } });
};
</script>

之前: 看到缺失变量 → 关闭预览 → 手动打开变量管理器 → 找到变量 → 编辑
现在: 看到缺失变量 → 点击 → 直接创建/编辑 ✅

/**
 * 渲染后的预览内容
 *
 * 简化版本：统一使用简单替换逻辑
 * 注意：这里使用简单的正则替换而不是 Mustache，因为：
 * 1. UI 预览不需要 Mustache 的条件渲染等高级特性
 * 2. 简单替换性能更好，适合实时预览
 * 3. 与后端 Mustache 行为一致（都会保留值中的占位符）
 */
const previewContent = computed(() => {
  if (!content.value) return "";

  try {
    const vars = variables.value || {};

    // 统一的变量替换逻辑
    const result = content.value.replace(
      /\{\{([^{}]+)\}\}/g,
      (match, varName) => {
        const trimmedName = varName.trim();

        // 跳过 Mustache 特殊标签 (#, /, ^, !, >, &)
        if (
          trimmedName.startsWith("#") ||
          trimmedName.startsWith("/") ||
          trimmedName.startsWith("^") ||
          trimmedName.startsWith("!") ||
          trimmedName.startsWith(">") ||
          trimmedName.startsWith("&")
        ) {
          return match;
        }

        // 如果变量存在且非空，替换；否则保留占位符
        if (vars[trimmedName] !== undefined && vars[trimmedName] !== "") {
          return vars[trimmedName];
        }
        return match;
      }
    );

    return result;
  } catch (error) {
    console.error("[usePromptPreview] Preview rendering failed:", error);
    return content.value;
  }
});

const variableStats = computed(() => ({
  total: parsedVariables.value.allVars.size,
  builtin: parsedVariables.value.builtinVars.size,
  custom: parsedVariables.value.customVars.size,
  missing: missingVariables.value.length,
  provided: parsedVariables.value.allVars.size - missingVariables.value.length,
}));

{{! 注释 }}
{{#if showTitle}}
  标题：{{title}}
{{/if}}

{{#each items}}
  - {{name}}: {{value}}
{{/each}}

/**
 * 提示词预览 Composable
 *
 * 用于实时计算提示词渲染结果并检测缺失变量
 *
 * ⚠️ 限制说明:
 * - 使用简单正则替换，不支持 Mustache 高级特性
 * - 不支持条件渲染 ({{#if}})、循环 ({{#each}})、部分模板 ({{>}})
 * - 仅用于基本变量预览，最终渲染以后端为准
 * - 如需完整 Mustache 渲染，请使用后端 API
 */

import Mustache from 'mustache';

const previewContent = computed(() => {
  try {
    // 使用 Mustache 完整渲染
    return Mustache.render(content.value, variables.value);
  } catch (error) {
    // 降级到简单替换
    return content.value.replace(/\{\{([^{}]+)\}\}/g, ...);
  }
});

graph TD
    A[用户输入提示词
'写一首{{style}}的歌'] --> B{点击优化}
    B --> C[AI 优化
保留 {{style}} 占位符]
    C --> D[优化结果显示
'请创作一首风格为{{style}}的歌...']
    D --> E[用户设置变量
style = '欢快']
    E --> F[实时预览更新
'请创作一首风格为欢快的歌...']
    F --> G{点击测试}
    G --> H[替换所有变量]
    H --> I[发送给 LLM]
    I --> J[显示测试结果]
    
    style C fill:#e1f5e1
    style F fill:#fff3cd
    style H fill:#f8d7da

graph TD
    A[编辑多条消息
system/user/assistant] --> B[设置会话变量
style = '欢快']
    B --> C{点击优化}
    C --> D[替换内置变量
保留自定义变量]
    D --> E[优化结果显示]
    E --> F[输入测试问题
'请生成一首歌']
    F --> G[实时预览更新
所有变量已替换]
    G --> H{点击测试}
    H --> I[替换所有变量
包括测试问题]
    I --> J[发送给 LLM]
    J --> K[显示测试结果]
    
    style D fill:#e1f5e1
    style G fill:#fff3cd
    style I fill:#f8d7da

// ConversationManager.vue
const canEditMessages = computed(() => {
  if (props.contextMode === 'user') return false; // 用户模式禁止编辑
  return true; // 系统模式允许
});

NCard: 主容器
NButton: 所有按钮
NTag: 标签、统计、角色标识
NInput: 文本输入
NDropdown: 角色选择、消息添加
NScrollbar: 滚动区域
NEmpty: 空状态提示

// 响应式配置
const buttonSize = computed(() => {
  const sizeMap = { small: 'tiny', medium: 'small', large: 'medium' };
  return sizeMap[props.size] || 'small';
});

// 移动端适配
<NGrid :cols="isMobile ? 1 : 2" :x-gap="12" :y-gap="12">

// 防抖
const handleMessageUpdate = debounce((index, message) => {
  emit('update:messages', newMessages);
}, 150);

// 批处理
const batchStateUpdate = batchExecute((updates) => {
  updates.forEach(update => update());
}, 16);

<NModal
  role="dialog"
  :aria-label="aria.getLabel('contextEditor')"
  :aria-describedby="aria.getDescription('contextEditor')"
  aria-modal="true"
>
  <NButton
    @click="addMessage"
    @keydown.enter="addMessage"
    @keydown.space.prevent="addMessage"
    :aria-label="aria.getLabel('addMessage')"
  />
</NModal>

// zh-CN.ts
export default {
  contextMode: {
    user: { label: '用户模式' },
    system: { label: '系统模式' },
    actions: {
      globalVariables: '全局变量',
      contextVariables: '会话变量',
      tools: '工具管理'
    }
  }
}

// 使用
<NTag>{{ $t('contextMode.user.label') }}</NTag>

<!-- ContextModeActions.vue -->
<NButton v-if="contextMode === 'user'" @click="emit('open-tool-manager')">
  🔧 工具管理
</NButton>

<NButton @click="emit('open-tool-manager')">
  🔧 工具管理
</NButton>

- 工具管理 - 仅用户模式显示 (系统模式通过上下文编辑器管理)

<NInput
  type="textarea"
  :autosize="{ minRows: 1, maxRows: 1 }"
  :resizable="false"
/>

<script setup lang="ts">
const expandedRows = ref(new Set<number>());

const toggleExpand = (index: number) => {
  if (expandedRows.value.has(index)) {
    expandedRows.value.delete(index);
  } else {
    expandedRows.value.add(index);
  }
};

// 自动保存并折叠
const handleBlur = (index: number) => {
  setTimeout(() => {
    expandedRows.value.delete(index);
  }, 200); // 延迟避免点击按钮时立即折叠
};
</script>

<template>
  <div class="cm-row" :class="{ 'expanded': expandedRows.has(index) }">
    <!-- 单行模式 (默认) -->
    <NInput
      v-if="!expandedRows.has(index)"
      :value="message.content"
      type="textarea"
      :autosize="{ minRows: 1, maxRows: 1 }"
      :resizable="false"
      @dblclick="toggleExpand(index)"
      :placeholder="$t('conversation.doubleClickToExpand')"
    />
    
    <!-- 展开模式 (编辑) -->
    <NInput
      v-else
      v-model="message.content"
      type="textarea"
      :autosize="{ minRows: 3, maxRows: 20 }"
      autofocus
      @blur="handleBlur(index)"
    />
    
    <!-- 展开/折叠按钮 -->
    <NButton
      @click="toggleExpand(index)"
      quaternary
      circle
      :title="expandedRows.has(index) ? $t('common.collapse') : $t('common.expand')"
    >
      <template #icon>
        <!-- 展开图标 ↓ -->
        <svg v-if="!expandedRows.has(index)" width="14" height="14">
          <path d="M7 10l5-5H2z" fill="currentColor"/>
        </svg>
        <!-- 折叠图标 ↑ -->
        <svg v-else width="14" height="14">
          <path d="M7 4l5 5H2z" fill="currentColor"/>
        </svg>
      </template>
    </NButton>
  </div>
</template>

<style scoped>
.cm-row {
  transition: all 0.2s ease;
}

.cm-row.expanded {
  background-color: var(--n-color-embedded);
  padding: 8px;
  border-radius: 4px;
}
</style>

当前: 单行显示，长文本被截断 ❌
      "你是一个专业的歌曲创作助手，擅长创作..." [横向滚动]

改进: 双击展开，3-20行自适应 ✅
      "你是一个专业的歌曲创作助手，擅长创作各种风格的歌曲，
       包括流行、摇滚、民谣、说唱等。你能够根据用户的需求，
       创作出优秀的歌词和旋律建议。"
       [失焦自动折叠]

用户看到缺失变量 → 关闭预览 → 手动打开变量管理器 → 找到变量 → 编辑

用户看到缺失变量 → 点击标签 → 直接创建/编辑 ✅

<!-- PromptPreviewPanel.vue -->
<template>
  <NCard v-if="hasMissingVariables">
    <NFlex :size="8" :wrap="true">
      <NTag
        v-for="varName in missingVariables"
        :key="varName"
        type="warning"
        clickable
        @click="handleQuickCreateVariable(varName)"
        class="cursor-pointer hover:scale-105 transition-transform"
      >
        <template #icon>
          <svg width="12" height="12" viewBox="0 0 24 24">
            <path d="M12 6v12m6-6H6" stroke="currentColor" stroke-width="2"/>
          </svg>
        </template>
        <span v-text="`{{${varName}}}`"></span>
      </NTag>
    </NFlex>
    
    <template #footer>
      <NText depth="3" :style="{ fontSize: '13px' }">
        💡 {{ $t('contextMode.preview.clickToCreateVariableHint') }}
      </NText>
    </template>
  </NCard>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  'create-variable': [varName: string]
  'update:show': [value: boolean]
}>()

const handleQuickCreateVariable = async (varName: string) => {
  // 触发创建变量事件
  emit('create-variable', varName);
  
  // 可选: 显示创建成功提示
  window.$message?.success(
    t('contextMode.preview.variableCreated', { name: varName })
  );
  
  // 可选: 关闭预览面板
  // emit('update:show', false);
};
</script>

<style scoped>
.cursor-pointer {
  cursor: pointer;
}
</style>

<!-- App.vue 或 ContextUserWorkspace.vue -->
<PromptPreviewPanel
  @create-variable="handleQuickCreateVariable"
/>

<script setup lang="ts">
const handleQuickCreateVariable = async (varName: string) => {
  // 方案1: 直接创建会话变量
  contextVariables.value[varName] = '';
  
  // 方案2: 打开变量管理器并聚焦
  showVariableManager.value = true;
  await nextTick();
  focusVariable(varName);
  
  // 方案3: 弹出快速输入框
  const value = await showPrompt({
    title: t('variables.quickCreate'),
    message: t('variables.enterValue', { name: varName }),
    placeholder: t('variables.valuePlaceholder')
  });
  if (value) {
    contextVariables.value[varName] = value;
  }
};
</script>

<!-- TestAreaPanel.vue - 变量输入表单 -->
<template>
  <NSpace vertical :size="12">
    <div
      v-for="varName in detectedVariables"
      :key="varName"
      class="variable-input-row"
    >
      <!-- 变量名标签 (带来源标识) -->
      <NTag
        :size="tagSize"
        :type="getVariableSourceType(varName)"
        :bordered="false"
        :style="{ minWidth: '120px', flexShrink: 0 }"
      >
        <!-- 来源图标 -->
        <template #icon>
          <svg v-if="isPredefinedVariable(varName)" width="12" height="12">
            <!-- 内置变量图标 (齿轮) -->
            <path d="M10.325 4.317c.426-1.756..." fill="currentColor"/>
          </svg>
          <svg v-else-if="isContextVariable(varName)" width="12" height="12">
            <!-- 会话变量图标 (文档) -->
            <path d="M9 2H5a2 2 0 00-2 2v12..." fill="currentColor"/>
          </svg>
          <svg v-else-if="isGlobalVariable(varName)" width="12" height="12">
            <!-- 全局变量图标 (地球) -->
            <circle cx="6" cy="6" r="5" stroke="currentColor"/>
          </svg>
        </template>
        
        <span v-text="`{{${varName}}}`"></span>
        
        <!-- 来源提示 -->
        <NTooltip>
          <template #trigger>
            <NIcon :size="12" style="margin-left: 4px;">
              <svg viewBox="0 0 24 24">
                <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>
              </svg>
            </NIcon>
          </template>
          <div class="variable-source-tooltip">
            <div>{{ $t('variables.source.label') }}: {{ getVariableSourceLabel(varName) }}</div>
            <div>{{ $t('variables.priority.label') }}: {{ getVariablePriority(varName) }}</div>
            <div v-if="getVariableValue(varName)" class="mt-1">
              {{ $t('variables.currentValue') }}: {{ getVariableValue(varName) }}
            </div>
          </div>
        </NTooltip>
      </NTag>
      
      <!-- 变量值输入 -->
      <NInput
        :value="getVariableDisplayValue(varName)"
        :placeholder="getVariablePlaceholder(varName)"
        :size="inputSize"
        :disabled="isPredefinedVariable(varName)"
        @update:value="handleVariableValueChange(varName, $event)"
      >
        <template v-if="!isPredefinedVariable(varName)" #suffix>
          <NButton
            text
            @click="handleClearVariable(varName)"
            :title="$t('common.clear')"
          >
            <template #icon>
              <svg width="14" height="14" viewBox="0 0 24 24">
                <path d="M6 18L18 6M6 6l12 12" stroke="currentColor"/>
              </svg>
            </template>
          </NButton>
        </template>
      </NInput>
    </div>
  </NSpace>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const getVariableSourceType = (varName: string) => {
  if (props.predefinedVariables[varName] !== undefined) return 'info';      // 内置 - 蓝色
  if (props.contextVariables[varName] !== undefined) return 'success';      // 会话 - 绿色
  if (props.globalVariables[varName] !== undefined) return 'warning';       // 全局 - 橙色
  return 'default';                                                         // 未定义 - 灰色
};

const getVariableSourceLabel = (varName: string) => {
  if (props.predefinedVariables[varName] !== undefined) return t('variables.source.predefined');
  if (props.contextVariables[varName] !== undefined) return t('variables.source.context');
  if (props.globalVariables[varName] !== undefined) return t('variables.source.global');
  return t('variables.source.missing');
};

const getVariablePriority = (varName: string) => {
  if (props.predefinedVariables[varName] !== undefined) return t('variables.priority.highest');
  if (props.contextVariables[varName] !== undefined) return t('variables.priority.medium');
  if (props.globalVariables[varName] !== undefined) return t('variables.priority.lowest');
  return '-';
};

const isPredefinedVariable = (varName: string) => {
  return props.predefinedVariables[varName] !== undefined;
};

const isContextVariable = (varName: string) => {
  return props.contextVariables[varName] !== undefined && 
         props.predefinedVariables[varName] === undefined;
};

const isGlobalVariable = (varName: string) => {
  return props.globalVariables[varName] !== undefined && 
         props.contextVariables[varName] === undefined &&
         props.predefinedVariables[varName] === undefined;
};
</script>

<style scoped>
.variable-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.variable-source-tooltip {
  font-size: 13px;
  line-height: 1.6;
}

.mt-1 {
  margin-top: 4px;
}
</style>

🔧 {{originalPrompt}}      [内置 - 蓝色标签] (不可编辑)
📄 {{style}}               [会话 - 绿色标签] [欢快_____] [×]
🌍 {{tone}}                [全局 - 橙色标签] [正式_____] [×]
⚠️ {{genre}}               [缺失 - 灰色标签] [_________] [×]

鼠标悬停显示:
┌─────────────────────┐
│ 来源: 会话变量      │
│ 优先级: 中          │
│ 当前值: 欢快        │
└─────────────────────┘

<!-- TestAreaPanel.vue -->
<template>
  <NAutoComplete
    v-model="variableValues[varName]"
    :options="getVariableHistorySuggestions(varName)"
    :placeholder="getSmartPlaceholder(varName)"
    :size="inputSize"
    @update:value="handleVariableValueChange(varName, $event)"
  />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { AutoCompleteOption } from 'naive-ui';

// 变量历史记录存储 (localStorage)
const VARIABLE_HISTORY_KEY = 'prompt-optimizer:variable-history';

const variableHistory = ref<Record<string, string[]>>({});

// 加载历史记录
onMounted(() => {
  try {
    const stored = localStorage.getItem(VARIABLE_HISTORY_KEY);
    if (stored) {
      variableHistory.value = JSON.parse(stored);
    }
  } catch (error) {
    console.error('Failed to load variable history:', error);
  }
});

// 保存历史记录
const saveVariableHistory = (varName: string, value: string) => {
  if (!value || value.trim() === '') return;
  
  // 获取当前变量的历史记录
  const history = variableHistory.value[varName] || [];
  
  // 去重并添加到开头
  const filtered = history.filter(v => v !== value);
  const updated = [value, ...filtered].slice(0, 10); // 最多保留10条
  
  // 更新记录
  variableHistory.value[varName] = updated;
  
  // 持久化
  try {
    localStorage.setItem(
      VARIABLE_HISTORY_KEY,
      JSON.stringify(variableHistory.value)
    );
  } catch (error) {
    console.error('Failed to save variable history:', error);
  }
};

// 获取变量历史建议
const getVariableHistorySuggestions = (varName: string): AutoCompleteOption[] => {
  const history = variableHistory.value[varName] || [];
  
  return history.map((value, index) => ({
    label: value,
    value: value,
    // 显示使用频率
    extra: index === 0 ? t('variables.history.recent') : undefined
  }));
};

// 智能占位符
const getSmartPlaceholder = (varName: string): string => {
  // 1. 检查是否有历史记录
  const history = variableHistory.value[varName];
  if (history && history.length > 0) {
    return t('variables.placeholder.withHistory', { example: history[0] });
  }
  
  // 2. 根据变量名推测类型
  if (varName.includes('style') || varName.includes('风格')) {
    return t('variables.placeholder.style'); // "如：流行、摇滚、民谣..."
  }
  if (varName.includes('tone') || varName.includes('语气')) {
    return t('variables.placeholder.tone'); // "如：正式、轻松、幽默..."
  }
  if (varName.includes('language') || varName.includes('语言')) {
    return t('variables.placeholder.language'); // "如：中文、英文、日语..."
  }
  
  // 3. 默认占位符
  return t('variables.placeholder.default'); // "请输入变量值"
};

// 处理变量值变化
const handleVariableValueChange = (varName: string, value: string) => {
  // 保存到历史记录
  saveVariableHistory(varName, value);
  
  // 触发更新事件
  emit('variable-change', varName, value);
};
</script>

输入框获得焦点时:
┌─────────────────────────┐
│ {{style}}               │
│ ┌─────────────────────┐ │
│ │ 欢快 (最近使用)     ↓│ │
│ ├─────────────────────┤ │
│ │ 流行                │ │
│ │ 摇滚                │ │
│ │ 民谣                │ │
│ └─────────────────────┘ │
└─────────────────────────┘

智能占位符:
- 有历史: "上次输入：欢快"
- 无历史: "如：流行、摇滚、民谣..."

packages/ui/src/components/
├── context-mode/
│   ├── ContextUserWorkspace.vue       (240 行)
│   ├── ContextSystemWorkspace.vue     (280 行)
│   ├── ContextModeActions.vue         (50 行)
│   ├── ContextEditor.vue              (844+ 行)
│   └── ConversationManager.vue        (520 行)
├── PromptPreviewPanel.vue             (120 行)
├── TestAreaPanel.vue                  (100+ 行)
├── InputPanel.vue                     (150+ 行)
└── PromptPanel.vue                    (200+ 行)

packages/ui/src/composables/
└── usePromptPreview.ts                (180 行)

// 内置预定义变量
const PREDEFINED_VARIABLES = [
  'originalPrompt',
  'lastOptimizedPrompt',
  'iterateInput',
  'currentPrompt',
  'userQuestion',
  'conversationContext',
  'toolsContext'
];

// 变量来源类型
type VariableSource = 'predefined' | 'context' | 'global' | 'missing';

// 上下文模式
type ContextMode = 'user' | 'system';

// 渲染阶段
type RenderPhase = 'optimize' | 'test';

// 需要补充的 i18n keys
const I18N_KEYS = {
  contextMode: {
    actions: {
      globalVariables: '全局变量',
      contextVariables: '会话变量',
      tools: '工具管理'
    },
    preview: {
      title: '预览',
      stats: '变量统计',
      totalVars: '变量总数',
      providedVars: '已提供',
      missingVars: '缺失',
      clickToCreateVariableHint: '点击变量标签快速创建'
    }
  },
  variables: {
    source: {
      predefined: '内置变量',
      context: '会话变量',
      global: '全局变量',
      missing: '未定义'
    },
    priority: {
      highest: '最高',
      medium: '中',
      lowest: '最低'
    },
    placeholder: {
      style: '如：流行、摇滚、民谣...',
      tone: '如：正式、轻松、幽默...',
      language: '如：中文、英文、日语...',
      default: '请输入变量值'
    }
  }
};

// 性能目标
const PERFORMANCE_TARGETS = {
  variableMerge: 5,        // 变量合并 < 5ms
  previewRender: 50,       // 预览渲染 < 50ms
  messageUpdate: 150,      // 消息更新防抖 150ms
  batchUpdate: 16,         // 批处理 16ms (60fps)
  maxVariables: 100,       // 最大变量数
  maxMessages: 50          // 最大消息数
};