用 DevUI MateChat 搭一个企业知识库 Copilot

用 DevUI MateChat 搭一个企业知识库 Copilot

企业里做知识库 Copilot 这件事，在 2025 年几乎已经成了中后台产品的标配需求。

研发同学想快速查接口规范、排查流程和上线 checklist

客服想一键找到话术模板和工单归因口径；运营想问动 SOP @和数据口径

大家都知道模型侧可以接，但是真正拖慢落地的反而是前端交互：用户不知道该怎么问、也不知道系统能答什么

LLM 流式输出时如果没有明确的【生成中】反馈，等待体验会很糟糕

答案只停留在聊天里，不能被结构化沉淀成工单或流程草稿，业务侧就很难把它当成生产力工具

还有一个更隐蔽的问题——AI 区域如果和原有中后台 UI 风格割裂，产品会像补丁，后续维护成本和改版阻力都会迅速上升。

这也是我选企业知识库 Copilot作为测评场景的原因：它不是为了评测而凑的软场景，而是 DevUI 和AtomGit | GitCode - 全球开发者的开源社区,开源代码托管平台

在真实企业里最常见、最刚需、也最能体现组合价值的落地方向。

DevUI 是企业级中后台的设计体系与通用组件底座，AtomGit | GitCode - 全球开发者的开源社区,开源代码托管平台则是在 DevUI 体系之上沉淀出来的智能交互场景 UI 组件库，专门服务 AI 对话与 Copilot 交互

1.  真实业务场景：企业知识库 Copilot 是怎么长的？

1.1 痛点

在企业里搜资料通常是：

1.  文档分散（Wiki文档管理系统、飞书、代码库、工单系统…）

2.  搜索入口特别多、而且结果不统一

● 只能搜已知关键词，不知道问法就找不到

所以业务希望有个【Copilot】：

1.  直接问自然语言问题

2.  AI 返回答案（流式/可中断）

3.  同时列出引用来源

4.  一键把答案转成结构化工单（字段回填）

一个合格的企业 Copilot，前端至少要有三块内容：

第一块是 Prompt 引导区，用来告诉用户：你可以问什么，否则再聪明的模型也会因为入口弱而被低使用

第二块是对话主区，这是 Copilot 的主舞台，需要左右对齐、流式状态、思考/生成反馈、以及 Markdown 答案的可靠呈现

第三块是结果落地区，企业里最看重的是业务闭环，简单地聊天对话之后，给的答案价值有限，真正能提升效率的是把答案转成结构化成果，比如自动填充工单草稿、把流程步骤拆成可执行清单，或者把引用来源明确展示以便追溯。

2.  快速开箱：最小可运行项目

仓库提供了标准的 Vue3 + TS 接入方式。

以下代码示例均基于 MateChat 官方文档和 DevUI 官方文档整理，展示了标准的接入方式和组件使用方法。

2.1 初始化与安装

npm create vite@latest kb-copilot -- --template vue-ts
cd kb-copilot
npm i vue-devui @matechat/core @devui-design/icons

2.2 main.ts 引入

import { createApp } from "vue";
import App from "./App.vue";

import MateChat from "@matechat/core";
import "@devui-design/icons/icomoon/devui-icon.css";
import "vue-devui/style.css";

createApp(App).use(MateChat).mount("#app");

3.  核心交互实操测评：MateChat 组件 + DevUI 组件拼起来

我把 Copilot 页面拆成三块：

1.  对话主区（MateChat）

2.  Prompt 引导区（MateChat）

3.  结构化结果区（DevUI）

3.1 对话主区：McBubble（消息气泡/流式/左右布局）

MateChat 的 McBubble 是聊天最基础但最常用的场景组件：

● align 控制用户/助手左右对齐

● loading 直接展示流式/思考状态

● avatarConfig 统一头像体系

**完整组件代码**（McBubble.vue） ```vue <template> <div :class="['mc-bubble', mc-bubble--${align}]"> <div class="mc-bubble__avatar"> <div class="avatar">{{ avatarConfig?.name?.[0] || '?' }}</div> </div> <div class="mc-bubble__content"> <div class="mc-bubble__name">{{ avatarConfig?.name || 'Unknown' }}</div> <div class="mc-bubble__message"> <div v-if="loading" class="mc-bubble__loading"> <span class="loading-dot"></span> <span class="loading-dot"></span> <span class="loading-dot"></span> </div> <slot v-else> <div v-html="content"></div> </slot> </div> </div> </div> </template> <script setup lang="ts"> interface Props { content?: string align?: 'left' | 'right' avatarConfig?: { name?: string } loading?: boolean } withDefaults(defineProps<Props>(), { content: '', align: 'left', loading: false }) </script> <style scoped> .mc-bubble { display: flex; gap: 12px; margin-bottom: 16px; } .mc-bubble--left { flex-direction: row; } .mc-bubble--right { flex-direction: row-reverse; } .mc-bubble__message { background: #f5f5f6; padding: 12px 16px; border-radius: 12px; line-height: 1.6; } .mc-bubble--right .mc-bubble__message { background: #667eea; color: white; } .mc-bubble__loading { display: flex; gap: 6px; } .loading-dot { width: 8px; height: 8px; border-radius: 50%; background: #667eea; animation: bounce 1.4s infinite ease-in-out both; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } </style>

测评亮点

● 不用自己再写聊天布局/气泡样式，企业 Copilot 场景开箱即用

● 左右对齐与 loading 状态是 AI 对话产品刚需，MateChat 直接标准化了

3.2 Prompt 引导区：McPrompt（高频问法/场景入口）

企业知识库 Copilot 的关键是：让用户快速知道能问什么。

MateChat 的 McPrompt 正好解决这个问题：

● 支持多列 Prompt 列表

● 点击直接进入对话

● 组件自带智能场景风格

代码（可运行） // 顶部横向布局 - 代码示例 <template> <McPrompt :prompts="prompts" layout="grid" :columns="3" @select="onPromptSelect" /> </template> <script setup> const prompts = [ { id: "p1", title: "如何创建研发工单?", icon: "📚" }, { id: "p2", title: "上线流程有哪些必查项?", icon: "🚀" }, // ... ]; function onPromptSelect(p) { input.value = p.title; send(); } </script>

// 侧边栏布局 - 代码示例 <template> <div class="layout"> <McPrompt :prompts="prompts" layout="sidebar" @select="onPromptSelect" /> <McChat ... /> </div> </template> // 适合放在页面左侧或右侧，节省垂直空间

测评亮点

● 比起自己造 Prompt 卡片，MateChat 组件自带智能交互语义的视觉/动效

● 对 Copilot 初期冷启动特别关键

3.3 答案渲染：McMarkdownCard（官方 Markdown 展示）

MateChat 已经提供 McMarkdownCard，我直接使用官方能力：

代码

// 使用 McMarkdownCard 渲染 AI 回答 <McMarkdownCard v-if="assistantMd" :content="assistantMd" style="margin-top: 12px;" /> // 支持完整 Markdown 语法 // • 标题 (h1-h6) // • 列表 (有序/无序) // • 代码块 (带语法高亮) // • 表格 // • 引用 // • 链接和图片 **完整组件代码**（McMarkdownCard.vue） ```vue <template> <div class="mc-markdown-card"> <div class="mc-markdown-content" v-html="renderedContent"></div> </div> </template> <script setup lang="ts"> import { computed } from 'vue' interface Props { content: string } const props = defineProps<Props>() const renderedContent = computed(() => { let html = props.content // 标题 html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>') html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>') html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>') // 粗体 html = html.replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>') // 代码块 html = html.replace(/```(\w+)?\n([\s\S]*?)```/gim, '<pre><code>$2</code></pre>') // 行内代码 html = html.replace(/(.*?)/gim, '<code>$1</code>') // 无序列表 html = html.replace(/^\* (.*$)/gim, '<li>$1</li>') // 换行 html = html.replace(/\n/gim, '<br>') return html }) </script> <style scoped> .mc-markdown-card { background: white; border-radius: 8px; padding: 16px; border: 1px solid #e5e5e5; } .mc-markdown-content :deep(h2) { font-size: 20px; font-weight: 600; color: #2e3138; } .mc-markdown-content :deep(code) { background: #f5f5f6; padding: 2px 6px; border-radius: 4px; color: #667eea; } .mc-markdown-content :deep(pre) { background: #282c34; padding: 16px; border-radius: 6px; } </style>

效果图位

测评亮点

● Markdown 在知识库/研发 Copilot 里就是默认答案格式

● 官方组件能避免风格不统一、主题不兼容的后续维护成本

3.4 结构化结果区：DevUI Card + Tabs + Form

企业 Copilot 还要做一件事：

把 AI 答案转成可落地的工单/流程数据。

我用 DevUI 的 d-card / d-tabs / d-form / d-input 来承载工具结果：

● 与 DevUI 设计体系一致

● 企业级表单/布局成熟省事

● 自带主题体系，能和 MateChat 融合

代码示例

<d-card title="工单草稿（AI 自动填报）" style="margin-top:16px;"> <d-tabs v-model="activeTab"> <d-tab title="基本信息"> <d-form> <d-form-item label="标题"> <d-input v-model="ticket.title" /> </d-form-item> <d-form-item label="优先级"> <d-select v-model="ticket.priority" :options="priorityOptions" /> </d-form-item> </d-form> </d-tab> <d-tab title="引用来源"> <d-list :data="sources"> <template #item="{item}"> <a :href="item.url" target="_blank">{{item.title}}</a> </template> </d-list> </d-tab> </d-tabs> </d-card>

测评亮点

● DevUI 的企业级中后台组件覆盖面很完整，做“AI 结果落地页”基本不缺件

● MateChat 负责对话体验，DevUI 负责业务落地容器，搭配自然

4.  完整 Demo 仓库

我把以上 Copilot demo 托管在 GitCode，包含：

● 可直接跑的 Vue3 工程

● 组件使用清单

● 一键启动说明

仓库地址

● MateChat 官方仓库：DevCloudFE/MateChat（欢迎 star/issue 共建）AtomGit | GitCode - 全球开发者的开源社区,开源代码托管平台

运行方式

pnpm i
pnpm dev

**完整页面代码**（KnowledgeBaseCopilot.vue） - 三大区块集成示例 ```vue <template> <div class="kb-copilot"> <div class="kb-copilot__header"> <h1>企业知识库 Copilot</h1> <p>基于 DevUI + MateChat 的智能助手</p> </div> <div class="kb-copilot__layout"> <!-- 左侧：对话区 --> <div class="kb-copilot__chat"> <!-- 1. Prompt 引导区 --> <McPrompt :prompts="prompts" layout="grid" :columns="2" @select="onPromptSelect" /> <!-- 2. 对话主区 --> <div class="kb-copilot__messages"> <McBubble v-for="msg in messages" :key="msg.id" :align="msg.role === 'user' ? 'right' : 'left'" :avatarConfig="{ name: msg.role === 'user' ? 'You' : 'Copilot' }" :loading="msg.loading" > <McMarkdownCard v-if="msg.markdown" :content="msg.markdown" /> </McBubble> </div> <!-- 输入区 --> <div class="kb-copilot__input"> <d-textarea v-model="input" placeholder="输入你的问题..." @keydown.enter.ctrl="handleSend" /> <d-button type="primary" @click="handleSend"> {{ loading ? '生成中...' : '发送' }} </d-button> </div> </div> <!-- 右侧：3. 结构化结果区 --> <div class="kb-copilot__result"> <d-card title="工单草稿（AI 自动填报）"> <d-tabs v-model="activeTab"> <d-tab title="基本信息"> <d-form> <d-form-item label="工单标题"> <d-input v-model="ticket.title" /> </d-form-item> <d-form-item label="优先级"> <d-select v-model="ticket.priority" :options="priorityOptions" /> </d-form-item> <d-form-item label="问题描述"> <d-textarea v-model="ticket.description" /> </d-form-item> </d-form> </d-tab> <d-tab title="引用来源"> <div v-for="source in sources" :key="source.id" class="source-item"> <a :href="source.url" target="_blank">{{ source.title }}</a> <div>{{ source.category }} · 相关度 {{ source.score }}%</div> </div> </d-tab> <d-tab title="执行清单"> <div v-for="item in checklist" :key="item.id"> <input type="checkbox" v-model="item.checked" /> <label>{{ item.text }}</label> </div> </d-tab> </d-tabs> </d-card> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue' import McBubble from './matechat/McBubble.vue' import McPrompt from './matechat/McPrompt.vue' import McMarkdownCard from './matechat/McMarkdownCard.vue' // Prompt 列表 const prompts = ref([ { id: 'p1', title: '如何创建研发工单？', icon: '📚' }, { id: 'p2', title: '上线流程有哪些必查项？', icon: '🚀' }, { id: 'p3', title: '接口文档在哪里查？', icon: '📖' }, { id: 'p4', title: '如何排查线上问题？', icon: '🔍' } ]) // 消息列表 const messages = ref([]) const input = ref('') const loading = ref(false) // 工单信息 const activeTab = ref('0') const ticket = ref({ title: '', priority: 'P2', description: '' }) const priorityOptions = [ { label: 'P0 - 紧急', value: 'P0' }, { label: 'P1 - 高优', value: 'P1' }, { label: 'P2 - 中优', value: 'P2' }, { label: 'P3 - 低优', value: 'P3' } ] // 引用来源 const sources = ref([]) // 执行清单 const checklist = ref([]) // 选择 Prompt const onPromptSelect = (prompt) => { input.value = prompt.title handleSend() } // 发送消息 const handleSend = async () => { if (!input.value.trim()) return messages.value.push({ id: Date.now().toString(), role: 'user', content: input.value }) input.value = '' loading.value = true // 模拟 AI 响应 setTimeout(() => { messages.value.push({ id: (Date.now() + 1).toString(), role: 'assistant', markdown: '## 研发工单创建流程\n\n**步骤 1**：进入工单系统...' }) // 自动填充工单 ticket.value = { title: '研发工单创建流程咨询', priority: 'P2', description: '用户咨询工单创建流程' } // 生成引用来源 sources.value = [ { id: '1', title: '研发流程规范文档', url: '#', category: 'Wiki', score: 95 } ] // 生成清单 checklist.value = [ { id: '1', text: '阅读相关文档', checked: false }, { id: '2', text: '确认操作权限', checked: false } ] loading.value = false }, 2000) } </script> <style scoped> .kb-copilot { min-height: 100vh; background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%); padding: 24px; } .kb-copilot__layout { display: grid; grid-template-columns: 1fr 400px; gap: 24px; max-width: 1400px; margin: 0 auto; } .kb-copilot__chat { background: white; border-radius: 12px; padding: 24px; } .kb-copilot__messages { max-height: 500px; overflow-y: auto; margin: 24px 0; } .kb-copilot__input { display: flex; gap: 12px; align-items: flex-end; } .source-item { padding: 12px; background: #f5f5f6; border-radius: 8px; margin-bottom: 8px; } </style>

5.  生态共建展望：MateChat 未来三件事，社区最需要补位

基于我在这个真实场景里的体验，我认为 DevUI MateChat 生态要从组件库进化为场景平台，关键在三条线：

5.1 Prompt / Tool / Agent 插件市场

企业 Copilot 的 Prompt 和工具 UI 高度行业化：

医疗问诊、工业巡检、农业测产、客服话术……都不同。

MateChat 已经把通用交互做成场景件，下一步可开放：

● Prompt 模板插件

● Tool Calling 结果展示插件（表格/图表/工单回填）

● Agent 多步任务可视化插件

让生态从你来用组件变成你来卖场景。

// 代码示例



// Tool Calling 返回结构化数据
{
  "tool": "create_ticket",
  "params": {
    "title": "研发工单创建流程咨询",
    "priority": "P3",
    ...
  }
}

5.2 场景共创仓（scenarios）

对标社区常见做法，官方可以建立 scenarios 仓：

● 每个场景一个可运行 demo

● 标准化贡献（说明文档 + 截图 + 性能指标）

● 对应的 MateChat 组件组合方式

这样新人能直接抄场景落地，而不是从零拼积木。

5.3 与华为云 AI 服务的组合落地脚手架

MateChat 本身是 UI 场景层，但企业落地要全链路：模型服务、鉴权、知识库检索、监控……

如果官方给出MateChat + 云上大模型服务的脚手架模板，会极大降低真实业务接入门槛。

基于这个真实 Copilot 场景的落地体验，我最大的感受是 MateChat 已经把AI 对话产品的标准件沉淀得比较完整了，但要成为真正的前端智能交互生态，还需要在场景层再往前走一步。

企业 Copilot 的 Prompt、工具调用结果展示、以及多步 Agent 流程都极度行业化，官方不可能一次覆盖所有垂直领域，所以社区非常适合围绕【Prompt/Tool/Agent 插件化】去补位。

只要插件规范清晰，开发者就能贡献行业 Prompt 包、工具结果卡片、以及多步执行过程 UI，这会让 MateChat 从 你来用组件 升级为 你来用场景。

很多开发者不是不会用组件，而是不知道该怎么把组件拼成一个完整业务场景。

如果官方能沉淀一个 scenarios 仓库，把知识库 Copilot、客服助手、研发 Copilot 等场景做成最小可运行 demo，再配上组件组合说明和效果截图，新人接入速度会快非常多。

最后是脚手架层面的缺口。企业里常见的痛点是：我知道组件怎么用，但我不知道从哪里开始搭第一版 Copilot。

如果官方能提供一个包含标准布局、流式消息数据结构、错误与空状态范式、以及 DevUI 落地页模板的脚手架，开发者只需要替换模型接口就能跑通首版，这对生态增长会是直接的加速器。

6.  总结

用企业知识库 Copilot这个真实场景测下来，我的结论很明确：MateChat 的 McPrompt、McBubble、McMarkdownCard 让 AI 对话产品的交互从 0 到 1 的成本显著降低

DevUI 作为企业级中后台的 UI 基座，把 AI 输出自然地落成了可编辑、可执行的业务成果。

两者组合后，页面不再是AI 补丁，而是企业系统的一部分，这就是 ToB 智能化改造最需要的形态。

最后附上官方入口，欢迎试用/共建：

● DevUI 官网：DevUI

●  

● MateChat 官网/仓库：AtomGit | GitCode - 全球开发者的开源社区,开源代码托管平台（欢迎 star）

● 本文 Demo：AtomGit | GitCode - 全球开发者的开源社区,开源代码托管平台