摘要

在企业数字化转型的过程中，大量核心业务仍运行在“老系统”之上：技术栈偏旧、界面形态陈旧，却承载着关键的业务逻辑和数据资产。完全重写往往成本高昂、风险巨大，因此如何在不推倒重来的前提下，让存量系统获得现代化 UI 与智能化交互能力，成为架构师和前端团队共同思考的命题。

本文围绕华为云开源的企业级前端解决方案 DevUI（官网）和前端智能化场景解决方案 UI 库 MateChat（GitCode 项目｜官网），结合一个虚构的“企业资源管理系统 RMS”场景，探讨如下两条主线：

1. DevUI 组件生态：使用、实践与创新

   • 基于 Ng DevUI（Angular） 与 Vue DevUI（Vue3） 的 DataTable、表单、弹窗、甘特图、Quadrant Diagram 等高频组件，对存量页面进行“局部换血”，实现 UI 现代化与品牌主题统一。
   • 探索 DevUI 主题定制、响应式布局、甘特图 / DataTable 等在云控制台、企业后台场景中的实践方式。

2. MateChat 智能应用：落地实践与创新探索

   • 利用 MateChat 提供的布局、消息气泡、输入框、快捷提示等 Vue 组件，在存量系统侧边嵌入统一风格的 GenAI 对话界面。
   • 通过对接盘古大模型、ChatGPT 等服务端模型 API，构建智能助手，实现“自然语言检索数据”“辅助理解复杂配置”等智能化能力。
     

相关官方地址汇总如下：

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

第一章：存量系统的“围城”与渐进式改造诉求

1.1 存量企业系统的典型困境

在许多企业的 IT 版图中，存在大量“功勋卓著但略显老态”的系统：可能是十多年前搭建的 ERP / CRM，也可能是经历多年迭代的内部运营平台。这些系统有几个共性问题：

• 界面与交互陈旧：基于传统 Table + 表单的页面密集堆叠，缺乏清晰的信息层级与交互反馈，新人上手成本高。
• 技术栈老旧：大量仍停留在 jQuery、老版本 AngularJS 或传统模板技术，难以引入现代工程能力与生态。
• 扩展与集成困难：想接入大模型能力、智能推荐或更复杂的数据可视化时，需要大量手工改造。
• 用户期望抬升：用户在日常已习惯“搜索框一问就有答案”的体验，对系统智能化和自然语言交互有强烈期望。

在这种情况下，“完全重写”往往意味着漫长的项目周期、昂贵的人力投入及不可预期的迁移风险。相比之下，更现实的路径是：

用 组件生态 + 智能化 UI 组件，在不打断业务的前提下，对关键场景进行渐进式、非侵入式改造。

当然，感兴趣的话，可以先去官方拉取代码试试水：

1.2 DevUI 与 MateChat：从 UI 到智能交互的“两条腿”

DevUI：企业级 UI 组件与设计体系

• DevUI 是面向企业中后台产品的开源前端解决方案，提供规范化的设计体系与大量高质量组件。

• 官方目前主要提供：

  • Ng DevUI（Angular 组件库）：支持 Angular^18，内置 DataTable、Form、Modal、Gantt、Quadrant Diagram 等 70+ 组件。
  • Vue DevUI（Vue3 组件库）：基于 DevUI Design 的 Vue3 组件库，覆盖表格、表单、弹窗、布局等常用场景。

• 通过 SCSS 变量与 Design Token，可完成品牌主题定制、暗黑模式等体验升级。

先来瞅瞅DevUI所提供的丰富组件库：

MateChat：面向智能化场景的前端 UI 组件库

• MateChat 是“前端智能化场景解决方案 UI 库”，基于 Vue3 + TypeScript 实现，定位是为 GenAI 应用提供统一的对话式交互体验组件，而不是后端 SDK 或托管平台。

• 其核心特点：

  • 提供 McLayout / McLayoutHeader / McLayoutContent / McLayoutSender 等布局组件，用于构建典型“左侧会话列表 + 右侧对话区域 + 底部输入框”的结构。
  • 提供 McBubble / McInput / McPrompt 等消息与输入组件，帮助快速搭建具备 AI 对话特征的前端界面。
  • 主题系统基于 Vue DevUI 主题能力，可通过 CSS 变量切换品牌主题，保持与现有 DevUI 系统一致的视觉风格。

• MateChat 本身不包含大模型推理服务，也不内置知识库 / Function Calling 后端——开发者需自行对接盘古大模型、ChatGPT 等服务端 API，将其结果通过 MateChat 组件呈现给用户。

当然，MateChat也提供了相关的组件库呢：

第二章：改造蓝图——以 RMS 为例的技术路线

假设我们有一个基于 jQuery + JSP 搭建的“企业资源管理系统（RMS）”，核心场景包括：

• 资源列表：展示服务器、数据库、存储等资源，现有表格只支持简单分页与查询。
• 资源详情编辑：通过老式弹窗编辑大量字段，缺乏统一的校验与交互反馈。
• 帮助与说明：通过 PDF / 静态 HTML 提供操作指南，用户需要手动查阅。

我们期望达成的目标：

1. 借助 DevUI / Vue DevUI，将资源列表页和编辑弹窗升级为现代化组件：DataTable、Form、Modal、Gantt 等。
2. 借助 MateChat，在页面右侧或右下角嵌入一个对话式智能助手 UI，前端统一使用 MateChat 组件，后端由我们自行调用大模型和 RMS API。
3. 全过程尽量不改动现有核心业务接口，通过微前端 / 嵌入式 Vue 应用与老系统解耦。

当然，它的UI风格还是非常炫酷的：

比如如下的对话界面：

第三章：DevUI 组件生态在 RMS 中的实践

本章聚焦于“DevUI 组件生态：使用、实践与创新”这一主题，结合 RMS 的典型页面展示如何落地。

3.1 资源列表：从传统 Table 到 DevUI DataTable

我们新建一个基于 Vue DevUI 的小型子应用，将其挂载在旧 RMS 页面的占位节点上，用来接管“资源列表”区域：

<!-- 旧 RMS 页面保留整体框架，只预留挂载点 -->
<div id="modern-resource-list"></div>

<!-- 打包后的 Vue DevUI 子应用资源 -->
<script src="/dist/resource-list.umd.js"></script>
<link rel="stylesheet" href="/dist/resource-list.css" />
<script>
  // 旧系统渲染完成后调用
  window.mountResourceList && window.mountResourceList();
</script>

子应用内部，使用 Vue DevUI 的表格、表单控件和按钮：

<template>
  <div class="resource-list-container">
    <!-- 查询区 -->
    <div class="filter-area">
      <d-input v-model="keyword" placeholder="按名称搜索" @keyup.enter="reload" />
      <d-select v-model="region" :options="regionOptions" placeholder="区域" />
      <d-button @click="reload">查询</d-button>
      <d-button variant="solid" @click="openCreate">新增资源</d-button>
    </div>

    <!-- DataTable 列表 -->
    <d-table
      :data="rows"
      :pagination="pagination"
      @page-index-change="changePage"
      @page-size-change="changeSize"
      @sort-change="changeSort"
      row-hover
      stripe
    >
      <d-column field="id" header="ID" :width="120" />
      <d-column field="name" header="名称" sortable :width="220" />
      <d-column field="region" header="区域" :width="160" />
      <d-column field="status" header="状态" sortable :width="120">
        <template #default="{ row }">
          <d-tag>{{ statusText(row.status) }}</d-tag>
        </template>
      </d-column>
      <d-column header="操作" fixed-right :width="200">
        <template #default="{ row }">
          <d-button variant="text" @click="openEdit(row)">编辑</d-button>
          <d-button variant="text" color="danger" @click="remove(row)">删除</d-button>
        </template>
      </d-column>
    </d-table>

    <!-- 资源编辑弹窗 -->
    <resource-editor-modal
      ref="editor"
      @saved="reload"
    />
  </div>
</template>

这里体现了 DevUI 生态的一些优势：

• 高频组件一站式解决：DataTable + Pagination + Tag + Button 等组件协同，快速搭建后台列表页。
• 统一交互规范：排序、分页、悬浮高亮等行为遵循统一设计语言，降低学习成本。
• 可扩展到甘特图 / Quadrant Diagram 等高级可视化：例如在资源发布计划、版本排期分析场景下，引入 DevUI 甘特图与象限图组件，提升数据洞察力。

正如如下所示：

3.2 资源编辑：使用 Modal + Form 统一交互与校验

传统 RMS 的编辑弹窗往往通过手写 HTML + jQuery 控制显隐，校验逻辑散落在各处。我们通过 DevUI 的 Modal 与 Form 组件统一实现：

• 使用 <d-modal> 管理弹窗显隐与操作按钮。
• 使用 <d-form> 与 <d-form-item> 定义字段与校验策略。
• 将旧系统 API 返回的数据做一次映射，填充到表单模型中；提交时再映射回旧接口期望的字段结构。

在此过程中，我们不修改后端接口，仅在前端增加一层 “数据适配层”，在不破坏原有逻辑的前提下获得现代化的表单体验。

3.3 主题与样式定制：DevUI 品牌主题+暗黑模式实践

DevUI / Vue DevUI 通过 SCSS / CSS 变量提供完备的主题机制：

• 可以按品牌规范定义主色、辅色、文本色、圆角、阴影等 Design Token，使新模块与原系统品牌视觉保持统一。
• 在长期演进中，可以逐步将原系统样式收敛到 DevUI 主题之下，实现 “多系统共用一套 Design System”。
• 对于需要夜间办公的运维场景，可基于主题变量拓展暗黑模式，通过切换根节点的 data-theme 属性实现无刷新换肤。

第四章：MateChat 智能应用——在 RMS 中构建对话式助手

这一章聚焦“MateChat 智能应用：落地实践与创新探索”，强调：MateChat 是一个前端组件库，而非 SDK / 托管平台，我们将它与大模型 API、自研后端组合使用。

4.1 MateChat 能力边界澄清

基于官方文档与示例，MateChat 的能力主要集中在前端体验层：

• 提供一整套用于 GenAI 对话的 UI 组件：

  • 布局层：McLayout、McLayoutHeader、McLayoutContent、McLayoutSender 等。
  • 消息层：McBubble 等消息气泡组件。
  • 输入层：McInput 等输入组件。
  • 辅助层：McPrompt 等快捷提示。

• 主题系统继承自 Vue DevUI，可以通过修改 CSS 变量快速适配品牌与暗黑模式。

• 官方文档提供了对接 OpenAI / 盘古等模型 API 的示例代码，但这些调用都是由业务方在前端 / 服务端自行实现，MateChat 只负责“显示”和“交互”，并不封装模型 SDK 或知识库引擎。

因此，在 RMS 中集成 MateChat 时，我们的正确姿势是：

用 MateChat 组件搭建统一的对话界面，通过自建 API 将用户输入转发给大模型与 RMS 后端，再把结果以气泡等形式呈现，而不是把 MateChat 当作“有内置知识库与 Function Calling 的云服务”。

4.2 在 RMS 中嵌入 MateChat 对话区

我们可以创建一个与第三章类似的 Vue3 子应用，专门用于对话区域，通过 @matechat/core 按需引入组件：

// chat-main.ts
import { createApp } from 'vue';
import App from './ChatApp.vue';
import '@matechat/core/dist/style.css';

createApp(App).mount('#rms-chat-entry');

ChatApp.vue 内部使用 MateChat 布局与消息组件：

<template>
  <McLayout class="rms-chat">
    <McLayoutHeader>
      <McHeader :title="'RMS 智能助手'" :logoImg="logo" />
    </McLayoutHeader>

    <McLayoutContent class="chat-content">
      <McBubble
        v-for="(msg, idx) in messages"
        :key="idx"
        :content="msg.content"
        :align="msg.from === 'user' ? 'right' : 'left'"
      />
    </McLayoutContent>

    <McLayoutSender>
      <McInput
        :value="input"
        :maxLength="2000"
        showCount
        @change="val => (input = val)"
        @submit="handleSubmit"
      />
    </McLayoutSender>
  </McLayout>
</template>

此时我们已经拥有一个统一风格的 GenAI 交互外壳，接下来只需决定“后端怎么干活”。

乃至，我们可以看下MateChat的对话界面：

4.3 对接大模型与 RMS：从 UI 库变成“智能助手”

基于 MateChat 官方“如何对接模型服务”的示例，我们可以按如下思路组合：

1. 在前端或 BFF 层封装大模型调用逻辑

   • 可使用 OpenAI SDK 或 HTTP 接口对接 ChatGPT / 盘古大模型。
   • 将用户输入与 RMS 业务上下文拼接成 Prompt，发送至模型。

2. RMS 业务 API 与模型协作

   • 对于“查询某类资源”的需求，可以在服务端解析意图后调用 RMS 现有 REST 接口，再将结构化结果总结为自然语言回复。
   • 对于“解释某个字段含义、给出操作指引”等问题，可以直接依赖模型 + 文档提示词完成。

3. 在 MateChat 组件中流式呈现结果

   • 参照官方示例，在 handleSubmit 中先插入一条 loading: true 的气泡；
   • 当模型流式返回时，逐步拼接内容到最后一条 McBubble 上，营造“持续生成”的体验。

在整个链路中，MateChat 始终扮演的是 “前端界面与交互规范提供者” 的角色，而智能化逻辑则完全由我们的服务端实现，这既符合其官方定位，也更利于企业根据自身安全与合规要求灵活部署。

4.4 创新玩法：多会话、主题联动与低代码集成

基于 MateChat 组件生态，可以在 RMS 中探索一些创新玩法：

• 多会话管理：用 Pinia / Zustand 等状态管理工具维护多个会话，每个会话对应一组 messages，可配合 MateChat 布局组件构建“会话列表 + 当前对话”界面。
• 主题联动：将 RMS 的 DevUI 主题变量同步给 MateChat，使主应用与智能助手在配色、字体、圆角等方面保持一致。
• 低代码/表单驱动配置：在某些场景，可通过 DevUI 的表单组件配置模型参数、系统 Prompt 等，把“智能助手配置界面”也统一在 DevUI 生态中。

第五章：新旧融合——微前端与数据适配策略

在存量系统改造中，技术选型只是开始，更重要的是新旧系统如何平稳共存。

5.1 微前端：DevUI / MateChat 子应用的自然容器

通过 Qiankun、Module Federation 等微前端框架，我们可以将基于 DevUI / MateChat 构建的子应用，以“小模块”的方式嵌入到旧 RMS 中：

• 每个子应用独立构建与部署，仅暴露挂载函数与通信接口。
• 主应用负责路由与整体框架，子应用只专注于各自的业务区域（如资源列表、智能助手）。
• 通过全局事件、共享状态或 BFF 层 API 达成协作。

这种模式可以有效避免依赖冲突，也为未来逐步替换更多老页面预留空间。

5.2 数据适配与权限继承

在 DevUI / MateChat 子应用中，我们需要针对旧 RMS 的 API 做适配：

• 字段映射：旧接口的 status_code、host_ip 等字段，可以在前端转换为 DevUI 表格更友好展示的 statusText、ipAddress 等。
• 错误与权限处理：继承旧系统的认证 / 鉴权机制，所有 DevUI / MateChat 子应用调用 API 时，复用同一 Token 或 Session，确保权限边界一致。
• 渐进式接管：对于某些复杂操作（如资源创建向导），可以先通过 MateChat + DevUI 为其增加“智能解释 + 半自动填充”，再逐步抽象为全新流程页面。

第六章：总结与展望

6.1 架构层面的收益

回顾全文，我们可以看到：

• DevUI 组件生态

  • 为 RMS 提供了标准化的 UI 组件与设计体系，从 DataTable / Form / Modal 到 Gantt / Quadrant Diagram，显著提升了界面一致性与交互体验。
  • 通过 Angular 与 Vue 双版本支持，为不同技术栈的项目提供了统一的设计语言和丰富的实践路径。

• MateChat 智能应用

  • 作为前端智能化场景 UI 库，为 RMS 提供了高复用的对话式界面组件，帮助我们在不改动核心后端的前提下“挂载”大模型能力。
  • 与 DevUI 共享主题体系，使智能助手自然融入现有后台界面，而不是一个“异质弹窗”。

二者组合形成了一条务实的路线：用 DevUI 做 UI 现代化，用 MateChat 做智能交互外壳，智能与业务逻辑则交给自研服务端与大模型 API，实现低风险的渐进式升级。

所以，感兴趣的朋友，赶紧前去克隆代码，上手体验一波吧

6.2 未来可拓展方向

结合官方规划与社区文章，可以预见：

• DevUI / Vue DevUI 在云原生控制台、DevOps 平台等场景会涌现更多最佳实践，组件层面会持续扩展数据可视化、低代码搭建等能力。
• MateChat 将在多会话管理、富内容消息（Markdown 卡片、文件 / 图片）、布局系统等方面继续演进，为“AI+应用”提供更成熟的前端范式。
• 结合 MCP、智能体、工作流编排等理念，未来可以在 RMS 中探索“智能体 + DevUI 表单”驱动的低代码自动化操作，将当前的“问答助手”升级为“可执行任务的智能协作伙伴”。

对大多数企业而言，存量系统不会在一夜之间消失。以 DevUI 与 MateChat 为代表的组件生态与智能化 UI 能力，提供了一条兼顾成本、风险与体验的演进路径：既不需要推倒重来，又能持续将现代前端与大模型能力引入历史系统，实现真正意义上的“老树发新芽”。🌱

如果觉得有帮助，别忘了点个赞+关注支持一下~
喜欢记得关注，别让好内容被埋没～

相关官方地址汇总如下：

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

如上附图，部分来源互联网，如有侵权，请联系删除。