aiagent/节点配置页面增强方案.md

节点配置页面增强方案

一、您的想法完全正确！

您的建议非常有价值，这正是提升用户体验和开发效率的关键改进点。当前系统虽然有一些基础功能，但确实需要增强以下方面：

当前系统的不足

1. 变量可见性不足

   • 虽然有 availableVariables 计算属性，但用户看不到：
     • 上游节点实际输出了哪些变量
     • 变量的数据结构（嵌套字段）
     • 变量的实时值（执行时）

2. 记忆信息不直观

   • Cache 节点配置时，用户看不到：
     • 当前记忆的内容（conversation_history、user_profile）
     • 记忆的键名和存储位置
     • TTL 和过期时间

3. 数据流转不透明

   • 用户不知道：
     • 数据从哪个节点来
     • 经过哪些转换
     • 最终输出什么格式

4. 配置指导不足

   • 缺少：
     • 节点使用示例
     • 常见配置模式
     • 最佳实践提示

二、增强方案设计

方案 1：数据流转可视化面板 ⭐⭐⭐⭐⭐

1.1 新增"数据流"标签页

在节点配置面板中添加"数据流"标签页，显示：

<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 节点，显示详细的记忆信息：

<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 配置向导

为复杂节点提供配置向导：

<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 增强变量插入功能

<!-- 在配置字段中添加智能提示 -->
<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 实时数据流追踪

<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. 数据获取

// 获取上游节点变量
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. 记忆数据获取

// 获取记忆数据
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. 执行数据获取

// 获取节点执行数据
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