633 lines
18 KiB
Markdown
633 lines
18 KiB
Markdown
# 节点配置页面增强方案
|
||
|
||
## 一、您的想法完全正确！
|
||
|
||
您的建议非常有价值，这正是提升用户体验和开发效率的关键改进点。当前系统虽然有一些基础功能，但确实需要增强以下方面：
|
||
|
||
### 当前系统的不足
|
||
|
||
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
|