企業裏做知識庫 Copilot 這件事，在 2025 年幾乎已經成了中後台產品的標配需求。

研發同學想快速查接口規範、排查流程和上線 checklist

客服想一鍵找到話術模板和工單歸因口徑；運營想問動 SOP @和數據口徑

大家都知道模型側可以接，但是真正拖慢落地的反而是前端交互：用户不知道該怎麼問、也不知道系統能答什麼

LLM 流式輸出時如果沒有明確的【生成中】反饋，等待體驗會很糟糕

答案只停留在聊天裏，不能被結構化沉澱成工單或流程草稿，業務側就很難把它當成生產力工具

還有一個更隱蔽的問題——AI 區域如果和原有中後台 UI 風格割裂，產品會像補丁，後續維護成本和改版阻力都會迅速上升。

用 DevUI MateChat 搭一個企業知識庫 Copilot_html

用 DevUI MateChat 搭一個企業知識庫 Copilot_開發者_02

這也是我選企業知識庫 Copilot作為測評場景的原因：它不是為了評測而湊的軟場景，而是 DevUI 和AtomGit | GitCode - 全球開發者的開源社區,開源代碼託管平台

在真實企業裏最常見、最剛需、也最能體現組合價值的落地方向。

DevUI 是企業級中後台的設計體系與通用組件底座，AtomGit | GitCode - 全球開發者的開源社區,開源代碼託管平台則是在 DevUI 體系之上沉澱出來的智能交互場景 UI 組件庫，專門服務 AI 對話與 Copilot 交互

用 DevUI MateChat 搭一個企業知識庫 Copilot_html_03

1.  真實業務場景：企業知識庫 Copilot 是怎麼長的？

1.1 痛點

在企業裏搜資料通常是：

1.  文檔分散（Wiki文檔管理系統、飛書、代碼庫、工單系統…）

2.  搜索入口特別多、而且結果不統一

● 只能搜已知關鍵詞，不知道問法就找不到

所以業務希望有個【Copilot】：

1.  直接問自然語言問題

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

3.  同時列出引用來源

4.  一鍵把答案轉成結構化工單（字段回填）

用 DevUI MateChat 搭一個企業知識庫 Copilot_結構化_04

一個合格的企業 Copilot，前端至少要有三塊內容：

第一塊是 Prompt 引導區，用來告訴用户：你可以問什麼，否則再聰明的模型也會因為入口弱而被低使用

第二塊是對話主區，這是 Copilot 的主舞台，需要左右對齊、流式狀態、思考/生成反饋、以及 Markdown 答案的可靠呈現

第三塊是結果落地區，企業裏最看重的是業務閉環，簡單地聊天對話之後，給的答案價值有限，真正能提升效率的是把答案轉成結構化成果，比如自動填充工單草稿、把流程步驟拆成可執行清單，或者把引用來源明確展示以便追溯。

用 DevUI MateChat 搭一個企業知識庫 Copilot_結構化_05

用 DevUI MateChat 搭一個企業知識庫 Copilot_開發者_06

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

  
    
      {{ avatarConfig?.name?.[0] || '?' }}
    
    
      {{ avatarConfig?.name || 'Unknown' }}
      
        
          
          
          
        
        
          
        
      
    
  



interface Props {
  content?: string
  align?: 'left' | 'right'
  avatarConfig?: { name?: string }
  loading?: boolean
}

withDefaults(defineProps(), {
  content: '',
  align: 'left',
  loading: false
})



.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); }
}

測評亮點

● 不用自己再寫聊天佈局/氣泡樣式，企業 Copilot 場景開箱即用

● 左右對齊與 loading 狀態是 AI 對話產品剛需，MateChat 直接標準化了

3.2 Prompt 引導區：McPrompt（高頻問法/場景入口）

企業知識庫 Copilot 的關鍵是：讓用户快速知道能問什麼。

MateChat 的 McPrompt 正好解決這個問題：

用 DevUI MateChat 搭一個企業知識庫 Copilot_開發者_07

● 支持多列 Prompt 列表

● 點擊直接進入對話

● 組件自帶智能場景風格

用 DevUI MateChat 搭一個企業知識庫 Copilot_結構化_08

用 DevUI MateChat 搭一個企業知識庫 Copilot_開發者_09

代碼（可運行）

// 頂部橫向佈局 - 代碼示例 

 
 
 

 
const prompts = [ 
{ id: "p1", title: "如何創建研發工單?", icon: "📚" }, 
{ id: "p2", title: "上線流程有哪些必查項?", icon: "🚀" }, // ... ];
function onPromptSelect(p) 
{ 
input.value = p.title; send(); 
}
// 側邊欄佈局 - 代碼示例 
 
 
 
 
 
 
// 適合放在頁面左側或右側，節省垂直空間

測評亮點

● 比起自己造 Prompt 卡片，MateChat 組件自帶智能交互語義的視覺/動效

● 對 Copilot 初期冷啓動特別關鍵

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

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

代碼

// 使用 McMarkdownCard 渲染 AI 回答



// 支持完整 Markdown 語法
// • 標題 (h1-h6)
// • 列表 (有序/無序)
// • 代碼塊 (帶語法高亮)
// • 表格
// • 引用
// • 鏈接和圖片

**完整組件代碼**（McMarkdownCard.vue）
```vue

  
    
  



import { computed } from 'vue'

interface Props {
  content: string
}

const props = defineProps()

const renderedContent = computed(() => {
  let html = props.content

  // 標題
  html = html.replace(/^### (.*$)/gim, '$1')
  html = html.replace(/^## (.*$)/gim, '$1')
  html = html.replace(/^# (.*$)/gim, '$1')

  // 粗體
  html = html.replace(/\*\*(.*?)\*\*/gim, '$1')

  // 代碼塊
  html = html.replace(/```(\w+)?\n([\s\S]*?)```/gim, '$2')

  // 行內代碼
  html = html.replace(/`(.*?)`/gim, '$1')

  // 無序列表
  html = html.replace(/^\* (.*$)/gim, '$1
 ')

  // 換行
  html = html.replace(/\n/gim, '
')

  return html
})



.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;
}

效果圖位

用 DevUI MateChat 搭一個企業知識庫 Copilot_結構化_10

用 DevUI MateChat 搭一個企業知識庫 Copilot_html_11

測評亮點

● Markdown 在知識庫/研發 Copilot 裏就是默認答案格式

● 官方組件能避免風格不統一、主題不兼容的後續維護成本

3.4 結構化結果區：DevUI Card + Tabs + Form

企業 Copilot 還要做一件事：

把 AI 答案轉成可落地的工單/流程數據。

我用 DevUI 的 d-card / d-tabs / d-form / d-input 來承載工具結果：

● 與 DevUI 設計體系一致

● 企業級表單/佈局成熟省事

● 自帶主題體系，能和 MateChat 融合

代碼示例

測評亮點

● DevUI 的企業級中後台組件覆蓋面很完整，做“AI 結果落地頁”基本不缺件

● MateChat 負責對話體驗，DevUI 負責業務落地容器，搭配自然

4.  完整 Demo 倉庫

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

● 可直接跑的 Vue3 工程

● 組件使用清單

● 一鍵啓動説明

倉庫地址

● MateChat 官方倉庫：DevCloudFE/MateChat（歡迎 star/issue 共建）AtomGit | GitCode - 全球開發者的開源社區,開源代碼託管平台

運行方式

pnpm i
pnpm dev
**完整頁面代碼**（KnowledgeBaseCopilot.vue） - 三大區塊集成示例
```vue

  
    
      企業知識庫 Copilot
      基於 DevUI + MateChat 的智能助手
    

    
      
      
        
        

        
        
          
            
          
        

        
        
          
          
            {{ loading ? '生成中...' : '發送' }}
          
        
      

      
      
        
          
            
              
                
                  
                
                
                  
                
                
                  
                
              
            

            
              
                {{ source.title }}
                {{ source.category }} · 相關度 {{ source.score }}%
              
            

            
              
                
                {{ item.text }}
              
            
          
        
      
    
  



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)
}



.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;
}

5.  生態共建展望：MateChat 未來三件事，社區最需要補位

用 DevUI MateChat 搭一個企業知識庫 Copilot_結構化_12

基於我在這個真實場景裏的體驗，我認為 DevUI MateChat 生態要從組件庫進化為場景平台，關鍵在三條線：

5.1 Prompt / Tool / Agent 插件市場

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

醫療問診、工業巡檢、農業測產、客服話術……都不同。

MateChat 已經把通用交互做成場景件，下一步可開放：

● Prompt 模板插件

● Tool Calling 結果展示插件（表格/圖表/工單回填）

● Agent 多步任務可視化插件

讓生態從你來用組件變成你來賣場景。

用 DevUI MateChat 搭一個企業知識庫 Copilot_html_13

// 代碼示例



// Tool Calling 返回結構化數據
{
  "tool": "create_ticket",
  "params": {
    "title": "研發工單創建流程諮詢",
    "priority": "P3",
    ...
  }
}

5.2 場景共創倉（scenarios）

對標社區常見做法，官方可以建立 scenarios 倉：

● 每個場景一個可運行 demo

● 標準化貢獻（説明文檔 + 截圖 + 性能指標）

● 對應的 MateChat 組件組合方式

這樣新人能直接抄場景落地，而不是從零拼積木。

5.3 與華為雲 AI 服務的組合落地腳手架

MateChat 本身是 UI 場景層，但企業落地要全鏈路：模型服務、鑑權、知識庫檢索、監控……

如果官方給出MateChat + 雲上大模型服務的腳手架模板，會極大降低真實業務接入門檻。

用 DevUI MateChat 搭一個企業知識庫 Copilot_html_14

用 DevUI MateChat 搭一個企業知識庫 Copilot_開發者_15

基於這個真實 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 - 全球開發者的開源社區,開源代碼託管平台