改造前:
┌────────────────────────────────────────────────────────┐
│ 📝 Prompt Optimizer | [基础|上下文|图像] | 📝📜⚙️... │
├────────────────────────────────────────────────────────┤
│ 工作区                                                 │
│ ┌────────────────────────────────────────────────────┐│
│ │ [系统提示词|用户提示词] [模型▾] [模板▾]           ││ ← 在这里
│ │ 输入框...                                          ││
│ └────────────────────────────────────────────────────┘│
└────────────────────────────────────────────────────────┘

改造后:
┌────────────────────────────────────────────────────────┐
│ 📝 Prompt Optimizer                                    │
│ [基础|上下文|图像] [系统提示词|用户提示词] 📝📜⚙️... │ ← 移到这里
├────────────────────────────────────────────────────────┤
│ 工作区                                                 │
│ ┌────────────────────────────────────────────────────┐│
│ │ 用户提示词输入 [模型▾] [模板▾]                    ││ ← 简洁清晰
│ │ 输入框...                                          ││
│ └────────────────────────────────────────────────────┘│
└────────────────────────────────────────────────────────┘

改造前:
┌────────────────────────┬───────────────────────────────┐
│ 左侧优化区             │ 右侧测试区                     │
│ ┌────────────────────┐│                               │
│ │📊📝🔧 快捷操作     ││ 测试内容...                   │
│ └────────────────────┘│                               │
│ ┌────────────────────┐│                               │
│ │ 提示词输入         ││                               │
│ └────────────────────┘│                               │
└────────────────────────┴───────────────────────────────┘

改造后:
┌────────────────────────┬───────────────────────────────┐
│ 左侧优化区             │ 右侧测试区                     │
│                        │ ┌───────────────────────────┐│
│ ┌────────────────────┐│ │ 测试 📊全局 📝会话 🔧工具 ││ ← 移到这里
│ │ 提示词输入         ││ └───────────────────────────┘│
│ │ (空间增加)         ││ ┌───────────────────────────┐│
│ └────────────────────┘│ │ 变量输入...               ││
│ ┌────────────────────┐│ │ 测试结果...               ││
│ │ 优化结果           ││ └───────────────────────────┘│
└────────────────────────┴───────────────────────────────┘

改造前:
┌─────────────────────────────────────────┐
│ 测试区                                   │
├─────────────────────────────────────────┤
│ [测试] [📊全局变量] [📝会话变量] [🔧工具] │
│         ↑ 困惑: 有什么区别?              │
├─────────────────────────────────────────┤

改造后:
┌─────────────────────────────────────────┐
│ 测试区                                   │
├─────────────────────────────────────────┤
│ [测试] [📊全局变量] [🔧工具管理]        │
│         ↑ 清晰: 永久保存的配置           │
├─────────────────────────────────────────┤
│ 变量输入 (临时,刷新丢失):               │
│ {{style}}    [欢快________] 📊          │
│              ↑ 测试输入    ↑ 使用全局值  │
│ {{topic}}    [写歌________]             │
├─────────────────────────────────────────┤
│ [▶ 测试]                                │
└─────────────────────────────────────────┘

packages/web/src/
└── App.vue                            # 添加子模式选择器到导航栏

packages/ui/src/components/
├── MainLayoutUI.vue                   # 优化导航栏布局（可选）
├── InputPanel.vue                     # 移除子模式选择器插槽
├── context-mode/
│   ├── ContextUserWorkspace.vue       # 移除快捷操作栏 + 添加测试区操作栏
│   ├── ContextSystemWorkspace.vue     # 移除快捷操作栏 + 添加测试区操作栏
│   └── ContextModeActions.vue         # 废弃或重构为测试区操作栏组件
└── TestAreaPanel.vue                  # 可选：添加 header-actions 插槽

docs/workspace/
├── ui-design-analysis.md              # 更新设计分析
└── ui-refactor-plan.md                # 本文档

<template>
  <MainLayoutUI>
    <!-- Core Navigation Slot -->
    <template #core-nav>
      <NSpace :size="12" align="center">
        <!-- 功能模式选择器 -->
        <FunctionModeSelector
          v-model="functionMode"
          @update:modelValue="handleModeSelect"
        />

        <!-- ✅ 新增：子模式选择器（仅上下文模式显示） -->
        <OptimizationModeSelector
          v-if="functionMode === 'pro'"
          v-model="selectedOptimizationMode"
          @change="handleOptimizationModeChange"
        />
      </NSpace>
    </template>

    <!-- Main Workspace -->
    <template #main>
      <template v-if="functionMode === 'pro'">
        <ContextSystemWorkspace
          v-if="selectedOptimizationMode === 'system'"
          ...
        >
          <!-- ❌ 移除子模式选择器插槽 -->
          <!-- <template #optimization-mode-selector>...</template> -->
        </ContextSystemWorkspace>

        <ContextUserWorkspace
          v-else-if="selectedOptimizationMode === 'user'"
          ...
        />
      </template>
    </template>
  </MainLayoutUI>
</template>

<script setup lang="ts">
import OptimizationModeSelector from '@/components/OptimizationModeSelector.vue';

// 新增状态管理
const handleModeSelect = (mode: 'basic' | 'pro' | 'image') => {
  functionMode.value = mode;
  
  // 切换到上下文模式时，默认为系统提示词
  if (mode === 'pro') {
    selectedOptimizationMode.value = 'system';
  }
};

const handleOptimizationModeChange = (mode: OptimizationMode) => {
  selectedOptimizationMode.value = mode;
  console.log('[App] Optimization mode changed to:', mode);
};
</script>

<template>
  <div class="input-panel">
    <NSpace justify="space-between" align="center">
      <NText strong>{{ label }}</NText>
      
      <NSpace :size="8">
        <!-- ❌ 移除子模式选择器插槽 -->
        <!-- <slot name="optimization-mode-selector"></slot> -->
        
        <!-- 保留模型和模板选择 -->
        <slot name="model-select"></slot>
        <slot name="template-select"></slot>
      </NSpace>
    </NSpace>
    
    <!-- 提示词输入区域 -->
    <NInput ... />
  </div>
</template>

<template>
  <NFlex justify="space-between">
    <NFlex vertical>
      <NCard>
        <InputPanelUI ...>
          <!-- ❌ 移除子模式选择器插槽 -->
          <template #model-select>...</template>
          <template #template-select>...</template>
        </InputPanelUI>
      </NCard>
      
      <NCard>
        <PromptPanelUI ... />
      </NCard>
    </NFlex>
    
    <NCard>
      <TestAreaPanel ... />
    </NCard>
  </NFlex>
</template>

<template>
  <NFlex justify="space-between" :style="{ width: '100%', height: '100%', gap: '16px' }">
    <!-- 左侧：优化区域 -->
    <NFlex vertical :style="{ flex: 1, overflow: 'auto', height: '100%' }">
      <!-- ❌ 移除原有的快捷操作栏 -->
      <!-- <NCard size="small">
        <ContextModeActions ... />
      </NCard> -->

      <!-- 提示词输入面板 -->
      <NCard :style="{ flexShrink: 0, minHeight: '200px' }">
        <InputPanelUI ... />
      </NCard>

      <!-- 优化结果面板 -->
      <NCard :style="{ flex: 1, minHeight: '200px', overflow: 'hidden' }">
        <PromptPanelUI ... />
      </NCard>
    </NFlex>

    <!-- 右侧：测试区域 -->
    <NFlex vertical :style="{ flex: 1, overflow: 'auto', height: '100%', gap: '12px' }">
      <!-- ✅ 新增：测试区操作栏 -->
      <NCard size="small" :style="{ flexShrink: 0 }">
        <NSpace justify="space-between" align="center">
          <!-- 左侧：区域标识 -->
          <NSpace align="center" :size="8">
            <NText strong>{{ t('test.areaTitle') }}</NText>
            <NTag :bordered="false" type="info" size="small">
              <template #icon><span>👤</span></template>
              {{ t('contextMode.user.label') }}
            </NTag>
            
            <!-- 缺失变量警告（可选） -->
            <NTag
              v-if="missingVariables.length > 0"
              type="warning"
              size="small"
            >
              <template #icon>
                <svg width="12" height="12">
                  <path d="M12 2L2 12M2 2l10 10" stroke="currentColor"/>
                </svg>
              </template>
              {{ missingVariables.length }} {{ t('variables.missing') }}
            </NTag>
          </NSpace>

          <!-- 右侧：变量管理快捷操作 -->
          <NSpace :size="8">
            <NButton
              size="small"
              quaternary
              @click="emit('open-global-variables')"
              :title="t('contextMode.actions.globalVariables')"
            >
              <template #icon><span>📊</span></template>
              <span v-if="!isMobile">
                {{ t('contextMode.actions.globalVariables') }}
              </span>
            </NButton>

            <NButton
              size="small"
              quaternary
              @click="emit('open-context-variables')"
              :title="t('contextMode.actions.contextVariables')"
            >
              <template #icon><span>📝</span></template>
              <span v-if="!isMobile">
                {{ t('contextMode.actions.contextVariables') }}
              </span>
            </NButton>

            <NButton
              size="small"
              quaternary
              @click="emit('open-tool-manager')"
              :title="t('contextMode.actions.tools')"
            >
              <template #icon><span>🔧</span></template>
              <span v-if="!isMobile">
                {{ t('contextMode.actions.tools') }}
              </span>
            </NButton>
          </NSpace>
        </NSpace>
      </NCard>

      <!-- 测试区主内容 -->
      <NCard :style="{ flex: 1, overflow: 'auto' }" content-style="height: 100%;">
        <TestAreaPanel ... />
      </NCard>
    </NFlex>
  </NFlex>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useBreakpoints } from '@vueuse/core';

const breakpoints = useBreakpoints({
  mobile: 0,
  tablet: 768,
  desktop: 1024,
});

const isMobile = breakpoints.smaller('tablet');

// 计算缺失变量
const missingVariables = computed(() => {
  // 从 props 中获取变量信息
  const allVars = new Set<string>();
  const providedVars = {
    ...props.globalVariables,
    ...props.contextVariables,
    ...props.predefinedVariables,
  };
  
  // 从 optimizedPrompt 中提取占位符
  const regex = /\{\{([^{}]+)\}\}/g;
  let match;
  while ((match = regex.exec(props.optimizedPrompt)) !== null) {
    allVars.add(match[1].trim());
  }
  
  // 找出缺失的变量
  return Array.from(allVars).filter(v => !providedVars[v]);
});
</script>

<template>
  <NFlex justify="space-between">
    <!-- 左侧：优化区域 -->
    <NFlex vertical>
      <!-- ❌ 移除快捷操作栏 -->
      
      <NCard><InputPanelUI ... /></NCard>
      <NCard><ConversationManager ... /></NCard>
      <NCard><PromptPanelUI ... /></NCard>
    </NFlex>

    <!-- 右侧：测试区域 -->
    <NFlex vertical :style="{ gap: '12px' }">
      <!-- ✅ 新增：测试区操作栏 -->
      <NCard size="small">
        <NSpace justify="space-between">
          <NSpace align="center">
            <NText strong>{{ t('test.areaTitle') }}</NText>
            <NTag type="info" size="small">
              <template #icon><span>⚙️</span></template>
              {{ t('contextMode.system.label') }}
            </NTag>
          </NSpace>

          <NSpace :size="8">
            <NButton size="small" quaternary @click="emit('open-global-variables')">
              <template #icon><span>📊</span></template>
              <span v-if="!isMobile">{{ t('contextMode.actions.globalVariables') }}</span>
            </NButton>
            
            <NButton size="small" quaternary @click="emit('open-context-variables')">
              <template #icon><span>📝</span></template>
              <span v-if="!isMobile">{{ t('contextMode.actions.contextVariables') }}</span>
            </NButton>
            
            <!-- 系统模式不显示工具管理按钮 -->
          </NSpace>
        </NSpace>
      </NCard>

      <!-- 测试区主内容 -->
      <NCard :style="{ flex: 1 }">
        <TestAreaPanel ... />
      </NCard>
    </NFlex>
  </NFlex>
</template>