Tencent-RTC · l-outsider · Apr 9, 2026
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,35 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#1D3137",
+        "titleBar.activeBackground": "#28444C",
+        "titleBar.activeForeground": "#F8FAFB",
+        "terminal.background": "#231F20",
+        "terminal.foreground": "#D9D8D8",
+        "terminalCursor.background": "#D9D8D8",
+        "terminalCursor.foreground": "#D9D8D8",
+        "terminal.ansiBlack": "#231F20",
+        "terminal.ansiBlue": "#009DDC",
+        "terminal.ansiBrightBlack": "#737171",
+        "terminal.ansiBrightBlue": "#009DDC",
+        "terminal.ansiBrightCyan": "#85CEBC",
+        "terminal.ansiBrightGreen": "#00853E",
+        "terminal.ansiBrightMagenta": "#98005D",
+        "terminal.ansiBrightRed": "#EE2E24",
+        "terminal.ansiBrightWhite": "#FFFFFF",
+        "terminal.ansiBrightYellow": "#FFD204",
+        "terminal.ansiCyan": "#85CEBC",
+        "terminal.ansiGreen": "#00853E",
+        "terminal.ansiMagenta": "#98005D",
+        "terminal.ansiRed": "#EE2E24",
+        "terminal.ansiWhite": "#D9D8D8",
+        "terminal.ansiYellow": "#FFD204",
+        "titleBar.inactiveBackground": "#1D3136",
+        "titleBar.inactiveForeground": "#F7FAFB",
+        "statusBar.background": "#1D3136",
+        "statusBar.foreground": "#F7FAFB",
+        "statusBar.debuggingBackground": "#1D3136",
+        "statusBar.debuggingForeground": "#F7FAFB",
+        "statusBar.noFolderBackground": "#1D3136",
+        "statusBar.noFolderForeground": "#F7FAFB"
+    }
+}
diff --git a/README.md b/README.md
@@ -1 +1,107 @@
-# TUIKit_Vue3
+# Tencent Cloud RTC TUIKit for Vue 3
+
+[English](./README.md) | [简体中文](./README_ZH.md)
+
+A **core Vue 3 component library** for Tencent Cloud RTC TUIKit, designed for three major real-time scenarios: **Chat** (instant messaging), **Live** (interactive live streaming), and **Room** (multi-user audio/video rooms).
+
+It provides production-ready UI components together with reactive state modules, so you can either use components independently or compose them into complete scenario-based experiences.
+
+## Key Features
+
+| Feature | Description |
+| ------ | ------ |
+| **Scenario-oriented UI components** | Covers Chat, Live, and Room scenarios. Components can be used individually or freely composed. |
+| **Reactive state management** | Each component is backed by fine-grained reactive data and action methods. |
+| **Scenario-based exports** | Import only what you need through `./chat`, `./live`, and `./room` sub-entries to reduce bundle size. |
+| **Internationalization** | Built-in multi-language support based on i18next. |
+| **Type safety** | Ships with complete TypeScript type definitions. |
+
+## Component Structure (`src/components/`)
+
+### Chat
+
+| Component | Description |
+| ------ | ------ |
+| `ConversationList/` | Conversation list with conversation preview, search, and actions. |
+| `MessageList/` | Message list with message rendering and custom message support. |
+| `MessageInput/` | Message input box with emoji, image, file, video, and audio/video call pickers. |
+| `ChatSetting/` | Conversation settings panel for C2C and group chats. |
+| `ContactList/` | Contact list and contact detail modules. |
+| `Search/` | Global search and message search. |
+
+### Live
+
+| Component | Description |
+| ------ | ------ |
+| `LiveView/` | Live streaming view for pushing and playing streams. |
+| `LiveList/` | Live room list. |
+| `LiveScenePanel/` | Aggregated panel for live-scene feature entry points. |
+| `BarrageInput/` | Barrage input. |
+| `BarrageList/` | Barrage message list. |
+| `LiveGift/` | Gift panel and gift animation effects. |
+| `LiveAudienceList/` | Audience list. |
+| `LiveMonitorView/` | Live monitoring view. |
+| `CoGuestPanel/` | Co-guest panel. |
+| `CoHostPanel/` | Host PK panel. |
+| `StreamMixer/` | Stream mixing control. |
+
+### Room
+
+| Component | Description |
+| ------ | ------ |
+| `RoomView/` | Main audio/video room view. |
+| `RoomParticipantList/` | Participant list. |
+| `RoomParticipantView/` | Participant video view. |
+| `ScheduleRoomPanel/` | Scheduled meeting panel. |
+| `VirtualBackgroundPanel/` | Virtual background settings. |
+| `FreeBeautyPanel/` | Beauty effect settings panel. |
+| `ASRTools/` | Speech recognition tools, including subtitles and real-time transcription. |
+
+### Common
+
+| Component | Description |
+| ------ | ------ |
+| `Avatar/` | Avatar component. |
+| `UserPicker/` | User picker. |
+
+## State Management (`src/states/`)
+
+Each business domain maps to an independent state module. Every module exposes reactive data and action methods through `useXxxState()` hooks.
+
+- **Common**: `LoginState`
+- **Chat**: `ConversationListState`, `MessageListState`, `MessageInputState`, `ContactListState`, `SearchState`, `C2CSettingState`, `GroupSettingState`, `MessageActionState`
+- **Live**: `LiveListState`, `LivePlayerState`, `LiveSeatState`, `LiveGiftState`, `BarrageState`, `BattleState`, `CoGuestState`, `CoHostState`, `LiveAudienceState`, `LiveMonitorState`, `VideoMixerState`
+- **Room**: `RoomState`, `RoomParticipantState`, `DeviceState`, `AITranscriberState`, `FreeBeautyState`, `VirtualBackgroundState`
+
+## Export Strategy (`src/subEntry/`)
+
+```text
+subEntry/
+├── common/    # shared exports: LoginState, Avatar, UserPicker
+├── chat/      # chat exports: conversation, message, contact, search components and states
+├── live/      # live exports: live view, barrage, gifts, co-guest, and related states
+└── room/      # room exports: room view, participants, virtual background, and related states
+```
+
+The upper-level packages can selectively re-export modules by scenario. For example, `@tencentcloud/chat-uikit-vue3` only re-exports `common` and `chat`.
+
+## Package Entry Overview
+
+The core package in this repository is `tuikit-atomicx-vue3`, which exposes the following entry points:
+
+- `tuikit-atomicx-vue3`
+- `tuikit-atomicx-vue3/chat`
+- `tuikit-atomicx-vue3/live`
+- `tuikit-atomicx-vue3/room`
+
+This makes it easier to build scenario-specific applications while keeping imports explicit and tree-shakable.
+
+## Demo Projects (`demos/`)
+
+The `demos/` directory contains runnable sample applications and scenario showcases built on top of this component library.
+
+| Demo | Description |
+| ------ | ------ |
+| `rtcube-vite-vue3/` | A comprehensive RTC experience demo that combines multiple Tencent Cloud RTC scenarios and products, including Chat, Call, and other experience-oriented pages. It is the best starting point if you want to see how different capabilities work together in one app. |
+| `live-monitor-vue3/` | A real-time live stream monitoring demo for viewing and managing multiple live rooms concurrently. It includes both a Vue 3 frontend and a lightweight `server/` backend for monitoring-related workflows. |
+| `industry-showcase/` | A directory for vertical-industry showcases. It currently includes a medical consultation demo and shows how Chat UIKit can be customized with industry-specific UI, cards, quick replies, patient information panels, and call integration. |
diff --git a/README_ZH.md b/README_ZH.md
@@ -0,0 +1,93 @@
+# UIKit Component Vue3
+
+腾讯云 RTC UIKit 的 **Vue 3 核心组件库**，为 Chat（即时通信）、Live（互动直播）、Room（多人音视频房间）三大场景提供开箱即用的 UI 组件与响应式状态管理。
+
+## 核心能力
+
+| 能力 | 说明 |
+|------|------|
+| **场景化 UI 组件** | 覆盖 Chat、Live、Room 三大场景，每个组件可独立使用或自由组合 |
+| **响应式状态管理** | 每个组件提供细粒度的响应式数据与操作方法 |
+| **按场景导出** | 通过 `subEntry/chat`、`subEntry/live`、`subEntry/room` 按需引入，减小打包体积 |
+| **国际化** | 内置 i18next 多语言支持 |
+| **类型安全** | 完整的 TypeScript 类型定义 |
+
+## 组件目录结构 (`src/components/`)
+
+### Chat 场景
+
+| 组件 | 说明 |
+|------|------|
+| `ConversationList/` | 会话列表，包含会话预览、会话搜索、会话操作等子组件 |
+| `MessageList/` | 消息列表，包含消息渲染、自定义消息等子组件 |
+| `MessageInput/` | 消息输入框，包含表情、图片、文件、视频、音视频通话等 Picker |
+| `ChatSetting/` | 会话设置面板（C2C / 群组设置） |
+| `ContactList/` | 联系人列表与联系人详情 |
+| `Search/` | 全局搜索与消息搜索 |
+
+### Live 场景
+
+| 组件 | 说明 |
+|------|------|
+| `LiveView/` | 直播视图（推流 / 拉流） |
+| `LiveList/` | 直播间列表 |
+| `LiveScenePanel/` | 直播场景面板（功能入口聚合） |
+| `BarrageInput/` | 弹幕输入 |
+| `BarrageList/` | 弹幕消息列表 |
+| `LiveGift/` | 礼物面板与礼物动效 |
+| `LiveAudienceList/` | 观众列表 |
+| `LiveMonitorView/` | 直播监控视图 |
+| `CoGuestPanel/` | 连麦面板 |
+| `CoHostPanel/` | 主播 PK 面板 |
+| `StreamMixer/` | 混流控制 |
+
+### Room 场景
+
+| 组件 | 说明 |
+|------|------|
+| `RoomView/` | 音视频房间主视图 |
+| `RoomParticipantList/` | 参会人列表 |
+| `RoomParticipantView/` | 参会人视频视图 |
+| `ScheduleRoomPanel/` | 预约会议面板 |
+| `VirtualBackgroundPanel/` | 虚拟背景设置 |
+| `FreeBeautyPanel/` | 美颜设置面板 |
+| `ASRTools/` | 语音识别工具（字幕、实时消息转写） |
+
+### 通用组件
+
+| 组件 | 说明 |
+|------|------|
+| `Avatar/` | 头像组件 |
+| `UserPicker/` | 用户选择器 |
+
+## 状态管理 (`src/states/`)
+
+每个业务领域对应一个独立的 State 模块，通过 `useXxxState()` Hook 暴露响应式数据和操作方法：
+
+
+- **Common**: `LoginState`
+- **Chat**: `ConversationListState`、`MessageListState`、`MessageInputState`、`ContactListState`、`SearchState`、`C2CSettingState`、`GroupSettingState`、`MessageActionState`
+- **Live**: `LiveListState`、`LivePlayerState`、`LiveSeatState`、`LiveGiftState`、`BarrageState`、`BattleState`、`CoGuestState`、`CoHostState`、`LiveAudienceState`、`LiveMonitorState`、`VideoMixerState`
+- **Room**: `RoomState`、`RoomParticipantState`、`DeviceState`、`AITranscriberState`、`FreeBeautyState`、`VirtualBackgroundState`
+
+## 导出机制 (`src/subEntry/`)
+
+```
+subEntry/
+├── common/    # 通用导出：LoginState、Avatar、UserPicker
+├── chat/      # Chat 场景导出：会话、消息、联系人、搜索等组件和状态
+├── live/      # Live 场景导出：直播视图、弹幕、礼物、连麦等组件和状态
+└── room/      # Room 场景导出：房间视图、参会人、虚拟背景等组件和状态
+```
+
+上层包按场景选择性地 re-export，例如 `@tencentcloud/chat-uikit-vue3` 只导出 `common` + `chat`。
+
+## Demo 目录 (`demos/`)
+
+`demos/` 目录包含基于该组件库构建的可运行示例工程和场景化展示项目。
+
+| Demo | 说明 |
+|------|------|
+| `rtcube-vite-vue3/` | 综合性的 RTC 体验 Demo，聚合了腾讯云 RTC 多种场景与产品能力，包括 Chat、Call 以及其他体验型页面。适合作为理解整体接入方式的首个入口。 |
+| `live-monitor-vue3/` | 实时直播监播 Demo，用于并发查看和管理多个直播间。项目同时包含 Vue 3 前端和轻量级 `server/` 后端，适合参考监播类业务流程。 |
+| `industry-showcase/` | 行业化展示 Demo 目录，当前包含医疗问诊等垂直场景示例，演示如何基于 Chat UIKit 做行业定制，例如主题 UI、自定义卡片、快捷回复、患者信息面板和音视频通话集成。 |
diff --git a/demos/industry-showcase/chat-medical-vue3/README.md b/demos/industry-showcase/chat-medical-vue3/README.md
@@ -0,0 +1,64 @@
+# Medical Chat Showroom
+
+A standalone medical consultation chat demo built with [Tencent Cloud Chat UIKit](https://www.tencentcloud.com/document/product/1047).
+
+This project demonstrates how to customize Chat UIKit for the **medical consultation** vertical industry, featuring:
+
+- 🏥 Medical-themed UI (green primary color)
+- 📋 Medical record cards & prescription cards
+- 💬 Quick reply & rating pickers
+- 🩺 Patient info panel
+- 📞 Audio/Video call integration
+- 🔍 Conversation status filter (Pending / In Progress / Completed)
+
+## Quick Start
+
+### Prerequisites
+
+- Node.js >= 18
+- pnpm (recommended) or npm
+
+### 1. Install dependencies
+
+```bash
+pnpm install
+```
+
+### 2. Get credentials
+
+Go to [IM Console](https://console.cloud.tencent.com/im) to get:
+- **SDKAppID**
+- **UserID**
+- **UserSig** (generate from [UserSig Tool](https://console.cloud.tencent.com/im/tool-usersig))
+
+### 3. Run
+
+```bash
+pnpm dev
+```
+
+Open the browser, enter your credentials, and start chatting!
+
+## Project Structure
+
+```
+src/
+├── App.vue                     # Login/Chat state machine
+├── MedicalChat.vue             # Main medical chat layout
+├── components/
+│   ├── Login.vue               # Login form
+│   ├── SideTab/                # Side navigation (conversation/contact tabs)
+│   └── Medical/
+│       ├── cards/              # Custom message cards (record, prescription, rating)
+│       ├── pickers/            # Toolbar pickers (quick reply, prescription, etc.)
+│       ├── ConversationFilterBar.vue
+│       ├── MedicalChatSetting.vue
+│       ├── MedicalConversationPreview.vue
+│       ├── MedicalConversationTitle.vue
+│       ├── MedicalMessageRenderer.vue
+│       └── PatientInfoPanel.vue
+```
+
+## License
+
+MIT
diff --git a/demos/industry-showcase/chat-medical-vue3/index.html b/demos/industry-showcase/chat-medical-vue3/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Medical Chat Showroom</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/demos/industry-showcase/chat-medical-vue3/package.json b/demos/industry-showcase/chat-medical-vue3/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "showroom-chat-medical",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.4.31",
+    "@tencentcloud/chat-uikit-vue3": "^5.5.0",
+    "@tencentcloud/uikit-base-component-vue3": "^1.4.0",
+    "@trtc/calls-uikit-vue": "^4.4.0",
+    "lucide-vue-next": "^1.0.0",
+    "tdesign-vue-next": "^1.18.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "sass": "^1.77.8",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.4",
+    "vue-tsc": "^2.0.24"
+  }
+}
diff --git a/demos/industry-showcase/chat-medical-vue3/src/App.vue b/demos/industry-showcase/chat-medical-vue3/src/App.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+import { medicalLanguageResources } from './locales';
+import Login from './components/Login.vue';
+import MedicalChat from './MedicalChat.vue';
+
+const MEDICAL_THEME = { themeStyle: 'light', primaryColor: '#2ba471' };
+
+const isLoggedIn = ref(false);
+const currentLanguage = ref('zh-CN');
+
+const handleLoginSuccess = () => {
+  isLoggedIn.value = true;
+};
+
+const handleLanguageChange = (lng: string) => {
+  currentLanguage.value = lng;
+};
+</script>
+
+<template>
+  <UIKitProvider :theme="MEDICAL_THEME" :language-resources="medicalLanguageResources" :language="currentLanguage">
+    <Login v-if="!isLoggedIn" @success="handleLoginSuccess" @language-change="handleLanguageChange" />
+    <MedicalChat v-else />
+  </UIKitProvider>
+</template>