企业里做知识库 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 多步任务可视化插件

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

// 代码示例

<McToolCard
:tool-result="formData"
tool-type="form"
@submit="handleSubmit"
/>

// 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 - 全球开发者的开源社区,开源代码托管平台

_________________________________________________________________________________________________