测试区域重构迁移指南

概述

TestPanel.vue 和基于条件的 AdvancedTestPanel 使用已被新的统一 TestAreaPanel 组件替代。本指南帮助您迁移现有代码。

主要变化

1. 组件统一

旧方式: TestPanelUI (基础模式) + AdvancedTestPanel (高级模式)
新方式: TestAreaPanel (统一组件，自动处理模式差异)

2. 接口简化

移除冗余: showTestInput 属性已移除，自动从 optimizationMode 推导
响应式: 自动适配不同屏幕尺寸
统一样式: 严格遵循 Naive UI 设计规范

迁移步骤

Web 包 (已完成)

packages/web/src/App.vue 已经完成迁移，作为参考示例。

Extension 包 (已完成)

packages/extension/src/App.vue 已经完成迁移到新的TestAreaPanel统一组件。

主要变更：

移除了条件渲染的TestPanelUI和AdvancedTestPanel
采用统一的TestAreaPanel组件，自动处理模式差异
添加了响应式布局配置和测试模式配置
实现了新的事件处理机制

1. 更新导入语句

// 旧代码
import { TestPanelUI, AdvancedTestPanel } from '@prompt-optimizer/ui'

// 新代码  
import { TestAreaPanel, useResponsiveTestLayout, useTestModeConfig } from '@prompt-optimizer/ui'

2. 添加状态管理

// 新增测试内容状态
const testContent = ref('')
const isCompareMode = ref(true)

// 新增响应式配置
const responsiveLayout = useResponsiveTestLayout()
const testModeConfig = useTestModeConfig(selectedOptimizationMode)

3. 替换模板代码

<!-- 旧代码 -->
<TestPanelUI v-if="!advancedModeEnabled" ... />
<AdvancedTestPanel v-else ... />

<!-- 新代码 -->
<TestAreaPanel
  :optimization-mode="selectedOptimizationMode"
  :advanced-mode-enabled="advancedModeEnabled"
  v-model:test-content="testContent"
  v-model:is-compare-mode="isCompareMode"
  :input-mode="responsiveLayout.recommendedInputMode.value"
  :control-bar-layout="responsiveLayout.recommendedControlBarLayout.value"
  :button-size="responsiveLayout.smartButtonSize.value"
  @test="handleTestAreaTest"
  @compare-toggle="handleTestAreaCompareToggle"
>
  <!-- 插槽内容 -->
</TestAreaPanel>

4. 添加事件处理函数

const handleTestAreaTest = async () => {
  // 测试逻辑
}

const handleTestAreaCompareToggle = () => {
  isCompareMode.value = !isCompareMode.value
}

关键优势

1. 消除接口冗余

showTestInput 自动从 optimizationMode 推导
统一的组件接口，减少条件判断

2. 响应式支持

自动屏幕尺寸适配
智能布局模式切换
防抖窗口监听

3. 样式统一

完全遵循 Naive UI 设计系统
移除所有硬编码 CSS
与左侧优化区域视觉一致

4. 类型安全

完整的 TypeScript 类型定义
IDE 智能提示支持
编译时类型检查

向后兼容性

保留的组件

AdvancedTestPanel.vue 暂时保留，供其他包使用
TestPanel.vue 已重命名为 TestPanel.vue.backup

导出更新

TestPanelUI 导出已移除
新增 TestAreaPanel 导出
新增相关 composables 和类型导出

测试建议

功能测试: 确保测试、对比模式、模型选择等功能正常
响应式测试: 在不同屏幕尺寸下测试布局
兼容性测试: 确保高级模式和基础模式切换正常
样式测试: 验证与现有 UI 的视觉一致性

注意事项

渐进迁移: 建议逐个包进行迁移，确保稳定性
测试充分: 迁移后进行完整的功能测试
备份文件: 旧组件文件已备份，可在需要时恢复
文档更新: 更新相关文档和使用说明

支持

如果在迁移过程中遇到问题，请参考：

Web 包的 App.vue 作为完整示例
组件类型定义：packages/ui/src/components/types/test-area.ts
样式规范：docs/components/test-area-style-guide.md

Source: docs/migration/test-area-refactor-migration.md