公共组件与样式
RCUIKit/components 提供多个页面共用的基础 UI，RCUIKit/styles 管理公共基础样式和主题变量。需要统一修改多个页面的外观时，应优先从这些目录定位。
公共组件
导航栏
源码：RCUIKit/components/nav-bar.vue
导航栏负责状态栏占位、左中右布局和底部边框。主要属性如下：
| 属性 | 作用 |
|---|---|
title | 中间标题 |
leftText、rightText | 左右文字 |
leftIcon、rightIcon | 左右图标类型 |
statusBar | 是否包含状态栏高度 |
border | 是否显示底部分隔线 |
height | 导航栏高度 |
leftWidth、rightWidth | 左右区域宽度 |
fixed | 是否为固定导航栏 |
组件提供 left、默认和 right 插槽，并触发 clickLeft、clickTitle、clickRight 事件。只修改单个页面标题或操作按钮时，优先在页面中配置属性和插槽；需要统一改变高度、布局或状态栏处理时，再修改该组件。
头像
源码：RCUIKit/components/avatar.vue
头像组件基于 rc-icon.vue 展示图片，支持 src、size、borderRadius、defaultSrc 和 clickable。未传入 src 时使用默认群组头像。
修改建议：
- 调整单个场景的头像大小时，在调用处修改
size。 - 调整圆角时传入
borderRadius；组件内部仍以圆形图片模式渲染，若要统一改为非圆形头像，需要同步检查rc-icon.vue的circle使用方式。 - 会话列表会根据会话类型，通过
utils/index.ts中的generateDefaultAvatar选择用户、群组或系统默认头像，不只依赖avatar.vue的默认值。
徽标
源码：RCUIKit/components/badge.vue
徽标仅在 count > 0 时显示，支持 count、max、color、bgColor。超过 max 后显示“上限+”，默认上限为 99。
若只需要调整免打扰会话的未读颜色，应 修改 conversation-item.vue 中传给 bgColor 的规则；如果要改变所有徽标的尺寸、圆角或默认颜色，再修改 badge.vue。
图标
源码：
RCUIKit/components/rc-icon.vue
RCUIKit/assets/icon/
RCUIKit/assets/index.ts
rc-icon.vue 支持通过 type 使用内置图标，或通过 src 直接传入资源，并支持 size、clickable、mode、spin、circle 和 customStyle。
新增内置图标时，需要：
- 将 SVG 文件放入
assets/icon/。 - 在
assets/index.ts中导入并转换资源。 - 将图标加入
iconType映射。 - 在页面或组件中通过
<rc-icon type="图标名称" />使用。
rc-icon.vue 已预留暗色主题说明，但当前 iconSrc 只按 type 读取单一资源映射。若要支持暗色图标，需要补充主题状态和资源选择逻辑。
长按菜单
源码：RCUIKit/components/long-press-popup.vue
长按菜单接收 options、margin、position 和 disabled：
options中的type对应图标类型，label对应菜单文字。position="auto"在目标元素上下方自动选择位置。position="touch"跟随触点，会话列表使用此模式。- 用户选择后触发
select，菜单显隐变化时触发showStatusChange。
该组件包含 App、H5、微信小程序和抖音小程序的定位差异，并且为兼容小程序使用选项式 API。修改定位、遮罩或触摸事件后，应分别验证目标平台，不要直接改写为组合式 API。
主题变量
源码：RCUIKit/styles/_variables.scss
该文件集中定义 RCUIKit 使用的字体、间距和颜色变量：
| 变量类别 | 示例 | 影响范围 |
|---|---|---|
| 字号 | $rc-font-size-base、$rc-font-size-regular、$rc-font-size-large | 会话项、消息、导航标题等 |
| 会话间距 | $rc-conversation-margin-base | 会话项内部间距 |
| 主色和链接色 | $rc-color-primary、$rc-color-functional-link | 选中态、链接和主要操作 |
| 文字颜色 | $rc-color-font-primary、$rc-color-font-secondary、$rc-color-font-accent | 主文字、摘要和提示文字 |
| 背景颜色 | $rc-color-bg-regular、$rc-color-bg-top、$rc-color-bg-selected | 页面、置顶和长按状态 |
| 功能颜色 | $rc-color-functional-hint、$rc-color-functional-border、$rc-color-functional-error | 未读提示、边框和错误状态 |
各 Vue 组件通过以下方式使用变量：
@use '../styles/_variables.scss' as var;
.example {
color: var.$rc-color-font-primary;
}
修改 _variables.scss 前，建议先搜索变量的全部引用，确认影响范围。组件内仍存在少量直接写入的颜色，例如徽标默认色和长按菜单背景色；如需完整主题化，还需要同步调整这些组件。
common.scss 的职责
源码：RCUIKit/styles/common.scss
common.scss 负责重置常见元素的外边距和内边距、设置默认字体 ，并约束应用根容器高度。多数路由页面通过 @use '../../styles/common.scss'; 引入它，宿主项目还需要按快速上手中的方式在 App.vue 中导入该文件。
颜色、字号和组件外观不要直接写入 common.scss。全局设计变量应修改 _variables.scss，具体组件外观应修改对应 .vue 文件。扩大 common.scss 的选择器范围可能影响宿主项目的全局样式。
修改与升级建议
- 先确定修改范围：单一页面改调用处，多个页面统一行为改公共组件，全局视觉改
_variables.scss。 - 保留 uni-app 条件编译块，尤其是状态栏、固定定位和触摸事件相关逻辑。
- 修改后至少验证会话列表、聊天页、转发页、视频播放页和阅读状态页，公共组件改动可能同时影响这 5 个路由页面。
- RCUIKit 为源码集成，升级覆盖目录前应保存本地差异，并在新版本中重新合并。