导航栏优化架构
├── 布局层
│   ├── 布局锚点策略 (高级模式按钮固定)
│   ├── 功能分区设计 (核心区 + 辅助区)
│   └── 响应式容器 (NSpace with wrap)
├── 组件层  
│   ├── ActionButtonUI (统一按钮组件)
│   ├── LanguageSwitchDropdown (新语言切换)
│   └── ThemeToggleUI (主题切换复用)
├── 服务层
│   ├── 偏好设置服务 (语言持久化)
│   └── i18n服务 (多语言支持)
└── 架构层
    ├── App.vue统一设计 (跨包复用)
    └── 组件导出清理 (废弃组件移除)

<!-- 问题代码：条件渲染导致布局不稳定 -->
<ActionButtonUI v-if="advancedModeEnabled" icon="📊" text="变量管理" />
<ActionButtonUI icon="🚀" text="高级模式" />

<!-- 解决方案：锚点按钮策略 -->
<!-- 变量管理按钮：条件显示，但放在锚点前 -->
<ActionButtonUI
  v-if="advancedModeEnabled"
  icon="📊"
  :text="$t('nav.variableManager')"
  @click="openVariableManager"
/>

<!-- 高级模式按钮：始终显示，作为布局锚点 -->
<ActionButtonUI
  icon="🚀"
  :text="$t('nav.advancedMode')"
  @click="toggleAdvancedMode"
  :class="{ 'active-button': advancedModeEnabled }"
/>

<!-- 问题代码：混合使用不同组件 -->
<ActionButtonUI type="default" size="medium" />
<NButton>GitHub</NButton>  <!-- 样式不一致 -->
<ThemeToggleUI />  <!-- 视觉权重不协调 -->

<!-- 核心功能区：标准按钮样式 -->
<ActionButtonUI
  icon="📝"
  :text="$t('nav.templates')"
  type="default"      <!-- 统一类型 -->
  size="medium"       <!-- 统一尺寸 -->
  :ghost="false"      <!-- 统一透明度 -->
  :round="true"       <!-- 统一圆角 -->
/>

<!-- 辅助功能区：简化样式 -->
<ActionButtonUI
  icon=""
  text=""
  type="quaternary"   <!-- 降低视觉权重 -->
  size="small"        <!-- 较小尺寸 -->
  :ghost="true"       <!-- 透明背景 -->
>
  <template #icon>
    <svg><!-- GitHub图标 --></svg>
  </template>
</ActionButtonUI>

<!-- 问题代码：简单按钮切换 -->
<NButton @click="toggleLanguage">
  {{ currentLanguage === 'zh-CN' ? '中' : 'En' }}
</NButton>

<!-- components/LanguageSwitchDropdown.vue -->
<template>
  <NDropdown 
    :options="languageOptions"
    @select="handleLanguageSelect"
  >
    <NButton quaternary>
      <template #icon>
        <span class="text-lg">🌐</span>
      </template>
    </NButton>
  </NDropdown>
</template>

<script setup lang="ts">
// 可扩展的语言配置
const languageOptions = computed(() => [
  { key: 'zh-CN', label: '简体中文' },
  { key: 'en-US', label: 'English' }
  // 未来可轻松添加更多语言
])

// 集成偏好设置服务
const handleLanguageSelect = async (key: string) => {
  try {
    // 更新i18n
    setLocale(key)
    // 持久化保存
    await preferences?.setLanguage(key)
  } catch (error) {
    console.error('Language switch failed:', error)
  }
}
</script>

# 文件创建
touch packages/ui/src/components/LanguageSwitchDropdown.vue

# 组件实现要点
- 基于ThemeToggleUI模式设计
- 使用NButton + NDropdown架构
- 集成vue-i18n语言切换逻辑

// packages/ui/src/index.ts
export { default as LanguageSwitchDropdown } from './components/LanguageSwitchDropdown.vue'
// 保持LanguageSwitch向后兼容（标记deprecated）

// 在组件中集成偏好设置服务
const preferences = inject('preferenceService')
await preferences?.setLanguage(newLanguage)

<!-- 原始布局问题分析 -->
现有问题：
1. 条件渲染导致位置不稳定
2. 按钮顺序不符合用户认知习惯
3. 缺乏功能重要性的视觉区分

<!-- 优化后的布局设计 -->
核心功能区（左侧）：
[变量管理*] [🚀高级模式] [📝模板] [📜历史] [⚙️模型] [💾数据]

辅助功能区（右侧）：
[🎨主题] [GitHub] [🌐语言] [🔄更新*]

注：*表示条件显示

<!-- 关键实现：高级模式按钮作为锚点 -->
<ActionButtonUI
  icon="🚀"
  :text="$t('nav.advancedMode')"
  @click="toggleAdvancedMode"
  :class="{ 'active-button': advancedModeEnabled }"
  type="default"
  size="medium"
  :ghost="false"
  :round="true"
/>
<!-- 始终渲染，确保布局稳定 -->

// ActionButton组件内置响应式特性
// 自动应用max-md:hidden类隐藏文字
// 小屏幕下仅显示图标，大屏幕显示完整按钮

<NSpace 
  :size="[8, 4]"      // 水平8px，垂直4px间距
  align="center"       // 垂直居中对齐
  wrap                 // 允许换行避免溢出
>
  <!-- 导航按钮 -->
</NSpace>

# 关键决策：Extension使用Web的App.vue
cp packages/web/src/App.vue packages/extension/src/App.vue
# 实现"一码多端"架构

# 删除废弃组件
rm packages/ui/src/components/AdvancedModeToggle.vue
rm packages/ui/src/components/LanguageSwitch.vue

# 更新导出配置
# packages/ui/src/index.ts - 移除废弃组件导出

// ActionButton.vue
interface Props {
  type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'quaternary'
  // 添加quaternary支持
}

/* 问题：currentColor覆盖了图标颜色 */
.icon {
  color: currentColor;  /* 导致主题图标失去颜色 */
}

<template>
  <NIcon :style="iconStyle">
    <component :is="themeIcon" />
  </NIcon>
</template>

<script>
const iconStyle = computed(() => ({
  color: isColored ? '#eab308' : undefined  // 直接样式属性
}))
</script>

// 原始问题代码（复杂）
const result = await page.evaluate(() => {
  const buttons = Array.from(document.querySelectorAll('[data-button-type]'))
  return buttons.map(btn => ({ /* 复杂对象构建 */ }))
})

// 简化解决方案
const result = await page.evaluate(() => {
  return document.querySelectorAll('[data-button-type]').length
})

// 测试脚本核心逻辑
test('模式切换时按钮位置保持稳定', async ({ page }) => {
  // 1. 记录高级模式按钮初始位置
  const initialPosition = await page.locator('[data-testid="advanced-mode"]').boundingBox()
  
  // 2. 切换到高级模式
  await page.locator('[data-testid="advanced-mode"]').click()
  
  // 3. 验证按钮位置未变化
  const newPosition = await page.locator('[data-testid="advanced-mode"]').boundingBox()
  expect(newPosition.x).toBe(initialPosition.x)
  expect(newPosition.y).toBe(initialPosition.y)
})

interface LanguageOption {
  key: string        // locale代码 (e.g., 'zh-CN')
  label: string      // 显示名称 (e.g., '简体中文')
  flag?: string      // 可选的国旗图标
}