pnpm add @prompt-optimizer/ui @prompt-optimizer/core naive-ui

import { createApp } from 'vue'
import { installI18n } from '@prompt-optimizer/ui'
import App from './App.vue'

const app = createApp(App)

// 安装国际化
installI18n(app)

app.mount('#app')

<template>
  <NConfigProvider :theme="naiveTheme" :theme-overrides="themeOverrides">
    <NMessageProvider>
      <YourApp />
    </NMessageProvider>
  </NConfigProvider>
</template>

<script setup>
import { NConfigProvider, NMessageProvider } from 'naive-ui'
import { useNaiveTheme } from '@prompt-optimizer/ui'

const { naiveTheme, themeOverrides } = useNaiveTheme()
</script>

<template>
  <TestAreaPanel
    :optimization-mode="optimizationMode"
    :is-test-running="isTestRunning"
    :test-content="testContent"
    :is-compare-mode="isCompareMode"
    @update:test-content="testContent = $event"
    @compare-toggle="handleCompareToggle"
    @test="handleTest"
  >
    <template #model-select>
      <SelectWithConfig
        v-model="selectedModel"
        :options="modelOptions"
        :getPrimary="(o) => o.label"
        :getValue="(o) => o.value"
      />
    </template>
  </TestAreaPanel>
</template>

<template>
  <!-- 模型选择器 -->
  <SelectWithConfig
    v-model="selectedModel"
    :options="modelOptions"
    :getPrimary="(o) => o.label"
    :getValue="(o) => o.value"
  />
  
  <!-- 模型管理器 -->
  <ModelManagerUI @model-updated="handleModelUpdate" />
</template>

<template>
  <!-- 模板选择器 -->
  <TemplateSelectUI v-model="selectedTemplate" />
  
  <!-- 模板管理器 -->
  <TemplateManagerUI @template-saved="handleTemplateSave" />
</template>

<template>
  <!-- 输入面板 -->
  <InputPanelUI 
    v-model="inputContent"
    :placeholder="placeholder"
  />
  
  <!-- 输出显示 -->
  <OutputDisplay 
    :content="outputContent"
    :enable-fullscreen="true"
  />
  
  <!-- 全屏输出显示 -->
  <OutputDisplayFullscreen 
    v-model:visible="showFullscreen"
    :content="content"
  />
</template>

<template>
  <!-- 主布局 -->
  <MainLayoutUI>
    <template #header>
      <YourHeader />
    </template>
    <template #sidebar>
      <YourSidebar />
    </template>
    <YourContent />
  </MainLayoutUI>
  
  <!-- 内容卡片 -->
  <ContentCardUI :title="cardTitle">
    <YourContent />
  </ContentCardUI>
</template>

<template>
  <!-- 数据管理器 -->
  <DataManagerUI 
    @data-imported="handleImport"
    @data-exported="handleExport"
  />
  
  <!-- 变量管理 -->
  <VariableManager 
    v-model="variables"
    @variable-updated="handleVariableUpdate"
  />
</template>

import { useNaiveTheme } from '@prompt-optimizer/ui'

const {
  naiveTheme,       // Naive UI主题对象
  themeOverrides,   // 主题覆盖配置
  currentTheme,     // 当前主题ID
  switchTheme,      // 切换主题
  initTheme         // 初始化主题
} = useNaiveTheme()

import { useResponsiveTestLayout } from '@prompt-optimizer/ui'

const {
  isMobile,           // 是否为移动端
  isTablet,           // 是否为平板
  currentBreakpoint,  // 当前断点
  inputMode,          // 推荐的输入模式
  controlBarLayout,   // 推荐的控制栏布局
  buttonSize,         // 推荐的按钮尺寸
  responsiveHeights   // 响应式高度配置
} = useResponsiveTestLayout()

import { useTestModeConfig } from '@prompt-optimizer/ui'

const {
  showTestInput,          // 是否显示测试输入
  requiresTestContent,    // 是否需要测试内容
  canStartTest,           // 是否可以开始测试
  enableCompareMode,      // 是否启用对比模式
  getDynamicButtonText,   // 获取动态按钮文本
  validateTestSetup       // 验证测试配置
} = useTestModeConfig(optimizationMode)

// 核心组件
export { default as ToastUI } from './components/Toast.vue'
export { default as ModalUI } from './components/Modal.vue'
export { default as PanelUI } from './components/Panel.vue'

// 布局组件
export { default as MainLayoutUI } from './components/MainLayout.vue'
export { default as ContentCardUI } from './components/ContentCard.vue'

// TestArea组件系统
export { default as TestAreaPanel } from './components/TestAreaPanel.vue'
export { default as TestInputSection } from './components/TestInputSection.vue'
export { default as TestControlBar } from './components/TestControlBar.vue'
export { default as TestResultSection } from './components/TestResultSection.vue'
export { default as ConversationSection } from './components/ConversationSection.vue'

// 输入输出组件
export { default as InputPanelUI } from './components/InputPanel.vue'
export { default as OutputDisplay } from './components/OutputDisplay.vue'
export { default as OutputDisplayFullscreen } from './components/OutputDisplayFullscreen.vue'
export { default as OutputDisplayCore } from './components/OutputDisplayCore.vue'

// 管理组件
export { default as ModelManagerUI } from './components/ModelManager.vue'
export { default as TemplateManagerUI } from './components/TemplateManager.vue'
export { default as TemplateSelectUI } from './components/TemplateSelect.vue'
export { default as DataManagerUI } from './components/DataManager.vue'
export { default as VariableManager } from './components/VariableManager.vue'
export { default as FunctionModelManagerUI } from './components/FunctionModelManager.vue'

// 功能组件
export { default as ActionButtonUI } from './components/ActionButton.vue'
export { default as ThemeToggleUI } from './components/ThemeToggleUI.vue'
export { default as LanguageSwitchDropdown } from './components/LanguageSwitchDropdown.vue'
export { default as OptimizationModeSelectorUI } from './components/OptimizationModeSelector.vue'
export { default as TextDiffUI } from './components/TextDiff.vue'
export { default as MarkdownRenderer } from './components/MarkdownRenderer.vue'

// 高级组件
export { default as AdvancedTestPanel } from './components/AdvancedTestPanel.vue'
export { default as ConversationManager } from './components/ConversationManager.vue'
export { default as VariableEditor } from './components/VariableEditor.vue'
export { default as HistoryDrawerUI } from './components/HistoryDrawer.vue'

// 导出所有composables
export * from './composables'

// 主要composables
export { useNaiveTheme } from './composables/useNaiveTheme'
export { useResponsiveTestLayout } from './composables/useResponsiveTestLayout'
export { useTestModeConfig } from './composables/useTestModeConfig'

// 主题配置
export { 
  currentNaiveTheme as naiveTheme,
  currentThemeOverrides as themeOverrides, 
  currentThemeId, 
  currentThemeConfig,
  naiveThemeConfigs,
  switchTheme,
  initializeNaiveTheme
} from './config/naive-theme'

// I18n系统
export { 
  installI18n, 
  installI18nOnly, 
  initializeI18nWithStorage, 
  setI18nServices, 
  i18n 
} from './plugins/i18n'

import type { 
  OptimizationMode,
  ConversationMessage,
  Template,
  IModelManager,
  ITemplateManager,
  ILLMService,
  IPromptService
} from '@prompt-optimizer/core'

// TestArea组件类型
export interface TestAreaConfig {
  optimizationMode: OptimizationMode
  inputMode: 'default' | 'compact'
  controlBarLayout: 'default' | 'compact'
  buttonSize: 'small' | 'medium' | 'large'
}

export interface TestControlLayout {
  showCompareToggle: boolean
  primaryActionText: string
  buttonSize: string
}

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建UI包
pnpm -F @prompt-optimizer/ui build

# 运行测试
pnpm -F @prompt-optimizer/ui test

# 类型检查
pnpm -F @prompt-optimizer/ui exec tsc --noEmit

# 运行所有测试
pnpm -F @prompt-optimizer/ui test

# 运行特定组件测试
pnpm -F @prompt-optimizer/ui test -- TestAreaPanel

# 运行集成测试
pnpm -F @prompt-optimizer/ui test -- test-area-integration

# 运行端到端测试  
pnpm -F @prompt-optimizer/ui test -- test-area-e2e