从按钮到 Bot：用 DevUI + MateChat 30 分钟搭建「可聊天」的云控制台

文章目录

- 每日一句正能量
- 目录
- [1. 为什么是 DevUI + MateChat？](#1. 为什么是 DevUI + MateChat？)
- [2. 30 min 实战总览](#2. 30 min 实战总览)
- [3. 步骤 1：DevUI 项目脚手架 & 暗黑主题一键切换](#3. 步骤 1：DevUI 项目脚手架 & 暗黑主题一键切换)
- [4. 步骤 2：MateChat 零配置接入------让按钮变成 Bot](#4. 步骤 2：MateChat 零配置接入——让按钮变成 Bot)
- [5. 步骤 3：自定义「资源查询」节点------AI 也能看监控](#5. 步骤 3：自定义「资源查询」节点——AI 也能看监控)
- [6. 步骤 4：记忆化 + 工作流------Bot 记得上一次集群](#6. 步骤 4：记忆化 + 工作流——Bot 记得上一次集群)
- [7. 步骤 5：暗黑模式下的「自然语言生成 UI」](#7. 步骤 5：暗黑模式下的「自然语言生成 UI」)
- [8. 踩坑与性能复盘](#8. 踩坑与性能复盘)
- [9. 开源地址 & 二次开发指南](#9. 开源地址 & 二次开发指南)
- [10. 结语：从「点击」到「聊天」，云原生控制台的新范式](#10. 结语：从「点击」到「聊天」，云原生控制台的新范式)

每日一句正能量

很多时候我们都是胆小的，知道了路途却依旧很难迈开步子走。回头看到你在身后站立，便安心前行。我依赖于你给的力量，带有附属的成长。

为什么是 DevUI + MateChat？
30 min 实战总览
步骤 1：DevUI 项目脚手架 & 暗黑主题一键切换
步骤 2：MateChat 零配置接入------让按钮变成 Bot
步骤 3：自定义「资源查询」节点------AI 也能看监控
步骤 4：记忆化 + 工作流------Bot 记得上一次集群
步骤 5：暗黑模式下的「自然语言生成 UI」
踩坑与性能复盘
开源地址 & 二次开发指南

1. 为什么是 DevUI + MateChat？

维度	纯 DevUI	纯 MateChat	DevUI + MateChat
组件丰富度	✔ 60+ 企业级	✖ 仅聊天框	✔ 聊天框+表格/表单/图表
接入成本	0 配置	0 配置	0 配置（同一生态）
暗黑模式	✔ 一行开关	✖	✔ 全链路暗黑
工作流	✖	✔ 节点编排	✔ 节点+组件联动
可复制性	高	高	极高（30 min）

一句话：DevUI 负责「好看」，MateChat 负责「好聊」，两者在一起就是「好看又好聊」的云原生控制台。

2. 30 min 实战总览

时间	任务	产出
0-5 min	脚手架 + 主题	暗黑控制台
5-10 min	MateChat 接入	右下角聊天浮窗
10-20 min	自定义节点	「查询 Pod」命令
20-25 min	记忆化工作流	记住「默认集群」
25-30 min	NL→UI	「把 CPU 图变大」→ 组件联动

全程无 Docker、无 YAML、无后端，前端一把梭。

3. 步骤 1：DevUI 项目脚手架 & 暗黑主题一键切换

bash 复制代码

npm i -g @devui/cli
devui create chat-console
cd chat-console
npm i

main.ts 中开启暗黑：

typescript 复制代码

import { NxModule } from '@nrwl/angular';
import { ThemeService } from 'ng-devui/theme';

export class AppModule {
  constructor(private themeSvc: ThemeService) {
    this.themeSvc.setTheme('infinity-dark'); // 一行搞定
  }
}

效果：

4. 步骤 2：MateChat 零配置接入------让按钮变成 Bot

在 app.component.html 加入：

html 复制代码

<d-layout>
  <d-layout-header>云原生控制台</d-layout-header>
  <d-layout-content>
    <!-- 这里放你的表格/图表 -->
  </d-layout-content>
</d-layout>

<!-- MateChat 浮窗 -->
<mate-chat
  [botId]="'cloud-bot'"
  [apiKey]="environment.MA_CHAT_KEY"
  [theme]="'dark'"
  [position]="{ right: 24, bottom: 24 }"
  (onNodeFinish)="handleNodeFinish($event)"
></mate-chat>

TypeScript 中接收节点结果：

typescript 复制代码

handleNodeFinish(ev: any) {
  if (ev.nodeId === 'query_pod') {
    this.podList = ev.result; // 直接喂给 DevUI 表格
  }
}

效果：右下角出现「可拖拽」聊天窗，0 行后端代码 。

5. 步骤 3：自定义「资源查询」节点------AI 也能看监控

在 MateChat 控制台（https://matechat.gitcode.com）→ 工作流 → 新建节点：

字段	值
节点 ID	query_pod
类型	HTTP 请求
URL	`/api/cluster/default/pods`
方法	GET
Header	`Authorization: Bearer ${token}`
结果映射	`array→table` 自动映射

前端只需暴露一个 Vite Proxy：

typescript 复制代码

// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'https://your-k8s-api',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

用户在聊天框输入「查询 default 命名空间 Pod」，MateChat 自动调用 query_pod 节点，返回结果直接塞进 DevUI <d-data-table>，无需写 Axios。

6. 步骤 4：记忆化 + 工作流------Bot 记得上一次集群

MateChat 提供「Memory」插件：

json 复制代码

{
  "key": "lastCluster",
  "scope": "user",
  "ttl": 86400
}

在节点后置脚本里：

javascript 复制代码

// 后置脚本
context.setMemory('lastCluster', payload.clusterName);

下次用户打开聊天窗，Bot 自动问候：

「您上次查看了 lastCluster 的 Pod，要继续吗？」

DevUI 表格瞬间加载完成 ------用户体感 = 0 操作。

7. 步骤 5：暗黑模式下的「自然语言生成 UI」

MateChat 支持「NL→UI」节点：

字段	值
节点 ID	nl2ui
类型	NL→UI
示例语料	「把 CPU 折线图放大」
目标组件	`<d-chart>`
动作	`setOption({grid:{top:20}})`

用户在暗黑模式下说：「图太小」，Bot 立即执行：

typescript 复制代码

this.chartInstance.setOption({
  grid: { top: 20, left: 20, right: 20, bottom: 20 }
});

动画 300 ms，无闪屏 ------自然语言驱动组件更新，真正的「可聊天」控制台。

8. 踩坑与性能复盘

问题	现象	解决
MateChat 暗黑样式丢失	切换主题后浮窗变白	在 `setTheme` 后广播 `matechat.theme='dark'`
大表渲染卡顿	1k 行数据滚动掉帧	开启 DevUI `<d-virtual-scroll>`，FPS 回到 60
记忆化跨标签失效	新 Tab 拿不到 memory	改用 `localStorage` 同步，MateChat 后续版本原生支持

性能结果：

首屏加载：1.2 s（gzip + brotli）
聊天首包：280 ms（CDN 加速）
表格渲染 1k 行：16 ms（虚拟滚动）

9. 开源地址 & 二次开发指南

完整源码：chat-console
DevUI 官网：https://devui.design/home
MateChat 官网：https://matechat.gitcode.com

二次开发玩法：

接入更多「自定义节点」：日志查询、Helm 安装、资源扩缩容
用「NL→UI」生成表单：「创建 deployment」→ 自动生成 <d-form>
集成企业 IM：飞书/钉钉 webhook → MateChat 机器人

10. 结语：从「点击」到「聊天」，云原生控制台的新范式

DevUI 让界面「长得好看」，

MateChat 让交互「变得好聊」，

两者相加，就是「好看又好聊」的下一代云控制台。

30 分钟，0 Docker，0 YAML，

我们已用「自然语言」驾驭「分布式集群」------

这正是 Kurator 时代，开发者该有的浪漫。

欢迎在评论区晒出你的「聊天式」控制台截图，

让我们一起，用对话改变世界！

转载自：https://blog.csdn.net/u014727709/article/details/155439892

欢迎 👍点赞✍评论⭐收藏，欢迎指正