必须使用代码节点返回带内联样式的html字符串，并通过html组件启用安全渲染，才能突破消息卡片限制实现自定义页面；需转义引号、写全样式、绑定变量、勾选“启用html渲染”，否则会错位或显示为纯文本。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在扣子平台中让智能体返回结果突破消息卡片的限制，直接嵌入一个可完全自定义样式的静态HTML页面，并与工作流数据联动实现微前端级交互，必须绕过默认卡片模板系统，改用代码节点+HTML组件组合方案——这一步漏掉内联样式隔离，页面会因扣子容器CSS污染而错位变形。
创建支持HTML渲染的代码节点
进入工作流编辑画布 → 在节点面板拖入「代码」节点 → 双击打开编辑器 → 语言选择 JavaScript → 将以下基础HTML结构粘贴进 return 语句中：
return `<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 16px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
<h3 style="margin: 0 0 12px 0; color: #333;">动态标题</h3>
<p style="margin: 0; color: #666; line-height: 1.5;">这里是摘要内容</p>
</div>`;
⚠️注意：必须使用反引号（`）包裹整个HTML字符串，且所有双引号需转义为"或改用单引号，否则代码节点执行失败；【HTML内联样式必须写全，不可依赖外部CSS】。
绑定工作流变量到HTML内容
方法一：在代码节点中直接读取输入变量
假设上游节点已输出变量 title 和 summary，将 return 内容改为：
return `<div style="...">
<h3 style="...">${input.title || '默认标题'}</h3>
<p style="...">${input.summary || '暂无摘要'}</p>
</div>`;
方法二：用变量赋值节点预处理再注入
先添加「变量赋值」节点，设置变量名 card_html，值为：`<div>
<h3>${input.title}</h3>
<p>${input.summary}</p>
</div>`；再在代码节点中 return input.card_html —— 此方式便于多处复用同一HTML模板。
插入HTML组件并启用安全渲染
第一步：在工作流末尾添加「HTML」组件节点（非「文本」或「卡片」）。
第二步：点击该节点 → 右侧属性栏找到「HTML内容」字段 → 点击右侧「绑定变量」图标 → 选择上一步代码节点输出的变量（如 output 或自定义的 card_html）。
第三步：务必勾选「启用HTML渲染」开关 —— 【未勾选则所有标签被当作纯文本显示，页面无法解析】。
第四步：保存工作流并测试运行。若返回空白，请检查代码节点是否报错、变量名是否拼写一致、HTML字符串是否缺少闭合标签。
添加轻量级交互逻辑（如按钮点击）
在代码节点的HTML字符串中加入内联JavaScript：
<button onclick="alert('已触发工作流：'+Date.now())" style="background:#007AFF; color:white; border:none; padding:8px 16px; border-radius:4px; margin-top:12px;">立即操作</button>
这行代码会渲染一个蓝色按钮，点击后弹出带时间戳的提示框。注意：扣子当前不支持跨域请求或 fetch 调用，所有交互必须限定在前端JS沙箱内完成；如需触发新工作流，请改用「按钮」组件+跳转事件替代。
这一步操作起来很简单，直接把上面那段 button 代码粘贴进 HTML 字符串里就行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
