摘要：

当企业云原生体系不断走向深水区，前端早已不只是“画页面”，而是承载控制台、B 端系统、智能助手、AI 工作流的统一入口。华为云在这一方向上形成了两条紧密协同的技术主线：

  • DevUI —— 面向企业中后台产品的开源前端解决方案；
  • MateChat —— 前端智能化场景解决方案 UI 库，用于轻松构建 AI 应用对话体验。

汇总相关官方地址：

感兴趣的同学赶紧前往，下载体验一波。

一、云原生与智能前端：从“可用界面”到“智能工作台”

在云原生时代，企业前端面临三大转变：

  1. 界面复杂度爆炸：云控制台、DevOps 平台、观测运维、权限治理等 B 端系统高度模块化、强场景化。
  2. 智能能力前置：大模型、智能体、工作流编排正从后端工具，演变为直接嵌入前端的“第一入口”。
  3. 体验与工程并重：产品需要统一的设计语言、组件规范、性能与可维护性。

在华为云内部实践中，DevUI 团队长期服务于 DevCloud 等多个中后台系统，为设计与工程提供统一支撑体系；MateChat 则在 CodeArts 智能助手、InsCode AI IDE 等场景落地，用高度统一的 GenAI 对话体验支撑多款产品的“智能化改造”。

因此可以把二者理解为：

  • DevUI：云原生控制面 / 企业中后台的前端基础设施；
  • MateChat：GenAI 体验层的标准化 UI 方案。

接下来我们先从 DevUI 入手，完整拆解其在组件、主题、云原生场景中的工程实践；再转向 MateChat，讨论如何在前端侧构建智能交互；最后再把二者拼成一套贯通的全链路方案。💡

二、DevUI 组件生态：从企业级 UI 基座到云原生控制台

2.1 DevUI 的定位与版本生态

根据官方介绍，DevUI 是一款 面向企业中后台产品的开源前端解决方案，围绕 DevUI Design 设计体系，提供组件库、设计规范与最佳实践，使开发者聚焦业务逻辑，设计师聚焦体验与流程。([DevUI Design Of Angular][1])

目前 DevUI 主要提供两条技术栈形态：

  • ng-devui（DevUI for Angular）：

    • 基于 Angular 构建，官方文档中给出了如何使用 @angular/cli 创建项目并通过 npm i ng-devui 引入组件库。([GitHub][3])

  • vue-devui（DevUI for Vue3）：

    • 基于 Vue 3 + Vite + TypeScript + JSX，提供 60+ 简洁易用的组件，并有配套的 Vue 中后台 Admin 示例项目。([Gitee][5])

这意味着在云原生多端场景下：

  • Angular 技术栈 的存量控制台、内部系统可以直接采用 ng-devui；
  • Vue 技术栈 的新项目（比如微前端子应用、运营控制台等）可以采用 vue-devui；
  • 二者都共享 DevUI Design 设计体系，视觉与交互风格可保持一致。

2.2 高频组件进阶使用与避坑实践

在企业中后台里，表格、表单、弹窗几乎是“日常三件套”。DevUI 对这三类组件在 Angular 与 Vue 版本中均提供了相对完善的实现与文档支持。([DevUI Design Of Angular][1])

2.2.1 表格组件：从数据罗列到复杂交互容器

典型能力（以 DevUI 体系为基础）：

  • 列自定义显示与排序；
  • 分页、排序、过滤、列宽拖拽；
  • 多选 / 单选行、树形层级展示；
  • 与表单、弹窗联动（例如行编辑、批量操作）。

在云原生控制台场景，表格常用于：

  • 实例列表（云主机、容器集群、数据库实例）；
  • 作业历史 / 任务流水；
  • 资源告警与审计记录。

进阶实践建议：

  1. 服务端分页与筛选统一处理

    • 建议在前端定义统一的 TableQueryState（页码、每页大小、排序字段、筛选条件等），与后端接口协议对齐。
    • DevUI 的表格组件一般提供分页和排序回调，你可以在回调中组装统一的查询对象，从而简化后续维护。

  2. 复杂表头与响应式布局结合

    • 对于云资源列表，列数非常多，可以结合 DevUI 的栅格 / 响应式工具，在窄屏下折叠部分列为“详情抽屉”或 Tooltip 展示，以提升可读性。

  3. 表格 + 状态反馈组件的组合

    • 利用通知、Loading、空态等组件，对“查询中、无数据、错误”等状态进行明确反馈，避免“空白页面”的体验落差。

这些做法都建立在 DevUI 已提供的表格、分页、栅格、反馈类组件能力之上，不引入额外框架，易于在 Angular / Vue 两种技术栈中统一标准。([DevUI Design Of Angular][1])

正如如下所示：

类型：用户可根据喜好和数据的疏密程度使用不同的数据表格。

布局-表格解构：用户可根据喜好和数据的疏密程度使用不同的数据表格。

表格工具栏：

2.2.2 表单组件：高耦合业务场景下的可维护性

DevUI 在两种技术栈中都强调“企业级组件 + 设计规范”，表单正是其中的核心。([GitHub][3])

在云原生场景，表单经常用于：

  • 创建实例、创建流水线、配置告警规则；
  • 权限策略、标签策略、网络策略配置；
  • 高度动态化的参数输入（比如 Helm Chart 参数、YAML 模板字段映射）。

实践要点：

  1. Vue / Angular Form 与 DevUI 表单组件配合

    • 在 Angular 中，利用 ReactiveFormsModule + DevUI 表单类组件；
    • 在 Vue 中，通过 v-model、自定义表单项组件配合 DevUI 的输入类控件与校验反馈。

  2. 动态表单与配置驱动

    • 可以在前端维护一份“字段描述 JSON”，包括：字段类型、取值范围、默认值、是否必填、呈现顺序等；
    • 在渲染时，统一转换为 DevUI 的具体输入组件（例如下拉、开关、数字输入等）。

  3. 通用校验模式

    • 通过封装“规则 -> 校验函数”的映射，将校验逻辑抽象成可复用模块；
    • 需要注意错误提示的统一语言与视觉风格，保持与 DevUI 设计规范一致。

正如如下所示：

Form 表单：具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

2.2.3 弹窗与反馈组件：复杂流程的“视觉锚点”

DevUI 提供诸如对话框（Modal）、抽屉（Drawer）、Toast / Message、Loading 等组件，用于承载流程中的关键步骤与反馈。([DevUI Design Of Angular][1])

在云原生控制台中：

  • 创建资源的关键确认、危险操作（删除集群、销毁实例）往往通过 Modal 完成；
  • 批量任务、异步执行进度可以通过 Drawer 或全局消息提示反馈；
  • 与 MateChat 打通时，还可以在弹窗内集成智能助手，对配置参数给出解释与引导。

避坑建议：

  1. 避免“弹窗嵌弹窗”

    • 多层弹窗会严重破坏用户的操作路径与上下文，可优先考虑 Drawer + 内部 Tab 的方式。

  2. 统一的反馈层级与时机

    • 使用 DevUI 的通知组件统一处理：成功、失败、告警与信息提示；
    • 对于异步任务，先提示“任务已发起”，再在任务列表中展示详细状态，避免 Modal 长时间阻塞。

正如如下所示：

2.3 自定义组件与插件开发实践

DevUI 的定位不仅是“组件库”，还是一套支持扩展的设计系统。官方在 Angular 和 Vue 版本上均提供了模块化架构、主题机制与开箱即用的构建模板，方便开发者在其之上扩展自定义组件。([GitHub][3])

一般性实践路径：

  1. 封装业务组件

    • 以 DevUI 基础组件为颗粒度，向上抽象成“业务组件”，例如：

      • ClusterSelector 组件封装了查询接口 + 搜索下拉 + 标签展示；
      • PipelineStageEditor 组件封装了多个表单控件、步骤排序、校验逻辑。

    • 这些组件都可以作为单独 npm 包或内部模块复用。

  2. 指令 / 插件层封装

    • 在 Angular 中通过 Directive 抽象通用交互（比如点击外部关闭、权限控制显示等），配合 DevUI 组件使用；
    • 在 Vue 中通过插件形式，把常用的 DevUI 组合弹层（如统一的确认删除弹窗）注册为全局方法。

  3. 统一编码规范与文档体系

    • DevUI 本身提供了较完备的组件说明文档与演示示例；([DevUI Design Of Angular][1])
    • 建议模仿其文档结构，为内部自定义组件提供：使用示例、API 描述、设计规范说明。

这样构建出的“二次封装组件层”，既继承 DevUI 的体验，又让业务团队在 DevUI 之上形成自己的“领域组件库”。

正如如下所示：

2.4 主题与样式定制：品牌适配、暗黑模式与响应式布局

DevUI Design 作为设计体系，强调统一的配色、字体、图标与栅格系统。([DevUI Design Of Angular][1]) Vue 版本的 DevUI 更是通过主题化机制，为后续 MateChat 等项目提供了基础能力。([GitHub][6])

2.4.1 品牌主题适配

根据官方介绍，Vue DevUI 是基于 DevUI Design 搭建的组件库，可通过主题能力进行扩展；MateChat 也明确提到其主题化是基于 vue-devui 主题化实现。([GitHub][6])

这表明在实际项目中可以：

  • 统一维护品牌色、辅助色、成功 / 警告 / 错误色等变量；
  • 在 DevUI 集成层定义一套“Brand Theme”，将颜色变量注入到 DevUI 与 MateChat 组件中；
  • 在微前端、多系统场景下，通过相同变量配置保证视觉一致。
2.4.2 暗黑模式与多主题切换

DevUI 官方文档与社区实践中普遍采用 CSS 变量 + 主题切换机制 实现多主题支持。([DevUI Design Of Angular][1])

在工程实施上建议：

  1. 将主题切换抽象为“应用级服务”（例如 Angular Service / Vue Composable），提供：

    • setTheme('light' | 'dark')
    • getCurrentTheme()

  2. 对 DevUI 组件与 MateChat 组件统一使用相同的 CSS 变量前缀；

  3. 结合浏览器媒体查询（prefers-color-scheme）和用户配置，实现“跟随系统 + 手动切换”的双模式。

2.4.3 响应式布局与大屏适配

DevUI 提供栅格系统与响应式布局能力，可用于支持：

  • 控制台的多栏布局（左侧导航、中间内容、右侧监控面板等）；
  • 嵌入 MateChat 聊天窗口时的“收起 / 展开 / 悬浮小窗”布局切换；
  • 在 IDE 场景下，MateChat 面板可根据宽度自动从“侧边栏模式”切换为“全屏对话模式”。

2.5 云原生应用落地：控制台、DevOps 平台与 B 端系统

DevUI 团队服务于华为云 DevCloud 平台和多个中后台系统，是“复杂 B 端场景实战喂养出来”的组件体系。([DevUI Design Of Angular][1])

结合公开信息，可以总结出 DevUI 在云原生场景的一些典型应用模式：

  1. 云控制台

    • 使用 DevUI 的导航、菜单、面包屑、表格、图表（或配合第三方图表库）构建云资源管理控制台；
    • 使用表格与表单组件处理资源创建、编辑、扩缩容等操作；
    • 使用通知与步骤条组件呈现耗时任务的执行过程。

  2. DevOps / CI/CD 平台

    • 配置流水线模板、执行历史、日志查询等场景中，借助 DevUI 的标签、步骤条、时间线、Tab、代码展示等组件；
    • 对接 MateChat 后，可提供“智能解释构建失败原因”“自动生成流水线配置”等能力。

  3. 企业级 B 端系统

    • 如权限管理、审计系统、可观测平台等，DevUI 提供的一套统一视觉与交互规范，可以显著降低学习成本。

这些模式本质上都可以抽象为：DevUI 提供稳定的界面与交互骨架，业务方与智能能力在其之上生长。

2.6 从入门到实战：DevUI 使用路径示例

2.6.1 Angular 版本快速上手

ng-devui 官方 README 中给出了典型的入门流程：([GitHub][3])

  1. 使用 @angular/cli 创建项目：
ng new my-devui-app
cd my-devui-app
npm i ng-devui
# 可选引入图标库
npm i @devui-design/icons
  1. 在根模块中引入 DevUI 模块与动画模块：
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { DevUIModule } from 'ng-devui';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DevUIModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
  1. 在模板中直接使用 DevUI 组件（如按钮、表格等），逐步替换已有控件。
2.6.2 Vue 版本快速上手

根据 Vue DevUI 官方站点与 Gitee 仓库说明，可通过 Vite + Vue3 + TypeScript 快速集成组件库。([Gitee][5])

典型流程如下（示意）：

npm init vite@latest my-vue-devui-app -- --template vue-ts
cd my-vue-devui-app
npm i vue-devui

在 main.ts 中：

import { createApp } from 'vue';
import DevUI from 'vue-devui';
import 'vue-devui/style.css'; // 或主题入口样式
import App from './App.vue';

const app = createApp(App);
app.use(DevUI);
app.mount('#app');

此后即可在 Vue 组件中使用 DevUI 的表格、表单、弹窗等组件。

2.7 DevUI × AI 可视化、低代码的跨场景探索

DevUI 官方资料中多次强调其面向企业中后台与云平台的场景属性，在这一基础上，与 AI 与低代码的结合主要体现在：([DevUI Design Of Angular][1])

  1. AI 可视化

    • DevUI 作为 UI 基座，用于展示 AI 任务执行状态、推理结果、日志与指标；
    • 与 MateChat 结合时，可将“自然语言描述配置”与“可视化配置面板”统一在一套风格中呈现。

  2. 低代码 / 配置驱动

    • DevUI 的组件结构清晰，易于通过 Schema 驱动；
    • 在低代码平台中，将 DevUI 组件注册为基础控件，可以在可视化编排器中拖拽组合；
    • MateChat 则可以作为“智能配置顾问”，辅助用户理解每个控件的含义与约束。

  3. 生成式 UI 辅助（探索方向）

    • 借助大模型生成 DevUI 组件的配置代码或表单 Schema；
    • 前端再根据 Schema 自动渲染 DevUI 组件树，形成“自然语言 → 组件界面”的一条链路。

到这里，DevUI 这一半的“故事”基本讲完：它是云原生与 B 端场景的界面基座，具备成熟的组件、主题与工程体系。下面我们进入 MateChat 的世界 —— 专门为 GenAI 交互而生的 UI 方案。😎

三、MateChat 智能应用：从 GenAI UI 组件到智能工作流入口

3.1 MateChat 的定位与特点

根据 MateChat 官网与开源仓库的描述，MateChat 是一款 面向前端智能化场景的解决方案 UI 库，旨在帮助开发者“轻松构建 AI 应用”。([GitCode][2])

官方强调了几个关键点：([MateChat][4])

  • 聚焦 对话式 GenAI 交互体验；
  • 提供一套适合研发工具领域（DevOps 平台、IDE 等）的 对话组件与体验体系；
  • 已在华为内部多个应用中完成智能化改造，如 华为云 CodeArts 智能助手、InsCode AI IDE；([MateChat][4])
  • 整体开源且遵循 MIT 协议，任何企业和个人均可免费使用。([MateChat][4])

同时，MateChat 明确强调：

  • 仅提供 UI 与交互层能力；
  • 不提供 SDK 形式的模型调用封装，开发者需要根据自身业务，对接如盘古大模型、OpenAI 等服务。([GitHub][6])

这意味着：MateChat 更像是一个“GenAI 体验设计系统 + Vue 组件库”，非常适合作为 DevUI 体系上的“智能对话模块”。

3.2 MateChat 的体验设计：从唤醒方式到交互过程监督

MateChat 官网对自身体验理念有非常清晰的描述，聚焦于在多业务场景下构建统一的 GenAI 语言交互体系。([MateChat][4])

核心体验特征包括：

  1. 快速唤醒

    • 支持固定入口、情境建议或快捷键等方式，让用户在 DevOps 平台、IDE 中随时唤醒智能助手。([MateChat][4])

  2. 轻松使用

    • 通过适时引导与“手边提示”，降低新用户使用门槛，保障可学习性。

  3. 自由表达

    • 为与 GenAI 对话设计了专门的输入区域，支持丰富的输入配置与拓展，方便接入补全、模板、变量等能力。

  4. 过程监督

    • 对 AI 内部状态、请求状态进行可视化呈现，让用户清楚了解“模型在做什么”，避免“黑盒式回答”。([MateChat][4])

  5. 可读性与信息结构化

    • 对 Markdown 等文本内容进行分层渲染，为长文本回答提供良好的阅读体验。([MateChat][4])

这些理念在组件层面体现为：

  • 消息气泡组件（承载对话内容）；
  • 输入框组件（具备快捷提示、补全等能力的输入区域）；
  • 快捷使用组件（基于上下文的快捷操作建议）；([MateChat][4])
  • 以及整体布局与状态展示组件。

3.3 组件体系与主题化：与 vue-devui 的深度绑定

MateChat 在开源仓库中明确说明，其 主题化能力是基于 vue-devui 的主题系统实现的。([GitHub][6])

这带来两项重要工程价值：

  1. 主题一致性

    • 若项目本身已使用 Vue DevUI，则可以共享同一套主题配置文件；
    • MateChat 的对话框、消息气泡、输入框风格会与 DevUI 的按钮、表格等完全统一。

  2. 统一设计系统下的扩展

    • 对于设计与前端团队而言，MateChat 就是 DevUI Design 在 GenAI 交互上的自然延伸；
    • 设计规范可以共享：色板、字体、密度、动效等。

在大型云原生控制台中，这种一致性非常关键 —— 用户不会感到“主界面一套风格，智能助手又是另一套风格”。

3.4 与大模型的对接实践：以 OpenAI 为例

MateChat 官方文档中给出了一个与模型服务（例如盘古大模型、OpenAI 等）对接的示意流程：([GitHub][6])

  1. 通过 npm 安装 OpenAI SDK（示例）：
npm install openai
  1. 初始化客户端：
import OpenAI from 'openai';

const client = new OpenAI({
  apiKey: 'YOUR_API_KEY',
  baseURL: 'YOUR_BASE_URL', // 可指向代理或企业内部网关
  dangerouslyAllowBrowser: true
});
  1. 在 MateChat 的提交事件中调用模型接口：

官方 README 提供了一个将原本“前端自回显”的逻辑替换为真实模型调用的示例：

  • 原逻辑：用户发送内容后，前端直接把该内容作为“模型回答”回显；
  • 改造后：在 onSubmit 中发送请求、推入一条 “loading” 消息，接收流式返回并不断更新最后一条消息的内容。([GitHub][6])

这种模式具有几个优势：

  • 前后端职责清晰：MateChat 负责 UI 与状态展示；模型调用逻辑由业务方实现；
  • 易于切换模型供应商：只要遵循统一的消息结构，换模型时无需改动 MateChat 组件；
  • 天然支持流式输出：通过遍历 completion 的流式结果，实现“字符逐字出现”的对话体验。

需要再次强调：MateChat 本身 没有 SDK，也不会提供统一的大模型接口封装。这是一个刻意保持中立、面向多模型的设计选择。

3.5 典型落地案例：CodeArts 智能助手与 InsCode AI IDE

MateChat 官网与 GitHub 仓库提到了两个典型应用：([MateChat][4])

  1. 华为云 CodeArts 智能助手

    • 在 DevOps / IDE 体系里，通过 MateChat 快速构建了统一的智能助手界面；
    • AI 助手可以帮助生成代码、解释错误、推荐文档。

  2. InsCode AI IDE

    • 由 CSDN、GitCode 与华为云 CodeArts IDE 联合开发的跨平台 AI IDE；
    • 借助 MateChat 丰富的组件资源，快速完成 IDE 中 AI 插件的 UI 搭建，为开发者提供高效、便捷的编程体验。

从这两个案例可以看到 MateChat 的典型价值：

  • 嵌入型智能助手：
    不需要另起一个系统，只需要在现有工具中嵌入 MateChat 对话面板，即可构建智能助手。

  • 多场景一致体验：
    在控制台、IDE、文档站等不同产品中，都使用 MateChat 作为统一的 GenAI 交互层，用户一旦学会一种用法，几乎可以“无缝迁移”到其他产品上。

3.6 创新玩法探索：智能体、记忆化、工作流与多模态

  1. 智能体（Agent）与工作流

    • 在模型调用层构建 Agent / Workflow 引擎，让不同的“技能”负责不同任务（如代码修复、日志分析、配置生成）；
    • 在 MateChat 中通过消息气泡样式区分“不同智能体角色”，或通过标签标记当前执行的工作流节点。

  2. 记忆化与个性化

    • 在服务端维护会话记忆 / 用户画像；
    • MateChat 负责展示“记忆片段”的概览（例如“你上次部署的集群是…”），提升连续任务体验。

  3. 知识检索（RAG）与解释型 UI

    • 在模型调用链中接入向量检索和企业知识库；
    • MateChat 将“检索到的知识”以折叠面板、引用卡片等形式呈现，强化可解释性。

  4. 多模态交互

    • 当前 MateChat 文档强调 Markdown 与文本体验，但在 UI 层已经具备展示复杂内容的基础；
    • 未来可以在同一条消息内承载代码高亮、图表、图片预览等多模态结果，让 AI 回答更贴近“操作指南”。

通过这些探索，MateChat 不只是“聊天窗口”，而是一个可承载智能体、工作流与复杂上下文的 智能工作台前端壳。

四、DevUI + MateChat：云原生智能应用的全链路落地蓝图

前面我们分别从 DevUI 与 MateChat 两条线展开，现在把它们合在一起，看一看在一个典型的云原生应用里，如何实现“从界面构建到智能赋能”的闭环。✨

4.1 统一的设计与组件体系：DevUI 为骨，MateChat 为脑

基于公开资料可以确定：([DevUI Design Of Angular][1])

  • DevUI 提供：导航、表格、表单、图标、布局、反馈等 基础 UI 组件与设计系统；
  • MateChat 提供：对话式交互所需的气泡、输入、快捷建议、状态展示等 GenAI 体验组件；
  • MateChat 的主题化能力基于 vue-devui，实现了与 DevUI 的视觉统一。

因此在同一产品中，我们可以设计如下分工：

  • DevUI 负责：

    • 全局布局（Header / Sidebar / Content 区域）；
    • 资源列表、配置表单、报表可视化；
    • 权限与导航结构。

  • MateChat 负责：

    • “AI 助手”面板（侧边栏、悬浮窗或全屏对话页面）；
    • 对话上下文展示与 Markdown 渲染；
    • 请求状态、提示与推荐操作。

用户的视角中，这就是一个统一风格的云原生控制台，只不过右侧或底部多了一个“智能助手”入口。

4.2 技术选型与架构组合：Angular / Vue 与模型服务的协同

根据 DevUI 与 MateChat 当前的生态：([GitHub][3])

  • 若主应用使用 Vue 3：

    • 可以直接使用 vue-devui + MateChat；
    • 二者在主题与组件风格上自然统一。

  • 若主应用使用 Angular：

    • 使用 ng-devui 构建主控制台；
    • 将 MateChat 以 微前端的 Vue 子应用 形式接入（例如通过 iframe、Module Federation 或自定义桥接）；
    • 通过主题变量、CSS 桥接与消息总线保证体验与状态联动。

在模型服务层：

  • 通过统一的“Model Gateway”（可封装对接盘古大模型、OpenAI 等）；
  • 暴露统一接口给前端，如：
interface ChatMessage {
  role: 'user' | 'assistant' | 'system';
  content: string;
}

interface ChatRequest {
  messages: ChatMessage[];
  stream?: boolean;
  contextId?: string;
}

interface ChatResponseChunk {
  content: string;
  id: string;
  finished?: boolean;
}

MateChat 前端只需关心：

  • 发送 ChatRequest；
  • 订阅流式 ChatResponseChunk，更新对话气泡。

这样可以确保：

  • MateChat 与模型实现解耦；
  • 在不同云区域和环境中自由切换模型服务，而不用修改 UI 逻辑。

4.3 云原生场景中的典型协同流程示例

以“构建与诊断 Kubernetes 集群”为例，构造一个 DevUI + MateChat 协同的完整流程（逻辑示例）：

  1. DevUI：集群列表与详情页

    • 使用表格展示集群列表（名称、状态、节点数、Region 等）；
    • 详情页中用 Tab 展示节点、Pod、事件、监控指标。

  2. MateChat：智能问答入口

    • 在详情页右侧嵌入 MateChat 面板；

    • 用户可以直接输入自然语言，如：

      “帮我看看这个集群最近的 Pod 重启异常是怎么回事？”

  3. 模型服务层：日志 + 指标 + 配置检索

    • 后端根据当前集群 ID，从日志服务、监控系统、配置仓库中检索相关信息；
    • 调用大模型，对日志与指标做聚合分析；
    • 将结果以“结论 + 证据 + 建议操作”的结构返回。

  4. MateChat：结构化呈现回答

    • 使用 Markdown 渲染“结论与建议”；
    • 使用 DevUI 风格的列表 / 折叠卡片呈现“相关事件与指标链接”。

  5. DevUI：一键执行运维操作

    • 在回答中呈现“操作按钮”，点击后由 DevUI 触发弹窗或跳转到相应操作页面（例如重启某个 Deployment）；
    • 将“智能诊断”结果与“控制操作”形成闭环。

在这个流程里：

  • DevUI 负责 资源数据可视化 + 操作控制；
  • MateChat 负责 自然语言理解 + 解释 + 建议；
  • 模型服务负责 推理 + 知识检索。

三者之间边界清晰，却通过统一的 UI 体系无缝衔接。

4.4 研发流程与团队协作模式建议

结合 DevUI 与 MateChat 的特性，可以思考一套更健康的团队协作模式：

  1. 设计与前端共建统一规范

    • DevUI Design 与 MateChat 的 GenAI 体验体系作为“统一设计源”；
    • 设计师在同一套 Figma / 设计系统中维护 DevUI 与 MateChat 的组件规范。

  2. 前端团队分层负责

    • 一组工程师负责 DevUI 基础设施集成与二次封装（布局、表单、表格等）；
    • 一组工程师负责 MateChat 的对接、会话管理与业务融合；
    • 两组共享主题、图标与多语言配置。

  3. 模型 / 平台团队聚焦后端智能能力

    • 提供统一的模型网关、RAG 能力、智能体与工作流引擎；
    • 与前端通过明确的 HTTP / WebSocket 协议进行通信。

  4. 开放协同与社区贡献

    • DevUI 和 MateChat 都是 MIT 开源协议，官方欢迎社区提交贡献与建议；
    • 企业内部也可以维护自己的 Fork，用于添加内部特定需求，同时向上游社区反馈通用能力。

五、未来展望：从组件库到“智能前端操作系统”

最后，结合 DevUI 与 MateChat 当前的能力与公开规划信息，我们可以给出一些未来演进的思考（偏趋势展望，而非现状断言）：

  1. DevUI：从 UI 组件到业务中台 UI OS

    • 更体系化的表单 / 表格 Schema 标准；
    • 更紧密的主题管理、国际化、无障碍支持；
    • 结合云原生观测体系的标准化可视化方案。

  2. MateChat：从对话 UI 到智能工作流编排前端

    • 对话只是入口，底层可以承载 Agent、Tool、Workflow 等多种智能执行单元；
    • 对话流与工作流在 UI 上的统一表达（例如“链式思维”可视化）。

  3. DevUI × MateChat：统一体验语言的智能化平台

    • 在 DevUI 的骨架上，MateChat 作为智能入口贯穿各类控制台、IDE 与管理平台；
    • 用户可以从任何一个 DevUI 页面唤醒 MateChat，与之进行“对话式操作”，而不再需要在多个系统之间来回切换。

结语

从公开资料可以很清晰地看到：

  • DevUI 已经成为华为云等大量企业中后台系统的统一前端解决方案，在 Angular 与 Vue 技术栈上都沉淀了成熟的组件与设计体系；([DevUI Design Of Angular][1])
  • MateChat 则在这一基础上，专注于“前端智能化场景”的 UI 与体验设计，已经在 CodeArts、InsCode AI IDE 等产品中证明了其实战价值。([GitCode][2])

当我们把这两条线串在一起，就能得到一套非常清晰的图景：

DevUI 负责搭好云原生世界的“控制台与面板”，
MateChat 则负责在这些面板上，点亮一盏随时可唤醒的“智能之灯”。

相关官方地址汇总如下：

声明：如上内容部分配图来源官网及公开互联网，若有侵权，请联系删除！

# 云原生 # 前端 # 交互
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

重构昇腾算子开发体系：CATLASS模板元编程深度实践

avatar AtomGit开源社区
cover

智能仓储技术革新潮起 2026武汉智能仓储展引领产业升级

avatar AtomGit开源社区
cover

AI陪练更快落地！AI问答完整闭环……更懂业务的企业AI培训系统

avatar AtomGit开源社区