·一键切换场景主题 (Style Preset)：只需一行配置，即可加载商务等行业专属主题，快速匹配页面气质。
·按需裁剪界面布局：灵活隐藏或开启特定的功能模块，减少非关键干扰，聚焦核心流程。
·强大的扩展能力：支持无缝嵌入你的专属业务组件（如自定义功能按钮、悬浮业务卡片等），兼顾标准化与灵活性。
一、前置条件
从 GitHub 下载 TUILiveKit Demo 源码，安装依赖，并且完成相关账号信息配置，可参考 跑通 Demo。
二、如何加载不同界面
以商务场景为例：在应用根组件 App.vue 中，仅需要为 UIKitProvider 增加 style-preset="business"即可。
<UIKitProvider theme="dark" style-preset="business"> <router-view /></UIKitProvider>
三、商务场景
商务场景（business）是我们为企业页面和客户演示场景提供的一套直播界面风格。相比于默认风格，它的核心目标是：让页面更专业、更稳重、更容易建立信任感。
商务场景预设对界面进行了以下优化：
| 优化维度 | 具体调整 | 设计意图 |
| 视觉色调 | 采用深色系背景 + 低饱和度的强调色 | 营造沉稳、专业的视觉氛围，契合企业品牌调性 |
| 布局结构 | 精简顶部信息区，突出视频主体 | 减少视觉干扰，让观众聚焦于演示内容 |
| 控件风格 | 底部栏采用简洁的图标式设计，悬停时显示文字提示 | 保持界面清爽的同时，确保功能可发现性 |
| 交互反馈 | 采用微妙的过渡动画和状态变化 | 传递精致、可靠的产品质感 |
| 信息密度 | 隐藏娱乐向元素（如礼物特效、弹幕动画等） | 聚焦核心业务流程，适配正式的商务沟通场景 |
四、自定义底部栏按钮
注意：说明：
注意：我们的商务场景 UI 属于专业定制，能满足大多数标准企业需求。同时，也为了适配你独特的品牌诉求，我们开放了强大 UI 自定义接口与插槽能力。
底部控制栏是高频操作区域，通过提供底部栏的 UI 定制接口，你可以轻松打通直播间与自身业务的闭环：
·替换默认控件：将默认的“画中画”、“切换分辨率”或“全屏”等按钮，替换为你团队自行设计的、符合品牌规范的 UI 图标。
·新增业务入口：在底部栏中插入“联系专属顾问”、“一键分享”或“下载白皮书”等自定义功能按钮。
// 示例：底部栏增加联系顾问按钮<script setup lang="ts">import { useLivePlayerState } from 'tuikit-atomicx-vue3';import ConsultIcon from './icons/ConsultIcon.vue'; // 建议替换为你项目中实际的客服或顾问图标组件const { addCustomButtons } = useLivePlayerState();const handleConsultClick = () => { // TODO: 替换为你的真实业务闭环，例如：唤起一个企业微信客服弹窗、打开侧边留资抽屉，或者跳转到第三方客服链接 console.log('触发联系顾问操作，准备唤起业务弹窗…'); alert('你好，你的专属业务顾问即将为你服务！'); };addCustomButtons([ { id: 'contact-consultant', icon: ConsultIcon, onClick: handleConsultClick, tooltip: '联系顾问', position: 'end', },]);</script>
五、自定义视频区域
视频区域是整个页面的核心视觉焦点。利用视频区域的图层叠加插槽，你可以在视频流上方悬浮任何自定义的 UI 元素：
·品牌水印与贴片：在视频画面的角落固定展示企业的 Logo、专属活动水印或版权声明，增强品牌曝光；
·动态业务面板：在视频上方悬浮展示主讲人的详细介绍卡片、实时滚动的数据看板。
// 示例：视频区域增加企业 Logo 水印<LiveView> <template #center-overlay> <div class="brand-watermark"> <img src="/your-company-logo.png" alt="Logo" /> </div> </template></LiveView>
注意：如需获取更多关于上述 UI 自定义接口或插槽的详细使用说明，详细请参见 直播视频组件。