创建chatflow时根据缓存自动初始化输入参数和打开开始节点的参数编辑面板时，系统会自动初始化参数并添加缺失的必要参数
文件路径：app\components\workflow\nodes\start\use-config.ts
开始节点参数自动初始化功能总结
功能概述
实现了开始节点参数编辑面板打开时的自动初始化功能，包括两个核心功能：
- 参数值初始化 ：自动从localStorage获取最新的userInfoParams并更新参数值
- 自动添加初始化参数 ：自动检查并添加缺失的必要系统参数
核心实现代码
1. 工具函数
/**
* 从localStorage获取用户信息参数
* @returns 用户信息参数对象
*/
const getUserInfoParams = () => {
try {
const userInfoParamsStr = localStorage.getItem('userInfoParams')
return userInfoParamsStr ? JSON.parse
(userInfoParamsStr) : {}
} catch (error) {
console.error('获取userInfoParams失败:', error)
return {}
}
}
/**
* 需要自动添加的初始化参数配置
* 这些参数会在打开开始节点参数编辑面板时自动添加
*/
const requiredParams = [
{ key: 'CurrentDatabaseId', label: '当前账号id' },
{ key: 'DeptId', label: '当前部门' },
{ key: 'OptId', label: '当前操作员' },
{ key: 'PositionId', label: '当前职位' },
{ key: 'keyCode', label: '公司id' },
{ key: 'workSpaceName', label: '当前账号名' },
{ key: 'ServiceIP', label: '服务IP地址' },
]
2. 参数值初始化逻辑
/**
* 初始化参数：当打开参数编辑面板时，从localStorage获取最新的
userInfoParams并更新参数值
* 功能：确保参数值始终与localStorage中的最新数据保持一致
*/
useEffect(() => {
// 从localStorage获取最新的用户信息参数
const userInfoParams = getUserInfoParams()
// 检查是否需要更新参数值
const needUpdate = inputs.variables.some((varItem) => {
const paramKey = varItem.variable
const param = requiredParams.find(p => p.key === paramKey)
if (param) {
const currentValue = varItem.value
const newValue = userInfoParams[paramKey] || ''
return currentValue !== newValue
}
return false
})
// 如果需要更新参数值
if (needUpdate) {
const updatedVariables = inputs.variables.map
((varItem) => {
const paramKey = varItem.variable
const param = requiredParams.find(p => p.key === paramKey)
if (param) {
const newValue = userInfoParams[paramKey] || ''
return {
...varItem,
value: newValue,
default: newValue,
}
}
return varItem
})
// 使用immer更新状态
const newInputs = produce(inputs, (draft: any) => {
draft.variables = updatedVariables
})
// 更新节点输入数据
setInputs(newInputs)
}
}, [inputs, setInputs])
3. 自动添加初始化参数逻辑
/**
* 自动增加初始化输入参数：当打开参数编辑面板时，自动添加必要的初始化
参数
* 功能：确保所有必要的系统参数都存在于开始节点中
*/
useEffect(() => {
// 如果节点处于只读状态，不执行自动添加操作
if (readOnly) {
return
}
// 从localStorage获取最新的用户信息参数
const userInfoParams = getUserInfoParams()
// 获取现有的变量键名列表
const existingVariableKeys = inputs.variables.map(v => v.variable)
// 检查是否需要添加新的初始化参数
const variablesToAdd = requiredParams
// 过滤出尚未添加的参数
.filter(param => !existingVariableKeys.includes(param.key))
// 为每个需要添加的参数创建配置对象
.map(param => {
const paramValue = userInfoParams[param.key] || ''
return {
type: 'textInput' as any, // 输入类型
label: param.label, // 参数标签
variable: param.key, // 参数变量名
required: false, // 非必填
hide: true, // 隐藏输入字段
value: paramValue, // 参数值
default: paramValue, // 默认值
custom: true, // 自定义标识
}
})
// 如果有需要添加的参数
if (variablesToAdd.length > 0) {
// 创建新的变量列表
const newVariables = [...inputs.variables, ...variablesToAdd]
// 使用immer更新状态
const newInputs = produce(inputs, (draft: any) => {
draft.variables = newVariables
})
// 更新节点输入数据
setInputs(newInputs)
}
}, [inputs, readOnly, setInputs])
技术实现特点
- 数据来源 ：从localStorage获取userInfoParams作为参数的默认值
- 状态管理 ：使用immer库确保状态更新的不可变性
- 响应式更新 ：使用useEffect钩子监听组件挂载和参数变化
- 条件执行 ：只有在非只读状态下才执行自动添加参数操作
- 性能优化 ：只在需要时才更新状态，避免不必要的重渲染
- 错误处理 ：在获取localStorage数据时添加了错误处理，确保功能的健壮性
工作流程
- 打开参数编辑面板 ：用户打开开始节点的参数编辑面板
- 参数值初始化 ：系统自动从localStorage获取最新的userInfoParams
- 更新参数值 ：检查现有参数值是否与最新数据一致，如有变化则更新
- 自动添加参数 ：检查是否缺少必要的初始化参数，如有缺失则自动添加
- 完成初始化 ：用户看到的是已经初始化完成的参数列表，包含所有必要的系统参数和最新的参数值
功能优势
- 简化用户操作 ：用户不需要手动添加必要的系统参数
- 保持数据一致性 ：参数值始终与localStorage中的最新数据保持一致
- 提高配置效率 ：自动完成参数初始化，减少用户配置时间
- 确保配置完整性 ：确保所有必要的系统参数都存在，避免配置遗漏
- 提升用户体验 ：用户打开参数编辑面板时看到的是已经准备好的参数列表
适用场景
- 新创建的工作流 ：自动添加必要的系统参数
- 现有工作流 ：更新参数值为最新的用户信息
- 参数编辑 ：确保参数配置的完整性和准确性
此功能实现了与自定义工具类似的初始化逻辑，但针对开始节点的特点进行了专门优化，确保工作流配置的完整性和准确性。
