界面定制

MeetingKit 提供了灵活的界面定制能力，允许第三方开发者根据业务需求显示或隐藏特定功能、自定义底部工具栏按钮以及重写部分界面样式。本文档详细介绍了主要的界面定制方式。

功能可见性控制

通过 setFeatureVisible 方法可以动态显示或隐藏特定功能模块。

使用示例

提示

请在 uiMeetingKit.createClient() 之前调用此方法

import { uiMeetingKit } from '@xylink/meetingkit';

uiMeetingKit.setFeatureVisible({
   enableIM: false // 隐藏聊天功能
});

支持隐藏的功能键名

功能键名	说明	默认值	备注
enablePip	画中画	true
enableVirtualBackground	虚拟背景	false
enableIM	聊天	true	公有云暂不支持，需手动设置为false
enableWhiteboard	白板	true
enableAnnotation	批注	true
enableVersionInfo	显示版本信息	true
enableShareContent	分享内容	true
enableInvite	邀请	true
enableConferenceLink	会议链接	true

底部按钮自定义配置

MeetingKit SDK 提供了灵活的底部工具栏自定义能力，允许开发者完全掌控会议底部按钮的显示、行为和外观。通过自定义配置，可以：

1. 添加新功能按钮 - 扩展会议功能，集成业务特定操作

2. 修改现有按钮 - 调整默认按钮的行为、样式或显示条件

3. 隐藏不需要的按钮 - 简化界面，聚焦核心功能

4. 重新排序按钮 - 根据使用频率和重要性调整按钮位置

5. 条件性显示 - 基于用户角色、会议状态等条件动态显示/隐藏按钮

实现方法

通过向 XYMeetingKitComp 组件的 footerCustomButtons 参数传递配置数组，即可实现底部按钮的自定义配置（当前仅支持PC端）。

准备

1、了解默认按钮配置

2、键名使用原则

使用正确key值：引用或覆盖按钮时务必使用准确的key值
避免键名冲突：自定义按钮使用唯一的key值，不要与默认按钮重复
小写敏感：key值区分大小写，请保持一致性

配置参数

import { XYMeetingKitComp } from '@xylink/meetingkit';

<XYMeetingKitComp
  visible={visible}
  footerCustomButtons={[]}
/>
    
export interface XYCustomButtonConfig {
  key: string;                    // 按钮唯一标识符（必需）,使用已存在的 key 值会覆盖默认按钮配置
  label?: string | ReactNode;     // 按钮显示文字
  icon?: string | ReactNode;      // 按钮图标
  position?: XYButtonPosition;      // 按钮位置：'left' | 'middle' | 'right'
  className?: string;             // 自定义CSS类名
  order?: number;                 // 显示顺序（数值越小越靠前）
  show?: boolean | (() => boolean); // 显示条件（布尔值或函数）
  priority?: XYButtonPriority;    // 隐藏优先级：MUST_SHOW | HIGH | MEDIUM | LOW
  defaultHidden?: boolean;        // 是否默认隐藏在"更多"菜单中
  closeParentDialog?: boolean;    // 点击后是否关闭父级弹窗
  popover?: XYPopoverProps;       // 气泡弹窗配置
  onClick?: (context?: any) => void | Promise<void>; // 点击回调函数
  component?: React.ComponentType<any>; // 自定义React组件
}

默认按钮

1、左侧区域按钮

左侧区域放置最核心的会议控制功能，这些按钮通常具有最高优先级

lable	键名（key）	顺序（order）	显示条件(show)
静音/取消静音	`audio`	1	始终显示
开启视频/关闭视频	`video`	2	始终显示

2、中间区域按钮

中间区域包含主要的会议功能和工具按钮，按优先级和功能分组

lable	键名 (key)	顺序（order）	隐藏优先级（priority）	显示条件(show)
共享	`share`	1	HIGH	非移动端
会议录制	`record`	2	MEDIUM	非移动端
邀请	`invite`	3	LOW	非移动端
参会者(主持会议)	`participant`	4	HIGH	始终显示
窗口布局	`layoutSelect`	5	MEDIUM	非移动端
开启字幕	`subtitle`	6	LOW	非移动端
白板	`whiteboard`	7	MEDIUM	非移动端
批注	`annotation`	8	LOW	非移动端
聊天	`im`	9	MEDIUM	非移动端
设置	`setting`	10	LOW	非移动端

3、右侧区域按钮

右侧区域放置重要的操作按钮，通常是会议的关键操作

lable	键名 (key)	顺序（order）	显示条件(show)
结束	`endCall`	1	非移动端

自定义配置示例

添加自定义按钮

import { XYMeetingKitComp } from '@xylink/meetingkit';

const customButtons = [
  {
    key: 'customer-support',
    label: '客服支持',
    icon: <SupportIcon />,
    position: XYButtonPosition.MIDDLE,
    order: -1,
    priority: XYButtonPriority.MEDIUM,
    onClick:()=>{}
  },
  {
    key: 'feedback',
    label: '反馈',
    icon: <FeedbackIcon />,
    position: XYButtonPosition.MIDDLE,
    order: -1,
    priority: XYButtonPriority.LOW,
    className: 'custom-feedback-btn',
    onClick: ()=>{}
  }
];

<XYMeetingKitComp
  footerCustomButtons={customButtons}
  // 其他配置...
/>

默认按钮	自定义按钮

设置界面语言

通过调用setLocale设置MeetingKit国际化语言

示例代码

import { uiMeetingKit } from '@xylink/meetingkit';

// 设置界面语言为英文
uiMeetingKit.setLocale('en-US');

// 设置界面语言为中文
uiMeetingKit.setLocale('zh-CN');

// 设置界面语言为繁体
uiMeetingKit.setLocale('zh_TW');

英文	繁体

换肤配置

MeetingKit支持通过主题配置来自定义界面外观，包括背景色、字体颜色、图标颜色等。

实现方法

通过MeetingKit提供的useTheme方法，传入主题变量themeVariables来实现主题色更换。以下是详细配置方法：

设置主题色

1. 基础主题设置

只需配置主色调，即可实现整体主题色更换。

import { useTheme } from '@xylink/meetingkit';
  
useTheme({themeVariables: {
    colorPrimary: '#14B194',
}});

2.完整主题配置

如需精细控制各个UI元素，可详细配置所有颜色变量。

import { useTheme } from '@xylink/meetingkit';
  
useTheme({themeVariables: {
    b1: '#14B194',      // 主要按钮/重要元素
    b2: '#5ce0c2',      // 悬浮状态
    b3: '#0e7a69',      // 点击状态
    b4: '#e6f7f3',      // 浅色背景
    b5: '#a8f0e3',      // 边框/分隔线
    b6: '#0a5549',      // 深色文字
    b7: '#f0fdfa',      // 超浅背景
    b8: '#14B194',      // 特殊元素/图标
    icon1_a: '#14B194', // 主要图标颜色
    icon1_b: '#0e7a69', // 次要图标颜色
    gradient3_b: 'linear-gradient(135deg, #14B194, #0e7a69)' // 渐变背景
}});

CSS自定义变量

通过CSS变量方式定义主题：

:root {
  --xy-b1:#14B194;
  --xy-b2:#5ce0c2;
  --xy-b3:#0e7a69;
  --xy-b4:#e6f7f3;
  --xy-b5:#a8f0e3;
  --xy-b6:#0a5549;
  --xy-b7:#f0fdfa;
  --xy-b8:#14B194;
  --xy-icon1_a:#14B194;
  --xy-icon1_b:#0e7a69;
  --xy-gradient3_b:linear-gradient(135deg, #14B194, #0e7a69);
}

动态切换主题

useTheme提供updateTheme方法，支持动态切换主题：

import { useTheme } from '@xylink/meetingkit';
  
const { updateTheme } = useTheme({themeVariables: {
    colorPrimary: '#14B194',
}});

// 点击按钮切换主题
<div onClick={()=>{updateTheme({ colorPrimary: '#3876ff' })}}>切换主题</div>

默认主题色	自定义主题色

2025-09-12 17:22:35

导出PDF文档