默认的直播界面能够帮您极速跑通流程，但真实的商业场景往往需要专属的品牌特点。为了让直播间完美契合您的业务诉求，TUILiveKit 观看端提供了三类灵活的 UI 控制能力：
一键切换场景主题
(Style Preset)：只需一行配置，即可加载商务等行业专属主题，快速匹配页面气质。按需裁剪界面布局：灵活隐藏或开启特定的功能模块，减少非关键干扰，聚焦核心流程。
强大的扩展能力：支持无缝嵌入您的专属业务组件（如自定义功能按钮、悬浮业务卡片等），兼顾标准化与灵活性。
前置条件
如何加载不同界面
以商务场景为例：在应用根组件
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>
注意：
