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 (