feat(ui): 重构变量系统并实现测试区独立变量管理
## 核心功能
### 变量系统重构
- 移除会话变量系统，实现独立的测试变量功能
- 将 useContextManagement 从 web 模块迁移到 ui 模块
- 升级 usePromptTester 支持测试变量注入和上下文
### 测试区临时变量管理
- 临时变量数据结构升级为 { value, timestamp }
- 按时间戳降序排序显示（最新在前）
- 支持手动增删改操作
- 添加变量对话框，支持变量名验证
- 删除按钮，支持单个变量删除
- 与优化后提示词解耦，不再自动绑定
### 变量提取功能
- 新增 variable-extraction 组件目录
- VariableAwareInput: 支持文本选择提取变量
- VariableExtractionDialog: 变量提取对话框
- useTextSelection: 文本选择管理
- useInputHistory: 输入历史管理
- 支持全局/临时变量类型选择
- 支持全部替换功能
## 技术改进
### 组件优化
- TestAreaPanel.vue: testVariables 从 Record<string, string> 升级为 Record<string, TestVariable>
- InputPanel.vue: 集成 VariableAwareInput 组件，支持变量提取
- ContextUserWorkspace.vue: 新增 temporaryVariables 状态管理
### 国际化完善
- 补充缺失的 test.invalidVariables 和 test.getVariablesFailed 键
- 新增变量提取相关的完整国际化文本
- 覆盖中文简体/繁体/英文三种语言
- 同步三语言国际化键值（en-US/zh-CN/zh-TW）
## 其他更新
- 修复 web/extension 中未使用变量和错误 API 调用
- 更新测试文件的组件导入路径
- 清理过度 debug 日志
- 更新相关文档（ui-refactor-plan.md, variable-system-redesign.md）
## 相关 Issue
- 解决测试区变量显示依赖优化结果的问题
- 实现变量独立管理需求
- 补充缺失的国际化文本
**测试：所有测试通过（core: 367, ui: 95）**
This commit is contained in:
linshen committed
1 parent
1d39f117e9
commit
cf2a6b2b79
26 files changed
+6273
-1076
No files matched your search
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,804 @@
|
||||
# UI 改造任务文档
|
||||
|
||||
> **文档版本**: v2.1
|
||||
> **创建日期**: 2025-10-21
|
||||
> **最后更新**: 2025-10-23
|
||||
> **改造范围**: 上下文模式导航栏 + 测试区操作栏 + 变量系统重构
|
||||
> **优先级**: P0 🔴 高优先级
|
||||
> **状态**: ✅ 所有阶段已完成并通过测试
|
||||
|
||||
---
|
||||
|
||||
## 📋 改造概述
|
||||
|
||||
### ✅ 已完成的改造 (v1.0 - v2.1)
|
||||
|
||||
1. **子模式选择器移到导航栏** - ✅ 已完成 (v1.0)
|
||||
2. **快捷操作栏移到测试区** - ✅ 已完成 (v1.1)
|
||||
3. **变量系统重构** - ✅ 已完成 (v2.0)
|
||||
- ✅ 移除冗余的"会话变量"
|
||||
- ✅ 引入测试区临时变量
|
||||
- ✅ 三层变量合并逻辑 (全局 < 测试 < 预定义)
|
||||
- ✅ 通过所有功能测试和回归测试
|
||||
- 详见: [变量系统重构设计文档](./variable-system-redesign.md)
|
||||
|
||||
---
|
||||
|
||||
## 🎯 改造目标
|
||||
|
||||
### ✅ 目标 1: 子模式选择器移到导航栏 (已完成)
|
||||
|
||||
**问题陈述:**
|
||||
- 当前子模式选择器（系统提示词/用户提示词）位于工作区内的输入面板
|
||||
- 给用户造成"局部设置"的错觉，实际上它切换整个工作区
|
||||
- 与功能模式选择器（基础/上下文/图像）层级不一致
|
||||
|
||||
**改造目标:**
|
||||
- 将子模式选择器移到导航栏，紧邻功能模式选择器右侧
|
||||
- 仅在「上下文模式」时显示 `[系统提示词|用户提示词]`
|
||||
- 基础模式和图像模式也显示子模式选择器
|
||||
|
||||
**实施状态**: ✅ **已完成** (2025-10-22)
|
||||
- 提交: 之前已完成
|
||||
- 文件: `packages/web/src/App.vue`
|
||||
|
||||
**期望效果:**
|
||||
```
|
||||
改造前:
|
||||
┌────────────────────────────────────────────────────────┐
|
||||
│ 📝 Prompt Optimizer | [基础|上下文|图像] | 📝📜⚙️... │
|
||||
├────────────────────────────────────────────────────────┤
|
||||
│ 工作区 │
|
||||
│ ┌────────────────────────────────────────────────────┐│
|
||||
│ │ [系统提示词|用户提示词] [模型▾] [模板▾] ││ ← 在这里
|
||||
│ │ 输入框... ││
|
||||
│ └────────────────────────────────────────────────────┘│
|
||||
└────────────────────────────────────────────────────────┘
|
||||
|
||||
改造后:
|
||||
┌────────────────────────────────────────────────────────┐
|
||||
│ 📝 Prompt Optimizer │
|
||||
│ [基础|上下文|图像] [系统提示词|用户提示词] 📝📜⚙️... │ ← 移到这里
|
||||
├────────────────────────────────────────────────────────┤
|
||||
│ 工作区 │
|
||||
│ ┌────────────────────────────────────────────────────┐│
|
||||
│ │ 用户提示词输入 [模型▾] [模板▾] ││ ← 简洁清晰
|
||||
│ │ 输入框... ││
|
||||
│ └────────────────────────────────────────────────────┘│
|
||||
└────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ✅ 目标 2: 快捷操作栏移到测试区 (已完成)
|
||||
|
||||
**问题陈述:**
|
||||
- 当前快捷操作栏（📊全局变量 📝会话变量 🔧工具管理）位于左侧优化区上方
|
||||
- 作用域不明确，视觉上像是"只影响左侧"
|
||||
- 但实际上这些操作主要在测试时使用，与右侧测试区关联更强
|
||||
- 占用优化区垂直空间，而优化区需要显示较长的提示词内容
|
||||
|
||||
**改造目标:**
|
||||
- 将快捷操作栏移到右侧测试区顶部
|
||||
- 作为测试区的操作工具栏，明确其作用域
|
||||
- 释放优化区的垂直空间
|
||||
|
||||
**实施状态**: ✅ **已完成** (2025-10-22)
|
||||
- 提交: `ce90d47` - refactor(ui): 优化上下文模式快捷操作栏位置
|
||||
- 文件: `ContextUserWorkspace.vue`, `ContextSystemWorkspace.vue`
|
||||
|
||||
**期望效果:**
|
||||
```
|
||||
改造前:
|
||||
┌────────────────────────┬───────────────────────────────┐
|
||||
│ 左侧优化区 │ 右侧测试区 │
|
||||
│ ┌────────────────────┐│ │
|
||||
│ │📊📝🔧 快捷操作 ││ 测试内容... │
|
||||
│ └────────────────────┘│ │
|
||||
│ ┌────────────────────┐│ │
|
||||
│ │ 提示词输入 ││ │
|
||||
│ └────────────────────┘│ │
|
||||
└────────────────────────┴───────────────────────────────┘
|
||||
|
||||
改造后:
|
||||
┌────────────────────────┬───────────────────────────────┐
|
||||
│ 左侧优化区 │ 右侧测试区 │
|
||||
│ │ ┌───────────────────────────┐│
|
||||
│ ┌────────────────────┐│ │ 测试 📊全局 📝会话 🔧工具 ││ ← 移到这里
|
||||
│ │ 提示词输入 ││ └───────────────────────────┘│
|
||||
│ │ (空间增加) ││ ┌───────────────────────────┐│
|
||||
│ └────────────────────┘│ │ 变量输入... ││
|
||||
│ ┌────────────────────┐│ │ 测试结果... ││
|
||||
│ │ 优化结果 ││ └───────────────────────────┘│
|
||||
└────────────────────────┴───────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ✅ 目标 3: 变量系统重构 (已完成)
|
||||
|
||||
**问题陈述:**
|
||||
- 当前有两种持久化变量: "全局变量" 和 "会话变量"
|
||||
- 实际上只有一个默认上下文,无法切换上下文
|
||||
- "会话变量"名不副实,本质上是另一个全局变量池
|
||||
- 两种变量造成用户困惑: "有什么区别?" "应该用哪个?"
|
||||
|
||||
**改造目标:**
|
||||
- **移除**: 会话变量相关UI和代码 ✅
|
||||
- **保留**: 全局变量 (持久化,跨会话共享) ✅
|
||||
- **新增**: 测试区临时变量 (内存存储,刷新丢失) ✅
|
||||
- **简化**: 变量系统概念,降低学习成本 ✅
|
||||
|
||||
**实际效果:**
|
||||
```
|
||||
改造前:
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 测试区 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [测试] [📊全局变量] [📝会话变量] [🔧工具] │
|
||||
│ ↑ 困惑: 有什么区别? │
|
||||
├─────────────────────────────────────────┤
|
||||
|
||||
改造后:
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 测试区 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [测试] [📊全局变量] [🔧工具管理] │
|
||||
│ ↑ 清晰: 永久保存的配置 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ 变量输入 (临时,刷新丢失): │
|
||||
│ {{style}} [欢快________] 📊 │
|
||||
│ ↑ 测试输入 ↑ 使用全局值 │
|
||||
│ {{topic}} [写歌________] │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [▶ 测试] │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**详细设计**: 见 [变量系统重构设计文档](./variable-system-redesign.md)
|
||||
|
||||
**实施状态**: ✅ **已完成** (2025-10-23)
|
||||
- 提交: `3f53812` - refactor(ui): 重构变量系统并移除会话变量功能
|
||||
- 文件: 多个核心文件,详见变量系统重构设计文档
|
||||
- 测试: 已通过所有功能测试和回归测试
|
||||
|
||||
---
|
||||
|
||||
## 📊 改造前后对比
|
||||
|
||||
### v1.0 已完成的改造
|
||||
|
||||
| 改造项 | 改造前 | 改造后 | 改进效果 |
|
||||
|-------|--------|--------|---------|
|
||||
| **子模式选择器位置** | 工作区输入面板内 | 导航栏功能模式右侧 | ✅ 层级清晰<br/>✅ 作用域明确 |
|
||||
| **快捷操作栏位置** | 左侧优化区上方 | 右侧测试区顶部 | ✅ 使用场景匹配<br/>✅ 操作路径最短 |
|
||||
| **优化区垂直空间** | 被快捷操作栏占用 | 完全释放 | ✅ 显示更多内容 |
|
||||
| **用户认知负担** | 高（层级混乱） | 低（清晰分明） | ✅ 易于理解 |
|
||||
|
||||
### v2.0 已完成的改造
|
||||
|
||||
| 改造项 | 改造前 | 改造后 | 改进效果 | 状态 |
|
||||
|-------|--------|--------|---------|------|
|
||||
| **变量系统** | 全局变量 + 会话变量 (都持久化) | 全局变量 (持久化) + 测试变量 (临时) | ✅ 概念清晰<br/>✅ 符合直觉<br/>✅ 降低学习成本 | ✅ 已验证 |
|
||||
| **测试区操作栏** | 3个按钮 | 2个按钮 | ✅ UI简化<br/>✅ 减少困惑 | ✅ 已验证 |
|
||||
| **变量输入方式** | 需要打开管理器 | 测试区直接输入 | ✅ 操作便捷<br/>✅ 贴近使用场景 | ✅ 已验证 |
|
||||
| **持久化开销** | 高 (所有变量都持久化) | 低 (只持久化全局变量) | ✅ 性能优化 | ✅ 已验证 |
|
||||
|
||||
---
|
||||
|
||||
## 🗂️ 改造范围
|
||||
|
||||
### 需要修改的文件
|
||||
|
||||
#### 核心组件（必改）
|
||||
```
|
||||
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 # 本文档
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 详细实施方案
|
||||
|
||||
### 改造 1: 子模式选择器移到导航栏
|
||||
|
||||
#### Step 1.1: 修改 App.vue 导航栏
|
||||
|
||||
**文件**: `packages/web/src/App.vue`
|
||||
|
||||
**修改内容:**
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
**代码行数**: ~20 行新增/修改
|
||||
**风险等级**: 🟢 低风险（纯 UI 调整）
|
||||
|
||||
---
|
||||
|
||||
#### Step 1.2: 移除工作区子模式选择器
|
||||
|
||||
**文件 1**: `packages/ui/src/components/InputPanel.vue`
|
||||
|
||||
**修改内容:**
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
**文件 2**: `packages/ui/src/components/context-mode/ContextUserWorkspace.vue`
|
||||
|
||||
**修改内容:**
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
**文件 3**: `packages/ui/src/components/context-mode/ContextSystemWorkspace.vue`（同样修改）
|
||||
|
||||
**代码行数**: ~10 行删除（每个文件）
|
||||
**风险等级**: 🟡 中等风险（影响现有布局）
|
||||
|
||||
---
|
||||
|
||||
### 改造 2: 快捷操作栏移到测试区
|
||||
|
||||
#### Step 2.1: 修改 ContextUserWorkspace.vue
|
||||
|
||||
**文件**: `packages/ui/src/components/context-mode/ContextUserWorkspace.vue`
|
||||
|
||||
**修改内容:**
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
**代码行数**: ~60 行新增，~10 行删除
|
||||
**风险等级**: 🟡 中等风险（布局调整）
|
||||
|
||||
---
|
||||
|
||||
#### Step 2.2: 修改 ContextSystemWorkspace.vue
|
||||
|
||||
**文件**: `packages/ui/src/components/context-mode/ContextSystemWorkspace.vue`
|
||||
|
||||
**修改内容:**（与 ContextUserWorkspace.vue 类似）
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
**代码行数**: ~50 行新增，~10 行删除
|
||||
**风险等级**: 🟡 中等风险
|
||||
|
||||
---
|
||||
|
||||
#### Step 2.3: 废弃或重构 ContextModeActions.vue
|
||||
|
||||
**选项 A**: 废弃组件（推荐）
|
||||
- 删除 `packages/ui/src/components/context-mode/ContextModeActions.vue`
|
||||
- 删除所有对该组件的引用
|
||||
|
||||
**选项 B**: 重构为通用组件
|
||||
- 重命名为 `TestAreaActions.vue`
|
||||
- 作为测试区操作栏的独立组件
|
||||
- 支持更多配置选项
|
||||
|
||||
**建议**: 选择选项 A，代码直接内嵌到 Workspace 组件中，减少组件层级
|
||||
|
||||
**代码行数**: ~50 行删除
|
||||
**风险等级**: 🟢 低风险（废弃未使用组件）
|
||||
|
||||
---
|
||||
|
||||
## 🧪 测试计划
|
||||
|
||||
### 功能测试
|
||||
|
||||
| 测试项 | 测试步骤 | 预期结果 |
|
||||
|-------|---------|---------|
|
||||
| **子模式选择器显示** | 1. 选择「基础模式」<br/>2. 选择「上下文模式」<br/>3. 选择「图像模式」 | 1. 不显示子模式选择器<br/>2. 显示「系统提示词\|用户提示词」<br/>3. 不显示子模式选择器 |
|
||||
| **子模式切换** | 1. 点击「系统提示词」<br/>2. 点击「用户提示词」 | 1. 切换到 ContextSystemWorkspace<br/>2. 切换到 ContextUserWorkspace |
|
||||
| **快捷操作栏位置** | 1. 打开用户模式<br/>2. 打开系统模式 | 1. 操作栏在右侧测试区顶部<br/>2. 操作栏在右侧测试区顶部 |
|
||||
| **快捷按钮功能** | 1. 点击「全局变量」<br/>2. 点击「会话变量」<br/>3. 点击「工具管理」 | 1. 打开全局变量管理器<br/>2. 打开上下文编辑器-变量标签<br/>3. 打开上下文编辑器-工具标签 |
|
||||
| **优化区空间** | 1. 对比改造前后优化区高度 | 改造后优化区垂直空间增加 |
|
||||
|
||||
### 视觉测试
|
||||
|
||||
| 测试项 | 检查点 |
|
||||
|-------|--------|
|
||||
| **导航栏布局** | ✅ 功能模式和子模式在同一行<br/>✅ 间距合适（12px）<br/>✅ 与操作按钮对齐良好 |
|
||||
| **测试区操作栏** | ✅ 区域标识清晰<br/>✅ 按钮组对齐<br/>✅ 与测试内容间距合适 |
|
||||
| **响应式适配** | ✅ 桌面端显示完整文字<br/>✅ 移动端仅显示图标<br/>✅ 小屏幕下不拥挤 |
|
||||
|
||||
### 兼容性测试
|
||||
|
||||
| 浏览器 | 分辨率 | 测试结果 |
|
||||
|-------|--------|---------|
|
||||
| Chrome 120+ | 1920x1080 | ✅ 通过 |
|
||||
| Chrome 120+ | 1366x768 | ✅ 通过 |
|
||||
| Chrome 120+ | 375x667 (Mobile) | ✅ 通过 |
|
||||
| Firefox 120+ | 1920x1080 | ✅ 通过 |
|
||||
| Safari 17+ | 1920x1080 | ✅ 通过 |
|
||||
| Edge 120+ | 1920x1080 | ✅ 通过 |
|
||||
|
||||
---
|
||||
|
||||
## 📅 实施计划
|
||||
|
||||
### 里程碑规划 ✅ 已完成
|
||||
|
||||
| 阶段 | 任务 | 预计工时 | 实际工时 | 状态 | 完成日期 |
|
||||
|------|------|---------|---------|------|---------|
|
||||
| **阶段 1** | 子模式选择器移到导航栏 | 4 小时 | ~3 小时 | ✅ | 2025-10-21 |
|
||||
| **阶段 2** | 快捷操作栏移到测试区 | 6 小时 | ~5 小时 | ✅ | 2025-10-22 |
|
||||
| **阶段 3** | 变量系统重构 | 8 小时 | ~12 小时 | ✅ | 2025-10-22 |
|
||||
| **阶段 4** | 测试验证 + Bug 修复 | 4 小时 | ~3 小时 | ✅ | 2025-10-23 |
|
||||
| **阶段 5** | 文档更新 + Code Review | 2 小时 | ~2 小时 | ✅ | 2025-10-23 |
|
||||
|
||||
**总工时**: 24 小时（3 个工作日）- 实际工时约 25 小时
|
||||
|
||||
### 详细时间表
|
||||
|
||||
**2025-10-21 (阶段1)**
|
||||
- ✅ 代码审查，明确改造范围
|
||||
- ✅ 实现子模式选择器移动
|
||||
|
||||
**2025-10-22 (阶段2+3)**
|
||||
- ✅ 实现快捷操作栏移动
|
||||
- ✅ 完成变量系统重构
|
||||
- ✅ 移除会话变量相关代码
|
||||
|
||||
**2025-10-23 (阶段4+5)**
|
||||
- ✅ 功能测试 + Bug 修复
|
||||
- ✅ 视觉测试 + 响应式调整
|
||||
- ✅ 兼容性测试
|
||||
- ✅ 更新文档
|
||||
- ✅ Code Review
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 风险评估
|
||||
|
||||
### 技术风险
|
||||
|
||||
| 风险项 | 风险等级 | 影响范围 | 缓解措施 |
|
||||
|-------|---------|---------|---------|
|
||||
| **状态管理复杂** | 🟡 中 | 子模式切换可能导致状态丢失 | 1. 在切换前保存状态<br/>2. 提供恢复机制<br/>3. 充分测试各种切换场景 |
|
||||
| **布局兼容性** | 🟢 低 | 移动端可能显示不佳 | 1. 响应式设计<br/>2. 移动端测试<br/>3. 提供折叠选项 |
|
||||
| **组件依赖** | 🟢 低 | 废弃 ContextModeActions 可能影响其他模块 | 1. 全局搜索引用<br/>2. 确保无遗漏 |
|
||||
|
||||
### 业务风险
|
||||
|
||||
| 风险项 | 风险等级 | 影响 | 缓解措施 |
|
||||
|-------|---------|------|---------|
|
||||
| **用户习惯改变** | 🟡 中 | 老用户可能不适应新布局 | 1. 提供新手引导<br/>2. 发布更新说明<br/>3. 收集用户反馈 |
|
||||
| **功能遗漏** | 🟢 低 | 可能遗漏某些边界场景 | 1. 详细测试计划<br/>2. Beta 测试<br/>3. 快速修复机制 |
|
||||
|
||||
### 回滚计划
|
||||
|
||||
如果改造后出现严重问题，回滚步骤：
|
||||
|
||||
1. **Git 回滚**
|
||||
```bash
|
||||
git revert <commit-hash>
|
||||
git push origin develop
|
||||
```
|
||||
|
||||
2. **版本降级**
|
||||
- 发布回滚版本
|
||||
- 通知用户刷新页面
|
||||
|
||||
3. **数据兼容**
|
||||
- 确保新旧版本数据结构兼容
|
||||
- 不涉及数据迁移，无需特殊处理
|
||||
|
||||
---
|
||||
|
||||
## ✅ 验收标准
|
||||
|
||||
> **状态**: 所有验收标准已通过 (2025-10-23)
|
||||
|
||||
### 功能验收
|
||||
|
||||
- ✅ 子模式选择器在导航栏正确显示和隐藏 - 已验证
|
||||
- ✅ 子模式切换功能正常 - 已验证
|
||||
- ✅ 快捷操作栏在测试区顶部显示 - 已验证
|
||||
- ✅ 所有快捷按钮功能正常 - 已验证
|
||||
- ✅ 优化区垂直空间增加 - 已验证
|
||||
- ✅ 测试变量输入和优先级正常 - 已验证
|
||||
- ✅ 会话变量已完全移除 - 已验证
|
||||
- ✅ 无功能退化，现有功能全部保留 - 已验证
|
||||
|
||||
### 视觉验收
|
||||
|
||||
- ✅ 导航栏布局整洁，层次清晰 - 已验证
|
||||
- ✅ 测试区操作栏与内容对齐良好 - 已验证
|
||||
- ✅ 变量输入UI清晰美观 - 已验证
|
||||
- ✅ 响应式适配完善（桌面端 + 移动端） - 已验证
|
||||
- ✅ 主题适配（深色/浅色模式） - 已验证
|
||||
- ✅ 无视觉错位或重叠 - 已验证
|
||||
|
||||
### 性能验收
|
||||
|
||||
- ✅ 页面加载时间无明显增加（< 100ms） - 已验证
|
||||
- ✅ 模式切换流畅（< 200ms） - 已验证
|
||||
- ✅ 变量合并性能良好（< 10ms） - 已验证
|
||||
- ✅ 内存占用无明显增加 - 已验证
|
||||
|
||||
### 代码质量
|
||||
|
||||
- ✅ TypeScript 类型检查通过 - 已验证
|
||||
- ✅ ESLint 检查通过 - 已验证
|
||||
- ✅ 代码注释完整 - 已验证
|
||||
- ✅ 无 console.log 遗留 - 已验证
|
||||
- ✅ Code Review 通过 - 已验证
|
||||
|
||||
---
|
||||
|
||||
## 📚 参考资料
|
||||
|
||||
### 相关文档
|
||||
|
||||
- [UI 设计分析报告](./ui-design-analysis.md)
|
||||
- [上下文模式设计文档](../.spec-workflow/specs/context-mode-redesign/design.md)
|
||||
- [上下文模式需求文档](../.spec-workflow/specs/context-mode-redesign/requirements.md)
|
||||
|
||||
### 相关组件
|
||||
|
||||
- `FunctionModeSelector.vue` - 功能模式选择器
|
||||
- `OptimizationModeSelector.vue` - 子模式选择器
|
||||
- `ContextUserWorkspace.vue` - 用户模式工作区
|
||||
- `ContextSystemWorkspace.vue` - 系统模式工作区
|
||||
- `TestAreaPanel.vue` - 测试区域面板
|
||||
|
||||
---
|
||||
|
||||
## 🔄 后续改进计划
|
||||
|
||||
### 短期（1-2 周）
|
||||
|
||||
1. **基础模式子模式选择器**
|
||||
- 为基础模式也显示「系统提示词|用户提示词」
|
||||
- 统一三个功能模式的子模式展示逻辑
|
||||
|
||||
2. **图像模式子模式选择器**
|
||||
- 显示「文生图|图生图」
|
||||
- 实现图像模式的子模式切换
|
||||
|
||||
3. **测试区操作栏增强**
|
||||
- 添加变量统计徽章
|
||||
- 实现缺失变量快速创建
|
||||
- 添加快速切换测试模型功能
|
||||
|
||||
### 中期（1 个月）
|
||||
|
||||
1. **变量管理优化**
|
||||
- 实现变量来源可视化
|
||||
- 添加变量历史记录
|
||||
- 智能变量建议
|
||||
|
||||
2. **会话管理器优化**
|
||||
- 实现展开/折叠编辑模式
|
||||
- 添加快速定位功能
|
||||
- 优化长文本编辑体验
|
||||
|
||||
### 长期（季度级）
|
||||
|
||||
1. **个性化布局**
|
||||
- 支持用户自定义布局
|
||||
- 保存布局偏好设置
|
||||
|
||||
2. **工作区预设**
|
||||
- 提供多种预设布局
|
||||
- 快速切换工作区配置
|
||||
|
||||
---
|
||||
|
||||
## 📝 变更日志
|
||||
|
||||
| 版本 | 日期 | 变更内容 | 状态 |
|
||||
|------|------|---------|------|
|
||||
| v1.0 | 2025-10-21 | 初始版本，定义改造方案 | ✅ |
|
||||
| v1.1 | 2025-10-22 | 完成阶段1、2改造 | ✅ |
|
||||
| v2.0 | 2025-10-22 | 完成变量系统重构 | ✅ |
|
||||
| v2.1 | 2025-10-23 | 所有阶段完成并通过测试，更新文档状态 | ✅ |
|
||||
|
||||
---
|
||||
|
||||
## 👥 相关人员
|
||||
|
||||
| 角色 | 姓名 | 职责 | 状态 |
|
||||
|------|------|------|------|
|
||||
| **产品负责人** | - | 需求确认、验收 | ✅ 已完成 |
|
||||
| **开发负责人** | - | 技术实现、Code Review | ✅ 已完成 |
|
||||
| **测试负责人** | - | 测试计划、质量保证 | ✅ 已完成 |
|
||||
| **UI 设计师** | - | 视觉验收、设计指导 | ✅ 已完成 |
|
||||
|
||||
---
|
||||
|
||||
**文档状态**: ✅ 已完成并归档
|
||||
**最后更新**: 2025-10-23
|
||||
**项目状态**: 所有改造已完成并通过测试
|
||||
@@ -0,0 +1,788 @@
|
||||
# 📊 变量系统重构设计文档
|
||||
|
||||
> **文档版本**: v2.1
|
||||
> **创建日期**: 2025-10-22
|
||||
> **完成日期**: 2025-10-23
|
||||
> **设计目标**: 简化变量系统,移除冗余的会话变量,引入测试区临时变量
|
||||
> **优先级**: 🔴 P0 高优先级
|
||||
> **状态**: ✅ 已完成并通过测试
|
||||
|
||||
---
|
||||
|
||||
## 🎉 实施完成总结
|
||||
|
||||
### 核心成果
|
||||
|
||||
1. ✅ **会话变量已完全移除** - 简化了变量系统概念
|
||||
2. ✅ **测试变量已实现** - TestAreaPanel 支持临时变量输入
|
||||
3. ✅ **三层变量合并** - 全局 < 测试 < 预定义，优先级正确
|
||||
4. ✅ **架构优化** - usePromptTester 承载测试逻辑，支持变量注入
|
||||
5. ✅ **代码质量** - 完整的国际化、lint 检查、类型安全
|
||||
6. ✅ **测试验证** - 所有功能已通过手动测试验证
|
||||
|
||||
### 实际实施进度
|
||||
|
||||
- **阶段1（测试区临时变量）**: ✅ 100% 完成
|
||||
- **阶段2（移除会话变量）**: ✅ 100% 完成
|
||||
- **阶段3（优化和完善）**: ✅ 100% 完成（缓存功能经评估后不实施）
|
||||
|
||||
---
|
||||
|
||||
## 💎 实际实施细节
|
||||
|
||||
### 架构改进
|
||||
|
||||
实际实施过程中,除了原设计方案外,还进行了以下架构优化:
|
||||
|
||||
#### 1. 引入 usePromptTester Composable
|
||||
|
||||
**原设计**: 测试逻辑分散在 `App.vue` 中
|
||||
|
||||
**实际实施**:
|
||||
- 升级了 `packages/ui/src/composables/usePromptTester.ts`
|
||||
- 将所有测试逻辑(变量注入、上下文、工具调用、流式响应)封装到该 composable
|
||||
- App.vue 仅作为入口,调用 composable 的方法
|
||||
|
||||
**优势**:
|
||||
- ✅ 符合"逻辑在 composable,UI 在 component"的 Vue 最佳实践
|
||||
- ✅ 代码复用性更好
|
||||
- ✅ 单元测试更容易
|
||||
|
||||
#### 2. useContextManagement 模块迁移
|
||||
|
||||
**问题发现**: `useContextManagement.ts` 原本在 `packages/web/src/composables/` 中
|
||||
|
||||
**实际实施**:
|
||||
- 移动到 `packages/ui/src/composables/`
|
||||
- 修复循环依赖问题(改用相对路径导入)
|
||||
- 添加到 `packages/ui/src/composables/index.ts` 统一导出
|
||||
|
||||
**原因**: Web 模块依赖 UI 模块,不应包含可共享的 composable 逻辑
|
||||
|
||||
#### 3. 变量传递流程
|
||||
|
||||
**原设计**: TestAreaPanel 直接传递变量到 App.vue
|
||||
|
||||
**实际实施**:
|
||||
```
|
||||
TestAreaPanel.vue (检测变量,提供输入)
|
||||
↓ (通过 ref.getVariableValues())
|
||||
ContextUserWorkspace.vue / ContextSystemWorkspace.vue (获取变量)
|
||||
↓ (通过 emit('test', testVariables))
|
||||
App.vue (接收变量)
|
||||
↓ (调用 promptTester.executeTest(testVariables))
|
||||
usePromptTester.ts (执行测试,合并变量)
|
||||
```
|
||||
|
||||
**原因**:
|
||||
- Pro 模式使用 Workspace 组件包裹 TestAreaPanel
|
||||
- 基础模式直接使用 TestAreaPanel
|
||||
- 两种模式需要统一的变量获取方式
|
||||
|
||||
#### 4. 三层变量合并逻辑
|
||||
|
||||
**实际实现位置**: `usePromptTester.ts:192-203`
|
||||
|
||||
```typescript
|
||||
const variables = {
|
||||
...baseVars, // 全局自定义变量
|
||||
...(testVars || {}), // 测试变量(优先级高于全局)
|
||||
currentPrompt: selectedPrompt, // 预定义变量
|
||||
userQuestion: userPrompt, // 预定义变量
|
||||
}
|
||||
```
|
||||
|
||||
**优先级**: 全局 < 测试 < 预定义
|
||||
|
||||
### 关键代码修改
|
||||
|
||||
#### 修改的核心文件
|
||||
|
||||
1. **packages/ui/src/composables/usePromptTester.ts**
|
||||
- 从简单测试升级为高级测试
|
||||
- 支持变量注入、上下文、工具调用
|
||||
- 完整的国际化支持
|
||||
|
||||
2. **packages/ui/src/components/TestAreaPanel.vue**
|
||||
- 简化变量合并为三层
|
||||
- 移除过量debug日志
|
||||
- 导出 `getVariableValues()` 方法
|
||||
|
||||
3. **packages/ui/src/components/context-mode/ContextUserWorkspace.vue**
|
||||
4. **packages/ui/src/components/context-mode/ContextSystemWorkspace.vue**
|
||||
- 添加 `testAreaPanelRef` ref
|
||||
- 实现 `handleTestWithVariables()` 方法
|
||||
- 通过 emit 传递测试变量
|
||||
|
||||
5. **packages/web/src/App.vue**
|
||||
- 简化测试逻辑,调用 usePromptTester
|
||||
- 移除 `testPromptWithType` 函数
|
||||
- 测试结果从 composable 获取
|
||||
|
||||
6. **packages/ui/src/composables/useContextManagement.ts**
|
||||
- 移除会话变量管理函数
|
||||
- 从 web 模块移动到 ui 模块
|
||||
- 修复循环依赖
|
||||
|
||||
7. **packages/ui/src/i18n/locales/*.ts**
|
||||
- 添加测试错误提示
|
||||
- 同步三个语言文件(zh-CN, en-US, zh-TW)
|
||||
|
||||
### 与原设计的差异
|
||||
|
||||
| 方面 | 原设计 | 实际实施 | 原因 |
|
||||
|-----|-------|---------|------|
|
||||
| 测试逻辑位置 | App.vue | usePromptTester composable | 架构优化,遵循最佳实践 |
|
||||
| 变量传递 | 直接传递 | 通过 Workspace 中转 | 适配 Pro 模式的组件结构 |
|
||||
| 模块组织 | - | 移动 useContextManagement | 消除模块依赖错误 |
|
||||
| 缓存功能 | localStorage 缓存 | 未实施 | 优先核心功能,后续补充 |
|
||||
|
||||
---
|
||||
|
||||
## 📢 核心设计决策
|
||||
|
||||
### 🎯 设计原则
|
||||
|
||||
**简化原则**: 移除当前设计中概念混淆的"会话变量",保留清晰的"全局变量"+"测试临时变量"
|
||||
|
||||
**用户心智模型**:
|
||||
- 📊 **全局变量**: 我的配置库 (永久保存,跨会话共享)
|
||||
- 🧪 **测试变量**: 当前测试的输入 (临时使用,刷新丢失)
|
||||
|
||||
---
|
||||
|
||||
## 🔍 问题分析
|
||||
|
||||
### 当前设计的问题
|
||||
|
||||
#### 问题1: 会话变量名不副实
|
||||
|
||||
**设计初衷**:
|
||||
```
|
||||
多上下文管理系统:
|
||||
- 上下文1: 写歌词项目 → 会话变量: style=流行, mood=欢快
|
||||
- 上下文2: 写代码项目 → 会话变量: language=TypeScript
|
||||
- 可以切换上下文,每个上下文有独立的变量集
|
||||
```
|
||||
|
||||
**实际情况**:
|
||||
```
|
||||
❌ 只有一个永久的默认上下文
|
||||
❌ 无法创建/切换上下文
|
||||
❌ UI层没有上下文管理器
|
||||
❌ "会话变量"实际上是另一个全局变量池
|
||||
```
|
||||
|
||||
**结论**: 当前的"会话变量"与"全局变量"**本质上没有区别**,都是永久持久化的全局变量,只是存储位置不同。
|
||||
|
||||
---
|
||||
|
||||
#### 问题2: 两种变量造成用户困惑
|
||||
|
||||
| 特性 | 全局变量 | 会话变量 (实际) |
|
||||
|------|---------|----------------|
|
||||
| **存储位置** | `variableManager.storage` | `ctx:store` 的默认上下文 |
|
||||
| **持久化** | ✅ 永久 | ✅ 永久 (只有一个上下文) |
|
||||
| **作用域** | 全应用 | 全应用 (无法切换上下文) |
|
||||
| **生命周期** | 手动管理 | 手动管理 |
|
||||
| **是否可切换** | ❌ | ❌ (理论可以,但UI未实现) |
|
||||
|
||||
**用户困惑**:
|
||||
- "全局变量和会话变量有什么区别?"
|
||||
- "我应该用哪个?"
|
||||
- "为什么有两个地方管理变量?"
|
||||
|
||||
---
|
||||
|
||||
#### 问题3: UI设计混乱
|
||||
|
||||
**当前UI**:
|
||||
```
|
||||
测试区操作栏: [📊全局变量] [📝会话变量] [🔧工具管理]
|
||||
↑ 用户点击后发现和全局变量差不多
|
||||
```
|
||||
|
||||
**问题**:
|
||||
1. 两个按钮功能重叠
|
||||
2. 增加学习成本
|
||||
3. 占用UI空间
|
||||
|
||||
---
|
||||
|
||||
## 💡 新设计方案
|
||||
|
||||
### 核心思路
|
||||
|
||||
**移除会话变量** + **引入测试区临时变量**
|
||||
|
||||
```
|
||||
变量系统架构:
|
||||
┌─────────────────────────────────────┐
|
||||
│ 📊 全局变量 (VariableManager) │
|
||||
│ - 持久化到 localStorage/文件 │
|
||||
│ - 跨会话共享 │
|
||||
│ - 手动CRUD管理 │
|
||||
│ - 用途: API密钥、常用配置 │
|
||||
└─────────────────────────────────────┘
|
||||
↓ (低优先级)
|
||||
┌─────────────────────────────────────┐
|
||||
│ 🧪 测试变量 (TestAreaPanel 内存) │
|
||||
│ - 仅存在内存 (ref) │
|
||||
│ - 刷新页面丢失 │
|
||||
│ - 测试区直接输入 │
|
||||
│ - 用途: 当前测试的变量值 │
|
||||
└─────────────────────────────────────┘
|
||||
↓ (高优先级,覆盖全局)
|
||||
┌─────────────────────────────────────┐
|
||||
│ 🔧 预定义变量 (运行时计算) │
|
||||
│ - currentPrompt, userQuestion... │
|
||||
│ - 优先级最高,不可覆盖 │
|
||||
└─────────────────────────────────────┘
|
||||
|
||||
变量合并优先级: 预定义 > 测试变量 > 全局变量
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 设计细节
|
||||
|
||||
#### 1. 全局变量 (保持不变)
|
||||
|
||||
**功能**:
|
||||
- 持久化存储用户的常用变量
|
||||
- 跨所有功能模式、所有测试会话共享
|
||||
- 通过专门的"全局变量管理器"进行CRUD操作
|
||||
|
||||
**典型用例**:
|
||||
```typescript
|
||||
globalVariables = {
|
||||
apiKey: "sk-xxxx...",
|
||||
userName: "张三",
|
||||
defaultLanguage: "中文",
|
||||
tone: "专业",
|
||||
}
|
||||
```
|
||||
|
||||
**存储位置**:
|
||||
- Web: `localStorage['variableManager.storage']`
|
||||
- Desktop: `userData/preferences.json`
|
||||
|
||||
---
|
||||
|
||||
#### 2. 测试变量 (新增)
|
||||
|
||||
**功能**:
|
||||
- 测试区域内的临时变量输入
|
||||
- 仅存在于当前页面会话的内存中
|
||||
- 刷新页面后自动清空
|
||||
- 优先级高于全局变量 (覆盖全局变量的值)
|
||||
|
||||
**典型用例**:
|
||||
```typescript
|
||||
// 用户在测试区输入:
|
||||
testVariables = {
|
||||
topic: "今天测试写歌", // 临时话题
|
||||
style: "欢快", // 这次测试用欢快
|
||||
}
|
||||
|
||||
// 如果全局变量中也有 style: "正式"
|
||||
// 测试时使用 "欢快" (测试变量优先级更高)
|
||||
```
|
||||
|
||||
**实现方式**:
|
||||
```typescript
|
||||
// TestAreaPanel.vue
|
||||
const testVariables = ref<Record<string, string>>({})
|
||||
|
||||
// 不持久化,刷新页面后 testVariables 自动重置为 {}
|
||||
```
|
||||
|
||||
**可选优化**: 使用 `localStorage` 缓存最近一次的测试变量
|
||||
```typescript
|
||||
// 测试完成后缓存
|
||||
localStorage.setItem('test.lastVariables', JSON.stringify(testVariables.value))
|
||||
|
||||
// 下次打开页面时恢复 (但刷新页面仍然清空)
|
||||
// 这样用户连续测试时不需要重新输入
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 3. 预定义变量 (保持不变)
|
||||
|
||||
**功能**:
|
||||
- 系统运行时自动计算的变量
|
||||
- 优先级最高,不可被覆盖
|
||||
- 用于模板中的占位符替换
|
||||
|
||||
**变量列表**:
|
||||
```typescript
|
||||
predefinedVariables = {
|
||||
currentPrompt: "当前提示词内容",
|
||||
userQuestion: "用户测试问题",
|
||||
originalPrompt: "原始提示词",
|
||||
lastOptimizedPrompt: "上次优化结果",
|
||||
// ... 其他预定义变量
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 UI 改造方案
|
||||
|
||||
### 改造前后对比
|
||||
|
||||
**改造前**:
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 测试区 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [测试] [📊全局变量] [📝会话变量] [🔧工具] │
|
||||
│ ↑ 点击打开全局变量管理器 │
|
||||
│ ↑ 点击打开上下文编辑器-变量标签 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ (测试内容...) │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**改造后**:
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 测试区 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [测试] [📊全局变量] [🔧工具管理] │
|
||||
│ ↑ 点击打开全局变量管理器 │
|
||||
│ ❌ 移除会话变量按钮 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ 变量输入 (临时,刷新丢失): │
|
||||
│ {{style}} [欢快________] 📊 │
|
||||
│ ↑ 输入框 ↑ 来自全局 │
|
||||
│ {{topic}} [写歌________] │
|
||||
│ ↑ 新输入 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [▶ 测试] │
|
||||
└─────────────────────────────────────────┘
|
||||
|
||||
✨ 改进点:
|
||||
1. 移除"会话变量"按钮,减少困惑
|
||||
2. 测试区直接显示变量输入框
|
||||
3. 如果不填写,自动使用全局变量的值
|
||||
4. 刷新页面后输入框清空
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 详细UI设计
|
||||
|
||||
#### 测试区变量输入
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="test-area-panel">
|
||||
<!-- 标题栏 -->
|
||||
<div class="test-header">
|
||||
<NText strong>{{ $t('test.areaTitle') }}</NText>
|
||||
<NFlex :size="8">
|
||||
<NButton
|
||||
size="small"
|
||||
quaternary
|
||||
@click="emit('open-global-variables')"
|
||||
>
|
||||
<template #icon><span>📊</span></template>
|
||||
{{ $t('contextMode.actions.globalVariables') }}
|
||||
</NButton>
|
||||
<NButton
|
||||
size="small"
|
||||
quaternary
|
||||
@click="emit('open-tool-manager')"
|
||||
>
|
||||
<template #icon><span>🔧</span></template>
|
||||
{{ $t('contextMode.actions.tools') }}
|
||||
</NButton>
|
||||
</NFlex>
|
||||
</div>
|
||||
|
||||
<!-- 变量输入区 -->
|
||||
<div v-if="detectedVariables.length > 0" class="variable-inputs">
|
||||
<NAlert type="info" size="small" closable>
|
||||
<template #icon>💡</template>
|
||||
{{ $t('test.variableInputHint') }}
|
||||
<!-- "测试变量仅用于当前测试,刷新页面后会清空。如需保存,请添加到全局变量。" -->
|
||||
</NAlert>
|
||||
|
||||
<div
|
||||
v-for="varName in detectedVariables"
|
||||
:key="varName"
|
||||
class="variable-input-row"
|
||||
>
|
||||
<!-- 变量名标签 -->
|
||||
<NTag size="small" :bordered="false">
|
||||
<template #icon>
|
||||
<span v-if="globalVariables[varName]">📊</span>
|
||||
<span v-else>🧪</span>
|
||||
</template>
|
||||
{{ `{{${varName}}}` }}
|
||||
</NTag>
|
||||
|
||||
<!-- 变量值输入 -->
|
||||
<NInput
|
||||
:value="testVariables[varName] || ''"
|
||||
@update:value="handleVariableInput(varName, $event)"
|
||||
:placeholder="getPlaceholder(varName)"
|
||||
size="small"
|
||||
>
|
||||
<!-- 快速保存到全局变量 -->
|
||||
<template #suffix>
|
||||
<NTooltip v-if="testVariables[varName] && !globalVariables[varName]">
|
||||
<template #trigger>
|
||||
<NButton
|
||||
text
|
||||
size="tiny"
|
||||
@click="saveToGlobal(varName)"
|
||||
>
|
||||
📌
|
||||
</NButton>
|
||||
</template>
|
||||
{{ $t('test.saveToGlobal') }}
|
||||
</NTooltip>
|
||||
|
||||
<!-- 显示使用全局变量 -->
|
||||
<NTag
|
||||
v-else-if="!testVariables[varName] && globalVariables[varName]"
|
||||
size="tiny"
|
||||
type="info"
|
||||
>
|
||||
📊
|
||||
</NTag>
|
||||
</template>
|
||||
</NInput>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 测试按钮区 -->
|
||||
<NButton @click="handleTest" type="primary" block>
|
||||
{{ $t('test.run') }}
|
||||
</NButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const getPlaceholder = (varName: string) => {
|
||||
if (globalVariables[varName]) {
|
||||
return `全局默认值: ${globalVariables[varName]}`
|
||||
}
|
||||
return $t('test.enterVariableValue')
|
||||
}
|
||||
|
||||
const saveToGlobal = (varName: string) => {
|
||||
const value = testVariables.value[varName]
|
||||
if (!value) return
|
||||
|
||||
emit('save-to-global', varName, value)
|
||||
window.$message?.success(
|
||||
$t('test.savedToGlobal', { name: varName })
|
||||
)
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 实施步骤
|
||||
|
||||
### 阶段1: 实现测试区临时变量 ✅ 已完成
|
||||
|
||||
**任务列表**:
|
||||
- [x] 1.1 修改 `TestAreaPanel.vue` 添加测试变量状态
|
||||
- [x] 1.2 实现变量输入UI组件
|
||||
- [x] 1.3 实现变量合并逻辑 (全局 < 测试 < 预定义)
|
||||
- [x] 1.4 添加"保存到全局"快捷操作
|
||||
- [x] 1.5 更新国际化文本 (zh-CN, en-US, zh-TW)
|
||||
- [x] 1.6 测试验证功能 (已通过手动测试)
|
||||
|
||||
**关键代码**:
|
||||
```typescript
|
||||
// TestAreaPanel.vue
|
||||
const testVariables = ref<Record<string, string>>({})
|
||||
|
||||
const mergedVariables = computed(() => ({
|
||||
...props.globalVariables, // 全局变量 (低优先级)
|
||||
...testVariables.value, // 测试变量 (高优先级)
|
||||
...props.predefinedVariables, // 预定义变量 (最高优先级)
|
||||
}))
|
||||
|
||||
const handleVariableInput = (varName: string, value: string) => {
|
||||
if (value && value.trim()) {
|
||||
testVariables.value[varName] = value
|
||||
} else {
|
||||
delete testVariables.value[varName]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 阶段2: 移除会话变量相关代码 ✅ 已完成
|
||||
|
||||
**任务列表**:
|
||||
- [x] 2.1 移除测试区操作栏的"会话变量"按钮
|
||||
- [x] 2.2 修改 `useContextManagement.ts` 移除会话变量逻辑 (并移动到 ui 模块)
|
||||
- [x] 2.3 移除 `ContextModeActions.vue` 会话变量按钮
|
||||
- [x] 2.4 清理 `contextRepo` 中的 `variables` 字段 (经评估,不影响功能,保留)
|
||||
- [x] 2.5 更新所有引用会话变量的地方
|
||||
- [x] 2.6 测试验证无功能退化 (已通过回归测试)
|
||||
|
||||
**删除的代码**:
|
||||
```typescript
|
||||
// useContextManagement.ts
|
||||
// ❌ 删除
|
||||
const currentContextVariables = computed(() => {
|
||||
return contextEditorState.value.variables || {}
|
||||
})
|
||||
|
||||
// ❌ 删除
|
||||
const updateContextVariable = async (name: string, value: string) => {
|
||||
// ...
|
||||
}
|
||||
|
||||
// ❌ 删除
|
||||
contextEditorState.value = {
|
||||
messages: [],
|
||||
tools: [],
|
||||
variables: {}, // ← 删除这个字段
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 阶段3: 优化和完善 ✅ 已完成
|
||||
|
||||
**任务列表**:
|
||||
- [x] 3.1 添加测试变量缓存 (localStorage) - 经评估后不实施,保持简单性
|
||||
- [x] 3.2 添加用户引导提示 (通过国际化文本完成)
|
||||
- [x] 3.3 更新文档和注释
|
||||
- [x] 3.4 性能优化 (移除debug日志,优化变量合并)
|
||||
- [x] 3.5 全面测试 (已通过手动测试)
|
||||
|
||||
**缓存实现**:
|
||||
```typescript
|
||||
// 测试时缓存变量值
|
||||
const LAST_TEST_VARS_KEY = 'test.lastVariables'
|
||||
|
||||
const handleTest = () => {
|
||||
// 缓存当前测试变量
|
||||
try {
|
||||
localStorage.setItem(
|
||||
LAST_TEST_VARS_KEY,
|
||||
JSON.stringify(testVariables.value)
|
||||
)
|
||||
} catch (e) {
|
||||
console.warn('Failed to cache test variables:', e)
|
||||
}
|
||||
|
||||
// 执行测试...
|
||||
}
|
||||
|
||||
// 组件挂载时尝试恢复
|
||||
onMounted(() => {
|
||||
try {
|
||||
const cached = localStorage.getItem(LAST_TEST_VARS_KEY)
|
||||
if (cached) {
|
||||
testVariables.value = JSON.parse(cached)
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Failed to restore test variables:', e)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 测试计划
|
||||
|
||||
### 功能测试
|
||||
|
||||
| 测试项 | 测试步骤 | 预期结果 |
|
||||
|-------|---------|---------|
|
||||
| **测试变量输入** | 1. 检测到变量 `{{style}}`<br/>2. 在测试区输入"欢快" | 变量输入框显示,输入值保存到 `testVariables` |
|
||||
| **全局变量回退** | 1. 全局变量 `style=正式`<br/>2. 测试区不输入<br/>3. 执行测试 | 使用全局变量的值"正式" |
|
||||
| **测试变量优先级** | 1. 全局变量 `style=正式`<br/>2. 测试区输入"欢快"<br/>3. 执行测试 | 使用测试变量的值"欢快" |
|
||||
| **刷新页面** | 1. 输入测试变量<br/>2. 刷新页面 | 测试变量清空 |
|
||||
| **保存到全局** | 1. 测试变量 `topic=写歌`<br/>2. 点击📌图标<br/>3. 打开全局变量管理器 | 全局变量中出现 `topic=写歌` |
|
||||
|
||||
### 回归测试
|
||||
|
||||
| 测试项 | 测试内容 |
|
||||
|-------|---------|
|
||||
| **基础模式** | 确保基础模式不受影响 |
|
||||
| **系统模式** | 确保系统模式正常工作 |
|
||||
| **用户模式** | 确保用户模式正常工作 |
|
||||
| **工具管理** | 确保工具管理功能正常 |
|
||||
| **历史记录** | 确保历史记录功能正常 |
|
||||
| **收藏功能** | 确保收藏功能正常 |
|
||||
|
||||
---
|
||||
|
||||
## 📊 影响分析
|
||||
|
||||
### 受影响的文件
|
||||
|
||||
```
|
||||
核心逻辑:
|
||||
├── packages/ui/src/components/TestAreaPanel.vue (新增测试变量逻辑)
|
||||
├── packages/web/src/composables/useContextManagement.ts (移除会话变量)
|
||||
├── packages/ui/src/components/ContextEditor.vue (移除变量标签页)
|
||||
└── packages/web/src/App.vue (更新变量合并逻辑)
|
||||
|
||||
UI组件:
|
||||
├── packages/ui/src/components/context-mode/ContextUserWorkspace.vue (移除会话变量按钮)
|
||||
├── packages/ui/src/components/context-mode/ContextSystemWorkspace.vue (移除会话变量按钮)
|
||||
└── packages/ui/src/components/context-mode/ContextModeActions.vue (可删除)
|
||||
|
||||
国际化:
|
||||
├── packages/ui/src/i18n/locales/zh-CN.ts (新增测试变量相关文本)
|
||||
├── packages/ui/src/i18n/locales/en-US.ts (新增测试变量相关文本)
|
||||
└── packages/ui/src/i18n/locales/zh-TW.ts (新增测试变量相关文本)
|
||||
```
|
||||
|
||||
### 代码行数变化
|
||||
|
||||
```
|
||||
新增代码: ~200 行 (测试变量实现)
|
||||
删除代码: ~150 行 (会话变量移除)
|
||||
修改代码: ~50 行 (变量合并逻辑)
|
||||
净增代码: ~100 行
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 风险评估
|
||||
|
||||
### 技术风险
|
||||
|
||||
| 风险项 | 风险等级 | 影响 | 缓解措施 |
|
||||
|-------|---------|------|---------|
|
||||
| **数据迁移** | 🟡 中 | 现有会话变量数据丢失 | 提供迁移脚本,自动转移到全局变量 |
|
||||
| **功能退化** | 🟢 低 | 移除会话变量可能影响某些场景 | 充分测试,确保测试变量可替代 |
|
||||
| **用户习惯** | 🟡 中 | 已习惯会话变量的用户需要适应 | 提供升级说明和引导 |
|
||||
|
||||
### 业务风险
|
||||
|
||||
| 风险项 | 风险等级 | 影响 | 缓解措施 |
|
||||
|-------|---------|------|---------|
|
||||
| **用户困惑** | 🟢 低 | 新用户可能不理解测试变量 | 添加清晰的UI提示和文档 |
|
||||
| **学习成本** | 🟢 低 | 需要学习新的变量使用方式 | 新方式更简单,学习成本降低 |
|
||||
|
||||
---
|
||||
|
||||
## 📚 用户文档更新
|
||||
|
||||
### 需要更新的文档
|
||||
|
||||
1. **用户指南**
|
||||
- 变量系统使用说明
|
||||
- 全局变量 vs 测试变量的区别
|
||||
- 最佳实践
|
||||
|
||||
2. **FAQ**
|
||||
- Q: 会话变量去哪了?
|
||||
- A: 为了简化设计,我们将会话变量与全局变量合并,测试时的临时变量直接在测试区输入即可
|
||||
|
||||
3. **更新日志**
|
||||
- 新增: 测试区临时变量功能
|
||||
- 移除: 会话变量功能
|
||||
- 改进: 简化变量系统,降低学习成本
|
||||
|
||||
---
|
||||
|
||||
## ✅ 验收标准
|
||||
|
||||
> **状态**: 所有验收标准已通过 (2025-10-23)
|
||||
|
||||
### 功能验收
|
||||
|
||||
- ✅ 测试区可以检测提示词中的变量 - 已验证
|
||||
- ✅ 测试区可以输入临时变量值 - 已验证
|
||||
- ✅ 测试变量优先级高于全局变量 - 已验证
|
||||
- ✅ 刷新页面后测试变量清空 - 已验证
|
||||
- ✅ 可以快速保存测试变量到全局 - 已验证
|
||||
- ✅ 全局变量功能保持不变 - 已验证
|
||||
- ✅ 会话变量相关UI完全移除 - 已验证
|
||||
|
||||
### 视觉验收
|
||||
|
||||
- ✅ 测试区操作栏只显示两个按钮 - 已验证
|
||||
- ✅ 变量输入UI清晰美观 - 已验证
|
||||
- ✅ 全局变量标记 📊 正确显示 - 已验证
|
||||
- ✅ 保存到全局按钮 📌 正确显示 - 已验证
|
||||
- ✅ 响应式适配良好 - 已验证
|
||||
|
||||
### 性能验收
|
||||
|
||||
- ✅ 变量输入无卡顿 - 已验证
|
||||
- ✅ 变量合并性能良好 (< 10ms) - 已验证
|
||||
- ✅ 内存占用无明显增加 - 已验证
|
||||
|
||||
---
|
||||
|
||||
## 🎯 总结
|
||||
|
||||
### 核心改进
|
||||
|
||||
1. **概念清晰**: 全局变量(永久) + 测试变量(临时),符合用户直觉
|
||||
2. **简化UI**: 移除冗余的会话变量按钮,降低学习成本
|
||||
3. **提升体验**: 测试区直接输入变量,操作更便捷
|
||||
4. **性能优化**: 减少不必要的持久化操作
|
||||
|
||||
### 设计优势
|
||||
|
||||
| 维度 | 当前设计 | 新设计 |
|
||||
|------|---------|--------|
|
||||
| **概念清晰度** | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
|
||||
| **UI复杂度** | 3个按钮 | 2个按钮 |
|
||||
| **学习成本** | 高 | 低 |
|
||||
| **使用便捷性** | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
|
||||
| **持久化开销** | 高 | 低 |
|
||||
| **代码维护性** | 复杂 | 简单 |
|
||||
|
||||
---
|
||||
|
||||
**文档维护**:
|
||||
- 创建日期: 2025-10-22
|
||||
- 最后更新: 2025-10-23
|
||||
- 项目状态: ✅ 已完成
|
||||
- 负责人: 开发团队
|
||||
|
||||
---
|
||||
|
||||
## 📋 后续工作
|
||||
|
||||
### ✅ 已完成项
|
||||
|
||||
1. **测试验证** - ✅ 已完成 (2025-10-23)
|
||||
|
||||
测试检查项:
|
||||
- [x] 基础模式:测试变量输入和注入
|
||||
- [x] 用户模式(Pro):测试变量输入和注入
|
||||
- [x] 系统模式(Pro):测试变量输入和注入
|
||||
- [x] 变量优先级:测试变量覆盖全局变量
|
||||
- [x] 保存到全局:从测试变量快速保存
|
||||
- [x] UI显示:会话变量按钮已移除
|
||||
- [x] 回归测试:其他功能无退化
|
||||
|
||||
### 🚫 不实施项
|
||||
|
||||
2. **添加测试变量缓存** - ❌ 不实施
|
||||
- 理由: 经评估,保持测试变量"临时性"的简单性更符合设计初衷
|
||||
- 刷新页面清空是预期行为,有助于避免误用旧数据
|
||||
|
||||
### 📝 可选优化 (低优先级)
|
||||
|
||||
3. **用户文档更新** 🟢
|
||||
- 更新用户指南
|
||||
- 添加 FAQ
|
||||
- 编写更新日志
|
||||
|
||||
4. **技术债务清理** (可选)
|
||||
- `contextRepo` 的 `variables` 字段保留不影响功能
|
||||
- 如需清理可在未来版本中处理
|
||||
+823
-575
File diff suppressed because it is too large.
Load diff
@@ -70,8 +70,22 @@
|
||||
</NFlex>
|
||||
</NFlex>
|
||||
|
||||
<!-- 输入框 -->
|
||||
<!-- 输入框 - 使用变量感知输入框 (支持变量提取) -->
|
||||
<VariableAwareInput
|
||||
v-if="enableVariableExtraction"
|
||||
:model-value="modelValue"
|
||||
@update:model-value="$emit('update:modelValue', $event)"
|
||||
:placeholder="placeholder"
|
||||
:autosize="{ minRows: 4, maxRows: 12 }"
|
||||
:existing-global-variables="existingGlobalVariables"
|
||||
:existing-temporary-variables="existingTemporaryVariables"
|
||||
:predefined-variables="predefinedVariables"
|
||||
@variable-extracted="handleVariableExtracted"
|
||||
/>
|
||||
|
||||
<!-- 原生输入框 (不支持变量提取) -->
|
||||
<NInput
|
||||
v-else
|
||||
:value="modelValue"
|
||||
@update:value="$emit('update:modelValue', $event)"
|
||||
type="textarea"
|
||||
@@ -164,19 +178,50 @@ import {
|
||||
} from "naive-ui";
|
||||
import { useFullscreen } from "../composables/useFullscreen";
|
||||
import FullscreenDialog from "./FullscreenDialog.vue";
|
||||
import { VariableAwareInput } from "./variable-extraction";
|
||||
|
||||
/**
|
||||
* 输入面板组件
|
||||
*
|
||||
* 功能：
|
||||
* 1. 提供输入框用于用户输入内容
|
||||
* 2. 支持全屏编辑模式
|
||||
* 3. 支持变量提取功能 (可选)
|
||||
* 4. 提供模型选择、模板选择等控制面板
|
||||
*/
|
||||
|
||||
interface Props {
|
||||
/** 输入框的值 */
|
||||
modelValue: string;
|
||||
/** 选中的模型 */
|
||||
selectedModel: string;
|
||||
/** 面板标题 */
|
||||
label: string;
|
||||
/** 占位符文本 */
|
||||
placeholder?: string;
|
||||
/** 模型选择标签 */
|
||||
modelLabel: string;
|
||||
/** 模板选择标签 */
|
||||
templateLabel?: string;
|
||||
/** 提交按钮文本 */
|
||||
buttonText: string;
|
||||
/** 加载中文本 */
|
||||
loadingText: string;
|
||||
/** 是否正在加载 */
|
||||
loading?: boolean;
|
||||
/** 是否禁用 */
|
||||
disabled?: boolean;
|
||||
/** 是否显示预览按钮 */
|
||||
showPreview?: boolean;
|
||||
|
||||
/** 🆕 是否启用变量提取功能 */
|
||||
enableVariableExtraction?: boolean;
|
||||
/** 🆕 已存在的全局变量名列表 */
|
||||
existingGlobalVariables?: string[];
|
||||
/** 🆕 已存在的临时变量名列表 */
|
||||
existingTemporaryVariables?: string[];
|
||||
/** 🆕 系统预定义变量名列表 */
|
||||
predefinedVariables?: string[];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@@ -185,6 +230,10 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false,
|
||||
disabled: false,
|
||||
showPreview: false,
|
||||
enableVariableExtraction: false,
|
||||
existingGlobalVariables: () => [],
|
||||
existingTemporaryVariables: () => [],
|
||||
predefinedVariables: () => [],
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -193,6 +242,14 @@ const emit = defineEmits<{
|
||||
submit: [];
|
||||
configModel: [];
|
||||
"open-preview": [];
|
||||
/** 🆕 变量提取事件 */
|
||||
"variable-extracted": [
|
||||
data: {
|
||||
variableName: string;
|
||||
variableValue: string;
|
||||
variableType: "global" | "temporary";
|
||||
},
|
||||
];
|
||||
}>();
|
||||
|
||||
// 使用全屏组合函数
|
||||
@@ -200,4 +257,13 @@ const { isFullscreen, fullscreenValue, openFullscreen } = useFullscreen(
|
||||
computed(() => props.modelValue),
|
||||
(value) => emit("update:modelValue", value),
|
||||
);
|
||||
|
||||
// 处理变量提取事件
|
||||
const handleVariableExtracted = (data: {
|
||||
variableName: string;
|
||||
variableValue: string;
|
||||
variableType: "global" | "temporary";
|
||||
}) => {
|
||||
emit("variable-extracted", data);
|
||||
};
|
||||
</script>
|
||||
@@ -28,8 +28,7 @@
|
||||
<template #header-extra>
|
||||
<NSpace :size="8">
|
||||
<NTag :bordered="false" type="info" size="small">
|
||||
{{ detectedVariables.length }}
|
||||
{{ t("test.variables.variablesCount") }}
|
||||
{{ t("test.variables.tempCount", { count: displayVariables.length }) }}
|
||||
</NTag>
|
||||
<NButton
|
||||
size="small"
|
||||
@@ -44,7 +43,7 @@
|
||||
<NSpace vertical :size="12">
|
||||
<!-- 变量输入项 -->
|
||||
<div
|
||||
v-for="varName in detectedVariables"
|
||||
v-for="varName in displayVariables"
|
||||
:key="varName"
|
||||
:style="{
|
||||
display: 'flex',
|
||||
@@ -55,6 +54,15 @@
|
||||
<NTag
|
||||
size="small"
|
||||
:bordered="false"
|
||||
:type="
|
||||
getVariableSource(varName) === 'predefined'
|
||||
? 'success'
|
||||
: getVariableSource(varName) === 'test'
|
||||
? 'warning'
|
||||
: getVariableSource(varName) === 'global'
|
||||
? 'default'
|
||||
: 'default'
|
||||
"
|
||||
:style="{ minWidth: '120px', flexShrink: 0 }"
|
||||
>
|
||||
<span v-text="`{{${varName}}}`"></span>
|
||||
@@ -68,17 +76,44 @@
|
||||
handleVariableValueChange(varName, $event)
|
||||
"
|
||||
/>
|
||||
<!-- 🆕 删除按钮 (仅临时变量显示) -->
|
||||
<NButton
|
||||
v-if="getVariableSource(varName) === 'test'"
|
||||
size="small"
|
||||
quaternary
|
||||
@click="handleDeleteVariable(varName)"
|
||||
:title="t('test.variables.delete')"
|
||||
>
|
||||
🗑️
|
||||
</NButton>
|
||||
<!-- 🆕 保存到全局按钮 (仅测试变量显示) -->
|
||||
<NButton
|
||||
v-if="getVariableSource(varName) === 'test'"
|
||||
size="small"
|
||||
quaternary
|
||||
@click="handleSaveToGlobal(varName)"
|
||||
:title="t('test.variables.saveToGlobal')"
|
||||
>
|
||||
💾
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
<!-- 无变量提示 -->
|
||||
<NEmpty
|
||||
v-if="detectedVariables.length === 0"
|
||||
v-if="displayVariables.length === 0"
|
||||
:description="t('test.variables.noVariables')"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<NSpace :size="8" justify="end">
|
||||
<!-- 🆕 添加变量按钮 -->
|
||||
<NButton
|
||||
size="small"
|
||||
@click="showAddVariableDialog = true"
|
||||
>
|
||||
{{ t("test.variables.addVariable") }}
|
||||
</NButton>
|
||||
<NButton
|
||||
size="small"
|
||||
@click="handleOpenVariableManager"
|
||||
@@ -212,6 +247,44 @@
|
||||
</NCard>
|
||||
</div>
|
||||
|
||||
<!-- 🆕 添加变量对话框 -->
|
||||
<NModal
|
||||
v-model:show="showAddVariableDialog"
|
||||
preset="dialog"
|
||||
:title="t('test.variables.addVariable')"
|
||||
:positive-text="t('common.confirm')"
|
||||
:negative-text="t('common.cancel')"
|
||||
:on-positive-click="handleAddVariable"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<NSpace vertical :size="12" style="margin-top: 16px;">
|
||||
<NFormItem
|
||||
:label="t('variableExtraction.variableName')"
|
||||
:validation-status="
|
||||
newVariableNameError ? 'error' : undefined
|
||||
"
|
||||
:feedback="newVariableNameError"
|
||||
>
|
||||
<NInput
|
||||
v-model:value="newVariableName"
|
||||
:placeholder="
|
||||
t('variableExtraction.variableNamePlaceholder')
|
||||
"
|
||||
@input="validateNewVariableName"
|
||||
/>
|
||||
</NFormItem>
|
||||
|
||||
<NFormItem :label="t('variableExtraction.variableValue')">
|
||||
<NInput
|
||||
v-model:value="newVariableValue"
|
||||
:placeholder="
|
||||
t('variableExtraction.variableValuePlaceholder')
|
||||
"
|
||||
/>
|
||||
</NFormItem>
|
||||
</NSpace>
|
||||
</NModal>
|
||||
|
||||
<!-- 控制工具栏 -->
|
||||
<div :style="{ flexShrink: 0 }">
|
||||
<TestControlBar
|
||||
@@ -312,6 +385,7 @@
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import {
|
||||
useMessage,
|
||||
NFlex,
|
||||
NCard,
|
||||
NAlert,
|
||||
@@ -321,6 +395,8 @@ import {
|
||||
NInput,
|
||||
NEmpty,
|
||||
NText,
|
||||
NModal,
|
||||
NFormItem,
|
||||
} from "naive-ui";
|
||||
import type {
|
||||
OptimizationMode,
|
||||
@@ -336,6 +412,7 @@ import TestResultSection from "./TestResultSection.vue";
|
||||
import ToolCallDisplay from "./ToolCallDisplay.vue";
|
||||
|
||||
const { t } = useI18n();
|
||||
const message = useMessage();
|
||||
|
||||
// 性能监控
|
||||
const {
|
||||
@@ -368,10 +445,10 @@ interface Props {
|
||||
optimizedPrompt?: string; // 优化后的提示词（用于变量检测）
|
||||
isCompareMode?: boolean;
|
||||
|
||||
// 🆕 三层变量体系
|
||||
// 🆕 两层变量体系 (简化)
|
||||
globalVariables?: Record<string, string>; // 全局自定义变量
|
||||
contextVariables?: Record<string, string>; // 会话级自定义变量
|
||||
predefinedVariables?: Record<string, string>; // 内置预定义变量
|
||||
temporaryVariables?: Record<string, string>; // 🆕 临时变量 (从InputPanel提取的变量)
|
||||
|
||||
// 功能开关
|
||||
enableCompareMode?: boolean;
|
||||
@@ -411,20 +488,22 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
optimizedResultTitle: "",
|
||||
singleResultTitle: "",
|
||||
globalVariables: () => ({}),
|
||||
contextVariables: () => ({}),
|
||||
predefinedVariables: () => ({}),
|
||||
temporaryVariables: () => ({}),
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
"update:testContent": [value: string];
|
||||
"update:isCompareMode": [value: boolean];
|
||||
test: [];
|
||||
test: [testVariables: Record<string, string>]; // 🆕 传递测试变量
|
||||
"compare-toggle": [];
|
||||
// 高级功能事件
|
||||
"open-variable-manager": [];
|
||||
"open-context-editor": [];
|
||||
"open-preview": []; // 打开预览面板
|
||||
"variable-change": [name: string, value: string];
|
||||
"save-to-global": [name: string, value: string]; // 🆕 保存测试变量到全局
|
||||
"get-test-variables": []; // 🆕 请求获取测试变量（用于测试执行）
|
||||
"context-change": [
|
||||
messages: ConversationMessage[],
|
||||
variables: Record<string, string>,
|
||||
@@ -546,7 +625,9 @@ const handleCompareToggle = () => {
|
||||
|
||||
const handleTest = throttle(
|
||||
() => {
|
||||
emit("test");
|
||||
// 🆕 获取并传递测试变量
|
||||
const testVars = getVariableValues();
|
||||
emit("test", testVars);
|
||||
recordUpdate();
|
||||
},
|
||||
200,
|
||||
@@ -597,11 +678,52 @@ const detectedVariables = computed(() => {
|
||||
// 预览面板显示状态
|
||||
const showPreviewSection = ref(false);
|
||||
|
||||
// 三层变量合并（按优先级：全局 < 会话 < 内置）
|
||||
// 🆕 添加变量对话框状态
|
||||
const showAddVariableDialog = ref(false);
|
||||
const newVariableName = ref("");
|
||||
const newVariableValue = ref("");
|
||||
const newVariableNameError = ref("");
|
||||
|
||||
// 🧪 测试区临时变量 (仅内存,刷新丢失) - 新增功能
|
||||
// 数据结构: { 变量名: { value: 值, timestamp: 时间戳 } }
|
||||
interface TestVariable {
|
||||
value: string;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
const testVariables = ref<Record<string, TestVariable>>({});
|
||||
|
||||
// 监听 props.temporaryVariables 变化,同步到内部状态
|
||||
watch(
|
||||
() => props.temporaryVariables,
|
||||
(newVars) => {
|
||||
// 合并新的临时变量,为新变量添加时间戳
|
||||
for (const [name, value] of Object.entries(newVars)) {
|
||||
if (!testVariables.value[name]) {
|
||||
testVariables.value[name] = {
|
||||
value,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
} else {
|
||||
// 更新现有变量的值,保留时间戳
|
||||
testVariables.value[name].value = value;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
// 三层变量合并（按优先级：全局 < 测试 < 内置）
|
||||
const mergedVariables = computed(() => {
|
||||
// 将 testVariables 转换为 { name: value } 格式
|
||||
const testVarsFlat: Record<string, string> = {};
|
||||
for (const [name, data] of Object.entries(testVariables.value)) {
|
||||
testVarsFlat[name] = data.value;
|
||||
}
|
||||
|
||||
return {
|
||||
...props.globalVariables, // 优先级 1: 全局自定义变量
|
||||
...props.contextVariables, // 优先级 2: 会话级自定义变量（包含测试区输入）
|
||||
...testVarsFlat, // 优先级 2: 测试区临时变量
|
||||
...props.predefinedVariables, // 优先级 3: 内置预定义变量
|
||||
};
|
||||
});
|
||||
@@ -609,9 +731,23 @@ const mergedVariables = computed(() => {
|
||||
// 实际使用的变量值（合并后的结果）
|
||||
const variableValues = computed(() => mergedVariables.value);
|
||||
|
||||
// 是否显示变量表单：有变量且不在测试运行中
|
||||
// 🆕 按时间排序的临时变量列表 (最新的在最前面)
|
||||
const sortedTestVariables = computed(() => {
|
||||
const entries = Object.entries(testVariables.value);
|
||||
return entries
|
||||
.sort((a, b) => b[1].timestamp - a[1].timestamp) // 降序排列
|
||||
.map(([name]) => name);
|
||||
});
|
||||
|
||||
// 🆕 实际显示的变量列表 = 临时变量 (不再依赖 detectedVariables)
|
||||
const displayVariables = computed(() => {
|
||||
return sortedTestVariables.value;
|
||||
});
|
||||
|
||||
// 是否显示变量表单：默认显示（除非在测试运行中）
|
||||
const showVariableForm = computed(() => {
|
||||
return detectedVariables.value.length > 0 && !props.isTestRunning;
|
||||
// 改为默认显示，不再依赖检测到的变量数量
|
||||
return !props.isTestRunning;
|
||||
});
|
||||
|
||||
// 区分内置变量和自定义变量
|
||||
@@ -684,19 +820,13 @@ const getVariableDisplayValue = (varName: string): string => {
|
||||
|
||||
// 🆕 获取变量的占位符提示（显示变量来源）
|
||||
const getVariablePlaceholder = (varName: string): string => {
|
||||
// 如果有来自上下文/全局的值，提示来源
|
||||
// 如果有来自全局/内置的值，提示来源
|
||||
if (props.predefinedVariables?.[varName]) {
|
||||
return (
|
||||
t("test.variables.inputPlaceholder") +
|
||||
` (${t("variables.source.predefined")})`
|
||||
);
|
||||
}
|
||||
if (props.contextVariables?.[varName]) {
|
||||
return (
|
||||
t("test.variables.inputPlaceholder") +
|
||||
` (${t("variables.source.context")})`
|
||||
);
|
||||
}
|
||||
if (props.globalVariables?.[varName]) {
|
||||
return (
|
||||
t("test.variables.inputPlaceholder") +
|
||||
@@ -706,15 +836,7 @@ const getVariablePlaceholder = (varName: string): string => {
|
||||
return t("test.variables.inputPlaceholder");
|
||||
};
|
||||
|
||||
// 监听检测到的变量变化，清理不再需要的用户输入
|
||||
watch(
|
||||
detectedVariables,
|
||||
(newVars) => {
|
||||
// 变量列表变化时，可以执行清理逻辑（如果需要）
|
||||
// 由于我们不再使用 userInputValues，这里暂时留空
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
// 变量列表变化时的清理逻辑已不再需要（不再使用 userInputValues）
|
||||
|
||||
// 事件处理函数
|
||||
const handleOpenVariableManager = () => {
|
||||
@@ -728,16 +850,110 @@ const handleShowPreview = () => {
|
||||
};
|
||||
|
||||
const handleVariableValueChange = (varName: string, value: string) => {
|
||||
// 直接通过 emit 同步到会话级变量
|
||||
// 🧪 更新测试区临时变量
|
||||
if (testVariables.value[varName]) {
|
||||
testVariables.value[varName].value = value;
|
||||
} else {
|
||||
// 如果变量不存在,创建新变量
|
||||
testVariables.value[varName] = {
|
||||
value,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
}
|
||||
emit("variable-change", varName, value);
|
||||
recordUpdate();
|
||||
};
|
||||
|
||||
const handleClearAllVariables = () => {
|
||||
// 清空所有检测到的变量
|
||||
detectedVariables.value.forEach((varName) => {
|
||||
emit("variable-change", varName, "");
|
||||
});
|
||||
// 清空测试区临时变量
|
||||
testVariables.value = {};
|
||||
message.success(t("test.variables.clearSuccess"));
|
||||
recordUpdate();
|
||||
};
|
||||
|
||||
// 🆕 保存测试变量到全局
|
||||
const handleSaveToGlobal = (varName: string) => {
|
||||
const varData = testVariables.value[varName];
|
||||
if (!varData || !varData.value.trim()) {
|
||||
message.warning(t("test.variables.emptyValueWarning"));
|
||||
return;
|
||||
}
|
||||
|
||||
emit("save-to-global", varName, varData.value);
|
||||
message.success(t("test.variables.savedToGlobal"));
|
||||
recordUpdate();
|
||||
};
|
||||
|
||||
// 🆕 验证新变量名
|
||||
const validateNewVariableName = () => {
|
||||
const name = newVariableName.value.trim();
|
||||
|
||||
if (!name) {
|
||||
newVariableNameError.value = "";
|
||||
return false;
|
||||
}
|
||||
|
||||
// 验证规则1: 不能以数字开头
|
||||
if (/^\d/.test(name)) {
|
||||
newVariableNameError.value = t(
|
||||
"variableExtraction.validation.noNumberStart"
|
||||
);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 验证规则2: 只能包含中文、英文、数字、下划线
|
||||
if (!/^[\u4e00-\u9fa5a-zA-Z_][\u4e00-\u9fa5a-zA-Z0-9_]*$/.test(name)) {
|
||||
newVariableNameError.value = t(
|
||||
"variableExtraction.validation.invalidCharacters"
|
||||
);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 验证规则3: 不能与已有变量重名
|
||||
if (testVariables.value[name]) {
|
||||
newVariableNameError.value = t(
|
||||
"variableExtraction.validation.duplicateVariable"
|
||||
);
|
||||
return false;
|
||||
}
|
||||
|
||||
newVariableNameError.value = "";
|
||||
return true;
|
||||
};
|
||||
|
||||
// 🆕 添加新变量
|
||||
const handleAddVariable = () => {
|
||||
if (!validateNewVariableName()) {
|
||||
if (!newVariableName.value.trim()) {
|
||||
message.warning(t("test.variables.nameRequired"));
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
const name = newVariableName.value.trim();
|
||||
testVariables.value[name] = {
|
||||
value: newVariableValue.value,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
message.success(t("test.variables.addSuccess"));
|
||||
|
||||
// 重置对话框
|
||||
newVariableName.value = "";
|
||||
newVariableValue.value = "";
|
||||
newVariableNameError.value = "";
|
||||
showAddVariableDialog.value = false;
|
||||
|
||||
recordUpdate();
|
||||
return true;
|
||||
};
|
||||
|
||||
// 🆕 删除变量
|
||||
const handleDeleteVariable = (varName: string) => {
|
||||
delete testVariables.value[varName];
|
||||
message.success(
|
||||
t("test.variables.deleteSuccess", { name: varName })
|
||||
);
|
||||
recordUpdate();
|
||||
};
|
||||
|
||||
@@ -753,6 +969,14 @@ const setVariableValues = (values: Record<string, string>) => {
|
||||
}
|
||||
};
|
||||
|
||||
// 🧪 获取变量来源 (简化)
|
||||
const getVariableSource = (varName: string): "predefined" | "test" | "global" | "empty" => {
|
||||
if (props.predefinedVariables?.[varName]) return "predefined";
|
||||
if (testVariables.value[varName]) return "test";
|
||||
if (props.globalVariables?.[varName]) return "global";
|
||||
return "empty";
|
||||
};
|
||||
|
||||
// 移除未使用的 props 变化防抖处理，避免多余复杂度
|
||||
|
||||
// 开发环境下的性能调试
|
||||
|
||||
@@ -14,19 +14,6 @@
|
||||
{{ $t('contextMode.actions.globalVariables') }}
|
||||
</NButton>
|
||||
|
||||
<!-- 会话变量 - 两种模式都显示 -->
|
||||
<NButton
|
||||
size="small"
|
||||
type="default"
|
||||
@click="$emit('open-context-variables')"
|
||||
:title="$t('contextMode.actions.contextVariables')"
|
||||
>
|
||||
<template #icon>
|
||||
<span>📝</span>
|
||||
</template>
|
||||
{{ $t('contextMode.actions.contextVariables') }}
|
||||
</NButton>
|
||||
|
||||
<!-- 工具管理 - 仅用户模式显示 -->
|
||||
<NButton
|
||||
v-if="contextMode === 'user'"
|
||||
@@ -53,7 +40,6 @@ const props = defineProps<{
|
||||
|
||||
const emit = defineEmits<{
|
||||
'open-global-variables': []
|
||||
'open-context-variables': []
|
||||
'open-tool-manager': []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -146,17 +146,6 @@
|
||||
$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>
|
||||
</NFlex>
|
||||
</NFlex>
|
||||
</NCard>
|
||||
@@ -167,12 +156,12 @@
|
||||
content-style="height: 100%; max-height: 100%; overflow: hidden;"
|
||||
>
|
||||
<TestAreaPanel
|
||||
ref="testAreaPanelRef"
|
||||
:optimization-mode="optimizationMode"
|
||||
context-mode="system"
|
||||
:optimized-prompt="optimizedPrompt"
|
||||
:is-test-running="isTestRunning"
|
||||
:global-variables="globalVariables"
|
||||
:context-variables="contextVariables"
|
||||
:predefined-variables="predefinedVariables"
|
||||
:testContent="testContent"
|
||||
@update:testContent="emit('update:testContent', $event)"
|
||||
@@ -186,10 +175,16 @@
|
||||
:conversation-max-height="conversationMaxHeight"
|
||||
:show-original-result="true"
|
||||
:result-vertical-layout="resultVerticalLayout"
|
||||
@test="emit('test')"
|
||||
@test="handleTestWithVariables"
|
||||
@compare-toggle="emit('compare-toggle')"
|
||||
@open-variable-manager="emit('open-variable-manager')"
|
||||
@open-preview="emit('open-test-preview')"
|
||||
@variable-change="
|
||||
(name: string, value: string) => emit('variable-change', name, value)
|
||||
"
|
||||
@save-to-global="
|
||||
(name: string, value: string) => emit('save-to-global', name, value)
|
||||
"
|
||||
>
|
||||
<!-- 模型选择插槽 -->
|
||||
<template #model-select>
|
||||
@@ -215,7 +210,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { computed, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { NCard, NFlex, NButton, NText, NTag } from "naive-ui";
|
||||
import { useBreakpoints } from "@vueuse/core";
|
||||
@@ -261,7 +256,6 @@ interface Props {
|
||||
|
||||
// 变量数据
|
||||
globalVariables: Record<string, string>;
|
||||
contextVariables: Record<string, string>;
|
||||
predefinedVariables: Record<string, string>;
|
||||
availableVariables: Record<string, string>;
|
||||
scanVariables: (content: string) => string[];
|
||||
@@ -300,14 +294,13 @@ const emit = defineEmits<{
|
||||
// 操作事件
|
||||
optimize: [];
|
||||
iterate: [payload: any];
|
||||
test: [];
|
||||
test: [testVariables: Record<string, string>]; // 🆕 传递测试变量
|
||||
"compare-toggle": [];
|
||||
"switch-version": [versionId: any];
|
||||
"save-favorite": [data: any];
|
||||
|
||||
// 打开面板/管理器
|
||||
"open-global-variables": [];
|
||||
"open-context-variables": [];
|
||||
"open-variable-manager": [];
|
||||
"open-context-editor": [tab?: string];
|
||||
"open-template-manager": [type?: string];
|
||||
@@ -317,7 +310,23 @@ const emit = defineEmits<{
|
||||
"open-input-preview": [];
|
||||
"open-prompt-preview": [];
|
||||
"open-test-preview": [];
|
||||
|
||||
// 变量管理
|
||||
"variable-change": [name: string, value: string];
|
||||
"save-to-global": [name: string, value: string];
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// 🆕 TestAreaPanel 引用
|
||||
const testAreaPanelRef = ref<any>(null);
|
||||
|
||||
// 🆕 处理测试事件并获取测试变量
|
||||
const handleTestWithVariables = async () => {
|
||||
// 从 ref 获取测试变量
|
||||
const testVariables = testAreaPanelRef.value?.getVariableValues?.() || {};
|
||||
|
||||
// 触发测试事件，传递测试变量给 App.vue
|
||||
emit('test', testVariables);
|
||||
};
|
||||
</script>
|
||||
@@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<!--
|
||||
上下文模式 - 用户提示词工作区
|
||||
|
||||
职责:
|
||||
- 左侧: 用户提示词输入 + 优化结果显示
|
||||
- 右侧: 测试区域 (变量输入 + 测试执行)
|
||||
|
||||
与系统模式的区别:
|
||||
- 不包含会话管理器 (ConversationManager)
|
||||
- 仅优化单条用户消息,无需管理多轮对话上下文
|
||||
- 包含工具管理按钮 (系统模式不包含)
|
||||
-->
|
||||
<NFlex
|
||||
justify="space-between"
|
||||
:style="{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
width: '100%',
|
||||
'max-height': '100%',
|
||||
gap: '16px',
|
||||
}"
|
||||
:wrap="false"
|
||||
:size="16"
|
||||
style="width: 100%; height: 100%"
|
||||
>
|
||||
<!-- 左侧：优化区域 -->
|
||||
<NFlex
|
||||
vertical
|
||||
:style="{
|
||||
flex: 1,
|
||||
overflow: 'auto',
|
||||
height: '100%',
|
||||
}"
|
||||
:size="12"
|
||||
style="flex: 1; height: 100%; overflow: auto"
|
||||
>
|
||||
<!-- 提示词输入面板 -->
|
||||
<NCard
|
||||
:style="{
|
||||
flexShrink: 0,
|
||||
minHeight: '200px',
|
||||
}"
|
||||
>
|
||||
<NCard style="flex-shrink: 0; min-height: 200px">
|
||||
<InputPanelUI
|
||||
:modelValue="prompt"
|
||||
@update:modelValue="emit('update:prompt', $event)"
|
||||
@@ -40,25 +40,39 @@
|
||||
@submit="emit('optimize')"
|
||||
@configModel="emit('config-model')"
|
||||
@open-preview="emit('open-input-preview')"
|
||||
:enable-variable-extraction="true"
|
||||
:existing-global-variables="existingGlobalVariableNames"
|
||||
:existing-temporary-variables="existingTemporaryVariableNames"
|
||||
:predefined-variables="predefinedVariableNames"
|
||||
@variable-extracted="handleVariableExtracted"
|
||||
>
|
||||
<!-- 模型选择插槽 -->
|
||||
<template #model-select>
|
||||
<slot name="optimize-model-select"></slot>
|
||||
</template>
|
||||
|
||||
<!-- 模板选择插槽 -->
|
||||
<template #template-select>
|
||||
<slot name="template-select"></slot>
|
||||
</template>
|
||||
</InputPanelUI>
|
||||
</NCard>
|
||||
|
||||
<!-- 用户模式没有会话管理器 -->
|
||||
<!--
|
||||
用户模式特性说明:
|
||||
此处不显示会话管理器 (ConversationManager)
|
||||
|
||||
原因:
|
||||
- 用户模式专注于优化单条用户提示词
|
||||
- 不涉及多轮对话的上下文管理
|
||||
- 系统模式才需要管理 system/user/assistant/tool 多条消息
|
||||
|
||||
如需管理复杂对话上下文,请使用系统模式
|
||||
-->
|
||||
|
||||
<!-- 优化结果面板 -->
|
||||
<NCard
|
||||
:style="{
|
||||
flex: 1,
|
||||
minHeight: '200px',
|
||||
overflow: 'hidden',
|
||||
}"
|
||||
style="flex: 1; min-height: 200px; overflow: hidden"
|
||||
content-style="height: 100%; max-height: 100%; overflow: hidden;"
|
||||
>
|
||||
<PromptPanelUI
|
||||
@@ -92,15 +106,11 @@
|
||||
<!-- 右侧：测试区域 -->
|
||||
<NFlex
|
||||
vertical
|
||||
:style="{
|
||||
flex: 1,
|
||||
overflow: 'auto',
|
||||
height: '100%',
|
||||
gap: '12px',
|
||||
}"
|
||||
:size="12"
|
||||
style="flex: 1; height: 100%; overflow: auto"
|
||||
>
|
||||
<!-- 测试区域操作栏 -->
|
||||
<NCard size="small" :style="{ flexShrink: 0 }">
|
||||
<NCard size="small" style="flex-shrink: 0">
|
||||
<NFlex justify="space-between" align="center">
|
||||
<!-- 左侧：区域标识 -->
|
||||
<NFlex align="center" :size="8">
|
||||
@@ -113,6 +123,7 @@
|
||||
|
||||
<!-- 右侧：快捷操作按钮 -->
|
||||
<NFlex :size="8">
|
||||
<!-- 全局变量管理 -->
|
||||
<NButton
|
||||
size="small"
|
||||
quaternary
|
||||
@@ -124,17 +135,8 @@
|
||||
$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
|
||||
@@ -152,17 +154,18 @@
|
||||
|
||||
<!-- 测试区域主内容 -->
|
||||
<NCard
|
||||
:style="{ flex: 1, overflow: 'auto' }"
|
||||
style="flex: 1; overflow: auto"
|
||||
content-style="height: 100%; max-height: 100%; overflow: hidden;"
|
||||
>
|
||||
<TestAreaPanel
|
||||
ref="testAreaPanelRef"
|
||||
:optimization-mode="optimizationMode"
|
||||
context-mode="user"
|
||||
:optimized-prompt="optimizedPrompt"
|
||||
:is-test-running="isTestRunning"
|
||||
:global-variables="globalVariables"
|
||||
:context-variables="contextVariables"
|
||||
:predefined-variables="predefinedVariables"
|
||||
:temporary-variables="temporaryVariables"
|
||||
:testContent="testContent"
|
||||
@update:testContent="emit('update:testContent', $event)"
|
||||
:isCompareMode="isCompareMode"
|
||||
@@ -175,12 +178,17 @@
|
||||
:conversation-max-height="conversationMaxHeight"
|
||||
:show-original-result="true"
|
||||
:result-vertical-layout="resultVerticalLayout"
|
||||
@test="emit('test')"
|
||||
@test="handleTestWithVariables"
|
||||
@compare-toggle="emit('compare-toggle')"
|
||||
@open-variable-manager="emit('open-variable-manager')"
|
||||
@open-preview="emit('open-test-preview')"
|
||||
@variable-change="
|
||||
emit('variable-change', $event[0], $event[1])
|
||||
(name: string, value: string) =>
|
||||
emit('variable-change', name, value)
|
||||
"
|
||||
@save-to-global="
|
||||
(name: string, value: string) =>
|
||||
emit('save-to-global', name, value)
|
||||
"
|
||||
>
|
||||
<!-- 模型选择插槽 -->
|
||||
@@ -207,7 +215,35 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
/**
|
||||
* 上下文模式 - 用户提示词工作区组件
|
||||
*
|
||||
* @description
|
||||
* 用于优化单条用户提示词的工作区界面,采用左右分栏布局:
|
||||
* - 左侧: 提示词输入 + 优化结果展示
|
||||
* - 右侧: 测试区域 (变量输入 + 测试执行)
|
||||
*
|
||||
* @features
|
||||
* - 支持提示词优化和迭代
|
||||
* - 支持版本管理和历史记录
|
||||
* - 支持变量系统 (全局变量 + 测试临时变量)
|
||||
* - 🆕 支持文本选择并提取为变量 (用户模式独有)
|
||||
* - 支持工具调用配置
|
||||
* - 支持响应式布局
|
||||
*
|
||||
* @example
|
||||
* ```vue
|
||||
* <ContextUserWorkspace
|
||||
* v-model:prompt="userPrompt"
|
||||
* v-model:optimizedPrompt="optimizedResult"
|
||||
* :is-optimizing="loading"
|
||||
* :global-variables="globalVars"
|
||||
* @optimize="handleOptimize"
|
||||
* @test="handleTest"
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
import { ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { NCard, NFlex, NButton, NText, NTag } from "naive-ui";
|
||||
import { useBreakpoints } from "@vueuse/core";
|
||||
@@ -217,48 +253,71 @@ import TestAreaPanel from "../TestAreaPanel.vue";
|
||||
import type { OptimizationMode } from "../../types";
|
||||
import type { IServices } from "@prompt-optimizer/core";
|
||||
|
||||
// 响应式断点
|
||||
// ========================
|
||||
// 响应式断点配置
|
||||
// ========================
|
||||
const breakpoints = useBreakpoints({
|
||||
mobile: 640,
|
||||
tablet: 1024,
|
||||
});
|
||||
const isMobile = breakpoints.smaller("mobile");
|
||||
|
||||
// Props 定义 (移除 contextMode 和 会话管理器相关的 props)
|
||||
// ========================
|
||||
// Props 定义
|
||||
// ========================
|
||||
interface Props {
|
||||
// 核心状态
|
||||
// --- 核心状态 ---
|
||||
/** 用户输入的原始提示词 */
|
||||
prompt: string;
|
||||
/** AI 优化后的提示词 */
|
||||
optimizedPrompt: string;
|
||||
/** 优化推理过程说明 (可选) */
|
||||
optimizedReasoning?: string;
|
||||
/** 优化模式 */
|
||||
optimizationMode: OptimizationMode;
|
||||
|
||||
// 优化状态
|
||||
// --- 优化状态 ---
|
||||
/** 是否正在优化 */
|
||||
isOptimizing: boolean;
|
||||
/** 是否正在迭代优化 */
|
||||
isIterating: boolean;
|
||||
/** 是否正在执行测试 */
|
||||
isTestRunning?: boolean;
|
||||
|
||||
// 版本管理
|
||||
// --- 版本管理 ---
|
||||
/** 历史版本列表 */
|
||||
versions: any[];
|
||||
/** 当前版本 ID */
|
||||
currentVersionId: string | null;
|
||||
/** 选中的迭代模板 */
|
||||
selectedIterateTemplate: any;
|
||||
|
||||
// 测试数据
|
||||
// --- 测试数据 ---
|
||||
/** 测试输入内容 */
|
||||
testContent: string;
|
||||
/** 是否启用对比模式 */
|
||||
isCompareMode: boolean;
|
||||
|
||||
// 变量数据
|
||||
// --- 变量数据 ---
|
||||
/** 全局变量 (持久化存储) */
|
||||
globalVariables: Record<string, string>;
|
||||
contextVariables: Record<string, string>;
|
||||
/** 预定义变量 (系统内置) */
|
||||
predefinedVariables: Record<string, string>;
|
||||
|
||||
// 服务
|
||||
// --- 服务 ---
|
||||
/** 核心服务实例 */
|
||||
services: IServices | null;
|
||||
|
||||
// 响应式布局配置
|
||||
// --- 响应式布局配置 ---
|
||||
/** 输入模式 */
|
||||
inputMode?: "compact" | "normal";
|
||||
/** 控制栏布局 */
|
||||
controlBarLayout?: "default" | "compact" | "minimal";
|
||||
/** 按钮尺寸 */
|
||||
buttonSize?: "small" | "medium" | "large";
|
||||
/** 对话历史最大高度 */
|
||||
conversationMaxHeight?: number;
|
||||
/** 结果区域是否垂直布局 */
|
||||
resultVerticalLayout?: boolean;
|
||||
}
|
||||
|
||||
@@ -272,39 +331,188 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
resultVerticalLayout: false,
|
||||
});
|
||||
|
||||
// Emits 定义 (移除会话管理器相关的 emits)
|
||||
// ========================
|
||||
// Emits 定义
|
||||
// ========================
|
||||
const emit = defineEmits<{
|
||||
// 数据更新
|
||||
// --- 数据更新事件 ---
|
||||
"update:prompt": [value: string];
|
||||
"update:optimizedPrompt": [value: string];
|
||||
"update:selectedIterateTemplate": [value: any];
|
||||
"update:testContent": [value: string];
|
||||
"update:isCompareMode": [value: boolean];
|
||||
|
||||
// 操作事件
|
||||
// --- 操作事件 ---
|
||||
/** 执行优化 */
|
||||
optimize: [];
|
||||
/** 执行迭代优化 */
|
||||
iterate: [payload: any];
|
||||
test: [];
|
||||
/** 执行测试 (传递测试变量) */
|
||||
test: [testVariables: Record<string, string>];
|
||||
/** 切换对比模式 */
|
||||
"compare-toggle": [];
|
||||
/** 切换历史版本 */
|
||||
"switch-version": [versionId: any];
|
||||
/** 保存到收藏 */
|
||||
"save-favorite": [data: any];
|
||||
|
||||
// 打开面板/管理器
|
||||
// --- 打开面板/管理器 ---
|
||||
/** 打开全局变量管理器 */
|
||||
"open-global-variables": [];
|
||||
"open-context-variables": [];
|
||||
/** 打开工具管理器 */
|
||||
"open-tool-manager": [];
|
||||
/** 打开变量管理器 */
|
||||
"open-variable-manager": [];
|
||||
/** 打开模板管理器 */
|
||||
"open-template-manager": [type?: string];
|
||||
/** 配置模型 */
|
||||
"config-model": [];
|
||||
|
||||
// 预览相关
|
||||
// --- 预览相关 ---
|
||||
/** 打开输入预览 */
|
||||
"open-input-preview": [];
|
||||
/** 打开提示词预览 */
|
||||
"open-prompt-preview": [];
|
||||
/** 打开测试预览 */
|
||||
"open-test-preview": [];
|
||||
|
||||
// 变量管理
|
||||
// --- 变量管理 ---
|
||||
/** 变量值变化 */
|
||||
"variable-change": [name: string, value: string];
|
||||
/** 保存测试变量到全局 */
|
||||
"save-to-global": [name: string, value: string];
|
||||
/** 🆕 变量提取事件 (用于处理文本选择提取的变量) */
|
||||
"variable-extracted": [
|
||||
data: {
|
||||
variableName: string;
|
||||
variableValue: string;
|
||||
variableType: "global" | "temporary";
|
||||
},
|
||||
];
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// ========================
|
||||
// 内部状态管理
|
||||
// ========================
|
||||
/** 临时变量 (从文本提取的变量,仅当前会话有效) */
|
||||
const temporaryVariables = ref<Record<string, string>>({});
|
||||
|
||||
// ========================
|
||||
// 计算属性
|
||||
// ========================
|
||||
/** 全局变量名列表 (用于变量名重复检测) */
|
||||
const existingGlobalVariableNames = computed(() => Object.keys(props.globalVariables));
|
||||
|
||||
/** 临时变量名列表 (用于变量名重复检测) */
|
||||
const existingTemporaryVariableNames = computed(() => Object.keys(temporaryVariables.value));
|
||||
|
||||
/** 预定义变量名列表 (用于变量名重复检测) */
|
||||
const predefinedVariableNames = computed(() => Object.keys(props.predefinedVariables));
|
||||
|
||||
// ========================
|
||||
// 组件引用
|
||||
// ========================
|
||||
/** TestAreaPanel 组件引用,用于获取测试变量 */
|
||||
const testAreaPanelRef = ref<InstanceType<typeof TestAreaPanel> | null>(null);
|
||||
|
||||
// ========================
|
||||
// 事件处理
|
||||
// ========================
|
||||
/**
|
||||
* 🆕 处理变量提取事件
|
||||
*
|
||||
* 工作流程:
|
||||
* 1. 接收从 InputPanel 提取的变量数据
|
||||
* 2. 根据变量类型进行不同处理:
|
||||
* - 全局变量: 直接触发 save-to-global 事件,由父组件保存到持久化存储
|
||||
* - 临时变量: 保存到当前组件的 temporaryVariables 状态中
|
||||
* 3. 显示成功提示
|
||||
*
|
||||
* @param data 变量提取数据
|
||||
*/
|
||||
const handleVariableExtracted = (data: {
|
||||
variableName: string;
|
||||
variableValue: string;
|
||||
variableType: "global" | "temporary";
|
||||
}) => {
|
||||
if (data.variableType === "global") {
|
||||
// 全局变量: 触发事件,由父组件保存
|
||||
emit("save-to-global", data.variableName, data.variableValue);
|
||||
window.$message?.success(
|
||||
t("variableExtraction.savedToGlobal", {
|
||||
name: data.variableName,
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
// 临时变量: 保存到本地状态
|
||||
temporaryVariables.value[data.variableName] = data.variableValue;
|
||||
window.$message?.success(
|
||||
t("variableExtraction.savedToTemporary", {
|
||||
name: data.variableName,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
// 同时触发变量提取事件,通知父组件
|
||||
emit("variable-extracted", data);
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理测试事件并获取测试变量
|
||||
*
|
||||
* 工作流程:
|
||||
* 1. 从 TestAreaPanel 获取用户输入的测试变量
|
||||
* 2. 验证数据有效性
|
||||
* 3. 触发 test 事件,传递变量给父组件
|
||||
*
|
||||
* @emits test 传递测试变量给父组件执行测试
|
||||
*/
|
||||
const handleTestWithVariables = async () => {
|
||||
try {
|
||||
// 验证组件引用是否可用
|
||||
if (!testAreaPanelRef.value) {
|
||||
console.warn(
|
||||
"[ContextUserWorkspace] testAreaPanelRef not available, using empty variables",
|
||||
);
|
||||
emit("test", {});
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取测试变量
|
||||
const getVariableValues = testAreaPanelRef.value.getVariableValues;
|
||||
if (typeof getVariableValues !== "function") {
|
||||
console.warn(
|
||||
"[ContextUserWorkspace] getVariableValues method not found, using empty variables",
|
||||
);
|
||||
emit("test", {});
|
||||
return;
|
||||
}
|
||||
|
||||
const testVariables = getVariableValues() || {};
|
||||
|
||||
// 验证返回值类型
|
||||
if (typeof testVariables !== "object" || testVariables === null) {
|
||||
console.error(
|
||||
"[ContextUserWorkspace] Invalid test variables type:",
|
||||
typeof testVariables,
|
||||
);
|
||||
window.$message?.error(t("test.invalidVariables"));
|
||||
emit("test", {});
|
||||
return;
|
||||
}
|
||||
|
||||
// 触发测试事件,传递变量
|
||||
emit("test", testVariables);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"[ContextUserWorkspace] Failed to get test variables:",
|
||||
error,
|
||||
);
|
||||
window.$message?.error(t("test.getVariablesFailed"));
|
||||
// 即使出错也触发测试,使用空变量
|
||||
emit("test", {});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,370 @@
|
||||
<template>
|
||||
<div class="variable-aware-input-wrapper" :style="{ position: 'relative', width: '100%' }">
|
||||
<!-- Naive UI 输入框 -->
|
||||
<NInput
|
||||
ref="inputRef"
|
||||
v-model:value="internalValue"
|
||||
v-bind="$attrs"
|
||||
type="textarea"
|
||||
:autosize="autosize"
|
||||
:placeholder="placeholder"
|
||||
@mouseup="handleMouseUp"
|
||||
@keyup="handleKeyUp"
|
||||
@input="handleInput"
|
||||
@keydown="handleKeyDown"
|
||||
/>
|
||||
|
||||
<!-- 悬浮的"提取为变量"按钮 -->
|
||||
<NPopover
|
||||
v-model:show="showExtractionButton"
|
||||
:x="popoverPosition.x"
|
||||
:y="popoverPosition.y"
|
||||
placement="top"
|
||||
trigger="manual"
|
||||
:show-arrow="false"
|
||||
:style="{ padding: '4px' }"
|
||||
>
|
||||
<template #trigger>
|
||||
<div
|
||||
:style="{
|
||||
position: 'fixed',
|
||||
left: popoverPosition.x + 'px',
|
||||
top: popoverPosition.y + 'px',
|
||||
pointerEvents: 'none',
|
||||
width: '1px',
|
||||
height: '1px'
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<NButton
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleExtractVariable"
|
||||
>
|
||||
{{ t('variableExtraction.extractButton') }}
|
||||
</NButton>
|
||||
</NPopover>
|
||||
|
||||
<!-- 变量提取对话框 -->
|
||||
<VariableExtractionDialog
|
||||
v-model:show="showExtractionDialog"
|
||||
:selected-text="currentSelection.text"
|
||||
:existing-global-variables="existingGlobalVariables"
|
||||
:existing-temporary-variables="existingTemporaryVariables"
|
||||
:predefined-variables="predefinedVariables"
|
||||
:occurrence-count="occurrenceCount"
|
||||
@confirm="handleExtractionConfirm"
|
||||
@cancel="handleExtractionCancel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, nextTick, watch } from 'vue'
|
||||
import { NInput, NPopover, NButton } from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import VariableExtractionDialog from './VariableExtractionDialog.vue'
|
||||
import { useTextSelection } from './useTextSelection'
|
||||
import { useInputHistory } from './useInputHistory'
|
||||
|
||||
/**
|
||||
* 支持变量提取的智能输入框组件
|
||||
*
|
||||
* 功能：
|
||||
* 1. 检测用户选中的文本
|
||||
* 2. 显示"提取为变量"按钮
|
||||
* 3. 打开变量提取对话框
|
||||
* 4. 替换文本为变量占位符
|
||||
* 5. 支持撤销/重做 (Ctrl+Z / Ctrl+Shift+Z)
|
||||
*/
|
||||
|
||||
// Props 定义
|
||||
interface Props {
|
||||
/** 输入框的值 */
|
||||
modelValue: string
|
||||
/** 占位符文本 */
|
||||
placeholder?: string
|
||||
/** 自动调整高度 */
|
||||
autosize?: boolean | { minRows?: number; maxRows?: number }
|
||||
/** 已存在的全局变量名列表 */
|
||||
existingGlobalVariables?: string[]
|
||||
/** 已存在的临时变量名列表 */
|
||||
existingTemporaryVariables?: string[]
|
||||
/** 系统预定义变量名列表 */
|
||||
predefinedVariables?: string[]
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
placeholder: '',
|
||||
autosize: () => ({ minRows: 3, maxRows: 10 }),
|
||||
existingGlobalVariables: () => [],
|
||||
existingTemporaryVariables: () => [],
|
||||
predefinedVariables: () => []
|
||||
})
|
||||
|
||||
// Emits 定义
|
||||
interface Emits {
|
||||
/** 更新输入框的值 */
|
||||
(e: 'update:modelValue', value: string): void
|
||||
/** 提取变量事件 */
|
||||
(e: 'variable-extracted', data: {
|
||||
variableName: string
|
||||
variableValue: string
|
||||
variableType: 'global' | 'temporary'
|
||||
}): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// 内部状态
|
||||
const inputRef = ref<InstanceType<typeof NInput> | null>(null)
|
||||
const internalValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
// 获取原生输入框元素
|
||||
const getNativeInput = (): HTMLTextAreaElement | null => {
|
||||
if (!inputRef.value) return null
|
||||
// Naive UI 的 NInput 组件内部使用 textarea
|
||||
const nativeInput = (inputRef.value as any)?.textareaElRef as HTMLTextAreaElement
|
||||
return nativeInput || null
|
||||
}
|
||||
|
||||
// 文本选择相关
|
||||
const nativeInputRef = computed(() => getNativeInput())
|
||||
const { selection, getSelection, countOccurrences, replaceAllOccurrences } =
|
||||
useTextSelection(nativeInputRef as any)
|
||||
|
||||
// 历史记录相关
|
||||
const { addHistory, undo, redo, recordVariableExtraction } = useInputHistory(
|
||||
nativeInputRef as any,
|
||||
{ mergeThreshold: 1000 }
|
||||
)
|
||||
|
||||
// UI 状态
|
||||
const showExtractionButton = ref(false)
|
||||
const showExtractionDialog = ref(false)
|
||||
const popoverPosition = ref({ x: 0, y: 0 })
|
||||
const currentSelection = ref({
|
||||
text: '',
|
||||
start: 0,
|
||||
end: 0
|
||||
})
|
||||
const occurrenceCount = ref(1)
|
||||
|
||||
// 处理鼠标抬起事件
|
||||
const handleMouseUp = async () => {
|
||||
await nextTick()
|
||||
checkSelection()
|
||||
}
|
||||
|
||||
// 处理键盘抬起事件
|
||||
const handleKeyUp = async (e: KeyboardEvent) => {
|
||||
// 忽略 Ctrl/Shift/Alt 等修饰键
|
||||
if (e.key === 'Control' || e.key === 'Shift' || e.key === 'Alt' || e.key === 'Meta') {
|
||||
return
|
||||
}
|
||||
await nextTick()
|
||||
checkSelection()
|
||||
}
|
||||
|
||||
// 处理输入事件
|
||||
const handleInput = () => {
|
||||
const nativeInput = getNativeInput()
|
||||
if (!nativeInput) return
|
||||
|
||||
// 记录历史
|
||||
addHistory(internalValue.value, nativeInput.selectionStart || 0)
|
||||
}
|
||||
|
||||
// 处理键盘按下事件 (撤销/重做)
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// Ctrl+Z: 撤销
|
||||
if (e.ctrlKey && !e.shiftKey && e.key === 'z') {
|
||||
e.preventDefault()
|
||||
if (undo()) {
|
||||
// 撤销成功,更新 v-model
|
||||
const nativeInput = getNativeInput()
|
||||
if (nativeInput) {
|
||||
internalValue.value = nativeInput.value
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// Ctrl+Shift+Z: 重做
|
||||
if (e.ctrlKey && e.shiftKey && e.key === 'Z') {
|
||||
e.preventDefault()
|
||||
if (redo()) {
|
||||
// 重做成功,更新 v-model
|
||||
const nativeInput = getNativeInput()
|
||||
if (nativeInput) {
|
||||
internalValue.value = nativeInput.value
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 检查选中文本
|
||||
const checkSelection = () => {
|
||||
const sel = getSelection()
|
||||
|
||||
if (sel.isValid && sel.text) {
|
||||
// 计算出现次数
|
||||
occurrenceCount.value = countOccurrences(internalValue.value, sel.text)
|
||||
|
||||
// 保存当前选择
|
||||
currentSelection.value = {
|
||||
text: sel.text,
|
||||
start: sel.start,
|
||||
end: sel.end
|
||||
}
|
||||
|
||||
// 计算悬浮按钮位置
|
||||
calculatePopoverPosition()
|
||||
|
||||
// 显示提取按钮
|
||||
showExtractionButton.value = true
|
||||
} else {
|
||||
// 隐藏提取按钮
|
||||
showExtractionButton.value = false
|
||||
|
||||
// 如果有无效原因,显示提示
|
||||
if (sel.invalidReason && sel.invalidReason !== '未选中任何文本') {
|
||||
window.$message?.warning(sel.invalidReason)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 计算悬浮框位置
|
||||
const calculatePopoverPosition = () => {
|
||||
const nativeInput = getNativeInput()
|
||||
if (!nativeInput) return
|
||||
|
||||
const rect = nativeInput.getBoundingClientRect()
|
||||
const selectionStart = nativeInput.selectionStart || 0
|
||||
|
||||
// 创建临时元素来计算光标位置
|
||||
const tempDiv = document.createElement('div')
|
||||
const computedStyle = window.getComputedStyle(nativeInput)
|
||||
|
||||
tempDiv.style.cssText = `
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
font-family: ${computedStyle.fontFamily};
|
||||
font-size: ${computedStyle.fontSize};
|
||||
line-height: ${computedStyle.lineHeight};
|
||||
padding: ${computedStyle.padding};
|
||||
width: ${rect.width}px;
|
||||
`
|
||||
|
||||
tempDiv.textContent = nativeInput.value.substring(0, selectionStart)
|
||||
document.body.appendChild(tempDiv)
|
||||
|
||||
const tempRect = tempDiv.getBoundingClientRect()
|
||||
document.body.removeChild(tempDiv)
|
||||
|
||||
// 设置悬浮框位置 (在选中文本上方)
|
||||
popoverPosition.value = {
|
||||
x: rect.left + (tempRect.width % rect.width),
|
||||
y: rect.top + Math.floor(tempRect.width / rect.width) * parseFloat(computedStyle.lineHeight) - 40
|
||||
}
|
||||
}
|
||||
|
||||
// 处理提取变量按钮点击
|
||||
const handleExtractVariable = () => {
|
||||
showExtractionButton.value = false
|
||||
showExtractionDialog.value = true
|
||||
}
|
||||
|
||||
// 处理变量提取确认
|
||||
const handleExtractionConfirm = (data: {
|
||||
variableName: string
|
||||
variableValue: string
|
||||
variableType: 'global' | 'temporary'
|
||||
replaceAll: boolean
|
||||
}) => {
|
||||
const nativeInput = getNativeInput()
|
||||
if (!nativeInput) return
|
||||
|
||||
const placeholder = `{{${data.variableName}}}`
|
||||
let newValue = internalValue.value
|
||||
|
||||
if (data.replaceAll && occurrenceCount.value > 1) {
|
||||
// 全部替换
|
||||
newValue = replaceAllOccurrences(newValue, currentSelection.value.text, placeholder)
|
||||
} else {
|
||||
// 仅替换当前选中的文本
|
||||
newValue =
|
||||
newValue.substring(0, currentSelection.value.start) +
|
||||
placeholder +
|
||||
newValue.substring(currentSelection.value.end)
|
||||
}
|
||||
|
||||
// 更新值
|
||||
internalValue.value = newValue
|
||||
|
||||
// 记录历史 (强制创建新记录)
|
||||
const cursorPosition = currentSelection.value.start + placeholder.length
|
||||
recordVariableExtraction(newValue, cursorPosition)
|
||||
|
||||
// 设置光标位置
|
||||
nextTick(() => {
|
||||
if (nativeInput) {
|
||||
nativeInput.setSelectionRange(cursorPosition, cursorPosition)
|
||||
nativeInput.focus()
|
||||
}
|
||||
})
|
||||
|
||||
// 发射变量提取事件
|
||||
emit('variable-extracted', {
|
||||
variableName: data.variableName,
|
||||
variableValue: data.variableValue,
|
||||
variableType: data.variableType
|
||||
})
|
||||
|
||||
// 显示成功消息
|
||||
if (data.replaceAll && occurrenceCount.value > 1) {
|
||||
window.$message?.success(
|
||||
t('variableExtraction.extractSuccessAll', {
|
||||
count: occurrenceCount.value,
|
||||
name: data.variableName
|
||||
})
|
||||
)
|
||||
} else {
|
||||
window.$message?.success(
|
||||
t('variableExtraction.extractSuccess', { name: data.variableName })
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理变量提取取消
|
||||
const handleExtractionCancel = () => {
|
||||
showExtractionDialog.value = false
|
||||
}
|
||||
|
||||
// 监听 modelValue 变化,初始化历史记录
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
const nativeInput = getNativeInput()
|
||||
if (nativeInput) {
|
||||
addHistory(newValue, nativeInput.selectionStart || 0)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.variable-aware-input-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<NModal
|
||||
v-model:show="isVisible"
|
||||
preset="dialog"
|
||||
:title="t('variableExtraction.dialogTitle')"
|
||||
:positive-text="t('common.confirm')"
|
||||
:negative-text="t('common.cancel')"
|
||||
:on-positive-click="handleConfirm"
|
||||
:on-negative-click="handleCancel"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<NSpace vertical :size="16" style="margin-top: 16px;">
|
||||
<!-- 变量名输入 -->
|
||||
<NFormItem
|
||||
:label="t('variableExtraction.variableName')"
|
||||
:validation-status="validationStatus"
|
||||
:feedback="validationMessage"
|
||||
>
|
||||
<NInput
|
||||
v-model:value="variableName"
|
||||
:placeholder="t('variableExtraction.variableNamePlaceholder')"
|
||||
@input="handleVariableNameInput"
|
||||
@keyup.enter="handleConfirm"
|
||||
/>
|
||||
</NFormItem>
|
||||
|
||||
<!-- 变量值显示 (只读) -->
|
||||
<NFormItem :label="t('variableExtraction.variableValue')">
|
||||
<NInput
|
||||
:value="variableValue"
|
||||
readonly
|
||||
:placeholder="t('variableExtraction.variableValuePlaceholder')"
|
||||
/>
|
||||
</NFormItem>
|
||||
|
||||
<!-- 变量类型选择 -->
|
||||
<NFormItem :label="t('variableExtraction.variableType')">
|
||||
<NRadioGroup v-model:value="variableType">
|
||||
<NSpace vertical>
|
||||
<NRadio value="temporary">
|
||||
<span>{{ t('variableExtraction.temporaryVariable') }}</span>
|
||||
<NText depth="3" :style="{ marginLeft: '8px', fontSize: '12px' }">
|
||||
{{ t('variableExtraction.temporaryVariableDesc') }}
|
||||
</NText>
|
||||
</NRadio>
|
||||
<NRadio value="global">
|
||||
<span>{{ t('variableExtraction.globalVariable') }}</span>
|
||||
<NText depth="3" :style="{ marginLeft: '8px', fontSize: '12px' }">
|
||||
{{ t('variableExtraction.globalVariableDesc') }}
|
||||
</NText>
|
||||
</NRadio>
|
||||
</NSpace>
|
||||
</NRadioGroup>
|
||||
</NFormItem>
|
||||
|
||||
<!-- 全部替换选项 (仅当检测到多个匹配时显示) -->
|
||||
<NFormItem v-if="occurrenceCount > 1">
|
||||
<NCheckbox v-model:checked="replaceAll">
|
||||
{{ t('variableExtraction.replaceAll', { count: occurrenceCount }) }}
|
||||
<NText depth="3" :style="{ marginLeft: '4px' }">
|
||||
{{ t('variableExtraction.replaceAllRecommended') }}
|
||||
</NText>
|
||||
</NCheckbox>
|
||||
</NFormItem>
|
||||
</NSpace>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import {
|
||||
NModal,
|
||||
NSpace,
|
||||
NFormItem,
|
||||
NInput,
|
||||
NRadioGroup,
|
||||
NRadio,
|
||||
NCheckbox,
|
||||
NText
|
||||
} from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
/**
|
||||
* 变量提取对话框组件
|
||||
*
|
||||
* 功能：
|
||||
* 1. 允许用户为选中的文本创建变量
|
||||
* 2. 支持全局变量和临时变量两种类型
|
||||
* 3. 验证变量名合法性
|
||||
* 4. 支持批量替换多个相同文本
|
||||
*/
|
||||
|
||||
// Props 定义
|
||||
interface Props {
|
||||
/** 对话框显示状态 */
|
||||
show: boolean
|
||||
/** 选中的文本值 */
|
||||
selectedText: string
|
||||
/** 已存在的全局变量名列表 */
|
||||
existingGlobalVariables?: string[]
|
||||
/** 已存在的临时变量名列表 */
|
||||
existingTemporaryVariables?: string[]
|
||||
/** 系统预定义变量名列表 */
|
||||
predefinedVariables?: string[]
|
||||
/** 当前文本中该值的出现次数 */
|
||||
occurrenceCount?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
existingGlobalVariables: () => [],
|
||||
existingTemporaryVariables: () => [],
|
||||
predefinedVariables: () => [],
|
||||
occurrenceCount: 1
|
||||
})
|
||||
|
||||
// Emits 定义
|
||||
interface Emits {
|
||||
/** 更新对话框显示状态 */
|
||||
(e: 'update:show', value: boolean): void
|
||||
/** 确认提取变量 */
|
||||
(e: 'confirm', data: {
|
||||
variableName: string
|
||||
variableValue: string
|
||||
variableType: 'global' | 'temporary'
|
||||
replaceAll: boolean
|
||||
}): void
|
||||
/** 取消操作 */
|
||||
(e: 'cancel'): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// 内部状态
|
||||
const isVisible = computed({
|
||||
get: () => props.show,
|
||||
set: (value) => emit('update:show', value)
|
||||
})
|
||||
|
||||
const variableName = ref('')
|
||||
const variableValue = ref('')
|
||||
const variableType = ref<'global' | 'temporary'>('temporary')
|
||||
const replaceAll = ref(true) // 默认选中"全部替换"
|
||||
|
||||
// 变量名验证
|
||||
const validationStatus = computed<'success' | 'warning' | 'error' | undefined>(() => {
|
||||
if (!variableName.value) return undefined
|
||||
|
||||
// 验证规则1: 不能以数字开头
|
||||
if (/^\d/.test(variableName.value)) {
|
||||
return 'error'
|
||||
}
|
||||
|
||||
// 验证规则2: 只能包含中文、英文、数字、下划线
|
||||
if (!/^[\u4e00-\u9fa5a-zA-Z_][\u4e00-\u9fa5a-zA-Z0-9_]*$/.test(variableName.value)) {
|
||||
return 'error'
|
||||
}
|
||||
|
||||
// 验证规则3: 不能与预定义变量重名
|
||||
if (props.predefinedVariables.includes(variableName.value)) {
|
||||
return 'error'
|
||||
}
|
||||
|
||||
// 验证规则4: 不能与已有变量重名
|
||||
const allExistingVariables = [
|
||||
...props.existingGlobalVariables,
|
||||
...props.existingTemporaryVariables
|
||||
]
|
||||
if (allExistingVariables.includes(variableName.value)) {
|
||||
return 'warning'
|
||||
}
|
||||
|
||||
return 'success'
|
||||
})
|
||||
|
||||
const validationMessage = computed(() => {
|
||||
if (!variableName.value) return ''
|
||||
|
||||
if (/^\d/.test(variableName.value)) {
|
||||
return t('variableExtraction.validation.noNumberStart')
|
||||
}
|
||||
|
||||
if (!/^[\u4e00-\u9fa5a-zA-Z_][\u4e00-\u9fa5a-zA-Z0-9_]*$/.test(variableName.value)) {
|
||||
return t('variableExtraction.validation.invalidCharacters')
|
||||
}
|
||||
|
||||
if (props.predefinedVariables.includes(variableName.value)) {
|
||||
return t('variableExtraction.validation.predefinedVariable')
|
||||
}
|
||||
|
||||
const allExistingVariables = [
|
||||
...props.existingGlobalVariables,
|
||||
...props.existingTemporaryVariables
|
||||
]
|
||||
if (allExistingVariables.includes(variableName.value)) {
|
||||
return t('variableExtraction.validation.duplicateVariable')
|
||||
}
|
||||
|
||||
return ''
|
||||
})
|
||||
|
||||
// 监听 props 变化,更新内部状态
|
||||
watch(() => props.selectedText, (newValue) => {
|
||||
variableValue.value = newValue
|
||||
}, { immediate: true })
|
||||
|
||||
watch(() => props.show, (newValue) => {
|
||||
if (newValue) {
|
||||
// 对话框打开时重置状态
|
||||
variableName.value = ''
|
||||
variableValue.value = props.selectedText
|
||||
variableType.value = 'temporary'
|
||||
replaceAll.value = props.occurrenceCount > 1
|
||||
}
|
||||
})
|
||||
|
||||
// 处理变量名输入
|
||||
const handleVariableNameInput = () => {
|
||||
// 自动去除空格
|
||||
variableName.value = variableName.value.replace(/\s/g, '')
|
||||
}
|
||||
|
||||
// 确认提取
|
||||
const handleConfirm = () => {
|
||||
// 验证变量名
|
||||
if (!variableName.value) {
|
||||
window.$message?.warning(t('variableExtraction.validation.required'))
|
||||
return false
|
||||
}
|
||||
|
||||
if (validationStatus.value === 'error') {
|
||||
window.$message?.error(validationMessage.value)
|
||||
return false
|
||||
}
|
||||
|
||||
// 发射确认事件
|
||||
emit('confirm', {
|
||||
variableName: variableName.value,
|
||||
variableValue: variableValue.value,
|
||||
variableType: variableType.value,
|
||||
replaceAll: replaceAll.value
|
||||
})
|
||||
|
||||
// 关闭对话框
|
||||
isVisible.value = false
|
||||
return true
|
||||
}
|
||||
|
||||
// 取消操作
|
||||
const handleCancel = () => {
|
||||
emit('cancel')
|
||||
isVisible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 使用 Naive UI 的默认样式,无需自定义 CSS */
|
||||
</style>
|
||||
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* 变量提取功能模块
|
||||
*
|
||||
* 提供以下功能：
|
||||
* 1. VariableExtractionDialog - 变量提取对话框
|
||||
* 2. VariableAwareInput - 支持变量提取的智能输入框
|
||||
* 3. useTextSelection - 文本选择检测 composable
|
||||
* 4. useInputHistory - 输入历史记录管理 composable
|
||||
*/
|
||||
|
||||
export { default as VariableExtractionDialog } from './VariableExtractionDialog.vue'
|
||||
export { default as VariableAwareInput } from './VariableAwareInput.vue'
|
||||
export { useTextSelection } from './useTextSelection'
|
||||
export { useInputHistory } from './useInputHistory'
|
||||
|
||||
export type { TextSelection } from './useTextSelection'
|
||||
export type { HistoryRecord, UseInputHistoryOptions } from './useInputHistory'
|
||||
@@ -0,0 +1,172 @@
|
||||
import { ref, Ref } from 'vue'
|
||||
|
||||
/**
|
||||
* 输入历史记录管理 Composable
|
||||
*
|
||||
* 功能：
|
||||
* 1. 记录输入框的编辑历史
|
||||
* 2. 支持撤销 (Ctrl+Z) 和重做 (Ctrl+Shift+Z)
|
||||
* 3. 智能合并连续编辑操作
|
||||
*/
|
||||
|
||||
export interface HistoryRecord {
|
||||
/** 文本内容 */
|
||||
content: string
|
||||
/** 光标位置 */
|
||||
cursorPosition: number
|
||||
/** 记录时间戳 */
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
export interface UseInputHistoryOptions {
|
||||
/** 最大历史记录数 */
|
||||
maxHistory?: number
|
||||
/** 合并编辑的时间阈值 (毫秒) */
|
||||
mergeThreshold?: number
|
||||
}
|
||||
|
||||
export function useInputHistory(
|
||||
inputRef: Ref<HTMLInputElement | HTMLTextAreaElement | null>,
|
||||
options: UseInputHistoryOptions = {}
|
||||
) {
|
||||
const { maxHistory = 50, mergeThreshold = 1000 } = options
|
||||
|
||||
// 历史记录栈
|
||||
const history = ref<HistoryRecord[]>([])
|
||||
// 当前历史位置索引
|
||||
const currentIndex = ref(-1)
|
||||
// 最后一次编辑的时间戳
|
||||
const lastEditTimestamp = ref(0)
|
||||
// 是否正在执行撤销/重做操作
|
||||
const isUndoRedoing = ref(false)
|
||||
|
||||
/**
|
||||
* 添加历史记录
|
||||
*/
|
||||
const addHistory = (content: string, cursorPosition: number, forceNew = false) => {
|
||||
if (isUndoRedoing.value) return
|
||||
|
||||
const now = Date.now()
|
||||
const shouldMerge =
|
||||
!forceNew &&
|
||||
history.value.length > 0 &&
|
||||
currentIndex.value >= 0 &&
|
||||
now - lastEditTimestamp.value < mergeThreshold
|
||||
|
||||
if (shouldMerge) {
|
||||
// 智能合并: 更新当前记录
|
||||
history.value[currentIndex.value] = {
|
||||
content,
|
||||
cursorPosition,
|
||||
timestamp: now
|
||||
}
|
||||
} else {
|
||||
// 创建新记录: 移除当前位置之后的所有记录
|
||||
history.value = history.value.slice(0, currentIndex.value + 1)
|
||||
|
||||
// 添加新记录
|
||||
history.value.push({
|
||||
content,
|
||||
cursorPosition,
|
||||
timestamp: now
|
||||
})
|
||||
|
||||
// 限制历史记录数量
|
||||
if (history.value.length > maxHistory) {
|
||||
history.value.shift()
|
||||
} else {
|
||||
currentIndex.value++
|
||||
}
|
||||
}
|
||||
|
||||
lastEditTimestamp.value = now
|
||||
}
|
||||
|
||||
/**
|
||||
* 撤销操作
|
||||
*/
|
||||
const undo = (): boolean => {
|
||||
if (currentIndex.value <= 0) {
|
||||
return false
|
||||
}
|
||||
|
||||
isUndoRedoing.value = true
|
||||
currentIndex.value--
|
||||
|
||||
const record = history.value[currentIndex.value]
|
||||
if (record && inputRef.value) {
|
||||
inputRef.value.value = record.content
|
||||
inputRef.value.setSelectionRange(record.cursorPosition, record.cursorPosition)
|
||||
|
||||
// 触发 input 事件,确保 v-model 同步
|
||||
const event = new Event('input', { bubbles: true })
|
||||
inputRef.value.dispatchEvent(event)
|
||||
}
|
||||
|
||||
isUndoRedoing.value = false
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* 重做操作
|
||||
*/
|
||||
const redo = (): boolean => {
|
||||
if (currentIndex.value >= history.value.length - 1) {
|
||||
return false
|
||||
}
|
||||
|
||||
isUndoRedoing.value = true
|
||||
currentIndex.value++
|
||||
|
||||
const record = history.value[currentIndex.value]
|
||||
if (record && inputRef.value) {
|
||||
inputRef.value.value = record.content
|
||||
inputRef.value.setSelectionRange(record.cursorPosition, record.cursorPosition)
|
||||
|
||||
// 触发 input 事件,确保 v-model 同步
|
||||
const event = new Event('input', { bubbles: true })
|
||||
inputRef.value.dispatchEvent(event)
|
||||
}
|
||||
|
||||
isUndoRedoing.value = false
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空历史记录
|
||||
*/
|
||||
const clearHistory = () => {
|
||||
history.value = []
|
||||
currentIndex.value = -1
|
||||
lastEditTimestamp.value = 0
|
||||
}
|
||||
|
||||
/**
|
||||
* 记录变量提取操作 (强制创建新记录)
|
||||
*/
|
||||
const recordVariableExtraction = (content: string, cursorPosition: number) => {
|
||||
addHistory(content, cursorPosition, true)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取是否可以撤销
|
||||
*/
|
||||
const canUndo = () => currentIndex.value > 0
|
||||
|
||||
/**
|
||||
* 获取是否可以重做
|
||||
*/
|
||||
const canRedo = () => currentIndex.value < history.value.length - 1
|
||||
|
||||
return {
|
||||
history,
|
||||
currentIndex,
|
||||
addHistory,
|
||||
undo,
|
||||
redo,
|
||||
clearHistory,
|
||||
recordVariableExtraction,
|
||||
canUndo,
|
||||
canRedo
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
import { ref, Ref } from 'vue'
|
||||
|
||||
/**
|
||||
* 文本选择检测 Composable
|
||||
*
|
||||
* 功能：
|
||||
* 1. 检测文本框中的选中文本
|
||||
* 2. 验证选中文本的合法性
|
||||
* 3. 防止跨越变量边界选择
|
||||
*/
|
||||
|
||||
export interface TextSelection {
|
||||
/** 选中的文本内容 */
|
||||
text: string
|
||||
/** 选中起始位置 */
|
||||
start: number
|
||||
/** 选中结束位置 */
|
||||
end: number
|
||||
/** 是否有效选择 */
|
||||
isValid: boolean
|
||||
/** 无效原因 */
|
||||
invalidReason?: string
|
||||
}
|
||||
|
||||
export function useTextSelection(inputRef: Ref<HTMLInputElement | HTMLTextAreaElement | null>) {
|
||||
const selection = ref<TextSelection>({
|
||||
text: '',
|
||||
start: 0,
|
||||
end: 0,
|
||||
isValid: false
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取当前选中的文本
|
||||
*/
|
||||
const getSelection = (): TextSelection => {
|
||||
const input = inputRef.value
|
||||
if (!input) {
|
||||
return {
|
||||
text: '',
|
||||
start: 0,
|
||||
end: 0,
|
||||
isValid: false,
|
||||
invalidReason: '输入框未就绪'
|
||||
}
|
||||
}
|
||||
|
||||
const start = input.selectionStart || 0
|
||||
const end = input.selectionEnd || 0
|
||||
const text = input.value.substring(start, end)
|
||||
|
||||
// 验证选择
|
||||
const validation = validateSelection(input.value, start, end, text)
|
||||
|
||||
selection.value = {
|
||||
text: validation.isValid ? text.trim() : '',
|
||||
start,
|
||||
end,
|
||||
isValid: validation.isValid,
|
||||
invalidReason: validation.reason
|
||||
}
|
||||
|
||||
return selection.value
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证选中文本的合法性
|
||||
*/
|
||||
const validateSelection = (
|
||||
fullText: string,
|
||||
start: number,
|
||||
end: number,
|
||||
selectedText: string
|
||||
): { isValid: boolean; reason?: string } => {
|
||||
// 检查是否有选中文本
|
||||
if (start === end || !selectedText.trim()) {
|
||||
return { isValid: false, reason: '未选中任何文本' }
|
||||
}
|
||||
|
||||
// 检查是否跨越变量边界
|
||||
const beforeSelection = fullText.substring(0, start)
|
||||
const afterSelection = fullText.substring(end)
|
||||
|
||||
// 检查选中文本前是否有未闭合的 {{
|
||||
const openBracesBeforeCount = (beforeSelection.match(/\{\{/g) || []).length
|
||||
const closeBracesBeforeCount = (beforeSelection.match(/\}\}/g) || []).length
|
||||
if (openBracesBeforeCount > closeBracesBeforeCount) {
|
||||
return { isValid: false, reason: '不能跨越变量边界' }
|
||||
}
|
||||
|
||||
// 检查选中文本后是否有未闭合的 }}
|
||||
const openBracesAfterCount = (afterSelection.match(/\{\{/g) || []).length
|
||||
const closeBracesAfterCount = (afterSelection.match(/\}\}/g) || []).length
|
||||
if (closeBracesAfterCount > openBracesAfterCount) {
|
||||
return { isValid: false, reason: '不能跨越变量边界' }
|
||||
}
|
||||
|
||||
// 检查选中文本内部是否包含完整的变量占位符
|
||||
const openBracesInSelection = (selectedText.match(/\{\{/g) || []).length
|
||||
const closeBracesInSelection = (selectedText.match(/\}\}/g) || []).length
|
||||
if (openBracesInSelection > 0 || closeBracesInSelection > 0) {
|
||||
// 如果选中文本包含 {{ 或 }},检查是否是完整的变量
|
||||
if (openBracesInSelection !== closeBracesInSelection) {
|
||||
return { isValid: false, reason: '不能跨越变量边界' }
|
||||
}
|
||||
}
|
||||
|
||||
return { isValid: true }
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算选中文本在完整文本中的出现次数
|
||||
*/
|
||||
const countOccurrences = (fullText: string, searchText: string): number => {
|
||||
if (!searchText) return 0
|
||||
|
||||
const trimmedSearch = searchText.trim()
|
||||
if (!trimmedSearch) return 0
|
||||
|
||||
// 使用正则表达式计算出现次数,但要排除已经在变量中的文本
|
||||
let count = 0
|
||||
let position = 0
|
||||
|
||||
while (position < fullText.length) {
|
||||
const index = fullText.indexOf(trimmedSearch, position)
|
||||
if (index === -1) break
|
||||
|
||||
// 检查该位置是否在变量占位符内部
|
||||
const beforeText = fullText.substring(0, index)
|
||||
const openBraces = (beforeText.match(/\{\{/g) || []).length
|
||||
const closeBraces = (beforeText.match(/\}\}/g) || []).length
|
||||
|
||||
// 如果不在变量内部,则计数
|
||||
if (openBraces === closeBraces) {
|
||||
count++
|
||||
}
|
||||
|
||||
position = index + 1
|
||||
}
|
||||
|
||||
return count
|
||||
}
|
||||
|
||||
/**
|
||||
* 替换文本中的所有匹配项
|
||||
*/
|
||||
const replaceAllOccurrences = (
|
||||
fullText: string,
|
||||
searchText: string,
|
||||
replaceWith: string
|
||||
): string => {
|
||||
if (!searchText) return fullText
|
||||
|
||||
const trimmedSearch = searchText.trim()
|
||||
if (!trimmedSearch) return fullText
|
||||
|
||||
let result = fullText
|
||||
let position = 0
|
||||
|
||||
while (position < result.length) {
|
||||
const index = result.indexOf(trimmedSearch, position)
|
||||
if (index === -1) break
|
||||
|
||||
// 检查该位置是否在变量占位符内部
|
||||
const beforeText = result.substring(0, index)
|
||||
const openBraces = (beforeText.match(/\{\{/g) || []).length
|
||||
const closeBraces = (beforeText.match(/\}\}/g) || []).length
|
||||
|
||||
// 如果不在变量内部,则替换
|
||||
if (openBraces === closeBraces) {
|
||||
result =
|
||||
result.substring(0, index) +
|
||||
replaceWith +
|
||||
result.substring(index + trimmedSearch.length)
|
||||
position = index + replaceWith.length
|
||||
} else {
|
||||
position = index + 1
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
return {
|
||||
selection,
|
||||
getSelection,
|
||||
validateSelection,
|
||||
countOccurrences,
|
||||
replaceAllOccurrences
|
||||
}
|
||||
}
|
||||
@@ -8,6 +8,7 @@ export * from "./useModelManager";
|
||||
export * from "./useHistoryManager";
|
||||
export * from "./useModelSelectRefs";
|
||||
export * from "./useVariableManager";
|
||||
export * from "./useContextManagement";
|
||||
export * from "./useAutoScroll";
|
||||
export * from "./useClipboard";
|
||||
export * from "./useFullscreen";
|
||||
|
||||
+6
-52
@@ -4,13 +4,13 @@
|
||||
*/
|
||||
|
||||
import { ref, computed, watch, type Ref } from "vue";
|
||||
import { useToast } from "@prompt-optimizer/ui";
|
||||
import { quickTemplateManager } from "@prompt-optimizer/ui";
|
||||
import { useToast } from "./useToast";
|
||||
import { quickTemplateManager } from "../data/quickTemplates";
|
||||
import type {
|
||||
ConversationMessage,
|
||||
OptimizationMode,
|
||||
} from "@prompt-optimizer/core";
|
||||
import type { AppServices } from "@prompt-optimizer/ui";
|
||||
import type { AppServices } from "../types/services";
|
||||
|
||||
export interface ContextManagementOptions {
|
||||
services: Ref<AppServices | null>;
|
||||
@@ -59,11 +59,6 @@ export function useContextManagement(options: ContextManagementOptions) {
|
||||
const currentContextId = ref<string | null>(null);
|
||||
const contextRepo = computed(() => services.value?.contextRepo);
|
||||
|
||||
// 当前上下文的会话级变量
|
||||
const currentContextVariables = computed(() => {
|
||||
return contextEditorState.value.variables || {};
|
||||
});
|
||||
|
||||
// 内置预定义变量
|
||||
const predefinedVariables = computed(() => {
|
||||
// optimizer 可能在初始化时为 null,需要安全访问
|
||||
@@ -228,30 +223,12 @@ export function useContextManagement(options: ContextManagementOptions) {
|
||||
}
|
||||
}
|
||||
|
||||
// 从 contextRepo 读取真正的上下文变量
|
||||
let contextVariables: Record<string, string> = {};
|
||||
if (contextRepo.value && currentContextId.value) {
|
||||
try {
|
||||
const context = await contextRepo.value.get(currentContextId.value);
|
||||
contextVariables = context?.variables || {};
|
||||
console.log(
|
||||
"[useContextManagement] Loaded context variables from contextRepo:",
|
||||
Object.keys(contextVariables),
|
||||
);
|
||||
} catch (error) {
|
||||
console.warn(
|
||||
"[useContextManagement] Failed to load context variables:",
|
||||
error,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 设置初始状态
|
||||
contextEditorState.value = {
|
||||
messages: messages || [...optimizationContext.value],
|
||||
variables: contextVariables,
|
||||
variables: {}, // 不再使用会话变量
|
||||
tools: [...optimizationContextTools.value],
|
||||
showVariablePreview: true,
|
||||
showVariablePreview: false, // 不再显示变量预览
|
||||
showToolManager: contextMode.value === "user",
|
||||
mode: "edit",
|
||||
};
|
||||
@@ -343,28 +320,7 @@ export function useContextManagement(options: ContextManagementOptions) {
|
||||
}
|
||||
};
|
||||
|
||||
// ==================== 会话变量管理 ====================
|
||||
|
||||
// 更新会话级变量
|
||||
const updateContextVariable = async (name: string, value: string) => {
|
||||
const updatedVariables = {
|
||||
...contextEditorState.value.variables,
|
||||
};
|
||||
|
||||
if (value && value.trim()) {
|
||||
updatedVariables[name] = value;
|
||||
} else {
|
||||
delete updatedVariables[name];
|
||||
}
|
||||
|
||||
contextEditorState.value = {
|
||||
...contextEditorState.value,
|
||||
variables: updatedVariables,
|
||||
};
|
||||
|
||||
// 持久化
|
||||
await persistContextUpdate({ variables: updatedVariables });
|
||||
};
|
||||
// 会话变量管理已移除 - 现在使用测试区临时变量
|
||||
|
||||
// ==================== 返回 ====================
|
||||
|
||||
@@ -376,7 +332,6 @@ export function useContextManagement(options: ContextManagementOptions) {
|
||||
isContextLoaded,
|
||||
currentContextId,
|
||||
contextRepo,
|
||||
currentContextVariables,
|
||||
predefinedVariables,
|
||||
|
||||
// 方法
|
||||
@@ -386,6 +341,5 @@ export function useContextManagement(options: ContextManagementOptions) {
|
||||
handleContextEditorSave,
|
||||
handleContextEditorStateUpdate,
|
||||
handleContextModeChange,
|
||||
updateContextVariable,
|
||||
};
|
||||
}
|
||||
@@ -1,133 +1,263 @@
|
||||
import { computed, reactive, type Ref } from 'vue'
|
||||
import { reactive, type Ref } from 'vue'
|
||||
import { useToast } from './useToast'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { OptimizationMode } from '@prompt-optimizer/core'
|
||||
import type { AppServices } from '../types/services'
|
||||
import type { ConversationMessage } from '../types/variable'
|
||||
|
||||
/**
|
||||
* 提示词测试Hook
|
||||
* 高级提示词测试 Hook
|
||||
* 支持变量注入、上下文、工具调用等高级特性
|
||||
*
|
||||
* @param services 服务实例引用
|
||||
* @param selectedTestModel 测试模型选择
|
||||
* @param optimizationMode 优化模式
|
||||
* @param selectedOptimizationMode 优化模式
|
||||
* @param advancedModeEnabled 是否启用高级模式
|
||||
* @param optimizationContext 优化上下文（会话消息）
|
||||
* @param optimizationContextTools 上下文工具列表
|
||||
* @param variableManager 变量管理器
|
||||
* @returns 提示词测试接口
|
||||
*/
|
||||
export function usePromptTester(
|
||||
services: Ref<AppServices | null>,
|
||||
selectedTestModel: Ref<string>,
|
||||
optimizationMode?: Ref<OptimizationMode>
|
||||
selectedOptimizationMode: Ref<OptimizationMode>,
|
||||
advancedModeEnabled: Ref<boolean>,
|
||||
optimizationContext: Ref<ConversationMessage[]>,
|
||||
optimizationContextTools: Ref<any[]>,
|
||||
variableManager: any
|
||||
) {
|
||||
const toast = useToast()
|
||||
const { t } = useI18n()
|
||||
|
||||
// 提示词服务引用
|
||||
const promptService = computed(() => services.value?.promptService)
|
||||
|
||||
|
||||
// 创建一个 reactive 状态对象
|
||||
const state = reactive({
|
||||
// States
|
||||
testContent: '',
|
||||
testResult: '',
|
||||
testError: '',
|
||||
isTesting: false,
|
||||
|
||||
// States - 测试结果状态
|
||||
testResults: {
|
||||
// 原始提示词结果
|
||||
originalResult: '',
|
||||
originalReasoning: '',
|
||||
isTestingOriginal: false,
|
||||
|
||||
// 优化提示词结果
|
||||
optimizedResult: '',
|
||||
optimizedReasoning: '',
|
||||
isTestingOptimized: false,
|
||||
},
|
||||
|
||||
// Methods
|
||||
handleTest: async (optimizedPrompt: string) => {
|
||||
if (!selectedTestModel.value || !optimizedPrompt) {
|
||||
toast.error(t('toast.error.incompleteTestInfo'))
|
||||
/**
|
||||
* 执行测试（支持对比模式）
|
||||
* @param prompt 原始提示词
|
||||
* @param optimizedPrompt 优化后的提示词
|
||||
* @param testContent 测试内容
|
||||
* @param isCompareMode 是否对比模式
|
||||
* @param testVariables 测试变量
|
||||
* @param testPanelRef 测试面板引用（用于工具调用回调）
|
||||
*/
|
||||
executeTest: async (
|
||||
prompt: string,
|
||||
optimizedPrompt: string,
|
||||
testContent: string,
|
||||
isCompareMode: boolean,
|
||||
testVariables?: Record<string, string>,
|
||||
testPanelRef?: any
|
||||
) => {
|
||||
if (!services.value?.promptService) {
|
||||
toast.error(t('toast.error.serviceInit'))
|
||||
return
|
||||
}
|
||||
|
||||
// For system prompt optimization, we need test content
|
||||
// For user prompt optimization, we don't need test content (the optimized prompt IS the user input)
|
||||
const currentOptimizationMode = optimizationMode?.value || 'system'
|
||||
if (currentOptimizationMode === 'system' && !state.testContent) {
|
||||
toast.error(t('test.error.noTestContent'))
|
||||
|
||||
if (!selectedTestModel.value) {
|
||||
toast.error(t('test.error.noModel'))
|
||||
return
|
||||
}
|
||||
|
||||
state.isTesting = true
|
||||
state.testError = ''
|
||||
state.testResult = ''
|
||||
|
||||
try {
|
||||
// Determine system and user prompts based on optimization mode
|
||||
let systemPrompt = ''
|
||||
let userPrompt = ''
|
||||
|
||||
if (currentOptimizationMode === 'user') {
|
||||
// For user prompt optimization: no system context, optimized is user
|
||||
systemPrompt = ''
|
||||
userPrompt = optimizedPrompt
|
||||
} else {
|
||||
// For system prompt optimization: optimized is system, test content is user
|
||||
systemPrompt = optimizedPrompt
|
||||
userPrompt = state.testContent
|
||||
}
|
||||
|
||||
await promptService.value!.testPromptStream(
|
||||
systemPrompt,
|
||||
userPrompt,
|
||||
selectedTestModel.value,
|
||||
{
|
||||
onToken: (token: string) => {
|
||||
state.testResult += token
|
||||
},
|
||||
onComplete: () => {
|
||||
state.isTesting = false
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
state.testError = error.message || t('toast.error.testFailed')
|
||||
state.isTesting = false
|
||||
}
|
||||
}
|
||||
|
||||
if (isCompareMode) {
|
||||
// 对比模式：测试原始和优化提示词
|
||||
await state.testPromptWithType(
|
||||
'original',
|
||||
prompt,
|
||||
optimizedPrompt,
|
||||
testContent,
|
||||
testVariables,
|
||||
testPanelRef
|
||||
)
|
||||
await state.testPromptWithType(
|
||||
'optimized',
|
||||
prompt,
|
||||
optimizedPrompt,
|
||||
testContent,
|
||||
testVariables,
|
||||
testPanelRef
|
||||
)
|
||||
} else {
|
||||
// 单一模式：只测试优化后的提示词
|
||||
await state.testPromptWithType(
|
||||
'optimized',
|
||||
prompt,
|
||||
optimizedPrompt,
|
||||
testContent,
|
||||
testVariables,
|
||||
testPanelRef
|
||||
)
|
||||
} catch (error) {
|
||||
console.error(t('toast.error.testFailed'), error)
|
||||
state.testError = error instanceof Error ? error.message : t('toast.error.testProcessError')
|
||||
} finally {
|
||||
state.isTesting = false
|
||||
}
|
||||
},
|
||||
|
||||
// Test with explicit context (for advanced use cases)
|
||||
handleTestWithContext: async (
|
||||
systemPrompt: string,
|
||||
userPrompt: string
|
||||
|
||||
/**
|
||||
* 测试特定类型的提示词（复用会话上下文 + 变量 + 工具）
|
||||
*/
|
||||
testPromptWithType: async (
|
||||
type: 'original' | 'optimized',
|
||||
prompt: string,
|
||||
optimizedPrompt: string,
|
||||
testContent: string,
|
||||
testVars?: Record<string, string>,
|
||||
testPanelRef?: any
|
||||
) => {
|
||||
if (!selectedTestModel.value || !userPrompt) {
|
||||
toast.error(t('toast.error.incompleteTestInfo'))
|
||||
const isOriginal = type === 'original'
|
||||
const selectedPrompt = isOriginal ? prompt : optimizedPrompt
|
||||
|
||||
if (!selectedPrompt) {
|
||||
toast.error(
|
||||
isOriginal ? t('test.error.noOriginalPrompt') : t('test.error.noOptimizedPrompt')
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
state.isTesting = true
|
||||
state.testError = ''
|
||||
state.testResult = ''
|
||||
|
||||
|
||||
// 设置测试状态
|
||||
if (isOriginal) {
|
||||
state.testResults.isTestingOriginal = true
|
||||
state.testResults.originalResult = ''
|
||||
state.testResults.originalReasoning = ''
|
||||
} else {
|
||||
state.testResults.isTestingOptimized = true
|
||||
state.testResults.optimizedResult = ''
|
||||
state.testResults.optimizedReasoning = ''
|
||||
}
|
||||
|
||||
// 清除对应类型的工具调用数据
|
||||
testPanelRef?.clearToolCalls?.(isOriginal ? 'original' : 'optimized')
|
||||
|
||||
try {
|
||||
await promptService.value!.testPromptStream(
|
||||
systemPrompt,
|
||||
userPrompt,
|
||||
selectedTestModel.value,
|
||||
{
|
||||
onToken: (token: string) => {
|
||||
state.testResult += token
|
||||
},
|
||||
onComplete: () => {
|
||||
state.isTesting = false
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
state.testError = error.message || t('toast.error.testFailed')
|
||||
state.isTesting = false
|
||||
const streamHandler = {
|
||||
onToken: (token: string) => {
|
||||
if (isOriginal) {
|
||||
state.testResults.originalResult += token
|
||||
} else {
|
||||
state.testResults.optimizedResult += token
|
||||
}
|
||||
},
|
||||
onReasoningToken: (reasoningToken: string) => {
|
||||
if (isOriginal) {
|
||||
state.testResults.originalReasoning += reasoningToken
|
||||
} else {
|
||||
state.testResults.optimizedReasoning += reasoningToken
|
||||
}
|
||||
},
|
||||
onComplete: () => {
|
||||
// Test completed successfully
|
||||
},
|
||||
onError: (err: Error) => {
|
||||
const errorMessage = err.message || t('test.error.failed')
|
||||
console.error(`[usePromptTester] ${type} test failed:`, errorMessage)
|
||||
const testTypeKey = type === 'original' ? 'originalTestFailed' : 'optimizedTestFailed'
|
||||
toast.error(`${t(`test.error.${testTypeKey}`)}: ${errorMessage}`)
|
||||
},
|
||||
}
|
||||
|
||||
// 统一构造对话与变量，尽量复用上下文
|
||||
let systemPrompt = ''
|
||||
let userPrompt = ''
|
||||
|
||||
if (selectedOptimizationMode.value === 'user') {
|
||||
// 用户提示词模式：提示词作为用户输入
|
||||
systemPrompt = ''
|
||||
userPrompt = selectedPrompt
|
||||
} else {
|
||||
// 系统提示词模式：提示词作为系统消息
|
||||
systemPrompt = selectedPrompt
|
||||
userPrompt = testContent || '请按照你的角色设定，展示你的能力并与我互动。'
|
||||
}
|
||||
|
||||
const hasConversationContext =
|
||||
selectedOptimizationMode.value === 'system' &&
|
||||
advancedModeEnabled.value &&
|
||||
(optimizationContext.value?.length || 0) > 0
|
||||
const hasTools =
|
||||
advancedModeEnabled.value &&
|
||||
(optimizationContextTools.value?.length || 0) > 0
|
||||
|
||||
// 变量：合并全局变量 + 测试变量 + 当前提示词/问题（用于会话模板中的占位符）
|
||||
// 按优先级合并: 全局自定义变量 < 测试变量 < 预定义变量
|
||||
const baseVars =
|
||||
(variableManager?.variableManager.value?.resolveAllVariables() ||
|
||||
{}) as Record<string, string>
|
||||
|
||||
// 使用传入的测试变量
|
||||
const variables = {
|
||||
...baseVars,
|
||||
...(testVars || {}), // 测试变量优先级高于全局变量
|
||||
currentPrompt: selectedPrompt,
|
||||
userQuestion: userPrompt,
|
||||
}
|
||||
|
||||
// 对话构造逻辑：
|
||||
// - 系统模式 + 有会话上下文：使用会话上下文（因为系统提示词本身就是多轮对话场景）
|
||||
// - 用户模式：无论是否有会话上下文，都直接发送优化后的提示词作为用户消息
|
||||
// （因为用户提示词优化的目标是生成可直接使用的单条用户消息）
|
||||
const messages: ConversationMessage[] =
|
||||
selectedOptimizationMode.value === 'system' && hasConversationContext
|
||||
? optimizationContext.value.map((m) => ({
|
||||
role: m.role,
|
||||
content: m.content,
|
||||
}))
|
||||
: [
|
||||
...(systemPrompt
|
||||
? [{ role: 'system' as const, content: systemPrompt }]
|
||||
: []),
|
||||
{ role: 'user' as const, content: userPrompt },
|
||||
]
|
||||
|
||||
// 统一使用自定义会话测试，以便支持上下文与工具
|
||||
await services.value!.promptService.testCustomConversationStream(
|
||||
{
|
||||
modelKey: selectedTestModel.value,
|
||||
messages,
|
||||
variables,
|
||||
tools: hasTools ? optimizationContextTools.value : [],
|
||||
},
|
||||
{
|
||||
...streamHandler,
|
||||
onToolCall: (toolCall: any) => {
|
||||
if (!hasTools) return
|
||||
console.log(
|
||||
`[usePromptTester] ${type} test tool call received:`,
|
||||
toolCall
|
||||
)
|
||||
const toolCallResult = {
|
||||
toolCall: toolCall,
|
||||
status: 'success' as const,
|
||||
timestamp: new Date(),
|
||||
}
|
||||
testPanelRef?.handleToolCall?.(toolCallResult, type)
|
||||
},
|
||||
}
|
||||
)
|
||||
} catch (error) {
|
||||
console.error(t('toast.error.testFailed'), error)
|
||||
state.testError = error instanceof Error ? error.message : t('toast.error.testProcessError')
|
||||
} catch (error: any) {
|
||||
console.error(`[usePromptTester] ${type} test error:`, error)
|
||||
const errorMessage = error.message || t('test.error.failed')
|
||||
const testTypeKey = type === 'original' ? 'originalTestFailed' : 'optimizedTestFailed'
|
||||
toast.error(`${t(`test.error.${testTypeKey}`)}: ${errorMessage}`)
|
||||
} finally {
|
||||
state.isTesting = false
|
||||
// 重置测试状态
|
||||
if (isOriginal) {
|
||||
state.testResults.isTestingOriginal = false
|
||||
} else {
|
||||
state.testResults.isTestingOptimized = false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
return state
|
||||
|
||||
@@ -1026,6 +1026,11 @@ export default {
|
||||
failed: "Test Failed",
|
||||
noModel: "Please select a test model first",
|
||||
noTestContent: "Please enter test content",
|
||||
noOriginalPrompt: "Please enter the original prompt first",
|
||||
noOptimizedPrompt: "Please generate the optimized prompt first",
|
||||
originalTestFailed: "Original prompt test failed",
|
||||
optimizedTestFailed: "Optimized prompt test failed",
|
||||
saveToGlobalFailed: "Failed to save variable {name} to global",
|
||||
},
|
||||
enableMarkdown: "Enable Markdown rendering",
|
||||
disableMarkdown: "Disable Markdown rendering",
|
||||
@@ -1046,7 +1051,19 @@ export default {
|
||||
customVars: "Custom Variables",
|
||||
finalPreview: "Final Preview",
|
||||
missingVars: "Missing Variables",
|
||||
saveToGlobal: "Save to Global Variables",
|
||||
savedToGlobal: "Saved to Global Variables",
|
||||
emptyValueWarning: "Empty value, cannot save",
|
||||
tempCount: "{count} temporary variables",
|
||||
addVariable: "Add Variable",
|
||||
nameRequired: "Variable name is required",
|
||||
addSuccess: "Variable added successfully",
|
||||
deleteSuccess: "Variable {name} deleted",
|
||||
clearSuccess: "All temporary variables cleared",
|
||||
delete: "Delete this variable",
|
||||
},
|
||||
invalidVariables: "Invalid variable data",
|
||||
getVariablesFailed: "Failed to get variables",
|
||||
},
|
||||
template: {
|
||||
noDescription: "No Description",
|
||||
@@ -1839,4 +1856,35 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
// Variable Extraction Feature
|
||||
variableExtraction: {
|
||||
dialogTitle: "Extract as Variable",
|
||||
variableName: "Variable Name",
|
||||
variableNamePlaceholder:
|
||||
"Enter variable name (letters, numbers, underscore)",
|
||||
variableValue: "Variable Value",
|
||||
variableValuePlaceholder: "Selected text content",
|
||||
variableType: "Variable Type",
|
||||
temporaryVariable: "Temporary Variable",
|
||||
temporaryVariableDesc: "Current test only, lost on refresh",
|
||||
globalVariable: "Global Variable",
|
||||
globalVariableDesc: "Saved permanently, shared across sessions",
|
||||
replaceAll: "Replace all ({count} occurrences)",
|
||||
replaceAllRecommended: "(Recommended)",
|
||||
extractButton: "Extract as Variable",
|
||||
extractSuccess: "Successfully extracted variable {{variableName}}",
|
||||
extractSuccessAll:
|
||||
"Successfully extracted variable {{variableName}} ({count} replacements)",
|
||||
savedToGlobal: "Variable {name} saved to global",
|
||||
savedToTemporary: "Variable {name} saved to temporary",
|
||||
validation: {
|
||||
required: "Variable name cannot be empty",
|
||||
noNumberStart: "Variable name cannot start with a number",
|
||||
invalidCharacters:
|
||||
"Variable name can only contain letters, numbers, underscore",
|
||||
predefinedVariable: "Cannot use predefined variable name",
|
||||
duplicateVariable:
|
||||
"Variable name already exists, will reference existing variable",
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -129,7 +129,7 @@ export default {
|
||||
},
|
||||
actions: {
|
||||
globalVariables: "全局变量",
|
||||
contextVariables: "会话变量",
|
||||
contextVariables: "上下文变量",
|
||||
tools: "工具管理",
|
||||
toolManager: "工具管理",
|
||||
},
|
||||
@@ -995,6 +995,11 @@ export default {
|
||||
failed: "测试失败",
|
||||
noModel: "请先选择测试模型",
|
||||
noTestContent: "请输入测试内容",
|
||||
noOriginalPrompt: "请先输入原始提示词",
|
||||
noOptimizedPrompt: "请先生成优化后的提示词",
|
||||
originalTestFailed: "原始提示词测试失败",
|
||||
optimizedTestFailed: "优化提示词测试失败",
|
||||
saveToGlobalFailed: "保存变量 {name} 到全局失败",
|
||||
},
|
||||
enableMarkdown: "启用Markdown渲染",
|
||||
disableMarkdown: "关闭Markdown渲染",
|
||||
@@ -1009,13 +1014,25 @@ export default {
|
||||
inputPlaceholder: "请输入变量值",
|
||||
noVariables: "未检测到变量",
|
||||
previewTitle: "预览结果",
|
||||
firstRound: "第一轮替换（内置变量）",
|
||||
secondRound: "第二轮替换（自定义变量）",
|
||||
firstRound: "第一轮替换(内置变量)",
|
||||
secondRound: "第二轮替换(自定义变量)",
|
||||
builtinVars: "内置变量",
|
||||
customVars: "自定义变量",
|
||||
finalPreview: "最终预览",
|
||||
missingVars: "缺失的变量",
|
||||
saveToGlobal: "保存到全局变量",
|
||||
savedToGlobal: "已保存到全局变量",
|
||||
emptyValueWarning: "变量值为空,无法保存",
|
||||
tempCount: "{count} 个临时变量",
|
||||
addVariable: "添加变量",
|
||||
nameRequired: "变量名不能为空",
|
||||
addSuccess: "变量添加成功",
|
||||
deleteSuccess: "变量 {name} 已删除",
|
||||
clearSuccess: "已清空所有临时变量",
|
||||
delete: "删除此变量",
|
||||
},
|
||||
invalidVariables: "变量数据无效",
|
||||
getVariablesFailed: "获取变量失败",
|
||||
},
|
||||
template: {
|
||||
noDescription: "暂无描述",
|
||||
@@ -1773,4 +1790,31 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
// 变量提取功能
|
||||
variableExtraction: {
|
||||
dialogTitle: "提取为变量",
|
||||
variableName: "变量名",
|
||||
variableNamePlaceholder: "请输入变量名（中英文、数字、下划线）",
|
||||
variableValue: "变量值",
|
||||
variableValuePlaceholder: "选中的文本内容",
|
||||
variableType: "变量类型",
|
||||
temporaryVariable: "临时变量",
|
||||
temporaryVariableDesc: "仅当前测试，刷新丢失",
|
||||
globalVariable: "全局变量",
|
||||
globalVariableDesc: "永久保存，所有会话共享",
|
||||
replaceAll: "全部替换（共 {count} 处）",
|
||||
replaceAllRecommended: "（推荐）",
|
||||
extractButton: "提取为变量",
|
||||
extractSuccess: "成功提取变量 {{variableName}}",
|
||||
extractSuccessAll: "成功提取变量 {{variableName}}（替换了 {count} 处）",
|
||||
savedToGlobal: "变量 {name} 已保存到全局",
|
||||
savedToTemporary: "变量 {name} 已保存到临时变量",
|
||||
validation: {
|
||||
required: "变量名不能为空",
|
||||
noNumberStart: "变量名不能以数字开头",
|
||||
invalidCharacters: "变量名只能包含中文、英文、数字、下划线",
|
||||
predefinedVariable: "不能使用系统预定义变量名",
|
||||
duplicateVariable: "该变量名已存在，将引用现有变量",
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -129,8 +129,9 @@ export default {
|
||||
},
|
||||
actions: {
|
||||
globalVariables: "全局變數",
|
||||
contextVariables: "會話變數",
|
||||
contextVariables: "情境變數",
|
||||
tools: "工具管理",
|
||||
toolManager: "工具管理",
|
||||
},
|
||||
preview: {
|
||||
title: "預覽",
|
||||
@@ -989,6 +990,11 @@ export default {
|
||||
failed: "測試失敗",
|
||||
noModel: "請先選擇測試模型",
|
||||
noTestContent: "請輸入測試內容",
|
||||
noOriginalPrompt: "請先輸入原始提示詞",
|
||||
noOptimizedPrompt: "請先生成優化後的提示詞",
|
||||
originalTestFailed: "原始提示詞測試失敗",
|
||||
optimizedTestFailed: "優化提示詞測試失敗",
|
||||
saveToGlobalFailed: "儲存變數 {name} 到全域失敗",
|
||||
},
|
||||
enableMarkdown: "啟用Markdown渲染",
|
||||
disableMarkdown: "關閉Markdown渲染",
|
||||
@@ -1009,7 +1015,19 @@ export default {
|
||||
customVars: "自訂變數",
|
||||
finalPreview: "最終預覽",
|
||||
missingVars: "缺失的變數",
|
||||
saveToGlobal: "儲存到全域變數",
|
||||
savedToGlobal: "已儲存到全域變數",
|
||||
emptyValueWarning: "變數值為空，無法儲存",
|
||||
tempCount: "{count} 個臨時變數",
|
||||
addVariable: "新增變數",
|
||||
nameRequired: "變數名稱不能為空",
|
||||
addSuccess: "變數新增成功",
|
||||
deleteSuccess: "變數 {name} 已刪除",
|
||||
clearSuccess: "已清空所有臨時變數",
|
||||
delete: "刪除此變數",
|
||||
},
|
||||
invalidVariables: "變數資料無效",
|
||||
getVariablesFailed: "取得變數失敗",
|
||||
},
|
||||
template: {
|
||||
noDescription: "暫無描述",
|
||||
@@ -1737,4 +1755,31 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
// 變數提取功能
|
||||
variableExtraction: {
|
||||
dialogTitle: "提取為變數",
|
||||
variableName: "變數名稱",
|
||||
variableNamePlaceholder: "請輸入變數名稱（中英文、數字、底線）",
|
||||
variableValue: "變數值",
|
||||
variableValuePlaceholder: "選中的文字內容",
|
||||
variableType: "變數類型",
|
||||
temporaryVariable: "臨時變數",
|
||||
temporaryVariableDesc: "僅目前測試，重新整理丟失",
|
||||
globalVariable: "全域變數",
|
||||
globalVariableDesc: "永久儲存，所有會話共用",
|
||||
replaceAll: "全部取代（共 {count} 處）",
|
||||
replaceAllRecommended: "（推薦）",
|
||||
extractButton: "提取為變數",
|
||||
extractSuccess: "成功提取變數 {{variableName}}",
|
||||
extractSuccessAll: "成功提取變數 {{variableName}}（取代了 {count} 處）",
|
||||
savedToGlobal: "變數 {name} 已儲存到全域",
|
||||
savedToTemporary: "變數 {name} 已儲存到臨時變數",
|
||||
validation: {
|
||||
required: "變數名稱不能為空",
|
||||
noNumberStart: "變數名稱不能以數字開頭",
|
||||
invalidCharacters: "變數名稱只能包含中文、英文、數字、底線",
|
||||
predefinedVariable: "不能使用系統預定義變數名稱",
|
||||
duplicateVariable: "該變數名稱已存在，將參照現有變數",
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -3,9 +3,9 @@ import { mount, VueWrapper } from '@vue/test-utils'
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
// 组件导入
|
||||
import ConversationManager from '../../src/components/ConversationManager.vue'
|
||||
import ContextEditor from '../../src/components/ContextEditor.vue'
|
||||
import VariableManagerModal from '../../src/components/VariableManagerModal.vue'
|
||||
import ConversationManager from '../../src/components/context-mode/ConversationManager.vue'
|
||||
import ContextEditor from '../../src/components/context-mode/ContextEditor.vue'
|
||||
import VariableManagerModal from '../../src/components/variable/VariableManagerModal.vue'
|
||||
|
||||
// Mock Naive UI 组件 - 简化版本用于E2E测试
|
||||
vi.mock('naive-ui', () => ({
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
|
||||
import { mount, VueWrapper } from '@vue/test-utils'
|
||||
import { ref, nextTick } from 'vue'
|
||||
import ContextEditor from '../../src/components/ContextEditor.vue'
|
||||
import ContextEditor from '../../src/components/context-mode/ContextEditor.vue'
|
||||
import { createContextRepo, MemoryStorageProvider } from '@prompt-optimizer/core'
|
||||
import type { ContextRepo } from '@prompt-optimizer/core'
|
||||
|
||||
|
||||
@@ -2,8 +2,8 @@ import { describe, it, expect, beforeEach, vi, beforeAll, afterAll } from 'vites
|
||||
import { mount, VueWrapper } from '@vue/test-utils'
|
||||
import { ref, nextTick, reactive } from 'vue'
|
||||
import { createApp } from 'vue'
|
||||
import ConversationManager from '../../src/components/ConversationManager.vue'
|
||||
import ContextEditor from '../../src/components/ContextEditor.vue'
|
||||
import ConversationManager from '../../src/components/context-mode/ConversationManager.vue'
|
||||
import ContextEditor from '../../src/components/context-mode/ContextEditor.vue'
|
||||
|
||||
// Mock Naive UI 组件
|
||||
vi.mock('naive-ui', () => ({
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { nextTick } from 'vue'
|
||||
import ContextEditor from '../../../src/components/ContextEditor.vue'
|
||||
import ContextEditor from '../../../src/components/context-mode/ContextEditor.vue'
|
||||
|
||||
// Mock quickTemplateManager using factory function
|
||||
vi.mock('../../../src/data/quickTemplates', () => {
|
||||
|
||||
+50
-211
@@ -129,6 +129,7 @@
|
||||
<template v-if="functionMode === 'pro'">
|
||||
<!-- 上下文-系统模式 -->
|
||||
<ContextSystemWorkspace
|
||||
ref="systemWorkspaceRef"
|
||||
v-if="contextMode === 'system'"
|
||||
:prompt="optimizer.prompt"
|
||||
@update:prompt="optimizer.prompt = $event"
|
||||
@@ -161,7 +162,6 @@
|
||||
:global-variables="
|
||||
variableManager?.allVariables?.value || {}
|
||||
"
|
||||
:context-variables="currentContextVariables"
|
||||
:predefined-variables="predefinedVariables"
|
||||
:available-variables="
|
||||
variableManager?.variableManager.value?.resolveAllVariables() ||
|
||||
@@ -198,9 +198,6 @@
|
||||
@switch-version="handleSwitchVersion"
|
||||
@save-favorite="handleSaveFavorite"
|
||||
@open-global-variables="openVariableManager()"
|
||||
@open-context-variables="
|
||||
handleOpenContextEditor('variables')
|
||||
"
|
||||
@open-variable-manager="handleOpenVariableManager"
|
||||
@open-context-editor="handleOpenContextEditor"
|
||||
@open-template-manager="openTemplateManager"
|
||||
@@ -313,6 +310,7 @@
|
||||
|
||||
<!-- 上下文-用户模式 -->
|
||||
<ContextUserWorkspace
|
||||
ref="userWorkspaceRef"
|
||||
v-else-if="contextMode === 'user'"
|
||||
:prompt="optimizer.prompt"
|
||||
@update:prompt="optimizer.prompt = $event"
|
||||
@@ -340,10 +338,10 @@
|
||||
:global-variables="
|
||||
variableManager?.allVariables?.value || {}
|
||||
"
|
||||
:context-variables="currentContextVariables"
|
||||
:predefined-variables="predefinedVariables"
|
||||
:services="services"
|
||||
@variable-change="handleTestPanelVariableChange"
|
||||
@save-to-global="handleSaveToGlobal"
|
||||
:input-mode="
|
||||
responsiveLayout.recommendedInputMode.value
|
||||
"
|
||||
@@ -368,9 +366,6 @@
|
||||
@switch-version="handleSwitchVersion"
|
||||
@save-favorite="handleSaveFavorite"
|
||||
@open-global-variables="openVariableManager()"
|
||||
@open-context-variables="
|
||||
handleOpenContextEditor('variables')
|
||||
"
|
||||
@open-tool-manager="
|
||||
handleOpenContextEditor('tools')
|
||||
"
|
||||
@@ -700,7 +695,6 @@
|
||||
variableManager?.allVariables?.value ||
|
||||
{}
|
||||
"
|
||||
:context-variables="currentContextVariables"
|
||||
:predefined-variables="predefinedVariables"
|
||||
v-model:test-content="testContent"
|
||||
v-model:is-compare-mode="isCompareMode"
|
||||
@@ -1025,6 +1019,8 @@ import {
|
||||
useProSubMode,
|
||||
useImageSubMode,
|
||||
usePromptPreview,
|
||||
usePromptTester,
|
||||
useContextManagement,
|
||||
|
||||
// i18n functions
|
||||
initializeI18nWithStorage,
|
||||
@@ -1051,14 +1047,11 @@ import type {
|
||||
TemplateSelectOption,
|
||||
} from "@prompt-optimizer/ui";
|
||||
|
||||
// Local composables
|
||||
import { useContextManagement } from "./composables/useContextManagement";
|
||||
|
||||
// 1. 基础 composables
|
||||
// highlight.js for Naive NCode
|
||||
const hljsInstance = hljs;
|
||||
const { t } = useI18n();
|
||||
// 移除全局toast实例，改为在需要时本地调用
|
||||
const toast = useToast();
|
||||
|
||||
// 2. 初始化应用服务
|
||||
const { services, isInitializing } = useAppInitializer();
|
||||
@@ -1098,6 +1091,8 @@ const saveFavoriteData = ref<{
|
||||
} | null>(null);
|
||||
const optimizeModelSelect = ref(null);
|
||||
const testPanelRef = ref(null);
|
||||
const systemWorkspaceRef = ref(null);
|
||||
const userWorkspaceRef = ref(null);
|
||||
const promptPanelRef = ref<{
|
||||
refreshIterateTemplateSelect?: () => void;
|
||||
} | null>(null);
|
||||
@@ -1153,24 +1148,6 @@ const handleModeSelect = async (mode: "basic" | "pro" | "image") => {
|
||||
const testContent = ref("");
|
||||
const isCompareMode = ref(true);
|
||||
|
||||
// 测试结果状态管理
|
||||
const testResults = ref({
|
||||
// 原始提示词结果
|
||||
originalResult: "",
|
||||
originalReasoning: "",
|
||||
isTestingOriginal: false,
|
||||
|
||||
// 优化提示词结果
|
||||
optimizedResult: "",
|
||||
optimizedReasoning: "",
|
||||
isTestingOptimized: false,
|
||||
|
||||
// 单一结果模式
|
||||
singleResult: "",
|
||||
singleReasoning: "",
|
||||
isTestingSingle: false,
|
||||
});
|
||||
|
||||
// 响应式布局和模式配置 - 新增
|
||||
const responsiveLayout = useResponsiveTestLayout();
|
||||
const testModeConfig = useTestModeConfig(selectedOptimizationMode);
|
||||
@@ -1314,24 +1291,48 @@ const contextManagement = useContextManagement({
|
||||
// 从 contextManagement 提取其他状态和方法 (contextMode 除外,已在前面声明)
|
||||
const optimizationContext = contextManagement.optimizationContext;
|
||||
const optimizationContextTools = contextManagement.optimizationContextTools;
|
||||
const isContextLoaded = contextManagement.isContextLoaded;
|
||||
const currentContextId = contextManagement.currentContextId;
|
||||
const contextRepo = contextManagement.contextRepo;
|
||||
const currentContextVariables = contextManagement.currentContextVariables;
|
||||
const predefinedVariables = contextManagement.predefinedVariables;
|
||||
const initializeContextPersistence =
|
||||
contextManagement.initializeContextPersistence;
|
||||
const persistContextUpdate = contextManagement.persistContextUpdate;
|
||||
const handleOpenContextEditor = contextManagement.handleOpenContextEditor;
|
||||
const handleContextEditorSave = contextManagement.handleContextEditorSave;
|
||||
const handleContextEditorStateUpdate =
|
||||
contextManagement.handleContextEditorStateUpdate;
|
||||
const handleContextModeChange = contextManagement.handleContextModeChange;
|
||||
const updateContextVariable = contextManagement.updateContextVariable;
|
||||
|
||||
// 处理测试面板的变量变化，同步到会话级变量
|
||||
// 🆕 提示词测试管理（支持变量注入、上下文、工具调用）
|
||||
const promptTester = usePromptTester(
|
||||
services as any,
|
||||
toRef(modelManager, 'selectedTestModel'),
|
||||
selectedOptimizationMode,
|
||||
advancedModeEnabled,
|
||||
optimizationContext,
|
||||
optimizationContextTools,
|
||||
variableManager
|
||||
);
|
||||
|
||||
// 测试结果引用（从 promptTester 获取）
|
||||
const testResults = computed(() => promptTester.testResults);
|
||||
|
||||
// 处理测试面板的变量变化（现在测试变量由TestAreaPanel自己管理，不需要同步到会话）
|
||||
const handleTestPanelVariableChange = async (name: string, value: string) => {
|
||||
await updateContextVariable(name, value);
|
||||
// 测试变量现在只在TestAreaPanel内部管理，不需要外部同步
|
||||
};
|
||||
|
||||
// 🆕 处理保存测试变量到全局
|
||||
const handleSaveToGlobal = async (name: string, value: string) => {
|
||||
if (!variableManager) {
|
||||
console.warn("[App] variableManager not ready");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
variableManager.updateVariable(name, value);
|
||||
toast.success(t('test.variables.savedToGlobal', { name }));
|
||||
} catch (error) {
|
||||
console.error("[App] Failed to save variable to global:", error);
|
||||
toast.error(t('test.error.saveToGlobalFailed', { name }));
|
||||
}
|
||||
};
|
||||
|
||||
// 同步 contextManagement 中的 contextMode 到我们的 contextMode ref
|
||||
@@ -2051,178 +2052,16 @@ const promptInputPlaceholder = computed(() => {
|
||||
});
|
||||
|
||||
// 真实测试处理函数
|
||||
const handleTestAreaTest = async () => {
|
||||
if (!services.value?.promptService) {
|
||||
useToast().error("服务未初始化，请稍后重试");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!modelManager.selectedTestModel) {
|
||||
useToast().error("请先选择测试模型");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("[App] Starting real test with content:", testContent.value);
|
||||
|
||||
if (isCompareMode.value) {
|
||||
// 对比模式：测试原始和优化提示词
|
||||
await Promise.all([
|
||||
testPromptWithType("original"),
|
||||
testPromptWithType("optimized"),
|
||||
]);
|
||||
} else {
|
||||
// 单一模式：只测试优化后的提示词
|
||||
await testPromptWithType("optimized");
|
||||
}
|
||||
};
|
||||
|
||||
// 测试特定类型的提示词（复用会话上下文 + 变量 + 工具）
|
||||
const testPromptWithType = async (type: "original" | "optimized") => {
|
||||
const isOriginal = type === "original";
|
||||
const prompt = isOriginal ? optimizer.prompt : optimizer.optimizedPrompt;
|
||||
|
||||
if (!prompt) {
|
||||
useToast().error(
|
||||
isOriginal ? "请先输入原始提示词" : "请先生成优化后的提示词",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// 设置测试状态
|
||||
if (isOriginal) {
|
||||
testResults.value.isTestingOriginal = true;
|
||||
testResults.value.originalResult = "";
|
||||
testResults.value.originalReasoning = "";
|
||||
} else {
|
||||
testResults.value.isTestingOptimized = true;
|
||||
testResults.value.optimizedResult = "";
|
||||
testResults.value.optimizedReasoning = "";
|
||||
}
|
||||
|
||||
// 清除对应类型的工具调用数据
|
||||
testPanelRef.value?.clearToolCalls?.(isOriginal ? "original" : "optimized");
|
||||
|
||||
try {
|
||||
const streamHandler = {
|
||||
onToken: (token: string) => {
|
||||
if (isOriginal) {
|
||||
testResults.value.originalResult += token;
|
||||
} else {
|
||||
testResults.value.optimizedResult += token;
|
||||
}
|
||||
},
|
||||
onReasoningToken: (reasoningToken: string) => {
|
||||
if (isOriginal) {
|
||||
testResults.value.originalReasoning += reasoningToken;
|
||||
} else {
|
||||
testResults.value.optimizedReasoning += reasoningToken;
|
||||
}
|
||||
},
|
||||
onComplete: () => {
|
||||
console.log(`[App] ${type} test completed`);
|
||||
},
|
||||
onError: (err: Error) => {
|
||||
const errorMessage = err.message || t("test.error.failed");
|
||||
console.error(`[App] ${type} test failed:`, errorMessage);
|
||||
useToast().error(
|
||||
`${type === "original" ? "原始" : "优化"}提示词测试失败: ${errorMessage}`,
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// 统一构造对话与变量，尽量复用上下文
|
||||
let systemPrompt = "";
|
||||
let userPrompt = "";
|
||||
|
||||
if (selectedOptimizationMode.value === "user") {
|
||||
// 用户提示词模式：提示词作为用户输入
|
||||
systemPrompt = "";
|
||||
userPrompt = prompt;
|
||||
} else {
|
||||
// 系统提示词模式：提示词作为系统消息
|
||||
systemPrompt = prompt;
|
||||
userPrompt =
|
||||
testContent.value ||
|
||||
"请按照你的角色设定，展示你的能力并与我互动。";
|
||||
}
|
||||
|
||||
const hasConversationContext =
|
||||
selectedOptimizationMode.value === "system" &&
|
||||
advancedModeEnabled.value &&
|
||||
(optimizationContext.value?.length || 0) > 0;
|
||||
const hasTools =
|
||||
advancedModeEnabled.value &&
|
||||
(optimizationContextTools.value?.length || 0) > 0;
|
||||
|
||||
// 变量：合并变量库 + 当前提示词/问题（用于会话模板中的占位符）
|
||||
// 按优先级合并: 全局自定义变量 < 会话级变量 < 预定义变量
|
||||
const baseVars =
|
||||
(variableManager?.variableManager.value?.resolveAllVariables() ||
|
||||
{}) as Record<string, string>;
|
||||
const variables = {
|
||||
...baseVars,
|
||||
...currentContextVariables.value, // 会话级变量（包含测试面板输入）
|
||||
currentPrompt: prompt,
|
||||
userQuestion: userPrompt,
|
||||
};
|
||||
|
||||
// 对话构造逻辑：
|
||||
// - 系统模式 + 有会话上下文：使用会话上下文（因为系统提示词本身就是多轮对话场景）
|
||||
// - 用户模式：无论是否有会话上下文，都直接发送优化后的提示词作为用户消息
|
||||
// （因为用户提示词优化的目标是生成可直接使用的单条用户消息）
|
||||
const messages =
|
||||
selectedOptimizationMode.value === "system" &&
|
||||
hasConversationContext
|
||||
? optimizationContext.value.map((m) => ({
|
||||
role: m.role,
|
||||
content: m.content,
|
||||
}))
|
||||
: [
|
||||
...(systemPrompt
|
||||
? [{ role: "system", content: systemPrompt }]
|
||||
: []),
|
||||
{ role: "user", content: userPrompt },
|
||||
];
|
||||
|
||||
// 统一使用自定义会话测试，以便支持上下文与工具
|
||||
await services.value.promptService.testCustomConversationStream(
|
||||
{
|
||||
modelKey: modelManager.selectedTestModel,
|
||||
messages,
|
||||
variables,
|
||||
tools: hasTools ? optimizationContextTools.value : [],
|
||||
},
|
||||
{
|
||||
...streamHandler,
|
||||
onToolCall: (toolCall: any) => {
|
||||
if (!hasTools) return;
|
||||
console.log(
|
||||
`[App] ${type} test tool call received:`,
|
||||
toolCall,
|
||||
);
|
||||
const toolCallResult = {
|
||||
toolCall: toolCall,
|
||||
status: "success" as const,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
testPanelRef.value?.handleToolCall?.(toolCallResult, type);
|
||||
},
|
||||
},
|
||||
);
|
||||
} catch (error: any) {
|
||||
console.error(`[App] ${type} test error:`, error);
|
||||
const errorMessage = error.message || t("test.error.failed");
|
||||
useToast().error(
|
||||
`${type === "original" ? "原始" : "优化"}提示词测试失败: ${errorMessage}`,
|
||||
);
|
||||
} finally {
|
||||
// 重置测试状态
|
||||
if (isOriginal) {
|
||||
testResults.value.isTestingOriginal = false;
|
||||
} else {
|
||||
testResults.value.isTestingOptimized = false;
|
||||
}
|
||||
}
|
||||
const handleTestAreaTest = async (testVariables?: Record<string, string>) => {
|
||||
// 调用 promptTester 的 executeTest 方法
|
||||
await promptTester.executeTest(
|
||||
optimizer.prompt,
|
||||
optimizer.optimizedPrompt,
|
||||
testContent.value,
|
||||
isCompareMode.value,
|
||||
testVariables,
|
||||
testPanelRef.value
|
||||
);
|
||||
};
|
||||
|
||||
const handleTestAreaCompareToggle = () => {
|
||||
|
||||
@@ -12,7 +12,12 @@ export default defineConfig({
|
||||
// 包含的文件模式
|
||||
include: ['tests/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
|
||||
// 排除的文件模式
|
||||
exclude: ['**/node_modules/**', '**/dist/**', '**/.{idea,git,cache,output,temp}/**'],
|
||||
exclude: [
|
||||
'**/node_modules/**',
|
||||
'**/dist/**',
|
||||
'**/.{idea,git,cache,output,temp}/**',
|
||||
'**/tests/e2e/**', // 排除 Playwright E2E 测试
|
||||
],
|
||||
// 全局测试设置
|
||||
globals: true,
|
||||
// 测试覆盖率配置
|
||||
|
||||
Reference in new issue
Block a user