RCUIKit 源码介绍

RCUIKit 是一个开源的 uni-app 前端模板组件库，基于融云 Web IMLib SDK 开发的即时通讯（IM）UI 组件库，采用 Vue3 开发， 支持iOS、Android、Web等多端适配。

目录结构

RCUIKit/
├── assets/                        # 静态资源目录
├── components/                    # 公共组件目录
│   ├── avatar.vue                # 头像组件
│   ├── badge.vue                 # 徽标组件
│   ├── connect-status.vue        # 连接状态组件
│   ├── long-press-popup.vue      # 长按弹出菜单组件
│   ├── nav-bar.vue               # 导航栏组件
│   ├── rc-icon.vue               # 图标组件
│   └── uni-components/           # uni-app组件
├── constant/                      # 常量定义目录
├── enum/                         # 枚举类型目录
├── external/                     # 外部依赖目录
├── pages/                        # 页面目录
│   ├── chat/                     # 聊天功能模块
│   │   ├── forward-message.vue   # 消息转发页面
│   │   ├── index.vue            # 聊天主页面
│   │   ├── message/             # 消息相关组件
│   │   │   ├── manager/         # 消息管理器
│   │   │   │   └── audio-manager.ts  # 音频消息管理器
│   │   │   ├── message-bubble.vue    # 消息气泡组件
│   │   │   ├── message-input/        # 消息输入相关组件
│   │   │   │   ├── message-input-face.vue        # 表情输入组件
│   │   │   │   ├── message-input-toolbar-item.vue # 工具栏项组件
│   │   │   │   ├── message-input-toolbar.vue     # 输入工具栏组件
│   │   │   │   ├── message-input-voice-recorder.vue # 语音录制组件
│   │   │   │   └── message-input.vue             # 消息输入主组件
│   │   │   ├── message-item-common.vue           # 通用消息项组件
│   │   │   ├── message-item.vue                  # 消息项组件
│   │   │   ├── message-list.vue                  # 消息列表组件
│   │   │   ├── messageType/                      # 不同类型消息组件
│   │   │   │   ├── message-audio.vue            # 音频消息组件
│   │   │   │   ├── message-file.vue             # 文件消息组件
│   │   │   │   ├── message-image.vue            # 图片消息组件
│   │   │   │   ├── message-notification.vue     # 通知消息组件
│   │   │   │   ├── message-sight.vue            # 视频消息组件
│   │   │   │   └── message-text.vue             # 文本消息组件
│   │   │   ├── mention-member-list.vue          # @成员列表组件
│   │   │   └── select-member-item.vue           # 成员选择项组件
│   │   └── video-play.vue                       # 视频播放组件
│   └── conversation/                            # 会话功能模块
│       ├── conversation-item.vue                # 会话列表项组件
│       ├── conversation-list.vue                # 会话列表组件
│       └── index.vue                           # 会话主页面
├── styles/                                      # 样式目录
│   ├── _variables.scss                         # 样式变量
│   └── common.scss                             # 通用样式
└── utils/                                       # 工具函数目录

组件说明

基础组件

组件名称	功能	支持特性
avatar.vue	显示用户头像	支持默认头像
badge.vue	显示未读消息数等徽标	支持未读数背景颜色设置
connect-status.vue	显示网络连接状态	支持离线状态展示
long-press-popup.vue	长按弹出菜单	-
nav-bar.vue	导航栏组件	支持标题、返回按钮、右侧操作区
rc-icon.vue	图标组件	支持自定义图标、大小、颜色

开发规范

• 使用 Vue 3的Composition API（组合式API）进行组件开发
• 组件 props 使用 TypeScript 类型定义
• 组件事件遵循 Vue 的 emit 规范，使用 kebab-case 命名
• 样式使用 scoped 作用域

源码集成

您可以参考 快速集成 将 RCUIKit 源码集成至您的项目。