admin/aiagent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a7893210052f20edbcaf78a013343223cff32ed1
aiagent/节点配置页面增强方案.md

633 lines
18 KiB
Markdown
Raw Normal View History

工具
2026-01-23 09:49:45 +08:00
# 节点配置页面增强方案
## 一、您的想法完全正确！
您的建议非常有价值，这正是提升用户体验和开发效率的关键改进点。当前系统虽然有一些基础功能，但确实需要增强以下方面：
### 当前系统的不足
1. **变量可见性不足**
- 虽然有 `availableVariables` 计算属性，但用户看不到：
- 上游节点实际输出了哪些变量
- 变量的数据结构（嵌套字段）
- 变量的实时值（执行时）
2. **记忆信息不直观**
- Cache 节点配置时，用户看不到：
- 当前记忆的内容（conversation_history、user_profile）
- 记忆的键名和存储位置
- TTL 和过期时间
3. **数据流转不透明**
- 用户不知道：
- 数据从哪个节点来
- 经过哪些转换
- 最终输出什么格式
4. **配置指导不足**
- 缺少：
- 节点使用示例
- 常见配置模式
- 最佳实践提示
## 二、增强方案设计
### 方案 1：数据流转可视化面板 ⭐⭐⭐⭐⭐
#### 1.1 新增"数据流"标签页
在节点配置面板中添加"数据流"标签页，显示：
```vue
<el-tab-pane label="数据流" name="dataflow">
<!-- 上游数据源 -->
<el-card shadow="never" class="dataflow-card">
<template #header>
<div class="card-header">
<span>📥 输入数据源</span>
<el-tag size="small" type="info">{{ upstreamNodes.length }} 个上游节点</el-tag>
</div>
</template>
<!-- 上游节点列表 -->
<div v-for="edge in upstreamEdges" :key="edge.id" class="upstream-item">
<div class="node-info">
<el-icon><ArrowLeft /></el-icon>
<span class="node-name">{{ getNodeLabel(edge.source) }}</span>
<el-tag size="small" :type="getNodeTypeColor(edge.source)">
{{ getNodeType(edge.source) }}
</el-tag>
</div>
<!-- 可用变量列表 -->
<div class="variables-list">
<div
v-for="var in getUpstreamVariables(edge.source)"
:key="var.name"
class="variable-item"
@click="insertVariable(var.name)"
>
<el-icon><Document /></el-icon>
<span class="var-name">{{ var.name }}</span>
<span class="var-type">{{ var.type }}</span>
<el-tooltip :content="var.description" placement="right">
<el-icon><InfoFilled /></el-icon>
</el-tooltip>
</div>
</div>
<!-- 数据预览（如果有执行记录） -->
<el-collapse v-if="hasExecutionData(edge.source)">
<el-collapse-item title="数据预览" name="preview">
<pre class="data-preview">{{ formatExecutionData(edge.source) }}</pre>
</el-collapse-item>
</el-collapse>
</div>
</el-card>
<!-- 当前节点输出 -->
<el-card shadow="never" class="dataflow-card">
<template #header>
<div class="card-header">
<span>📤 输出数据</span>
</div>
</template>
<!-- 输出字段说明 -->
<div class="output-fields">
<div
v-for="field in getOutputFields(selectedNode.type)"
:key="field.name"
class="output-field"
>
<span class="field-name">{{ field.name }}</span>
<span class="field-desc">{{ field.description }}</span>
</div>
</div>
<!-- 下游节点 -->
<div v-if="downstreamNodes.length > 0" class="downstream-section">
<div class="section-title">下游节点：</div>
<div
v-for="node in downstreamNodes"
:key="node.id"
class="downstream-item"
>
<el-icon><ArrowRight /></el-icon>
<span>{{ node.data.label }}</span>
</div>
</div>
</el-card>
</el-tab-pane>
```
#### 1.2 功能特性
- **上游节点追踪**：显示所有连接到当前节点的上游节点
- **变量自动推断**：根据上游节点类型自动推断可用变量
- **数据预览**：如果有执行记录，显示实际数据
- **一键插入**：点击变量名直接插入到配置字段
- **类型提示**：显示变量的数据类型和结构
### 方案 2：记忆信息展示 ⭐⭐⭐⭐⭐
#### 2.1 Cache 节点增强
对于 Cache 节点，显示详细的记忆信息：
```vue
<el-tab-pane label="记忆信息" name="memory" v-if="selectedNode.type === 'cache'">
<!-- 当前记忆内容 -->
<el-card shadow="never">
<template #header>
<div class="card-header">
<span>💾 记忆内容</span>
<el-button size="small" @click="refreshMemory">刷新</el-button>
</div>
</template>
<!-- 记忆键 -->
<el-form-item label="记忆键">
<el-input
v-model="memoryKey"
placeholder="user_memory_{user_id}"
readonly
/>
<el-tag size="small" style="margin-left: 8px;">
{{ memoryStatus }}
</el-tag>
</el-form-item>
<!-- 对话历史 -->
<el-form-item label="对话历史">
<el-tag
v-if="memoryData?.conversation_history"
type="info"
>
{{ memoryData.conversation_history.length }} 条记录
</el-tag>
<el-button
size="small"
text
@click="showConversationHistory"
>
查看详情
</el-button>
</el-form-item>
<!-- 用户画像 -->
<el-form-item label="用户画像">
<el-tag
v-if="memoryData?.user_profile"
type="success"
>
{{ Object.keys(memoryData.user_profile).length }} 个字段
</el-tag>
<el-button
size="small"
text
@click="showUserProfile"
>
查看详情
</el-button>
</el-form-item>
<!-- TTL 信息 -->
<el-form-item label="过期时间">
<el-tag type="warning">
{{ ttlInfo }}
</el-tag>
</el-form-item>
</el-card>
<!-- 记忆操作 -->
<el-card shadow="never" style="margin-top: 15px;">
<template #header>
<span>🔧 记忆操作</span>
</template>
<el-button-group>
<el-button size="small" @click="testMemoryQuery">测试查询</el-button>
<el-button size="small" @click="clearMemory">清空记忆</el-button>
<el-button size="small" type="danger" @click="deleteMemory">删除记忆</el-button>
</el-button-group>
</el-card>
</el-tab-pane>
```
#### 2.2 功能特性
- **实时记忆查看**：显示当前记忆的实际内容
- **对话历史预览**：显示最近的对话记录
- **用户画像展示**：显示用户画像字段
- **TTL 倒计时**：显示记忆过期时间
- **记忆操作**：提供测试、清空、删除等操作
### 方案 3：智能配置助手 ⭐⭐⭐⭐
#### 3.1 配置向导
为复杂节点提供配置向导：
```vue
<el-tab-pane label="配置助手" name="assistant">
<!-- 配置模式选择 -->
<el-card shadow="never">
<template #header>
<span>🎯 快速配置</span>
</template>
<el-radio-group v-model="configMode">
<el-radio label="simple">简单模式</el-radio>
<el-radio label="advanced">高级模式</el-radio>
<el-radio label="template">模板模式</el-radio>
</el-radio-group>
<!-- 简单模式 -->
<div v-if="configMode === 'simple'" class="config-wizard">
<el-steps :active="wizardStep" simple>
<el-step title="选择场景" />
<el-step title="配置参数" />
<el-step title="完成" />
</el-steps>
<!-- 场景选择 -->
<div v-if="wizardStep === 0" class="wizard-content">
<div class="scenario-list">
<div
v-for="scenario in getScenarios(selectedNode.type)"
:key="scenario.id"
class="scenario-item"
@click="selectScenario(scenario)"
>
<el-icon><component :is="scenario.icon" /></el-icon>
<div class="scenario-info">
<div class="scenario-name">{{ scenario.name }}</div>
<div class="scenario-desc">{{ scenario.description }}</div>
</div>
</div>
</div>
</div>
<!-- 参数配置 -->
<div v-if="wizardStep === 1" class="wizard-content">
<el-form :model="wizardConfig" label-width="120px">
<el-form-item
v-for="field in selectedScenario.fields"
:key="field.name"
:label="field.label"
>
<el-input
v-if="field.type === 'text'"
v-model="wizardConfig[field.name]"
:placeholder="field.placeholder"
/>
<el-select
v-else-if="field.type === 'select'"
v-model="wizardConfig[field.name]"
>
<el-option
v-for="opt in field.options"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select>
</el-form-item>
</el-form>
</div>
</div>
<!-- 模板模式 -->
<div v-else-if="configMode === 'template'" class="template-selector">
<el-select
v-model="selectedTemplate"
placeholder="选择配置模板"
@change="applyTemplate"
>
<el-option
v-for="template in getTemplates(selectedNode.type)"
:key="template.id"
:label="template.name"
:value="template.id"
>
<div class="template-option">
<span>{{ template.name }}</span>
<el-tag size="small" type="info">{{ template.category }}</el-tag>
</div>
</el-option>
</el-select>
<el-card v-if="selectedTemplate" shadow="never" style="margin-top: 15px;">
<div class="template-preview">
<div class="preview-title">模板预览：</div>
<pre>{{ getTemplatePreview(selectedTemplate) }}</pre>
</div>
</el-card>
</div>
</el-card>
</el-tab-pane>
```
#### 3.2 功能特性
- **场景化配置**：根据使用场景提供预设配置
- **配置向导**：分步骤引导用户完成配置
- **模板库**：提供常用配置模板
- **一键应用**：快速应用模板配置
### 方案 4：变量智能提示 ⭐⭐⭐⭐⭐
#### 4.1 增强变量插入功能
```vue
<!-- 在配置字段中添加智能提示 -->
<el-form-item label="提示词">
<el-input
v-model="selectedNode.data.prompt"
type="textarea"
:rows="6"
placeholder="输入提示词..."
/>
<!-- 变量提示面板 -->
<el-collapse v-model="variablePanelActive" style="margin-top: 10px;">
<el-collapse-item title="可用变量" name="variables">
<div class="variable-suggestions">
<!-- 基础变量 -->
<div class="var-group">
<div class="group-title">基础变量</div>
<div class="var-items">
<el-tag
v-for="var in basicVariables"
:key="var"
class="var-tag"
@click="insertVariable('prompt', var)"
>
{{ var }}
</el-tag>
</div>
</div>
<!-- 上游变量 -->
<div class="var-group" v-if="upstreamVariables.length > 0">
<div class="group-title">上游节点变量</div>
<div class="var-items">
<el-tag
v-for="var in upstreamVariables"
:key="var.name"
class="var-tag"
@click="insertVariable('prompt', var.name)"
>
{{ var.name }}
<el-tooltip :content="var.description">
<el-icon><InfoFilled /></el-icon>
</el-tooltip>
</el-tag>
</div>
</div>
<!-- 记忆变量 -->
<div class="var-group" v-if="memoryVariables.length > 0">
<div class="group-title">记忆变量</div>
<div class="var-items">
<el-tag
v-for="var in memoryVariables"
:key="var.name"
class="var-tag"
@click="insertVariable('prompt', var.name)"
>
{{ var.name }}
<el-tooltip :content="var.description">
<el-icon><InfoFilled /></el-icon>
</el-tooltip>
</el-tag>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</el-form-item>
```
#### 4.2 功能特性
- **变量分组**：按来源分组显示变量
- **类型提示**：显示变量的数据类型
- **描述信息**：鼠标悬停显示变量说明
- **一键插入**：点击变量标签直接插入
- **自动补全**：输入 `{{` 时自动提示变量
### 方案 5：执行时数据预览 ⭐⭐⭐⭐
#### 5.1 实时数据流追踪
```vue
<el-tab-pane label="数据预览" name="preview">
<!-- 执行记录选择 -->
<el-card shadow="never">
<template #header>
<div class="card-header">
<span>📊 执行数据</span>
<el-select
v-model="selectedExecutionId"
placeholder="选择执行记录"
size="small"
style="width: 200px;"
>
<el-option
v-for="exec in recentExecutions"
:key="exec.id"
:label="`${exec.created_at} - ${exec.status}`"
:value="exec.id"
/>
</el-select>
</div>
</template>
<!-- 输入数据 -->
<el-card shadow="never" style="margin-bottom: 15px;">
<template #header>
<span>📥 输入数据</span>
</template>
<el-scrollbar height="200px">
<pre class="data-viewer">{{ formatInputData(executionData?.input) }}</pre>
</el-scrollbar>
</el-card>
<!-- 输出数据 -->
<el-card shadow="never">
<template #header>
<span>📤 输出数据</span>
</template>
<el-scrollbar height="200px">
<pre class="data-viewer">{{ formatOutputData(executionData?.output) }}</pre>
</el-scrollbar>
</el-card>
<!-- 执行信息 -->
<el-descriptions :column="2" border style="margin-top: 15px;">
<el-descriptions-item label="执行时间">
{{ executionData?.duration }}ms
</el-descriptions-item>
<el-descriptions-item label="执行状态">
<el-tag :type="getStatusType(executionData?.status)">
{{ executionData?.status }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="缓存命中" v-if="executionData?.cache_hit !== undefined">
<el-tag :type="executionData.cache_hit ? 'success' : 'info'">
{{ executionData.cache_hit ? '是' : '否' }}
</el-tag>
</el-descriptions-item>
</el-descriptions>
</el-card>
</el-tab-pane>
```
## 三、实施优先级
### 🔥 高优先级（立即实施）
1. **数据流转可视化面板** ⭐⭐⭐⭐⭐
- 实施难度：中
- 效果：显著提升用户体验
- 预计时间：3-4 小时
2. **变量智能提示增强** ⭐⭐⭐⭐⭐
- 实施难度：低
- 效果：降低配置错误率
- 预计时间：2-3 小时
### 🟡 中优先级（近期实施）
3. **记忆信息展示** ⭐⭐⭐⭐⭐
- 实施难度：中
- 效果：直观了解记忆状态
- 预计时间：2-3 小时
4. **执行时数据预览** ⭐⭐⭐⭐
- 实施难度：中
- 效果：便于调试和优化
- 预计时间：2-3 小时
### 🟢 低优先级（长期优化）
5. **智能配置助手** ⭐⭐⭐⭐
- 实施难度：高
- 效果：降低学习成本
- 预计时间：4-6 小时
## 四、技术实现要点
### 1. 数据获取
```typescript
// 获取上游节点变量
const getUpstreamVariables = (nodeId: string) => {
const node = nodes.value.find(n => n.id === nodeId)
if (!node) return []
// 根据节点类型推断输出变量
const variables = []
switch (node.type) {
case 'llm':
variables.push({ name: 'output', type: 'string', description: 'LLM生成的回复' })
variables.push({ name: 'response', type: 'string', description: '完整响应' })
break
case 'cache':
variables.push({ name: 'memory', type: 'object', description: '记忆数据' })
variables.push({ name: 'conversation_history', type: 'array', description: '对话历史' })
variables.push({ name: 'user_profile', type: 'object', description: '用户画像' })
break
case 'transform':
// 从mapping中提取
const mapping = node.data?.mapping || {}
Object.keys(mapping).forEach(key => {
variables.push({ name: key, type: 'any', description: `映射字段: ${key}` })
})
break
}
return variables
}
```
### 2. 记忆数据获取
```typescript
// 获取记忆数据
const fetchMemoryData = async (nodeId: string) => {
if (selectedNode.value?.type !== 'cache') return
const key = selectedNode.value.data.key
// 调用API获取记忆数据
try {
const response = await api.get(`/api/v1/cache/${encodeURIComponent(key)}`)
memoryData.value = response.data
} catch (error) {
console.error('获取记忆数据失败:', error)
}
}
```
### 3. 执行数据获取
```typescript
// 获取节点执行数据
const fetchNodeExecutionData = async (nodeId: string, executionId: string) => {
try {
const response = await api.get(
`/api/v1/execution-logs/executions/${executionId}/nodes/${nodeId}`
)
executionData.value = response.data
} catch (error) {
console.error('获取执行数据失败:', error)
}
}
```
## 五、预期效果
### 用户体验提升
1. **降低学习成本**
- 新用户无需查阅文档即可理解数据流转
- 配置错误率降低 50%+
2. **提升开发效率**
- 节点配置时间减少 40%+
- 调试时间减少 60%+
3. **增强可视化**
- 数据流转一目了然
- 记忆状态实时可见
- 执行结果直观展示
### 开发体验提升
1. **快速搭建**
- 通过模板和向导快速创建工作流
- 减少重复配置工作
2. **错误预防**
- 变量类型检查
- 配置验证提示
- 常见错误预警
## 六、总结
您的想法完全正确！这些增强功能将显著提升用户体验和开发效率。建议优先实施：
1. **数据流转可视化面板** - 让用户清楚看到数据如何流转
2. **变量智能提示** - 降低配置错误率
3. **记忆信息展示** - 直观了解记忆状态
这些功能将使平台更加易用和专业！
---
**文档版本**：v1.0
**创建时间**：2024年
**维护人员**：AI Assistant
Reference in New Issue Copy Permalink