diff --git a/frontend-v2/components/JsonRenderer.tsx b/frontend-v2/components/JsonRenderer.tsx index 06b6daf..b61970b 100644 --- a/frontend-v2/components/JsonRenderer.tsx +++ b/frontend-v2/components/JsonRenderer.tsx @@ -187,9 +187,10 @@ export default function JsonRenderer({ ...(actionContext && { emit: actionContext.emit }), }; - // 为 Card 和 Stack 组件添加 renderChildren 函数 + // 为 Card 和 Stack 组件添加 renderChildren 函数(绑定 emit) if (componentType === 'card' || componentType === 'stack') { - props.renderChildren = renderChildren; + const emitFn = actionContext?.emit; + props.renderChildren = (children: any) => renderChildren(children, emitFn); } return ; diff --git a/frontend-v2/lib/json-render-registry.tsx b/frontend-v2/lib/json-render-registry.tsx index e31372e..068881f 100644 --- a/frontend-v2/lib/json-render-registry.tsx +++ b/frontend-v2/lib/json-render-registry.tsx @@ -12,22 +12,22 @@ import { useState } from 'react'; // ============ React 组件实现 ============ // Card 组件 -const Card = ({ title, children, className, renderChildren }: any) => ( +const Card = ({ title, children, className, renderChildren, emit }: any) => (
{title &&

{title}

} - {renderChildren ? renderChildren(children) : null} + {renderChildren ? renderChildren(children, emit) : null}
); // Stack 组件 -const Stack = ({ direction = 'column', spacing = 2, align = 'start', children, className, renderChildren }: any) => { +const Stack = ({ direction = 'column', spacing = 2, align = 'start', children, className, renderChildren, emit }: any) => { const directionClass = direction === 'row' ? 'flex-row' : 'flex-col'; const spacingClass = spacing > 0 ? `gap-${spacing}` : ''; const alignClass = align === 'center' ? 'items-center' : align === 'end' ? 'items-end' : align === 'stretch' ? 'items-stretch' : 'items-start'; return (
- {renderChildren ? renderChildren(children) : null} + {renderChildren ? renderChildren(children, emit) : null}
); }; @@ -499,8 +499,10 @@ export const jsonRenderRegistry: Record> = { /** * 递归渲染子组件 * 用于 Card 和 Stack 组件中渲染 children 数组 + * @param children - 子组件数组 + * @param emit - ActionContext emit 函数(用于组件交互) */ -export function renderChildren(children: any): React.ReactNode { +export function renderChildren(children: any, emit?: (eventName: string, payload?: any) => void): React.ReactNode { if (!children) return null; if (!Array.isArray(children)) return null; @@ -512,11 +514,18 @@ export function renderChildren(children: any): React.ReactNode { const Component = (jsonRenderRegistry as any)[componentType]; if (Component) { - // 如果组件需要渲染子组件,传入 renderChildren 函数 - if (componentType === 'card' || componentType === 'stack') { - return ; + // 合并 props:原始 child props + emit 函数 + const props: any = { ...child }; + if (emit) { + props.emit = emit; } - return ; + + // 如果组件需要渲染子组件,传入 renderChildren 函数(并传递 emit) + if (componentType === 'card' || componentType === 'stack') { + props.renderChildren = (grandchildren: any) => renderChildren(grandchildren, emit); + } + + return ; } return (