别再忍受 n8n 的默认界面了，你的工作流值得更好的“皮肤”
作为一名在 n8n 社区摸爬滚打多年的老兵，笔者见过太多人把 n8n 当作纯粹的后端引擎在用。确实，它的逻辑编排能力堪称一绝。但当你需要把这套逻辑交给非技术同事使用，或者想在一个大屏上展示关键数据时，那个冷冰冰的原生工作流界面就显得有些力不从心了。
你是否遇到过这样的痛点：老板想要一个美观的仪表盘来监控自动化流程的运行状态，或者业务人员面对密密麻麻的节点配置感到无从下手？其实，n8n 早就考虑到了这一点，它提供了强大的 Custom UI（自定义用户界面）功能，允许你基于 Vue.js 打造完全属于自己的交互界面。
今天，N8N大学 就带你从 0 到 1，手把手教你开发 n8n 自定义 UI 组件，让你的工作流不仅能跑，还能“长得好看”且“易于操作”。
准备工作：磨刀不误砍柴工
在开始之前，我们需要确保环境就绪。这不仅仅是安装软件，更是为了后续开发的流畅体验。
- 运行中的 n8n 实例：建议使用
n8n start启动的开发模式，或者 Docker 容器。确保你能访问 Web 界面。 - 代码编辑器：VSCode 是首选，配合 Vetur 或 Volar 插件，对 Vue 开发有奇效。
- Node.js 环境：虽然我们主要在 n8n 内部开发，但了解 Node.js 和 npm/yarn 的基本操作是必须的。
- 浏览器开发者工具：Chrome 或 Edge，用于调试前端逻辑。
核心实操：打造你的第一个仪表盘
我们将创建一个简单的“数据监控看板”，用于展示最近 10 次工作流的运行状态。这是一个经典的 Custom UI 场景。
步骤 1：创建包含 HTML 的 Code 节点
Custom UI 的核心在于 Code 节点。我们需要在这个节点里编写前端代码。注意，这里不是写 Node.js 后端逻辑，而是写 Vue 组件。
新建一个 Workflow，添加一个 Code 节点（选择 JavaScript 模式）。在代码编辑器中，我们先定义数据结构：
// 这是一个模拟数据，实际中你可以通过 HTTP Request 节点从 API 获取
const data = [
{ id: 1, name: "数据备份", status: "success", time: "2023-10-01 10:00" },
{ id: 2, name: "邮件发送", status: "error", time: "2023-10-01 10:05" },
{ id: 3, name: "Slack通知", status: "running", time: "2023-10-01 10:10" }
];
return { data };步骤 2：配置 Custom UI 节点
接下来是重头戏。我们需要添加一个 n8n-nodes-base.customUi 节点（如果在节点列表中搜索不到，请确保你的 n8n 版本支持该功能，通常位于 Interface 类别下）。
在 Custom UI 节点的配置中，你会看到三个主要标签页：Template、Style 和 Script。
- Template (HTML)：这里编写 Vue 模板。我们需要用
v-for循环渲染上面 Code 节点传来的数据。 - Style (CSS)：编写样式，让界面不再单调。
- Script (JS)：处理交互逻辑，比如点击按钮查看详情。
步骤 3：编写 Template 与 Style
在 Template 标签页中，输入以下 HTML：
<div class="dashboard">
<h3>工作流运行监控</h3>
<div class="card-container">
<div v-for="item in items" :key="item.id" class="card" :class="item.status">
<strong>{{ item.name }}</strong>
<span>状态: {{ item.status }}</span>
<small>{{ item.time }}</small>
</div>
</div>
</div>在 Style 标签页中，添加 CSS 让它看起来像个真正的看板：
.dashboard { font-family: sans-serif; padding: 20px; background: #f4f4f9; border-radius: 8px; }
.card-container { display: flex; flex-wrap: wrap; gap: 15px; }
.card { background: white; padding: 15px; border-radius: 6px; width: 200px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card.success { border-left: 5px solid #27ae60; }
.card.error { border-left: 5px solid #e74c3c; }
.card.running { border-left: 5px solid #f39c12; }步骤 4：数据绑定与 Script 逻辑
这是最关键的一步。如何将 Code 节点的数据传递给 Custom UI？
在 Script 标签页中，我们需要定义 Vue 实例。n8n 提供了一个全局对象 Items，它包含了上一个节点传入的数据。
new Vue({
el: '#app',
data: {
items: [] // 初始化为空
},
mounted() {
// 这里的 Items 是 n8n 自动注入的，对应上一个节点的输出
// 注意：Items 是一个数组，每一项是一个 Item 对象
if (window.Items && window.Items.length > 0) {
// 我们假设 Code 节点返回的数据在 Items[0].json.data 中
this.items = window.Items[0].json.data;
}
}
});连接好节点：Code -> Custom UI。点击执行，你应该就能在 Custom UI 的结果预览中看到那个带有状态颜色的卡片列表了。
避坑指南：开发中容易遇到的拦路虎
在 N8N大学 的实战经验中，新手最容易在以下两点卡住：
- 数据传递机制误解：
很多同学以为 Custom UI 能直接读取全局变量，其实不是。Custom UI 本质上是一个沙箱化的 Vue 应用，它只能通过上一个节点（通常是 Code 节点）传来的
Items对象获取数据。如果你发现界面空白，先检查 Code 节点是否正确返回了 JSON 格式的数据。 - Vue 语法报错：
n8n 内置的 Vue 版本可能不是最新的。虽然支持大部分 Vue 2 语法，但如果你使用了 Vue 3 的新特性（如
setup语法糖），可能会导致渲染失败。建议始终使用兼容性最好的 Vue 2 写法，例如使用mounted钩子而不是onMounted。 - 样式隔离问题：
Custom UI 的样式默认是作用域的，但如果你引入了第三方 CSS 库（如 Bootstrap），可能会污染 n8n 原生界面。建议在 Style 标签页中使用 Scoped CSS（如果支持）或严格的命名空间。
进阶玩法：让界面“活”起来
静态展示只是第一步，真正的威力在于交互。Custom UI 支持事件监听，这意味着你可以点击界面上的按钮来触发其他工作流。
在 Template 中添加一个按钮：
<button @click="runWorkflow(item.id)">重新运行</button>在 Script 中定义方法：
methods: {
runWorkflow(id) {
// 使用 n8n 提供的全局函数触发事件
// 这会将数据发送回 n8n 的输出端，供后续节点使用
this.$emit('input', { action: 'rerun', workflowId: id });
// 或者，如果你只是想弹个提示
alert(`准备重新运行 ID: ${id} 的工作流`);
}
}通过这种方式，你可以构建出复杂的仪表盘，甚至是一个完整的内部工具（Internal Tool），让用户通过点击按钮来控制复杂的后台逻辑。
FAQ：关于 n8n Custom UI 的常见疑问
Q1: 开发 Custom UI 需要懂 Vue.js 吗？
A: 是的，必须懂。Custom UI 基于 Vue.js 构建。如果你只懂原生 JavaScript，虽然能写出简单逻辑，但无法发挥其组件化的优势。建议先学习 Vue 的基础概念。
Q2: Custom UI 可以独立部署吗？
A: 不可以。Custom UI 依附于 n8n 实例运行。它本质上是 n8n 工作流的一部分，通过 iframe 或 Web Components 的形式展示。如果要对外提供服务，你需要确保 n8n 实例是公网可访问的。
Q3: 支持 React 或 Angular 吗？
A: 官方目前仅支持 Vue.js。因为 n8n 的前端本身就是基于 Vue 构建的，直接集成了 Vue 运行时。虽然技术上可以通过编译方式引入 React，但极其复杂且不推荐，性能损耗也大。
总结与资源
通过 n8n 的 Custom UI 功能，我们打破了后端自动化与前端交互的壁垒。你不再受限于原生节点的展示形式，可以为团队、为客户、甚至为自己打造独一无二的交互体验。
记住，从 Code 节点准备数据，到 Custom UI 渲染视图，再到 Script 处理交互，这是最核心的三板斧。多动手练习，你也能设计出既美观又实用的专属界面。
如果你在开发过程中遇到棘手的报错，或者有更酷炫的 UI 想法，欢迎访问 N8N大学 (n8ndx.com) 与我们交流。我们致力于让自动化更简单，也更美观。
