企业官网建设流程全解析

ToolJet 应用构建器实战：零代码搭建 Support Desk Dashboard 仪表盘 UI

【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 🚀项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet

本篇技术指南聚焦 ToolJet 应用构建器（App Builder）的 UI 搭建能力，以“Support Desk Dashboard（工单支持台仪表盘）”为实战案例，逐步演示如何通过拖拽 Text、Statistics、Table 等预置组件，在几分钟内完成一个内部工具的前端界面，并掌握多页面组织与明暗主题切换。读完本文，你将能够独立在 ToolJet 中完成组件摆放、属性面板配置、内联数据填充、页面复制复用以及主题模式切换的完整流程，为后续接入真实数据源（Query）与事件交互打下基础。

前置认知：ToolJet 的组件体系与属性面板

ToolJet 提供了一套丰富的预置组件库，覆盖按钮、表格、图表、表单、文本输入、选择输入、日期时间、媒体、展示类与自定义组件等类别，组件清单集中定义在 widgetConfig.js 中。本文用到的三个组件均在其中：

• Text（文本）：属于 Presentation（展示）类，用于显示文本或 HTML；
• Statistics（统计）：同样属于展示类，用于展示关键指标（如本月收入、环比变化）；
• Table（表格）：属于 Data（数据）类，用于以表格形式展示结构化数据。

所有组件在画布上被选中后，右侧会弹出Properties Panel（属性面板）。面板按功能分组展示组件的能力：properties控制数据内容与行为，styles控制样式外观，events用于绑定交互事件，others控制桌面/移动端的显隐。每个属性的类型（文本输入、开关、颜色选择器、下拉等）与默认值，都可以在对应组件的配置文件中直接看到，例如 Statistics 组件的完整属性定义见 statistics.js。

创建页面 Header（页头区域）

一个仪表盘通常以醒目的标题开头。在 ToolJet 中完成页头只需两步：

1. 从左侧组件库将Text组件拖拽到画布左上角；
2. 点击该组件打开右侧属性面板，在其Data属性中输入标题文字Support Desk Dashboard。

接着调整标题的视觉效果：

• 将Font size（字号）改为24；
• 将Font weight（字重）改为bold（加粗）；
• 将文字颜色改为蓝色（hex 色值#408FCC）。

再添加一个Text组件放在标题下方，作为副标题：

• 在Data属性中输入Track and manage all your tickets in one place（一站式跟踪与管理你的全部工单）；
• 将字号设为14，颜色设为灰色（hex 色值#9B9B9B）。

从源码层面看，Text 组件的Data对应其配置中的text属性（见 text.js），它是一个code类型的字段，意味着它支持 ToolJet 的双花括号表达式（如{{ variables.name }}），可以将静态文字替换为动态数据。此外 Text 组件还提供Text Format切换（Plain text / Markdown / HTML，见 text.js），默认渲染纯文本，切换到 Markdown 或 HTML 后即可在组件内渲染富文本内容。

构建工单计数卡片（Statistics 组件）

仪表盘的核心是让关键指标一目了然。ToolJet 的Statistics组件正是为展示“主值 + 副值”的指标卡片而设计（其配置文件中对该组件的描述即为 "Show key metrics"，见 statistics.js）。

操作步骤如下：

1. 将Statistics组件拖到页头下方；
2. 在属性面板的Primary value label（主值标签）中输入Created，并在Primary value（主值）中输入一个数字；
3. 将Primary label color（主标签颜色）与Primary text color（主文字颜色）都改为蓝色（#4A90E2）；
4. 关闭Hide secondary value（隐藏副值）开关，使副值区域可见；
5. 按同样方式再添加两个 Statistics 组件，分别展示 Pending（待处理）与 Closed（已关闭）的工单数量。

关于 Statistics 组件的字段，可以结合源码理解其完整能力（statistics.js）：

样式方面，主标签字号默认14、主值字号默认34（见 statistics.js）；副值颜色支持正负区分——positiveSecondaryValueColor（默认取主题成功色）与negativeSecondaryValueColor（默认取主题错误色）会自动随趋势显示绿色/红色，非常适合做同比、环比类指标。

更关键的是，primaryValue、secondaryValue等属性都是code类型，支持直接写入{{ queries.query1.data.count }}这类表达式，把卡片数值与后端查询结果实时联动——这正是“先用静态数据搭 UI，再接真实数据”这一工作流的衔接点。

搭建工单明细表格（Table 组件）

统计卡片展示的是汇总数据，明细列表则需要Table组件来承载。步骤：

1. 将Table组件拖到画布上；
2. 在右侧属性面板把Border Radius（圆角）改为10，让表格边缘更柔和；
3. 在Data属性中粘贴以下示例数据（使用 ToolJet 表达式语法{{ }}包裹的数组字面量）：

{{ [{ ticketId: "TCK1001", customerName: "Jane Doe", issueType: "Login Issue", priority: "High", status: "Open", lastUpdated: "2024-04-12" }, { ticketId: "TCK1002", customerName: "John Smith", issueType: "Payment Failure", priority: "Medium", status: "Pending", lastUpdated: "2024-04-11" }, { ticketId: "TCK1003", customerName: "Alice Johnson", issueType: "Feature Request", priority: "Low", status: "Closed", lastUpdated: "2024-04-10" }, { ticketId: "TCK1004", customerName: "Sarah Dunsworth", issueType: "Feature Request", priority: "High", status: "Closed", lastUpdated: "2024-04-10" }, ] }}

再在表格上方添加一个Text组件作为小节标题：

• Data属性输入Tickets；
• 字号设为14，颜色设为灰色（#9B9B9B）。

随后调整表头文案：在属性面板的Columns（列）区域逐列点击，修改Column name属性即可——例如把ticketId改为ticket ID、customerName改为customer name，让列名更符合业务阅读习惯，而不需要改动底层数据字段名。

补充说明：Data属性是 Table 组件的数据入口（源码定义见 table.js），其值的核心语法是{{ }}表达式。本例传入的是静态数组，实际项目中完全可以把这里的字面量替换为{{ queries.tickets.data }}之类的查询结果，表格会自动依据数组对象的字段生成列。当前Data属性的数据校验类型为字符串（schema: { type: 'string' }），表达式求值后得到数组即可完成渲染。

新增 Customers 页面：复制与改造

一个完整的内部应用往往包含多个页面。ToolJet 的页面管理位于左侧边栏的Pages面板：

1. 点击左侧边栏Pages，默认已存在一个Home页面，将其重命名为Dashboard；
2. 点击+图标新建页面，并把新页面重命名为Customers。

接下来复用 Dashboard 页面的成果：

• 在Dashboard页面上点击并拖拽框选所有组件（也可用快捷键），复制（Mac 为CMD+C，Windows 为Ctrl+C），再切到Customers页面粘贴（Mac 为CMD+V，Windows 为Ctrl+V）；
• 把Tickets那个 Text 组件的Data属性改为Customers；
• 将 Table 组件的Data属性替换为客户数据：

{{[ { id: 1, name: "John Doe", email: "john.doe@example.com", phone: "+1234567890", status: "Active", issuesResolved: 0 }, { id: 2, name: "John Smith", email: "jane.smith@example.com", phone: "+1234567891", status: "Inactive", issuesResolved: 0 }, { id: 3, name: "Alice Johnson", email: "emily.johnson@example.com", phone: "+1234567892", status: "Active", issuesResolved: 1 }, { id: 4, name: "Michael Brown", email: "michael.brown@example.com", phone: "+1234567893", status: "Inactive", issuesResolved: 4 }, { id: 5, name: "Sarah Dunsworth", email: "michael.brown@example.com", phone: "+1234567893", status: "Active", issuesResolved: 1 } ]}}

完成这一步后，你会得到一个与 Dashboard 视觉一致、但数据语义完全不同的客户列表页。这种“先复制页面骨架、再局部替换数据与文案”的做法，是 ToolJet 中快速扩展多页面应用的典型工作流，其背后是组件与页面松耦合的架构：同一套组件配置可以跨页面复用，只需要更换数据入口与展示文案。

切换应用主题（App Mode）

最后一步是让界面与品牌或使用环境匹配。点击左侧边栏的Settings（设置）按钮，找到App mode（应用模式）属性：

• 默认值为Auto：此时应用会跟随浏览器/操作系统的配色方案自动切换明暗主题；
• 切换为dark：应用整体立即变为深色配色。

切换后点击预览（Preview），即可看到应用以深色方案渲染的效果：

关于 Auto 模式的行为，文档明确说明：当App mode保持为 auto 时，它会跟随浏览器的配色方案（即跟随系统prefers-color-scheme偏好）。这一模式在 ToolJet 前端代码中有对应的应用模式切换逻辑（相关实现位于 AppModeToggle.jsx）。值得一提的是，ToolJet 的组件样式大量使用 CSS 变量（例如 Statistics 组件默认色值中的var(--cc-primary-text)、var(--cc-surface1-surface)等，见 statistics.js），这正是切换主题模式时界面颜色能整体联动的原因——明暗主题本质上是同一套组件定义在不同主题变量下的重新渲染。

小结与下一步

本文以 Support Desk Dashboard 为案例，走通了 ToolJet UI 搭建的完整链路：

• 用Text组件构建页头与小节标题，掌握属性面板中数据与样式（字号、字重、颜色）的配置；
• 用Statistics组件搭建工单统计卡片，理解主/副值、隐藏开关与趋势色等字段含义；
• 用Table组件承载工单与客户明细数据，学会内联数据语法与列名自定义；
• 通过Pages面板完成页面重命名、新建、整页复制与数据替换；
• 通过App Mode在 Auto / dark 之间切换主题，并理解其与浏览器配色方案及 CSS 变量的关系。

至此，你已经拥有一个视觉上完整、结构清晰的仪表盘界面。ToolJet 的 UI 层仅是应用的“骨架”，后续可以继续探索：将 Table 的Data替换为真实查询结果、为按钮绑定事件与动作、通过{{ }}表达式在组件间传递变量等。建议接着阅读同目录下的 create-queries.md（创建查询）与 accessing-values.md（访问组件值），让静态界面“活”起来，真正接入业务数据与交互逻辑。

【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 🚀项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet