作者：兰瓶Coding（移动开发转型鸿蒙 & 前端中级）
如果这篇对你有帮助，欢迎点赞 & 收藏支持一下～🙏

关键词：云原生 · 企业级前端 · DevUI · MateChat · 智能助手 · GenAI 交互

前言

云原生基础设施已经高度成熟：容器、Service Mesh、Serverless、DevOps 平台形成了完整技术闭环。但对一线开发者来说，交付效率真正的瓶颈，往往卡在两层：

1. 中后台界面构建效率与一致性：
   云控制台、DevOps 平台、企业管理系统等 B 端应用界面体量巨大、交互复杂，仅靠零散组件库已经很难支撑长期演进。

2. AI 能力与业务界面的深度融合：
   单独做一个 “/chat” 页面对接大模型很简单，但让 GenAI 能力自然地“长在产品里”、和业务流程深度绑定，却是另外一个层级的课题。

围绕这两个核心问题，华为云在前端方向沉淀出了两条关键技术生态：

• DevUI：面向企业中后台产品的开源前端解决方案，基于 DevUI Design 设计体系，已支持 Angular / Vue / React 等多种技术栈，沉淀了 60+ 企业级组件与丰富生态。
• MateChat：面向前端智能化场景的解决方案 UI 库，专门用于构建 GenAI 对话和智能助手界面，已在华为云 CodeArts 智能助手、InsCode AI IDE 等多个内部产品中落地。

二者分别解决了界面构建与智能交互的问题，并在设计体系和主题能力上天然协同——MateChat 的主题能力即基于 vue-devui 的主题化能力实现。

• DevUI 主要提供 Angular 与 Vue 等版本支持，同时扩展 React 等生态能力。
• MateChat 不提供 SDK 形式，它本质是一个前端 UI 组件库，需要由接入方自行对接模型服务（如盘古、ChatGPT 等）。

本文将从工程实践与架构设计视角，系统拆解 DevUI 与 MateChat 的能力，并给出多种联合落地方案，力求在“云原生深水区”给出一套可复制的前端智能化路径。

相关官方地址汇总如下：

• MateChat：https://gitcode.com/DevCloudFE/MateChat
• MateChat官网：https://matechat.gitcode.com
• DevUI官网：https://devui.design/home

一、DevUI：云原生 B 端场景下的企业级前端基座

1.1 DevUI 家族与设计哲学：从“组件库”到“前端方案”

按照官方的定义，DevUI 是：

面向企业中后台产品的开源前端解决方案，基于 DevUI Design 设计体系，提供环境搭建、组件库、示例项目等全流程支持。

与只关注组件的 UI 库不同，DevUI 更接近“前端产品线”的概念，围绕企业场景构建了一个多层次生态：

• 设计体系：DevUI Design
  提供一整套面向中后台的设计规范与组件语言，从色板、排版到交互模式均有统一约束。

• 多技术栈实现：

  • Angular DevUI（ng-devui）：服务于华为云等大量内部系统，是最成熟的一支实现。
  • Vue DevUI（vue-devui）：基于 Vue3 + Vite + TypeScript + JSX 的组件库，紧贴现代前端技术栈。
  • React DevUI（正在演进中）：面向 React 场景补齐多栈能力。

• 周边生态：

  • Admin 模板（如基于 Vue DevUI 的中后台模板）
  • DevUI Playground、Helper 工具、VS Code / Vite 插件等提升开发体验的工具链

DevUI 的设计价值观，在多个官方介绍与技术文章中被总结为：简单、沉浸、灵活、高效、开放、可信、乐趣 等，强调在工具类和中后台产品中提供稳定、克制而高效的体验。

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

• 能够覆盖 云控制台、DevOps 平台、运维管理、企业管理系统 等复杂 B 端产品；
• 在多技术栈共存（Angular/Vue/React）的组织中，提供统一设计语言和组件基线。

1.2 高频组件进阶：表格、表单、弹窗从“能用”到“好用”

在真实的云原生 B 端系统中，表格、表单、弹窗 是最容易导致体验割裂与技术债堆积的区域。DevUI 在这些组件上不仅提供基础能力，更在性能与可扩展性上做了针对性加强。

1.2.1 表格：从数据列表到业务中枢

DevUI 家族中，表格组件是典型的“重武器”之一：

• 支持大数据量场景，结合虚拟滚动等能力支撑 10w 级数据秒级渲染。
• 在 Vue DevUI 中配合 Echarts、GitGraph 等特异性组件，可将表格与可视化、提交网络图等组合使用。

在工程实践中，可以围绕以下几个方向使用 DevUI 表格“打磨业务中枢”：

1. 性能优先：列表即监控面板

   • 大表格开启虚拟滚动、按需渲染、服务端分页；
   • 对于实时刷新的监控列表，结合 DevUI 的时间轴 / 图表组件，将关键指标挤压到可视化“角落”，避免单纯靠刷新表格行。

2. 结构优先：多级表头与行内操作统一规范

   • 云资源列表往往需要多级表头（资源信息 / 状态 / 费用 / 安全），DevUI 支持通过配置列定义多层表头结构；
   • 行内操作（启停、重启、扩容）尽量采用统一的按钮样式和交互模式，由表格插槽/模板统一抽象，而非每个页面单独写。

3. 状态优先：与设计体系保持统一

   • 利用 DevUI 提供的 Tag / Status / Tooltip 等组件在单元格中展现多维状态；
   • 在告警、失败等状态下，让颜色与态势图、通知组件保持一致，形成跨产品线的“状态语言”。

常见避坑建议：

• 避免将复杂业务逻辑写在表格渲染函数中，转而使用组合式函数或 Angular Service 处理，表格只负责展示数据；
• 对可编辑表格场景，尽量将编辑行为拆为“行内轻编辑 + 抽屉/弹窗重编辑”的模式，减少用户在高密度表格中操作失误风险。

1.2.2 表单：云资源与策略编排的“主战场”

DevUI 在表单方向不仅提供基础输入、校验能力，还配合步骤条（Steps）、时间轴（ActionTimeline）、Markdown 编辑器、代码编辑器等组件，服务复杂配置场景。

在云原生业务中，典型的高复杂度表单包括：

• 云服务器 / 容器集群创建向导
• CI/CD 流水线配置
• 权限策略 / 告警规则 / IaC 模板编辑

DevUI 的实战策略包括：

1. 拆解为可感知的步骤

   • 使用 Steps 组件构建“多步向导”，将表单逻辑分层组织；
   • 每步结合 DevUI 的表单校验，避免用户在最后一步一次性看到海量错误信息。

2. “人读 + 机读”兼顾

   • 对于 YAML / JSON 类型的配置字段，可使用 Markdown 编辑器或代码编辑器组件，让用户在结构化编辑器中操作；
   • 同时保留以表单方式编辑的“简化视图”，两者之间提供同步策略。

3. 与 MateChat 协同：AI 辅助填表（后文详述）

   • 在复杂配置字段旁边预留智能助手入口，让 MateChat 基于自然语言生成配置草稿，再通过 DevUI 表单进行结构化校验和微调。

1.2.3 弹窗与抽屉：对“中断式操作”的克制使用

DevUI 提供了对话框、抽屉、通知等多种浮层组件，官方设计价值观强调“沉浸与克制”，在 B 端场景尤其重要。

建议实践：

• 短操作用弹窗：确认、轻量编辑、单字段变更适用标准Modal；
• 长流程用抽屉/独立页：当表单字段超过一屏，优先选择抽屉或独立编辑页，避免多层弹窗叠加；
• 统一关闭逻辑：在 Angular 中通过 Service 控制弹窗实例；在 Vue 中通过组合式 API 或单例管理，统一处理关闭回调、路由联动等。

通过 DevUI 的一致视觉与交互规则，可以在整个平台内形成统一的“操作节奏感”，降低用户学习成本。

1.3 自定义组件与插件：在 DevUI 体系内沉淀组织资产

DevUI 本身提供了上百个基础组件（包括表单、表格、图表、Markdown、代码编辑、Git 图谱等）。

在组织级落地时，推荐在 DevUI 之上再构建一层“业务组件层”，形成三层结构：

1. 基础层：DevUI 官方组件库

   • Button、Input、Layout、Tabs、Table、Form、Drawer 等

2. 业务层：组织自定义组件

   • 「云资源选择器」「流水线拓扑组件」「工单状态看板」「项目成员选择器」等

3. 场景层：模板与页面骨架

   • 「列表 + 筛选 + 批量操作」模板
   • 「详情 + 子表格 + 时间轴」模板
   • 「向导式创建流程」模板

在实现自定义组件时，建议：

• 统一使用 DevUI 组件作为内部构建块，保持视觉与交互一致；
• 把常见 B 端交互模式（批量选择、树型导航、表格内筛选）沉淀为可配置属性，而非一次性写死在页面；
• 利用 DevUI Playground / 组件示例的形式，将组件 API 与 Demo 放在可浏览的“组织前端资产中心”，延续 DevUI 官方文档体验。

1.4 主题与样式定制：品牌、暗黑与响应式的体系化实现

在官方资料中，DevUI 与 Vue DevUI 都强调了对主题化能力的支持，允许通过统一变量定制品牌色、字体、圆角、空间等视觉特征。

更进一步，MateChat 的主题化也直接基于 vue-devui 的主题机制实现，这保证了智能助手界面与主产品视觉的一致性。

实践层面建议：

1. 品牌主题规范化

   • 将企业 VI 中的主色、副色、警示色映射到 DevUI 的主题变量；
   • 为常见状态（成功 / 警告 / 错误 / 信息）约定统一色值与使用场景，避免项目中“各自发挥”。

2. 暗黑模式与高对比主题

   • 在 DevOps、日志查看、监控场景中，优先提供暗色主题；
   • 通过 :root + CSS 变量或 DevUI 主题切换机制，确保所有 DevUI 与 MateChat 组件能随主题切换自动适配。

3. 响应式布局

   • 使用 DevUI 的布局组件结合 CSS Grid / Flex，实现“宽屏信息增量展示”而非简单等比缩放；
   • 对移动端访问需求强的场景（审批、告警响应），优先实现 “关键场景单独适配” 而非勉强全站响应式。

通过一次性构建完整主题体系，后续新系统接入 DevUI 时，只需加载统一主题配置即可快速融入企业视觉系统。

1.5 云原生落地：DevUI 在四类典型 B 端场景中的实践模式

结合 DevUI 官网与社区文章中提到的典型使用方向，可以抽象出四类高频落地场景：

1. 云资源管理控制台

   • 特点：资源类型繁多、列表与详情页结构重复度高、需要强筛选与批量操作；
   • DevUI 价值：统一导航、列表与详情模板、标签和状态组件、步骤式创建向导。

2. DevOps / CI/CD 平台

   • 特点：流水线、构建、部署、日志、质量检查、告警等信息密度大；
   • DevUI 价值：时间轴、Echarts 图表、GitGraph、代码检视、树表格等组件直接覆盖关键页面。

3. 企业运营与管理系统（CRM/OA/审批/知识库等）

   • 特点：典型 CRUD + 规则配置 + 审批链条；
   • DevUI 价值：通用表单 + 表格 + 审批时间轴 + 抽屉详情 快速拼装业务界面。

4. 开发工具平台（在线 IDE、代码托管、协同平台）

   • 特点：需要与编码场景结合，接口管理、代码浏览、评审、任务管理等；
   • DevUI 价值：代码编辑器、CodeReview 组件、GitGraph、ActionTimeline 等为工具场景提供现成 UI 基石。

这些场景恰好也是后文 MateChat 适合嵌入的主要阵地，二者天然共线。

1.6 入门实践：以 DevUI 作为项目起点的推荐路径

为了降低团队引入成本，可以借鉴 DevUI 官网提供的 “Environment Setup / DevUI Travel” 等实践路径：

1.6.1 Vue 技术栈推荐流程（概念级步骤）

1. 使用 Vite 创建 Vue3 + TS 项目；
2. 引入 vue-devui 及其样式文件；
3. 在入口文件中注册 DevUI 组件库（全量或按需引入）；
4. 按照 DevUI 示例构建基础布局（导航 + 侧边栏 + 内容区）；
5. 将现有业务表格/表单重构为 DevUI 组件组合；
6. 接入统一主题配置，确保与公司品牌视觉一致；
7. 为后续 MateChat 接入预留右侧/底部区域。

1.6.2 Angular 技术栈推荐流程（概念级步骤）

1. 使用 Angular CLI 创建项目；
2. 引入 ng-devui 模块，并在根模块中配置；
3. 参照官方文档将基础布局重构为 DevUI Layout；
4. 利用 DevUI 的表格、表单等组件改造核心业务页面；
5. 梳理公共业务组件并封装为单独模块，为多项目共享做准备。

在完成这一步之后，一个“DevUI 化”的云原生前端基座便基本成型，为 MateChat 的引入提供了稳固底座。

可比如如下，DevUI 就提供了一系列组件，供大家使用：

二、MateChat：面向智能化场景的前端对话体验系统

如果说 DevUI 解的是“前端基础设施与设计系统”的问题，那么 MateChat 解的则是“GenAI 时代的人机交互语言”的问题。

2.1 MateChat 概览：前端智能化场景解决方案 UI 库

根据 GitCode 与 MateChat 官网的官方描述：

MateChat 是一款前端智能化场景解决方案 UI 库，帮助你轻松构建 AI 应用；
已服务于华为内部多个应用智能化改造，并助力 CodeArts、InsCode AI IDE 等智能助手搭建；
是一款企业级开箱即用的产品，全部代码开源并遵循 MIT 协议。

MateChat 的设计目标包括：

• 构建通用 GenAI 交互体系：
  在不同业务场景中形成高度一致的 AI 对话语言系统，从“泡泡样式”到“上下文提示”，统一体验。
• 体验无边界，业务无侵害：
  不捆绑具体模型与后端服务，以纯 UI 库形式存在，使现有业务可以“外挂”智能能力。
• 更适合研发工具领域：
  尤其适用于 DevOps 平台、IDE、研发工具等场景，提供协作式、沉浸式、情境式等多种使用形态。

再次强调：MateChat 本身 不提供 SDK 形式，也不内置具体模型的 SDK。官方文档明确示例了如何使用 OpenAI 等 SDK 对接模型服务，MateChat 专注在 UI 与交互层。

2.2 核心能力拆解：一套针对 GenAI 打磨的交互语言

MateChat 官网将其能力概括为几个关键词：快速唤醒、轻松使用、自由表达、过程监督、可读性强。

对应到具体组件和体验特征，可以梳理为：

1. 快速唤醒（Quick Wakeup）

   • 支持固定入口、情境建议、快捷键等方式呼出对话界面；
   • 适用于 DevOps 平台、IDE 等高频业务场景，不打断用户专注流程。

2. 轻松使用（Ease of Use）

   • 通过引导和手边提示降低新用户使用门槛；
   • 提供快捷指令、预置问法等 UI 组件帮助用户快速上手。

3. 自由表达（Free Expression）

   • 输入区域专为与 GenAI 对话设计，支持多行输入、补全、提示词等；
   • 可扩展上传附件、选择上下文等能力（结合业务自主拓展）。

4. 过程监督（Process Supervision）

   • 帮助用户理解 AI 的内部状态，例如加载中、思考中、已结束；
   • 可以在 UI 上展示分步结果、进度提示，减少“黑盒感”。

5. 可读性强（Readability）

   • 对 Markdown 语法和长文本展示做了专门优化，使 AI 输出有更清晰的层次和结构；
   • 在复杂技术内容（代码、日志、配置）场景中尤为重要。

同时，MateChat 还强调三种典型体验形态：协作式、沉浸式、情境式，分别对应在现有平台中协同、在专门 AI 页面中沉浸式使用，以及贴合特定业务场景（如研发流程）的嵌入。

同时，MateChat也提供了相关组件，大家请看：

2.3 组件粒度：从消息气泡到输入框的完整拼装单元

MateChat 官网展示了一些典型组件：

• 消息气泡（用于承载对话内容）

  • 支持左右对齐、头像配置、加载状态、主题变量等；
  • 可以承载 Markdown 渲染后的内容、代码块等。

• 输入框组件

  • 针对 GenAI 对话设计的输入框，支持多种视图和扩展点；
  • 可结合快捷使用组件一起使用。

• 快捷使用组件

  • 根据输入或上下文提供快捷建议 / 预设问法；
  • 非常适合 DEV / Ops 场景下提供“查看最近构建失败原因”“生成测试用例”等固定触发器。

这些组件可以组合为：

• 独立的聊天窗口（用于专门 AI 助手页面）；
• 嵌入式对话块（嵌在日志查看页、配置表单旁）；
• IDE 侧边栏插件中的 AI 聊天区。

MateChat 的组件本身基于 Vue 技术栈构建，同时主题能力依托 vue-devui 主题体系，使其在视觉上天然与 DevUI 应用保持一致。

对比下DevUI的组件：

2.4 落地流程：从引入 MateChat 到打通模型服务

MateChat 的接入过程大致可以拆解为四步（下述为概念性流程，具体代码以官方 README 为准）：

2.4.1 搭建基础前端工程

• 使用 Vite/Vue CLI 创建 Vue3 项目；
• 引入 vue-devui 和 MateChat，并按文档注册组件与样式；
• 验证基础页面能渲染出 MateChat 的 Demo 组件（如简单泡泡+输入框）。

2.4.2 设计消息数据结构与本地状态

结合 README 示例，可以设计形如：

interface ChatMessage {
  from: 'user' | 'model';
  content: string;
  avatarConfig?: {
    name?: string;
    imgSrc?: string;
    displayName?: string;
    // ...
  };
  id?: string;
  loading?: boolean;
}

在 Vue 组合式 API 中用 ref<ChatMessage[]>([]) 存储消息列表，通过 MateChat 暴露的组件属性进行渲染。

2.4.3 对接模型服务（MateChat 不提供 SDK，本步骤完全由业务定义）

官方 README 以 OpenAI SDK 为例展示了如何对接模型：

1. 安装依赖：

npm install openai

2. 初始化客户端并进行流式调用（伪代码）：

import OpenAI from 'openai';

const client = new OpenAI({
  apiKey: 'YOUR_KEY',
  baseURL: 'YOUR_ENDPOINT',
  dangerouslyAllowBrowser: true,
});

const fetchData = async (ques: string) => {
  // 先向 messages 中追加一条 loading 状态的模型消息
  const completion = await client.chat.completions.create({
    model: 'my-model',
    messages: [{ role: 'user', content: ques }],
    stream: true,
  });

  // 流式读取返回内容，逐步更新最后一条消息的 content
  for await (const chunk of completion) {
    const content = chunk.choices[0]?.delta?.content || '';
    const chatId = chunk.id;
    // messages[last].content += content;
    // messages[last].id = chatId;
  }
};

3. 前端在触发 onSubmit 时调用 fetchData，并用 MateChat 的气泡组件展示消息内容与加载态。

注意：

• 此处以 OpenAI 为例只是演示调用方式，实际项目中可以替换为华为盘古或自建模型服务；
• MateChat 在这里完全不感知模型类型，只负责展示消息 UI。

2.4.4 产品化增强：多会话、预设指令、错误处理

在基础功能跑通后，建议进一步增强：

• 多会话管理：
  为不同业务场景（流水线分析、告警分析、配置生成）建立不同会话，支持切换与归档；
• 预设指令与模板：
  将高频业务场景封装为快捷指令按钮，通过 MateChat 的快捷使用组件呈现；
• 错误提示与重试：
  在模型调用失败时，以统一样式气泡展示错误原因，并提供一键重试按钮。

至此，一个“从 0 到 1”的 MateChat 智能助手前端基本搭建完成。

正如如下所示：

2.5 嵌入式智能：在现有产品中外挂 MateChat 的三种模式

MateChat 在设计初衷上就强调“匹配各种工具/平台的原生业务场景和界面特征”，并已在 CodeArts 智能助手、InsCode AI IDE 等产品中实践。

结合官网提到的协作式、沉浸式、情境式三种体验，我们可以归纳三种常见嵌入模式：

1. 协作式：侧边栏 / 底部 AI 助手

   • 在 DevOps 平台、代码托管平台、在线 IDE 中，使用 MateChat 作为固定侧边栏或底部浮层；
   • 用户在主区域进行正常开发/运维操作，需要时随时呼出智能助手进行问答与建议；
   • 代表案例：InsCode AI IDE 中的 AI 插件，借助 MateChat 丰富组件资源快速搭建对话区。

2. 沉浸式：专用 AI 页面 / 应用

   • 提供一个或多个专门的 AI 中心页面，用户集中进行知识问答、代码修复、文档生成等任务；
   • MateChat 控制整个页面框架，配合 DevUI 的 Layout 做统一外壳；
   • 适用于企业内部“智能问答中心”“跨产品知识助手”等场景。

3. 情境式：上下文敏感的嵌入助手

   • 将 MateChat 嵌在具体业务页面，如流水线详情、告警详情、复杂表单旁侧；
   • 在每个场景中自动注入特定上下文（如当前流水线 ID、日志窗口内容、当前配置草稿）；
   • 用户在对话中可以“就这一个对象”提出问题与需求，体验更贴近业务。

通过这三种模式，可以在不重构主业务架构的前提下，为现有云原生应用逐步附着智能能力。

当然，MateChat 的组件也同样丰富。

正如如下所示：

2.6 创新探索方向：在 MateChat UI 之上构建高级智能能力（架构层）

MateChat 官方文档重点聚焦于 UI 与模型调用示例，并未直接内置 MCP、智能体、知识检索等复杂能力。

但从架构上看，MateChat 提供了一个高质量的对话 UI 容器，完全可以作为以下能力的“前端承载层”（这些能力由后端或中台实现）：

下列内容均为基于 MateChat 官方能力之上的 实践架构建议，非 MateChat 内置功能。

1. 工具调用 / MCP / Function Calling

   • 后端模型支持工具调用（查询告警、拉取流水线、执行脚本等）；
   • 前端 MateChat 用特定样式气泡展示“执行结果卡片”，例如展示流水线甘特图、资源拓扑图（配合 DevUI 图表组件）；
   • 实现“对话驱动运维操作”的体验。

2. 智能体（Agent）与多角色助手

   • 为不同任务定义不同 Agent（如“流水线专家”“安全合规助手”“成本优化助手”等）；
   • MateChat Header 区显示当前 Agent 头像与说明，用户可在会话中切换角色；
   • 不同 Agent 使用不同后端模型配置或系统 Prompt。

3. 记忆化与个性化

   • 在后端管理用户级记忆（偏好、常用项目、最近问题）；
   • 每次调用模型时自动附带部分用户记忆上下文；
   • MateChat 前端通过快捷使用组件展示个性化推荐指令或“继续上次问题”的入口。

4. 知识检索（RAG）与可解释引用

   • 后端实现对文档、代码仓库、运维手册等的向量检索；
   • MateChat 将回答中的引用文档以可点击标签、列表形式展示，帮助用户理解答案来源。

5. 多模态与文件辅助

   • 扩展 MateChat 输入区，允许用户上传日志、截图或配置文件；
   • 后端使用多模态模型解析内容并生成解释；
   • MateChat 气泡中使用代码块、图像缩略图、折叠面板展示解析结果。

6. 工作流与 UI 生成

   • 后端通过 LLM 将用户意图转化为 DSL / 配置 JSON；
   • 前端使用 DevUI 的表单、图表、布局组件解析 DSL 并渲染 UI；
   • MateChat 消息中展示“系统为你生成的 XXX 配置”，用户点击可跳转 DevUI 表单页面进一步编辑。

这些方向充分体现了 MateChat 在前端智能化架构中的定位：它负责统一 AI 交互界面，而智能逻辑则留给后端/平台层演进。

所以说，感兴趣的朋友可下载体验一波哟：

正如如下所示：

2.7 发展潜力与社区生态

从 GitCode 与 GitHub 仓库可以看到，MateChat 作为独立开源项目，拥有：

• MIT 开源协议，适合企业级广泛使用；
• 明确的特性规划（Feature Plan）与贡献指南；
• 与 DevUI 团队的联动（官网提供 DevUI Design、DevUI 官方交流群等链接）。

结合 GenAI 在研发工具、运维、安全、运营等领域的强劲需求，MateChat 很有机会发展为 “前端智能交互标准件”，在 DevUI 系列产品和更广泛的前端社区中占据一席之地。

三、DevUI × MateChat：统一前端架构下的智能化落地方案

有了 DevUI 的界面基座和 MateChat 的智能交互能力，我们可以设计出一系列“从界面到智能”的闭环方案。下面选取几种典型模式进行拆解。

3.1 方案一：云资源管理控制台 + 智能运维助手

适用场景：IaaS / PaaS 控制台、监控告警平台

3.1.1 界面基座：DevUI 统一控制台体验

• 使用 DevUI Layout 构建统一导航、面包屑和内容区域；
• 资源列表页采用 DevUI 表格 + 筛选器 + Tag 状态组件；
• 详情页使用 Tabs + Timeline 展示配置变更、操作日志等。

3.1.2 智能入口：MateChat 作为“运维助手”

• 在每个资源详情页面右侧预留 MateChat 面板，随页面切换更新上下文；
• 自动将当前资源 ID / 告警列表 / 近期指标摘要作为上下文传递给模型。

3.1.3 AI 能力示例（架构层）

• 告警解释：
  用户可以在 MateChat 中直接问“这条告警产生的根因是什么？可能影响哪些服务？”。
  后端基于监控数据与规则库生成解释，MateChat 展示结构化回答。
• 修复建议：
  AI 根据历史处理经验与知识库，给出建议操作步骤，并通过 DevUI 通知与操作按钮引导用户执行。

所以说，如果你对我写的感兴趣，可直接上官网克隆代码，直接上手操练一波：

正如如下所示：

3.2 方案二：DevOps 平台 + 流水线 AI 顾问

适用场景：CI/CD 平台、质量平台、代码托管平台

3.2.1 界面基座：DevUI 构建流水线“驾驶舱”

• 使用 DevUI 表格展示流水线运行记录；
• 使用 ActionTimeline、Echarts、GitGraph 展示构建阶段、质量指标、提交网络图等。

3.2.2 智能入口：MateChat 嵌入流水线详情

• 在流水线详情页面嵌入 MateChat，对话中自动携带：

  • 当前流水线配置摘要；
  • 最近几次运行状态；
  • 关键日志片段。

3.2.3 AI 能力示例（架构层）

• 失败原因归纳与定位建议；
• 针对当前工程生成新的流水线模板（如增加安全扫描、覆盖率检查）；
• 根据用户自然语言说明 “我想在构建后加一个集成测试” 生成对应流水线 YAML 片段，并在 DevUI 表单中展示为可视化配置。

比如：「帮我生成一个查看近 7 天营收与订单转化率的仪表盘页面」

正如如下所示：

3.3 方案三：在线 IDE / 代码平台 + AI 编程助手

适用场景：InsCode AI IDE 类 IDE、企业内部 Web IDE、代码托管平台在线编辑器

3.3.1 界面基座：DevUI + 编辑器组件

• 使用 DevUI 导航、菜单、卡片构建 IDE 外壳；
• 使用代码编辑器、CodeReview、GitGraph 等组件构建编辑和评审界面。

3.3.2 智能入口：MateChat 作为侧边栏 AI 帮手

• 固定 MateChat 在右侧或底部，支持快捷键呼出；

• 在对话过程中自动附带：

  • 当前文件内容（摘要或片段）
  • 当前光标位置附近代码
  • 当前仓库或项目的元信息

3.3.3 AI 能力示例（架构层）

• 代码解释与重构建议；
• 自动生成测试用例与提交说明；
• 针对 Review 结果给出自动修复 Patch（通过 DevUI 的 CodeReview 组件展示 diff）。

这一方案在 InsCode AI IDE 中已经有类似实践，MateChat 被用于快速搭建 IDE AI 插件界面，提升开发者体验。

可直接从官方寻得相关对接教程：

正如如下所示：

3.4 方案四：配置中心 / 低代码平台 + 自然语言配置助手

适用场景：规则配置平台、流程编排平台、低代码/表单引擎

3.4.1 界面基座：DevUI 驱动的配置/编排 UI

• DevUI 表单、树、步骤条构建配置面板；
• DevUI 图表、时间轴展示运行效果和执行历史。

3.4.2 智能入口：MateChat 驻留在配置面板右侧

• 用户用自然语言描述需求，如“帮我配置一个晚上 10 点到早上 6 点的低流量告警规则”；
• 后端模型生成规则 DSL / JSON；
• DevUI 表单加载 DSL，将其映射为结构化字段，供用户二次修改。

这种模式能够极大降低复杂配置能力的使用门槛，同时通过 DevUI 的校验与约束保证规则安全可控。

四、总结：从组件到体系，从界面到智能

通过对 DevUI 与 MateChat 官方资料与实践案例的梳理，我们可以看到一条非常清晰的技术路径：

1. 用 DevUI 建立统一的前端界面基座与设计语言

   • 支持 Angular / Vue / React 等多技术栈，适配企业现实技术状况；
   • 提供 60+ 组件、特异性组件（Markdown、代码编辑、GitGraph）、Admin 模板和工具链，覆盖主流云原生 B 端场景。

2. 用 MateChat 建立统一的 GenAI 交互体验系统

   • 面向前端智能化场景的 UI 库，开箱即用，MIT 协议；
   • 基于 vue-devui 主题化机制，与 DevUI 应用保持视觉一致；
   • 不提供 SDK，保留对模型和后端架构的完全开放性。

3. 在 DevUI × MateChat 的统一架构下，构建云原生智能前端解决方案

   • 云控制台 + 智能运维助手；
   • DevOps 平台 + 流水线 AI 顾问；
   • IDE / 代码平台 + AI 编程助手；
   • 配置中心 / 低代码平台 + 自然语言配置助手。

对于已经深耕云原生的团队来说，引入 DevUI 与 MateChat，不是简单多了两个组件库，而是在前端层面补齐了“设计系统 + 智能交互系统”两个关键拼图。

如果你们正在规划新的云管平台、DevOps 中台或智能研发工具，不妨从以下三个小步骤开始实践：

1. 用 DevUI 重构一个关键页面（如资源列表/流水线详情），统一样式与交互；
2. 在该页面嵌入一个 MateChat 侧边栏，先基于简单模型服务跑通对话；
3. 在后端逐步引入知识检索、工具调用等高级能力，将 MateChat 变成真正的“智能顾问”。

一步一步地，你就会发现：
曾经看起来抽象的“云原生智能前端”，在 DevUI 和 MateChat 的帮助下，其实是可以落成标准工程实践的。💪🚀

相关官方地址汇总如下：

• MateChat：https://gitcode.com/DevCloudFE/MateChat
• MateChat官网：https://matechat.gitcode.com
• DevUI官网：https://devui.design/home

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