Vue UIKit 聊天元件
Vue UIKit 是 @deeprespond/im-web 和 @deeprespond/im-web-vue 之上的獨立 Vue 3 元件庫，可在業務頁面組合會話、聊天視窗、好友與群組，也可直接嵌入完整 ChatApp。執行時不依賴 React；Vue 繫結負責訂閱和生命週期，UIKit 負責互動和樣式。
當前版本為 1.1.1，已釋出到公共 npm，也可以從原始碼構建本地 tgz 包，倉庫中另有開發示例。支援 Vue 3.3 及以上（已用 Vue 3.5.43 實測）。介面範圍與 React UIKit 相同，不包含音視訊通話、聊天室、獨立頻道和複雜轉發。
構建與安裝
Node.js >= 20.19，推薦 Node 22、pnpm 9。在業務專案直接安裝（宿主提供 Vue 3）：
pnpm add vue@^3.3 @deeprespond/im-web@1.1.1 @deeprespond/im-web-vue@1.1.1 @deeprespond/im-web-vue-uikit@1.1.1建議固定版本。
需要本地構建時，在倉庫根目錄執行：
pnpm --dir sdk/web install
pnpm --dir sdk/web build
pnpm --dir sdk/web-vue install
pnpm --dir sdk/web-vue build
pnpm --dir sdk/web-vue-uikit install
pnpm --dir sdk/web-vue-uikit pack --pack-destination /tmp/vue-uikit-package在獨立業務專案安裝核心、Vue 繫結和本地元件包：
pnpm add vue@^3.3 @deeprespond/im-web@1.1.1 @deeprespond/im-web-vue@1.1.1
pnpm add /tmp/vue-uikit-package/deeprespond-im-web-vue-uikit-1.1.1.tgz元件包已編譯為 ESM，包含 SFC 型別宣告，不要求業務複製示例原始碼。必須單獨匯入樣式。
最小接入
<script setup lang="ts">
import { onBeforeUnmount } from 'vue';
import { createDRClient } from '@deeprespond/im-web';
import { UIKitProvider, ChatApp } from '@deeprespond/im-web-vue-uikit';
import '@deeprespond/im-web-vue-uikit/styles.css';
const client = createDRClient({
appKey: 'your-org#your-app',
apiUrl: 'https://your-im-api.example.com',
autoMarkRead: true,
});
// 在业务登录流程中取得短期 Ticket，再调用并捕获失败：
// await client.auth.loginWithTicket({ ticket });
onBeforeUnmount(() => { void client.destroy(); });
</script>
<template>
<section style="height: 640px">
<UIKitProvider :client="client" theme="light">
<ChatApp @logout="client.auth.logout()" />
</UIKitProvider>
</section>
</template>- 客戶端由你的應用建立和管理。UIKit 解除安裝時不會退出登入或銷燬客戶端。
UIKitProvider已為內部元件提供 Vue 繫結，不需要再安裝createDRPlugin；它也不會改動你的應用已經安裝的 Vue 繫結外掛。- 換了客戶端或登入了另一個使用者時，介面整體重建，不會殘留上一個使用者的訊息、草稿和通知。
LoginPanel 預設只提供 Ticket 登入；傳 allowPassword、allowRegistration 才顯示密碼登入和註冊。正式專案請由自己的服務端簽發 Ticket，不要把 App Secret 放進瀏覽器。
Nuxt 等服務端渲染的應用：在瀏覽器端的生命週期中建立客戶端（可以包在 <ClientOnly> 中），不要在服務端的多個請求之間共用一個客戶端。在 Node 中匯入元件包已經過測試，但還沒有在 Nuxt 專案中實測。
可組合元件
| 元件 | 用途 / 事件 |
|---|---|
| UIKitProvider / useUIKit | 例項級 client、主題、功能開關、中文錯誤與通知 |
| ChatApp | 整體介面；v-model:conversation-key、@conversation-change、@logout；header / empty / signed-out 插槽 |
| ChatWindow | conversationKey、可選 conversation、@close |
| ConversationList | currentKey、@open(key, conversation) |
| ContactList | 好友、申請、備註、黑名單；@open-peer(username) |
| GroupList / GroupMembers | 建群、成員、角色、邀請、移出、退出與解散；@open-group / @open-peer / @close |
| MessageBubble | 受控展示；message、conversation、renderBody、@resend |
| MessageComposer | v-model、@send、附件與語音事件；錄音、引用、停用狀態 |
| LoginPanel / ConnectionBanner | 登入和連線狀態 |
| Avatar / Modal / Spinner | 基礎 UI；Modal 管理焦點及巢狀 Escape，提供預設 / footer 插槽 |
不傳 conversationKey 時，ChatApp 自己管理當前選中的會話；傳入後由你控制，null 表示沒有選中。草稿會話變為正式會話時會通知新的會話鍵。輸入區（MessageComposer）本身不傳送訊息：由你處理 @send、@file(file, kind) 等事件並呼叫 SDK。
主題、能力與訊息定製
- 主題：Provider 支援
theme="dark"，主題通過元件內的 CSS 變數設定，不會修改頁面的html、body、localStorage或主題設定。同一頁面的多個 Provider 互不影響，但不要巢狀 Provider。容器要有明確的高度，寬度小於 760px 時自動切換為單欄並提供返回按鈕。 - 功能開關：
features可以關閉images、files、voice。readOnly和readOnlyReason停用輸入、附件和錄音；它只是介面上的限制，不代替服務端的許可權檢查，也不會禁止好友或群組的其他操作。群主和普通成員看到的管理入口不同；是否顯示錶情回應按應用策略決定。 - 自定義訊息：
renderMessage(message)返回 Vue VNode 來定製訊息內容，返回undefined時使用內建的顯示。單獨使用MessageBubble時可以傳renderBody。文本預設經過 Vue 轉義，只識別 HTTP(S) 連結；圖片、語音和檔案通過 SDK 帶鑑權下載。 - 錯誤：
formatError自定義錯誤文案，onError(error, action)可以接入你的監控。
示例與驗證
pnpm --dir sdk/web-vue-uikit/demo install
pnpm --dir sdk/web-vue-uikit/demo dev示例執行在 http://127.0.0.1:5199。用環境變數 VITE_IM_APPKEY、VITE_IM_APIURL 配置，或在地址中帶上 URL 編碼的 appKey、apiUrl 引數。開發時示例直接載入倉庫中的元件原始碼。
已測試的環境：Vue 3.5 + 瀏覽器，連線真實的 IM 服務端，覆蓋兩個使用者互發訊息、傳送失敗等場景，桌面和窄屏都截圖檢查過。尚未實測：其他瀏覽器、其他 Vue 版本、真實錄音、大量訊息時的效能，上線前請在你的目標環境中驗證。詳細結果見倉庫中的測試報告目錄 Agent测试/VueUIKit/20261022/；完整的引數、啟動和測試指令碼見元件的 README。